/* eslint-disable react/no-unescaped-entities */
/* ============================================================
   Sections — Part 3
   Experience-It · Offer · Guarantees · Compliance · Lever · Contact
   ============================================================ */


// Note: ExperienceIt now lives in consumer-journey.jsx (multi-screen iPhone demo)


// ============================================================
// OFFER — 3-stage waterfall
// ============================================================
function Offer() {
  const stages = window.STAGES;
  return (
    <section className="section section--light" id="offer">
      <style>{`
        .offer-top { margin-bottom: 56px; max-width: 720px; }
        .offer-h { font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 5.4vw, 78px); letter-spacing: -0.03em; line-height: 0.98; color: var(--ink); text-wrap: balance; }
        .offer-sub { margin-top: 22px; color: var(--tk-2); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; }

        .offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .offer-card {
          position: relative;
          background: var(--paper);
          border: 1px solid var(--line-ink);
          border-radius: 18px;
          padding: 36px 32px 32px;
          display: flex;
          flex-direction: column;
        }
        .offer-card.featured { background: var(--ink); color: var(--t-1); border-color: var(--ink); }
        .offer-card.featured .offer-card-label, .offer-card.featured .offer-card-sub { color: var(--t-3); }
        .offer-card.featured .offer-card-bullets li { color: var(--t-2); }
        .offer-card.featured .offer-card-note { color: var(--t-3); border-top-color: var(--line); }

        .offer-card-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--tk-3); margin-bottom: 24px; }
        .offer-card-price { font-family: var(--f-display); font-weight: 700; font-size: clamp(48px, 5vw, 68px); letter-spacing: -0.035em; line-height: 1; margin-bottom: 8px; }
        .offer-card-sub { color: var(--tk-3); font-size: 14px; margin-bottom: 28px; font-family: var(--f-mono); letter-spacing: 0.04em; }
        .offer-card-bullets { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
        .offer-card-bullets li { display: flex; gap: 10px; font-size: 14px; color: var(--tk-2); line-height: 1.45; }
        .offer-card-bullets li::before {
          content: "";
          flex-shrink: 0;
          width: 4px; height: 4px;
          border-radius: 50%;
          background: currentColor;
          margin-top: 8px;
        }
        .offer-card-note {
          padding-top: 20px;
          border-top: 1px solid var(--line-ink);
          font-size: 13px;
          color: var(--tk-3);
          line-height: 1.5;
          margin-bottom: 24px;
        }
        .offer-card-cta {
          margin-top: auto;
          width: 100%;
          height: 48px;
          background: var(--ink);
          color: var(--t-1);
          border: none;
          border-radius: 999px;
          font-family: var(--f-display);
          font-weight: 500;
          font-size: 14px;
          letter-spacing: -0.005em;
          display: flex; align-items: center; justify-content: center;
          gap: 8px;
          transition: background 160ms ease;
        }
        .offer-card.featured .offer-card-cta { background: var(--paper); color: var(--ink); }
        .offer-card-cta:hover { transform: translateY(-1px); }

        .inaugural-pill {
          position: absolute;
          top: 24px; right: 24px;
          padding: 5px 10px;
          background: var(--paper);
          color: var(--ink);
          font-family: var(--f-mono);
          font-size: 10px;
          letter-spacing: 0.16em;
          border-radius: 999px;
          font-weight: 600;
          white-space: nowrap;
        }

        @media (max-width: 980px) { .offer-grid { grid-template-columns: 1fr; } }
      `}</style>
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 32, color: "var(--tk-3)" }}>THE OFFER · 3-STAGE WATERFALL</div>
        </Reveal>
        <Reveal>
          <div className="offer-top">
            <h2 className="offer-h">Pilot it. Anchor it. Scale it.</h2>
            <p className="offer-sub">
              Three commitment levels. The pilot proves attribution. Year 1 anchor locks category exclusivity. Stage 03 scales nationally. Each builds on the last.
            </p>
          </div>
        </Reveal>
        <div className="offer-grid">
          {stages.map((s, i) => (
            <Reveal delay={i * 80} key={s.id}>
              <div className={"offer-card" + (i === 1 ? " featured" : "")}>
                {i === 1 && <div className="inaugural-pill">INAUGURAL ANCHOR</div>}
                <div className="offer-card-label">{s.label}</div>
                <div className="offer-card-price">{s.price}</div>
                <div className="offer-card-sub">{s.sub}</div>
                <ul className="offer-card-bullets">
                  {s.bullets.map((b, j) => <li key={j}>{b}</li>)}
                </ul>
                <div className="offer-card-note">{s.note}</div>
                <a href="#contact" className="offer-card-cta">{s.cta} <Icon name="arrow" size={14}/></a>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// GUARANTEES
// ============================================================
function Guarantees() {
  const g = window.GUARANTEES;
  return (
    <section className="section" id="guarantees">
      <style>{`
        .g-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: end; margin-bottom: 56px; }
        .g-h { font-family: var(--f-display); font-weight: 600; font-size: clamp(34px, 4.6vw, 64px); letter-spacing: -0.025em; line-height: 1.02; text-wrap: balance; }
        .g-h em { font-style: normal; color: var(--t-3); font-weight: 500; }
        .g-sub { color: var(--t-2); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; max-width: 520px; }
        .g-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
        .g-cell { background: var(--ink-2); padding: 36px 32px; }
        .g-k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--t-3); margin-bottom: 18px; }
        .g-t { font-family: var(--f-display); font-weight: 600; font-size: 22px; letter-spacing: -0.015em; margin-bottom: 14px; }
        .g-cell .body { color: var(--t-2); font-size: 14px; line-height: 1.55; }
        @media (max-width: 880px) { .g-grid { grid-template-columns: 1fr; } .g-top { grid-template-columns: 1fr; } }
      `}</style>
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 32 }}>GUARANTEES</div>
        </Reveal>
        <div className="g-top">
          <Reveal>
            <h2 className="g-h">Volume delivered.<br/><em>Conversion reported, not promised.</em></h2>
          </Reveal>
          <Reveal delay={120}>
            <p className="g-sub">
              The unit we guarantee is the can in hand. Scan rates, conversion rates, and ROI are reported back — never promised. That's the line that makes this safe to sign.
            </p>
          </Reveal>
        </div>
        <Reveal>
          <div className="g-grid">
            {g.map((c) => (
              <div className="g-cell" key={c.k}>
                <div className="g-k">{c.k}</div>
                <div className="g-t">{c.t}</div>
                <div className="body">{c.body}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// COMPLIANCE — verbatim §6
// ============================================================
function Compliance() {
  const c = window.COMPLIANCE;
  return (
    <section className="section section--light" id="compliance">
      <style>{`
        .cmp-top { margin-bottom: 56px; max-width: 720px; }
        .cmp-h { font-family: var(--f-display); font-weight: 600; font-size: clamp(34px, 4.6vw, 64px); letter-spacing: -0.025em; line-height: 1.02; color: var(--ink); text-wrap: balance; }
        .cmp-sub { margin-top: 22px; color: var(--tk-2); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; }
        .cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .cmp-card {
          background: var(--paper);
          border: 1px solid var(--line-ink);
          border-radius: 16px;
          padding: 32px 28px;
        }
        .cmp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
        .cmp-ico-wrap {
          width: 44px; height: 44px;
          border-radius: 12px;
          border: 1px solid var(--line-ink);
          display: flex; align-items: center; justify-content: center;
          color: var(--ink);
        }
        .cmp-k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--tk-3); }
        .cmp-t { font-family: var(--f-display); font-weight: 600; font-size: 22px; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 12px; }
        .cmp-card .body { color: var(--tk-2); font-size: 14px; line-height: 1.55; margin-bottom: 20px; }
        .cmp-tag {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 4px 12px;
          border-radius: 999px;
          background: var(--ink);
          color: var(--t-1);
          font-family: var(--f-mono);
          font-size: 11px;
          letter-spacing: 0.06em;
        }
        @media (max-width: 880px) { .cmp-grid { grid-template-columns: 1fr; } }
      `}</style>
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 32, color: "var(--tk-3)" }}>COMPLIANCE & DATA GOVERNANCE</div>
        </Reveal>
        <Reveal>
          <div className="cmp-top">
            <h2 className="cmp-h">First-party. Uber-owned. Audit-ready.</h2>
            <p className="cmp-sub">
              Every record captured under this program belongs to Uber alone. No middleware. No syndication. No second recipient. Ever.
            </p>
          </div>
        </Reveal>
        <div className="cmp-grid">
          {c.map((card, i) => (
            <Reveal delay={i * 60} key={card.k}>
              <div className="cmp-card">
                <div className="cmp-head">
                  <div className="cmp-ico-wrap"><Icon name={card.icon} size={20}/></div>
                  <div className="cmp-k">{card.k}</div>
                </div>
                <div className="cmp-t">{card.t}</div>
                <div className="body">{card.body}</div>
                <div className="cmp-tag"><Icon name="check" size={11}/>{card.tag}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// LEVER — "first sign sets the floor"
// ============================================================
function Lever() {
  return (
    <section className="section" id="lever" style={{ background: "var(--ink-2)" }}>
      <style>{`
        .lev-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 6vw, 100px); align-items: start; }
        .lev-h { font-family: var(--f-display); font-weight: 700; font-size: clamp(38px, 5vw, 72px); letter-spacing: -0.028em; line-height: 1.0; text-wrap: balance; }
        .lev-h em { font-style: normal; color: var(--t-3); font-weight: 500; }
        .lev-body { color: var(--t-2); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; }
        .lev-body p + p { margin-top: 18px; }
        .lev-body b { color: var(--t-1); font-weight: 600; }
        .lev-quote {
          margin-top: 36px;
          padding: 28px 0;
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
          font-family: var(--f-display);
          font-weight: 500;
          font-size: clamp(20px, 2.2vw, 28px);
          letter-spacing: -0.015em;
          line-height: 1.2;
          color: var(--t-1);
        }
        .lev-quote span { color: var(--t-3); }
        @media (max-width: 880px) { .lev-grid { grid-template-columns: 1fr; } }
      `}</style>
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 32 }}>THE LEVER</div>
        </Reveal>
        <div className="lev-grid">
          <Reveal>
            <h2 className="lev-h">First sign sets the floor.<br/><em>Every later partner pays it.</em></h2>
          </Reveal>
          <Reveal delay={120}>
            <div className="lev-body">
              <p>
                When Uber became the NFL's official rideshare partner in 2023, the price moved permanently — for every category, every other league deal. The first signature didn't just buy a category. It set the market price for every category that came after.
              </p>
              <p>
                <b>This is the same lever, in reverse.</b> The inaugural rideshare partner on the Ape × venue circuit sets the rate card. Every later category pays the floor that's been set — at-cost or above, never below.
              </p>
              <p>
                <b>The strategic value of moving first is bigger than the deal itself.</b> Uber doesn't just get the program. Uber gets the right to define what a brand-in-hand activation costs across the industry.
              </p>
              <div className="lev-quote">
                The can is not the media plan. <span>The can is the doorway.</span>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CONTACT
// ============================================================
// Supabase project: ape-water-sweepstakes (shared multi-tenant pitch_leads table)
// Publishable key is safe to embed client-side — anon role has INSERT-only, no SELECT/UPDATE/DELETE.
const SUPABASE_URL = "https://ywyjahvvoqkgrdceayuf.supabase.co";
const SUPABASE_ANON_KEY = "sb_publishable_OHNLGFSV0Vs4Gata4TQTog_XYrrbdwJ";

function Contact() {
  const steps = window.NEXT_STEPS;
  const [state, setState] = useState({ name: "", email: "", company: "Uber", note: "" });
  const [status, setStatus] = useState("idle");

  async function submit(e) {
    e.preventDefault();
    if (!state.email) return;
    setStatus("sending");
    // Optimistic UI — show "sent" immediately; if the POST fails we surface the error below.
    setStatus("sent");
    try {
      const res = await fetch(`${SUPABASE_URL}/rest/v1/pitch_leads`, {
        method: "POST",
        headers: {
          "apikey": SUPABASE_ANON_KEY,
          "Authorization": `Bearer ${SUPABASE_ANON_KEY}`,
          "Content-Type": "application/json",
          "Prefer": "return=minimal",
        },
        body: JSON.stringify({
          tenant: "uber",
          name: state.name || null,
          email: state.email,
          company: state.company || null,
          role: null,
          message: state.note || null,
          source_url: typeof window !== "undefined" ? window.location.href : null,
          user_agent: typeof navigator !== "undefined" ? navigator.userAgent : null,
        }),
      });
      if (!res.ok) {
        const text = await res.text().catch(() => "");
        console.error("Lead submission failed:", res.status, text);
        setStatus("error");
      }
    } catch (err) {
      console.error("Lead submission error:", err);
      setStatus("error");
    }
  }

  return (
    <section className="section section--light" id="contact">
      <style>{`
        .ct-top { margin-bottom: 56px; max-width: 720px; }
        .ct-h { font-family: var(--f-display); font-weight: 700; font-size: clamp(38px, 5vw, 72px); letter-spacing: -0.028em; line-height: 0.98; color: var(--ink); text-wrap: balance; }
        .ct-sub { margin-top: 22px; color: var(--tk-2); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; }

        .ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }

        .ct-timeline { display: grid; gap: 0; border-top: 1px solid var(--line-ink); }
        .ct-tl-row {
          display: grid;
          grid-template-columns: 110px 1fr;
          gap: 18px;
          padding: 22px 0;
          border-bottom: 1px solid var(--line-ink);
        }
        .ct-tl-w { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--tk-3); padding-top: 3px; }
        .ct-tl-t { font-family: var(--f-display); font-weight: 600; font-size: 19px; letter-spacing: -0.012em; color: var(--ink); margin-bottom: 6px; }
        .ct-tl-body { color: var(--tk-3); font-size: 14px; line-height: 1.5; }

        .ct-form {
          background: var(--paper);
          border: 1px solid var(--line-ink);
          border-radius: 18px;
          padding: 36px 32px;
          min-width: 0;
        }
        .ct-form-k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--tk-3); margin-bottom: 18px; }
        .ct-form-h { font-family: var(--f-display); font-weight: 600; font-size: 22px; letter-spacing: -0.012em; color: var(--ink); margin-bottom: 24px; }
        .ct-form-grid { display: grid; gap: 14px; min-width: 0; }
        .ct-form-grid .ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-width: 0; }
        .ct-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--tk-3); margin-bottom: 6px; display: block; }
        .ct-input, .ct-area {
          width: 100%;
          min-width: 0;
          padding: 12px 14px;
          background: var(--paper);
          border: 1px solid var(--line-ink-2);
          border-radius: 10px;
          font-family: var(--f-body);
          font-size: 15px;
          color: var(--ink);
          transition: border-color 160ms ease;
        }
        .ct-input:focus, .ct-area:focus { outline: none; border-color: var(--ink); }
        .ct-area { min-height: 110px; resize: vertical; }
        .ct-submit {
          margin-top: 14px;
          height: 50px;
          background: var(--ink);
          color: var(--t-1);
          border: none;
          border-radius: 999px;
          font-family: var(--f-display);
          font-weight: 500;
          font-size: 15px;
          letter-spacing: -0.005em;
          display: flex; align-items: center; justify-content: center;
          gap: 8px;
          transition: background 160ms ease;
        }
        .ct-submit:hover { background: #1a1a1a; }
        .ct-submit:disabled { opacity: 0.5; cursor: not-allowed; }
        .ct-status {
          margin-top: 12px;
          font-family: var(--f-mono);
          font-size: 12px;
          letter-spacing: 0.04em;
          color: var(--tk-3);
        }
        .ct-status.sent { color: var(--uber-eats-green); }

        .ct-closer {
          margin-top: 80px;
          padding-top: 48px;
          border-top: 1px solid var(--line-ink);
          text-align: center;
        }
        .ct-closer h3 {
          font-family: var(--f-display);
          font-weight: 600;
          font-size: clamp(24px, 3vw, 40px);
          letter-spacing: -0.02em;
          line-height: 1.1;
          color: var(--ink);
          text-wrap: balance;
          margin: 0 0 12px;
        }
        .ct-closer p { color: var(--tk-3); font-size: 15px; }

        @media (max-width: 880px) {
          .ct-grid { grid-template-columns: 1fr; }
          .ct-form-grid .ct-row { grid-template-columns: 1fr; }
          .ct-tl-row { grid-template-columns: 90px 1fr; }
        }
      `}</style>
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 32, color: "var(--tk-3)" }}>NEXT STEPS</div>
        </Reveal>
        <Reveal>
          <div className="ct-top">
            <h2 className="ct-h">From signed contract to cans in venues — 4 to 6 weeks.</h2>
            <p className="ct-sub">
              We move on Uber's timeline. Below is what 4–6 weeks looks like in practice — and where to start.
            </p>
          </div>
        </Reveal>
        <div className="ct-grid">
          <Reveal>
            <div className="ct-timeline">
              {steps.map((s) => (
                <div className="ct-tl-row" key={s.w}>
                  <div className="ct-tl-w">{s.w}</div>
                  <div>
                    <div className="ct-tl-t">{s.t}</div>
                    <div className="ct-tl-body">{s.body}</div>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={120}>
            <form className="ct-form" onSubmit={submit}>
              <div className="ct-form-k">START THE CONVERSATION</div>
              <div className="ct-form-h">A quick intro is enough.</div>
              <div className="ct-form-grid">
                <div className="ct-row">
                  <div>
                    <label className="ct-label">YOUR NAME</label>
                    <input className="ct-input" placeholder="Alex"
                      value={state.name} onChange={(e) => setState({...state, name: e.target.value})}/>
                  </div>
                  <div>
                    <label className="ct-label">TEAM</label>
                    <input className="ct-input" placeholder="Growth, Partnerships, etc."
                      value={state.company} onChange={(e) => setState({...state, company: e.target.value})}/>
                  </div>
                </div>
                <div>
                  <label className="ct-label">WORK EMAIL</label>
                  <input className="ct-input" type="email" required placeholder="alex@uber.com"
                    value={state.email} onChange={(e) => setState({...state, email: e.target.value})}/>
                </div>
                <div>
                  <label className="ct-label">A LINE OR TWO</label>
                  <textarea className="ct-area" placeholder="What's the question?"
                    value={state.note} onChange={(e) => setState({...state, note: e.target.value})}/>
                </div>
                <button type="submit" className="ct-submit" disabled={status !== "idle" || !state.email}>
                  {status === "sent" ? "Sent — we'll be in touch" : status === "sending" ? "Sending…" : "Send"}
                  {status === "idle" && <Icon name="arrow" size={14}/>}
                </button>
                {status === "sent" && <div className="ct-status sent">✓ Logged with tenant = "uber"</div>}
              </div>
            </form>
          </Reveal>
        </div>
        <Reveal>
          <div className="ct-closer">
            <h3>The can is not the media plan.<br/>The can is the doorway.</h3>
            <p>kingkong@apebeverages.com · drinkape.com</p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Offer, Guarantees, Compliance, Lever, Contact });
