// SECTION 7 — TESTIMONIALS (paper)
function TestimonialsSection() {
  const mobile = useMobile();
  const items = [
    {
      quote: "Bram neemt echt de tijd om te kijken wat bij je past. Mijn kleur oogt natuurlijk, rijk en precies zoals ik had gehoopt.",
      name: "Sophie",
    },
    {
      quote: "Zelden iemand meegemaakt die zo zorgvuldig werkt. De coupe valt perfect en blijft ook na weken mooi in model.",
      name: "Laura",
    },
    {
      quote: "De combinatie van advies, techniek en rust maakt de ervaring heel prettig. Het resultaat voelt luxe, maar nog steeds helemaal als ik.",
      name: "Emma",
    },
  ];

  if (mobile) {
    return (
      <section id="testimonials" style={{ background: BM.c.paper, color: BM.c.ink, padding: "80px 0", fontFamily: BM.f.sans }}>
        {/* Heading — 24px inset */}
        <RevealGroup baseDelay={0} stagger={140} threshold={0.12} style={{ paddingLeft: 24, paddingRight: 24, marginBottom: 40 }}>
          <Reveal as="p" style={ts.label}><span style={ts.labelRule} />Testimonials</Reveal>
          <Reveal as="h2" style={{ ...ts.h, fontSize: 38 }} duration={1200} distance={22}>
            What clients <em style={ts.italic}>say.</em>
          </Reveal>
          <Reveal as="p" style={ts.sub}>
            Ervaringen van klanten die kiezen voor persoonlijk advies, verfijnde kleur en precisie in styling.
          </Reveal>
        </RevealGroup>

        {/* Scroll slider — paddingLeft aligns first card with heading */}
        <div style={{
          display: "flex",
          overflowX: "scroll",
          scrollSnapType: "x mandatory",
          WebkitOverflowScrolling: "touch",
          scrollbarWidth: "none",
          gap: 12,
          paddingLeft: 24,
          paddingBottom: 4,
        }}>
          {items.map((t, i) => (
            <div key={i} style={{
              ...ts.card,
              flex: "0 0 82vw",
              scrollSnapAlign: "start",
              flexShrink: 0,
              minHeight: 260,
              padding: "72px 28px 32px",
              borderRadius: 16,
            }}>
              <span style={ts.mark} aria-hidden="true">“</span>
              <p style={ts.quote}>{t.quote}</p>
              <div style={ts.rule} />
              <p style={ts.name}>{t.name}</p>
            </div>
          ))}
          <div style={{ flexShrink: 0, width: 24 }} />
        </div>
      </section>
    );
  }

  return (
    <section id="testimonials" style={ts.wrap}>
      <RevealGroup baseDelay={0} stagger={140} threshold={0.12} style={ts.inner}>
        <div style={ts.head}>
          <Reveal as="p" style={ts.label}><span style={ts.labelRule} />Testimonials</Reveal>
          <Reveal as="h2" style={ts.h} duration={1200} distance={22} data-ts-h>
            What clients <em style={ts.italic}>say.</em>
          </Reveal>
          <Reveal as="p" style={ts.sub}>
            Ervaringen van klanten die kiezen voor persoonlijk advies, verfijnde kleur en precisie in styling.
          </Reveal>
        </div>
        <Reveal style={ts.grid} delay={240}>
          {items.map((t, i) => (
            <Reveal key={i} style={ts.card} delay={i * 120} distance={20} duration={1100}>
              <span style={ts.mark} aria-hidden="true">“</span>
              <p style={ts.quote}>{t.quote}</p>
              <div style={ts.rule} />
              <p style={ts.name}>{t.name}</p>
            </Reveal>
          ))}
        </Reveal>
      </RevealGroup>
    </section>
  );
}

window.TestimonialsSection = TestimonialsSection;

const ts = {
  wrap: {
    background: BM.c.paper,
    color: BM.c.ink,
    padding: "160px 80px",
    fontFamily: BM.f.sans,
  },
  inner: { maxWidth: 1480, margin: "0 auto" },
  head: {
    textAlign: "left",
    maxWidth: 820,
    margin: "0 0 88px",
    display: "flex", flexDirection: "column", alignItems: "flex-start",
  },
  label: {
    display: "flex", alignItems: "center", gap: 14,
    margin: "0 0 28px",
    fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase",
    color: BM.c.mute, fontWeight: 400,
  },
  labelRule: { width: 36, height: 1, background: BM.c.mute },
  h: {
    margin: 0,
    fontFamily: BM.f.serif, fontWeight: 500,
    fontSize: "clamp(34px, 4.4vw, 60px)",
    lineHeight: 1.18, letterSpacing: "-0.012em",
    color: BM.c.ink,
    paddingBottom: "0.12em",
  },
  italic: { fontStyle: "italic", fontWeight: 400, color: BM.c.navy },
  sub: {
    margin: "36px 0 0",
    fontSize: 16, lineHeight: 1.65,
    color: BM.c.mute, fontWeight: 300,
    maxWidth: 520,
  },
  grid: {
    display: "grid",
    gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
    gap: 28,
  },
  card: {
    position: "relative",
    background: "rgba(255,255,255,0.45)",
    border: `1px solid ${BM.c.rule}`,
    borderRadius: 24,
    padding: "92px 40px 36px",
    display: "flex", flexDirection: "column",
    minHeight: 280,
  },
  mark: {
    position: "absolute",
    top: 18, left: 28,
    fontFamily: BM.f.serif,
    fontSize: 72,
    lineHeight: 1,
    color: BM.c.navy,
    opacity: 0.18,
    fontStyle: "italic",
    fontWeight: 400,
    pointerEvents: "none",
    userSelect: "none",
  },
  quote: {
    position: "relative",
    margin: 0,
    fontFamily: BM.f.sans,
    fontSize: 17.5,
    lineHeight: 1.6,
    color: BM.c.ink,
    fontWeight: 300,
    letterSpacing: "-0.005em",
    flex: 1,
  },
  rule: { width: 32, height: 1, background: BM.c.rule, margin: "28px 0 18px" },
  name: {
    margin: 0,
    fontFamily: BM.f.sans,
    fontSize: 12,
    fontWeight: 500,
    letterSpacing: "0.16em",
    textTransform: "uppercase",
    color: BM.c.navy,
  },
};

(function injectTestimonialsResponsive() {
  if (document.getElementById("ts-responsive")) return;
  const el = document.createElement("style");
  el.id = "ts-responsive";
  el.textContent = `
    @media (min-width: 769px) and (max-width: 1024px) {
      #testimonials { padding: 120px 56px !important; }
    }
  `;
  document.head.appendChild(el);
})();