const Hero = () => {
  return (
    <section id="top" className="relative pt-44 md:pt-48 pb-20 md:pb-28 overflow-hidden">
      {/* Background grid + radial wash */}
      <div className="absolute inset-0 grid-bg grid-bg-fade pointer-events-none" />
      <div className="absolute -top-40 left-1/2 -translate-x-1/2 w-[900px] h-[900px] rounded-full pointer-events-none opacity-[0.10]"
        style={{ background: 'conic-gradient(from 200deg, #D6248C, #A14BCC, #7027A8, #1F2754, #D6248C)', filter: 'blur(80px)' }}
      />

      {/* Interactive berry constellation + click-to-launch rockets */}
      <RocketCanvas density={14}/>

      <div className="relative max-w-[1240px] mx-auto px-6 md:px-10">
        <div className="grid lg:grid-cols-12 gap-10 items-center">
          {/* LEFT: copy */}
          <div className="lg:col-span-7 reveal">
            <div className="inline-flex items-center gap-3 px-3 py-1.5 rounded-full border border-token surface mb-7">
              <SwirlMark size={16}/>
              <span className="text-[12px] font-mono uppercase tracking-[0.16em] text-muted">
                AI · Innovate · Elevate
              </span>
            </div>

            <h1 className="display text-[52px] sm:text-[68px] md:text-[84px] leading-[0.98]">
              Launch intelligent<br/>
              systems. Elevate<br/>
              <span className="brand-gradient-text">real outcomes.</span>
            </h1>

            <p className="mt-7 text-[18px] md:text-[20px] text-muted max-w-xl leading-relaxed">
              Rocketberry is an AI engineering firm that automates workflows, accelerates decisions, and transforms operations — built end-to-end with AI-Driven Development.
            </p>

            <div className="mt-9 flex flex-wrap items-center gap-3">
              <a href="#contact" className="btn btn-primary text-[15px] px-5 py-3">
                Book a demo <I.Arrow size={14}/>
              </a>
              <a href="#solutions" className="btn btn-ghost text-[15px] px-5 py-3">
                Explore solutions
              </a>
            </div>

            {/* Inline trust strip */}
            <div className="mt-12 flex items-center gap-6 text-[12px] text-muted font-mono uppercase tracking-[0.14em]">
              <div className="flex items-center gap-2"><span className="w-1 h-1 rounded-full bg-brand-purple"></span> SOC2-aligned</div>
              <div className="flex items-center gap-2"><span className="w-1 h-1 rounded-full bg-brand-navy"></span> Cloud-native</div>
              <div className="hidden sm:flex items-center gap-2"><span className="w-1 h-1 rounded-full bg-brand-magenta"></span> API-first</div>
            </div>
          </div>

          {/* RIGHT: animated AI workflow visual */}
          <div className="lg:col-span-5 relative reveal">
            <HeroVisual/>
          </div>
        </div>

        {/* Logo cloud */}
        <div className="mt-24 md:mt-32 reveal">
          <div className="text-center text-[11px] font-mono uppercase tracking-[0.2em] text-muted mb-7">
            Powered by the tools enterprise AI trusts
          </div>
          <LogoMarquee/>
        </div>
      </div>
    </section>
  );
};

const HeroVisual = () => {
  return (
    <div className="relative card p-6 md:p-7 shadow-card">
      <div className="flex items-center justify-between mb-5">
        <div className="flex items-center gap-2">
          <div className="flex gap-1.5">
            <span className="w-2.5 h-2.5 rounded-full bg-brand-magenta/60"/>
            <span className="w-2.5 h-2.5 rounded-full bg-brand-violet/70"/>
            <span className="w-2.5 h-2.5 rounded-full bg-brand-purple/70"/>
          </div>
          <span className="text-[11px] font-mono text-muted ml-2">aidd-pipeline.run</span>
        </div>
        <div className="flex items-center gap-1.5 text-[11px] font-mono text-brand-purple">
          <span className="w-1.5 h-1.5 rounded-full bg-brand-purple animate-pulse"/> live
        </div>
      </div>

      <svg viewBox="0 0 420 360" className="w-full h-auto" role="img" aria-label="AI workflow visualization">
        <defs>
          <linearGradient id="strokeFlow" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#D6248C"/>
            <stop offset="33%" stopColor="#A14BCC"/>
            <stop offset="66%" stopColor="#7027A8"/>
            <stop offset="100%" stopColor="#1F2754"/>
          </linearGradient>
          <linearGradient id="nodeFill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="rgba(0,0,0,0.02)"/>
            <stop offset="100%" stopColor="rgba(0,0,0,0)"/>
          </linearGradient>
        </defs>

        {/* connecting flowing paths */}
        <g fill="none" strokeWidth="1.5" stroke="url(#strokeFlow)" opacity="0.85">
          <path d="M70 90 C 140 90, 160 180, 230 180" className="dash-flow"/>
          <path d="M70 180 L 230 180" className="dash-flow" style={{animationDelay:'0.4s'}}/>
          <path d="M70 270 C 140 270, 160 180, 230 180" className="dash-flow" style={{animationDelay:'0.8s'}}/>
          <path d="M310 180 C 340 180, 350 100, 380 100" className="dash-flow" style={{animationDelay:'1.2s'}}/>
          <path d="M310 180 L 380 180" className="dash-flow" style={{animationDelay:'1.4s'}}/>
          <path d="M310 180 C 340 180, 350 260, 380 260" className="dash-flow" style={{animationDelay:'1.6s'}}/>
        </g>

        {/* Input nodes */}
        {[
          { y: 90, label: 'CRM events', color: '#D6248C' },
          { y: 180, label: 'Documents', color: '#A14BCC' },
          { y: 270, label: 'API streams', color: '#1F2754' },
        ].map((n,i) => (
          <g key={i}>
            <rect x="14" y={n.y-22} width="56" height="44" rx="10" fill="var(--surface)" stroke="var(--border)"/>
            <circle cx="28" cy={n.y} r="4" fill={n.color}/>
            <text x="38" y={n.y+1} fontSize="9" fontFamily="Geist Mono" fill="var(--muted)" alignmentBaseline="middle">{n.label}</text>
          </g>
        ))}

        {/* Center AI core */}
        <g>
          <circle cx="270" cy="180" r="46" fill="var(--surface)" stroke="var(--border)"/>
          <circle cx="270" cy="180" r="46" fill="none" stroke="url(#strokeFlow)" strokeWidth="1.5" strokeDasharray="3 4" opacity="0.6">
            <animateTransform attributeName="transform" type="rotate" from="0 270 180" to="360 270 180" dur="18s" repeatCount="indefinite"/>
          </circle>
          <circle cx="270" cy="180" r="32" fill="none" stroke="var(--border)"/>
          <text x="270" y="176" textAnchor="middle" fontSize="10" fontFamily="Geist Mono" fill="var(--muted)">AIDD</text>
          <text x="270" y="190" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--text)">core</text>
        </g>

        {/* Output nodes */}
        {[
          { y: 100, label: 'Decisions', color: '#7027A8' },
          { y: 180, label: 'Automations', color: '#1F2754' },
          { y: 260, label: 'Insights', color: '#D6248C' },
        ].map((n,i) => (
          <g key={i}>
            <rect x="358" y={n.y-22} width="56" height="44" rx="10" fill="var(--surface)" stroke="var(--border)"/>
            <circle cx="402" cy={n.y} r="4" fill={n.color}/>
            <text x="396" y={n.y+1} fontSize="9" fontFamily="Geist Mono" fill="var(--muted)" alignmentBaseline="middle" textAnchor="end">{n.label}</text>
          </g>
        ))}

        {/* Stat strip bottom */}
        <g>
          <line x1="14" y1="320" x2="406" y2="320" stroke="var(--border)"/>
          <text x="14" y="342" fontSize="9" fontFamily="Geist Mono" fill="var(--muted)">throughput</text>
          <text x="14" y="354" fontSize="11" fontWeight="600" fill="var(--text)">12,480 ops/min</text>

          <text x="160" y="342" fontSize="9" fontFamily="Geist Mono" fill="var(--muted)">latency p95</text>
          <text x="160" y="354" fontSize="11" fontWeight="600" fill="var(--text)">142 ms</text>

          <text x="280" y="342" fontSize="9" fontFamily="Geist Mono" fill="var(--muted)">accuracy</text>
          <text x="280" y="354" fontSize="11" fontWeight="600" fill="#7027A8">98.6%</text>
        </g>
      </svg>

      {/* Floating tag */}
      <div className="absolute -left-3 top-12 hidden md:block">
        <div className="card px-3 py-2 shadow-card text-[11px] font-mono float-y">
          <div className="text-muted">→ trigger</div>
          <div className="font-semibold">invoice.received</div>
        </div>
      </div>
      <div className="absolute -right-3 bottom-16 hidden md:block">
        <div className="card px-3 py-2 shadow-card text-[11px] font-mono float-y" style={{animationDelay:'1.2s'}}>
          <div className="text-muted">← outcome</div>
          <div className="font-semibold text-brand-purple">approved · 0.4s</div>
        </div>
      </div>
    </div>
  );
};

const LogoMarquee = () => {
  // Text-based marquee showing the AI tech stack & methodologies Rocketberry works with.
  // Swap in real partner/customer logos later once available.
  const items = [
    'OpenAI', 'Anthropic', 'AWS Bedrock', 'Azure AI',
    'LangChain', 'LlamaIndex', 'Pinecone', 'Snowflake',
    'Hugging Face', 'NVIDIA', 'Vercel', 'Supabase',
    'PyTorch', 'TensorFlow', 'Databricks', 'PostgreSQL',
  ];
  const repeated = [...items, ...items];
  return (
    <div className="overflow-hidden no-scrollbar"
      style={{maskImage:'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
              WebkitMaskImage:'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)'}}>
      <div className="flex items-center gap-12 md:gap-16 marquee-track w-max py-3">
        {repeated.map((n, i) => (
          <span key={i}
            className="text-[16px] font-medium tracking-[0.04em] whitespace-nowrap"
            style={{color: 'var(--muted)', letterSpacing: '-0.01em'}}>
            {n}
          </span>
        ))}
      </div>
    </div>
  );
};

window.Hero = Hero;