// Pricing: the 4 subscription tiers. Mirrors App/frontend/src/pages/BillingPage.jsx's
// PLANS array exactly, so the marketing site and the app never drift apart.
// Checkout itself happens inside the app after signup, not here.

const PLANS = [
  { id: "free", name: "Free", price: "£0", period: "/month", firms: "2 emails / month" },
  { id: "starter", name: "Starter", price: "£8", period: "/month", firms: "20 emails / month" },
  { id: "growth", name: "Growth", price: "£15", period: "/month", firms: "50 emails / month", highlight: true },
  { id: "pro", name: "Pro", price: "£25", period: "/month", firms: "120 emails / month" },
];

function PlanCard({ plan }) {
  const signupHref = window.APP_URL + "/signup";
  return (
    <div className={"pricing-card snd-card" + (plan.highlight ? " highlight" : "")}>
      {plan.highlight && <span className="snd-badge fern pricing-badge"><span className="dot"/>Most popular</span>}
      <div className="pricing-name">{plan.name}</div>
      <div className="pricing-amt"><span className="cur">{plan.price}</span><span className="period">{plan.period}</span></div>
      <div className="pricing-firms">{plan.firms}</div>
      <a
        className={"snd-btn lg pricing-cta " + (plan.highlight ? "fern" : "secondary")}
        href={signupHref}
        target="_blank"
        rel="noopener noreferrer"
        style={{ textDecoration: "none" }}
      >
        {plan.id === "free" ? "Start free" : `Get ${plan.name}`}
      </a>
    </div>
  );
}

function Pricing() {
  return (
    <section className="section s-pad pricing-section" id="pricing">
      <div className="section-eyebrow">Pricing</div>
      <h2>Start free. Upgrade when <em>you need more</em>.</h2>
      <p className="lede">Every plan gets the same research and drafting quality. Higher tiers just mean more firms researched and emailed each month.</p>

      <div className="pricing-grid">
        {PLANS.map((plan) => (
          <PlanCard key={plan.id} plan={plan} />
        ))}
      </div>
      <p className="pricing-fine">Cancel anytime from your billing page. No long-term contract.</p>
    </section>
  );
}
Object.assign(window, { Pricing });