/* sections-b.jsx — Chapters Grid, Flipbook, Research Wall, Transformation */

const CHAPTERS = [
  ["01", "Brain", "Already Wired", "What happened before you even met your baby. Prenatal nervous system, stress response, sensory wiring.", "06"],
  ["02", "Clock", "The First 30 Days", "Day-by-day what's happening in that little brain — vision, voice, reflexes, sleep, learning.", "14"],
  ["03", "Sparkles", "Who Is This Baby?", "Temperament, sensitivity, intensity. Why your baby is who they are.", "22"],
  ["04", "Heart", "The Borrowed Calm", "Co-regulation — how your nervous system helps theirs settle.", "31"],
  ["05", "Users", "The Connection Code", "Attachment, bonding, and the science behind 'clingy' babies.", "39"],
  ["06", "MessageCircle", "The Cry Decoder", "Six cry types. Body signals. First responses. Without guesswork.", "49"],
  ["07", "Eye", "The Sensory World", "Vision, hearing, touch, smell, taste, vestibular — what your baby actually experiences.", "57"],
  ["08", "Heart", "The Emotional Brain", "How baby emotions actually develop — and what they need to grow.", "65"],
  ["09", "Moon", "The Sleep Truth", "The science of sleep — myths busted, environment optimized, age-based reality.", "74"],
  ["10", "MessageSquare", "The 36-Month Language Window", "Kuhl's linguistic geniuses — and the daily habits that build the language brain.", "83"],
  ["11", "BookOpen", "The Reading List", "16 curated parenting books — by topic, publisher, year, and why each matters.", "91"],
  ["12", "Sparkles", "The Developmental Product Guide", "Age-by-age toy and tool picks (0–18 months) — what supports development, what doesn't.", "97"]
];

function ChaptersGrid() {
  return (
    <section className="sec bg-cream" id="chapters">
      <div className="container-x">
        <Reveal className="text-center">
          <div className="font-ui text-gold-h" style={{ fontSize: 13, letterSpacing: "0.2em", fontWeight: 500 }}>
            TABLE OF CONTENTS
          </div>
        </Reveal>
        <Reveal delay={100} className="text-center">
          <h2 className="font-display text-ink mx-auto mt-5"
              style={{ fontSize: "clamp(34px, 4.5vw, 48px)", fontWeight: 800,
                       maxWidth: 820, lineHeight: 1.1, letterSpacing: "-0.02em" }}>
            12 chapters. 108 pages. From prenatal to 36 months.
          </h2>
        </Reveal>
        <Reveal delay={200} className="text-center">
          <p className="font-body text-muted mt-4" style={{ fontSize: 17 }}>
            Every developmental window covered. Every behavior decoded.
          </p>
        </Reveal>

        <div className="mt-14 grid grid-cols-2 lg:grid-cols-4 gap-5 md:gap-6">
          {CHAPTERS.map(([num, icon, title, teaser, page], i) => (
            <Reveal key={num} delay={(i % 4) * 80}
                    className="card-hov bg-surface border border-line h-full flex flex-col"
                    style={{ borderRadius: 14, padding: 22, boxShadow: "0 4px 14px rgba(15,15,15,0.04)" }}>
              <div className="flex items-start justify-between">
                <span className="font-display text-gold-h"
                      style={{ fontSize: 34, fontWeight: 700, lineHeight: 1, letterSpacing: "-0.02em" }}>{num}</span>
                <Icon name={icon} size={24} color="#C8A24A" />
              </div>
              <div className="font-display text-ink mt-4"
                   style={{ fontSize: 19, fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.01em" }}>
                {title}
              </div>
              <p className="font-body text-body mt-2" style={{ fontSize: 13.5, lineHeight: 1.5 }}>
                {teaser}
              </p>
              <div className="mt-auto pt-4">
                <div className="h-px bg-gold/40 mb-3" />
                <div className="font-ui text-muted" style={{ fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase" }}>
                  p.<span className="text-gold-h font-semibold">{page}</span>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={300} className="mt-14 text-center">
          <p className="font-hand text-gold-h" style={{ fontSize: 22 }}>
            preview the first 13 pages below ↓
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* ===== Custom 3D Flipbook (restored) ===== */
function Flipbook({ pages }) {
  const inner = pages || [];
  const total = inner.length + 1; // last slot = green back cover
  const [idx,  setIdx]  = React.useState(0);
  const [flip, setFlip] = React.useState(null);

  const go = (delta) => {
    if (flip) return;
    const from = idx;
    const to   = idx + delta;
    if (to < 0 || to >= total) return;
    setIdx(to);
    setFlip({ from, to, dir: delta });
    window.setTimeout(() => setFlip(null), 950);
  };

  const renderPage = (n) => {
    // Green "end of preview" back cover
    if (n === total - 1) {
      return (
        <div className="h-full w-full flex flex-col items-center justify-center text-center paper-grain"
             style={{ background: "linear-gradient(165deg, #2C3A24 0%, #1A2418 100%)",
                      padding: "clamp(28px, 5vw, 52px)", position: "relative", overflow: "hidden" }}>
          <div className="absolute pointer-events-none"
               style={{ inset: 0, background: "radial-gradient(ellipse at 60% 40%, rgba(200,162,74,0.14) 0%, transparent 60%)" }} />
          <img src="assets/logo-mark.png" alt=""
               style={{ width: 52, height: 52, opacity: 0.9,
                        filter: "drop-shadow(0 6px 14px rgba(200,162,74,0.30))", position: "relative" }} />
          <h3 className="font-display mt-5"
              style={{ fontSize: "clamp(20px, 3vw, 28px)", fontWeight: 700, color: "#FAF6EE",
                       lineHeight: 1.18, letterSpacing: "-0.01em", maxWidth: 300, position: "relative" }}>
            Want to keep reading?
          </h3>
          <p className="font-body mt-3"
             style={{ color: "rgba(250,246,238,0.75)", fontSize: 13.5, lineHeight: 1.6,
                      maxWidth: 280, position: "relative" }}>
            108 pages · 12 chapters · 30+ studies. From prenatal through 36 months.
          </p>
          <div className="mt-4 flex items-baseline gap-2" style={{ position: "relative" }}>
            <span className="font-display"
                  style={{ fontSize: 15, color: "#B85648", textDecoration: "line-through",
                           textDecorationColor: "rgba(184,86,72,0.7)" }}>$39</span>
            <span className="font-display"
                  style={{ fontSize: 28, fontWeight: 800, color: "#E8A92C",
                           lineHeight: 1, letterSpacing: "-0.02em" }}>$23.95</span>
          </div>
          <a href={CHECKOUT_URL}
             className="cta-gold inline-flex items-center justify-center gap-2 no-underline mt-5"
             style={{ height: 48, fontSize: 14, padding: "0 24px", fontWeight: 700, position: "relative" }}>
            <span className="flex items-center gap-2">
              Get The Baby Blueprint
              <Icon name="ArrowRight" size={15} color="#0F0F0F" />
            </span>
          </a>
          <div className="font-hand mt-3"
               style={{ fontSize: 13, color: "rgba(232,169,44,0.75)", fontStyle: "italic", position: "relative" }}>
            launch price · ends at 1,000 copies
          </div>
          <div className="absolute font-ui"
               style={{ bottom: 14, color: "rgba(250,246,238,0.35)", fontSize: 9.5, letterSpacing: "0.22em" }}>
            END OF PREVIEW
          </div>
        </div>
      );
    }
    // Regular page — actual PDF image
    if (inner[n]) {
      return (
        <img src={inner[n]} alt={`Page ${n + 1}`} className="w-full h-full"
             style={{ objectFit: "fill", display: "block", background: "#FAF6EE" }}
             draggable="false" loading="lazy" />
      );
    }
    return <div className="h-full w-full" style={{ background: "#FAF6EE" }} />;
  };

  const flipping  = !!flip;
  const dir       = flip ? flip.dir  : 0;
  const fromPage  = flip ? flip.from : 0;
  const toPage    = flip ? flip.to   : 0;
  const isFirst   = idx === 0;
  const isLast    = idx === total - 1;

  return (
    <div className="mx-auto" style={{ maxWidth: 720 }}>
      {/* Book */}
      <div className="relative mx-auto book-3d"
           style={{ width: "100%", maxWidth: 720, aspectRatio: "1100 / 1556" }}>
        <div className="absolute inset-0 book-shell">
          <div className="relative w-full h-full" style={{ transformStyle: "preserve-3d" }}>
            {/* Static destination page */}
            <div className="page-static">
              {renderPage(idx)}
            </div>
            {/* Flipper overlay during animation */}
            {flipping && (
              <div key={`flip-${fromPage}-${toPage}-${dir}`}
                   className={`page-flipper ${dir > 0 ? "flip-fwd" : "flip-bwd"} lift-shadow`}>
                <div className="page-face">
                  {renderPage(fromPage)}
                  <div className={`absolute inset-0 pointer-events-none ${dir > 0 ? "glare-fwd" : "glare-bwd"}`}
                       style={{ background: dir > 0
                         ? "linear-gradient(90deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 35%,rgba(0,0,0,.18) 100%)"
                         : "linear-gradient(90deg,rgba(0,0,0,.18) 0%,rgba(255,255,255,0) 65%,rgba(255,255,255,.55) 100%)",
                         backgroundSize: "200% 100%" }} />
                </div>
                <div className="page-face back">
                  {renderPage(toPage)}
                  <div className={`absolute inset-0 pointer-events-none ${dir > 0 ? "glare-bwd" : "glare-fwd"}`}
                       style={{ background: dir > 0
                         ? "linear-gradient(90deg,rgba(0,0,0,.18) 0%,rgba(255,255,255,0) 65%,rgba(255,255,255,.45) 100%)"
                         : "linear-gradient(90deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 35%,rgba(0,0,0,.18) 100%)",
                         backgroundSize: "200% 100%" }} />
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Navigation */}
      <div className="flex items-center justify-between gap-4 mt-6 px-2">
        <button onClick={() => go(-1)} disabled={isFirst} aria-label="Previous page"
          style={{ width:44, height:44, borderRadius:'50%', border:'1.5px solid #E8DFCC',
                   background: isFirst ? 'transparent' : '#FFFCF5',
                   cursor: isFirst ? 'default' : 'pointer',
                   opacity: isFirst ? 0.35 : 1,
                   display:'flex', alignItems:'center', justifyContent:'center',
                   transition:'all 200ms ease', boxShadow: isFirst ? 'none' : '0 2px 8px rgba(15,15,15,0.08)' }}>
          <Icon name="ChevronLeft" size={20} color="#3D3A33" />
        </button>

        <div className="font-ui text-center" style={{ fontSize:13, color:'#6B655B', letterSpacing:'0.04em' }}>
          Page {idx + 1} of {total}
        </div>

        <button onClick={() => go(1)} disabled={isLast} aria-label="Next page"
          style={{ width:44, height:44, borderRadius:'50%', border:'1.5px solid #E8DFCC',
                   background: isLast ? 'transparent' : '#FFFCF5',
                   cursor: isLast ? 'default' : 'pointer',
                   opacity: isLast ? 0.35 : 1,
                   display:'flex', alignItems:'center', justifyContent:'center',
                   transition:'all 200ms ease', boxShadow: isLast ? 'none' : '0 2px 8px rgba(15,15,15,0.08)' }}>
          <Icon name="ChevronRight" size={20} color="#3D3A33" />
        </button>
      </div>
    </div>
  );
}

function FlipbookSection() {
  return (
    <section className="sec" id="preview" 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 }}>
            PREVIEW
          </div>
        </Reveal>
        <Reveal delay={100} className="text-center">
          <h2 className="font-display text-ink mt-5"
              style={{ fontSize: "clamp(36px, 5vw, 52px)", fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.02em" }}>
            Take a look inside.
          </h2>
        </Reveal>
        <Reveal delay={200} className="text-center">
          <p className="font-body text-muted mt-3" style={{ fontSize: 17 }}>
            The first 13 pages — yours to read before you buy.
          </p>
        </Reveal>

        <div className="mt-14">
          <Reveal>
            <Flipbook pages={Array.from({length: 13}, (_, i) =>
              `assets/flipbook-${String(i+1).padStart(2,'0')}.png`)} />
          </Reveal>
        </div>

        <Reveal delay={200} className="text-center mt-12">
          <p className="font-hand text-gold-h" style={{ fontSize: 22 }}>
            want to keep reading? ↓
          </p>
          <a href={CHECKOUT_URL}
             className="cta-primary inline-flex items-center justify-center gap-2 no-underline mt-4 px-8"
             style={{ height: 56, fontSize: 17, minWidth: "min(320px, 100%)", maxWidth: "100%", textAlign: "center" }}>
            <span className="flex items-center gap-2">
              Start understanding my baby
              <Icon name="ArrowRight" size={18} color="#FFFCF5" />
            </span>
          </a>
        </Reveal>
      </div>
    </section>
  );
}


/* ===== Research Wall ===== */
function ResearchWall() {
  const items = [
    ["Harvard Center on the Developing Child", "Brain development & neural connections — over 1 million per second in early life."],
    ["Edward Tronick", "Mutual regulation theory — how caregiver responses shape infant emotional states."],
    ["Patricia Kuhl", "Language acquisition — the 'linguistic genius' window of 0–36 months."],
    ["Anne Fernald", "Infant-directed speech — how parentese accelerates language processing."],
    ["Vivette Glover", "Prenatal stress research — fetal HPA axis development."],
    ["Mary Ainsworth", "Attachment theory — secure base behavior and bonding patterns."]
  ];
  return (
    <section className="sec bg-cream">
      <div className="container-x">
        <Reveal className="text-center">
          <div className="font-ui text-gold-h" style={{ fontSize: 13, letterSpacing: "0.2em", fontWeight: 500 }}>
            EVIDENCE
          </div>
        </Reveal>
        <Reveal delay={100} className="text-center">
          <h2 className="font-display text-ink mt-5"
              style={{ fontSize: "clamp(34px, 4.4vw, 48px)", fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.02em" }}>
            Not opinions. Not trends. <MarkerUnderline>Real research</MarkerUnderline>.
          </h2>
        </Reveal>
        <Reveal delay={150} className="text-center">
          <p className="font-body text-muted mx-auto mt-4"
             style={{ fontSize: 16, maxWidth: 600, lineHeight: 1.6 }}>
            What you just read in those pages is built on 30+ peer-reviewed studies. Here's who's behind it.
          </p>
        </Reveal>

        <div className="mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
          {items.map(([name, desc], i) => (
            <Reveal key={name} delay={(i % 3) * 100}
                    className="research-card bg-surface group"
                    style={{ padding: 24, transition: "box-shadow 220ms ease, transform 220ms ease" }}>
              <div className="font-display text-ink group-hover:text-gold-h transition-colors"
                   style={{ fontSize: 19, fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.01em",
                            transition: "color 220ms ease" }}>
                {name}
              </div>
              <p className="font-body text-body mt-3" style={{ fontSize: 14, lineHeight: 1.6 }}>
                {desc}
              </p>
            </Reveal>
          ))}
        </div>

        <Reveal delay={200} className="mt-10 text-center font-body text-muted mx-auto"
                style={{ fontSize: 16, maxWidth: 720, lineHeight: 1.6 }}>
          Plus Hart & Risley, Hirsh-Pasek, Wolff, Boyce, McKenna, Siegel, Eliot, Weissbluth — all properly cited in APA-7 format.
        </Reveal>


      </div>
    </section>
  );
}

/* ===== Transformation ===== */
function Transformation() {
  const items = [
    ["MessageCircle", "Read your baby's cry within 30 seconds using sound, body, and timing.", "#1F6B5B"],
    ["Eye",           "Recognize overstimulation before it tips into meltdown.", "#D97757"],
    ["Moon",          "Understand why your baby sleeps the way they sleep — and what actually helps.", "#A8851F"],
    ["Sparkles",      "Decode temperament differences without labels like 'easy' or 'difficult'.", "#C8A24A"],
    ["MessageSquare", "Build language skills daily without flashcards or expensive programs.", "#1F6B5B"],
    ["Heart",         "Respond to clinginess as a signal, not a problem to fix.", "#D97757"],
    ["Hand",          "Know which sensory inputs help your baby and which overwhelm them.", "#A8851F"],
    ["BarChart3",     "Stop comparing your baby to milestone charts that weren't built for them.", "#1F6B5B"]
  ];
  return (
    <section className="sec relative overflow-hidden" style={{ background: "#F4EDD8" }}>
      <div className="absolute pointer-events-none" aria-hidden="true"
           style={{ top: "10%", right: "-10%", width: "40%", height: "60%",
                    background: "radial-gradient(closest-side, rgba(200,162,74,0.18), 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(31,107,91,0.12)", border: "1px solid rgba(31,107,91,0.30)" }}>
            <Icon name="Target" size={14} color="#1F6B5B" />
            <span className="font-ui" style={{ fontSize: 12, letterSpacing: "0.22em", fontWeight: 600, color: "#1F6B5B" }}>
              WHAT YOU'LL WALK AWAY WITH
            </span>
          </div>
        </Reveal>
        <Reveal delay={100} className="text-center">
          <h2 className="font-display text-ink mx-auto mt-5"
              style={{ fontSize: "clamp(32px, 4.6vw, 52px)", fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.02em", maxWidth: 940 }}>
            After The Baby Blueprint, you'll be able to{" "}
            <em className="font-hand" style={{ color: "#D97757", fontStyle: "italic", fontWeight: 600, display: "inline-block", marginLeft: "0.16em", marginRight: "0.5em", verticalAlign: "-0.02em" }}>actually read</em>your baby.
          </h2>
        </Reveal>
        <Reveal delay={200} className="text-center">
          <p className="font-body text-muted mx-auto mt-3" style={{ fontSize: 16, maxWidth: 640, lineHeight: 1.6 }}>
            Eight concrete shifts. By page 30, the panic starts to settle. By page 60, you have a system.
          </p>
        </Reveal>

        <div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-5 max-w-5xl mx-auto">
          {items.map(([icn, t, color], i) => (
            <Reveal key={i} delay={(i % 2) * 80}
                    className="card-hov bg-surface border border-line flex items-start gap-4"
                    style={{ borderRadius: 14, padding: "20px 22px",
                             boxShadow: "0 6px 14px rgba(15,15,15,0.04)" }}>
              <div className="shrink-0 inline-flex items-center justify-center"
                   style={{ width: 36, height: 36, borderRadius: 10,
                            background: `${color}1A`, border: `1px solid ${color}50` }}>
                <Icon name="Check" size={18} color={color} stroke={2.5} />
              </div>
              <div className="flex-1">
                <p className="font-body text-ink" style={{ fontSize: 15.5, lineHeight: 1.5, fontWeight: 500 }}>{t}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ChaptersGrid, FlipbookSection, ResearchWall, Transformation });