function Stats() {
  const stats = [
    { num: "2,418", label: "Calmer first cycles" },
    { num: "31,406", label: "Doses without a 2am search" },
    { num: "47", label: "Bangkok districts at our door" },
    { num: "94%", label: "Stay for month two" },
  ];
  return (
    <section style={{ padding: "48px 0", borderBlock: "1px solid var(--line)", background: "var(--paper-2)" }}>
      <div className="container">
        <div className="grid-4" style={{ gap: 24 }}>
          {stats.map((s, i) => (
            <div key={i} className="col gap-8">
              <div className="display" style={{ fontSize: 48, lineHeight: 1 }}>{s.num}</div>
              <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.16em", textTransform: "uppercase" }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const items = [
    {
      quote: "I'd been thinking about it for two months. I don't know what I expected — a doctor's office, maybe. What I got was a brown box and a small book and a very calm afternoon.",
      author: "Marc T.",
      meta: "BPC-157 · first cycle",
    },
    {
      quote: "My sister had been on tirzepatide for a year and made it sound easy. It wasn't easy until this showed up. Then it was actually a little boring. Which is what I wanted.",
      author: "Anya P.",
      meta: "Tirzepatide · first cycle",
    },
    {
      quote: "Apparently I had been doing the math wrong. The little book caught it on the first night. I'm slightly embarrassed and very, very grateful no one was filming me.",
      author: "Rin S.",
      meta: "GHK-Cu · month two",
    },
  ];
  return (
    <section>
      <div className="container">
        <div className="section-head" style={{ marginBottom: 48 }}>
          <span className="eyebrow">From people who started where you are</span>
          <h2 className="display section-title">It's allowed to feel ordinary.</h2>
        </div>
        <div className="grid-3">
          {items.map((t, i) => (
            <div key={i} className="card" style={{ padding: 28, display: "flex", flexDirection: "column", gap: 20 }}>
              <div style={{ display: "flex", gap: 2 }}>
                {[0,1,2,3,4].map(s => <IStar key={s} size={14} stroke="var(--accent)" />)}
              </div>
              <p className="display" style={{ fontSize: 20, lineHeight: 1.3, margin: 0, fontWeight: 400, fontStyle: "italic" }}>"{t.quote}"</p>
              <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 12 }}>
                <div className="ph ph-neutral" style={{ width: 36, height: 36, borderRadius: "50%", border: 0, fontSize: 9 }}>—</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{t.author}</div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.06em" }}>{t.meta}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Stats, Testimonials });