// Hero — pure editorial composition. One confident headline, brand-led.
const { ArrowUpRight: HArrowUpRight, Arrow: HArrow } = window.Icons;

function HeroWords({ text, className = '', delay = 0 }) {
  const words = text.split(' ');
  return (
    <span className={className} aria-label={text}>
      {words.map((w, i) => (
        <span
          key={i}
          className="inline-block reveal"
          data-delay={delay + i * 55}
          style={{ marginRight: '0.22em' }}
        >
          {w}
        </span>
      ))}
    </span>
  );
}

function TrustLogos() {
  const logos = [
    { name: 'NORTHCAP', sub: 'Capital' },
    { name: 'MERIDIAN', sub: 'Health' },
    { name: 'KILO/9', sub: 'Logistics' },
    { name: 'OBLIQUE', sub: 'SaaS' },
    { name: 'AXIOM', sub: 'Trade' },
    { name: 'PARALLAX', sub: 'Industrial' },
  ];
  return (
    <div className="flex flex-wrap items-center gap-x-10 gap-y-4">
      {logos.map((l, i) => (
        <div key={i} className="flex items-baseline gap-2 opacity-60 hover:opacity-100 transition-opacity">
          <span className="font-display text-[13.5px] font-semibold tracking-tight" style={{color: 'var(--ink)'}}>{l.name}</span>
          <span className="font-mono text-[9px] uppercase tracking-[0.22em]" style={{color: 'var(--muted)'}}>{l.sub}</span>
        </div>
      ))}
    </div>
  );
}

function Hero() {
  const magRef = useMagnetic(0.18);

  return (
    <section id="top" className="relative pt-32 lg:pt-44 pb-24 lg:pb-32 overflow-hidden">
      <div className="mesh" aria-hidden="true">
        <div className="mesh-3"></div>
        <div className="mesh-warm"></div>
      </div>
      <div className="absolute inset-0 grid-bg pointer-events-none"></div>
      <div className="absolute inset-x-0 top-0 h-[120%] aurora pointer-events-none" aria-hidden="true"></div>

      <div className="relative max-w-[1280px] mx-auto px-6 lg:px-10">
        {/* Top locator strip — premium detail */}
        <div className="reveal flex items-center justify-between mb-14 lg:mb-20" data-delay="0">
          <div className="flex items-center gap-3">
            <span className="relative flex h-1.5 w-1.5">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75" style={{background: 'var(--accent-warm)'}}></span>
              <span className="relative inline-flex rounded-full h-1.5 w-1.5" style={{background: 'var(--accent-warm)'}}></span>
            </span>
            <span className="font-mono text-[10.5px] uppercase tracking-[0.22em]" style={{color: 'var(--muted)'}}>
              Software · AI · Cloud — based in New Jersey
            </span>
          </div>
          <div className="hidden sm:flex items-center gap-6 font-mono text-[10.5px] uppercase tracking-[0.22em]" style={{color: 'var(--dim)'}}>
            <span>40.74° N · 74.17° W</span>
            <span className="hidden md:inline">Est. 2024</span>
            <span className="flex items-center gap-1.5">
              <span className="w-1 h-1 rounded-full" style={{background: 'var(--accent-cyan)'}}></span>
              Q3 — booking
            </span>
          </div>
        </div>

        {/* Headline — confident, editorial */}
        <div className="relative">
          <div className="headline-glow" aria-hidden="true"></div>
          <h1 className="relative font-display text-[44px] sm:text-[64px] lg:text-[96px] leading-[1.02] font-medium tracking-[-0.04em] mb-10 lg:mb-14 max-w-[1180px]">
            <span className="reveal block" data-delay="80">
              We build the systems
            </span>
            <span className="reveal block" data-delay="240">
              your business <em className="serif-em" style={{color: 'var(--ink-warm)'}}>runs on</em>.
            </span>
          </h1>
        </div>

        {/* Sub + CTAs */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-end">
          <div className="lg:col-span-7">
            <p className="reveal text-[17px] lg:text-[20px] leading-[1.55] max-w-[640px]"
               style={{color: 'var(--muted)'}} data-delay="700">
              <span className="font-display font-semibold tracking-[-0.005em]" style={{color: 'var(--ink)'}}>Cardefi Solutions</span>
              {' '}is a senior engineering firm building the software, cloud platforms, and AI capabilities
              modern operators depend on — designed, shipped, and supported by the same people who scoped them.
            </p>
          </div>
          <div className="lg:col-span-5 lg:pl-8 reveal" data-delay="760">
            <div className="flex flex-wrap items-center gap-3">
              <a ref={magRef} href="#contact" className="btn-gradient" style={{transition: 'transform 200ms ease, box-shadow 200ms ease'}}>
                Start a project
                <HArrow size={16} />
              </a>
              <a href="#approach" className="btn-secondary">
                See our approach
              </a>
            </div>
          </div>
        </div>

        {/* Trust strip */}
        <div className="reveal mt-20 lg:mt-28 pt-10 border-t flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6"
             style={{borderColor: 'var(--border)'}} data-delay="880">
          <p className="text-[13px] max-w-[280px]" style={{color: 'var(--muted)'}}>
            <span className="font-mono text-[10px] uppercase tracking-[0.22em] block mb-2" style={{color: 'var(--dim)'}}>Trusted by</span>
            Operators scaling software &amp; data platforms across finance, healthcare, logistics &amp; SaaS.
          </p>
          <TrustLogos />
        </div>

        {/* Scroll cue — small detail */}
        <div className="hidden lg:flex absolute right-10 top-1/2 -translate-y-1/2 origin-right rotate-90 items-center gap-3 reveal"
             style={{transform: 'translateY(-50%) rotate(90deg)', transformOrigin: 'right center'}}
             data-delay="1000">
          <span className="font-mono text-[9.5px] uppercase tracking-[0.32em]" style={{color: 'var(--dim)'}}>
            Scroll
          </span>
          <span className="w-8 h-px" style={{background: 'var(--hairline)'}}></span>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;