const Hero = () => {
  return (
    <section id="top" className="relative pt-36 md:pt-44 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, #E63329, #F5C518, #14A04A, #1B7BD6, #E63329)', filter: 'blur(80px)' }}
      />

      <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-Driven Development · AIDD
              </span>
            </div>

            <h1 className="display text-[52px] sm:text-[68px] md:text-[84px] leading-[0.98]">
              Build intelligent<br/>
              systems. Deliver<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">
              Webever 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-green"></span> SOC2-aligned</div>
              <div className="flex items-center gap-2"><span className="w-1 h-1 rounded-full bg-brand-blue"></span> Cloud-native</div>
              <div className="hidden sm:flex items-center gap-2"><span className="w-1 h-1 rounded-full bg-brand-red"></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">
            Trusted by operators across 9 industries
          </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-red/60"/>
            <span className="w-2.5 h-2.5 rounded-full bg-brand-yellow/70"/>
            <span className="w-2.5 h-2.5 rounded-full bg-brand-green/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-green">
          <span className="w-1.5 h-1.5 rounded-full bg-brand-green 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="#E63329"/>
            <stop offset="33%" stopColor="#F5C518"/>
            <stop offset="66%" stopColor="#14A04A"/>
            <stop offset="100%" stopColor="#1B7BD6"/>
          </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: '#E63329' },
          { y: 180, label: 'Documents', color: '#F5C518' },
          { y: 270, label: 'API streams', color: '#1B7BD6' },
        ].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: '#14A04A' },
          { y: 180, label: 'Automations', color: '#1B7BD6' },
          { y: 260, label: 'Insights', color: '#E63329' },
        ].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="#14A04A">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-green">approved · 0.4s</div>
        </div>
      </div>
    </div>
  );
};

const LogoMarquee = () => {
  const clients = [
    { name: 'Center for AI Technology',  src: 'assets/clients/cait-nj.png',           h: 56 },
    { name: 'Ideal Builders',            src: 'assets/clients/ideal-builders.png',    h: 44 },
    { name: 'Ideal Discount Club',       src: 'assets/clients/ideal-discount-club.png', h: 60 },
    { name: 'Lion Motion Productions',   src: 'assets/clients/lion-motion.png',       h: 44 },
    { name: 'AC Food Truck',             src: 'assets/clients/ac-food-truck.png',     h: 52 },
    { name: 'Job Americans',             src: 'assets/clients/job-americans.webp',    h: 36 },
  ];
  // Repeat 2x for seamless loop
  const repeated = [...clients, ...clients];
  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-14 md:gap-20 marquee-track w-max py-2">
        {repeated.map((c, i) => (
          <div
            key={i}
            className="flex items-center justify-center flex-shrink-0 transition-all duration-300"
            style={{height: 64, opacity: 0.72, filter: 'saturate(0.85)'}}
            onMouseEnter={(e) => { e.currentTarget.style.opacity = '1'; e.currentTarget.style.filter = 'saturate(1)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.opacity = '0.72'; e.currentTarget.style.filter = 'saturate(0.85)'; }}
            title={c.name}
          >
            <img
              src={c.src}
              alt={c.name}
              loading="lazy"
              style={{height: c.h, width: 'auto', maxWidth: 200, objectFit: 'contain', display: 'block'}}
            />
          </div>
        ))}
      </div>
    </div>
  );
};

window.Hero = Hero;