/* sections-d.jsx — FAQ, Final CTA, Footer */

/* ===== FAQ ===== */
const FAQ_ITEMS = [
  ["HelpCircle",   "Is this medical advice?",
   "No. The Baby Blueprint is educational and based on developmental research, but it's not a substitute for your pediatrician or healthcare provider. For specific concerns about your child's health, growth, sleep, feeding, behavior, or development, always consult a licensed professional."],
  ["Baby",         "What age is this for?",
   "The Blueprint covers prenatal development through 36 months. It's most useful for new parents, expecting parents, and parents of babies up to age 3. The reading list (Chapter 11) and product guide (Chapter 12) extend its usefulness further."],
  ["Download",     "What format do I get?",
   "A 108-page PDF, delivered to your inbox within seconds of purchase. Readable on phone, tablet, e-reader, or computer."],
  ["BookOpen",     "Is the science actually peer-reviewed?",
   "Yes. The Blueprint draws on research from Harvard's Center on the Developing Child, peer-reviewed journals, and established developmental scientists (Tronick, Kuhl, Fernald, Glover, Boyce, Wolff, Hirsh-Pasek, and more). Every claim is cited in APA-7 format."],
  ["Sparkles",     "Will this work for my sensitive, spirited, or colicky baby?",
   "The Blueprint doesn't promise a one-size-fits-all method — because none exists. What it gives you is a framework to understand your baby's specific signals, sensitivities, and patterns. Parents of intense or sensitive babies often tell us it's the first resource that finally made their baby make sense."],
  ["Users",        "Can my partner read it too?",
   "Yes — and we recommend it. The Blueprint is built for both parents (and expecting parents). Buy once, share within your household."],
  ["Mail",         "How do I get support if I have questions?",
   "Email support@theborntoknow.com any time. Sophie reads every message herself and replies within 24 hours — usually much faster."],
  ["Tag",          "Why is it $23.95?",
   "$23.95 is the launch price — the first 1,000 copies. After that, the price goes up to $39. We want as many parents as possible to start with the science, so the launch makes the book accessible while we build the community."]
];

function FAQSection() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="sec" id="faq" 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(217,119,87,0.12)", border: "1px solid rgba(217,119,87,0.30)" }}>
            <Icon name="MessagesSquare" size={14} color="#D97757" />
            <span className="font-ui" style={{ fontSize: 12, letterSpacing: "0.22em", fontWeight: 600, color: "#D97757" }}>
              FAQ
            </span>
          </div>
        </Reveal>
        <Reveal delay={100} className="text-center">
          <h2 className="font-display text-ink mt-5"
              style={{ fontSize: "clamp(34px, 4.6vw, 50px)", fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.02em" }}>
            Still on the <em className="font-hand" style={{ color: "#A8851F", fontStyle: "italic", fontWeight: 600 }}>fence</em>?
          </h2>
        </Reveal>
        <Reveal delay={200} className="text-center">
          <p className="font-body text-muted mt-3 mx-auto" style={{ fontSize: 17, maxWidth: 580 }}>
            The eight things every parent asks before buying. Answered straight.
          </p>
        </Reveal>

        <div className="grid grid-cols-1 lg:grid-cols-[1fr_280px] gap-8 mt-12 max-w-5xl mx-auto items-start">
          <Reveal className="bg-surface border border-line overflow-hidden"
                  style={{ borderRadius: 14, boxShadow: "0 12px 32px rgba(15,15,15,0.06)" }}>
            {FAQ_ITEMS.map(([icn, q, a], i) => {
              const isOpen = open === i;
              const colors = ["#1F6B5B", "#C8A24A", "#D97757", "#A8851F", "#1F6B5B", "#C8A24A", "#4A7C59", "#D97757"];
              const accentColor = colors[i % colors.length];
              return (
                <div key={i} style={{ borderTop: i === 0 ? "none" : "1px solid #E8DFCC" }}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)}
                          className="w-full flex items-center gap-4 text-left transition hover:bg-tint/40"
                          style={{ minHeight: 68, padding: "16px 20px 16px 22px" }}>
                    <span className="shrink-0 flex items-center justify-center"
                          style={{ width: 36, height: 36, borderRadius: 10,
                                   background: `${accentColor}1A`, border: `1px solid ${accentColor}40` }}>
                      <Icon name={icn} size={18} color={accentColor} stroke={1.7} />
                    </span>
                    <span className="font-display text-ink flex-1"
                          style={{ fontSize: 17, fontWeight: 700, lineHeight: 1.3, letterSpacing: "-0.01em" }}>
                      {q}
                    </span>
                    <span className={`plus-rot ${isOpen ? "open" : ""} shrink-0`}>
                      <Icon name="Plus" size={22} color={accentColor} stroke={2} />
                    </span>
                  </button>
                  <div className={`faq-body ${isOpen ? "open" : ""}`}>
                    <div>
                      <p className="font-body text-body"
                         style={{ fontSize: 15.5, lineHeight: 1.7, padding: "0 20px 22px 78px" }}>
                        {a}
                      </p>
                    </div>
                  </div>
                </div>
              );
            })}
          </Reveal>

          {/* Side card — "Still have questions?" */}
          <Reveal delay={200} className="relative paper-grain"
                  style={{ borderRadius: 14, background: "#2C3A24", padding: 28, color: "#FAF6EE",
                           boxShadow: "0 18px 36px rgba(15,15,15,0.18)" }}>
            <div className="inline-flex items-center justify-center"
                 style={{ width: 48, height: 48, borderRadius: 12, background: "rgba(200,162,74,0.15)", border: "1px solid rgba(200,162,74,0.40)" }}>
              <Icon name="Mail" size={22} color="#E8A92C" stroke={1.6} />
            </div>
            <h3 className="font-display mt-5" style={{ fontSize: 22, fontWeight: 700, lineHeight: 1.15, letterSpacing: "-0.01em", color: "#FAF6EE" }}>
              Still have questions?
            </h3>
            <p className="font-body mt-2" style={{ fontSize: 14, color: "rgba(250,246,238,0.78)", lineHeight: 1.55 }}>
              We answer every email within 24 hours. No bots, no scripts — Sophie reads every message herself.
            </p>
            <a href="mailto:support@theborntoknow.com"
               className="cta-gold inline-flex items-center justify-center gap-2 no-underline mt-5 w-full"
               style={{ height: 48, fontSize: 14 }}>
              Email us
              <Icon name="ArrowRight" size={16} color="#0F0F0F" />
            </a>
            <p className="font-hand mt-3" style={{ fontSize: 15, color: "#E8A92C", textAlign: "center" }}>
              avg. reply: 4 hours
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ===== Final CTA dark strip ===== */
function FinalCTA() {
  const { copiesSold, copiesRemaining, copiesTotal } = useCounters();
  const pct = Math.min(100, (copiesSold / copiesTotal) * 100);
  return (
    <section className="relative paper-grain overflow-hidden" style={{ background: "#2C3A24", padding: "120px 0" }}>
      {/* decorative coral glow */}
      <div className="absolute pointer-events-none" aria-hidden="true"
           style={{ top: "-20%", left: "-10%", width: "60%", height: "120%",
                    background: "radial-gradient(closest-side, rgba(217,119,87,0.18), rgba(217,119,87,0) 70%)" }} />
      <div className="absolute pointer-events-none" aria-hidden="true"
           style={{ bottom: "-30%", right: "-10%", width: "55%", height: "120%",
                    background: "radial-gradient(closest-side, rgba(232,169,44,0.18), rgba(232,169,44,0) 70%)" }} />

      <div className="container-x text-center relative">
        <Reveal>
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full"
               style={{ background: "rgba(217,119,87,0.18)", border: "1px solid rgba(217,119,87,0.40)" }}>
            <span className="inline-block w-1.5 h-1.5 rounded-full live-dot" style={{ background: "#D97757" }} />
            <span className="font-ui" style={{ fontSize: 12, letterSpacing: "0.25em", fontWeight: 600, color: "#E8A92C" }}>
              LAUNCH PRICE · ENDS AT 1,000 SOLD
            </span>
          </div>
        </Reveal>
        <Reveal delay={100}>
          <h2 className="font-display mx-auto mt-6"
              style={{ fontSize: "clamp(44px, 7.5vw, 80px)", fontWeight: 800, lineHeight: 1.04,
                       color: "#FAF6EE", letterSpacing: "-0.02em", maxWidth: 1040 }}>
            Only $23.95.<br />
            Only{" "}
            <span className="relative inline-block">
              <span aria-hidden="true" className="absolute"
                    style={{ left: -10, right: -10, bottom: 6, height: 16,
                             background: "#D97757", opacity: 0.35, borderRadius: 4 }} />
              <em className="relative" style={{ fontStyle: "italic", fontWeight: 800, color: "#E8A92C" }}>
                {copiesRemaining.toLocaleString()} copies
              </em>
            </span>{" "}
            left.
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <p className="font-body mx-auto mt-6"
             style={{ fontSize: 19, color: "rgba(250,246,238,0.78)", maxWidth: 600, lineHeight: 1.5 }}>
            After the launch, the price returns to $39.
          </p>
        </Reveal>

        <Reveal delay={300} className="mx-auto mt-10" style={{ maxWidth: 600 }}>
          <div className="rounded-full overflow-hidden relative"
               style={{ height: 14, background: "#1F2A19",
                        boxShadow: "inset 0 1px 2px rgba(0,0,0,0.40)" }}>
            <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)" }} />
            <div className="absolute top-0 bottom-0" aria-hidden="true"
                 style={{ left: `calc(${pct}% - 2px)`, width: 4, background: "#FFFCF5",
                          boxShadow: "0 0 10px rgba(217,119,87,0.8)" }} />
          </div>
          <div className="mt-4 flex items-center justify-between gap-4 flex-wrap">
            <div className="font-ui flex items-baseline gap-2" style={{ color: "#FAF6EE" }}>
              <span className="font-display" style={{ fontSize: 28, fontWeight: 800, color: "#E8A92C", letterSpacing: "-0.02em" }}>
                {copiesSold.toLocaleString()}
              </span>
              <span style={{ fontSize: 13, color: "rgba(250,246,238,0.7)" }}>of {copiesTotal.toLocaleString()} sold</span>
            </div>
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full"
                 style={{ background: "rgba(217,119,87,0.22)", border: "1px solid rgba(217,119,87,0.50)" }}>
              <span className="inline-block w-2 h-2 rounded-full live-dot" style={{ background: "#D97757" }} />
              <span className="font-ui" style={{ fontSize: 12, letterSpacing: "0.15em", textTransform: "uppercase", color: "#FAF6EE", fontWeight: 600 }}>
                {copiesRemaining.toLocaleString()} left at launch price
              </span>
            </div>
          </div>
        </Reveal>

        {/* Testimonial quote + Sophie — trust anchor before final CTA */}
        <Reveal delay={380} className="mx-auto mt-12" style={{ maxWidth: 560 }}>
          <div style={{ background: "rgba(250,246,238,0.08)", border: "1px solid rgba(200,162,74,0.30)",
                        borderRadius: 14, padding: "20px 24px",
                        display: "flex", alignItems: "flex-start", gap: 16, textAlign: "left" }}>
            <img src="https://i.pravatar.cc/96?img=47" alt="Emma"
                 style={{ width: 48, height: 48, borderRadius: "50%", objectFit: "cover",
                          border: "2px solid #C8A24A", flexShrink: 0 }} />
            <div>
              <p className="font-display italic"
                 style={{ fontSize: 16, color: "rgba(250,246,238,0.92)", lineHeight: 1.5, fontWeight: 500 }}>
                "By page 30 I finally stopped panicking. This is the book I wish I had on day one."
              </p>
              <div className="mt-3 flex flex-col gap-1">
                <div className="flex">
                  {[0,1,2,3,4].map(s => (
                    <Icon key={s} name="Star" size={11} color="#F5C518" stroke={0} />
                  ))}
                </div>
                <div className="font-ui" style={{ fontSize: 12 }}>
                  <span style={{ color: "rgba(250,246,238,0.90)", fontWeight: 600, letterSpacing: "0.02em" }}>Emma</span>
                  <span style={{ color: "rgba(250,246,238,0.50)", letterSpacing: "0.04em" }}> · Austin, TX</span>
                </div>
              </div>
            </div>
          </div>
        </Reveal>

        <Reveal delay={400} className="mt-8">
          <a href={CHECKOUT_URL}
             className="cta-gold cta-pulse inline-flex items-center justify-center gap-2 no-underline"
             style={{ height: "clamp(56px, 7vw, 76px)", fontSize: "clamp(15px, 2.5vw, 22px)", padding: "0 clamp(24px, 4vw, 48px)", fontWeight: 700, maxWidth: "100%", width: "min(100%, 560px)", textAlign: "center", whiteSpace: "nowrap" }}>
            Start understanding my baby — $23.95
            <Icon name="ArrowRight" size={22} color="#0F0F0F" stroke={2} style={{ flexShrink: 0 }} />
          </a>
        </Reveal>

        <Reveal delay={500} className="mt-6 flex flex-wrap items-center justify-center gap-x-4 gap-y-2"
                style={{ fontSize: 13 }}>
          {[
            ["Download", "Instant PDF download"],
            ["Lock", "Yours forever"],
            ["Globe", "Delivered worldwide"]
          ].map(([icn, label]) => (
            <span key={label} className="inline-flex items-center gap-1.5"
                  style={{ color: "rgba(250,246,238,0.72)" }}>
              <Icon name={icn} size={14} color="#E8A92C" />
              {label}
            </span>
          ))}
          <span style={{ color: "rgba(250,246,238,0.40)" }}>·</span>
          <a href="#faq" className="inline-flex items-center gap-1"
             style={{ color: "rgba(250,246,238,0.55)", textDecoration: "underline",
                      textUnderlineOffset: 3, fontFamily: "inherit", fontSize: 13 }}>
            Questions? See FAQ ↑
          </a>
        </Reveal>

        <Reveal delay={600} className="mt-10 flex flex-col items-center justify-center gap-3">
          <div className="flex items-center gap-2">
            <div className="flex -space-x-2">
              {[12, 47, 32, 5, 26].map((id, i) => (
                <img key={i} src={`https://i.pravatar.cc/56?img=${id}`} alt=""
                     style={{ width: 28, height: 28, borderRadius: "50%",
                              border: "2px solid #2C3A24", objectFit: "cover",
                              marginLeft: i === 0 ? 0 : -8 }} />
              ))}
            </div>
            <p className="font-hand text-gold" style={{ fontSize: 18 }}>
              joined by 1,743 parents worldwide
            </p>
            <Icon name="Heart" size={15} color="#D97757" stroke={2} style={{ fill: "#D97757" }} />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ===== Footer ===== */
const FOOTER_LINKS = [
  ["Story",     "#story"],
  ["Chapters",  "#chapters"],
  ["Preview",   "#preview"],
  ["Reviews",   "#reviews"],
  ["FAQ",       "#faq"]
];

function Footer() {
  return (
    <footer style={{ background: "#F0E7CC", position: "relative", overflow: "hidden" }}>
      {/* Top accent strip */}
      <div className="w-full" style={{ background: "linear-gradient(90deg, #D97757 0%, #C8A24A 50%, #2C3A24 100%)", height: 4 }} />

      {/* Top band — closing CTA */}
      <div className="container-x" style={{ paddingTop: 64 }}>
        <div className="grid grid-cols-1 md:grid-cols-[1.4fr_1fr] gap-8 items-center pb-12 border-b border-line/60">
          <div>
            <p className="font-ui text-gold-h" style={{ fontSize: 12, letterSpacing: "0.22em", fontWeight: 600 }}>
              ONE MORE THING
            </p>
            <h3 className="font-display text-ink mt-3"
                style={{ fontSize: "clamp(26px, 3.4vw, 38px)", fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.02em" }}>
              Stop guessing. Start{" "}
              <em className="font-hand" style={{ color: "#1F6B5B", fontStyle: "italic", fontWeight: 600 }}>understanding</em>.
            </h3>
            <p className="font-body text-muted mt-3" style={{ fontSize: 15, maxWidth: 520, lineHeight: 1.6 }}>
              The first 1,000 parents get $23.95. After that, $39.
            </p>
          </div>
          <div className="flex flex-col items-stretch md:items-end gap-3 justify-self-stretch md:justify-self-end">
            <a href={CHECKOUT_URL}
               className="cta-primary inline-flex items-center justify-center gap-2 no-underline w-full md:w-auto"
               style={{ height: 60, fontSize: 17, padding: "0 32px" }}>
              <span className="flex items-center gap-2">
                Start understanding my baby
                <Icon name="ArrowRight" size={20} color="#FFFCF5" />
              </span>
            </a>
          </div>
        </div>
      </div>

      {/* Columns */}
      <div className="container-x grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12"
           style={{ paddingTop: 56, paddingBottom: 32 }}>
        {/* Brand */}
        <div>
          <div className="flex items-center gap-3">
            <img src="assets/logo-mark.png" alt="Born to Know" style={{ height: 40, width: 40 }} />
            <span className="font-display text-ink" style={{ fontSize: 19, fontWeight: 700, letterSpacing: "-0.01em" }}>
              Born to Know
            </span>
          </div>
          <p className="font-body text-body mt-4" style={{ fontSize: 14, lineHeight: 1.65, maxWidth: 280 }}>
            Translating developmental science into action for the parent who wants to understand, not just survive.
          </p>
          <div className="mt-5 flex items-center gap-2">
            {[
              ["Youtube",   "https://www.youtube.com/@borntoknowyt/?sub_confirmation=1"],
              ["Mail",      "mailto:support@theborntoknow.com"]
            ].map(([icn, href]) => (
              <a key={icn} href={href}
                 target={href.startsWith("http") ? "_blank" : undefined}
                 rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
                 className="inline-flex items-center justify-center bg-surface border border-line hover:border-gold transition"
                 style={{ width: 36, height: 36, borderRadius: 10, textDecoration: "none" }}
                 aria-label={icn}>
                <Icon name={icn} size={16} color="#3D3A33" />
              </a>
            ))}
          </div>
        </div>

        {/* Quick links */}
        <div>
          <div className="font-ui text-muted" style={{ fontSize: 11, letterSpacing: "0.2em", fontWeight: 600 }}>
            EXPLORE
          </div>
          <ul className="mt-4 flex flex-col gap-2.5">
            {FOOTER_LINKS.map(([label, href]) => (
              <li key={label}>
                <a href={href} className="font-body text-body hover:text-gold-h transition"
                   style={{ fontSize: 14, textDecoration: "none" }}>
                  {label}
                </a>
              </li>
            ))}
            <li>
              <a href={CHECKOUT_URL} className="font-body inline-flex items-center gap-1.5"
                 style={{ fontSize: 14, color: "#D97757", fontWeight: 600, textDecoration: "none" }}>
                Buy now <Icon name="ArrowUpRight" size={14} color="#D97757" />
              </a>
            </li>
          </ul>
        </div>

        {/* Trust */}
        <div>
          <div className="font-ui text-muted" style={{ fontSize: 11, letterSpacing: "0.2em", fontWeight: 600 }}>
            TRUST
          </div>
          <ul className="mt-4 flex flex-col gap-3 font-body text-body" style={{ fontSize: 14 }}>
            <li className="flex items-center gap-2"><Icon name="Lock" size={16} color="#1F6B5B" /> Secure checkout</li>
            <li className="flex items-center gap-2"><Icon name="Download" size={16} color="#1F6B5B" /> Instant PDF · Yours forever</li>
            <li className="flex items-center gap-2"><Icon name="Globe" size={16} color="#1F6B5B" /> Delivered worldwide</li>
            <li className="flex items-center gap-2"><Icon name="Mail" size={16} color="#1F6B5B" /> 24-hour email support</li>
          </ul>
        </div>

        {/* Contact */}
        <div>
          <div className="font-ui text-muted" style={{ fontSize: 11, letterSpacing: "0.2em", fontWeight: 600 }}>
            CONTACT
          </div>
          <a href="mailto:support@theborntoknow.com"
             className="font-display text-ink hover:text-gold-h block mt-4"
             style={{ fontSize: 16, fontWeight: 600, textDecoration: "none", wordBreak: "break-all" }}>
            support@theborntoknow.com
          </a>
          <p className="font-hand text-gold-h mt-2" style={{ fontSize: 16 }}>we read every email</p>
          <p className="font-body text-muted mt-4" style={{ fontSize: 12, lineHeight: 1.6 }}>
            For press, partnerships, or bulk licensing inquiries — get in touch.
          </p>
        </div>
      </div>

      {/* Disclaimer + copyright */}
      <div className="container-x pt-6 pb-10 md:pb-24">
        <div className="border-t border-line/60 pt-8 flex flex-col gap-5">
          {/* Top row: disclaimer */}
          <div className="flex flex-col md:flex-row md:items-start gap-4 justify-between">
            <div style={{ maxWidth: 480 }}>
              <div className="font-ui text-muted" style={{ fontSize: 10, letterSpacing: "0.22em", fontWeight: 600 }}>
                IMPORTANT NOTE
              </div>
              <p className="font-body text-muted mt-2" style={{ fontSize: 12, lineHeight: 1.55 }}>
                The Baby Blueprint is provided for educational and informational purposes only. It is not medical advice.
                Always consult a licensed pediatrician or qualified healthcare professional for concerns about your child's
                health, growth, behavior, or development.
              </p>
            </div>
          </div>
          {/* Bottom row: policy links + copyright */}
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3"
               style={{ borderTop: "1px solid rgba(200,162,74,0.15)", paddingTop: 14 }}>
            <PolicyFooterLinks onOpen={(key) => window.__openPolicy && window.__openPolicy(key)} />
            <div className="font-body text-muted flex-shrink-0" style={{ fontSize: 12 }}>
              © {new Date().getFullYear()} Born to Know. All rights reserved.
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { FAQSection, FinalCTA, Footer });
