/* Pricing — contact-sales driven. */
const { Card, Button } = window.LexInToshDesignSystem_e187a4;
const Icon = window.Icon;
const SITE = window.SITE;

function PriceCard({ p, i }) {
  const featured = !!p.featured;
  const ctaStyle = { ...window.CTA_MD, width: "100%", ...(featured ? { background: "#fff", color: "var(--primary)" } : null) };
  const featStyle = featured
    ? { background: "var(--primary)", color: "#fff", borderColor: "transparent", boxShadow: "var(--shadow-xl)" }
    : null;
  return (
    <window.Reveal delay={i * 80} className="lift">
      <Card padded={false} className={"price" + (featured ? " price--feat" : "")} style={{ height: "100%", gap: 0, ...featStyle }}>
        {featured ? <span className="price__flag">Most popular</span> : null}
        <div className="price__head">
          <span className="price__aud">{p.audience}</span>
          <h3 className="h3">{p.name}</h3>
          <div className="price__amt">{p.price}</div>
          <p className="price__note">{p.note}</p>
        </div>
        <ul className="ticks">{p.features.map((f) => <li key={f}><Icon name="check" size={16} />{f}</li>)}</ul>
        <div className="price__cta">
          {p.cta.sales
            ? <window.SalesButton variant={featured ? "default" : p.cta.variant} style={ctaStyle}>{p.cta.label}</window.SalesButton>
            : <Button variant={p.cta.variant} onClick={() => window.open(p.cta.href, "_blank", "noopener")} style={ctaStyle}>{p.cta.label}</Button>}
        </div>
      </Card>
    </window.Reveal>
  );
}

function Pricing() {
  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <window.SectionHead
          align="center"
          eyebrow="Pricing"
          title={<>Pricing that fits your <span className="accent-serif">practice</span>.</>}
          lead="From individual advocates to firms and platform builders. Talk to us for a plan matched to your organisation — no two practices are the same."
          max={680}
        />
        <div className="grid cols-3 price__grid">
          {SITE.pricing.map((p, i) => <PriceCard key={p.name} p={p} i={i} />)}
        </div>
        <window.Reveal delay={120}>
          <p className="price__foot"><Icon name="scale" size={15} /> Every plan includes access to Nepal&rsquo;s most comprehensive legal knowledge base. Prices in NPR.</p>
        </window.Reveal>
      </div>
    </section>
  );
}
window.Pricing = Pricing;