/* hero.jsx — Hero, Floating Video card, Authority stats strip */

/* ===== Hero composition — the book is the visual anchor, kept simple
   so it actually reads on every breakpoint. One sticky-note testimonial,
   one hand-drawn cursive accent, soft gold glow behind. ===== */
function HeroMockups() {
  return (
    <div className="relative hero-mockups-wrap">
      {/* Soft mustard-gold radial glow */}
      <div className="absolute pointer-events-none" aria-hidden="true"
           style={{ left: "50%", top: "48%", width: "110%", height: "78%",
                    transform: "translate(-50%, -50%)",
                    background: "radial-gradient(closest-side, rgba(200,162,74,0.26) 0%, rgba(200,162,74,0.10) 42%, rgba(200,162,74,0) 78%)",
                    filter: "blur(14px)", zIndex: 0 }} />

      {/* Decorative dotted arc */}
      <svg className="absolute pointer-events-none hidden md:block" aria-hidden="true"
           width="100%" height="60%" viewBox="0 0 100 60" preserveAspectRatio="none"
           style={{ left: 0, top: "14%", zIndex: 1, opacity: 0.55 }}>
        <path d="M 6 50 Q 50 4, 94 50" fill="none" stroke="#C8A24A"
              strokeWidth="0.4" strokeLinecap="round" strokeDasharray="0.6 2.2" />
      </svg>

      {/* Book — anchored, fluid sizing */}
      <div className="hero-book">
        <div className="float-loop" style={{ width: "100%", height: "100%", position: "relative" }}>
          <img src="assets/book-mockup.png" alt="The Baby Blueprint book"
               draggable="false"
               style={{ width: "100%", height: "100%", objectFit: "contain", objectPosition: "center",
                        filter: "drop-shadow(0 38px 60px rgba(15,15,15,0.32)) drop-shadow(0 14px 22px rgba(15,15,15,0.18))" }} />
          {/* PDF badge — top right corner of book */}
          <div style={{
            position: "absolute", top: "8%", right: "2%", zIndex: 40,
            background: "#FFFCF5", borderRadius: 8,
            padding: "5px 9px",
            boxShadow: "0 4px 14px rgba(0,0,0,0.18)",
            border: "1px solid rgba(200,162,74,0.40)",
            display: "flex", alignItems: "center", gap: 6
          }}>
            <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="0.5" y="0.5" width="15" height="19" rx="2" fill="#F5F0E8" stroke="#C8A24A" strokeWidth="1"/>
              <rect x="2.5" y="9" width="11" height="1.2" rx="0.6" fill="#D97757"/>
              <rect x="2.5" y="12" width="8" height="1.2" rx="0.6" fill="#C8A24A" opacity="0.7"/>
              <rect x="2.5" y="15" width="9.5" height="1.2" rx="0.6" fill="#C8A24A" opacity="0.5"/>
              <text x="8" y="7.5" textAnchor="middle" fontFamily="Inter,sans-serif" fontSize="5" fontWeight="700" fill="#D97757">PDF</text>
            </svg>
            <div>
              <div style={{ fontFamily: "Inter,sans-serif", fontSize: 9.5, fontWeight: 700,
                            color: "#D97757", letterSpacing: "0.08em", lineHeight: 1.1 }}>PDF</div>
              <div style={{ fontFamily: "Inter,sans-serif", fontSize: 8.5, color: "#6B655B",
                            lineHeight: 1.1, whiteSpace: "nowrap" }}>Digital book</div>
            </div>
          </div>
        </div>
      </div>

      {/* Sticky-note testimonial — overlaps book TOP-LEFT */}
      <StickyNote rotation={-5} width={210}
                  className="absolute z-30 hero-stickynote"
                  quote={'"It\'s like Sophie wrote the manual that should come with the baby."'}
                  attribution="— Lara, mom to 4-month-old" />

      {/* Hand-drawn cursive accent — bottom of column, points UP-RIGHT at the book */}
      <div className="absolute z-30 hero-script flex items-end gap-1 pointer-events-none">
        <p className="font-hand text-gold-h"
           style={{ fontSize: 22, lineHeight: 1.15, maxWidth: 200, transform: "rotate(-3deg)",
                    fontStyle: "italic", fontWeight: 500 }}>
          the book you'll reach for at 2am
        </p>
        <HandArrow direction="up-right" width={64} height={64} color="#A8851F"
                   style={{ transform: "translate(-6px, -10px) rotate(-4deg)", flexShrink: 0 }} />
      </div>
    </div>
  );
}

/* ===== Compact, single-card price + CTA — replaces the old split layout.
   This is the conversion engine: price, savings, scarcity, primary CTA, micro-trust,
   all in one well-organised card. ===== */
function HeroOfferCard() {
  const { copiesRemaining, copiesSold, copiesTotal } = useCounters();
  const pct = Math.min(100, Math.max(8, (copiesSold / copiesTotal) * 100));
  const scrollToPreview = (e) => {
    e.preventDefault();
    const el = document.getElementById("preview");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <div className="hero-offer-card relative"
         style={{ borderRadius: 16, padding: "26px 26px 24px",
                  background: "linear-gradient(165deg, #FFFCF5 0%, #F4EDD8 100%)",
                  border: "1.5px solid #C8A24A",
                  boxShadow: "0 22px 56px rgba(15,15,15,0.10), inset 0 0 0 1px rgba(255,252,245,0.6)" }}>
      {/* SAVE coral stamp */}
      <div className="absolute z-10" style={{ top: -16, right: 18 }}>
        <span className="save-stamp" style={{ fontSize: 14, lineHeight: 1 }}>
          SAVE&nbsp;$15
        </span>
      </div>

      {/* Status pills */}
      <div className="flex flex-wrap items-center gap-2 mb-3">
        <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full font-ui"
              style={{ background: "#0F0F0F", color: "#FAF6EE", fontSize: 10, letterSpacing: "0.2em", fontWeight: 600 }}>
          <span className="inline-block w-1.5 h-1.5 rounded-full live-dot" style={{ background: "#E8A92C" }} />
          LAUNCH PRICE
        </span>
      </div>

      {/* Price row */}
      <div className="flex items-end gap-5 mt-2 flex-wrap">
        <div className="flex flex-col items-start">
          <span className="font-ui text-muted" style={{ fontSize: 11, letterSpacing: "0.18em", fontWeight: 500 }}>WAS</span>
          <span className="strike-red font-display" style={{ fontSize: 30, fontWeight: 700, lineHeight: 1 }}>$39</span>
        </div>
        <div>
          <div className="font-ui text-gold-h" style={{ fontSize: 11, letterSpacing: "0.18em", fontWeight: 600 }}>TODAY</div>
          <div className="relative inline-block">
            <span aria-hidden="true" className="absolute"
                  style={{ left: -6, right: -6, bottom: 6, height: 14,
                           background: "#E8A92C", opacity: 0.32, borderRadius: 4, zIndex: 0 }} />
            <span className="relative font-display"
                  style={{ fontSize: "clamp(48px, 8vw, 64px)", fontWeight: 800, lineHeight: 1, letterSpacing: "-0.03em",
                           color: "#2C3A24", textShadow: "0 2px 0 rgba(200,162,74,0.10)" }}>
              $23.95
            </span>
          </div>
        </div>
      </div>

      {/* Scarcity */}
      <div className="font-body text-body mt-3 flex items-center gap-2" style={{ fontSize: 13 }}>
        <Icon name="Sparkles" size={14} color="#D97757" />
        <span>Launch price · <span className="font-semibold">first 1,000 copies only</span></span>
      </div>

      {/* Progress bar */}
      <div className="mt-4 w-full rounded-full overflow-hidden relative" style={{ background: "#E8DFCC", height: 10 }}>
        <div style={{ width: `${pct}%`, height: "100%",
                      background: "linear-gradient(90deg, #C8A24A 0%, #E8A92C 60%, #D97757 100%)",
                      transition: "width 600ms cubic-bezier(0.22,0.61,0.36,1)",
                      boxShadow: "inset 0 1px 0 rgba(255,252,245,0.45), inset 0 -1px 0 rgba(0,0,0,0.08)" }} />
        <div className="absolute top-0 bottom-0" aria-hidden="true"
             style={{ left: `calc(${pct}% - 2px)`, width: 4, background: "#FFFCF5",
                      boxShadow: "0 0 8px rgba(217,119,87,0.6)" }} />
      </div>
      <div className="mt-2.5 flex items-center justify-between gap-3 font-ui flex-wrap">
        <div className="flex items-baseline gap-1.5">
          <span className="font-display text-ink" style={{ fontSize: 20, fontWeight: 800, letterSpacing: "-0.02em" }}>
            {copiesSold.toLocaleString()}
          </span>
          <span className="text-muted" style={{ fontSize: 12 }}>of {copiesTotal.toLocaleString()} sold</span>
        </div>
        <div className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full"
             style={{ background: "rgba(217,119,87,0.15)", border: "1px solid rgba(217,119,87,0.35)" }}>
          <span className="inline-block w-1.5 h-1.5 rounded-full" style={{ background: "#D97757" }} />
          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "#D97757" }}>
            Only {copiesRemaining.toLocaleString()} left
          </span>
        </div>
      </div>

      {/* Sophie signature — trust anchor */}
      <div className="mt-4 flex items-center gap-3 pt-4 border-t border-line/60">
        <img src="assets/sophie-author.png" alt="Sophie, author"
             style={{ width: 40, height: 40, borderRadius: "50%", objectFit: "cover",
                      border: "2px solid #C8A24A", flexShrink: 0 }} />
        <div>
          <div className="font-hand text-ink" style={{ fontSize: 17, lineHeight: 1.1 }}>— Sophie</div>
          <div className="font-body text-muted" style={{ fontSize: 11.5 }}>Author · Born to Know</div>
        </div>
      </div>

      {/* CTAs inside the card — primary + preview text link */}
      <div className="mt-5 flex flex-col gap-2">
        <a href={CHECKOUT_URL}
           className="cta-primary cta-pulse inline-flex items-center justify-center gap-2 no-underline w-full"
           style={{ height: 64, fontSize: 18, fontWeight: 700 }}>
          <span className="flex items-center gap-2">
            Start understanding my baby
            <Icon name="ArrowRight" size={20} color="#FFFCF5" />
          </span>
        </a>
        {/* Micro-copy — right under the CTA */}
        <div className="flex flex-wrap items-center justify-center gap-x-2.5 gap-y-1 text-muted"
             style={{ fontSize: 11.5 }}>
          <span className="inline-flex items-center gap-1"><Icon name="Lock" size={12} color="#6B655B" />Instant PDF</span>
          <span className="text-gold">·</span>
          <span>No subscription</span>
          <span className="text-gold">·</span>
          <span>Yours forever</span>
        </div>
        {/* Preview — demoted to text link */}
        <div className="text-center mt-1">
          <button onClick={scrollToPreview}
                  className="font-body text-muted hover:text-gold-h transition-colors"
                  style={{ fontSize: 13, background: "none", border: "none", cursor: "pointer",
                           textDecoration: "underline", textUnderlineOffset: 3 }}>
            Preview pages →
          </button>
        </div>
      </div>
    </div>
  );
}

/* ===== Hero — tighter, conversion-focused, pixel-perfect responsive ===== */
function HeroSection() {
  return (
    <section className="relative bg-cream" id="top"
             style={{ paddingTop: 56, paddingBottom: 200 }}>
      <div className="container-x grid lg:grid-cols-[1.05fr_1fr] gap-10 lg:gap-14 items-start lg:items-stretch">
        {/* LEFT */}
        <div className="lg:pr-2 flex flex-col">
          <Reveal className="flex items-center gap-3 mb-5">
            <div className="h-px w-10 bg-gold" />
            <span className="font-ui text-gold-h" style={{ fontSize: 12.5, letterSpacing: "0.22em", fontWeight: 600 }}>
              A SCIENCE-BACKED PARENTING HANDBOOK
            </span>
          </Reveal>

          <Reveal delay={100}>
            <h1 className="font-display text-ink" style={{ lineHeight: 1.02, letterSpacing: "-0.02em" }}>
              <span style={{ display: "block", fontSize: "clamp(52px, 7.5vw, 84px)", fontWeight: 800 }}>
                Stop guessing.
              </span>
              <span style={{ display: "block", fontSize: "clamp(30px, 4.2vw, 52px)", fontWeight: 700,
                             marginTop: "0.18em", color: "#3D3A33" }}>
                Start <MarkerUnderline>understanding</MarkerUnderline> the baby in front of you.
              </span>
            </h1>
          </Reveal>

          <Reveal delay={200}>
            <p className="font-body text-body mt-6"
               style={{ fontSize: 18, lineHeight: 1.55, maxWidth: 540 }}>
              For new and expecting parents who want to understand <strong className="text-ink font-semibold">why</strong> —
              not just be told what to do. 108 pages of peer-reviewed developmental science, translated for tired parents.
              Cries, sleep, sensory world, and brain development — from prenatal through 36 months.
            </p>
          </Reveal>

          {/* Trust strip — social proof first */}
          <Reveal delay={300} className="mt-7 flex flex-wrap items-center gap-x-5 gap-y-3" style={{ maxWidth: 560 }}>
            <div className="flex items-center gap-2">
              <div className="flex star-y">
                {[0,1,2,3,4].map(s => (
                  <Icon key={s} name="Star" size={17} color="#F5C518" stroke={0} />
                ))}
              </div>
              <span className="font-ui text-ink" style={{ fontSize: 14, fontWeight: 600 }}>
                4.9<span className="text-muted font-normal">/5</span>
              </span>
              <span className="font-body text-muted" style={{ fontSize: 13 }}>· 1,743 parents</span>
            </div>
            <div className="flex items-center gap-2.5">
              <div className="flex -space-x-2">
                {[12, 47, 32, 5, 26].map((id, i) => (
                  <img key={i} src={`https://i.pravatar.cc/72?img=${id}`} alt=""
                       referrerPolicy="no-referrer"
                       loading="lazy"
                       style={{ width: 26, height: 26, borderRadius: 999,
                                border: "2px solid #FAF6EE", objectFit: "cover",
                                boxShadow: "0 2px 6px rgba(15,15,15,0.10)" }} />
                ))}
              </div>
              <span className="font-body text-muted" style={{ fontSize: 13 }}>
                <span className="font-semibold text-ink">47</span> countries
              </span>
            </div>
          </Reveal>

          {/* Feature chips — after social proof */}
          <Reveal delay={350} className="flex flex-wrap items-center gap-2.5 mt-4">
            {[
              ["BookOpen", "108 Pages"],
              ["Sparkles", "12 Chapters"],
              ["ShieldCheck", "30+ Studies"]
            ].map(([icon, label]) => (
              <span key={label}
                    className="inline-flex items-center gap-2 px-3 py-1.5 bg-surface border border-gold/30 rounded-full"
                    style={{ fontSize: 13 }}>
                <Icon name={icon} size={15} color="#C8A24A" />
                <span className="font-ui text-ink" style={{ fontWeight: 500 }}>{label}</span>
              </span>
            ))}
          </Reveal>

          {/* Combined offer + CTA card */}
          <Reveal delay={400} className="mt-8" style={{ maxWidth: 560 }}>
            <HeroOfferCard />
          </Reveal>
        </div>

        {/* RIGHT */}
        <Reveal delay={250} className="relative w-full flex lg:items-center lg:justify-center">
          <HeroMockups />
        </Reveal>
      </div>
    </section>
  );
}

/* ===== Floating Video Card — real Sophie intro video, tap to play/pause
   (no native player UI — matches the video-story cards) ===== */
function FloatingVideoCard() {
  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 (
    <div className="relative container-x video-card-floats" style={{ marginTop: -120, marginBottom: -120, zIndex: 20 }}>
      <Reveal className="relative mx-auto"
              style={{ maxWidth: 880 }}>
        <div className="relative w-full bg-surface overflow-hidden video-card-shell"
             style={{ borderRadius: 16, aspectRatio: "16/9",
                      boxShadow: "0 28px 72px rgba(15,15,15,0.18)" }}>
          {/* Thumbnail (shown before play) */}
          <img src="assets/poster-sophie.jpg" alt="Sophie, founder of Born to Know"
               loading="lazy" draggable="false"
               style={{ position: "absolute", inset: 0, width: "100%", height: "100%",
                        objectFit: "cover",
                        opacity: playing ? 0 : 1, transition: "opacity 240ms ease" }} />

          {/* Real video — only fetched once the user presses play. No native
              controls so the player chrome never shows (like the story cards). */}
          <video ref={vref}
                 src="https://theborntoknow.com/videos/sophie-introduction.mp4"
                 poster="assets/poster-sophie.jpg"
                 preload="none" playsInline
                 onEnded={() => setPlaying(false)} onPause={() => setPlaying(false)}
                 style={{ position: "absolute", inset: 0, width: "100%", height: "100%",
                          objectFit: "cover", background: "transparent",
                          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 }} />

          {/* Centered play — only when paused */}
          {!playing && (
          <div className="absolute left-1/2 top-1/2 play-glow"
               style={{ width: 88, height: 88, borderRadius: 999, background: "#C8A24A",
                        transform: "translate(-50%, -50%)", pointerEvents: "none",
                        display: "flex", alignItems: "center", justifyContent: "center",
                        border: "none", zIndex: 6 }}>
            <Icon name="Play" size={36} color="#FFFCF5" stroke={1.8} style={{ marginLeft: 4 }} />
          </div>
          )}

          {/* Hook text + "press play" cursive accent — only when paused */}
          {!playing && (
          <div className="absolute pointer-events-none flex flex-col items-center"
               style={{ left: "50%", top: "calc(50% - 170px)",
                        transform: "translateX(-50%)", zIndex: 6 }}>
            {/* Hook line — all screens */}
            <div className="font-ui text-center"
                 style={{ fontSize: "clamp(11px, 2vw, 13px)", letterSpacing: "0.12em", fontWeight: 600,
                          color: "rgba(250,246,238,0.92)", textTransform: "uppercase",
                          background: "rgba(15,15,15,0.45)", backdropFilter: "blur(6px)",
                          padding: "6px 14px", borderRadius: 999,
                          boxShadow: "0 2px 12px rgba(0,0,0,0.30)",
                          textShadow: "none", whiteSpace: "nowrap" }}>
              Sophie explains in 60 seconds why this book is different
            </div>

          </div>
          )}

          {/* Bottom-left caption — stays visible, also during playback */}
          <div className="absolute inset-x-0 bottom-0 p-4 md:p-5 video-scrim"
               style={{ zIndex: 6, pointerEvents: "none" }}>
            <div className="font-display text-cream" style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.01em" }}>Meet Sophie</div>
            <div className="font-body" style={{ color: "rgba(250,246,238,0.85)", fontSize: 14 }}>A 1-minute note from the author</div>
          </div>
        </div>
      </Reveal>
    </div>
  );
}

/* ===== Authority stats strip — editorial dark band ===== */
function AuthorityStrip() {
  const stats = [
    ["Users",    "1,743", "Parents Worldwide",      1743, "47 countries"],
    ["Globe",    "47",     "Countries Reading",      47,   "and counting"],
    ["FlaskConical", "30+", "Peer-Reviewed Studies", 30,   "APA-7 cited"],
    ["FileText", "108",    "Pages of Science",       108,  "12 chapters"]
  ];
  const sources = [
    "Harvard · Center on the Developing Child",
    "Tronick · Still-Face Research",
    "Kuhl · Linguistic Genius Window",
    "Fernald · Infant-Directed Speech",
    "Ainsworth · Attachment Theory",
    "Glover · Prenatal Stress",
    "Hirsh-Pasek · Language Development",
    "Wolff · Infant States"
  ];

  return (
    <section className="relative paper-grain overflow-hidden authority-strip"
             style={{ background: "#2C3A24" }}>
      <div className="absolute pointer-events-none" aria-hidden="true"
           style={{ top: "12%", left: "-10%", width: "45%", height: "70%",
                    background: "radial-gradient(closest-side, rgba(200,162,74,0.14), transparent 70%)" }} />
      <div className="absolute pointer-events-none" aria-hidden="true"
           style={{ bottom: "-10%", right: "-10%", width: "45%", height: "80%",
                    background: "radial-gradient(closest-side, rgba(217,119,87,0.10), transparent 70%)" }} />

      <div className="container-x relative">
        <Reveal className="flex items-center justify-center gap-3 mb-5">
          <span className="h-px w-10" style={{ background: "rgba(200,162,74,0.55)" }} />
          <span className="font-ui" style={{ fontSize: 12, letterSpacing: "0.28em", fontWeight: 600, color: "#E8A92C" }}>
            BUILT ON PEER-REVIEWED SCIENCE
          </span>
          <span className="h-px w-10" style={{ background: "rgba(200,162,74,0.55)" }} />
        </Reveal>

        <Reveal delay={100} className="text-center">
          <h2 className="font-display mx-auto"
              style={{ fontSize: "clamp(30px, 4.4vw, 46px)", fontWeight: 700, lineHeight: 1.12,
                       color: "#FAF6EE", letterSpacing: "-0.02em", maxWidth: 880 }}>
            Not a hot take. <em style={{ fontStyle: "italic", color: "#E8A92C", fontWeight: 700 }}>A research synthesis</em> —
            written for the parent at 2am.
          </h2>
        </Reveal>
        <Reveal delay={200} className="text-center">
          <p className="font-body mx-auto mt-5"
             style={{ fontSize: 17, color: "rgba(250,246,238,0.74)", maxWidth: 640, lineHeight: 1.65 }}>
            Every chapter is built on developmental science — peer-reviewed, properly cited, translated for tired parents.
          </p>
        </Reveal>

        <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-x-6 md:gap-x-10 gap-y-12 items-start">
          {stats.map(([icon, big, label, num, sub], i) => (
            <Reveal key={label} delay={i * 120}
                    className="relative flex flex-col items-center text-center">
              <div className="inline-flex items-center justify-center mb-4"
                   style={{ width: 56, height: 56, borderRadius: 999,
                            background: "rgba(200,162,74,0.10)",
                            border: "1px solid rgba(200,162,74,0.45)" }}>
                <Icon name={icon} size={26} color="#E8A92C" stroke={1.6} />
              </div>
              <div className="font-display" style={{ fontSize: "clamp(40px, 5.4vw, 56px)", fontWeight: 800, color: "#FAF6EE", lineHeight: 1, letterSpacing: "-0.02em" }}>
                {num
                  ? (num === 1743 ? <CountUp to={1743} />
                    : num === 47 ? <CountUp to={47} />
                    : num === 108 ? <CountUp to={108} />
                    : <><CountUp to={30} /><span>+</span></>)
                  : big}
              </div>
              <div className="font-ui mt-3"
                   style={{ fontSize: 11, letterSpacing: "0.22em", fontWeight: 600, textTransform: "uppercase", color: "#C8A24A" }}>
                {label}
              </div>
              <div className="font-hand mt-1.5" style={{ fontSize: 15, color: "rgba(250,246,238,0.55)", fontStyle: "italic" }}>
                {sub}
              </div>
              {i < stats.length - 1 && (
                <div className="hidden md:block absolute right-0 top-4"
                     style={{ width: 1, height: 96, transform: "translateX(50%)",
                              background: "linear-gradient(180deg, transparent 0%, rgba(200,162,74,0.45) 50%, transparent 100%)" }} />
              )}
            </Reveal>
          ))}
        </div>

        <Reveal delay={400} className="mx-auto mt-20"
                style={{ maxWidth: 780 }}>
          <div className="relative"
               style={{ padding: "32px 36px 28px",
                        background: "rgba(15,15,15,0.30)",
                        border: "1px solid rgba(200,162,74,0.32)",
                        borderLeft: "3px solid #E8A92C",
                        borderRadius: 14,
                        boxShadow: "0 18px 36px rgba(0,0,0,0.18)" }}>
            <Icon name="Quote" size={36} color="rgba(200,162,74,0.40)" stroke={1.4}
                  style={{ position: "absolute", top: 16, right: 20 }} />
            <p className="font-display italic"
               style={{ fontSize: "clamp(20px, 2.6vw, 26px)", lineHeight: 1.4, fontWeight: 500,
                        color: "#FAF6EE", letterSpacing: "-0.01em", maxWidth: 640 }}>
              "In the first few years of life, more than one million new neural connections form every second."
            </p>
            <div className="mt-5 flex items-center gap-3 flex-wrap">
              <span className="h-px flex-1 max-w-12" style={{ background: "rgba(200,162,74,0.45)" }} />
              <span className="font-ui"
                    style={{ fontSize: 11, letterSpacing: "0.22em", fontWeight: 600, color: "#E8A92C", textTransform: "uppercase" }}>
                Harvard Center on the Developing Child
              </span>
              <span className="font-ui" style={{ fontSize: 11, color: "rgba(250,246,238,0.55)" }}>
                · (Shonkoff &amp; Phillips, 2000)
              </span>
            </div>
          </div>
        </Reveal>

        <Reveal delay={500} className="mt-14">
          <div className="text-center font-ui mb-5"
               style={{ fontSize: 11, letterSpacing: "0.24em", fontWeight: 600, color: "rgba(200,162,74,0.85)" }}>
            DRAWN FROM
          </div>
          <div className="flex flex-wrap items-center justify-center gap-x-3 gap-y-3 mx-auto" style={{ maxWidth: 780 }}>
            {sources.map((s, i) => (
              <span key={s} className="inline-flex items-center gap-2 font-ui"
                    style={{ padding: "8px 14px", borderRadius: 999,
                             background: "rgba(250,246,238,0.04)",
                             border: "1px solid rgba(200,162,74,0.28)",
                             color: "rgba(250,246,238,0.78)", fontSize: 12, fontWeight: 500,
                             letterSpacing: "0.01em", whiteSpace: "nowrap" }}>
                <span style={{ width: 4, height: 4, borderRadius: 999, background: "#E8A92C", flexShrink: 0, display: "inline-block" }} />
                {s}
              </span>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { HeroSection, FloatingVideoCard, AuthorityStrip });
