// components/HomeSections.jsx

function Hero({ titleStyle = "editorial" }) {
  return (
    <section className={`hero hero-textonly title-${titleStyle}`}>
      <div className="wrap">
        {titleStyle === "stamp" ? (
          <div className="hero-stamp-eyebrow">
            <span className="hero-stamp-num">№ 01</span>
            <span className="hero-stamp-rule" aria-hidden="true"></span>
            <span>Hey there</span>
          </div>
        ) : (
          <div className="eyebrow">NORTH COUNTY SD - TEMECULA VALLEY - VIRTUAL</div>
        )}
        {titleStyle === "editorial" && (
          <h1 className="display hero-editorial">
            <span className="hero-editorial-greet">Hey There,<span className="hero-editorial-wave" aria-hidden="true">👋</span></span>
            <span className="hero-editorial-main">let's<br/>babywear</span>
          </h1>
        )}
        {titleStyle === "stamp" && (
          <h1 className="display hero-stamp-title">
            <em>let's babywear.</em>
          </h1>
        )}
        <p className="lede hero-sub" style={{ maxWidth: 620, marginTop: 28 }}>
          I'm Evangelina. I'll sit on the rug with you, pour you a cup of tea, and help you figure out this whole carrying-a-small-human thing. Dads, moms, adoptive parents, grandparents, uncles and aunties — grab a pouf and join me.
        </p>
        <div className="hero-cta">
          <a href="book.html" className="btn btn-primary">Come meet me →</a>
          <a href="#classes" className="btn btn-ghost">Workshops — coming soon</a>
        </div>
        <div className="hero-meta hero-meta-wide">
          <div><strong>3 yrs</strong><span>Of carrying</span></div>
          <div><strong>Hundreds</strong><span>Of hugs supported</span></div>
          <div><strong>42</strong><span>CARRIERS TO TRY</span></div>
        </div>
      </div>
    </section>
  );
}

function ValuesStrip({ variant = "ledger" }) {
  if (variant === "grid") return <ValuesGrid />;
  if (variant === "contrast") return <ValuesContrast />;
  if (variant === "marquee") return <ValuesMarquee />;
  if (variant === "qa") return <ValuesQA />;
  if (variant === "manifesto") return <ValuesManifesto />;
  return <ValuesLedger />;
}

function ValuesShell({ children, dashed = true, bg = "var(--cream-2)" }) {
  return (
    <section style={{ background: bg, borderTop: dashed ? "1px dashed rgba(122,92,62,0.3)" : "none", borderBottom: dashed ? "1px dashed rgba(122,92,62,0.3)" : "none" }}>
      <div className="wrap">{children}</div>
    </section>
  );
}

/* 1. Editorial manifesto */
function ValuesManifesto() {
  return (
    <ValuesShell>
      <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
        <div className="eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>The promise</div>
        <p className="display" style={{ fontSize: "clamp(28px, 3.4vw, 44px)", lineHeight: 1.25, marginTop: 22, fontWeight: 400, textWrap: "pretty" }}>
          There is no <em style={{ color: "var(--clay)" }}>right body</em> for a carrier,
          no <em style={{ color: "var(--clay)" }}>right family</em> shape,
          no <em style={{ color: "var(--clay)" }}>right budget</em>,
          and no <em style={{ color: "var(--clay)" }}>right baby</em>.
          The carrier adjusts to you. The seat on the rug is already pulled out.
        </p>
        <div style={{ marginTop: 26, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--walnut)" }}>
          — Evangelina
        </div>
      </div>
    </ValuesShell>
  );
}

/* 2. Original 4-column grid */
function ValuesGrid() {
  const items = [
    { t: "No “right” body", s: "Postpartum, plus-size, petite, post-surgery, adaptive — the carrier adjusts to you, not the other way around." },
    { t: "No “right” family", s: "Adoptive, foster, single, blended, two-mom, two-dad, grandparents raising again — there's a seat on the rug for you." },
    { t: "No “right” budget", s: "Sliding-scale consults, a free lending library, and pro-bono slots each month. Cost should never be the reason." },
    { t: "No “right” baby", s: "Newborn curls, big toddlers, twins, reflux, low tone, sensory needs — we meet your baby where they are today." }
  ];
  return (
    <ValuesShell>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28 }} className="values-strip">
        {items.map((i, k) =>
          <Reveal key={k} delay={k * 80}>
            <div className="kicker">0{k + 1}</div>
            <h3 className="display h3" style={{ marginTop: 10, marginBottom: 10 }}>{i.t}</h3>
            <p style={{ color: "var(--ink-soft)", fontSize: 15, margin: 0 }}>{i.s}</p>
          </Reveal>
        )}
      </div>
      <style>{`@media (max-width: 860px) { .values-strip { grid-template-columns: 1fr 1fr !important; } }`}</style>
    </ValuesShell>
  );
}

/* 3. A/B contrast list */
function ValuesContrast() {
  const pairs = [
    { not: "The “right” body", but: "The body you have today" },
    { not: "The “right” family", but: "Whoever shows up to love this baby" },
    { not: "The “right” budget", but: "What you can spend without flinching" },
    { not: "The “right” baby", but: "The actual baby in the room" }
  ];
  return (
    <ValuesShell>
      <div style={{ maxWidth: 820, margin: "0 auto" }}>
        <div className="eyebrow">What this is, what this isn't</div>
        <div style={{ marginTop: 28, display: "grid", gap: 0 }}>
          {pairs.map((p, k) =>
            <Reveal key={k} delay={k * 70}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "baseline", gap: 24, padding: "20px 0", borderBottom: "1px solid rgba(122,92,62,0.18)" }} className="contrast-row">
                <div style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--walnut)", textAlign: "right", opacity: 0.7 }}>
                  Not <span style={{ textDecoration: "line-through", textDecorationColor: "var(--clay)" }}>{p.not.toLowerCase()}</span>
                </div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--walnut)", opacity: 0.5 }}>0{k + 1}</div>
                <div className="display" style={{ fontSize: "clamp(20px, 2vw, 26px)", fontStyle: "italic", color: "var(--ink)" }}>
                  {p.but}
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
      <style>{`@media (max-width: 720px) { .contrast-row { grid-template-columns: 1fr !important; gap: 6px !important; text-align: left !important; } .contrast-row > div:first-child { text-align: left !important; } }`}</style>
    </ValuesShell>
  );
}

/* 4. Slow marquee of welcomes */
function ValuesMarquee() {
  const words = ["every body", "every family", "every budget", "every baby", "every carrier", "every day", "every shape", "every story"];
  const row = [...words, ...words, ...words];
  return (
    <ValuesShell dashed={false} bg="var(--ink)">
      <div style={{ textAlign: "center", padding: "12px 0 32px" }}>
        <div className="eyebrow" style={{ color: "var(--oat)", justifyContent: "center", display: "inline-flex" }}>Welcome, welcome</div>
      </div>
      <div className="vm-track-wrap">
        <div className="vm-track">
          {row.map((w, k) =>
            <span key={k} className="vm-word">
              <span>{w}</span>
              <span className="vm-dot">✦</span>
            </span>
          )}
        </div>
      </div>
      <style>{`
        .vm-track-wrap { overflow: hidden; mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); }
        .vm-track { display: inline-flex; gap: 0; white-space: nowrap; animation: vm-scroll 60s linear infinite; will-change: transform; }
        .vm-word { display: inline-flex; align-items: center; gap: 28px; padding: 0 28px; color: var(--cream); font-family: var(--serif); font-style: italic; font-size: clamp(36px, 5vw, 64px); font-weight: 400; }
        .vm-dot { color: var(--marigold); font-size: 0.55em; font-style: normal; }
        @keyframes vm-scroll { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
      `}</style>
    </ValuesShell>
  );
}

/* 5. Q&A */
function ValuesQA() {
  const qa = [
    { q: "Am I too plus-size for this?", a: "No. Most modern carriers are sized for real bodies, and the ones that aren't, I won't recommend. We'll find one that fits you the way it should." },
    { q: "We adopted — does babywearing still help?", a: "Often even more. Closeness on the body regulates breathing, heart rate, and trust. We'll go gently and at your baby's pace." },
    { q: "Honestly, can I afford this?", a: "Sliding-scale consults, a free lending library, monthly pro-bono slots, and free meetups. Tell me what's true for your budget and we'll work from there." }
  ];
  return (
    <ValuesShell>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 60, alignItems: "start" }} className="qa-grid">
        <div>
          <div className="eyebrow">What people actually ask</div>
          <h2 className="display h2" style={{ marginTop: 14, fontSize: "clamp(32px, 3.6vw, 48px)" }}>
            The questions <em>before</em> the questions.
          </h2>
        </div>
        <div>
          {qa.map((it, k) =>
            <Reveal key={k} delay={k * 90}>
              <div style={{ padding: "26px 0", borderTop: "1px solid rgba(122,92,62,0.22)" }}>
                <div className="display" style={{ fontSize: 22, fontStyle: "italic", color: "var(--ink)", marginBottom: 10 }}>"{it.q}"</div>
                <p style={{ color: "var(--ink-soft)", margin: 0, maxWidth: 560 }}>{it.a}</p>
              </div>
            </Reveal>
          )}
        </div>
      </div>
      <style>{`@media (max-width: 860px) { .qa-grid { grid-template-columns: 1fr !important; gap: 24px !important; } }`}</style>
    </ValuesShell>
  );
}

/* 6. Hand-written ledger / signed promise */
function ValuesLedger() {
  return (
    <ValuesShell dashed={false} bg="var(--cream-2)">
      <div style={{ display: "flex", justifyContent: "center" }}>
        <div className="ledger-card">
          <div className="ledger-tape ledger-tape-l"></div>
          <div className="ledger-tape ledger-tape-r"></div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--walnut)", opacity: 0.7 }}>The Promise · est. 2026</div>
          <div className="display" style={{ fontSize: "clamp(22px, 2.4vw, 30px)", lineHeight: 1.45, marginTop: 22, fontWeight: 400, color: "var(--ink)" }}>
            I promise to meet you where you are.<br />
            However your body is feeling today.<br />
            The amount your mind can handle and no more.<br />
            Whatever emotions show up — from the tiny humans or the big ones.<br />
            I will not ask for perfection, just for effort.
          </div>
          <div style={{ marginTop: 32, display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 12 }}>
            <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 32, color: "var(--clay)", lineHeight: 1, transform: "rotate(-3deg)" }}>Evangelina</div>
            <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--walnut)", opacity: 0.7 }}>signed in tea, on a Tuesday</div>
          </div>
        </div>
      </div>
      <style>{`
        .ledger-card {
          position: relative;
          background: #FBF6EA;
          padding: 48px clamp(28px, 5vw, 64px);
          max-width: 720px; width: 100%;
          border: 1px solid rgba(122,92,62,0.18);
          box-shadow: 0 1px 0 rgba(122,92,62,0.06), 0 24px 60px -30px rgba(43,32,21,0.2);
          background-image: repeating-linear-gradient(to bottom, transparent 0 38px, rgba(122,92,62,0.06) 38px 39px);
        }
        .ledger-tape { position: absolute; top: -14px; width: 90px; height: 26px; background: var(--sage); border: 1px dashed rgba(122,92,62,0.25); opacity: 0.92; }
        .ledger-tape-l { left: 28px; transform: rotate(-6deg); }
        .ledger-tape-r { right: 28px; transform: rotate(5deg); }
      `}</style>
    </ValuesShell>
  );
}

function ServicesSection() {
  const services = [
    {
      title: "Fit-Check",
      price: "$25 · 15 min",
      desc: "A no-pressure virtual fit check. Bring your carrier, your baby, your questions.",
      bullets: ["Quick safety check", "Adjustment tips for your body", "Carrier-shopping shortlist", "Can be extended by 15 minute increments if needed", "Includes one week of follow-up messages as you settle into the new fit"],
      variant: "cream",
      art: "sun",
      mono: "01"
    },
    {
      title: "1:1 Consultation",
      price: "$80 · 60 min",
      desc: "Hands-on, in-home. Try from my lending library, or learn your carriers inside and out. End the session wearing your baby and feeling prepared to do life again.",
      bullets: ["**Includes travel within Temecula and North County SD", "Includes 2 weeks of follow-up messages by text or DM"],
      variant: "walnut",
      art: "concentric",
      mono: "02",
      note: "*Please inquire about an additional travel fee for locations outside these areas."
    },
    {
      title: "Postpartum Package",
      price: "$295 · 3 visits",
      desc: "Three in-home visits across your baby's first twelve weeks as their body (and yours) changes.",
      bullets: ["75 mins each session", "Week 1, 6, and 12", "Includes support through the 12 weeks by text, email, or DM", "* Includes travel within Temecula and North County SD"],
      variant: "moss",
      art: "arch",
      mono: "03",
      note: "*Please inquire about an additional travel fee for locations outside these areas."
    }
  ];

  return (
    <section id="services">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Services</div>
            <h2 className="display h2" style={{ marginTop: 12 }}>Let's sit down, get comfy, and try stuff on.</h2>
          </div>
          <p>Every session starts with a cup of tea and a question: <em>What does a good day of carrying look like for you?</em> We go from there.</p>
        </div>
        <div className="services-grid">
          {services.map((s, k) =>
            <Reveal key={k} delay={k * 100}>
              <div className="card service">
                <Ph variant="cream" art={s.art} mono={s.mono} monoStyle="corner" hideArt={true} />
                <div>
                  <div className="service-price">{s.price}</div>
                  <h3 className="service-title" style={{ marginTop: 6 }}>{s.title}</h3>
                </div>
                <p style={{ color: "var(--ink-soft)", margin: 0 }}>{s.desc}</p>
                <ul className="service-list">
                  {s.bullets.map((b, i) => <li key={i}>{b}</li>)}
                </ul>
                {s.note && <p style={{ fontSize: 12, color: "var(--ink-soft)", margin: "-4px 0 0", fontStyle: "italic", lineHeight: 1.4 }}>{s.note}</p>}
                <a href="book.html" className="btn btn-ghost" style={{ alignSelf: "flex-start", marginTop: "auto" }}>Book this →</a>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>
  );
}

function AboutSection() {
  return (
    <section id="about" style={{ background: "var(--paper)" }}>
      <div className="wrap">
        <div className="about-grid">
          <Reveal>
            <div className="about-card-wrap">
              <div className="about-card">
                <div className="about-card-corners" aria-hidden="true">
                  <span></span><span></span><span></span><span></span>
                </div>
                <div className="about-card-eyebrow">A portrait, soon</div>
                <div className="about-card-name">
                  Evangelina <em>Galyean</em>
                </div>
                <div className="about-card-role">Babywearing Educator · Fallbrook, CA</div>
                <div className="about-card-rule"></div>
                <dl className="about-card-meta">
                  <div><dt>Est.</dt><dd>2026</dd></div>
                  <div><dt>Carrying</dt><dd>3 yrs &amp; counting</dd></div>
                  <div><dt>Carriers in library</dt><dd>42</dd></div>
                  <div><dt>Speaks</dt><dd>English</dd></div>
                </dl>
                <div className="about-card-quote">
                  "I'll meet you where you are — and we'll figure the rest out together."
                </div>
                <div className="about-card-sig">— Evangelina</div>
              </div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <h2 className="display h2">
              Hi, I'm Evangelina. My intro to motherhood <em>kicked my butt</em>.
            </h2>
            <p style={{ color: "var(--ink-soft)", marginTop: 20, fontSize: 17 }}>
              I was trying to do all of the things before my body or my baby was ready. Both were trying to give me hints, sometimes not so subtle. Determination and desperation kept me from listening, until they both demanded I stop and check in.
            </p>
            <p style={{ color: "var(--ink-soft)", fontSize: 17 }}>
              When I finally slowed down I realized all my body and baby wanted was for me to be present and slow down. They did not ask for perfection, just regulation and recovery — but I had to surrender to it. Sometimes that is the hardest part.
            </p>
            <p style={{ color: "var(--ink-soft)", fontSize: 17 }}>
              This is what I hope to bring to families — a reason and a moment to slow down and check in. Look into your sweet child's eyes and feel their heartbeat against yours as you snuggle a little closer. This is what babywearing in <strong style={{ color: "var(--ink)" }}>REAL LIFE</strong> is all about.
            </p>
            <dl className="about-facts">
              <div><dt>Certified</dt><dd>CBWS · Center for Babywearing Studies</dd></div>
              <div><dt>Languages</dt><dd>English</dd></div>
            </dl>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function TestimonialsSection() {
  return (
    <section className="t-bg">
      <div className="wrap">
        <div className="ts-empty">
          <div className="ts-empty-corners" aria-hidden="true">
            <span></span><span></span><span></span><span></span>
          </div>
          <div className="eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>In your words, soon</div>
          <h2 className="display h2 ts-empty-title">
            This is the part where the families I sit with will tell you how it went.
          </h2>
          <p className="ts-empty-body">
            I'm just getting started, which means there are no quotes here yet — and I'd rather leave the page honest than fill it with stock kindness.
            If we work together and you'd ever want to share a few sentences about what babywearing meant for your real life, I'd treasure it.
          </p>
          <div className="ts-empty-cta">
            <a href="book.html" className="btn btn-primary">Be one of the first families →</a>
          </div>
          <div className="ts-empty-sig">— Evangelina</div>
        </div>
      </div>
    </section>
  );
}

function CarriersSection() {
  const carriers = [
    { name: "Stretchy wrap", ages: ["newborn"], bodies: ["any"], vibe: "Softest intro. A giant T-shirt for your baby. Great if you're nervous.", variant: "cream", art: "cloth", mono: "S", tag: "easiest" },
    { name: "Ring sling", ages: ["newborn", "older"], bodies: ["any", "plus"], vibe: "One shoulder, fast on and off. A grocery-run favorite. Post-surgery friendly.", variant: "clay", art: "concentric", mono: "R" },
    { name: "Woven wrap", ages: ["newborn", "older", "toddler"], bodies: ["any", "plus"], vibe: "Infinitely adjustable. A whole art form. Supportive for long carries.", variant: "walnut", art: "knot", mono: "W", tag: "most versatile" },
    { name: "Soft structured (buckles)", ages: ["older", "toddler"], bodies: ["any", "plus", "adaptive"], vibe: "Clip, click, go. Dads often love these. Easy to share between caregivers.", variant: "moss", art: "arch", mono: "B" },
    { name: "Meh dai", ages: ["newborn", "older", "toddler"], bodies: ["any"], vibe: "Ties like a wrap, shaped like a buckle carrier. Gentle on shoulders.", variant: "cream", art: "sun", mono: "M" },
    { name: "Onbuhimo", ages: ["older", "toddler"], bodies: ["any"], vibe: "No waist strap. A gift if you're postpartum, bloated, or wearing over a belt or harness.", variant: "walnut", art: "cloth", mono: "O" }
  ];

  const [ageF, setAgeF] = React.useState("all");
  const [bodyF, setBodyF] = React.useState("all");

  const filtered = carriers.filter((c) =>
    (ageF === "all" || c.ages.includes(ageF)) &&
    (bodyF === "all" || c.bodies.includes(bodyF))
  );

  return (
    <section id="carriers">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Carriers 101</div>
            <h2 className="display h2" style={{ marginTop: 14 }}>
              Find a carrier that fits <em>you.</em>
            </h2>
          </div>
          <p>Filter by baby's stage and by what your body needs. Nothing here is ranked — they're just different tools for different days.</p>
        </div>
        <div className="carriers">
          <aside>
            <div className="filter-group" style={{ marginBottom: 24 }}>
              <h4>Baby's stage</h4>
              <div className="chip-row">
                {[["all", "Any"], ["newborn", "Newborn"], ["older", "3–12 mo"], ["toddler", "Toddler+"]].map(([v, l]) =>
                  <button key={v} className={`chip ${ageF === v ? "active" : ""}`} onClick={() => setAgeF(v)}>{l}</button>
                )}
              </div>
            </div>
            <div className="filter-group">
              <h4>Your body</h4>
              <div className="chip-row">
                {[["all", "Any body"], ["plus", "Plus size"], ["adaptive", "Adaptive / disabled"], ["any", "Petite"]].map(([v, l]) =>
                  <button key={v} className={`chip ${bodyF === v ? "active" : ""}`} onClick={() => setBodyF(v)}>{l}</button>
                )}
              </div>
            </div>
            <hr className="divider" style={{ margin: "28px 0" }} />
            <p style={{ fontSize: 14, color: "var(--ink-soft)" }}>
              Not sure? Join a meetup to try on styles for free, or book a consult to dive deeper in the comfort of your own home.
            </p>
            <a href="book.html" className="btn btn-ghost" style={{ marginTop: 8 }}>Book a fit session →</a>
          </aside>
          <div>
            <div className="carrier-grid">
              {filtered.map((c, k) =>
                <Reveal key={c.name} delay={k * 60}>
                  <div className="carrier-item">
                    <Ph variant={c.variant} tag={c.tag} art={c.art} mono={c.mono} style={{ borderRadius: 0 }} />
                    <div className="carrier-body">
                      <div className="carrier-name">{c.name}</div>
                      <p style={{ margin: 0, fontSize: 14, color: "var(--ink-soft)" }}>{c.vibe}</p>
                      <div className="carrier-tags">
                        {c.ages.map((a) => <span className="carrier-tag" key={a}>{a}</span>)}
                        {c.bodies.filter((b) => b !== "any").map((b) => <span className="carrier-tag" key={b}>{b}</span>)}
                      </div>
                    </div>
                  </div>
                </Reveal>
              )}
              {filtered.length === 0 &&
                <div style={{ gridColumn: "1 / -1", padding: 40, textAlign: "center", color: "var(--ink-soft)" }}>
                  No carriers match. Try fewer filters, or come in — odds are we have something.
                </div>
              }
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ClassesSection() {
  const workshops = [
    { kw: "Newborn", title: "Newborn basics", body: "Snug & safe in the first six weeks. Stretchy wraps, ring slings, and the tiny adjustments that change everything.", dur: "90 min", size: "4 families" },
    { kw: "Wovens", title: "Wovens for beginners", body: "Demystify the wrap. We'll learn one carry, do it three times, and you'll leave able to do it without me.", dur: "2 hours", size: "5 families" },
    { kw: "Ring sling", title: "Master the ring sling", body: "The fastest carrier you'll ever own — once you trust it. Tail-tightening, shoulder-flip, and quick ups & downs.", dur: "75 min", size: "6 families" },
    { kw: "Toddlers", title: "Carrying older babies & toddlers", body: "Back carries, hip carries, and how to keep wearing a 30-pound human without wrecking your shoulders.", dur: "90 min", size: "5 families" },
  ];

  return (
    <section id="classes" style={{ background: "var(--cream-2)" }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Workshops</div>
            <h2 className="display h2" style={{ marginTop: 14 }}>
              Small-group workshops, <span className="wavy">coming soon.</span>
            </h2>
          </div>
          <p>Four workshops are in the oven. Dates land summer 2026. Here's what's on the menu — drop your email and I'll let you know when the first one opens.</p>
        </div>

        <div className="ws-grid">
          {workshops.map((w, i) => (
            <article key={i} className="ws-card">
              <div className="ws-card-top">
                <span className="ws-num">{String(i + 1).padStart(2, "0")}</span>
                <span className="ws-kw">{w.kw}</span>
              </div>
              <h3 className="ws-title">{w.title}</h3>
              <p className="ws-body">{w.body}</p>
              <div className="ws-meta">
                <span>{w.dur}</span>
                <span className="ws-meta-dot" aria-hidden="true">·</span>
                <span>{w.size}</span>
                <span className="ws-soon">Dates TBA</span>
              </div>
            </article>
          ))}
        </div>

        <div className="ws-notify">
          <p className="ws-notify-line">Want first dibs when sign-ups open?</p>
          <a href="#newsletter" className="btn btn-primary">Notify me when dates are live →</a>
        </div>
      </div>
    </section>
  );
}

function FAQSection() {
  const faqs = [
    { q: "I'm a dad and I've never worn a baby before. Will I feel out of place?", a: "Dads and non-birthing parents are always welcome in our sessions and groups, in fact it's preferred. Any adult living with little one would benefit from the instruction given." },
    { q: "I had a C-section. Can I still babywear?", a: "Yes, with the right carrier and adjustments. Ring slings, wovens, and onbuhimos keep weight off your belly; we can also pad around incisions. Come in when you're cleared to lift your baby, and we'll find something kind to your body." },
    { q: "I'm plus-size and most carriers I've seen online don't fit. Do you have options?", a: "Absolutely. There are several carrier styles that provide plus-size options, I carry some and we can discuss a full list as well. Varied sizes is not a problem here." },
    { q: "Do you work with adoptive and foster families?", a: "Yes, and I love this work. Babywearing can be a meaningful part of attachment and regulation for adopted and foster children of any age. Whether newborn or toddler, we can work together to make everyone's transition smoother. No rushing, all at little one's pace." },
    { q: "How much does a consult cost if I can't afford the full price?", a: "I am available to do virtual 1:1 consults for a lower fee. You are also welcome to join a free meetup within my Facebook group. Email me, we can find a way to work together." }
  ];

  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq">
      <div className="wrap">
        <div className="faq-grid">
          <div>
            <div className="eyebrow">FAQ</div>
            <h2 className="display h2" style={{ marginTop: 14 }}>Honest questions — gentle answers.</h2>
          </div>
          <div>
            {faqs.map((f, i) =>
              <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{f.q}</span>
                  <span className="faq-icon">+</span>
                </button>
                <div className="faq-a"><p style={{ marginTop: 14, marginBottom: 0 }}>{f.a}</p></div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function NewsletterSection({ titleKey = "tea" }) {
  const TITLES = {
    rug: "Notes from the rug.",
    shop: "Letters from the shop.",
    tea: "Things I'd tell you over tea or cocoa.",
    slow: "Slow notes, soft news.",
    monthly: "A little something monthly.",
    inbox: "From my rug to your inbox.",
    small: "Small things, sent gently.",
    wins: "Tea, notes, and small wins.",
  };
  const title = TITLES[titleKey] || TITLES.tea;
  const [email, setEmail] = React.useState("");
  const [status, setStatus] = React.useState({ kind: "", msg: "" });
  const submit = (e) => {
    e.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setStatus({ kind: "err", msg: "That email doesn't look right — can you check it?" });
      return;
    }
    setStatus({ kind: "ok", msg: `Welcome in. I'll send you one warm note a month to ${email}.` });
    setEmail("");
  };
  return (
    <section id="newsletter">
      <div className="wrap">
        <div className="newsletter">
          <div>
            <div className="eyebrow">Newsletter</div>
            <h2 className="display h2" style={{ marginTop: 12 }}>{title}</h2>
            <p style={{ marginTop: 18 }}>
              This is where I will share small wins, upcoming events, new carriers in the library, and other little ideas I want to make alive.
            </p>
          </div>
          <div>
            <form className="nl-form" onSubmit={submit} noValidate>
              <input
                type="email"
                placeholder="your@email.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                aria-label="Email"
              />
              <button className="btn" type="submit">Subscribe →</button>
            </form>
            <div className={`nl-status ${status.kind}`} role="status">{status.msg}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, ValuesStrip, ServicesSection, AboutSection, TestimonialsSection, CarriersSection, ClassesSection, FAQSection, NewsletterSection });