function ProductGrid() {
  const items = [
    {
      eyebrow: '01 · THE ENGINE',
      title: 'The AI never sleeps.',
      desc: 'Bids, creative rotation, audience shifts, budget reallocations — every 4 minutes, across Google, Meta, TikTok.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="url(#gdna-gradient)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
          <circle cx="12" cy="12" r="3"/>
        </svg>
      )
    },
    {
      eyebrow: '02 · THE SIGNATURE',
      title: 'A human signs every decision.',
      desc: 'Your specialist audits the model weekly, overrides where it matters, and leaves notes you can read in plain language.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="url(#gdna-gradient)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
          <circle cx="12" cy="7" r="4"/>
          <path d="M17 11l2 2 4-4"/>
        </svg>
      )
    },
    {
      eyebrow: '03 · THE PROOF',
      title: 'Every move is logged.',
      desc: 'Full audit trail. What the AI changed, what the human approved, why, and what it earned you. Exportable, always.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="url(#gdna-gradient)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 3v18h18"/>
          <path d="M7 14l4-4 4 4 5-5"/>
          <circle cx="7" cy="14" r="1.5"/>
          <circle cx="11" cy="10" r="1.5"/>
          <circle cx="15" cy="14" r="1.5"/>
          <circle cx="20" cy="9" r="1.5"/>
        </svg>
      )
    }
  ];
  return (
    <section id="product" className="product-section">
      <div className="section-inner">
        <div className="section-head">
          <div className="eyebrow">THE PRODUCT</div>
          <h2 className="section-title">Two layers. One account.<br/><span className="muted">The AI engine and the human signature.</span></h2>
        </div>
        <div className="product-grid">
          {items.map((it, i) => (
            <article key={i} className="glass-card product-card">
              <div className="product-icon">{it.icon}</div>
              <div className="eyebrow cyan">{it.eyebrow}</div>
              <h3 className="card-title">{it.title}</h3>
              <p className="card-desc">{it.desc}</p>
              <a href="#" className="card-link">Read the playbook →</a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.ProductGrid = ProductGrid;