// testimonials.jsx — quote slab + grid of reader letters

const QuoteSlab = () => (
  <section className="quote-slab">
    <span className="quote-slab__candle quote-slab__candle--1"></span>
    <span className="quote-slab__candle quote-slab__candle--2"></span>
    <span className="quote-slab__candle quote-slab__candle--3"></span>
    <span className="quote-slab__candle quote-slab__candle--4"></span>

    <Reveal>
      <p className="quote-slab__text">
        "The practice does not judge the gap.<br/>
        It only waits."
      </p>
      <span className="quote-slab__attr">— Zenmunis</span>
    </Reveal>
  </section>
);

const TESTIMONIALS = [
  { quote: "I have not slept this softly in years. The breathing on night two — something quiet inside finally let go.",
    name: "Marisol", loc: "Austin, TX · Age 38" },
  { quote: "I expected another wellness book. I received something closer to a letter from a grandfather I never met.",
    name: "James", loc: "Brooklyn, NY · Age 41" },
  { quote: "The practice does not judge the gap. That sentence has been with me every morning for three weeks now.",
    name: "Priya", loc: "London, UK · Age 34" },
  { quote: "Five minutes a day. That is all. By the end of the second week I noticed my shoulders were lower.",
    name: "Aiko", loc: "Portland, OR · Age 45" },
  { quote: "I bought it on a hard night. I read one page. I closed it. And I slept. That was a month ago, and I am still here.",
    name: "David", loc: "Toronto, ON · Age 39" },
  { quote: "It does not feel like a book. It feels like permission. To slow down. To begin. To not have to explain it.",
    name: "Lena", loc: "Berlin, DE · Age 32" },
];

const TestimonialCard = ({ t }) => (
  <figure className="tcard">
    <span className="tcard__stars">★ ★ ★ ★ ★</span>
    <blockquote className="tcard__quote">{t.quote}</blockquote>
    <figcaption className="tcard__author">
      <span className="tcard__avatar"></span>
      <span className="tcard__author-text">
        <span className="tcard__name">{t.name}</span>
        <span className="tcard__loc">{t.loc}</span>
      </span>
    </figcaption>
  </figure>
);

const Testimonials = () => (
  <section className="section" id="testimonials">
    <div className="section__head">
      <span className="label" style={{ color: "var(--gold-deep)" }}>From Quiet Readers</span>
      <Divider width={100} />
      <h2 className="section__title">What They Wrote Back</h2>
      <p className="section__lead">
        Letters from readers who began. No exclamation marks.
        No transformation tales. Just what shifted, quietly.
      </p>
    </div>

    <Reveal stagger>
      <div className="testimonials__grid">
        {TESTIMONIALS.map((t, i) => <TestimonialCard key={i} t={t}/>)}
      </div>
    </Reveal>
  </section>
);

Object.assign(window, { QuoteSlab, Testimonials, TestimonialCard, TESTIMONIALS });