/* Lane Deep Dives — DTC, Alumni Business carousel, Community NIL Program */

/* ---------- 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 01 / Direct-to-Consumer</div>
          <h2 className="display text-ink text-[40px] md:text-[60px] xl:text-[72px] leading-[0.94]">
            THE PANTHER<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>
              GSU'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-campus.jpg"
              alt="Georgia State students on campus holding Panther 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>

      {/* Campus & Students channel */}
      <div className="max-w-[1400px] mx-auto mt-20 md:mt-28 reveal">
        <div className="hr-thin w-full mb-12 md:mb-16" />
        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-16 items-center">
          <div className="md:col-span-5">
            <div className="font-mono text-[11px] tracking-[0.18em] uppercase text-mute-1 mb-4 font-medium">Figure 02b · The student welcome kit</div>
            <div className="paper-card overflow-hidden relative" style={{ aspectRatio: '4 / 5' }}>
              <img src="assets/recruit-unbox.jpg" alt="A student opening a Georgia State Panther Water welcome kit"
                className="absolute inset-0 w-full h-full object-cover" style={{ objectPosition: 'center 30%' }} />
            </div>
            <div className="font-serif italic text-mute-1 text-[13px] mt-4 leading-[1.55]">
              Every new subscriber and incoming Panther student receives a Welcome Kit — a full case, a coaster, and a note from the program.
            </div>
          </div>

          <div className="md:col-span-7">
            <div className="eyebrow mb-5">Channel · Campus &amp; Students</div>
            <h3 className="display text-ink text-[30px] md:text-[44px] xl:text-[50px] leading-[1.0]">
              EVERY INCOMING CLASS IS A <span className="text-garnet">NEW COHORT.</span>
            </h3>
            <p className="font-serif text-[16px] md:text-[18px] text-ink-2 leading-[1.65] mt-6 max-w-[640px]">
              The student body is the highest-velocity, lowest-cost subscriber channel in the program. Roughly 50,000 students are on campus right now, and a new class arrives every fall ready to rep the Blue &amp; White — with Panther Water in the dorms from day one.
            </p>
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-px bg-garnet/15 border border-garnet/20 mt-8 max-w-[640px]">
              {[
                ['Dorms & move-in', 'Welcome kits at orientation and residence-hall move-in — a case in every fridge from week one.'],
                ['On-campus retail', 'Bookstore, dining halls, vending, and game-day concessions — branded water where students already buy.'],
                ['Off-campus students', 'Apartments and commuters convert to the monthly subscription with a single scan.'],
              ].map(([h, b]) => (
                <div key={h} className="bg-paper p-5">
                  <div className="font-mono text-[11px] tracking-[0.16em] uppercase text-garnet font-medium mb-2">{h}</div>
                  <p className="font-serif text-[13.5px] text-ink-2 leading-[1.5]">{b}</p>
                </div>
              ))}
            </div>
            <p className="font-serif italic text-mute-1 text-[14px] leading-[1.55] mt-6 max-w-[640px]">
              Students feed the same DTC subscription lane above — no new revenue line, just the most renewable way to fill it. Every graduating class becomes the next wave of alumni subscribers.
            </p>
          </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="#F4F6FB" />
      <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="#0039A6" />
      <image href="assets/panther-white.png" x="66" y="70" width="68" height="40" preserveAspectRatio="xMidYMid meet" />
      <text x="100" y="128" textAnchor="middle" fontFamily="Oswald, sans-serif" fontSize="14" fontWeight="700" letterSpacing="3" fill="#F4F6FB">PANTHER 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 Royal Blue & White</text>

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

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

      {/* Bullets */}
      <g fontFamily="Source Serif 4, serif" fontSize="10" fill="#0B1322">
        <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="#0039A6" />
      <text x="100" y="343" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#F4F6FB" letterSpacing="3">JOIN THE COALITION</text>

      {/* Tiny footer */}
      <text x="100" y="376" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="7" letterSpacing="2" fill="#8893A6">GSU × LIQUID DATA · ATLANTA, 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 02 / 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]">
            Panther 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]">
            Georgia State 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 Panther 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: '#F4F6FB', 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 — Community NIL Program ---------- */
function LaneCommunity() {
  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 03 / Community NIL Program</div>
          <h2 className="display text-ink text-[34px] md:text-[46px] xl:text-[54px] leading-[0.98]">
            PANTHER WATER AT EVERY HIGH-SCHOOL <span className="text-garnet">GAME</span> IN GEORGIA.
          </h2>
          <p className="display-thin text-mute-1 text-[18px] md:text-[22px] tracking-[0.04em] mt-4">
            A community engagement layer — brand exposure without inducement.
          </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>
              Georgia State partners with high-school athletic associations across Georgia to place
              Panther-branded water at high-school sporting events. The cans are distributed at gates,
              concessions, and student sections — available to <span className="text-ink">every student attending</span>,
              regardless of school, sport, or recruiting status.
            </p>
            <p>
              This is not a recruiting program. It is a community-engagement and brand-exposure program,
              <span className="text-ink"> compliant with NCAA Bylaw 13.2.1</span>, which permits benefits
              “generally available to the institution's prospective students … determined on a basis unrelated
              to athletics ability.” Every student gets water. No recruiting database is involved. No athlete-specific targeting.
            </p>
            <p>
              The benefit to Georgia State: Panther water shows up across every high-school athletic community
              in the state's media market. Every can scanned by a student or parent becomes a first-party record
              in the Georgia State Athletics CRM. <span className="text-ink">The data is the strategic asset; the community goodwill is the brand benefit.</span>
            </p>
          </div>

          {/* Three compliance callout tiles */}
          <div className="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-px bg-garnet/15 border border-garnet/20 max-w-[640px]">
            {[
              ['What it is', 'Branded water sponsored by the GSU NIL collective, distributed at high-school athletic events.'],
              ['Who gets it', 'Every student attending the event. Open to all. No recruiting criteria.'],
              ['What GSU gets', 'Brand exposure across the HS athletic community + first-party data on every can-scan.'],
            ].map(([h, b]) => (
              <div key={h} className="bg-paper p-5">
                <div className="font-mono text-[11px] tracking-[0.16em] uppercase text-garnet font-medium mb-2">{h}</div>
                <p className="font-serif text-[14px] text-ink-2 leading-[1.5]">{b}</p>
              </div>
            ))}
          </div>

          <p className="font-serif italic text-mute-1 text-[12px] leading-[1.55] mt-6 max-w-[640px]">
            This program is structured to comply with NCAA Bylaw 13.2.1's “generally available” exception. Distribution is open to all students attending sponsored events on a basis unrelated to athletics ability. The program does not target prospective student-athletes, is not coordinated with the Georgia State recruiting database, and does not condition receipt on athletic participation or interest in Georgia State athletics. Georgia State Athletics compliance reviews all program partner events prior to distribution.
          </p>
        </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 · Community distribution</div>
          <div className="paper-card overflow-hidden relative" style={{ aspectRatio: '4 / 5' }}>
            <img src="assets/biz-tailgate.jpg" alt="Panther-branded water at a community partner event"
              className="absolute inset-0 w-full h-full object-cover" style={{ objectPosition: 'center 40%' }} />
          </div>
          <div className="font-serif italic text-mute-1 text-[14px] mt-4 leading-[1.55]">
            Panther-branded water at a community partner event — handed out at the gate to every student attending, on a basis unrelated to athletics ability.
          </div>
        </div>
      </div>
    </section>);

}

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