// Testimonials — a full-bleed image with a floating cream quote-card, in the
// home scroll-hijack stack (after The Invitation, before the close). The image
// stays fixed; the quote + member rotate via the dots. Attribution is always
// "Member of The Table" — no stars, no "verified", no review language.
const TABLE_VOICES = [
  { name: "Sasha",   quote: "My trainer noticed the change before I said anything. I told her it was Nourrir. She's now a member too." },
  { name: "Amir",    quote: "I've tried every meal prep service in London. Nourrir is the first one I've actually stayed with. Sunday just feels different now." },
  { name: "Priya",   quote: "The food is exceptional. But what I didn't expect was how much I'd look forward to opening the envelope." },
  { name: "James",   quote: "I travel Monday to Thursday every week. Sunday used to be the day I got behind. Now it's the day I reset — entirely down to Nourrir." },
  { name: "Omar",    quote: "I noticed the wax seal first. Then the card. Then the food. The only subscription I've had that felt like someone thought about me specifically." },
  { name: "Daniela", quote: "Joined on a recommendation. Three months in and I haven't thought about what I'm eating for lunch once. That's worth more than I can explain." },
];
const TESTIMONIALS_IMAGE = "assets/review-envelope.png";  // sealed envelope + brass stamp — brand craft

function Testimonials() {
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const t = TABLE_VOICES[i];

  // Auto-advance through the reviews; pause on hover/focus so they can be read.
  React.useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setI((k) => (k + 1) % TABLE_VOICES.length), 5200);
    return () => clearInterval(id);
  }, [paused, i]);

  return (
    <section className="quote-panel snap-panel" data-screen-label="Testimonials">
      <div className="quote-panel__img" style={{ backgroundImage: `url(${TESTIMONIALS_IMAGE})` }}/>
      <div className="quote-panel__scrim"/>
      <figure
        className="quote-card"
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        onFocusCapture={() => setPaused(true)}
        onBlurCapture={() => setPaused(false)}
      >
        <span className="quote-card__eyebrow">From the table</span>
        <div className="quote-card__rot" key={i}>
          <blockquote className="quote-card__quote">{t.quote}</blockquote>
          <figcaption className="quote-card__by">
            <span className="quote-card__avatar" aria-hidden="true">{t.name.charAt(0)}</span>
            <span className="quote-card__who">
              <span className="quote-card__name">{t.name}</span>
              <span className="quote-card__role">Member of The Table</span>
            </span>
          </figcaption>
        </div>
        <div className="quote-card__dots" role="tablist">
          {TABLE_VOICES.map((_, k) => (
            <button
              key={k}
              type="button"
              className={"quote-card__dot" + (k === i ? " is-active" : "")}
              onClick={() => setI(k)}
              aria-label={`Show testimonial ${k + 1}`}
              aria-selected={k === i}
            />
          ))}
        </div>
      </figure>
    </section>
  );
}
window.Testimonials = Testimonials;