// pricing.jsx — Manifold.md pricing page
// Same editorial register as the homepage: serif body, mono labels, neutrals.
// Three plans laid out as typography columns (no checkmark tables).

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false,
  "rainbowSpeed": 10,
  "dashSpeed": 2.5,
  "ctaBorder": 3
} /*EDITMODE-END*/;

// Quiet (non-rainbow) CTA used on Solo / Company columns.
function CTAQuiet({ children, href = "#" }) {
  return (
    <a className="cta-quiet" href={href} role="button">
      <span>{children}</span>
      <span className="arrow" aria-hidden="true">→</span>
    </a>);

}

function PricingApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.body.classList.toggle("dark", !!t.dark);
  }, [t.dark]);

  useEffect(() => {
    document.documentElement.style.setProperty("--rainbow-speed", `${t.rainbowSpeed}s`);
    document.documentElement.style.setProperty("--dash-speed", `${t.dashSpeed}s`);
    document.documentElement.style.setProperty("--cta-border", `${t.ctaBorder}px`);
  }, [t.rainbowSpeed, t.dashSpeed, t.ctaBorder]);

  return (
    <div className="page">
      {/* ── Top chrome ─────────────────────────────────────────────── */}
      <nav className="nav" aria-label="Top">
        <a className="wordmark" href="Manifold.md Homepage.html">
          Manifold<span className="ext">.md</span>
        </a>
        <div className="nav-links">
          <a className="nav-link active" href="Manifold.md Pricing.html">Pricing</a>
          <a className="nav-link" href="Manifold.md Brand.html">Brand</a>
          <a className="nav-link" href="#">agents.md →</a>
        </div>
      </nav>

      {/* ── Hero ───────────────────────────────────────────────────── */}
      <section className="shell" style={{ paddingTop: 56, paddingBottom: 16 }}>
        <h1 className="hero">Pricing.</h1>
        <p className="sub">
          Free for one person. $500 a month for a team. Custom for everything else.
          Pay for what you use, monthly. Nothing per seat. No annual contracts.
        </p>
      </section>

      {/* ── Three plans ─────────────────────────────────────────────── */}
      <section className="shell" style={{ paddingTop: 16, paddingBottom: 24 }}>
        <div className="plans">
          {/* SOLO */}
          <div className="plan">
            <p className="plan-label">Solo</p>
            <p className="plan-price">Free<span className="unit" style={{ margin: "0px 0px 0px 2px" }}>forever</span></p>
            <p className="plan-tag">For people, not companies.</p>
            <p className="plan-body">
              One person. One connected source. Unlimited questions. Use it to evaluate
              the product, or for your own personal work. No card, no signup.
            </p>
            <CTAQuiet>Open in Claude</CTAQuiet>
          </div>

          {/* TEAM — recommended, gets the rainbow CTA */}
          <div className="plan">
            <p className="plan-label">Team</p>
            <p className="plan-price">$500<span className="unit" style={{ margin: "0px 0px 0px 2px" }}>/month</span></p>
            <p className="plan-tag">For most companies.</p>
            <p className="plan-body">
              Up to 50 people. 10 sources and 10,000 questions included. Past that,
              usage adds up — $25 per extra source, $0.02 per extra question. Billed
              monthly. Cancel anytime.
            </p>
            <CTA>Start free for 14 days</CTA>
          </div>

          {/* COMPANY */}
          <div className="plan">
            <p className="plan-label">Company</p>
            <p className="plan-price">Let's talk<span className="unit" style={{ marginLeft: 8 }}>·</span></p>
            <p className="plan-tag">For SSO, audit logs, and a phone number.</p>
            <p className="plan-body">
              Everything in Team. SSO, audit log, dedicated support, private connectors
              built for your stack. Annual contracts if you want one — month-to-month
              if you don't.
            </p>
            <CTAQuiet href="mailto:hello@manifold.md">Email us</CTAQuiet>
          </div>
        </div>
      </section>

      {/* ── How pricing works ───────────────────────────────────────── */}
      <hr className="rule" />
      <section className="shell">
        <div className="col-text">
          <h2 className="head">How the Team plan works.</h2>
          <p className="body">
            Every month, you pay $500. That covers up to 50 people, 10 connected sources,
            and 10,000 questions. Past that, usage adds up. We bill at the end of the month,
            for what you actually used. Nothing per seat. No annual contracts. Cancel anytime.
          </p>
        </div>

        <div className="col-text" style={{ marginTop: 28 }}>
          <div className="pricing-table" role="table" aria-label="What's included and what costs extra">
            <div className="row">
              <div>
                <div className="lbl">Included monthly</div>
                <div className="val">50 people</div>
              </div>
              <div>
                <div className="lbl">Beyond that</div>
                <div className="val">No charge — add the rest of the company</div>
              </div>
            </div>
            <div className="row">
              <div>
                <div className="lbl">Included monthly</div>
                <div className="val">10 connected sources</div>
              </div>
              <div>
                <div className="lbl">Beyond that</div>
                <div className="val">$25 / month per extra source</div>
              </div>
            </div>
            <div className="row">
              <div>
                <div className="lbl">Included monthly</div>
                <div className="val">10,000 questions</div>
              </div>
              <div>
                <div className="lbl">Beyond that</div>
                <div className="val">$0.02 per extra question</div>
              </div>
            </div>
          </div>

          <p className="body body-note" style={{ marginTop: 20 }}>
            A typical team of 25 people connecting Slack, Notion, Linear, Drive,
            BigQuery, and a couple of others — asking a few thousand questions a month —
            pays exactly $500. No surprises.
          </p>
        </div>
      </section>

      {/* ── FAQ ─────────────────────────────────────────────────────── */}
      <hr className="rule" />
      <section className="shell">
        <div className="col-text">
          <h2 className="head">Questions, plainly answered.</h2>
        </div>

        <div className="col-text faq" style={{ marginTop: 24 }}>
          <div className="faq-item">
            <p className="faq-q">"What counts as a question?"</p>
            <p className="faq-a">
              One prompt and the answer Claude gives back. A multi-step piece of research
              — Claude pulling from four tools to give you a single cited reply — counts
              as one question. Asking three follow-ups counts as three.
            </p>
          </div>

          <div className="faq-item">
            <p className="faq-q">"Are sources per person or per company?"</p>
            <p className="faq-a">
              Per company. One Slack connection is one source, no matter how many
              of you use it. You're not paying twice for the same data.
            </p>
          </div>

          <div className="faq-item">
            <p className="faq-q">"Why $500 flat? Why not per seat?"</p>
            <p className="faq-a">
              Per-seat pricing punishes you for adding people, which is the opposite
              of what we want. We want everyone at your company to have Manifold open,
              so we made the price not depend on that.
            </p>
          </div>

          <div className="faq-item">
            <p className="faq-q">"Do I need a credit card to try the Team plan?"</p>
            <p className="faq-a">
              No. The first 14 days are free. We ask for a card on day 15. If you
              don't add one, the workspace drops to Solo automatically — nothing gets
              charged, nothing gets deleted.
            </p>
          </div>

          <div className="faq-item">
            <p className="faq-q">"Can I switch plans?"</p>
            <p className="faq-a">
              Yes, anytime. Solo to Team is two clicks. Team to Company is a short
              email and a conversation about SSO, audit, and any custom connectors.
            </p>
          </div>

          <div className="faq-item">
            <p className="faq-q">"What happens to my data if I cancel?"</p>
            <p className="faq-a">
              Nothing — we don't have it. Your sources stay exactly where they were.
              The small map we kept of what your company calls things gets deleted
              within 30 days.
            </p>
          </div>

          <div className="faq-item">
            <p className="faq-q">"What about education, nonprofits, open source?"</p>
            <p className="faq-a">
              Write to <a href="mailto:hello@manifold.md">hello@manifold.md</a> with a
              sentence about what you do. We have a discount for each.
            </p>
          </div>
        </div>
      </section>

      {/* ── Final CTA ───────────────────────────────────────────────── */}
      <section className="final-cta shell">
        <h2>Free for one. Cheap for a team.</h2>
        <CTA>Open in Claude</CTA>
        <div className="cta-meta">Free. 5 minutes. No signup.</div>
      </section>

      {/* ── Colophon ────────────────────────────────────────────────── */}
      <footer className="shell">
        <div className="colophon">
          <span className="colo-line">Manifold.md is set in Source Serif 4, Inter, and JetBrains Mono.</span>
          <span className="colo-line">The wordmark combines Source Serif 4 (Manifold) and JetBrains Mono (.md).</span>
          <span className="colo-line">Manifold.md is closed-source software. The agents.md convention is published as an open specification at /spec.</span>
          <span className="colo-line">Built by an autonomous agent network with Florent as advisor.</span>
          <span className="colo-line">© Manifold.md, 2026.</span>
          <a className="toggle" onClick={(e) => {e.preventDefault();setTweak("dark", !t.dark);}} href="#">
            {t.dark ? "Light mode" : "Dark mode"}
          </a>
        </div>
      </footer>

      {/* ── Tweaks panel ────────────────────────────────────────────── */}
      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakToggle label="Dark mode" value={t.dark}
        onChange={(v) => setTweak("dark", v)} />

        <TweakSection label="Motion" />
        <TweakSlider label="Rainbow CTA" value={t.rainbowSpeed}
        min={4} max={20} step={0.5} unit="s"
        onChange={(v) => setTweak("rainbowSpeed", v)} />

        <TweakSection label="CTA" />
        <TweakSlider label="Border width" value={t.ctaBorder}
        min={1} max={6} step={0.5} unit="px"
        onChange={(v) => setTweak("ctaBorder", v)} />
      </TweaksPanel>
    </div>);

}

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