// pricing.jsx — Fair by design. No numbers yet — principles + a founder call.

/* eslint-disable react/prop-types */

const PRINCIPLES = [
  {
    num: "01",
    h: "Pay only for what you use.",
    p: "No seats to buy, no minimums to hit. You're billed on the work the agent actually does: variants made, not logins.",
  },
  {
    num: "02",
    h: "No lock-in.",
    p: "Your library, your briefs, your output: all exportable, any time. Stay because it works, not because leaving is hard.",
  },
  {
    num: "03",
    h: "Scales with output, not headcount.",
    p: "Add a marketer, a brand, a new market, and your cost tracks the video you ship, never the size of your team.",
  },
  {
    num: "04",
    h: "Priced with our first teams.",
    p: "We're setting pricing alongside the teams using Prexi today, so it's fair for how performance teams actually work.",
  },
];

function PricingApp() {
  const [theme, setTheme] = useTheme();
  return (
    <>
      <Header theme={theme} setTheme={setTheme} active="pricing" />
      <main>
        {/* intro */}
        <section className="page-intro">
          <div className="page-intro-glow" aria-hidden="true" />
          <div className="container">
            <div className="page-intro-inner">
              <span className="eyebrow">Pricing</span>
              <h1 className="page-title">
                Pricing that's <span className="serif-italic">fair by design.</span>
              </h1>
              <p className="page-lead">
                Pay only for what you use. No tiers to decode, no seats to count. Just the work the agent does, priced the way performance teams actually buy.
              </p>
            </div>
          </div>
        </section>

        {/* principles */}
        <section className="section-tight">
          <div className="container">
            <div className="principles">
              {PRINCIPLES.map((p) => (
                <div className="principle" key={p.num}>
                  <span className="principle-num">{p.num}</span>
                  <h2 className="principle-h">{p.h}</h2>
                  <p className="principle-p">{p.p}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* no-numbers CTA */}
        <section className="section">
          <div className="container">
            <div className="final-card">
              <div className="final-bg" aria-hidden="true" />
              <div className="final-content">
                <span className="eyebrow">No tiers yet</span>
                <h2 className="final-title">
                  Tell us what you're running. <span className="serif-italic">We'll show you the math.</span>
                </h2>
                <p className="final-sub">
                  Bring the channels, the spend, and the volume you need. Twenty minutes with a founder, and we'll walk through what Prexi would cost, and what it would save.
                </p>
                <div className="final-ctas">
                  <a className="btn btn-primary" href="book-a-call.html">Talk to founder</a>
                  <a className="btn btn-ghost" href="index.html">
                    See how it works <ArrowIcon />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}

Object.assign(window, { PricingApp });