/* global React, ReactDOM */
const { useState } = React;

const TWEAK_DEFAULTS_PRICING = /*EDITMODE-BEGIN-PRICING*/{
  "billing": "monthly"
}/*EDITMODE-END-PRICING*/;

/* ============================================================
   Nav (matches landing page)
   ============================================================ */
function Nav() {
  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <a className="nav-logo" href="/">
          <span className="mark" />
          <span>Defrost</span>
        </a>
        <nav className="nav-links">
          <a href="/#how">How it works</a>
          <a href="/#features">Features</a>
          <a href="/pricing" style={{ color: "var(--ink)" }}>Pricing</a>
          <a href="/#faq">FAQ</a>
        </nav>
        <a className="nav-cta" href="/#top">Join waitlist</a>
      </div>
    </header>
  );
}

/* ============================================================
   Hero
   ============================================================ */
function PricingHero({ billing, setBilling }) {
  return (
    <section className="pr-hero">
      <div className="wrap">
        <span className="eyebrow">Pricing — early access</span>
        <h1>Pay for the work. Not the headcount.</h1>
        <p className="lede">
          You're not paying for seats — you're paying for the leads we research, write, and send for you. Pick the plan that matches your volume. Every plan replaces a stack of four tools.
        </p>

        <div className="pr-toggle">
          <button className={billing === "monthly" ? "on" : ""} onClick={() => setBilling("monthly")}>Monthly</button>
          <button className={billing === "annual" ? "on" : ""} onClick={() => setBilling("annual")}>
            Annual <span className="save">save 20%</span>
          </button>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Tier cards
   ============================================================ */
const TIERS = [
  {
    id: "starter",
    name: "Starter",
    desc: "For founders running their own outbound. Real research, real replies, real fast.",
    monthly: 79,
    annual: 63,
    cta: "Start with Starter",
    feats: [
      { txt: "1,000 researched leads / month", strong: true },
      { txt: "2 sending mailboxes" },
      { txt: "1 workspace · 1 seat" },
      { txt: "All 7 frameworks + humanizer" },
      { txt: "ICP from your URL" },
      { txt: "Dossier-grade research per lead" },
      { txt: "Spam & AI-detector pre-flight" },
      { txt: "Auto-warming included", note: "14-day ramp" },
      { txt: "Inbox + CRM-lite" },
      { txt: "Email support", note: "24h response" }
    ]
  },
  {
    id: "growth",
    name: "Growth",
    badge: "MOST POPULAR",
    desc: "For lean sales teams ready to scale. The learning loop kicks in here.",
    monthly: 249,
    annual: 199,
    cta: "Start with Growth",
    featured: true,
    feats: [
      { txt: "5,000 researched leads / month", strong: true },
      { txt: "10 sending mailboxes", strong: true },
      { txt: "1 workspace · 5 seats" },
      { txt: "Everything in Starter, plus:" },
      { txt: "A/B testing across frameworks", note: "PAS, BAB, QVC, AIDA" },
      { txt: "Learning loop", note: "weekly auto-tuned copy" },
      { txt: "Multi-mailbox load balancing" },
      { txt: "HubSpot, Salesforce, Slack sync" },
      { txt: "Calendar booking + reply auto-cat" },
      { txt: "Priority support", note: "4h response" }
    ]
  },
  {
    id: "scale",
    name: "Scale",
    desc: "For mid-market teams with multiple segments or BUs. Same product, more lanes.",
    monthly: 599,
    annual: 479,
    cta: "Start with Scale",
    feats: [
      { txt: "20,000 researched leads / month", strong: true },
      { txt: "40 sending mailboxes", strong: true },
      { txt: "5 workspaces · 10 seats" },
      { txt: "Everything in Growth, plus:" },
      { txt: "Multi-workspace (segment / BU)" },
      { txt: "Custom voice + brand guidelines" },
      { txt: "Priority research queue" },
      { txt: "Real-time signal monitoring" },
      { txt: "Zapier / Linear / API access" },
      { txt: "Priority support", note: "2h response" }
    ]
  },
  {
    id: "agency",
    name: "Agency",
    desc: "For agencies and outbound-heavy teams. White-label, multi-client, predictable per-client cost.",
    monthly: 1200,
    annual: 960,
    cta: "Start with Agency",
    feats: [
      { txt: "75,000 researched leads / month", strong: true },
      { txt: "150 sending mailboxes", strong: true },
      { txt: "Unlimited workspaces + seats", strong: true },
      { txt: "Everything in Scale, plus:" },
      { txt: "True white-label + sub-account billing" },
      { txt: "Multi-workspace client logins" },
      { txt: "Dedicated IP option", note: "+$99/mo" },
      { txt: "Custom integrations" },
      { txt: "SOC 2 + GDPR DPA + EU residency" },
      { txt: "Dedicated CSM", note: "1h response, slack channel" }
    ]
  }
];

function Tier({ t, billing }) {
  const price = billing === "monthly" ? t.monthly : t.annual;
  return (
    <div className={`pr-tier ${t.featured ? "featured" : ""}`}>
      {t.badge && <div className="pr-badge">{t.badge}</div>}
      <div className="pr-tier-head">
        <div className="pr-tier-name">{t.name}</div>
        <div className="pr-tier-desc">{t.desc}</div>
      </div>
      <div className="pr-tier-price">
        <span className="amt">${price}</span>
        <span className="per">
          / month
          {billing === "annual" && <small>billed yearly</small>}
        </span>
      </div>
      <a className="pr-tier-cta" href="/#top">
        {t.cta} <span>→</span>
      </a>
      <ul className="pr-tier-feats">
        {t.feats.map((f, i) => (
          <li key={i}>
            <span className="pr-tick" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l4 4 10-10" /></svg>
            </span>
            <span className={f.strong ? "strong" : ""}>
              {f.txt}
              {f.note && <small> · {f.note}</small>}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function Tiers({ billing }) {
  return (
    <section className="pr-tiers-wrap">
      <div className="wrap">
        <div className="pr-tiers">
          {TIERS.map(t => <Tier key={t.id} t={t} billing={billing} />)}
        </div>
        <div className="pr-tiers-foot">
          <span>
            Add-ons on every plan: extra mailbox <strong>$59/mo</strong> · dedicated IP <strong>$99/mo</strong> · extra workspace <strong>$199/mo</strong> · overage leads from <strong>$0.04</strong>. BYO enrichment key knocks 30% off overage. <a href="#enterprise">Need more than 75k leads/month? Talk to us →</a>
          </span>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Comparison table
   ============================================================ */
const COMPARE_GROUPS = [
  {
    title: "Outreach",
    rows: [
      { lbl: "Researched leads / month",              v: ["1,000", "5,000", "20,000", "75,000"] },
      { lbl: "Sending mailboxes included",             v: ["2", "10", "40", "150"] },
      { lbl: "Sending domains",                        v: ["1", "Unlimited", "Unlimited", "Unlimited"] },
      { lbl: "Campaigns",                             v: ["Unlimited", "Unlimited", "Unlimited", "Unlimited"] },
      { lbl: "Auto-warming",                          v: [true, true, true, true] },
      { lbl: "Multi-mailbox load balancing",           v: [false, true, true, true] },
      { lbl: "Dedicated sending IP (+$99/mo)",        v: [false, false, false, true] }
    ]
  },
  {
    title: "Research & copy",
    rows: [
      { lbl: "ICP from your URL",                     v: [true, true, true, true] },
      { lbl: "Dossier research per lead",             v: [true, true, true, true] },
      { lbl: "All 7 frameworks + humanizer",          v: [true, true, true, true] },
      { lbl: "Real-time signal monitoring",           v: ["weekly", "daily", "real-time", "real-time"] },
      { lbl: "A/B testing across frameworks",         v: [false, true, true, true] },
      { lbl: "Learning loop (auto-tuned copy)",        v: [false, true, true, true] },
      { lbl: "Custom voice / brand guidelines",       v: [false, true, true, true] },
      { lbl: "Priority research queue",                v: [false, false, true, true] }
    ]
  },
  {
    title: "Deliverability",
    rows: [
      { lbl: "Spam pre-flight scoring",                v: [true, true, true, true] },
      { lbl: "AI-detector pre-flight",                v: [true, true, true, true] },
      { lbl: "Bounce auto-throttle",                  v: [true, true, true, true] },
      { lbl: "DNS monitoring (SPF / DKIM / DMARC)",   v: [true, true, true, true] },
      { lbl: "GDPR + global suppression list",        v: [true, true, true, true] },
      { lbl: "Inbox-placement reporting",             v: ["basic", "full", "full", "full"] }
    ]
  },
  {
    title: "Replies & CRM",
    rows: [
      { lbl: "Unified inbox + auto-categorization",   v: [true, true, true, true] },
      { lbl: "Calendar booking links",                v: [true, true, true, true] },
      { lbl: "HubSpot integration",                   v: [false, true, true, true] },
      { lbl: "Salesforce integration",                v: [false, true, true, true] },
      { lbl: "Slack alerts",                          v: [false, true, true, true] },
      { lbl: "Zapier / Linear / API access",          v: [false, true, true, true] },
      { lbl: "Custom integrations",                    v: [false, false, false, true] }
    ]
  },
  {
    title: "Team & workspaces",
    rows: [
      { lbl: "Team seats",                             v: ["1", "5", "10", "Unlimited"] },
      { lbl: "Workspaces",                             v: ["1", "1", "5", "Unlimited"] },
      { lbl: "Multi-workspace billing",                v: [false, false, true, true] },
      { lbl: "White-label reporting",                 v: [false, false, false, true] },
      { lbl: "Sub-account client logins",              v: [false, false, false, true] }
    ]
  },
  {
    title: "Security & support",
    rows: [
      { lbl: "SOC 2 / DPA / EU residency",             v: [false, false, false, true] },
      { lbl: "Audit log retention",                    v: ["3 mo", "12 mo", "24 mo", "Indefinite"] },
      { lbl: "Support",                               v: ["Email · 24h", "Priority · 4h", "Priority · 2h", "Dedicated CSM · 1h"] }
    ]
  }
];

const cellRender = (v) => {
  if (v === true)  return <span className="pr-yes" aria-label="included"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l4 4 10-10" /></svg></span>;
  if (v === false) return <span className="pr-no" aria-label="not included">—</span>;
  return <span className="pr-val">{v}</span>;
};

function CompareTable() {
  return (
    <section className="pr-compare" id="compare">
      <div className="wrap">
        <div className="pr-section-head">
          <span className="eyebrow">Compare plans</span>
          <h2>Every feature, side by side.</h2>
        </div>

        <div className="pr-table-wrap">
          <div className="pr-table">
            <div className="pr-table-head">
              <div className="pr-th-feat">&nbsp;</div>
              {TIERS.map(t => (
                <div className={`pr-th-tier ${t.featured ? "on" : ""}`} key={t.id}>
                  <span className="nm">{t.name}</span>
                  <span className="pr">${t.monthly}/mo</span>
                </div>
              ))}
            </div>

            {COMPARE_GROUPS.map((g, gi) => (
              <React.Fragment key={gi}>
                <div className="pr-table-group">{g.title}</div>
                {g.rows.map((r, ri) => (
                  <div className="pr-table-row" key={ri}>
                    <div className="pr-tr-feat">{r.lbl}</div>
                    {r.v.map((v, vi) => (
                      <div className={`pr-tr-cell ${vi === 1 ? "on" : ""}`} key={vi}>{cellRender(v)}</div>
                    ))}
                  </div>
                ))}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Enterprise band
   ============================================================ */
function Enterprise() {
  return (
    <section className="pr-enterprise" id="enterprise">
      <div className="wrap">
        <div className="pr-ent-card">
          <div className="left">
            <span className="eyebrow">Enterprise · from $2,500/mo</span>
            <h2>Bigger volume, custom contracts, your own brand.</h2>
            <p>If you're sending more than 75,000 leads a month, running a multi-BU org, or need contractual agreements your legal team will actually sign — let's talk. Pooled credits across workspaces, dedicated infrastructure, and a price that scales with you.</p>
            <ul>
              <li>Pooled lead credits across unlimited workspaces</li>
              <li>SSO (SAML, OIDC) + SCIM provisioning</li>
              <li>Dedicated IP pools + EU/US data residency</li>
              <li>Custom MSA, DPA, and BAA</li>
              <li>Custom framework training on your won-deal corpus</li>
              <li>Onboarding by a senior outbound strategist + QBRs</li>
            </ul>
            <a className="pr-ent-cta" href="/contact?topic=sales">Talk to sales <span>→</span></a>
          </div>
          <div className="right">
            <div className="pr-ent-quote">
              <div className="q">
                "We replaced four tools — Apollo, Smartlead, Lemlist, and Clay — with one Defrost workspace. Our SDR team's reply rate doubled in two months and we cut $4,800 in monthly tooling."
              </div>
              <div className="who">
                <div className="av">JT</div>
                <div>
                  <b>Jordan Tanaka</b>
                  <small>VP Revenue · Mockingbird</small>
                </div>
              </div>
            </div>
            <div className="pr-ent-stats">
              <div><div className="v">125k+</div><div className="k">leads / month</div></div>
              <div><div className="v">$0.04</div><div className="k">avg cost / lead</div></div>
              <div><div className="v">14 days</div><div className="k">avg time-to-launch</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Math / ROI
   ============================================================ */
function ROI() {
  const [vol, setVol] = useState(5000);
  const replyRate = 0.058;
  const meetingRate = 0.32;
  const replies = Math.round(vol * replyRate);
  const meetings = Math.round(replies * meetingRate);
  const tierCost =
    vol <= 1000 ? 79 :
    vol <= 5000 ? 249 :
    vol <= 20000 ? 599 :
    vol <= 75000 ? 1200 :
    2500;
  const tier =
    vol <= 1000 ? "Starter" :
    vol <= 5000 ? "Growth" :
    vol <= 20000 ? "Scale" :
    vol <= 75000 ? "Agency" :
    "Enterprise";

  return (
    <section className="pr-math">
      <div className="wrap">
        <div className="pr-section-head">
          <span className="eyebrow">The math</span>
          <h2>How much does Defrost actually cost?</h2>
          <p className="sub">Slide the volume. We'll show you what to expect.</p>
        </div>

        <div className="pr-math-card">
          <div className="pr-math-input">
            <label>
              <span className="lbl">Researched leads per month</span>
              <span className="val">{vol.toLocaleString()}</span>
            </label>
            <input
              type="range"
              min="100"
              max="100000"
              step="100"
              value={vol}
              onChange={(e) => setVol(parseInt(e.target.value, 10))}
            />
            <div className="ticks">
              <span>100</span>
              <span>5k</span>
              <span>20k</span>
              <span>50k</span>
              <span>100k</span>
            </div>
          </div>

          <div className="pr-math-out">
            <div className="cell">
              <span className="k">Recommended plan</span>
              <span className="v">{tier}</span>
              <span className="sub">{tier === "Enterprise" ? "from $2,500 / mo" : `$${tierCost} / mo`}</span>
            </div>
            <div className="arr">→</div>
            <div className="cell">
              <span className="k">Expected replies</span>
              <span className="v">{replies}</span>
              <span className="sub">at 5.8% reply rate</span>
            </div>
            <div className="arr">→</div>
            <div className="cell">
              <span className="k">Booked meetings</span>
              <span className="v">{meetings}</span>
              <span className="sub">at 32% reply→meeting</span>
            </div>
            <div className="arr">→</div>
            <div className="cell highlight">
              <span className="k">Cost per meeting</span>
              <span className="v">${meetings > 0 ? Math.round(tierCost / meetings) : "—"}</span>
              <span className="sub">at plan base, no add-ons</span>
            </div>
          </div>
        </div>

        <p className="pr-math-fine">
          Reply rates based on the median Defrost customer in their second month. Your mileage will vary based on offer, ICP fit, and how much your prospects hate cold email.
        </p>
      </div>
    </section>
  );
}

/* ============================================================
   FAQ
   ============================================================ */
const PRICING_FAQ = [
  { q: "Is there a free trial?",                              a: "Yes — a 7-day reverse trial of Growth, no credit card. You'll get full access (research, dossiers, A/B, learning loop) capped at 200 leads and 1 mailbox. After 7 days you pick a plan, or your workspace goes dormant — your data stays for 90 days in case you come back." },
  { q: "What counts as a 'researched lead'?",                  a: "One fully-handled outbound contact — we built the dossier, wrote the emails using your chosen frameworks, ran humanization and spam-checks, verified the address, and tracked the reply. Bounces we filtered before send don't count. Unsubscribes are suppressed workspace-wide and never billed again." },
  { q: "What if I go over my plan's lead limit?",              a: "Overage runs $0.04 per researched lead on Starter, sliding down to $0.025 on Scale and Agency. We alert at 80% and 100% — no auto-upgrade, no surprise invoices. You can also cap at zero and Defrost will pause sourcing until your next cycle." },
  { q: "Can I add mailboxes, IPs, or workspaces on top of a plan?", a: "Yes. Extra sending mailbox: $59/mo (includes warmup). Dedicated IP: $99/mo (Agency+). Extra workspace under your cap: $199/mo. All add-ons are prorated and cancellable monthly." },
  { q: "Can I bring my own enrichment key?",                   a: "Yes. Plug in your Apollo, ZoomInfo, or Cognism API key and we'll route enrichment through it — overage rates drop 30% in exchange. Useful for agencies and large teams already paying for a data provider." },
  { q: "Can I switch plans?",                                  a: "Yes. Upgrade, downgrade, or pause anytime from billing settings. Upgrades prorate immediately; downgrades take effect at the next billing cycle. Annual plans can be paused but not refunded mid-term." },
  { q: "Do you have a free plan?",                            a: "No. Every researched lead has real per-lead costs (LLM tokens, enrichment, verification, warmup), so a perpetual free tier would either be useless or unsustainable. The 7-day reverse trial gets you a real result — and Starter at $79/mo is cheaper than the four tools it replaces." },
  { q: "What's the 'Founding 100' offer?",                     a: "First 100 customers from the waitlist get 30% off their first 3 months on any plan, plus a permanent 'Founding' badge in white-label, plus a direct line to the founders in Slack. No 12-month price lock — you're free to upgrade, downgrade, or leave whenever." },
  { q: "Do you offer discounts for nonprofits / startups?",   a: "Yes. 50% off Starter for registered nonprofits, and 30% off Starter or Growth for venture-backed startups in their first 24 months. Drop us a note from your work email." },
  { q: "What payment methods do you accept?",                  a: "All major credit cards via Stripe. Annual Scale and Agency plans can pay by ACH or wire — get in touch for an invoice. Enterprise can pay net-30 against a PO." },
  { q: "Can I cancel anytime?",                                a: "Yes. One click in billing settings. We keep your data accessible for 30 days in case you change your mind, then permanently delete it." }
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="pr-faq" id="faq">
      <div className="wrap">
        <div className="pr-section-head">
          <span className="eyebrow">Pricing FAQ</span>
          <h2>The questions you're about to ask.</h2>
        </div>

        <div className="pr-faq-list">
          {PRICING_FAQ.map((f, i) => (
            <div key={i} className={`pr-faq-item ${open === i ? "open" : ""}`}>
              <button className="pr-faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="ind" />
              </button>
              <div className="pr-faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Final CTA
   ============================================================ */
function Final() {
  return (
    <section className="pr-final">
      <div className="wrap">
        <h2>Try Defrost free<br />for seven days.</h2>
        <p>No credit card. Reverse trial of Growth — connect a mailbox, run a real campaign, see real replies. Cancel anytime.</p>
        <a className="pr-final-cta" href="/#top">Join the waitlist <span>→</span></a>
      </div>
    </section>
  );
}

/* ============================================================
   Footer
   ============================================================ */
function Footer() {
  const yr = new Date().getFullYear();
  return (
    <footer className="foot">
      <div className="wrap foot-grid">
        <div className="foot-brand">
          <div className="mark-row">
            <span className="mark" />
            <span>Defrost</span>
          </div>
          <p>Cold outreach that runs itself — research, copy, sending, learning. All from a URL.</p>
        </div>
        <div className="foot-col">
          <h5>Product</h5>
          <ul>
            <li><a href="/#how">How it works</a></li>
            <li><a href="/#features">Features</a></li>
            <li><a href="/pricing">Pricing</a></li>
            <li><a href="/#faq">FAQ</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h5>Company</h5>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Manifesto</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h5>Legal</h5>
          <ul>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">DPA</a></li>
          </ul>
        </div>
      </div>
      <div className="wrap foot-bottom">
        <span>© {yr} Defrost · All rights reserved</span>
        <span>Made in the cold</span>
      </div>
    </footer>
  );
}

/* ============================================================
   App
   ============================================================ */
function App() {
  const [billing, setBilling] = useState(TWEAK_DEFAULTS_PRICING.billing || "monthly");

  return (
    <>
      <Nav />
      <PricingHero billing={billing} setBilling={setBilling} />
      <Tiers billing={billing} />
      <ROI />
      <CompareTable />
      <Enterprise />
      <FAQ />
      <Final />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);