/* Hero — deep garnet stadium-night, $117K dominant */

function Hero() {
  const [rotate, setRotate] = React.useState(-8);
  const heroRef = React.useRef(null);

  React.useEffect(() => {
    function onScroll() {
      const el = heroRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const progress = Math.max(0, Math.min(1, (vh - rect.bottom) / vh + 1));
      setRotate(-8 + progress * 28);
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section ref={heroRef} className="relative min-h-screen overflow-hidden" style={{
      background: 'radial-gradient(ellipse 90% 60% at 50% 30%, #2A0006 0%, #16030A 50%, #0A0205 100%)',
      color: '#F5F1E8'
    }}>
      {/* Grain texture overlay */}
      <div className="absolute inset-0 pointer-events-none opacity-[0.18] mix-blend-overlay" style={{
        backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -0.35'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>\")",
        backgroundSize: '240px 240px',
      }} />

      {/* Spotlight glow */}
      <div className="absolute pointer-events-none" style={{
        right: '-10%',
        top: '20%',
        width: '720px',
        height: '720px',
        background: 'radial-gradient(circle, rgba(201,169,97,0.18), rgba(115,0,10,0.06) 40%, transparent 70%)',
        filter: 'blur(40px)',
      }} />

      {/* Top bar */}
      <div className="absolute top-0 inset-x-0 px-6 md:px-10 pt-6 flex items-center justify-between z-20">
        <div className="flex items-center gap-3">
          <div className="font-mono text-[11px] tracking-[0.22em] uppercase text-paper/65">Confidential · For SC NIL Leadership</div>
        </div>
        <div className="font-mono text-[11px] tracking-[0.2em] uppercase text-paper/65 text-right">
          LIQUID DATA <span className="text-paper/35 mx-2">×</span> SOUTH CAROLINA NIL
        </div>
      </div>

      {/* Content */}
      <div className="relative z-10 max-w-[1400px] mx-auto px-6 md:px-10 pt-28 pb-20 min-h-screen flex flex-col">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-10 flex-1 items-center">

          {/* Left/center column */}
          <div className="md:col-span-6 flex flex-col items-center md:items-start text-center md:text-left">

            {/* Block C crest + clean typeset lockup */}
            <div className="mb-12 flex items-center gap-5">
              <div className="bg-paper rounded-2xl flex items-center justify-center shrink-0" style={{ width: 84, height: 84, boxShadow: '0 8px 24px rgba(0,0,0,0.35)' }}>
                <BlockC size={58} />
              </div>
              <div className="w-px h-12 bg-paper/25" />
              <div className="flex flex-col">
                <span className="display text-paper text-[22px] md:text-[26px] leading-none tracking-[0.02em] whitespace-nowrap">SOUTH CAROLINA</span>
                <span className="font-mono text-[10px] tracking-[0.28em] uppercase text-paper/55 mt-2 whitespace-nowrap">Gamecock Athletics · Exclusive NIL Partnership</span>
              </div>
            </div>

            <div className="font-mono text-[12px] tracking-[0.28em] uppercase text-gold mb-6 font-medium">South Carolina × Liquid Data · Exclusive Partnership Proposal</div>

            {/* The opportunity headline */}
            <h1 className="display text-paper leading-[0.92] tracking-[0.01em]" style={{ fontSize: 'clamp(46px, 6.5vw, 92px)' }}>
              TURN GAMECOCK PRIDE<br />
              INTO A <span className="text-gold">REVENUE ENGINE.</span>
            </h1>

            <div className="w-32 h-px bg-gold mt-8 mb-8" />

            <p className="font-serif text-[19px] md:text-[23px] text-paper/90 leading-[1.5] max-w-[660px]">
              A school-branded water that funds the NIL collective, puts the Gamecock brand inside every alumni-owned business, and gets into the home of every future recruit — all from one custom can.
            </p>

            <div className="font-mono text-[11px] md:text-[12px] tracking-[0.26em] uppercase text-paper/55 mt-7">
              No overhead. No capital risk. No inventory for SC to manage.
            </div>

            <div className="mt-12 flex flex-col sm:flex-row items-center gap-6">
              <a href="#forecast" className="inline-flex items-center gap-3 px-6 py-3.5 border border-gold/60 text-gold hover:bg-gold hover:text-ink font-mono text-[12px] tracking-[0.18em] uppercase transition-colors">
                See the model <Icon.Arrow size={12} />
              </a>
              <div className="font-mono text-[11px] tracking-[0.18em] uppercase text-paper/55">
                $2.50 / case to NIL · 50/50 net split
              </div>
            </div>
          </div>

          {/* Right column — can with dramatic rim light */}
          <div className="md:col-span-6 flex items-center justify-center relative min-h-[660px]">
            {/* Animated aura / halo behind the can */}
            <div className="absolute halo-spin" style={{
              width: 600, height: 600, maxWidth: '115%',
              background: 'conic-gradient(from 0deg, rgba(201,169,97,0.10), rgba(115,0,10,0.22), rgba(201,169,97,0.10), rgba(115,0,10,0.22), rgba(201,169,97,0.10))',
              borderRadius: '50%',
              filter: 'blur(60px)',
            }} />
            <div className="absolute halo-breathe" style={{
              width: 560, height: 560, maxWidth: '105%',
              background: 'radial-gradient(circle, rgba(201,169,97,0.28), rgba(115,0,10,0.14) 45%, rgba(115,0,10,0) 68%)',
              borderRadius: '50%',
              filter: 'blur(36px)',
            }} />
            <div className="absolute halo-shimmer" style={{
              width: 300, height: 300, maxWidth: '70%',
              background: 'radial-gradient(circle, rgba(255,240,200,0.30), rgba(255,240,200,0) 70%)',
              borderRadius: '50%',
              filter: 'blur(28px)',
            }} />
            {/* Drifting light rays */}
            <div className="absolute aura-rays" style={{
              width: 640, height: 640, maxWidth: '120%',
              background: 'conic-gradient(from 90deg, transparent 0deg, rgba(201,169,97,0.14) 12deg, transparent 24deg, transparent 90deg, rgba(255,240,200,0.10) 102deg, transparent 114deg, transparent 180deg, rgba(201,169,97,0.12) 192deg, transparent 204deg, transparent 270deg, rgba(255,240,200,0.08) 282deg, transparent 294deg)',
              borderRadius: '50%',
              filter: 'blur(14px)',
              maskImage: 'radial-gradient(circle, transparent 28%, black 42%, transparent 72%)',
              WebkitMaskImage: 'radial-gradient(circle, transparent 28%, black 42%, transparent 72%)',
            }} />
            {/* Pedestal disc */}
            <div className="absolute bottom-4 w-[420px] max-w-[90%] h-4 rounded-full" style={{
              background: 'radial-gradient(ellipse, rgba(201,169,97,0.4), transparent 70%)',
            }} />

            {/* Floating motes */}
            {[
              { l: '32%', t: '60%', s: 5, d: '8s', delay: '0s' },
              { l: '64%', t: '66%', s: 4, d: '9.5s', delay: '1.6s' },
              { l: '46%', t: '72%', s: 6, d: '7.5s', delay: '3.2s' },
              { l: '58%', t: '54%', s: 3, d: '10s', delay: '4.5s' },
              { l: '38%', t: '50%', s: 4, d: '8.8s', delay: '2.4s' },
            ].map((m, i) => (
              <div key={i} className="absolute aura-mote rounded-full" style={{
                left: m.l, top: m.t, width: m.s, height: m.s,
                background: 'radial-gradient(circle, rgba(255,240,200,0.9), rgba(201,169,97,0) 70%)',
                '--moteDur': m.d, '--moteDelay': m.delay,
              }} />
            ))}

            {/* Static flat can */}
            <div className="relative" style={{ filter: 'drop-shadow(0 40px 50px rgba(0,0,0,0.6))' }}>
              <CustomCan width={620} rotate={0} uid="hero" />
            </div>

            {/* Caption */}
            <div className="absolute bottom-0 right-2 text-right">
              <div className="font-mono text-[10px] tracking-[0.2em] uppercase text-paper/70">Custom 16oz · Gamecock Edition</div>
              <div className="font-mono text-[10px] tracking-[0.2em] uppercase text-paper/45 mt-1">$9.99 wholesale · $14.99 retail</div>
            </div>
          </div>
        </div>

        {/* Bottom strip — lanes preview, units lead */}
        <div className="mt-10 border-t border-paper/15 pt-8 grid grid-cols-1 md:grid-cols-4 gap-6 md:gap-10">
          <div className="md:col-span-1 flex items-center gap-3">
            <div className="display text-paper/90 text-[34px] md:text-[40px] leading-[0.95] tracking-[0.01em]">Year-1<br/>Targets<br/><span className="text-gold">By Lane</span></div>
          </div>
          {[
          ['Recruit Seeding', '100', 'recruits', '4 cases / mo each', '$12K to NIL'],
          ['DTC Subscribers', '2,500', 'households', '1 case / mo each', '$75K to NIL'],
          ['Alumni-Owned Business', '100', 'businesses', '10 cases / mo each', '$30K to NIL']].
          map(([label, num, unit, cadence, rev]) =>
          <div key={label} className="md:col-span-1">
              <div className="font-mono text-[12px] tracking-[0.14em] uppercase text-paper font-medium">{label}</div>
              <div className="flex items-baseline gap-2 mt-1.5">
                <span className="num text-paper text-[40px] leading-none font-medium">{num}</span>
                <span className="font-serif italic text-paper/70 text-[15px]">{unit}</span>
              </div>
              <div className="font-serif text-[13px] text-paper/60 mt-1.5 leading-[1.5]">{cadence}</div>
              <div className="font-mono text-[10px] tracking-[0.16em] uppercase text-gold/80 mt-1.5">{rev}</div>
            </div>
          )}
        </div>
      </div>

      {/* Scroll cue */}
      <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 z-20">
        <div className="font-mono text-[9px] text-paper/50 tracking-[0.32em] uppercase">Scroll</div>
        <div className="w-px h-10 bg-gradient-to-b from-gold to-transparent" />
      </div>
    </section>);

}

window.Hero = Hero;