/* sections-a.jsx — Big Stat Hook, Pain Agitation, Founder Story, Solution Intro */

/* ===== Big Stat Hook ===== */
function BigStatHook() {
  return (
    <section className="sec bg-cream">
      <div className="container-x text-center">
        <Reveal>
          <div className="font-ui text-gold-h" style={{ fontSize: 13, letterSpacing: "0.2em", fontWeight: 500 }}>
            THE SCIENCE
          </div>
        </Reveal>
        <Reveal delay={100}>
          <div className="font-display text-gold mt-6"
               style={{ fontSize: "clamp(52px, 13vw, 144px)", fontWeight: 800,
                        lineHeight: 0.95, letterSpacing: "-0.03em" }}>
            <CountUp to={1000000} duration={2000} />
          </div>
        </Reveal>
        <Reveal delay={200}>
          <p className="font-display italic text-ink mt-4"
             style={{ fontSize: "clamp(26px, 3.4vw, 38px)", fontWeight: 500, lineHeight: 1.15 }}>
            neural connections form every second
          </p>
        </Reveal>
        <Reveal delay={300}>
          <p className="font-display text-ink mt-2"
             style={{ fontSize: "clamp(22px, 2.8vw, 32px)", fontWeight: 700, lineHeight: 1.15 }}>
            in your baby's brain.
          </p>
        </Reveal>
        <Reveal delay={400}>
          <p className="font-body text-muted mx-auto mt-8"
             style={{ fontSize: 17, maxWidth: 640, lineHeight: 1.6 }}>
            Most parents have no idea what's happening inside. The Baby Blueprint changes that —
            chapter by chapter, day by day.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* ===== Pain Agitation — "if you've ever felt this" ===== */
function PainAgitation() {
  const cards = [
    ["Moon",          "3am",          "#1F6B5B",
     "It's 3am. Your baby won't stop crying. You've tried everything.",
     "Chapter 6", "The Cry Decoder", 0],
    ["MessageCircle", "Overwhelmed",  "#D97757",
     "Everyone has advice. None of it works for your baby.",
     "Chapter 3", "Who Is This Baby?", 48],
    ["Brain",         "The doubt",    "#A8851F",
     "You wonder if your baby is 'normal' — or if you should be worried.",
     "Chapter 1", "Already Wired", 0],
    ["Eye",           "The meltdown", "#1F6B5B",
     "Your baby seems overwhelmed and you don't know why.",
     "Chapter 7", "The Sensory World", 64],
    ["Heart",         "The label",    "#D97757",
     "Your baby is 'clingy' or 'too sensitive' according to everyone.",
     "Chapter 4", "The Borrowed Calm", 16],
    ["Sparkles",      "The guessing", "#C8A24A",
     "You're tired of guessing what your baby needs.",
     "Every chapter", "of The Blueprint", 32]
  ];

  return (
    <section className="sec relative overflow-hidden" style={{ background: "#F4EDD8" }}>
      {/* warm ambient glow */}
      <div className="absolute pointer-events-none" aria-hidden="true"
           style={{ top: "-10%", right: "-15%", width: "55%", height: "70%",
                    background: "radial-gradient(closest-side, rgba(217,119,87,0.10), transparent 70%)" }} />
      <div className="absolute pointer-events-none" aria-hidden="true"
           style={{ bottom: "-15%", left: "-12%", width: "45%", height: "60%",
                    background: "radial-gradient(closest-side, rgba(31,107,91,0.08), transparent 70%)" }} />

      <div className="container-x relative">
        {/* Eyebrow */}
        <Reveal className="flex items-center justify-center gap-3">
          <span className="h-px w-10" style={{ background: "#C8A24A" }} />
          <span className="font-ui text-gold-h" style={{ fontSize: 13, letterSpacing: "0.24em", fontWeight: 600 }}>
            IF YOU'VE EVER FELT THIS
          </span>
          <span className="h-px w-10" style={{ background: "#C8A24A" }} />
        </Reveal>

        {/* Headline */}
        <Reveal delay={100} className="text-center">
          <h2 className="font-display text-ink mx-auto mt-6"
              style={{ fontSize: "clamp(34px, 5.2vw, 56px)", fontWeight: 800, lineHeight: 1.05,
                       maxWidth: 880, letterSpacing: "-0.02em" }}>
            You're not alone. And you're not<br className="hidden md:block" />{" "}
            doing it <MarkerStrike>wrong</MarkerStrike>.
          </h2>
        </Reveal>

        <Reveal delay={200} className="text-center">
          <p className="font-body text-muted mx-auto mt-5"
             style={{ fontSize: 17, maxWidth: 580, lineHeight: 1.65 }}>
            Six honest moments most parents recognize — and the chapter that decodes each one.
          </p>
        </Reveal>

        {/* "Sound familiar?" hand annotation — arrow points DOWN to the cards below */}
        <Reveal delay={300} className="hidden md:flex items-start justify-center gap-2 mt-6">
          <p className="font-hand text-gold-h" style={{ fontSize: 22, transform: "rotate(-2deg)" }}>
            sound familiar?
          </p>
          <HandArrow direction="down" width={56} height={56} color="#C8A24A"
                     style={{ transform: "translate(0, -8px)", opacity: 0.85 }} />
        </Reveal>

        {/* Cards grid */}
        <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 items-start">
          {cards.map(([icon, tag, color, quote, chLabel, chTitle, offset], i) => (
            <Reveal key={i} delay={i * 100}
                    className="card-hov bg-surface border border-line group relative"
                    style={{ borderRadius: 14, padding: "28px 26px 24px",
                             boxShadow: "0 8px 22px rgba(15,15,15,0.05)",
                             marginTop: offset, position: "relative" }}>
              {/* Accent border (left) */}
              <span aria-hidden="true"
                    style={{ position: "absolute", left: 0, top: 22, bottom: 22, width: 3,
                             background: color, borderRadius: 3, opacity: 0.85 }} />

              {/* Header row — icon + small label */}
              <div className="flex items-center gap-3">
                <span className="inline-flex items-center justify-center"
                      style={{ width: 40, height: 40, borderRadius: 10,
                               background: `${color}18`, border: `1px solid ${color}55` }}>
                  <Icon name={icon} size={20} color={color} stroke={1.8} />
                </span>
                <span className="font-ui" style={{ fontSize: 10.5, letterSpacing: "0.22em", textTransform: "uppercase", fontWeight: 700, color: color }}>
                  {tag}
                </span>
              </div>

              {/* Quote */}
              <p className="font-display text-ink mt-5"
                 style={{ fontSize: 19, fontStyle: "italic", lineHeight: 1.4, fontWeight: 500, letterSpacing: "-0.005em" }}>
                "{quote}"
              </p>

              {/* Chapter pointer */}
              <div className="mt-6 pt-4 border-t border-line/70 flex items-center justify-between gap-3">
                <div className="leading-tight">
                  <div className="font-ui" style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", fontWeight: 600, color: "#6B655B" }}>
                    {chLabel}
                  </div>
                  <div className="font-hand text-gold-h" style={{ fontSize: 17, lineHeight: 1.2, marginTop: 2 }}>
                    {chTitle}
                  </div>
                </div>
                <span className="inline-flex items-center justify-center transition-transform group-hover:translate-x-1"
                      style={{ width: 30, height: 30, borderRadius: 999,
                               background: `${color}18`, border: `1px solid ${color}55`, flexShrink: 0 }}>
                  <Icon name="ArrowRight" size={14} color={color} stroke={2} />
                </span>
              </div>
            </Reveal>
          ))}
        </div>

        {/* Footer reassurance bar */}
        <Reveal delay={500} className="mx-auto mt-16 max-w-3xl">
          <div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-5 text-center"
               style={{ padding: "20px 26px",
                        background: "#FFFCF5",
                        border: "1px dashed #C8A24A",
                        borderRadius: 14,
                        boxShadow: "0 6px 18px rgba(15,15,15,0.05)" }}>
            <span className="inline-flex items-center gap-2">
              <Icon name="Heart" size={18} color="#D97757" stroke={2} style={{ fill: "#D97757" }} />
              <span className="font-display text-ink" style={{ fontSize: 18, fontWeight: 700, letterSpacing: "-0.01em" }}>
                You're not failing.
              </span>
            </span>
            <span className="hidden sm:inline-block" style={{ width: 1, height: 20, background: "#E8DFCC" }} />
            <p className="font-body text-body" style={{ fontSize: 15, lineHeight: 1.5, maxWidth: 420 }}>
              You just don't have the framework yet. <span className="font-hand text-gold-h" style={{ fontSize: 17 }}>— that's what The Blueprint is for.</span>
            </p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ===== Founder Story ===== */
function FounderStory() {
  return (
    <section className="sec bg-cream" id="story">
      <div className="container-x grid lg:grid-cols-[5fr_6fr] gap-12 lg:gap-16 items-start">
        {/* LEFT — polaroid composition */}
        <Reveal className="relative">
          <div className="relative mx-auto" style={{ maxWidth: 380 }}>
            <Polaroid rotation={-3} width="min(360px, 84vw)"
                      caption="Sophie · founder of Born to Know">
              <img src="assets/sophie-portrait.png" alt="Sophie, founder of Born to Know"
                   style={{ width: "100%", height: 400, objectFit: "cover", borderRadius: 4, display: "block" }} />
            </Polaroid>

            {/* "this is me" decorative */}
            <div className="hidden md:flex items-end absolute"
                 style={{ right: -40, top: -30, gap: 4 }}>
              <p className="font-hand text-gold-h" style={{ fontSize: 19, transform: "rotate(-6deg)" }}>this is me</p>
              <HandArrow direction="down-left" width={70} height={70} style={{ transform: "translate(-10px, 5px)" }} />
            </div>

            {/* Decorative heart */}
            <div className="absolute" style={{ right: -10, bottom: -10 }}>
              <Icon name="Heart" size={20} color="#C8A24A" stroke={2} style={{ fill: "#C8A24A" }} />
            </div>

            {/* dotted line */}
            <svg className="deco hidden md:block absolute" width={100} height={40}
                 style={{ left: -50, bottom: 40 }} viewBox="0 0 100 40">
              <path d="M 0 20 Q 30 5, 60 25 T 100 15" fill="none" stroke="#C8A24A"
                    strokeWidth="2" strokeLinecap="round" strokeDasharray="2 6" />
            </svg>
          </div>
        </Reveal>

        {/* RIGHT */}
        <div className="lg:pt-6">
          <Reveal>
            <div className="font-ui text-gold-h" style={{ fontSize: 13, letterSpacing: "0.2em", fontWeight: 500 }}>
              FROM SOPHIE
            </div>
          </Reveal>
          <Reveal delay={100}>
            <h2 className="font-display text-ink mt-4"
                style={{ fontSize: "clamp(32px, 4.4vw, 48px)", fontWeight: 700, lineHeight: 1.1, letterSpacing: "-0.02em" }}>
              I read 14 parenting books in my third trimester.
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <h3 className="font-display italic text-gold-h mt-3"
                style={{ fontSize: "clamp(22px, 2.8vw, 30px)", fontWeight: 500, lineHeight: 1.2 }}>
              None of them prepared me for the baby I actually got.
            </h3>
          </Reveal>

          <Reveal delay={300} className="mt-8 space-y-5 font-body text-body"
                  style={{ fontSize: 17, lineHeight: 1.75, maxWidth: 580 }}>
            <p>
              When my daughter arrived, every piece of advice I'd memorized fell apart in the first week.
            </p>
            <p>
              One book said feed on a schedule. The next said feed on demand. One said let her cry.
              Another said never let her cry. The internet contradicted itself every other paragraph.
              And underneath all of it was the same quiet panic: <em>what if I'm doing this wrong?</em>
            </p>
            <p>
              So I stopped reading parenting books — and started reading the research papers behind them.
              Real developmental psychology. Harvard's neural science. Tronick on mutual regulation.
              Kuhl on language. Wolff on infant states. Glover on prenatal development.
            </p>
            <p>
              What I found surprised me: the actual science is <strong className="text-ink font-semibold">calmer, clearer, and far more empowering</strong> than the advice industry built on top of it.
              Babies are not blank slates. Behavior is not random. Crying, sleep, sensory reactions,
              clinginess, intensity — they're all information. You just need a way to read it.
            </p>
            <p>
              <strong className="text-ink font-semibold">The Baby Blueprint is the book I wished I'd had at 2am.</strong> It translates the real research
              into plain language tired parents can actually use, organized around three pillars: <em>Understand. Recognize. Apply.</em>
            </p>
            <p>It won't make parenting easier. It will make it clearer.</p>
          </Reveal>

          <Reveal delay={400} className="mt-8 flex items-center gap-3">
            <span className="font-hand text-ink" style={{ fontSize: 36, fontWeight: 500 }}>— Sophie</span>
            <Icon name="Heart" size={20} color="#C8A24A" stroke={2} style={{ fill: "#C8A24A" }} />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ===== Solution Intro (dark strip with staircase) ===== */
function SolutionIntro() {
  const pillars = [
    ["I", "UNDERSTAND", "The core concept in plain language. Brain development, sensory processing, regulation, attachment, communication, sleep.", 0],
    ["II", "RECOGNIZE", "What that concept looks like in everyday baby behavior — the signals you can actually see.", 48],
    ["III", "APPLY", "Practical, realistic ways to respond. No prescriptions. Just informed choices.", 96]
  ];
  return (
    <section className="relative paper-grain sec" style={{ background: "#2C3A24" }}>
      <div className="container-x">
        <Reveal className="text-center">
          <div className="font-ui text-gold" style={{ fontSize: 12, letterSpacing: "0.25em", fontWeight: 500 }}>
            INTRODUCING
          </div>
        </Reveal>
        <Reveal delay={100} className="text-center">
          <h2 className="font-display mt-5"
              style={{ fontSize: "clamp(48px, 8vw, 80px)", fontWeight: 800, lineHeight: 1.04,
                       color: "#FAF6EE", letterSpacing: "-0.02em" }}>
            The Baby Blueprint
          </h2>
        </Reveal>
        <Reveal delay={200} className="text-center">
          <p className="font-body mx-auto mt-6"
             style={{ fontSize: 22, color: "rgba(250,246,238,0.78)", maxWidth: 720, lineHeight: 1.5 }}>
            The handbook for understanding the baby in front of you.
          </p>
        </Reveal>

        <div className="relative mt-20 grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 items-start">
          {pillars.map(([rn, title, body, offset], i) => (
            <Reveal key={rn} delay={i * 150}
                    className="relative bg-surface mx-auto md:mx-0 w-full"
                    style={{ borderRadius: 14, padding: 32, boxShadow: "0 18px 40px rgba(0,0,0,0.18)",
                             marginTop: offset, maxWidth: 320 }}>
              <div className="font-display text-gold-h" style={{ fontSize: 72, fontWeight: 700, lineHeight: 0.9, letterSpacing: "-0.02em" }}>
                {rn}
              </div>
              <div className="font-ui text-ink mt-4" style={{ fontSize: 14, letterSpacing: "0.2em", fontWeight: 600 }}>
                {title}
              </div>
              <p className="font-body text-body mt-3" style={{ fontSize: 15, lineHeight: 1.6 }}>
                {body}
              </p>
              {i < pillars.length - 1 && (
                <HandArrow direction="down-right" width={70} height={70}
                           className="hidden md:block absolute"
                           color="#C8A24A"
                           style={{ right: -50, bottom: -55, opacity: 0.75 }} />
              )}
            </Reveal>
          ))}
        </div>

        <Reveal delay={400} className="text-center mt-20">
          <p className="font-hand text-gold" style={{ fontSize: 20 }}>
            every chapter follows this rhythm
          </p>
          <a href="#preview"
             className="inline-flex items-center gap-2 mt-3 font-body"
             style={{ fontSize: 14, color: "rgba(250,246,238,0.70)", textDecoration: "underline",
                      textUnderlineOffset: 3, justifyContent: "center" }}>
            <Icon name="BookOpen" size={15} color="rgba(250,246,238,0.70)" />
            Open the book and feel it yourself →
          </a>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { BigStatHook, PainAgitation, FounderStory, SolutionIntro });