/* 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 obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    el.querySelectorAll('.reveal').forEach(n => obs.observe(n));
    return () => obs.disconnect();
  }, []);
  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]">
            THREE 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>
              South Carolina has a first-mover opportunity: a school-branded water program with three parallel revenue lanes flowing into the NIL collective.
            </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 state. And seeded distribution to the <span className="text-ink">high-school recruits</span> SC wants to sign.
            </p>
            <p className="mt-6 font-display font-medium text-[20px] tracking-[0.02em] text-garnet not-italic">
              One product. Three lanes. Zero overhead to athletics.
            </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%, #2A0006 0%, #14030A 60%, #0A0205 100%)',
            border: '1px solid rgba(115,0,10,0.4)',
          }}>
            {/* gold glow */}
            <div className="absolute" style={{
              width: '70%', height: '70%',
              background: 'radial-gradient(circle, rgba(201,169,97,0.18), transparent 70%)',
              filter: 'blur(30px)',
            }} />
            <img src="assets/sc-can-600.png" alt="Gamecock 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 · Gamecock Edition</span>
            <span>SKU · GCW-01</span>
          </div>
        </div>
      </div>
    </section>
  );
}

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