/* sections-c.jsx — Value Anchor, Comparison Table, Qualify Yourself, Testimonials */

function ValueAnchor() {
  return (
    <section className="sec bg-cream relative overflow-hidden">
      <div className="absolute pointer-events-none" aria-hidden="true"
           style={{ top: "30%", left: "-15%", width: "40%", height: "60%",
                    background: "radial-gradient(closest-side, rgba(217,119,87,0.10), transparent 70%)" }} />
      <div className="container-x relative">
        <Reveal className="text-center">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full"
               style={{ background: "rgba(217,119,87,0.12)", border: "1px solid rgba(217,119,87,0.30)" }}>
            <Icon name="Scale" size={14} color="#D97757" />
            <span className="font-ui" style={{ fontSize: 12, letterSpacing: "0.22em", fontWeight: 600, color: "#D97757" }}>
              DO THE MATH
            </span>
          </div>
        </Reveal>
        <Reveal delay={100} className="text-center">
          <h2 className="font-display text-ink mt-5 mx-auto"
              style={{ fontSize: "clamp(32px, 4.6vw, 52px)", fontWeight: 800, lineHeight: 1.05,
                       maxWidth: 960, letterSpacing: "-0.02em" }}>
            <span style={{ color: "#B85648" }}>$340+</span> if you buy the books.<br />
            <span className="relative inline-block">
              <span aria-hidden="true" className="absolute"
                    style={{ left: -10, right: -10, bottom: 4, height: 14,
                             background: "#E8A92C", opacity: 0.35, borderRadius: 4 }} />
              <span className="relative" style={{ color: "#2C3A24" }}>$23.95</span>
            </span>{" "}
            for The Baby Blueprint.
          </h2>
        </Reveal>
        <Reveal delay={200} className="text-center">
          <p className="font-body text-muted mt-5 mx-auto" style={{ fontSize: 16, maxWidth: 720, lineHeight: 1.6 }}>
            Chapter 11 includes the full curated reading list — every book recommended, with why it matters.
            You can buy them all yourself, or skip ahead to the synthesis.
          </p>
        </Reveal>

        <div className="mt-14 relative">
          {/* Big VS in the middle (desktop) */}
          <div className="hidden md:flex absolute left-1/2 top-1/2 z-10 items-center justify-center"
               style={{ transform: "translate(-50%, -50%)" }} aria-hidden="true">
            <div className="relative flex items-center justify-center font-display"
                 style={{ width: 88, height: 88, borderRadius: 999,
                          background: "linear-gradient(180deg, #FFFCF5 0%, #F4EDD8 100%)",
                          border: "3px solid #D97757",
                          boxShadow: "0 14px 28px rgba(15,15,15,0.18), 0 0 0 6px rgba(217,119,87,0.10)",
                          color: "#D97757", fontSize: 28, fontWeight: 800, letterSpacing: "-0.02em" }}>
              VS
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
            {/* LEFT CARD */}
            <Reveal className="bg-surface border border-line h-full flex flex-col"
                    style={{ borderRadius: 16, padding: "36px 32px", boxShadow: "0 6px 18px rgba(15,15,15,0.04)" }}>
              <div className="flex items-center gap-2">
                <Icon name="BookCopy" size={20} color="#B85648" />
                <div className="font-ui" style={{ fontSize: 11, letterSpacing: "0.22em", fontWeight: 600, color: "#B85648" }}>
                  THE LONG WAY · 16 BOOKS
                </div>
              </div>
              <p className="font-body text-muted mt-5" style={{ fontSize: 13.5, lineHeight: 1.75 }}>
                Siegel · Boyce · Kurcinka · Weissbluth · Mindell · McKenna · Eliot · Medina · Karen · Hoffman · Turecki · Brazelton · Kuhl · Bowlby · Tronick · Field
              </p>
              <div className="flex items-center justify-between mt-5" style={{ borderTop: "1px dashed #E8DFCC", paddingTop: 16 }}>
                <span className="font-body text-muted" style={{ fontSize: 13 }}>16 × ≈20 hours read time</span>
                <span className="font-body text-muted" style={{ fontSize: 13 }}>~$21 each</span>
              </div>
              <div className="mt-4 flex items-baseline gap-3">
                <span className="font-display"
                      style={{ fontSize: "clamp(36px, 9vw, 96px)", fontWeight: 800, lineHeight: 1, letterSpacing: "-0.03em", color: "#B85648" }}>
                  $340+
                </span>
                <span className="font-ui" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "#6B655B" }}>total</span>
              </div>
              <div className="font-body text-muted mt-2" style={{ fontSize: 13.5 }}>Plus the time to sift through them.</div>
            </Reveal>

            {/* RIGHT CARD */}
            <Reveal delay={150} className="h-full flex flex-col relative paper-grain"
                    style={{ borderRadius: 16, padding: "36px 32px", background: "#2C3A24",
                             boxShadow: "0 22px 44px rgba(15,15,15,0.22), 0 0 0 2px rgba(200,162,74,0.30)" }}>
              <div className="absolute" style={{ top: -14, right: -14, transform: "rotate(10deg)" }}>
                <span className="save-stamp" style={{ fontSize: 13, padding: "6px 12px" }}>SMARTER</span>
              </div>
              <div className="flex items-center gap-2">
                <Icon name="Sparkles" size={20} color="#E8A92C" />
                <div className="font-ui" style={{ fontSize: 11, letterSpacing: "0.22em", fontWeight: 600, color: "#E8A92C" }}>
                  THE SHORTCUT · ONE BOOK
                </div>
              </div>
              <p className="font-body mt-5" style={{ fontSize: 14, lineHeight: 1.7, color: "rgba(250,246,238,0.85)" }}>
                <strong style={{ color: "#FAF6EE" }}>The full curated list included</strong> — plus a synthesis of all of it,
                applied to your baby. 108 pages. 12 chapters. 30+ studies cited.
              </p>
              <div className="flex items-center justify-between mt-5" style={{ borderTop: "1px dashed rgba(200,162,74,0.40)", paddingTop: 16 }}>
                <span className="font-body" style={{ fontSize: 13, color: "rgba(250,246,238,0.7)" }}>108 pages · ≈4 hours read</span>
                <span className="font-body" style={{ fontSize: 13, color: "rgba(250,246,238,0.7)" }}>Launch only</span>
              </div>
              <div className="mt-4 flex items-baseline gap-3">
                <span className="font-display"
                      style={{ fontSize: "clamp(36px, 9vw, 96px)", fontWeight: 800, lineHeight: 1, letterSpacing: "-0.03em", color: "#E8A92C" }}>
                  $23.95
                </span>
                <span className="font-ui" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(232,169,44,0.85)" }}>today</span>
              </div>
              <div className="font-body mt-2" style={{ fontSize: 13.5, color: "rgba(250,246,238,0.7)" }}>Goes to $39 after first 1,000 copies.</div>
            </Reveal>
          </div>

          {/* Mobile VS divider */}
          <div className="flex md:hidden items-center justify-center my-2 gap-3">
            <span className="h-px flex-1" style={{ background: "#E8DFCC" }} />
            <span className="font-display" style={{ fontSize: 18, fontWeight: 800, color: "#D97757", letterSpacing: "0.04em" }}>VS</span>
            <span className="h-px flex-1" style={{ background: "#E8DFCC" }} />
          </div>

          <Reveal delay={260} className="mt-6 text-center">
            <p className="font-body text-muted mx-auto" style={{ fontSize: 14, maxWidth: 480, lineHeight: 1.5 }}>
              That's less than <strong className="text-ink">$0.07 per day</strong> for the first year — less than a single coffee.
            </p>
          </Reveal>

          <Reveal delay={250} className="mt-6 text-center">
            <div className="inline-flex flex-col sm:flex-row items-center justify-center gap-3 px-6 py-5 rounded-2xl"
                 style={{ background: "#FFFCF5", border: "2px dashed #D97757",
                          boxShadow: "0 12px 32px rgba(217,119,87,0.18)" }}>
              <Icon name="TrendingDown" size={28} color="#D97757" stroke={2} />
              <span className="font-display text-center"
                    style={{ fontSize: "clamp(24px, 3.5vw, 36px)", fontWeight: 800,
                             color: "#0F0F0F", letterSpacing: "-0.02em", lineHeight: 1.1 }}>
                You save <span style={{ color: "#D97757" }}>$320+</span>
              </span>
              <span className="font-hand"
                    style={{ fontSize: "clamp(18px, 2vw, 24px)", color: "#A8851F",
                             fontStyle: "italic", whiteSpace: "nowrap" }}>
                and ~316 hours of reading
              </span>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ===== Comparison Table ===== */
function ComparisonTable() {
  const rows = [
    ["One method for every baby", "Frameworks that adapt to your baby"],
    ["Tells you what to do", "Tells you why it happens — then what to try"],
    ["Recycled tips from blogs", "Real research from Harvard, Kuhl, Tronick, Fernald"],
    ["Promises perfect sleep / behavior", "Promises clarity, not control"],
    ["Makes you doubt yourself", "Trusts your intelligence"],
    ["Outdated by next year", "Built on evidence that doesn't expire"]
  ];
  return (
    <section className="sec" style={{ background: "#F4EDD8" }}>
      <div className="container-x">
        <Reveal className="text-center">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full"
               style={{ background: "rgba(31,107,91,0.12)", border: "1px solid rgba(31,107,91,0.30)" }}>
            <Icon name="GitCompare" size={14} color="#1F6B5B" />
            <span className="font-ui" style={{ fontSize: 12, letterSpacing: "0.22em", fontWeight: 600, color: "#1F6B5B" }}>
              SIDE-BY-SIDE
            </span>
          </div>
        </Reveal>
        <Reveal delay={100} className="text-center">
          <h2 className="font-display text-ink mt-5 mx-auto"
              style={{ fontSize: "clamp(32px, 4.6vw, 50px)", fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.02em", maxWidth: 880 }}>
            <span style={{ color: "#B85648" }}>Generic advice</span>.{" "}
            Then <em className="font-hand" style={{ color: "#1F6B5B", fontStyle: "italic", fontWeight: 600 }}>The Blueprint</em>.
          </h2>
        </Reveal>
        <Reveal delay={200} className="text-center">
          <p className="font-body text-muted mt-3 mx-auto" style={{ fontSize: 16, maxWidth: 620 }}>
            Six honest contrasts. Which column sounds more familiar?
          </p>
        </Reveal>

        <Reveal delay={250} className="mt-12 mx-auto overflow-hidden"
                style={{ borderRadius: 18, maxWidth: 1040, boxShadow: "0 16px 40px rgba(15,15,15,0.10)",
                         background: "#FFFCF5" }}>
          {/* header */}
          <div className="hidden md:grid md:grid-cols-[1fr_auto_1fr]">
            <div className="px-5 md:px-6 py-5 flex items-center gap-2"
                 style={{ background: "linear-gradient(180deg, #FAF6EE, #F4EDD8)" }}>
              <Icon name="XOctagon" size={18} color="#B85648" stroke={1.8} />
              <div className="font-ui" style={{ fontSize: 12, letterSpacing: "0.18em", fontWeight: 600, color: "#B85648" }}>
                GENERIC ADVICE
              </div>
            </div>
            <div className="hidden md:flex items-center justify-center px-3" style={{ background: "linear-gradient(180deg, #FAF6EE, #F4EDD8)" }}>
              <span className="font-display" style={{ fontSize: 14, fontWeight: 700, color: "#6B655B", letterSpacing: "0.18em" }}>VS</span>
            </div>
            <div className="px-5 md:px-6 py-5 flex items-center gap-2"
                 style={{ background: "linear-gradient(180deg, rgba(200,162,74,0.18), rgba(232,169,44,0.18))" }}>
              <Icon name="BadgeCheck" size={18} color="#1F6B5B" stroke={1.8} />
              <div className="font-ui" style={{ fontSize: 12, letterSpacing: "0.18em", fontWeight: 700, color: "#1F6B5B" }}>
                THE BLUEPRINT
              </div>
            </div>
          </div>
          {rows.map(([left, right], i) => (
            <div key={i} className="cmp-row grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] transition"
                 style={{ borderTop: "1px solid #E8DFCC" }}>
              <div className="px-5 md:px-6 py-4 md:py-5" style={{ background: "#FFFCF5" }}>
                <div className="md:hidden flex items-center gap-1.5 font-ui mb-2.5"
                     style={{ fontSize: 10, letterSpacing: "0.18em", fontWeight: 600, color: "#B85648" }}>
                  <Icon name="XOctagon" size={13} color="#B85648" stroke={1.8} />
                  GENERIC ADVICE
                </div>
                <div className="flex items-start gap-3">
                  <span className="shrink-0 inline-flex items-center justify-center"
                        style={{ width: 26, height: 26, borderRadius: 999,
                                 background: "rgba(184,86,72,0.10)", border: "1px solid rgba(184,86,72,0.30)" }}>
                    <Icon name="X" size={14} color="#B85648" stroke={2.2} />
                  </span>
                  <p className="font-body text-muted" style={{ fontSize: 15, lineHeight: 1.5 }}>{left}</p>
                </div>
              </div>
              <div className="hidden md:flex items-center justify-center"
                   style={{ background: "#FFFCF5", borderLeft: "1px solid #E8DFCC", borderRight: "1px solid #E8DFCC", padding: "0 8px" }}>
                <Icon name="ArrowRight" size={18} color="#C8A24A" stroke={2} />
              </div>
              <div className="px-5 md:px-6 py-4 md:py-5 border-t border-line md:border-t-0"
                   style={{ background: i % 2 ? "rgba(200,162,74,0.07)" : "rgba(232,169,44,0.06)" }}>
                <div className="md:hidden flex items-center gap-1.5 font-ui mb-2.5"
                     style={{ fontSize: 10, letterSpacing: "0.18em", fontWeight: 700, color: "#1F6B5B" }}>
                  <Icon name="BadgeCheck" size={13} color="#1F6B5B" stroke={1.8} />
                  THE BLUEPRINT
                </div>
                <div className="flex items-start gap-3">
                  <span className="shrink-0 inline-flex items-center justify-center"
                        style={{ width: 26, height: 26, borderRadius: 999,
                                 background: "rgba(31,107,91,0.12)", border: "1px solid rgba(31,107,91,0.35)" }}>
                    <Icon name="Check" size={14} color="#1F6B5B" stroke={2.4} />
                  </span>
                  <p className="font-body text-ink" style={{ fontSize: 15, lineHeight: 1.5, fontWeight: 600 }}>{right}</p>
                </div>
              </div>
            </div>
          ))}
          <div className="px-6 py-4 flex flex-wrap items-center justify-center gap-2"
               style={{ background: "#0F0F0F", color: "#FAF6EE" }}>
            <span className="font-hand" style={{ fontSize: 19, color: "#E8A92C" }}>verdict:</span>
            <span className="font-display text-center" style={{ fontSize: 16, fontWeight: 700, letterSpacing: "-0.01em" }}>
              one is a guess. The other is a framework.
            </span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ===== Qualify Yourself ===== */
function QualifySection() {
  const forItems = [
    ["BookOpen",     "You're a new, expecting, or current parent (0–36 months)"],
    ["Lightbulb",    "You want to understand WHY — not just be told what to do"],
    ["Frown",        "You're tired of generic advice that doesn't fit your baby"],
    ["FlaskConical", "You value real research over recycled opinions"],
    ["Heart",        "You believe your baby is more than a checklist"]
  ];
  const notForItems = [
    ["ListChecks",   "You want a step-by-step 'do this exactly' prescription"],
    ["Stamp",        "You believe one method works for every baby"],
    ["Zap",          "You're looking for a quick fix or sleep hack"],
    ["Clock",        "You don't have 30 minutes a week to read"]
  ];
  return (
    <section className="sec bg-cream">
      <div className="container-x">
        <Reveal className="text-center">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full"
               style={{ background: "rgba(200,162,74,0.14)", border: "1px solid rgba(200,162,74,0.35)" }}>
            <Icon name="Compass" size={14} color="#A8851F" />
            <span className="font-ui" style={{ fontSize: 12, letterSpacing: "0.22em", fontWeight: 600, color: "#A8851F" }}>
              IS IT FOR YOU?
            </span>
          </div>
        </Reveal>
        <Reveal delay={100} className="text-center">
          <h2 className="font-display text-ink mt-5"
              style={{ fontSize: "clamp(32px, 4.4vw, 48px)", fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.02em" }}>
            Let's be{" "}
            <em className="font-hand" style={{ color: "#1F6B5B", fontStyle: "italic", fontWeight: 600 }}>honest</em>.
          </h2>
        </Reveal>
        <Reveal delay={200} className="text-center">
          <p className="font-body text-muted mt-3 mx-auto" style={{ fontSize: 17, maxWidth: 600 }}>
            This book isn't for everyone. Here's how to know if it's for you.
          </p>
        </Reveal>

        <div className="mt-14 grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
          {/* This IS for you */}
          <Reveal className="h-full relative overflow-hidden"
                  style={{ background: "linear-gradient(180deg, #FFFCF5 0%, #F4EDD8 100%)",
                           border: "1.5px solid rgba(31,107,91,0.40)",
                           borderRadius: 18, padding: "36px 32px",
                           boxShadow: "0 18px 36px rgba(31,107,91,0.10)" }}>
            <div className="absolute pointer-events-none" aria-hidden="true"
                 style={{ top: -40, right: -40, width: 160, height: 160, borderRadius: 999,
                          background: "radial-gradient(closest-side, rgba(31,107,91,0.18), transparent 70%)" }} />
            <div className="flex items-center gap-3">
              <div className="inline-flex items-center justify-center"
                   style={{ width: 44, height: 44, borderRadius: 12,
                            background: "#1F6B5B", color: "#FAF6EE",
                            boxShadow: "0 8px 18px rgba(31,107,91,0.30)" }}>
                <Icon name="Check" size={22} color="#FAF6EE" stroke={2.5} />
              </div>
              <div>
                <div className="font-ui" style={{ fontSize: 11, letterSpacing: "0.22em", fontWeight: 600, color: "#1F6B5B" }}>YES · THIS IS YOU</div>
                <h3 className="font-display text-ink" style={{ fontSize: 26, fontWeight: 800, lineHeight: 1.15, letterSpacing: "-0.01em" }}>
                  Get it if…
                </h3>
              </div>
            </div>
            <ul className="mt-6 space-y-3.5">
              {forItems.map(([icn, t], i) => (
                <li key={i} className="flex items-start gap-3">
                  <span className="shrink-0 inline-flex items-center justify-center"
                        style={{ width: 32, height: 32, borderRadius: 10,
                                 background: "rgba(31,107,91,0.10)", border: "1px solid rgba(31,107,91,0.25)" }}>
                    <Icon name={icn} size={17} color="#1F6B5B" stroke={1.8} />
                  </span>
                  <span className="font-body text-ink pt-1" style={{ fontSize: 15.5, lineHeight: 1.5 }}>{t}</span>
                </li>
              ))}
            </ul>
            <div className="mt-7 pt-5 border-t border-line/60">
              <a href={CHECKOUT_URL}
                 className="cta-primary inline-flex items-center justify-center gap-2 no-underline w-full"
                 style={{ height: 52, fontSize: 15, fontWeight: 700 }}>
                <span className="flex items-center gap-2">
                  Start understanding my baby
                  <Icon name="ArrowRight" size={16} color="#FFFCF5" />
                </span>
              </a>
            </div>
          </Reveal>

          {/* This isn't for you */}
          <Reveal delay={150} className="bg-surface h-full relative overflow-hidden"
                  style={{ border: "1.5px solid #E8DFCC", borderRadius: 18, padding: "36px 32px" }}>
            <div className="absolute pointer-events-none" aria-hidden="true"
                 style={{ top: -40, right: -40, width: 160, height: 160, borderRadius: 999,
                          background: "radial-gradient(closest-side, rgba(184,86,72,0.12), transparent 70%)" }} />
            <div className="flex items-center gap-3">
              <div className="inline-flex items-center justify-center"
                   style={{ width: 44, height: 44, borderRadius: 12,
                            background: "#FAF6EE", color: "#B85648",
                            border: "1.5px solid rgba(184,86,72,0.45)" }}>
                <Icon name="X" size={22} color="#B85648" stroke={2.5} />
              </div>
              <div>
                <div className="font-ui" style={{ fontSize: 11, letterSpacing: "0.22em", fontWeight: 600, color: "#B85648" }}>NOT FOR EVERYONE</div>
                <h3 className="font-display text-ink" style={{ fontSize: 26, fontWeight: 800, lineHeight: 1.15, letterSpacing: "-0.01em" }}>
                  Skip it if…
                </h3>
              </div>
            </div>
            <ul className="mt-6 space-y-3.5">
              {notForItems.map(([icn, t], i) => (
                <li key={i} className="flex items-start gap-3">
                  <span className="shrink-0 inline-flex items-center justify-center"
                        style={{ width: 32, height: 32, borderRadius: 10,
                                 background: "rgba(184,86,72,0.08)", border: "1px solid rgba(184,86,72,0.20)" }}>
                    <Icon name={icn} size={17} color="#B85648" stroke={1.8} />
                  </span>
                  <span className="font-body text-muted pt-1" style={{ fontSize: 15.5, lineHeight: 1.5 }}>{t}</span>
                </li>
              ))}
            </ul>
            <div className="mt-7 pt-5 border-t border-line/60">
              <span className="font-hand text-muted" style={{ fontSize: 17, fontStyle: "italic" }}>
                no hard feelings — we'll be here when you're ready.
              </span>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ===== Testimonials ===== */
const VIDEO_TESTIMONIALS = [
  ["Mei",    "Mom of 4-month-old",  "https://theborntoknow.com/videos/testimonial-01.mp4", "assets/poster-01-mei.jpg"],
  ["Carlos", "Dad of 8-month-old",  "https://theborntoknow.com/videos/testimonial-02.mp4", "assets/poster-02-carlos.jpg"],
  ["Aisha",  "Mom of 11-month-old", "https://theborntoknow.com/videos/testimonial-03.mp4", "assets/poster-03-aisha.jpg"],
  ["Freya",  "Mom of 9-month-old",  "https://theborntoknow.com/videos/testimonial-04.mp4", "assets/poster-04-freya.jpg"]
];

/* A single video testimonial card — plays the real video inline. The STORY
   label, stars, name and age stay visible the whole time (also during playback).
   Tap the card to play / pause. */
function VideoTestimonialCard({ name, age, src, poster, index, tint }) {
  const vref = React.useRef(null);
  const [playing, setPlaying] = React.useState(false);
  const toggle = () => {
    const v = vref.current;
    if (!v) return;
    if (v.paused) { v.play().catch(() => {}); setPlaying(true); }
    else { v.pause(); setPlaying(false); }
  };
  return (
    <Reveal delay={index * 80}
            className="relative overflow-hidden card-hov"
            style={{ borderRadius: 14, aspectRatio: "9/16",
                     background: `linear-gradient(180deg, ${tint.tl} 0%, ${tint.br} 100%)`,
                     boxShadow: "0 12px 28px rgba(15,15,15,0.16)" }}>
      {/* Thumbnail (before play) */}
      <img src={poster} alt={`${name}, ${age}`} loading="lazy" draggable="false"
           style={{ position: "absolute", inset: 0, width: "100%", height: "100%",
                    objectFit: "cover", zIndex: 1,
                    opacity: playing ? 0 : 1, transition: "opacity 240ms ease" }} />

      {/* Real video — fetched only on play */}
      <video ref={vref} src={src} poster={poster}
             preload="none" playsInline
             onEnded={() => setPlaying(false)} onPause={() => setPlaying(false)}
             style={{ position: "absolute", inset: 0, width: "100%", height: "100%",
                      objectFit: "cover", background: "transparent", zIndex: 2,
                      opacity: playing ? 1 : 0, transition: "opacity 240ms ease",
                      pointerEvents: "none" }} />

      {/* Tap layer toggles play / pause */}
      <button aria-label={playing ? "Pause video" : "Play video"} onClick={toggle}
              className="absolute inset-0 cursor-pointer"
              style={{ zIndex: 5, background: "transparent", border: "none", padding: 0 }} />

      {/* STORY ribbon — always visible */}
      <div className="absolute font-ui"
           style={{ top: 10, left: 10, padding: "3px 8px", borderRadius: 999,
                    background: tint.ribbon, color: "#FFFCF5", zIndex: 6, pointerEvents: "none",
                    fontSize: 9, letterSpacing: "0.2em", fontWeight: 600 }}>
        STORY {String(index + 1).padStart(2, "0")}
      </div>

      {/* Center play button — only when paused */}
      {!playing && (
      <div className="absolute left-1/2 top-1/2 flex items-center justify-center play-glow"
           style={{ width: 64, height: 64, borderRadius: 999, background: "#C8A24A",
                    transform: "translate(-50%, -50%)", zIndex: 6, pointerEvents: "none",
                    boxShadow: "0 10px 22px rgba(15,15,15,0.24)" }}>
        <Icon name="Play" size={22} color="#FFFCF5" stroke={2} style={{ marginLeft: 3 }} />
      </div>
      )}

      {/* Stars + name + age — always visible, also during playback */}
      <div className="absolute inset-x-0 bottom-0 video-scrim px-3 pb-3 pt-9 flex flex-col gap-1"
           style={{ zIndex: 6, pointerEvents: "none" }}>
        <div className="flex star-y">
          {[0,1,2,3,4].map(s => (
            <Icon key={s} name="Star" size={11} color="#F5C518" stroke={0} />
          ))}
        </div>
        <p className="font-body" style={{ color: "#FAF6EE", fontSize: 14, lineHeight: 1.15, fontWeight: 700 }}>
          {name}
        </p>
        <p className="font-body italic" style={{ color: "rgba(250,246,238,0.85)", fontSize: 11.5, lineHeight: 1.15 }}>
          {age}
        </p>
      </div>
    </Reveal>
  );
}

/* accent tints so the 4 cards have visual rhythm */
const TESTIMONIAL_TINTS = [
  { tl: "#FAF6EE", br: "#2C3A24", ribbon: "#D97757" },
  { tl: "#F4EDD8", br: "#1A2418", ribbon: "#1F6B5B" },
  { tl: "#FFFCF5", br: "#2C3A24", ribbon: "#C8A24A" },
  { tl: "#F4EDD8", br: "#1F2A19", ribbon: "#E8A92C" }
];

/* Polaroid rotations for the 8 Facebook comments — alternating tilt for organic feel */
const FB_COMMENT_ROTATIONS = [-3, 2, -2, 3, -2, 3, -3, 2];
const FB_COMMENTS = Array.from({ length: 8 }, (_, i) => ({
  src: `assets/facebook-comment-${String(i + 1).padStart(2, "0")}.png`,
  rot: FB_COMMENT_ROTATIONS[i]
}));

function TestimonialsSection() {
  return (
    <section className="sec" id="reviews" style={{ background: "#F4EDD8" }}>
      <div className="container-x">
        <Reveal className="text-center">
          <div className="font-ui text-gold-h" style={{ fontSize: 13, letterSpacing: "0.2em", fontWeight: 500 }}>
            REVIEWS
          </div>
        </Reveal>
        <Reveal delay={100} className="text-center">
          <h2 className="font-display text-ink mx-auto mt-5"
              style={{ fontSize: "clamp(34px, 4.6vw, 50px)", fontWeight: 800, lineHeight: 1.1,
                       letterSpacing: "-0.02em", maxWidth: 940 }}>
            What <span style={{ color: "#D97757" }}>1,743</span> parents are saying{" "}
            <span className="font-hand" style={{ color: "#0F0F0F", fontStyle: "italic", fontWeight: 600 }}>— in their own words</span>.
          </h2>
        </Reveal>
        <Reveal delay={200} className="text-center">
          <p className="font-body text-muted mx-auto mt-4" style={{ fontSize: 17, maxWidth: 620, lineHeight: 1.6 }}>
            Over 1,743 parents finally feel like they're <em>reading</em> their baby. Here's what they're saying.
          </p>
        </Reveal>

        {/* VIDEO */}
        <Reveal delay={200} className="text-center mt-14">
          <div className="font-ui text-gold-h" style={{ fontSize: 13, letterSpacing: "0.2em", fontWeight: 500 }}>
            VIDEO STORIES
          </div>
        </Reveal>
        <div className="mt-8 grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-5">
          {VIDEO_TESTIMONIALS.map(([name, age, src, poster], i) => (
            <VideoTestimonialCard key={name} name={name} age={age} src={src} poster={poster}
                                  index={i} tint={TESTIMONIAL_TINTS[i % TESTIMONIAL_TINTS.length]} />
          ))}
        </div>

        {/* FACEBOOK COMMENTS — polaroid grid */}
        <Reveal delay={200} className="text-center mt-16">
          <div className="font-ui text-gold-h" style={{ fontSize: 13, letterSpacing: "0.2em", fontWeight: 500 }}>
            FROM THE FACEBOOK GROUP
          </div>
        </Reveal>
        <Reveal delay={250} className="text-center">
          <h3 className="font-display text-ink mt-4 mx-auto"
              style={{ fontSize: "clamp(24px, 3vw, 32px)", fontWeight: 700, lineHeight: 1.2,
                       letterSpacing: "-0.01em", maxWidth: 760 }}>
            What parents are saying — <em className="font-hand" style={{ color: "#A8851F", fontStyle: "italic", fontWeight: 500 }}>unfiltered</em>.
          </h3>
        </Reveal>

        <div className="fb-polaroid-grid mt-12">
          {FB_COMMENTS.map((c, i) => (
            <Reveal key={i} delay={(i % 2) * 80} className="fb-polaroid-slot">
              <div className="fb-polaroid" style={{ "--rot": `${c.rot}deg` }}>
                {/* Washi tape */}
                <span aria-hidden="true" className="fb-polaroid-tape" />
                <img src={c.src} alt={`Parent Facebook comment ${i + 1}`}
                     draggable="false"
                     loading="lazy" />
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ValueAnchor, ComparisonTable, QualifySection, TestimonialsSection });