// ---------- Pricing page — full ----------

const PricingPage = ({ onNav, onEnterApp }) => {
  const tiers = [
    { name: "Studio", price: "$48", cadence: "per editor / month",
      body: "For small studios and freelance teams just moving off Drive.",
      bullets: ["Up to 5 active projects", "10 client reviewers", "100 GB storage", "Branded client portals", "Email support"],
      featured: false, cta: "Start a studio" },
    { name: "Atelier", price: "$96", cadence: "per editor / month", tag: "MOST POPULAR",
      body: "For agencies running multiple clients on parallel retainers.",
      bullets: ["Unlimited active projects", "Unlimited reviewers", "1 TB storage + cold archive", "Custom domains + white-label", "Approval audit log", "Priority support"],
      featured: true, cta: "Open an atelier" },
    { name: "Production", price: "Talk", cadence: "annual contract",
      body: "For full production houses with security and SLA needs.",
      bullets: ["SSO + SCIM", "Dedicated success engineer", "EU + US storage residency", "Custom retention policies", "99.99% SLA", "White-glove onboarding"],
      featured: false, cta: "Speak with the team" },
  ];

  const matrix = [
    { section: "Workspace", rows: [
      ["Active projects", "5", "Unlimited", "Unlimited"],
      ["Client reviewers", "10", "Unlimited", "Unlimited"],
      ["Editors per workspace", "Up to 5", "Unlimited", "Unlimited"],
      ["Storage", "100 GB", "1 TB + cold", "Custom"],
    ]},
    { section: "Client experience", rows: [
      ["Branded client portals", "✓", "✓", "✓"],
      ["Custom domain", "—", "✓", "✓"],
      ["White-label (no HD branding)", "—", "✓", "✓"],
      ["Mobile review", "✓", "✓", "✓"],
    ]},
    { section: "Operations", rows: [
      ["Approval audit log", "—", "✓", "✓"],
      ["Studio velocity dashboard", "—", "✓", "✓"],
      ["Quarterly design review", "—", "—", "✓"],
      ["SLA", "—", "99.9%", "99.99%"],
    ]},
    { section: "Security", rows: [
      ["SSO + SCIM", "—", "Add-on", "✓"],
      ["Storage residency", "US", "US + EU", "Custom"],
      ["Custom retention", "—", "—", "✓"],
      ["SOC 2 Type II", "✓", "✓", "✓"],
    ]},
  ];

  return (
    <div className="light-scroll" style={{ background: "var(--paper)", color: "var(--ink)", minHeight: "100vh", fontFamily: "var(--sans)" }}>
      <MarketingNav active="pricing" onNav={onNav} onEnterApp={onEnterApp} />

      <PageMasthead
        eyebrow="PRICING"
        title="Priced like a tool."
        italic="Felt like a studio."
        lead="Every plan includes unlimited drafts, unlimited comments, and the entire client portal experience. No per-asset fees, no per-reviewer fees."
      />

      {/* Tier cards */}
      <section style={{ padding: "60px 0 80px" }} className="sm-pad-y">
        <div className="container">
          <Reveal>
            <div className="md-stack sm-1col" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, maxWidth: 1100, margin: "0 auto", alignItems: "stretch" }}>
              {tiers.map(t => (
                <div key={t.name} style={{
                  background: t.featured ? "var(--ink)" : "var(--white)",
                  color: t.featured ? "var(--white)" : "var(--ink)",
                  border: t.featured ? "1px solid var(--ink)" : "1px solid rgba(8,12,16,0.08)",
                  borderRadius: 16, padding: 32, position: "relative",
                  boxShadow: t.featured ? "0 30px 60px -30px rgba(8,12,16,0.45)" : "none",
                  display: "flex", flexDirection: "column",
                }}>
                  {t.tag && <div style={{ position: "absolute", top: -12, left: 24, padding: "4px 10px", borderRadius: 99, background: "var(--harbor)", color: "white", fontSize: 10, fontWeight: 600, letterSpacing: "0.12em" }}>{t.tag}</div>}
                  <div style={{ fontFamily: "var(--serif)", fontSize: 24, fontWeight: 500, letterSpacing: "-0.01em" }}>{t.name}</div>
                  <div style={{ fontSize: 13, color: t.featured ? "rgba(255,255,255,0.62)" : "rgba(8,12,16,0.55)", marginTop: 8, minHeight: 38 }}>{t.body}</div>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 24 }}>
                    <span style={{ fontFamily: "var(--serif)", fontSize: 56, fontWeight: 500, letterSpacing: "-0.025em", lineHeight: 1 }}>{t.price}</span>
                    {t.price !== "Talk" && <span style={{ fontSize: 13, color: t.featured ? "rgba(255,255,255,0.62)" : "rgba(8,12,16,0.55)" }}>{t.cadence}</span>}
                  </div>
                  <Divider light={!t.featured} style={{ marginTop: 24, marginBottom: 20, background: t.featured ? "rgba(255,255,255,0.10)" : undefined }} />
                  <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 24, flex: 1 }}>
                    {t.bullets.map((b, i) => (
                      <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 13.5 }}>
                        <window.Icon.Check size={13} stroke={2.2} color={t.featured ? "#9CC1FF" : "var(--harbor)"} />
                        <span style={{ color: t.featured ? "rgba(255,255,255,0.86)" : "rgba(8,12,16,0.78)" }}>{b}</span>
                      </div>
                    ))}
                  </div>
                  <Button variant={t.featured ? "secondary" : "ghost"} light={!t.featured} size="md" full onClick={onEnterApp} iconRight={<window.Icon.Arrow size={13} />}>{t.cta}</Button>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* Compare table */}
      <section style={{ padding: "80px 0", background: "var(--sand-soft)", borderTop: "1px solid rgba(8,12,16,0.06)", borderBottom: "1px solid rgba(8,12,16,0.06)" }} className="sm-pad-y">
        <div className="container">
          <Reveal>
            <DisplayH2 center eyebrow="COMPARE" italic="side by side.">Every feature</DisplayH2>
          </Reveal>
          <LCard style={{ marginTop: 40, overflow: "hidden" }}>
            <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", padding: "16px 24px", borderBottom: "1px solid rgba(8,12,16,0.08)", background: "rgba(8,12,16,0.02)" }}>
              <div className="micro" style={{ color: "rgba(8,12,16,0.55)" }}>FEATURE</div>
              {tiers.map(t => (
                <div key={t.name} className="micro" style={{ color: t.featured ? "var(--harbor)" : "rgba(8,12,16,0.55)", textAlign: "center" }}>{t.name.toUpperCase()}</div>
              ))}
            </div>
            {matrix.map(sec => (
              <div key={sec.section}>
                <div style={{ padding: "14px 24px", background: "rgba(8,12,16,0.025)", fontSize: 11.5, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: "rgba(8,12,16,0.62)" }}>{sec.section}</div>
                {sec.rows.map((r, i) => (
                  <div key={i} style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", padding: "14px 24px", borderTop: "1px solid rgba(8,12,16,0.05)", alignItems: "center" }}>
                    <div style={{ fontSize: 13.5, color: "var(--ink)" }}>{r[0]}</div>
                    {r.slice(1).map((cell, j) => (
                      <div key={j} style={{ fontSize: 13, textAlign: "center", color: cell === "—" ? "rgba(8,12,16,0.35)" : "var(--ink)", fontWeight: cell === "✓" ? 600 : 400 }}>{cell}</div>
                    ))}
                  </div>
                ))}
              </div>
            ))}
          </LCard>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: "100px 0" }} className="sm-pad-y">
        <div className="container">
          <Reveal>
            <DisplayH2 center eyebrow="QUESTIONS" italic="straightforward.">Asked often,</DisplayH2>
          </Reveal>
          <div style={{ maxWidth: 720, margin: "48px auto 0", display: "flex", flexDirection: "column", gap: 0, borderTop: "1px solid rgba(8,12,16,0.10)" }}>
            {[
              { q: "Is there a free trial?", a: "Yes — 14 days on Studio or Atelier, no card required. You'll have full functionality and can invite up to three reviewers." },
              { q: "Do you charge per client reviewer?", a: "Never. You can invite unlimited reviewers on every plan. We charge per editor on your studio team, not per person you collaborate with." },
              { q: "Can I migrate from Frame.io or Drive?", a: "Yes — our import wizard pulls in projects, versions, and even existing comments where the platform allows it. Most studios are fully migrated within a working day." },
              { q: "What happens to my data if I cancel?", a: "All project data is exportable as a single ZIP with assets, comments, and approval logs. We hold it for 90 days post-cancellation, then permanently delete." },
              { q: "Do you offer non-profit or education pricing?", a: "Yes — 40% off Studio and Atelier for non-profits, film schools, and student-run studios. Contact us to set up." },
              { q: "Is HarborDock SOC 2 certified?", a: "Type II — annual audit. We can share the report under NDA on request, and Production plans include EU + US storage residency." },
            ].map((f, i) => <FAQ key={i} {...f} />)}
          </div>
        </div>
      </section>

      <MarketingCTA onEnterApp={onEnterApp} title="Pick a plan." italic="Or talk to us first." />
      <MarketingFooter onNav={onNav} />
    </div>
  );
};

const FAQ = ({ q, a }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: "1px solid rgba(8,12,16,0.10)" }}>
      <button onClick={() => setOpen(!open)} style={{
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
        width: "100%", background: "transparent", border: "none", padding: "20px 0",
        cursor: "pointer", textAlign: "left", fontFamily: "var(--sans)",
      }}>
        <span style={{ fontFamily: "var(--serif)", fontSize: 20, fontWeight: 500, letterSpacing: "-0.01em", color: "var(--ink)" }}>{q}</span>
        <div style={{
          width: 28, height: 28, borderRadius: 99,
          background: open ? "var(--ink)" : "transparent",
          color: open ? "white" : "var(--ink)",
          border: open ? "1px solid var(--ink)" : "1px solid rgba(8,12,16,0.20)",
          display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
          transition: "all 160ms ease",
        }}>
          <window.Icon.Plus size={12} stroke={2} style={{ transform: open ? "rotate(45deg)" : "none", transition: "transform 200ms ease" }} />
        </div>
      </button>
      {open && (
        <div style={{ paddingBottom: 20, fontSize: 14.5, lineHeight: 1.6, color: "rgba(8,12,16,0.65)", maxWidth: 620 }}>{a}</div>
      )}
    </div>
  );
};

window.PricingPage = PricingPage;