/* Krystal Larkins Consulting — Home page (uses shared.jsx shell) */

const { useState, useEffect } = React;

/* ============================================================
 * HERO (page-specific)
 * ============================================================ */
function Hero() {
  return (
    <section
      style={{
        padding: "clamp(40px, 6vw, 80px) clamp(28px, 6vw, 96px) clamp(80px, 10vw, 140px)",
        position: "relative",
      }}
    >
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 56, color: "var(--walnut-soft)" }}>
          <CircleMark size={6} color="var(--terracotta)" />
          <span className="smallcaps">Krystal Larkins Consulting · Grounded-In-Christ Mentorship</span>
          <span style={{ flex: 1, height: 1, background: "var(--rule)" }} />
          <span className="smallcaps" style={{ color: "var(--walnut-soft)" }}>Remote · across the U.S.</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.25fr 1fr", gap: "clamp(40px, 5vw, 80px)", alignItems: "stretch" }}>
          <div>
            <h1 className="display" style={{ fontSize: "clamp(48px, 7.2vw, 112px)", color: "var(--walnut)", marginBottom: 32 }}>
              Healing is slower,<br />
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>softer,</span> and more<br />
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>human</span> than you<br />
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>were told.</span>
            </h1>
            <p style={{ fontSize: 22, lineHeight: 1.45, color: "var(--walnut)", maxWidth: 540, marginBottom: 36, fontWeight: 300 }}>
              Nearly two decades in ministry and mentoring. A nervous system that learned safety slowly.<br />
              <span className="serif-italic" style={{ color: "var(--walnut-soft)", fontSize: 18 }}>I'm still learning to exhale — and I'd love to walk it with you.</span>
            </p>
            <div style={{ display: "flex", gap: 14, marginBottom: 56, flexWrap: "wrap" }}>
              <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary">Book a Grounded Conversation <span className="arrow">→</span></a>
              <a href="work-with-me.html" className="btn btn-ghost">See How We Work</a>
            </div>
            <div style={{ maxWidth: 540, fontSize: 17, lineHeight: 1.75, color: "var(--walnut-soft)", borderTop: "1px solid var(--rule)", paddingTop: 28 }}>
              <p style={{ marginBottom: 14 }}>
                You've read the verses. You've tried praying it through. You've held it together for everyone else. And still — at 2 a.m., your body won't relax. Your shoulders won't drop. You can't remember what calm feels like.
              </p>
              <p>
                That's not a faith problem. That's a nervous system that's been carrying too much, for too long.{" "}
                <span style={{ color: "var(--walnut)", fontStyle: "italic", fontFamily: "'Source Serif 4', serif" }}>Healing doesn't have to feel harsh to be holy. Body, heart, and faith — gentle, whole-person, and anchored in Christ.</span>
              </p>
            </div>
          </div>

          <div style={{ position: "relative", minHeight: 680 }}>
            <Placeholder
              label="A woman in stillness · soft morning light"
              src="https://images.unsplash.com/photo-1475938476802-32a7e851dad1?auto=format&fit=crop&w=1200&q=80"
              objectPosition="center"
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", borderRadius: 2, overflow: "hidden" }}
            />

            <div style={{ position: "absolute", left: "-48px", bottom: "-36px", background: "var(--cream)", border: "1px solid var(--rule)", padding: "28px 30px 24px", maxWidth: 340, boxShadow: "0 24px 60px -30px rgba(31,26,20,0.35)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14, color: "var(--terracotta)" }}>
                <CrossMark size={10} color="var(--terracotta)" />
                <span className="smallcaps" style={{ color: "var(--terracotta)" }}>Hebrews 6:19</span>
              </div>
              <p className="serif-italic" style={{ fontSize: 18, lineHeight: 1.45, color: "var(--walnut)", fontWeight: 300 }}>
                "We have this hope as an anchor for our lives, safe and secure."
              </p>
            </div>

            <div className="grotesk" style={{ position: "absolute", top: 24, right: 24, background: "var(--walnut)", color: "var(--cream)", padding: "10px 14px", borderRadius: 999, display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: "var(--terracotta)" }} />
              <span style={{ fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase" }}>Now accepting · gentle openings this spring</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * STATS STRIP
 * ============================================================ */
function Stats() {
  const stats = [
    { n: "20+", unit: "yrs", l: "In ministry & mentoring" },
    { n: "12", unit: "", l: "Foster children · loved" },
    { n: "5.0", unit: "", l: "Endorsements", sub: "★★★★★" },
    { n: "1", unit: "", l: "Mission · whole-person healing" },
  ];
  return (
    <section style={{ padding: "44px clamp(28px, 6vw, 96px)", background: "var(--walnut)", color: "var(--cream)" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 40 }}>
        {stats.map((s, i) => (
          <div key={i} style={{ display: "flex", alignItems: "baseline", gap: 16, borderLeft: i === 0 ? "none" : "1px solid rgba(250,246,240,0.18)", paddingLeft: i === 0 ? 0 : 32 }}>
            <div className="display" style={{ fontSize: 44, fontWeight: 500, color: "var(--cream)", letterSpacing: "-0.04em", display: "flex", alignItems: "baseline", gap: 6, whiteSpace: "nowrap" }}>
              <span>{s.n}</span>
              {s.unit && <span style={{ fontSize: 18, fontWeight: 400, color: "var(--cream)", opacity: 0.7, letterSpacing: "0.02em" }}>{s.unit}</span>}
            </div>
            <div>
              <div className="smallcaps" style={{ color: "var(--terracotta)", opacity: 0.95, fontSize: 10 }}>{s.l}</div>
              {s.sub && <div style={{ marginTop: 4, color: "var(--cream)", letterSpacing: "0.2em", fontSize: 12 }}>{s.sub}</div>}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============================================================
 * 4 PILLARS — The Grounded-In-Christ Method
 * ============================================================ */
function Pillars() {
  const pillars = [
    { n: "I", title: "Body First", body: "Trauma lives in the body too. Before insight, before pressure, before another spiritual checklist — we slow down enough for your nervous system to remember what safety feels like. Grounding, breath, regulation." },
    { n: "II", title: "Ground in Christ", body: "Not 'try harder spiritually.' A quiet, sturdy belonging — anchored in who you already are in Christ, not in how today went or how much you got done. Identity over performance. Safety over striving." },
    { n: "III", title: "Stabilize Emotion", body: "Survival-mode women learn to override what they feel. We undo that — gently. Naming without shame. Recognizing overwhelm before it spirals. Responding instead of reacting. Emotion as information, not failure." },
    { n: "IV", title: "Protect Peace", body: "Healing only lasts if your life supports it. Honest boundaries. Gentle daily rhythms. Small, sustainable practices that hold the peace you've worked so hard to find — instead of letting the old patterns steal it back." },
  ];

  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2.4fr", gap: 64, alignItems: "start", marginBottom: 72 }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ The Grounded-In-Christ Method</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.6vw, 64px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
            Whole-person healing rests on{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>four gentle pillars</span>
            —body, identity, emotion, and rhythm.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid var(--rule-strong)" }}>
          {pillars.map((p, i) => (
            <div key={p.n} style={{ padding: "40px 32px 48px", borderRight: i < 3 ? "1px solid var(--rule)" : "none" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 28 }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--terracotta)" }}>{p.n}</span>
                <CrossMark size={12} color="var(--sage)" />
              </div>
              <h3 className="display" style={{ fontSize: 22, fontWeight: 500, color: "var(--walnut)", marginBottom: 16, lineHeight: 1.18 }}>{p.title}</h3>
              <p style={{ fontSize: 15.5, lineHeight: 1.65, color: "var(--walnut-soft)" }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * ABOUT PREVIEW
 * ============================================================ */
function AboutPreview() {
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: "clamp(40px, 6vw, 100px)", alignItems: "center" }}>
          <div style={{ position: "relative" }}>
            <Placeholder
              label="Krystal · candid portrait"
              src={PORTRAIT_URL}
              objectPosition="center top"
              style={{ aspectRatio: "3 / 4", width: "100%" }}
            />
            <div style={{ position: "absolute", bottom: -28, right: -28, width: 140, height: 140, background: "var(--terracotta)", color: "var(--cream)", borderRadius: "50%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", padding: 18 }}>
              <div className="smallcaps" style={{ fontSize: 9, marginBottom: 4, color: "var(--cream)" }}>Mentor · Mother</div>
              <div className="display" style={{ fontSize: 28, fontWeight: 500, lineHeight: 1 }}>20+ yrs</div>
              <div className="smallcaps" style={{ fontSize: 9, marginTop: 4, color: "var(--cream)" }}>Ministry & care</div>
            </div>
          </div>

          <div>
            <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 20 }}>✦ My story</div>
            <h2 className="display" style={{ fontSize: "clamp(34px, 4.4vw, 60px)", color: "var(--walnut)", lineHeight: 1.05, marginBottom: 30, fontWeight: 500 }}>
              My world shattered.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>God carried me through.</span>
            </h2>
            <div style={{ fontSize: 17.5, lineHeight: 1.75, color: "var(--walnut-soft)", marginBottom: 22 }}>
              <p style={{ marginBottom: 14 }}>
                I'm Krystal. I studied psychology and Christian leadership, married a pastor, and spent years pouring myself into ministry — homeschooling my children, fostering twelve over eight years, adopting my youngest two. For a long time my life revolved around being present for everyone who needed me.
              </p>
              <p style={{ marginBottom: 14 }}>
                Then my world shattered. Grief, betrayal, trauma I never imagined. For a long season, survival was all I could manage.{" "}
                <span className="serif-italic" style={{ color: "var(--walnut)", fontSize: 19 }}>What I slowly learned is that trauma doesn't live only in the mind or spirit. It lives in the body — and pushing harder doesn't heal what overwhelm has been holding.</span>
              </p>
              <p>God met me the way He met Elijah: first with rest, nourishment, gentleness, and safety. That softer path is the one I now walk with women.</p>
            </div>

            <div style={{ display: "flex", alignItems: "center", gap: 18, marginTop: 28 }}>
              <div className="display" style={{ fontSize: 32, fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--walnut)" }}>— Krystal</div>
              <div style={{ flex: 1, height: 1, background: "var(--rule)" }} />
              <a href="about.html" className="grotesk" style={{ fontSize: 13, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--terracotta)", borderBottom: "1px solid var(--terracotta)", paddingBottom: 2 }}>
                Read the full story →
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * 3 PROGRAMS
 * ============================================================ */
function ProgramCard({ p }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: p.featured ? "var(--walnut)" : "var(--cream-2)",
        color: p.featured ? "var(--cream)" : "var(--walnut)",
        padding: "36px 32px",
        position: "relative",
        transition: "transform 0.3s, box-shadow 0.3s",
        transform: hover ? "translateY(-6px)" : "none",
        boxShadow: hover ? "0 30px 60px -30px rgba(31,26,20,0.4)" : "none",
        display: "flex", flexDirection: "column", minHeight: 460,
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 60 }}>
        <span className="mono" style={{ fontSize: 12, color: "var(--terracotta)" }}>{p.n}</span>
        <span className="smallcaps" style={{ fontSize: 10, background: p.featured ? "var(--terracotta)" : "transparent", color: p.featured ? "var(--cream)" : "var(--terracotta)", border: p.featured ? "none" : "1px solid var(--terracotta)", padding: "5px 10px", borderRadius: 999 }}>
          {p.tag}
        </span>
      </div>
      <div style={{ flex: 1 }}>
        <h3 className="display" style={{ fontSize: 32, fontWeight: 500, lineHeight: 1.05, marginBottom: 6, letterSpacing: "-0.025em" }}>{p.name}</h3>
        <div className="serif-italic" style={{ fontSize: 18, color: p.featured ? "var(--cream-3)" : "var(--walnut-soft)", marginBottom: 28 }}>{p.sub}</div>
        <p style={{ fontSize: 16, lineHeight: 1.6, color: p.featured ? "var(--cream-2)" : "var(--walnut-soft)", marginBottom: 24 }}>{p.pitch}</p>
        <div style={{ paddingTop: 18, borderTop: p.featured ? "1px solid rgba(250,246,240,0.15)" : "1px solid var(--rule)", fontSize: 13.5, lineHeight: 1.55, color: p.featured ? "var(--cream-3)" : "var(--walnut-soft)" }}>{p.format}</div>
      </div>
      <a href="work-with-me.html" className="grotesk" style={{ marginTop: 30, fontSize: 13, letterSpacing: "0.1em", textTransform: "uppercase", color: p.featured ? "var(--cream)" : "var(--walnut)", display: "inline-flex", alignItems: "center", gap: 10 }}>
        <span style={{ borderBottom: `1px solid ${p.featured ? "var(--cream)" : "var(--walnut)"}`, paddingBottom: 2 }}>{p.cta}</span>
        <span className="arrow" style={{ display: "inline-block", transition: "transform 0.3s", transform: hover ? "translateX(6px)" : "none" }}>→</span>
      </a>
    </div>
  );
}

function Programs() {
  const programs = [
    { n: "01", name: "The Grounded Path", sub: "3-Month 1:1 Mentorship", tag: "Flagship", format: "12+ weekly 60-min sessions · written reflections · gentle micro-practices · grounded between-session support · 3-month minimum because healing needs time", pitch: "An unrushed, soft-but-deep 1:1 mentorship for the woman who is ready to come home to her body, her heart, and her God. Three months minimum — survival mode doesn't unlearn itself overnight, and it shouldn't have to.", cta: "Apply Gently", featured: true },
    { n: "02", name: "The Steady Companion", sub: "Call-free Voice & Text Coaching", tag: "Limited spots", format: "Monthly 60-min deep-dive · voice and text support across the week · real-time grounding when life gets loud · minimum 3 months", pitch: "For the woman whose week is already too full for weekly calls — but who still needs a steady, regulated presence walking beside her. Monthly deep-dives plus voice and text support in the small, real moments that matter most.", cta: "Request a Spot" },
    { n: "03", name: "Coming Home to Yourself", sub: "Self-Paced Course", tag: "Always open", format: "4 modules (Soften · Anchor · Feel · Tend) · short audio practices · gentle journaling · Scripture meditations · lifetime access · never overwhelming", pitch: "The Grounded-In-Christ Method at your own pace. Short audio practices, gentle prompts, nervous-system tools, and Scripture meditation — designed for women whose lives have no room for one more pressure.", cta: "Begin Gently" },
  ];
  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 56, gap: 32, flexWrap: "wrap" }}>
          <div>
            <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Work With Me</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 76px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500, maxWidth: 720 }}>
              Three soft doorways into the{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>same gentle work.</span>
            </h2>
          </div>
          <a href="work-with-me.html" className="btn btn-ghost">Compare paths <span className="arrow">→</span></a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {programs.map((p, i) => <ProgramCard key={i} p={p} />)}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * THE GROUNDED-IN-CHRIST FRAMEWORK — 4-phase journey
 * ============================================================ */
function Framework() {
  const [active, setActive] = useState(0);
  const phases = [
    { verb: "Soften", sub: "the body", body: "Before strategy. Before insight. Before more verses. We slow down enough for your nervous system to come out of survival mode. Grounding, breath, regulation — your body remembering what safety feels like is the floor everything else stands on.", items: ["Slowing the nervous system", "Naming what's happening in your body", "Permission to rest without guilt", "Gentle daily anchors"] },
    { verb: "Anchor", sub: "in Christ", body: "The deepest healing for an overwhelmed woman isn't a stricter spiritual routine. It's a sturdier sense of who you already are in Christ — a quiet, kind belonging that doesn't depend on how today went or how much you got done. Identity over performance.", items: ["Identity rooted, not earned", "Scripture as nourishment, not pressure", "Encountering a gentle Father", "Releasing performance-based faith"] },
    { verb: "Feel", sub: "without shame", body: "Survival-mode women learn to override their emotions. We undo that — slowly, gently, with compassion. You learn to recognize overwhelm before it consumes you. You learn that what you feel is information, not failure. You learn to respond instead of spiral.", items: ["Emotional awareness without shame", "Naming, not numbing", "Compassionate self-talk", "Regulation tools that actually work"] },
    { verb: "Tend", sub: "your peace", body: "Healing only lasts if your life supports it. We build the boundaries, rhythms, and small daily practices that protect the peace you've worked so hard to find. Not another performance. A sustainable life — one your body, heart, and faith can actually live inside.", items: ["Kind, honest boundaries", "Sustainable daily rhythms", "Boundaries without guilt", "A life that supports your healing"] },
  ];

  return (
    <section className="section" style={{ background: "var(--walnut)", color: "var(--cream)", position: "relative", overflow: "hidden" }}>
      <div aria-hidden style={{ position: "absolute", right: "-4vw", top: "10%", fontSize: "30vw", fontFamily: "'Source Serif 4', serif", fontStyle: "italic", fontWeight: 300, color: "rgba(250,246,240,0.04)", lineHeight: 1, pointerEvents: "none" }}>⚓</div>

      <div className="container" style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "start", marginBottom: 56 }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)" }}>✦ The journey</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5.6vw, 80px)", lineHeight: 1.0, color: "var(--cream)", fontWeight: 500 }}>
            From survival mode{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>back to peace.</span>
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid rgba(250,246,240,0.18)" }}>
          {phases.map((p, i) => (
            <button key={i} onClick={() => setActive(i)} style={{ background: "transparent", border: "none", borderTop: active === i ? `3px solid var(--terracotta)` : "3px solid transparent", marginTop: -1, color: active === i ? "var(--cream)" : "rgba(250,246,240,0.55)", textAlign: "left", padding: "24px 8px 20px", cursor: "pointer", borderRight: i < 3 ? "1px solid rgba(250,246,240,0.12)" : "none" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--terracotta)" }}>0{i + 1}</span>
                <CrossMark size={10} color={active === i ? "var(--terracotta)" : "rgba(250,246,240,0.4)"} />
              </div>
              <div className="display" style={{ fontSize: 30, fontWeight: 500, marginTop: 18, letterSpacing: "-0.02em" }}>{p.verb}</div>
              <div className="serif-italic" style={{ fontSize: 16, opacity: 0.7, marginTop: 2 }}>{p.sub}</div>
            </button>
          ))}
        </div>

        <div style={{ background: "rgba(250,246,240,0.04)", borderLeft: "1px solid rgba(250,246,240,0.12)", borderRight: "1px solid rgba(250,246,240,0.12)", borderBottom: "1px solid rgba(250,246,240,0.12)", padding: "44px clamp(28px, 5vw, 64px)", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60, alignItems: "center", minHeight: 280 }}>
          <div>
            <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 18 }}>Phase 0{active + 1} of 04</div>
            <p style={{ fontSize: "clamp(22px, 2.6vw, 32px)", lineHeight: 1.4, color: "var(--cream)", fontWeight: 300, fontFamily: "'Source Serif 4', serif", fontStyle: "italic", maxWidth: 640 }}>
              {phases[active].body}
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 16, borderLeft: "1px solid rgba(250,246,240,0.18)", paddingLeft: 32 }}>
            <div className="smallcaps" style={{ color: "var(--terracotta)" }}>In this phase</div>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 12, color: "rgba(250,246,240,0.85)", fontSize: 15.5 }}>
              {phases[active].items.map((t, i) => (
                <li key={i} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <DiamondMark size={7} color="var(--terracotta)" /> {t}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * WHAT NO ONE SEES — unique enhanced section for Krystal
 * (mirrors Barry's "2 a.m. thoughts" with the hidden-behaviors
 *  cluster that defines an overwhelmed woman in survival mode)
 * ============================================================ */
function WhatNoOneSees() {
  const moments = [
    { t: "03:18 AM", q: "Lying awake replaying every sigh, every snap, every harder-than-she-meant moment from yesterday." },
    { t: "06:42 AM", q: "Crying in the shower because it's the only place no one interrupts." },
    { t: "11:09 AM", q: "Sitting on the pantry floor for sixty seconds just to breathe before going back out to everyone." },
    { t: "02:33 PM", q: "Smiling at the school pickup line while her shoulders haven't unclenched all day." },
    { t: "07:55 PM", q: "Snapping at the kids over something tiny — then drowning in guilt all evening." },
    { t: "10:21 PM", q: "Scrolling Instagram next to her husband, feeling emotionally invisible. Too tired to name it." },
  ];
  return (
    <section className="section" style={{ background: "var(--cream-2)", position: "relative" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "start" }}>
          <div>
            <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ What no one sees</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.6vw, 64px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
              She holds it together for everyone.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Almost no one sees the cost.</span>
            </h2>
            <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.7, color: "var(--walnut-soft)", maxWidth: 420 }}>
              If any of these is a quiet scene from your life — you're not broken, you're not failing, and you're not too far gone. You're a woman who has been carrying too much for too long. That's exactly what this work is for.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid var(--rule-strong)" }}>
            {moments.map((m, i) => (
              <div key={i} style={{ padding: "26px 28px 28px", borderBottom: i < moments.length - 2 ? "1px solid var(--rule)" : "none", borderRight: i % 2 === 0 ? "1px solid var(--rule)" : "none" }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--terracotta)", marginBottom: 14 }}>0{i + 1} · {m.t}</div>
                <p className="serif-italic" style={{ fontSize: 19, lineHeight: 1.5, color: "var(--walnut)", fontWeight: 300 }}>"{m.q}"</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * TESTIMONIALS
 * ============================================================ */
function Testimonials() {
  const t = [
    { quote: "I came into coaching believing I was failing God because I couldn't stop feeling anxious and overwhelmed. Krystal helped me understand what was happening in my body without shame. I no longer feel trapped in constant self-criticism.", hi: "I feel more grounded, emotionally steady, and secure in God's love for me.", name: "A woman finding steadiness", meta: "After 12 weeks of mentorship" },
    { quote: "For the first time in years, I don't feel like I'm drowning inside my own mind. I still have hard moments, but now I know how to slow down, ground myself, and reconnect with God instead of spiraling.", hi: "I'm more present with my children and finally starting to feel peace in my body again.", name: "A mother in coaching", meta: "After 3 months of mentorship" },
    { quote: "Krystal is my go-to for advice on how to calm down and reframe my thinking. She always has the words I need to get a hold of my emotions so I can return to rational thinking.", hi: "She remains my favorite source for Biblical wisdom with practical psychology methods mixed in.", name: "Stacey", meta: "Friend & former boss" },
  ];

  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 56, gap: 32, flexWrap: "wrap" }}>
          <div>
            <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Stories of steadiness</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 76px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500, maxWidth: 800 }}>
              Women learning to{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>exhale again.</span>
            </h2>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
            <div className="display" style={{ fontSize: 44, color: "var(--walnut)" }}>5.0</div>
            <div>
              <div style={{ color: "var(--terracotta)", letterSpacing: "0.18em", fontSize: 14 }}>★★★★★</div>
              <div className="smallcaps" style={{ color: "var(--walnut-soft)", marginTop: 4 }}>Honest endorsements</div>
            </div>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {t.map((q, i) => (
            <figure key={i} style={{ background: "var(--cream-2)", padding: "36px 32px 32px", display: "flex", flexDirection: "column", position: "relative" }}>
              <div aria-hidden style={{ position: "absolute", top: 12, left: 24, fontFamily: "'Source Serif 4', serif", fontStyle: "italic", fontWeight: 300, fontSize: 90, color: "var(--terracotta)", opacity: 0.25, lineHeight: 1 }}>"</div>
              <blockquote style={{ fontSize: 17, lineHeight: 1.6, color: "var(--walnut-soft)", marginBottom: 18, fontFamily: "'Source Serif 4', serif", flex: 1, position: "relative", zIndex: 1, marginTop: 14 }}>{q.quote}</blockquote>
              <p className="serif-italic" style={{ fontSize: 19, color: "var(--walnut)", marginBottom: 26, lineHeight: 1.45, fontWeight: 400 }}>{q.hi}</p>
              <figcaption style={{ borderTop: "1px solid var(--rule)", paddingTop: 16, display: "flex", alignItems: "center", gap: 12 }}>
                <Placeholder label="" style={{ width: 36, height: 36, borderRadius: "50%" }} />
                <div>
                  <div className="grotesk" style={{ fontSize: 14, fontWeight: 500, color: "var(--walnut)" }}>{q.name}</div>
                  <div className="smallcaps" style={{ color: "var(--walnut-soft)", fontSize: 9 }}>{q.meta}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>

        <div style={{ marginTop: 40, textAlign: "center" }}>
          <a href="testimonials.html" className="grotesk" style={{ fontSize: 13, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--terracotta)", borderBottom: "1px solid var(--terracotta)", paddingBottom: 3 }}>
            Read all stories →
          </a>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * APP
 * ============================================================ */
function App() {
  return (
    <>
      <Nav current="home" />
      <main>
        <Hero />
        <Stats />
        <Pillars />
        <AboutPreview />
        <Programs />
        <Framework />
        <WhatNoOneSees />
        <Testimonials />
        <CTA />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
