/* Lane Deep Dives — DTC, Alumni Business carousel, Recruit Seeding */

/* ---------- Lane 01 — Direct-to-Consumer ---------- */
function LaneDTC() {
  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-center">

        <div className="md:col-span-6 reveal">
          <div className="eyebrow mb-6">Lane 02 / Direct-to-Consumer</div>
          <h2 className="display text-ink text-[40px] md:text-[60px] xl:text-[72px] leading-[0.94]">
            THE GAMECOCK<br />
            HOUSEHOLD <span className="text-garnet">SUBSCRIPTION.</span>
          </h2>
          <div className="hr-thin w-32 mt-10 mb-10" />

          <div className="font-serif text-[17px] md:text-[19px] text-ink-2 leading-[1.65] max-w-[640px] space-y-5">
            <p>
              Every alum, every parent, every current student is a potential subscriber.
              One case per month delivered to the door — monthly recurring revenue,
              the highest-LTV revenue type that exists in consumer goods.
            </p>
            <p>
              SC's job is awareness: game-day emails, halftime announcements, alumni
              newsletter inclusion. Liquid Data handles fulfillment, billing, and customer service.
            </p>
          </div>

          {/* Stat strip */}
          <div className="mt-10 grid grid-cols-3 gap-px bg-garnet/15 border border-garnet/20 max-w-[640px]">
            {[
            ['Target', '2,500', 'subscribers'],
            ['Cases / yr', '30,000', '1 / mo each'],
            ['NIL · Y1', '$75K', '50% of total']].
            map(([l, v, s]) =>
            <div key={l} className="bg-paper p-5">
                <div className="font-mono text-[11px] tracking-[0.14em] uppercase text-mute-1 font-medium">{l}</div>
                <div className="num text-ink text-[26px] mt-2 font-medium">{v}</div>
                <div className="font-serif text-[13px] text-mute-1 mt-1.5 leading-[1.5]">{s}</div>
              </div>
            )}
          </div>
        </div>

        {/* Right — real lifestyle photo with floating subscription phone */}
        <div className="md:col-span-6 reveal">
          <div className="font-mono text-[11px] tracking-[0.18em] uppercase text-mute-1 mb-4 font-medium">Figure 02 · The subscriber experience</div>
          <div className="relative paper-card overflow-hidden" style={{ aspectRatio: '4 / 5' }}>
            <img
              src="assets/dtc-lifestyle.jpg"
              alt="South Carolina students on campus holding Gamecock water cans"
              className="absolute inset-0 w-full h-full object-cover"
              style={{ objectPosition: 'center 30%' }} />
            {/* Subtle bottom gradient for phone legibility */}
            <div className="absolute inset-x-0 bottom-0 h-1/3 pointer-events-none" style={{
              background: 'linear-gradient(to top, rgba(10,2,5,0.45), transparent)'
            }} />
            {/* Floating phone, bottom-right */}
            <div className="absolute bottom-5 right-5 w-[34%] max-w-[170px]" style={{ filter: 'drop-shadow(0 18px 30px rgba(0,0,0,0.5))' }}>
              <PhoneSubscriptionView />
            </div>
          </div>
          <div className="font-serif italic text-mute-1 text-[13px] mt-4 leading-[1.55]">
            A case a month, on the counter, in the fridge, at the tailgate. The subscription page is one tap from any can's QR code.
          </div>
        </div>
      </div>
    </section>);

}

function PhoneSubscriptionView() {
  return (
    <svg viewBox="0 0 200 400" width="100%" style={{ display: 'block' }}>
      <defs>
        <linearGradient id="phB" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#2a2a2a" />
          <stop offset="1" stopColor="#0a0a0a" />
        </linearGradient>
      </defs>
      <rect x="0" y="0" width="200" height="400" rx="32" fill="url(#phB)" stroke="#444" />
      <rect x="8" y="8" width="184" height="384" rx="26" fill="#F5F1E8" />
      <rect x="78" y="12" width="44" height="10" rx="5" fill="#0a0a0a" />

      {/* Status bar */}
      <text x="22" y="40" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#0a0a0a">9:41</text>

      {/* Hero block garnet */}
      <rect x="8" y="52" width="184" height="100" fill="#73000A" />
      <image href="assets/sc-block-c.png" x="76" y="64" width="48" height="48" style={{ filter: 'brightness(0) invert(1)' }} />
      <text x="100" y="128" textAnchor="middle" fontFamily="Oswald, sans-serif" fontSize="14" fontWeight="700" letterSpacing="3" fill="#F5F1E8">GAMECOCK WATER</text>
      <text x="100" y="143" textAnchor="middle" fontFamily="Source Serif 4, serif" fontStyle="italic" fontSize="10" fill="rgba(245,241,232,0.85)">For the Garnet & Black</text>

      {/* Subscription pricing */}
      <text x="22" y="180" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#73000A" letterSpacing="2">SUBSCRIBE / MONTHLY</text>
      <text x="22" y="208" fontFamily="Oswald, sans-serif" fontSize="22" fontWeight="700" letterSpacing="1" fill="#1A1006">$14.99 / mo</text>
      <text x="22" y="225" fontFamily="Source Serif 4, serif" fontStyle="italic" fontSize="10" fill="#6B5D4A">1 case (12 × 16oz) · ships free</text>

      <line x1="22" y1="244" x2="178" y2="244" stroke="rgba(115,0,10,0.2)" />

      {/* Bullets */}
      <g fontFamily="Source Serif 4, serif" fontSize="10" fill="#1A1006">
        <text x="22" y="266">▸ 50% of net to NIL collective</text>
        <text x="22" y="284">▸ Cancel any time</text>
        <text x="22" y="302">▸ Pause for the offseason</text>
      </g>

      {/* CTA */}
      <rect x="22" y="320" width="156" height="36" rx="2" fill="#73000A" />
      <text x="100" y="343" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#F5F1E8" letterSpacing="3">JOIN THE COALITION</text>

      {/* Tiny footer */}
      <text x="100" y="376" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="7" letterSpacing="2" fill="#9B8F7A">SC × LIQUID DATA · COLUMBIA, SC</text>
    </svg>);

}

/* ---------- Lane 02 — Alumni-Owned Business Placement ---------- */
const PLACEMENTS = [
{ name: 'Offices & Workplaces', sub: 'Lobbies · break rooms · conference tables', kind: 'office', photo: 'assets/biz-office.jpg' },
{ name: 'Hospitality & Venues', sub: 'Dining rooms · guest service · events', kind: 'hospitality', photo: 'assets/biz-hospitality.jpg' },
{ name: 'Health & Wellness', sub: 'Practices · studios · waiting areas', kind: 'wellness', photo: 'assets/biz-wellness.jpg' },
{ name: 'Tailgates & Game Day', sub: 'Lots · watch parties · pre-game', kind: 'tailgate', photo: 'assets/biz-tailgate.jpg' },
{ name: 'Retail & Storefronts', sub: 'Counters · showrooms · checkout', kind: 'retail', photo: 'assets/biz-retail.jpg' },
{ name: 'Events & Gatherings', sub: 'Openings · galas · client appreciation', kind: 'events', photo: 'assets/biz-events.jpg' }];


function LaneAlumniBiz() {
  const ref = useReveal();

  return (
    <section ref={ref} className="relative bg-paper-2 py-28 md:py-36 px-6 md:px-10 border-t border-garnet/15">
      <div className="max-w-[1400px] mx-auto">

        {/* Header */}
        <div className="reveal mb-12 max-w-[1100px]">
          <div className="eyebrow mb-6">Lane 03 / Alumni-Owned Business Placement</div>
          <h2 className="display text-ink text-[40px] md:text-[60px] xl:text-[76px] leading-[0.94]">
            EVERY ALUMNI BUSINESS<br />
            BECOMES A <span className="text-garnet">POINT OF PRIDE.</span>
          </h2>
          <div className="hr-thin w-32 mt-10 mb-8" />
          <p className="font-serif italic text-ink-2 text-[18px] md:text-[20px] leading-[1.55] max-w-[820px]">
            Gamecock alumni run businesses of every kind across the state. Wherever they work, host, or serve, the can goes with them — a point of pride on the counter and a 365-day brand impression for everyone who walks in.
          </p>
        </div>

        {/* 3 × 2 grid */}
        <div className="reveal">
          <div className="font-mono text-[11px] tracking-[0.18em] uppercase text-mute-1 font-medium mb-5">Six categories · One can · One story</div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {PLACEMENTS.map((p, i) =>
            <PlacementCard key={i} placement={p} index={i} />
            )}
          </div>
        </div>

        {/* Callout */}
        <div className="reveal mt-16 paper-card p-8 md:p-12 max-w-[1100px] mx-auto text-center">
          <p className="font-serif text-[18px] md:text-[21px] text-ink-2 leading-[1.6]">
            South Carolina has an alumni network of roughly <span className="num text-ink">300,000</span> living alumni. A conservative <span className="num text-ink">100</span> alumni-owned businesses placing <span className="num text-ink">10 cases/month</span> each delivers <span className="num text-garnet font-medium">$30,000</span> in Year-1 NIL revenue — and puts the Gamecock brand in front of every customer, patient, guest, and client who walks through those doors.
          </p>
          <p className="font-serif italic text-mute-1 text-[15px] mt-5 leading-[1.55]">
            Every business becomes a revenue line. Every customer interaction becomes a brand impression. School pride compounds.
          </p>
        </div>
      </div>
    </section>);

}

/* A single placement card — real photo slot + editorial label */
function PlacementCard({ placement, index }) {
  return (
    <div className="paper-card overflow-hidden h-full flex flex-col">
      <div className="aspect-[4/3] relative overflow-hidden bg-ink">
        {placement.photo ?
        <img
          src={placement.photo}
          alt={placement.name}
          className="absolute inset-0 w-full h-full object-cover" /> :

        <image-slot
          id={`placement-${placement.kind}`}
          shape="rect"
          placeholder={`Drop a photo — ${placement.name.toLowerCase()}`}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        </image-slot>
        }
        <div className="absolute top-4 left-4 font-mono text-[11px] tracking-[0.2em] uppercase text-paper bg-garnet px-2.5 py-1 pointer-events-none">
          {String(index + 1).padStart(2, '0')} / 06
        </div>
        <div className="absolute top-4 right-4 pointer-events-none opacity-90">
          <PlacementIcon kind={placement.kind} />
        </div>
      </div>
      <div className="p-6 border-t border-garnet/10">
        <div className="font-mono text-[11px] tracking-[0.18em] uppercase text-garnet mb-2 font-medium">Placement type</div>
        <h3 className="display font-semibold text-ink text-[24px] tracking-[0.02em]">{placement.name}</h3>
        <div className="font-serif italic text-mute-1 text-[14px] mt-2 leading-[1.5]">{placement.sub}</div>
      </div>
    </div>);

}

/* Refined line icon per placement type */
function PlacementIcon({ kind }) {
  const common = { width: 30, height: 30, viewBox: '0 0 24 24', fill: 'none', stroke: '#F5F1E8', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const wrap = (children) => (
    <div className="w-9 h-9 rounded-full bg-garnet/90 backdrop-blur flex items-center justify-center">
      <svg {...common}>{children}</svg>
    </div>);

  switch (kind) {
    case 'office': return wrap(<><path d="M3 21V7l8-4v18" /><path d="M11 21V11l8 3v7" /><path d="M3 21h18" /><path d="M6 8h1M6 12h1M6 16h1M15 14h1M15 18h1" /></>);
    case 'hospitality': return wrap(<><path d="M4 3v7a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V3" /><path d="M6 12v9" /><path d="M17 3c-1.5 0-3 1.5-3 4s1.5 4 3 4 3-1.5 3-4-1.5-4-3-4Z" /><path d="M17 11v10" /></>);
    case 'wellness': return wrap(<><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.5-7 10-7 10Z" /></>);
    case 'tailgate': return wrap(<><path d="M3 20h18" /><path d="M5 20l7-12 7 12" /><path d="M12 8V3" /><path d="M12 3l5 2-5 2" /></>);
    case 'retail': return wrap(<><path d="M4 9h16l-1 11H5L4 9Z" /><path d="M8 9V6a4 4 0 0 1 8 0v3" /></>);
    case 'events': return wrap(<><circle cx="9" cy="8" r="3" /><circle cx="17" cy="9" r="2" /><path d="M3 20c0-3 2.7-5 6-5s6 2 6 5" /><path d="M15 20c0-2 1.3-3.5 3-3.5s3 1.5 3 3.5" /></>);
    default: return null;
  }
}

/* ---------- Lane 03 — Recruit Seeding ---------- */
function LaneRecruit() {
  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-center">

        <div className="md:col-span-7 reveal">
          <div className="eyebrow mb-6">Lane 01 / Recruit Seeding</div>
          <h2 className="display text-ink text-[40px] md:text-[60px] xl:text-[72px] leading-[0.94]">
            WIN THE RECRUIT<br />
            <span className="text-garnet">BEFORE</span> SIGNING DAY.
          </h2>
          <p className="display-thin text-mute-1 text-[18px] md:text-[22px] tracking-[0.04em] mt-4">
            The smallest dollar lane. The biggest strategic lane.
          </p>

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

          <div className="font-serif text-[17px] md:text-[19px] text-ink-2 leading-[1.65] max-w-[640px] space-y-5">
            <p>
              Get custom Gamecock-branded cases into the homes of 14-, 15-, 16-, 17-year-old
              prospects on SC's recruiting board. They drink the school's water for years.
              The brand becomes familiar. The recruit becomes a fan — long before signing day.
            </p>
            <p>
              The cases are <span className="text-ink">underwritten by boosters and alumni sponsors</span>,
              not gifted by the program. A booster sponsors a recruit household's subscription as a
              charitable contribution to the collective — a potential tax write-off — and that
              contribution funds the whole vertical.
            </p>
            <p>
              Every sponsored case still sends <span className="text-ink">$2.50 to the NIL collective</span>.
              So one booster dollar does triple duty: it strengthens recruiting, which strengthens
              the sports programs, and it funds NIL — all while putting the Gamecock brand in a
              future recruit's hands.
            </p>
            <p className="font-serif italic text-ink">
              Hypothetical: a five-star recruit drinks booster-sponsored SC water for four years of high school before getting his offer letter. Which school does that mental real estate belong to?
            </p>
          </div>

          <div className="mt-10 paper-card p-7 max-w-[600px] border-l-4 border-garnet">
            <div className="font-mono text-[11px] tracking-[0.18em] uppercase text-garnet mb-5 font-medium">Y1 Conservative · The Math</div>

            {/* Equation chain */}
            <div className="flex flex-wrap items-center gap-x-3 gap-y-4">
              <div>
                <div className="num text-ink text-[34px] leading-none font-medium">100</div>
                <div className="font-mono text-[10px] tracking-[0.12em] uppercase text-mute-1 mt-1.5">recruits</div>
              </div>
              <span className="num text-garnet text-[24px] font-light">×</span>
              <div>
                <div className="num text-ink text-[34px] leading-none font-medium">4</div>
                <div className="font-mono text-[10px] tracking-[0.12em] uppercase text-mute-1 mt-1.5">cases / mo each</div>
              </div>
              <span className="num text-garnet text-[24px] font-light">=</span>
              <div>
                <div className="num text-ink text-[34px] leading-none font-medium">4,800</div>
                <div className="font-mono text-[10px] tracking-[0.12em] uppercase text-mute-1 mt-1.5">cases / yr</div>
              </div>
              <span className="num text-garnet text-[24px] font-light">→</span>
              <div>
                <div className="num text-garnet text-[34px] leading-none font-medium">$12K</div>
                <div className="font-mono text-[10px] tracking-[0.12em] uppercase text-mute-1 mt-1.5">to NIL · @ $2.50/case</div>
              </div>
            </div>

            {/* Per-recruit footnote */}
            <div className="mt-6 pt-5 border-t border-garnet/15 grid grid-cols-2 gap-6">
              <div>
                <div className="font-mono text-[10px] tracking-[0.14em] uppercase text-mute-1 mb-1">Per recruit · per year</div>
                <div className="num text-ink text-[20px] font-medium">48 cases</div>
                <div className="font-serif italic text-mute-1 text-[12px] mt-1">4 cases every month, all year</div>
              </div>
              <div>
                <div className="font-mono text-[10px] tracking-[0.14em] uppercase text-mute-1 mb-1">To NIL · per recruit / yr</div>
                <div className="num text-garnet text-[20px] font-medium">$120</div>
                <div className="font-serif italic text-mute-1 text-[12px] mt-1">48 cases × $2.50 net per case</div>
              </div>
            </div>
          </div>
        </div>

        <div className="md:col-span-5 reveal">
          <div className="font-mono text-[11px] tracking-[0.18em] uppercase text-mute-1 mb-4 font-medium">Figure 03 · The recruit welcome kit</div>
          <div className="paper-card overflow-hidden relative" style={{ aspectRatio: '4 / 5' }}>
            <img
              src="assets/recruit-kit.jpg"
              alt="A recruit opening a South Carolina Gamecock water welcome kit"
              className="absolute inset-0 w-full h-full object-cover"
              style={{ objectPosition: 'center 35%' }} />
          </div>
          <div className="font-serif italic text-mute-1 text-[14px] mt-4 leading-[1.55]">
            Each kit ships with a "Welcome to the Family" card, sticker pack, and a full case of custom cans — the moment a recruit becomes a Gamecock.
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { LaneDTC, LaneAlumniBiz, LaneRecruit });