/* 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 South Carolina</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 Gamecock cans at <span className="num text-garnet">$9.99 / case</span> — South Carolina'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">SOUTH CAROLINA 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 Gamecock Club. No staff to hire, no inventory to buy.
                </p>
              </div>
            </div>
          </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 SC. NIL leadership, the AD, athletics marketing, and key Gamecock 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. 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 + Gamecock Club outreach + a select recruit 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; Lane 03 recruit seeding begins. 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 South Carolina's network alone. SC opens the doors — alumni, Gamecock 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-[760px] mb-12">
          <div className="eyebrow mb-6">Bonus / 08</div>
          <h2 className="display text-ink text-[32px] md:text-[44px] xl:text-[52px] leading-[1.0]">
            We deliver the water.<br />
            <span className="text-garnet">You keep the data.</span>
          </h2>
          <p className="font-serif text-[15px] md:text-[17px] text-ink-2 leading-[1.6] mt-8 max-w-[640px]">
            A custom scan-to-data journey, branded for South Carolina — every scan becomes a first-party profile that flows direct to SC Athletics for recruiting, ticketing, and donor outreach.
          </p>
          <div className="font-serif italic text-mute-1 text-[14px] mt-5">
            The revenue forecast is the cake. The data is the cherry on top.
          </div>
        </div>

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

}

/* ---------- Contact CTA — Calendly button + request form ---------- */
/* Supabase project: southcarolina-leads (created 2026-05-29).
   The publishable key is safe in client-side code because RLS controls what it can do (see schema). */
const SUPABASE_URL = 'https://kosycxdyswvmeboyuqni.supabase.co';
const SUPABASE_ANON_KEY = 'sb_publishable_ycd61fG32VCSCr9QeF2cKg_PCE1l46j';
const CALENDLY_URL = 'https://calendly.com/apebeverages';

function ContactCTA() {
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', org: '', note: '' });

  function update(k, v) { setForm(f => ({ ...f, [k]: v })); }
  async function submit(e) {
    e.preventDefault();
    if (!form.name || !form.email) return;
    setSubmitting(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: 'sc-pitch-contact',
          name: form.name,
          email: form.email,
          company: form.org || null,
          message: form.note || null,
          source_page: 'southcarolina.liquiddata.co',
          consent_at: new Date().toISOString(),
          raw_payload: form
        })
      });
      if (!res.ok) throw new Error(`Status ${res.status}`);
      setSent(true);
    } catch (err) {
      console.error('[lead-form]', err);
      alert("Couldn't submit — please email us directly at hello@liquiddata.co");
    } finally {
      setSubmitting(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-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-center 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 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-sans text-[11px] leading-[1.5] text-paper/60 px-1">
              <span className="font-medium text-paper/75">Notice at Collection.</span> Liquid Data collects your name, business email, organization, and message to respond to your inquiry and qualify a potential pilot with South Carolina Athletics. 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-gold">Privacy Policy</a> for your CCPA/CPRA rights.
            </p>
            <button type="submit" disabled={submitting} className="w-full inline-flex items-center justify-center gap-3 px-6 py-4 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 disabled:cursor-not-allowed">
              {submitting ? 'Submitting…' : <>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 />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-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 strengthen recruiting — forecast and pre-sold together with South Carolina, then made to order.
          </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]">SOUTH CAROLINA</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">hello@liquiddata.co</div>
            <div className="text-mute-2 mt-3 font-serif italic text-[12px]">Liquid Data · Los Angeles, CA · Columbia, SC</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>

          <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 SC NIL Leadership</div>
            <div>Exclusive to South Carolina Athletics</div>
            <div className="mt-3 text-mute-2 normal-case tracking-normal font-serif italic text-[12px]">© 2026 Liquid Data</div>
          </div>
        </div>
      </footer>
    </section>);

}

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