/* Closing sections — Partnership · Next Steps · Bonus Data · CTA + Footer */

/* ---------- Partnership Terms ---------- */
function Partnership() {
  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-[1300px] mx-auto">
        <div className="reveal mb-16 max-w-[1000px]">
          <div className="eyebrow mb-6">Partnership / 06</div>
          <h2 className="display text-ink text-[48px] md:text-[80px] xl:text-[100px] leading-[0.92]">
            THE TERMS,<br />
            <span className="text-garnet">WRITTEN PLAINLY.</span>
          </h2>
        </div>

        {/* Two big terms, stacked full-width */}
        <div className="reveal grid grid-cols-1 md:grid-cols-12 gap-y-12 md:gap-x-16 border-t border-garnet/20 pt-12">
          <div className="md:col-span-1 font-mono text-[13px] tracking-[0.22em] uppercase text-garnet">A</div>
          <div className="md:col-span-11">
            <div className="font-mono text-[12px] tracking-[0.22em] uppercase text-mute-1 mb-4">Wholesale to Georgia State</div>
            <p className="font-serif text-ink text-[26px] md:text-[36px] xl:text-[42px] leading-[1.25]">
              Cases of <span className="num text-garnet">12 × 16 oz</span> custom Panther cans at <span className="num text-garnet">$9.99 / case</span> — Georgia State's wholesale cost.
            </p>
            <div className="mt-4 font-mono text-[12px] tracking-[0.16em] uppercase text-mute-1">For internal use · welcome kits · sampling · hospitality</div>
          </div>
        </div>

        <div className="reveal grid grid-cols-1 md:grid-cols-12 gap-y-12 md:gap-x-16 border-t border-garnet/20 pt-12 mt-12">
          <div className="md:col-span-1 font-mono text-[13px] tracking-[0.22em] uppercase text-garnet">B</div>
          <div className="md:col-span-11">
            <div className="font-mono text-[12px] tracking-[0.22em] uppercase text-mute-1 mb-4">On-Network Sales</div>
            <p className="font-serif text-ink text-[26px] md:text-[36px] xl:text-[42px] leading-[1.25]">
              Cases retail at <span className="num text-garnet">$14.99 + shipping</span>, with net profits split <span className="num text-garnet">50 / 50</span> — <span className="num text-garnet">$2.50 / case</span> to the NIL collective, the basis for every forecast above.
            </p>
            <div className="mt-4 font-mono text-[12px] tracking-[0.16em] uppercase text-mute-1">Subscription · D2C · alumni network · bulk</div>
          </div>
        </div>

        {/* The easy-yes split */}
        <div className="reveal grid grid-cols-1 md:grid-cols-12 gap-y-12 md:gap-x-16 border-t border-garnet/20 pt-12 mt-12">
          <div className="md:col-span-1 font-mono text-[13px] tracking-[0.22em] uppercase text-garnet">C</div>
          <div className="md:col-span-11">
            <div className="font-mono text-[12px] tracking-[0.22em] uppercase text-mute-1 mb-6">A true partnership — built to be an easy yes</div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-16">
              <div>
                <div className="display text-garnet text-[22px] md:text-[26px] mb-3">LIQUID DATA HANDLES</div>
                <p className="font-serif text-ink-2 text-[19px] md:text-[23px] leading-[1.4]">
                  Production, fulfillment, billing, customer service, and the platform — the entire operation and all of the cost.
                </p>
              </div>
              <div>
                <div className="display text-garnet text-[22px] md:text-[26px] mb-3">GEORGIA STATE HELPS</div>
                <p className="font-serif text-ink-2 text-[19px] md:text-[23px] leading-[1.4]">
                  Open the network and help drive sales — alumni emails, game-day mentions, a nod from the Panther Athletic Club. No staff to hire, no inventory to buy.
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Compliance posture */}
        <div className="reveal grid grid-cols-1 md:grid-cols-12 gap-y-12 md:gap-x-16 border-t border-garnet/20 pt-12 mt-12">
          <div className="md:col-span-1 font-mono text-[13px] tracking-[0.22em] uppercase text-garnet">D</div>
          <div className="md:col-span-11">
            <div className="font-mono text-[12px] tracking-[0.22em] uppercase text-mute-1 mb-4">Compliance posture</div>
            <p className="font-serif text-ink text-[22px] md:text-[30px] xl:text-[34px] leading-[1.3]">
              All program structures involving prospective student-athletes are reviewed by Georgia State Athletics compliance and the College Sports Commission prior to launch. Liquid Data does not facilitate recruiting inducements as defined under <span className="num text-garnet">NCAA Bylaw 13.2</span>. Lane 03 operates under the <span className="num text-garnet">Bylaw 13.2.1</span> “generally available” exception with explicit compliance review.
            </p>
          </div>
        </div>

        {/* Economics ribbon */}
        <div className="reveal mt-16 grid grid-cols-1 sm:grid-cols-3 gap-px bg-garnet/15 border border-garnet/20">
          {[
          ['Wholesale', '$9.99', 'per case'],
          ['Retail', '$14.99', 'per case'],
          ['Net Split', '50 / 50', 'NIL × Liquid Data']].
          map(([l, v, s]) =>
          <div key={l} className="bg-paper p-7 text-center">
              <div className="font-mono text-[11px] tracking-[0.22em] uppercase text-mute-1">{l}</div>
              <div className="num text-garnet text-[40px] md:text-[48px] mt-2 font-medium">{v}</div>
              <div className="font-mono text-[11px] text-mute-1 tracking-[0.16em] uppercase mt-1">{s}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Next Steps ---------- */
function NextSteps() {
  const ref = useReveal();
  const steps = [
  {
    n: '01',
    label: 'Stage 01',
    title: 'Sample & Socialize',
    body: 'Liquid Data ships one production-grade sample case to GSU. NIL leadership, the AD, athletics marketing, and key Panther Athletic Club leadership hold the actual product. Real feedback shapes the label, the language, and the pitch.',
    out: 'Outcome · A sign-off on the can.'
  },
  {
    n: '02',
    label: 'Stage 02',
    title: 'Terms & MOU',
    body: 'Single-page MOU finalized. $9.99 wholesale, $14.99 retail, 50/50 net, Sun Belt water-category exclusivity. Both sides aligned in writing before anything is printed.',
    out: 'Outcome · Agreement signed.'
  },
  {
    n: '03',
    label: 'Stage 03',
    title: 'Demand Signal',
    body: 'Soft pre-order: alumni email + Panther Athletic Club outreach + a select alumni / student / parent list invited to subscribe ahead of production. Measure real intent, not projections. The pre-order number sizes the first print run.',
    out: 'Outcome · A demand curve we trust.'
  },
  {
    n: '04',
    label: 'Stage 04',
    title: 'Production & Go-to-Market',
    body: 'Liquid Data places the first production order against confirmed demand. Cans land at announced launch. DTC lane opens; Alumni-Business outreach starts; the Community NIL Program launches at partner high-school events. The model is live.',
    out: 'Outcome · The first lane in market.'
  }];


  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">
        <div className="reveal mb-16 max-w-[1100px]">
          <div className="eyebrow mb-6">Next Steps / 07</div>
          <h2 className="display text-ink text-[40px] md:text-[60px] xl:text-[72px] leading-[0.94]">
            FOUR STAGES.<br />
            <span className="text-garnet">SEQUENCED CAREFULLY.</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]">
            This is the first program of its kind, on both sides. We measure before we build, sign before we spend, and print only when demand is confirmed. The timeline is shaped by factory lead time and the depth of the pre-order signal — we'll commit to a launch date when the demand stage tells us to.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-px bg-garnet/15 border border-garnet/20 reveal">
          {steps.map((s) =>
          <div key={s.n} className="bg-paper p-7 md:p-9 relative flex flex-col">
              <div className="flex items-baseline justify-between mb-6">
                <div className="num text-garnet text-[64px] md:text-[88px] leading-none font-medium">{s.n}</div>
                <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-mute-1 text-right">{s.label}</div>
              </div>
              <div className="hr-thin w-full mb-6" />
              <h3 className="display font-semibold text-ink text-[20px] md:text-[24px] leading-[1.15] tracking-[0.02em] uppercase mb-4">{s.title}</h3>
              <p className="font-serif text-ink-2 text-[14px] leading-[1.6] mb-6 flex-1">{s.body}</p>
              <div className="font-mono text-[10px] tracking-[0.18em] uppercase text-garnet border-t border-garnet/15 pt-4">
                {s.out}
              </div>
            </div>
          )}
        </div>

        {/* Flow line */}
        <div className="reveal mt-10 flex flex-wrap items-center justify-center font-mono text-[10px] tracking-[0.22em] uppercase text-mute-1 gap-3 md:gap-4">
          <span>Sample</span>
          <span className="w-8 md:w-12 h-px bg-garnet/60" />
          <span>MOU</span>
          <span className="w-8 md:w-12 h-px bg-garnet/60" />
          <span>Demand signal</span>
          <span className="w-8 md:w-12 h-px bg-garnet/60" />
          <span>Print to demand</span>
          <span className="w-8 md:w-12 h-px bg-garnet/60" />
          <span className="text-garnet">Go to market</span>
        </div>

        {/* Honest timing note */}
        <div className="reveal mt-12 grid grid-cols-1 md:grid-cols-3 gap-6 max-w-[1100px] mx-auto">
          <div className="paper-card p-5 border-l-4 border-garnet">
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-garnet mb-2">Factory Lead Time</div>
            <p className="font-serif text-[14px] text-ink-2 leading-[1.55]">
              Custom-printed aluminum cans are made to order on factory cycles. Nothing is manufactured until the forecast and pre-orders confirm the size of the run.
            </p>
          </div>
          <div className="paper-card p-5 border-l-4 border-garnet">
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-garnet mb-2">First of Its Kind</div>
            <p className="font-serif text-[14px] text-ink-2 leading-[1.55]">
              No school has run this exact play. We build the playbook together — every learning from this pilot becomes the template for the program at scale.
            </p>
          </div>
          <div className="paper-card p-5 border-l-4 border-garnet">
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-garnet mb-2">A Shared Effort</div>
            <p className="font-serif text-[14px] text-ink-2 leading-[1.55]">
              We don't sell into Georgia State's network alone. GSU opens the doors — alumni, Panther Athletic Club, athletics channels — and we run the program behind it. The sales are a partnership.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Bonus: First-Party Data (small) ---------- */
function BonusData() {
  const ref = useReveal();

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

        <div className="reveal max-w-[820px] mb-12">
          <div className="eyebrow mb-6">The Data Layer / 08</div>
          <h2 className="display text-ink text-[34px] md:text-[48px] xl:text-[58px] leading-[1.0]">
            THE DATA IS THE ASSET.<br />
            <span className="text-garnet">WATER IS HOW IT GETS PAID FOR.</span>
          </h2>
          <p className="font-serif text-[16px] md:text-[18px] text-ink-2 leading-[1.6] mt-8 max-w-[720px]">
            Every can sold and every scan delivered is a first-party record. Names, emails, phones, geographic data, behavioral signals, and household intelligence — flowing direct to the Georgia State Athletics CRM. Built passively as a byproduct of a revenue-generating water program. Refreshed in real time. Compliant by design.
          </p>
          <p className="font-serif text-[16px] md:text-[18px] text-ink-2 leading-[1.6] mt-5 max-w-[720px]">
            This is the asset most Power-Five athletic departments wish they had. Liquid Data builds it for Georgia State as a structural output of the program.
          </p>
        </div>

        <div className="reveal">
          <ConsumerJourney />
        </div>
      </div>
    </section>);

}

/* ---------- Contact CTA — Calendly button + request form ---------- */
/* ============================================================
   LEAD CAPTURE CONFIG — fill these two values to go live.
   Until then, the form falls back to opening an email to Ape.
   Schema (run once in Supabase SQL editor):
     create table public.gsu_inquiries (
       id uuid default gen_random_uuid() primary key,
       created_at timestamptz default now(),
       name text not null, email text not null,
       organization text, message text,
       source text default 'georgiastate.liquiddata.co'
     );
     alter table public.gsu_inquiries enable row level security;
     create policy "anon-insert" on public.gsu_inquiries
       for insert to anon with check (true);
   ============================================================ */
const SUPABASE_URL = '';        // e.g. 'https://abcd1234.supabase.co'
const SUPABASE_ANON_KEY = '';   // the project's anon/public key
const LEADS_EMAIL = 'Kingkong@apebeverages.com';

function ContactCTA() {
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', org: '', note: '' });
  const CALENDLY_URL = 'https://calendly.com/apebeverages';

  function update(k, v) { setForm(f => ({ ...f, [k]: v })); }

  function mailtoFallback() {
    const subj = encodeURIComponent('Georgia State × Liquid Data — meeting request');
    const body = encodeURIComponent(
      `Name: ${form.name}\nEmail: ${form.email}\nOrganization: ${form.org}\n\n${form.note}`
    );
    window.location.href = `mailto:${LEADS_EMAIL}?subject=${subj}&body=${body}`;
  }

  async function submit(e) {
    e.preventDefault();
    if (!form.name || !form.email || sending) return;

    // Preferred path: POST to Supabase so every lead lands in a real DB.
    if (SUPABASE_URL && SUPABASE_ANON_KEY) {
      setSending(true);
      try {
        const res = await fetch(`${SUPABASE_URL}/rest/v1/gsu_inquiries`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            apikey: SUPABASE_ANON_KEY,
            Authorization: `Bearer ${SUPABASE_ANON_KEY}`,
            Prefer: 'return=minimal',
          },
          body: JSON.stringify({
            name: form.name, email: form.email,
            organization: form.org, message: form.note,
            source: 'georgiastate.liquiddata.co',
          }),
        });
        if (!res.ok) throw new Error('Supabase ' + res.status);
        setSent(true);
      } catch (err) {
        // Network/config failure — never drop the lead; open email instead.
        mailtoFallback();
        setSent(true);
      } finally {
        setSending(false);
      }
      return;
    }

    // No backend configured yet — open the visitor's email client.
    mailtoFallback();
    setSent(true);
  }

  const inputCls = "w-full bg-paper/95 text-ink placeholder-mute-2 border border-paper/30 px-4 py-3 font-sans text-[14px] focus:outline-none focus:border-gold transition-colors";

  return (
    <div className="mt-14 max-w-[940px] mx-auto grid grid-cols-1 md:grid-cols-12 gap-6 items-stretch text-left">
      {/* Schedule a meeting */}
      <div className="md:col-span-5 flex flex-col justify-start bg-paper/10 border border-paper/20 p-8">
        <div className="font-mono text-[11px] tracking-[0.22em] uppercase text-gold mb-3">Option A</div>
        <div className="display text-paper text-[26px] md:text-[30px] leading-[1.05] mb-3">Schedule a meeting</div>
        <p className="font-serif text-paper/80 text-[15px] leading-[1.55] mb-6">
          Grab 30 minutes with our team. We'll walk the model, the can, and the path to a pilot.
        </p>
        <a
          href={CALENDLY_URL}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center justify-center gap-3 px-6 py-4 whitespace-nowrap bg-paper text-garnet font-mono text-[12px] tracking-[0.18em] uppercase hover:bg-gold hover:text-ink transition-colors">
          Open the calendar <Icon.Arrow size={12} />
        </a>
      </div>

      {/* Request form */}
      <div className="md:col-span-7 bg-paper/10 border border-paper/20 p-8">
        <div className="font-mono text-[11px] tracking-[0.22em] uppercase text-gold mb-3">Option B</div>
        <div className="display text-paper text-[26px] md:text-[30px] leading-[1.05] mb-5">Send a request</div>
        {sent ?
        <div className="py-8 text-center">
            <div className="font-serif italic text-paper text-[20px] leading-[1.5]">Thank you — your request is on its way.</div>
            <div className="font-mono text-[11px] tracking-[0.18em] uppercase text-paper/70 mt-3">We'll be in touch within one business day.</div>
          </div> :

        <form onSubmit={submit} className="space-y-3">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <input className={inputCls} placeholder="Your name *" value={form.name} onChange={e => update('name', e.target.value)} required />
              <input className={inputCls} type="email" placeholder="Email *" value={form.email} onChange={e => update('email', e.target.value)} required />
            </div>
            <input className={inputCls} placeholder="Organization / role" value={form.org} onChange={e => update('org', e.target.value)} />
            <textarea className={inputCls} rows="3" placeholder="What would you like to cover?" value={form.note} onChange={e => update('note', e.target.value)}></textarea>
            <p className="font-serif italic text-paper/65 text-[11px] leading-[1.5] pt-2 px-1">
              <span className="font-mono not-italic uppercase tracking-[0.16em] text-paper/80 text-[10px]">Notice at Collection.</span> Liquid Data collects your name, business email, organization, and message to respond to your inquiry and qualify potential pilot fit. We do not sell or share this information with third parties for cross-context behavioral advertising. See our <a href="/privacy.html" className="underline hover:text-gold">Privacy Policy</a> for retention period and your CCPA/CPRA rights.
            </p>
            <button type="submit" disabled={sending} className="w-full inline-flex items-center justify-center gap-3 px-6 py-4 whitespace-nowrap bg-garnet-deep text-paper border border-paper/30 font-mono text-[12px] tracking-[0.18em] uppercase hover:bg-paper hover:text-garnet transition-colors disabled:opacity-60">
              {sending ? 'Sending…' : <>Send request <Icon.Arrow size={12} /></>}
            </button>
          </form>
        }
      </div>
    </div>);

}

/* ---------- CTA + Footer ---------- */
function CTAFooter() {
  return (
    <section className="relative">
      {/* CTA */}
      <div className="garnet-panel py-28 md:py-36 px-6 md:px-10 relative overflow-hidden">
        <div className="absolute inset-0 opacity-[0.06] pointer-events-none" style={{
          backgroundImage: 'linear-gradient(45deg, rgba(0,0,0,0.4) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 75%, transparent 75%, transparent)',
          backgroundSize: '24px 24px'
        }} />
        <div className="max-w-[1200px] mx-auto text-center relative">
          <div className="flex justify-center mb-10">
            <div className="bg-paper rounded-2xl flex items-center justify-center" style={{ width: 110, height: 110, boxShadow: '0 12px 36px rgba(0,0,0,0.3)' }}>
              <BlockC size={78} />
            </div>
          </div>
          <div className="font-mono text-[11px] tracking-[0.32em] uppercase mb-8 opacity-80 text-paper">/ 09 · The Ask</div>
          <h2 className="display text-paper text-[40px] md:text-[72px] xl:text-[100px] leading-[0.92]">
            BE THE FIRST<br />SUN BELT PROGRAM<br />
            <span className="opacity-70">TO OWN THIS.</span>
          </h2>
          <div className="w-32 h-px mx-auto mt-10 mb-10 bg-gradient-to-r from-transparent via-gold to-transparent" />
          <div className="font-serif italic text-paper text-[20px] md:text-[24px] opacity-90 max-w-2xl mx-auto leading-[1.5]">
            A new program built to grow school pride, open a new revenue stream for NIL, and build the first-party database your athletics department keeps forever — all running through Atlanta's largest alumni footprint and the state's high-school athletic community.
          </div>

          <ContactCTA />
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-ink text-paper py-14 px-6 md:px-10">
        <div className="max-w-[1400px] mx-auto grid grid-cols-1 md:grid-cols-12 gap-10 items-start">
          <div className="md:col-span-5 flex items-start gap-5">
            <div className="bg-paper rounded-xl flex items-center justify-center shrink-0" style={{ width: 60, height: 60 }}>
              <BlockC size={42} />
            </div>
            <div>
              <div className="display text-paper text-[22px] leading-[0.95] tracking-[0.01em]">GEORGIA STATE</div>
              <div className="font-mono text-[11px] tracking-[0.2em] uppercase text-mute-3 mt-2 font-medium">× LIQUID DATA · NIL Revenue Pilot · 2026</div>
            </div>
          </div>

          <div className="md:col-span-4 space-y-2.5 font-mono text-[13px] tracking-[0.04em] text-mute-3 leading-[1.5]">
            <div className="text-paper font-medium">Kingkong@apebeverages.com</div>
            <div className="text-mute-2 mt-3 font-serif italic text-[12px]">Liquid Data · Los Angeles, CA · Atlanta, GA</div>
          </div>

          <div className="md:col-span-3 font-mono text-[12px] tracking-[0.18em] uppercase text-mute-3 md:text-right leading-[1.6] font-medium">
            <div>Confidential</div>
            <div>For GSU NIL Leadership</div>
            <div className="mt-3 text-mute-2 normal-case tracking-normal font-serif italic text-[12px]">© 2026 Liquid Data</div>
          </div>
        </div>
        <div className="max-w-[1400px] mx-auto mt-10 pt-8 border-t border-paper/10">
          <p className="font-serif italic text-mute-2 text-[11px] leading-[1.6] max-w-[1100px]">
            Program structures involving prospective student-athletes are reviewed by school compliance and the College Sports Commission prior to launch. Lane 03 (Community NIL Program) operates under the NCAA Bylaw 13.2.1 “generally available” exception. Liquid Data does not facilitate recruiting inducements as defined under NCAA Bylaw 13.2. Compliance with NCAA Division I rules, state NIL law, and state high-school athletic association rules is the responsibility of the partnering institution and its NIL collective.
          </p>
        </div>
      </footer>
    </section>);

}

Object.assign(window, { Partnership, NextSteps, BonusData, CTAFooter });