/* Pricing */
function Pricing() {
  const tiers = [
    {
      name: "Custom",
      price: "Let's talk",
      per: "",
      desc: "Multi-location, catalog-heavy, or niche.",
      items: ["Multi-store / multi-language", "Deep WA catalog + shop", "Custom integrations (CRM / ERP)", "Dedicated account lead", "SLA & priority support"],
    },
  ];

  return (
    <section id="pricing" className="tight">
      <div className="wrap">
        <div className="sec-head">
          <h2>Transparent pricing. <span className="serif">No surprises.</span></h2>
          <p>We don't retainer-trap. Cancel any month — we'll still hand over every file and account.</p>
        </div>
        <div className="prices">
          {tiers.map(t => (
            <div key={t.name} className={`price ${t.feature ? 'feature' : ''}`}>
              {t.feature && <div className="tag">Most chosen</div>}
              <h4>{t.name}</h4>
              <div className="small" style={{color: t.feature ? 'color-mix(in oklab, white 60%, black)' : 'var(--muted)'}}>{t.desc}</div>
              <div className="amount">{t.price}<small>{t.per}</small></div>
              <ul>
                {t.items.map(i => <li key={i}>{i}</li>)}
              </ul>
              <div className="footer-cta">
                <a href="#contact" className={`btn ${t.feature ? 'accent' : 'primary'}`} style={{ width: '100%', justifyContent: 'center' }}>Get started <Ic.arrow size={14} /></a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Pricing = Pricing;