/* Section 2 — Opportunity (short, cream/garnet) */

/* Section eyebrow + reveal hook */
function useReveal() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const nodes = [...el.querySelectorAll('.reveal')];
    const show = (n) => { n.classList.add('in'); n.style.opacity = '1'; n.style.transform = 'none'; };
    if (!('IntersectionObserver' in window)) { nodes.forEach(show); return; }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { show(e.target); obs.unobserve(e.target); } });
    }, { threshold: 0, rootMargin: '0px 0px -8% 0px' });
    nodes.forEach(n => {
      obs.observe(n);
      const r = n.getBoundingClientRect();
      if (r.top < window.innerHeight * 0.95 && r.bottom > 0) show(n);
    });
    // safety net: never leave content hidden even if IO is unreliable
    const t = setTimeout(() => nodes.forEach(show), 1500);
    return () => { obs.disconnect(); clearTimeout(t); };
  }, []);
  return ref;
}

/* ---------- Section 2 — Opportunity ---------- */
function Opportunity() {
  const ref = useReveal();
  return (
    <section ref={ref} className="relative bg-paper py-28 md:py-36 px-6 md:px-10 border-t border-garnet/15">
      <div className="max-w-[1400px] mx-auto grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-20 items-start">

        {/* Left text */}
        <div className="md:col-span-7 reveal">
          <div className="eyebrow mb-8">Opportunity / 02</div>
          <h2 className="display text-ink text-[44px] md:text-[68px] xl:text-[84px] leading-[0.94]">
            TWO REVENUE LANES.<br/>
            ONE CAN.<br/>
            <span className="text-garnet">ZERO OVERHEAD.</span>
          </h2>

          <div className="hr-thin w-32 mt-10 mb-10" />

          <div className="font-serif text-[19px] md:text-[22px] text-ink-2 leading-[1.6] max-w-[700px]">
            <p>
              Georgia State has a first-mover opportunity: a school-branded water program with two parallel revenue lanes flowing into the NIL collective, plus a community-engagement layer.
            </p>
            <p className="mt-6">
              Direct-to-consumer subscriptions from <span className="text-ink">alumni, students, and parents</span>. Bulk placement inside <span className="text-ink">alumni-owned businesses</span> across the Atlanta metro. And a <span className="text-ink">Community NIL Program</span> — Panther water at high-school athletic events, open to all students.
            </p>
            <p className="mt-6 font-display font-medium text-[20px] tracking-[0.02em] text-garnet not-italic">
              One product. Two revenue lanes. A community program. Zero overhead.
            </p>
          </div>
        </div>

        {/* Right — Welcome Kit visual */}
        <div className="md:col-span-5 reveal">
          <div className="font-mono text-[11px] tracking-[0.18em] uppercase text-paper/70 mb-4 font-medium">Figure 01 · The product</div>
          <div className="overflow-hidden relative flex items-center justify-center" style={{
            aspectRatio: '4 / 5',
            background: 'radial-gradient(ellipse 80% 70% at 50% 35%, #001233 0%, #02081A 60%, #01040F 100%)',
            border: '1px solid rgba(0,57,166,0.4)',
          }}>
            {/* gold glow */}
            <div className="absolute" style={{
              width: '70%', height: '70%',
              background: 'radial-gradient(circle, rgba(47,107,224,0.18), transparent 70%)',
              filter: 'blur(30px)',
            }} />
            <img src="assets/can-front.png" alt="Panther custom can" className="relative" style={{
              height: '82%', objectFit: 'contain',
              filter: 'drop-shadow(0 24px 30px rgba(0,0,0,0.6))',
            }} />
          </div>
          <div className="mt-4 flex items-center justify-between font-mono text-[11px] tracking-[0.16em] uppercase text-mute-1 font-medium">
            <span>Custom 16oz · Panther Edition</span>
            <span>SKU · PW-01</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Opportunity = Opportunity;
window.useReveal = useReveal;