/* Christa Niering · Refined Life Coaching — Home page (uses shared.jsx shell) */

const { useState, useEffect } = React;

const IMG = (id, w = 1400) => `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=${w}&q=80`;
const IMG_HERO = IMG("1500534623283-312aade485b7");   // sunrise over mountains — refining light
const IMG_ABOUT = IMG("1441974231531-c6227db76b6e");  // golden forest walk — the journey

/* ============================================================
 * 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)" }}>
          <FlameMark size={13} color="var(--terracotta)" />
          <span className="smallcaps">Refined Life Coaching · Faith-Based Healing for Women</span>
          <span style={{ flex: 1, height: 1, background: "var(--rule)" }} />
          <span className="smallcaps" style={{ color: "var(--walnut-soft)" }}>South Carolina · Online everywhere</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 }}>
              You know God<br />loves you.<br />
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>You just can't</span><br />
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>feel it — yet.</span>
            </h1>
            <p style={{ fontSize: 22, lineHeight: 1.4, color: "var(--walnut)", maxWidth: 540, marginBottom: 36, fontWeight: 300 }}>
              For the woman who's doing everything right and still feels stuck, tired, and far from Him.<br />
              <span className="serif-italic" style={{ color: "var(--walnut-soft)", fontSize: 18 }}>I've been there. You don't have to walk through the fire alone.</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 Free Conversation <span className="arrow">→</span></a>
              <a href="about.html" className="btn btn-ghost">Read My Story</a>
            </div>
            <div style={{ maxWidth: 540, fontSize: 17, lineHeight: 1.7, color: "var(--walnut-soft)", borderTop: "1px solid var(--rule)", paddingTop: 28 }}>
              <p style={{ marginBottom: 14 }}>
                You've read the books. You've prayed the prayers. You've sat in church and small groups and told everyone you're fine. And still, quietly, at the end of the day — you feel empty, alone, and so tired of being here.
              </p>
              <p>
                That's not a faith problem. It's a head-to-heart problem.{" "}
                <span style={{ color: "var(--walnut)", fontStyle: "italic", fontFamily: "'Source Serif 4', serif" }}>You can know you're loved and still not feel it. My work is helping you close that distance — gently, without judgment — until what you know becomes something you can finally feel.</span>
              </p>
            </div>
          </div>

          <div style={{ position: "relative", minHeight: 680 }}>
            <Placeholder label="Morning light" src={IMG_HERO} 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(44,40,37,0.35)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14, color: "var(--terracotta)" }}>
                <ButterflyMark size={15} color="var(--terracotta)" />
                <span className="smallcaps" style={{ color: "var(--terracotta)" }}>Jeremiah 29:11</span>
              </div>
              <p className="serif-italic" style={{ fontSize: 18, lineHeight: 1.4, color: "var(--walnut)", fontWeight: 300 }}>
                "For I know the plans I have for you… plans to give you hope and a future."
              </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 a few new clients</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * STATS STRIP
 * ============================================================ */
function Stats() {
  const stats = [
    { n: "10", unit: "yrs", l: "A decade of active healing" },
    { n: "1:1", unit: "", l: "Always — never a group program" },
    { n: "5.0", unit: "", l: "Client reviews", sub: "★★★★★" },
    { n: "5–15", unit: "wks", l: "At your pace, not mine" },
  ];
  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(248,244,237,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
 * ============================================================ */
function Pillars() {
  const pillars = [
    { n: "I", title: "Grace Before Growth", body: "You are already loved — before you change a single thing. We don't earn our way to God; we come as we are. Every session begins here, because shame and striving can't heal what only grace was ever meant to hold." },
    { n: "II", title: "Every Part Welcome", body: "Using gentle parts work, we make room for all of you — even the parts you've hidden or judged. The anxious one, the angry one, the tired one. None of them are the enemy. Each is carrying something that deserves to be heard." },
    { n: "III", title: "The Body Remembers", body: "Grief and betrayal don't only live in your thoughts — they live in your body. We slow down enough to notice what your nervous system has been holding, so that healing can reach the places words never could." },
    { n: "IV", title: "Comfort for the Younger You", body: "Some of what hurts today began a long time ago, in a younger you who needed comforting and didn't get it. Together we go back with kindness, and give that little one what she was missing all along." },
  ];

  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 }}>✦ What this work rests on</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.6vw, 64px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
            Four things this work is built on—{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>and grace holds all of them.</span>
          </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>
                <FlameMark size={13} color="var(--sage)" />
              </div>
              <h3 className="display" style={{ fontSize: 22, fontWeight: 500, color: "var(--walnut)", marginBottom: 16, lineHeight: 1.15 }}>{p.title}</h3>
              <p style={{ fontSize: 15.5, lineHeight: 1.6, 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="The journey" src={IMG_ABOUT} objectPosition="center" 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)" }}>Walked it first</div>
              <div className="display" style={{ fontSize: 28, fontWeight: 500, lineHeight: 1 }}>10 yrs</div>
              <div className="smallcaps" style={{ fontSize: 9, marginTop: 4, color: "var(--cream)" }}>Of healing</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 life ended somewhere I never thought I'd be.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>That's where God found me.</span>
            </h2>
            <div style={{ fontSize: 17.5, lineHeight: 1.7, color: "var(--walnut-soft)", marginBottom: 22 }}>
              <p style={{ marginBottom: 14 }}>
                I'm Christa. For twenty years I was in a hard marriage — and I believed that if I could just stay okay, we'd be okay. When I wasn't, everything fell apart. I lost myself trying to be enough for everyone but me.
              </p>
              <p style={{ marginBottom: 14 }}>
                When it finally ended, I had no idea who I was. I was empty, alone, and I felt broken.{" "}
                <span className="serif-italic" style={{ color: "var(--walnut)", fontSize: 19 }}>Then I found one small thread of hope — and God pulled me the rest of the way by that thread.</span>
              </p>
              <p>A decade of healing later, I finally learned to grieve, to feel, and to be loved by God without earning it. Now I walk that road with other women — not as an expert, but as someone who's been there.</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)" }}>— Christa</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(44,40,37,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.55, color: p.featured ? "var(--cream-2)" : "var(--walnut-soft)", marginBottom: 24 }}>{p.pitch}</p>
        <div style={{ paddingTop: 18, borderTop: p.featured ? "1px solid rgba(248,244,237,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 Refining Room", sub: "1:1 Coaching", tag: "The heart of my work", format: "Weekly 1-hour sessions · 5, 10, or 15 weeks · completely private, fully focused on you", pitch: "Just you and me, in a safe and private space, walking gently through what's hard — one hour at a time, at your pace. This is where the real, personal healing happens.", cta: "Start Here", featured: true },
    { n: "02", name: "The Sisterhood", sub: "A Small Circle", tag: "Opening soon", format: "A small circle of women · monthly gathering · connection, encouragement & prayer", pitch: "For the woman who's healing and longs for companionship — a small circle of sisters walking the same road. Not group therapy; a place to be seen, encouraged, and reminded you're not alone.", cta: "Join the Waitlist" },
    { n: "03", name: "The First Thread", sub: "Self-Paced", tag: "Opening soon", format: "Gentle reflections & simple practices · in your own time · begin whenever you're ready", pitch: "Not ready to talk yet? Start with a quiet set of reflections and practices you can hold on your own — a first thread of hope to follow, whenever you're ready to reach for it.", cta: "Get Notified" },
  ];
  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: 0.98, fontWeight: 500, maxWidth: 720 }}>
              Three gentle ways to{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>begin.</span>
            </h2>
          </div>
          <a href="work-with-me.html" className="btn btn-ghost">See how we'd work <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 REFINING PATH — framework
 * ============================================================ */
function Framework() {
  const [active, setActive] = useState(0);
  const phases = [
    { verb: "Uncover", sub: "What's really here", body: "We start gently, with prayer, and simply notice what's coming up for you right now. No agenda — just honest, kind attention to what your heart has been carrying, and permission to finally look at it.", items: ["We begin with prayer", "What's surfacing today", "Named without judgment", "Safe, unhurried, private"] },
    { verb: "Connect", sub: "Head to heart", body: "This is the bridge most of us are missing. You can know the truth in your head and still not feel it in your heart. We slow down and let the knowing travel the distance — until what's true becomes something you can actually feel.", items: ["Closing the head–heart gap", "Letting yourself feel again", "Curiosity over judgment", "Sensing God's nearness"] },
    { verb: "Comfort", sub: "Tending the hurt parts", body: "We turn toward the tender, hurting parts of you — and the protectors that have worked so hard to keep you safe — and we bring them comfort. Often this reaches a younger you who has been waiting a very long time to be held.", items: ["Gentle parts work", "Reassuring the protectors", "Reparenting the younger you", "Comfort where it's needed most"] },
    { verb: "Renew", sub: "Rebuilding what you believe", body: "As the hurt is comforted, the lies it was holding lose their grip. We rebuild what you believe about yourself and about God — from striving and shame to grace and belonging. Not a new self. The real you, refined.", items: ["Releasing the old lies", "Rebuilding core belief", "Grace-rooted identity in Christ", "Moving forward without fear"] },
  ];

  return (
    <section className="section" style={{ background: "var(--walnut)", color: "var(--cream)", position: "relative", overflow: "hidden" }}>
      <div aria-hidden style={{ position: "absolute", right: "-2vw", top: "8%", opacity: 0.05, pointerEvents: "none" }}>
        <FlameMark size={360} color="var(--cream)" />
      </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 Refining Path</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5.6vw, 80px)", lineHeight: 0.98, color: "var(--cream)", fontWeight: 500 }}>
            How we walk through the fire—{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>together.</span>
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid rgba(248,244,237,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(248,244,237,0.55)", textAlign: "left", padding: "24px 8px 20px", cursor: "pointer", borderRight: i < 3 ? "1px solid rgba(248,244,237,0.12)" : "none" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--terracotta)" }}>0{i + 1}</span>
                <FlameMark size={12} color={active === i ? "var(--terracotta)" : "rgba(248,244,237,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(248,244,237,0.04)", borderLeft: "1px solid rgba(248,244,237,0.12)", borderRight: "1px solid rgba(248,244,237,0.12)", borderBottom: "1px solid rgba(248,244,237,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 }}>Step 0{active + 1} of 04</div>
            <p style={{ fontSize: "clamp(22px, 2.6vw, 32px)", lineHeight: 1.35, 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(248,244,237,0.18)", paddingLeft: 32 }}>
            <div className="smallcaps" style={{ color: "var(--terracotta)" }}>In this step</div>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 12, color: "rgba(248,244,237,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>
  );
}

/* ============================================================
 * QUIET THOUGHTS — enhanced section (her ideal client's exact words)
 * ============================================================ */
function QuietThoughts() {
  const thoughts = [
    "I just feel stuck, and I'm so tired of being here.",
    "I know God loves me — I just have a hard time feeling it.",
    "I really should be over this by now, but I'm still sad, or hurt, or angry.",
    "I know the Bible says I should forgive. I just can't seem to forget.",
    "If people knew the real me, I'd be all alone.",
    "If I let myself actually feel the pain, I'm not sure I'd survive it.",
    "Something huge happened — and I don't feel anything at all.",
    "I apologize for everything. Even when I know it's not my fault.",
  ];
  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 }}>✦ The things you've only said to yourself</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.6vw, 64px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
              You've only ever said these to yourself.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Not anymore.</span>
            </h2>
            <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.65, color: "var(--walnut-soft)", maxWidth: 420 }}>
              If any of these live quietly in you, please hear this: you are not broken, and you are not alone. These are the exact aches I sit with women in — gently, without judgment — until they loosen their grip.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid var(--rule-strong)" }}>
            {thoughts.map((t, i) => (
              <div key={i} style={{ padding: "26px 28px 28px", borderBottom: i < thoughts.length - 2 ? "1px solid var(--rule)" : "none", borderRight: i % 2 === 0 ? "1px solid var(--rule)" : "none" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
                  <span className="mono" style={{ fontSize: 11, color: "var(--terracotta)" }}>0{i + 1}</span>
                  <ButterflyMark size={13} color="var(--sage)" />
                </div>
                <p className="serif-italic" style={{ fontSize: 19, lineHeight: 1.45, color: "var(--walnut)", fontWeight: 300 }}>"{t}"</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * TESTIMONIALS (real reviews only — new practice, no fabrication)
 * ============================================================ */
function Testimonials() {
  const t = [
    { quote: "Christa's gentle guidance and joyful countenance immediately put me at ease. She listened and asked amazing questions, and I was amazed by her insight and the godly wisdom this precious girl has.", hi: "That is quite honestly life-changing — in the most positive, fantastic way.", name: "Connie", meta: "★★★★★ · Google review" },
    { quote: "Just finished my session with Christa and it went very well. I couldn't believe that so quickly she was able to walk me through some things I've been dealing with.", hi: "She is so approachable and easy to talk to.", name: "B.", meta: "After her first session" },
    { quote: "I had a long-time family struggle I've dealt with for years. I was apprehensive about discussing it — but her insight helped me see it in a whole new way, from a different perspective.", hi: "I am so grateful for my breakthrough — I could sing it from the rooftops.", name: "Connie", meta: "★★★★★ · Google review" },
  ];

  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 24, gap: 32, flexWrap: "wrap" }}>
          <div>
            <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ First stories</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 76px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500, maxWidth: 800 }}>
              The first women who{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>said yes.</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 }}>Every review, 5 stars</div>
            </div>
          </div>
        </div>
        <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720, marginBottom: 48, fontStyle: "italic", fontFamily: "'Source Serif 4', serif" }}>
          Refined Life Coaching is a new practice. These are real, unedited words from the very first women I've had the honor of walking with.
        </p>

        <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.55, 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.4, fontWeight: 400 }}>{q.hi}</p>
              <figcaption style={{ borderTop: "1px solid var(--rule)", paddingTop: 16, display: "flex", alignItems: "center", gap: 12 }}>
                <span style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--terracotta)", color: "var(--cream)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <ButterflyMark size={16} color="var(--cream)" />
                </span>
                <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 the stories →
          </a>
        </div>
      </div>
    </section>
  );
}

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

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