/* 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-primary/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-primary">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-primary/20 pt-12">
          <div className="md:col-span-1 font-mono text-[13px] tracking-[0.22em] uppercase text-primary">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</div>
            <p className="font-serif text-ink text-[26px] md:text-[36px] xl:text-[42px] leading-[1.25]">
              Cases of <span className="num text-primary">12 × 16 oz</span> custom Bulldog Water cans at <span className="num text-primary">$9.99 / case</span> — Georgia'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-primary/20 pt-12 mt-12">
          <div className="md:col-span-1 font-mono text-[13px] tracking-[0.22em] uppercase text-primary">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-primary">$14.99 + shipping</span>, with net profits split <span className="num text-primary">50 / 50</span> — <span className="num text-primary">$2.50 / case</span> to UGA's NIL program, 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-primary/20 pt-12 mt-12">
          <div className="md:col-span-1 font-mono text-[13px] tracking-[0.22em] uppercase text-primary">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-primary 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-primary text-[22px] md:text-[26px] mb-3">GEORGIA 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 Georgia Bulldog 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-primary/20 pt-12 mt-12">
          <div className="md:col-span-1 font-mono text-[13px] tracking-[0.22em] uppercase text-primary">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 Athletics compliance and the College Sports Commission prior to launch. Liquid Data does not facilitate recruiting inducements as defined under <span className="num text-primary">NCAA Bylaw 13.2</span>. Lane 03 operates under the <span className="num text-primary">Bylaw 13.2.1</span> “generally available” exception with explicit compliance review.
            </p>
            <p className="font-serif italic text-mute-1 text-[15px] leading-[1.55] mt-6 max-w-[980px]">
              Glory Glory is UGA's third-party NIL platform and operates independently of the athletic department. Third-party NIL revenue of this kind has been reported to sit outside the $20.5M revenue-sharing cap. Final treatment is determined by UGA athletics compliance and the College Sports Commission.
            </p>
          </div>
        </div>

        {/* Economics ribbon */}
        <div className="reveal mt-16 grid grid-cols-1 sm:grid-cols-3 gap-px bg-primary/15 border border-primary/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-primary 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 Georgia. NIL leadership, the AD, athletics marketing, and key Georgia Bulldog 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, SEC water-category exclusivity, and UGA trademark licensing confirmed. 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 + Georgia Bulldog 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-primary/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-primary">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-primary/15 border border-primary/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-primary 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-primary border-t border-primary/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-primary/60" />
          <span>MOU</span>
          <span className="w-8 md:w-12 h-px bg-primary/60" />
          <span>Demand signal</span>
          <span className="w-8 md:w-12 h-px bg-primary/60" />
          <span>Print to demand</span>
          <span className="w-8 md:w-12 h-px bg-primary/60" />
          <span className="text-primary">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-primary">
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-primary 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-primary">
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-primary 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-primary">
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-primary mb-2">A Shared Effort</div>
            <p className="font-serif text-[14px] text-ink-2 leading-[1.55]">
              We don't sell into Georgia's network alone. Georgia opens the doors — alumni, The Georgia Bulldog 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-primary/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-primary">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 — captured exclusively for Georgia and flowing directly to the University of Georgia 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 SEC athletic departments wish they had. Liquid Data builds it for Georgia as a structural output of the program: closed-loop attribution that the athletics department keeps.
          </p>
        </div>

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

}

/* ---------- Contact CTA — Calendly button + request form ---------- */
/* ============================================================
   LEAD CAPTURE — shared across all Liquid Data school sites.
   Every school posts into ONE `leads` table; `form_source` and
   `source_page` identify which school the lead came from.

   ⚠️ TO ACTIVATE: paste the shared leads project's URL + publishable
   key below. Until both are filled in, the form tells the visitor
   honestly that it can't submit and gives them an email address.
   It must NEVER claim success without actually storing the lead.
   ============================================================ */
const SUPABASE_URL = '';        // e.g. 'https://abcd1234.supabase.co'
const SUPABASE_ANON_KEY = '';   // the shared project's publishable key
const CONTACT_EMAIL = 'hello@liquiddata.co';   // public-facing; forwards to the monitored inbox

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

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

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

    // No backend configured — do NOT pretend the lead was captured.
    if (!SUPABASE_URL || !SUPABASE_ANON_KEY) {
      setError("Our form isn't accepting submissions right now. Please email us directly at hello@liquiddata.co.");
      return;
    }

    setSending(true);
    try {
      const res = await fetch(`${SUPABASE_URL}/rest/v1/leads`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          apikey: SUPABASE_ANON_KEY,
          Authorization: `Bearer ${SUPABASE_ANON_KEY}`,
          Prefer: 'return=minimal',
        },
        body: JSON.stringify({
          form_source: 'uga-pitch-contact',
          name: form.name,
          email: form.email,
          company: form.org || null,
          message: form.note || null,
          source_page: 'uga.liquiddata.co',
          consent_at: new Date().toISOString(),
          raw_payload: form,
        }),
      });
      if (!res.ok) throw new Error('Supabase ' + res.status);
      setSent(true);
    } catch (err) {
      console.error('[lead-form]', err);
      setError("Couldn't submit. Please email us directly at hello@liquiddata.co.");
    } finally {
      setSending(false);
    }
  }

  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-accent transition-colors";
  const scheduleHref = CALENDLY_URL || `mailto:${CONTACT_EMAIL}?subject=University%20of%20Georgia%20pilot%20meeting`;

  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-accent 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={scheduleHref}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center justify-center gap-3 px-6 py-4 whitespace-nowrap bg-paper text-primary font-mono text-[12px] tracking-[0.18em] uppercase hover:bg-accent hover:text-ink transition-colors">
          {CALENDLY_URL ? 'Open the calendar' : 'Email to schedule'} <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-accent 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" className="underline hover:text-accent">Privacy Policy</a> for retention period and your CCPA/CPRA rights.
            </p>
            {error && (
              <div role="alert" className="mb-4 border border-accent/60 bg-accent/10 px-4 py-3 font-serif text-[14px] text-paper leading-[1.5]">
                {error}{' '}
                <a href={`mailto:${CONTACT_EMAIL}`} className="text-paper font-medium underline underline-offset-2 hover:opacity-80 whitespace-nowrap">Email Liquid Data</a>
              </div>
            )}
            <button type="submit" disabled={sending} className="w-full inline-flex items-center justify-center gap-3 px-6 py-4 whitespace-nowrap bg-primary-deep text-paper border border-paper/30 font-mono text-[12px] tracking-[0.18em] uppercase hover:bg-paper hover:text-primary 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="primary-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">
            <UGALockup width={250} />
          </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 />SEC 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-accent 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 — powered by 372,000+ living alumni, metro Atlanta's business network, 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 flex-col items-start gap-5">
            <UGALockup width={196} />
            <div className="font-mono text-[11px] tracking-[0.2em] uppercase text-mute-3 font-medium">× Liquid Data · NIL Revenue Pilot · 2026</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">hello@liquiddata.co</div>
            <div className="text-mute-2 mt-3 font-serif italic text-[12px]">Liquid Data · Los Angeles, CA · Athens, GA</div>
            <div className="text-mute-2 mt-3 font-serif italic text-[12px]">From the desks of Andrew Grant Bagg &amp; Itai Leffler · Cofounders, Liquid Data</div>
            <div className="mt-3">
              <a href="/privacy" className="underline hover:text-accent text-mute-3">Privacy Policy</a>
            </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 University of Georgia Athletics Leadership</div>
            <div>Exclusive to University of Georgia Athletics</div>
            <div className="mt-3 text-mute-2 normal-case tracking-normal font-serif italic text-[12px]">© 2026 Liquid Data · part of the Ape Water ecosystem</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 Georgia High School Association rules is the responsibility of the partnering institution and its NIL program.
          </p>
        </div>
      </footer>
    </section>);

}

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