/* Products — the three-product suite. */
const { Card, Badge } = window.LexInToshDesignSystem_e187a4;
const Icon = window.Icon;
const SITE = window.SITE;

function ProductCard({ p, i }) {
  return (
    <window.Reveal delay={i * 80} className="lift">
      <Card padded={false} className="pcard" style={{ height: "100%", gap: 0 }}>
        <div className="pcard__top">
          <span className="pcard__icon"><Icon name={p.icon} size={24} /></span>
          <Badge variant="accent" size="sm">{p.tag}</Badge>
        </div>
        <div className="pcard__body">
          <span className="pcard__cat">{p.category}</span>
          <h3 className="h3">{p.name}</h3>
          <p className="pcard__desc">{p.desc}</p>
          <ul className="ticks">{p.points.map((pt) => <li key={pt}><Icon name="check" size={16} />{pt}</li>)}</ul>
        </div>
        <div className="pcard__foot">
          <window.TLink href={p.cta.href} external={p.cta.external}>{p.cta.label}</window.TLink>
        </div>
      </Card>
    </window.Reveal>
  );
}

function Products() {
  return (
    <section className="section section--white" id="products">
      <div className="wrap">
        <window.SectionHead
          eyebrow="The suite"
          title={<>Four products, <span className="accent-serif">one</span> platform.</>}
          lead="A connected suite covering the whole legal ecosystem — from the public asking a question, to an AI assistant that researches for you, to firms running their caseload, to the developers building what comes next."
          max={720}
        />
        <div className="grid products__grid">
          {SITE.products.map((p, i) => <ProductCard key={p.id} p={p} i={i} />)}
        </div>
      </div>
    </section>
  );
}
window.Products = Products;