function Testimonial() {
  const testimonials = [
    {
      quote: "They made next steps feel clear, with simple ideas we could use at home.",
      name: "Bloom Well parent",
      detail: "Parent of a preschool child",
      initials: "BP",
      featured: true,
    },
    {
      quote: "The plan felt practical, with small ideas we could use during meals, play, and bedtime.",
      name: "Local parent",
      detail: "Feeding and routines",
      initials: "LP",
    },
    {
      quote: "The session felt warm and playful, but still focused. My child was comfortable enough to try.",
      name: "Caregiver",
      detail: "Speech and sensory support",
      initials: "CG",
    },
  ];
  const [featured, ...supporting] = testimonials;
  return (
    <section className="bw-testimonial__section">
      <div className="bw-testimonial__inner">
        <div className="bw-testimonial__intro">
          <Eyebrow color="var(--sky-300)">Parent reflections</Eyebrow>
          <h2>What care feels like at Bloom Well</h2>
          <p>Calm guidance, practical home strategies, and therapy that meets each child with patience.</p>
        </div>

        <div className="bw-testimonial__layout">
          <article className="bw-testimonial__featured">
            <Icon name="quote" size={40} color="var(--sky-400)" />
            <blockquote>
              {featured.quote}
            </blockquote>
            <div className="bw-testimonial__person">
              <Avatar name={featured.initials} size="lg" />
              <div>
                <div className="bw-testimonial__name">{featured.name}</div>
                <div className="bw-testimonial__detail">{featured.detail}</div>
              </div>
            </div>
          </article>

          <div className="bw-testimonial__supporting">
            {supporting.map((item) => (
              <article key={item.quote} className="bw-testimonial__card">
                <Icon name="quote" size={22} color="var(--sky-300)" />
                <p>{item.quote}</p>
                <div className="bw-testimonial__person bw-testimonial__person--small">
                  <Avatar name={item.initials} size="sm" />
                  <div>
                    <div className="bw-testimonial__name">{item.name}</div>
                    <div className="bw-testimonial__detail">{item.detail}</div>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>

        <div className="bw-testimonial__stats">
          {[
            { stat: "5", label: "Specialties in one plan" },
            { stat: "1:1", label: "Family-centered care" },
            { stat: "30 min", label: "Free consultation" },
            { stat: "Play", label: "Child-led sessions" },
          ].map((s) => (
            <div key={s.label} style={{ background: "rgba(255,255,255,0.08)", borderRadius: "var(--radius-lg)", padding: "22px 20px" }}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 34, letterSpacing: "-0.02em" }}>{s.stat}</div>
              <div style={{ color: "var(--sky-200)", fontSize: 14, marginTop: 4 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Testimonial = Testimonial;