const plans = [
  {
    tier: "Basic",
    price: "$0",
    per: "/mo",
    desc: "For solo creators just getting started with SEO and keyword tracking.",
    features: ["10 tracked keywords", "Weekly rank reports", "Basic site audit", "Email support"],
    cta: "Start a Free Trial",
    featured: false,
  },
  {
    tier: "Pro",
    badge: "Popular",
    price: "$19",
    per: "/mo",
    desc: "For growing teams that need deeper analytics and full integrations.",
    features: ["500 tracked keywords", "Daily rank reports", "Full site audit + fixes", "Google Search Console", "Priority chat support"],
    cta: "Start a Free Trial",
    featured: true,
  },
  {
    tier: "Premium",
    price: "$39",
    per: "/mo",
    desc: "For agencies managing many clients with white-label reporting.",
    features: ["Unlimited keywords", "Real-time tracking", "Multi-domain projects", "White-label reports", "Dedicated success manager"],
    cta: "Start a Free Trial",
    featured: false,
  },
];

const Pricing = () => (
  <section className="section" data-screen-label="Pricing">
    <div className="shell">
      <span className="kicker"><span className="pip" /> Pricing</span>
      <h2 className="title metal">
        Flexible Pricing for<br/>
        Every Business
      </h2>
      <p className="section-sub">
        Whether you're just getting started or scaling fast, we have a plan tailored to your needs.
      </p>

      <div className="price-grid">
        {plans.map(p => (
          <div className={"price-card " + (p.featured ? "featured" : "with-grid")} key={p.tier}>
            <div className="price-tier">
              {p.tier}
              {p.badge && <span className="pop">{p.badge}</span>}
            </div>
            <div className="price-num">{p.price}<span className="per">{p.per}</span></div>
            <p className="price-desc">{p.desc}</p>
            <ul className="price-features">
              {p.features.map(f => (
                <li key={f}><Check /> {f}</li>
              ))}
            </ul>
            <a href="#" className="btn-price">{p.cta} <ArrowRight /></a>
          </div>
        ))}
      </div>
    </div>
  </section>
);

window.Pricing = Pricing;