/* =========================================================
   Pricing — page composition (6 sections + footer)
   Per the pricing blueprint: clarity, value-framing, risk
   reversal, objection handling. The calculator is the focal point.
   ========================================================= */

/* ---------- 1 · Hero ---------- */
function HeroPr() {
  const ref = useReveal();
  return (
    <section style={{ position: "relative", padding: "72px 0 28px", background: "var(--bg)", overflow: "hidden" }}>
      <div aria-hidden style={{ position: "absolute", inset: 0, pointerEvents: "none", background: "radial-gradient(circle at 50% 0%, rgba(31,93,255,0.08), transparent 55%)" }}></div>
      <div className="page" ref={ref} style={{ position: "relative", textAlign: "center", maxWidth: 820, marginLeft: "auto", marginRight: "auto" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 9, marginBottom: 26 }}>
          <span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--cobalt-500)" }}></span>
          <span className="eyebrow">Simple, transparent pricing</span>
        </div>
        <h1 className="display" style={{ fontSize: "clamp(44px, 6vw, 84px)" }}>
          One price. Two discounts.<br/>Clear total.
        </h1>
        <p style={{ fontSize: 21, lineHeight: 1.5, color: "var(--body)", margin: "26px auto 36px", maxWidth: 520 }}>
          No negotiation. No hidden math. See your net effective rate before you ever talk to us.
        </p>
        <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center", justifyContent: "center" }}>
          <PriceBtn variant="primary" href={DEMO} icon="arrow">Book a Demo</PriceBtn>
          <PriceBtn variant="secondary" href="#calculator">Build your price</PriceBtn>
        </div>
      </div>
    </section>
  );
}

/* ---------- 2 · The calculator (Plans, made interactive) ---------- */
function CalculatorSection() {
  const ref = useReveal();
  return (
    <section id="calculator" style={{ padding: "44px 0 96px", background: "var(--bg)" }}>
      <div className="page" ref={ref}>
        <div style={{ textAlign: "center", maxWidth: 680, margin: "0 auto 40px" }}>
          <p className="eyebrow" style={{ marginBottom: 16 }}>Build your price</p>
          <h2 className="display" style={{ fontSize: "clamp(30px, 3.6vw, 46px)" }}>
            Every agent, one base price.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--body)", marginTop: 16 }}>
            Each agent is {fmt(BASE_PRICE)} a month. Bundle two or more and commit to a term to lower your net effective rate — watch it update live.
          </p>
        </div>
        <PricingCalculator />

        {/* Reassurance strip under the calculator */}
        <div style={{ display: "flex", gap: 28, justifyContent: "center", flexWrap: "wrap", marginTop: 28 }}>
          {[
            "Discounts apply automatically",
            "Both discounts off the same base",
            "Full price always visible",
          ].map((t, i) => (
            <div key={i} style={{ display: "inline-flex", alignItems: "center", gap: 10, fontSize: 14.5, fontWeight: 600, color: "var(--ink-soft)" }}>
              <span style={{ width: 22, height: 22, borderRadius: 999, background: "var(--cobalt-50)", color: "var(--cobalt-600)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7"/></svg>
              </span>
              {t}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- 3 · How the discounts work (clarity) ---------- */
function DiscountExplainer() {
  const ref = useReveal();
  return (
    <section style={{ padding: "96px 0", background: "var(--bg-alt)" }}>
      <div className="page" ref={ref}>
        <div style={{ maxWidth: 700, marginBottom: 48 }}>
          <p className="eyebrow" style={{ marginBottom: 16 }}>How the math works</p>
          <h2 className="display" style={{ fontSize: "clamp(30px, 3.6vw, 48px)" }}>
            Two levers. Both off the same base.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
          {/* Bundle */}
          <div style={{ background: "var(--bg)", border: "1px solid var(--line)", borderRadius: 24, padding: "34px 32px", boxShadow: "var(--e-1)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
              <span style={{ width: 40, height: 40, borderRadius: 12, background: "var(--cobalt-50)", color: "var(--cobalt-600)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="8" width="18" height="13" rx="2"/><path d="M3 8l3-5h12l3 5M12 3v5"/></svg>
              </span>
              <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.10em", textTransform: "uppercase", color: "var(--body-dim)" }}>Lever 1 · Bundle</div>
            </div>
            <div style={{ fontSize: 26, fontWeight: 900, letterSpacing: "-0.03em", color: "var(--ink)", marginBottom: 10 }}>
              2+ agents → <span style={{ color: "var(--cobalt-600)" }}>20% off</span>
            </div>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--body)", margin: 0 }}>
              Automatic the moment you add a second agent. Most dealers pair the outbound sales and outbound service agents.
            </p>
          </div>

          {/* Commitment */}
          <div style={{ background: "var(--bg)", border: "1px solid var(--line)", borderRadius: 24, padding: "34px 32px", boxShadow: "var(--e-1)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
              <span style={{ width: 40, height: 40, borderRadius: 12, background: "var(--cobalt-50)", color: "var(--cobalt-600)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M3 9h18M8 2v4M16 2v4"/></svg>
              </span>
              <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.10em", textTransform: "uppercase", color: "var(--body-dim)" }}>Lever 2 · Commitment</div>
            </div>
            <div style={{ fontSize: 26, fontWeight: 900, letterSpacing: "-0.03em", color: "var(--ink)", marginBottom: 16 }}>
              Longer term → <span style={{ color: "var(--cobalt-600)" }}>up to 20% off</span>
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {COMMIT_OPTIONS.map((c) => (
                <span key={c.id} style={{
                  display: "inline-flex", alignItems: "center", gap: 6, padding: "7px 12px", borderRadius: 999,
                  background: c.pct ? "var(--cobalt-50)" : "var(--bg-alt)", border: "1px solid " + (c.pct ? "var(--cobalt-100)" : "var(--line)"),
                  fontSize: 13, fontWeight: 700, color: c.pct ? "var(--cobalt-700)" : "var(--body)",
                }}>
                  {c.label} <span style={{ color: c.pct ? "var(--cobalt-600)" : "var(--body-dim)" }}>{c.pct}%</span>
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- 4 · Value justification ---------- */
function ValueSection() {
  const ref = useReveal();
  return (
    <section style={{ padding: "104px 0", background: "var(--bg)" }}>
      <div className="page" ref={ref} style={{ textAlign: "center", maxWidth: 900, marginLeft: "auto", marginRight: "auto" }}>
        <p className="eyebrow" style={{ marginBottom: 24 }}>What it's worth</p>
        <h2 className="display" style={{ fontSize: "clamp(32px, 4.4vw, 60px)" }}>
          One agent costs less than the deals you miss every month answering nothing.
        </h2>
        <p style={{ fontSize: 19, lineHeight: 1.6, color: "var(--body)", margin: "28px auto 0", maxWidth: 600 }}>
          A single recaptured sale or a month of booked service appointments covers the agent — the rest is upside, working 24/7.
        </p>
      </div>
    </section>
  );
}

/* ---------- 5 · Risk reversal ---------- */
function RiskSection() {
  const ref = useReveal();
  const items = [
    { t: "30-day money-back guarantee", d: "Not seeing results in the first month? Get your money back.", icon: "shield" },
    { t: "No setup fee", d: "Onboarding and integration are included — nothing upfront.", icon: "zero" },
    { t: "No negotiation", d: "Discounts are earned by bundle and commitment, never haggled.", icon: "tag" },
  ];
  const icon = (k) => ({
    shield: <path d="M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6z"/>,
    zero: <circle cx="12" cy="12" r="8"/>,
    tag: <path d="M3 12l9-9 9 9-9 9z"/>,
  }[k]);
  return (
    <section style={{ padding: "0 0 104px", background: "var(--bg)" }}>
      <div className="page" ref={ref}>
        <div style={{
          borderRadius: 28, background: "var(--ink)", color: "#fff", padding: "48px 48px 52px",
          position: "relative", overflow: "hidden",
        }}>
          <div aria-hidden style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 88% 10%, rgba(31,93,255,0.24), transparent 55%)", pointerEvents: "none" }}></div>
          <div style={{ position: "relative" }}>
            <p className="eyebrow on-dark" style={{ marginBottom: 14 }}>Risk reversal</p>
            <h2 className="display" style={{ color: "#fff", fontSize: "clamp(28px, 3.6vw, 46px)", maxWidth: 620, marginBottom: 40 }}>
              The risk is on us, not you.
            </h2>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
              {items.map((it, i) => (
                <div key={i}>
                  <span style={{ width: 46, height: 46, borderRadius: 999, background: "rgba(255,255,255,0.10)", border: "1px solid rgba(255,255,255,0.16)", color: "var(--cobalt-300)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{icon(it.icon)}</svg>
                  </span>
                  <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: "-0.02em", marginBottom: 8 }}>{it.t}</div>
                  <div style={{ fontSize: 15, lineHeight: 1.55, color: "rgba(255,255,255,0.64)" }}>{it.d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- 6 · FAQ ---------- */
function FAQSection() {
  const ref = useReveal();
  const [open, setOpen] = useState(0);
  const faqs = [
    { q: "How is each agent priced?", a: `Every agent is the same base price — ${fmt(BASE_PRICE)} per agent, per month. You only pay for the agents you run, and discounts apply automatically from there.` },
    { q: "How do the discounts work together?", a: "There are two levers — a 20% bundle discount for running 2 or more agents, and a commitment discount of 5–20% for a longer term. Both are calculated from the same base price and added together, so they never compound or get confusing." },
    { q: "Do I have to sign a long-term contract?", a: "No. You can run month-to-month with zero commitment discount. Longer terms simply unlock a bigger incentive — it's entirely optional." },
    { q: "Is there a setup or onboarding fee?", a: "No. Onboarding, integration with your CRM and phone system, and configuration are all included. There's nothing to pay upfront." },
    { q: "What if it doesn't work for my store?", a: "You're covered by a 30-day money-back guarantee. If you're not seeing value in the first month, you get your money back." },
    { q: "Can I add or remove agents later?", a: "Yes. Add an agent and the 20% bundle discount kicks in automatically at two or more. Your net effective rate always reflects your current setup." },
  ];
  return (
    <section style={{ padding: "104px 0", background: "var(--bg-alt)" }}>
      <div className="page" ref={ref} style={{ display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: 64, alignItems: "start" }}>
        <div>
          <p className="eyebrow" style={{ marginBottom: 16 }}>Questions</p>
          <h2 className="display" style={{ fontSize: "clamp(30px, 3.6vw, 48px)" }}>
            Before you ask.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--body)", marginTop: 18, maxWidth: 320 }}>
            Still unsure? A 15-minute demo answers the rest.
          </p>
          <div style={{ marginTop: 24 }}>
            <PriceBtn variant="primary" href={DEMO} icon="arrow">Book a Demo</PriceBtn>
          </div>
        </div>
        <div>
          {faqs.map((f, i) => (
            <FAQItem key={i} q={f.q} a={f.a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- 7 · Closing CTA ---------- */
function ClosingPr() {
  const ref = useReveal();
  return (
    <section style={{ padding: "112px 0", background: "var(--bg)" }}>
      <div className="page" ref={ref} style={{ textAlign: "center", maxWidth: 820, marginLeft: "auto", marginRight: "auto" }}>
        <h2 className="display" style={{ fontSize: "clamp(44px, 6.4vw, 88px)", marginBottom: 24 }}>
          See it work, then decide.
        </h2>
        <p style={{ fontSize: 20, lineHeight: 1.5, color: "var(--body)", margin: "0 auto 36px", maxWidth: 520 }}>
          Book a demo, hear the calls, and we'll build your exact net effective rate together.
        </p>
        <div style={{ display: "inline-flex", gap: 14, flexWrap: "wrap", alignItems: "center", justifyContent: "center" }}>
          <PriceBtn variant="primary" href={DEMO} pulse icon="arrow">Book a Demo</PriceBtn>
        </div>
        <div style={{ marginTop: 22, display: "inline-flex", alignItems: "center", gap: 10, fontSize: 14.5, color: "var(--body)", fontWeight: 600 }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--positive)" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7"/></svg>
          30-day money-back guarantee · No setup fee
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function FooterPr() {
  return (
    <footer style={{ background: "var(--ink)", color: "#fff", padding: "56px 0 40px" }}>
      <div className="page" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 32, flexWrap: "wrap" }}>
        <div>
          <img src="logo-exports/horizontal/horizontal-white.png" alt="CarDealer.ai" style={{ height: 28 }} />
          <div style={{ fontSize: 13, color: "rgba(255,255,255,0.55)", marginTop: 16, maxWidth: 420, lineHeight: 1.6 }}>
            One base price per agent. Two clear discount levers. The full price stays visible — always.
          </div>
        </div>
        <PriceBtn variant="dark-ghost" href={DEMO} icon="arrow">Book a Demo</PriceBtn>
      </div>
    </footer>
  );
}

/* ---------- App ---------- */
function PricingApp() {
  return (
    <div>
      <HeroPr />
      <CalculatorSection />
      <DiscountExplainer />
      <ValueSection />
      <RiskSection />
      <FAQSection />
      <ClosingPr />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<PricingApp />);