/* Julie Janes · GraceLife Coaching — Home page (uses shared.jsx shell) */

const { useState, useEffect } = React;

/* ============================================================
 * HERO
 * ============================================================ */
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">GraceLife Coaching · Grace-Led Transformation</span>
          <span style={{ flex: 1, height: 1, background: "var(--rule)" }} />
          <span className="smallcaps" style={{ color: "var(--walnut-soft)" }}>Milwaukee · Remote</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.4vw, 116px)", color: "var(--walnut)", marginBottom: 24, lineHeight: 0.95 }}>
              You've been performing love your whole life.
            </h1>
            <p className="serif-italic" style={{ fontSize: "clamp(22px, 2.4vw, 28px)", color: "var(--terracotta)", lineHeight: 1.35, marginBottom: 32, fontWeight: 300 }}>
              He's been waiting to just love you back.
            </p>
            <div style={{ fontSize: 17, lineHeight: 1.7, color: "var(--walnut-soft)", maxWidth: 540, marginBottom: 36 }}>
              <p style={{ marginBottom: 14 }}>
                You read every self-help book. You showed up to church. You smiled through Sunday. And still — somewhere quiet — you feel unseen, unloved, and exhausted from trying to earn what was always freely given.
              </p>
              <p className="serif-italic" style={{ color: "var(--walnut)", fontSize: 18 }}>
                That's not a willpower problem. That's a wound that needs Jesus — not another strategy. GraceLife Coaching is where the wound finally meets the healer.
              </p>
            </div>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
              <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary">Book a Heart Connection Call <span className="arrow">→</span></a>
              <a href="work-with-me.html" className="btn btn-ghost">Learn More</a>
            </div>
          </div>

          <div style={{ position: "relative", minHeight: 680 }}>
            <Placeholder
              src="https://images.unsplash.com/photo-1574197635162-68e4b468e4e9?auto=format&fit=crop&w=900&q=85"
              alt="Soft light through sheer curtain"
              objectPosition="center center"
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", borderRadius: 2 }}
            />

            <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(46,58,41,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)" }}>Philippians 4:13</span>
              </div>
              <p className="serif-italic" style={{ fontSize: 18, lineHeight: 1.4, color: "var(--walnut)", fontWeight: 300 }}>
                "I can do all things through Christ who strengthens me."
              </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 · new clients</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * STATS STRIP
 * ============================================================ */
function Stats() {
  const stats = [
    { n: "20+", unit: "yrs", l: "business & ministry" },
    { n: "Women", unit: "", l: "Toward freedom", sub: "coached" },
    { n: "5.0", unit: "", l: "Endorsements", sub: "★★★★★" },
    { n: "1", unit: "", l: "grace-led transformation", sub: "mission" },
  ];
  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(239,241,232,0.18)", paddingLeft: i === 0 ? 0 : 32 }}>
            <div className="display" style={{ fontSize: 44, fontWeight: 500, color: "rgba(239,241,232,1)", letterSpacing: "-0.04em", display: "flex", alignItems: "baseline", gap: 6, whiteSpace: "nowrap" }}>
              <span>{s.n}</span>
              {s.unit && <span style={{ fontSize: 18, fontWeight: 400, color: "rgba(239,241,232,1)", 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: "rgba(239,241,232,1)", letterSpacing: "0.2em", fontSize: 12 }}>{s.sub}</div>}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============================================================
 * 4 PILLARS
 * ============================================================ */
function Pillars() {
  const pillars = [
    { n: "I", title: "Identity in Christ", body: "You were created loved, chosen, and redeemable. Not because of your performance — because of His grace. Until you know who you are in Him, every other change is just behavior management." },
    { n: "II", title: "Inner Healing", body: "Jesus doesn't just meet you at the altar on Sunday. He meets you in the memory — the one you've been carrying since childhood. Holy Spirit-led inner healing is how the wound finally closes." },
    { n: "III", title: "Attachment & Belonging", body: "Most of us learned love was conditional. We perform, we shrink, we accept less than we deserve — just to stay close to someone. We untangle those patterns so you can finally receive love instead of earning it." },
    { n: "IV", title: "Grace-Led Freedom", body: "Change is the fruit, not the root. We don't shame you into different behavior. We heal the shame — and transformation follows naturally, the way fruit follows a healthy tree." },
  ];

  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 four pillars</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.6vw, 64px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
            The work rests on{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>four pillars</span>
            {" "}— each one essential, none optional.
          </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.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
              src="https://assets.cdn.filesafe.space/VUxT5WqlrIHpkaSRllVC/media/6a2227adda24932f1217f987.jpeg"
              alt="Julie Janes"
              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: "rgba(239,241,232,1)" }}>Coach · Healer</div>
              <div className="display" style={{ fontSize: 24, fontWeight: 500, lineHeight: 1 }}>20+ yrs</div>
              <div className="smallcaps" style={{ fontSize: 9, marginTop: 4, color: "rgba(239,241,232,1)" }}>In life & ministry</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 marriage fell apart. My business almost did too.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Jesus didn't.</span>
            </h2>
            <div style={{ fontSize: 17.5, lineHeight: 1.7, color: "var(--walnut-soft)", marginBottom: 22 }}>
              <p style={{ marginBottom: 14 }}>
                I'm Julie Janes. Business owner for over 20 years. Survivor of a marriage to an addict, financial collapse, grief, and an aching loneliness I masked with a smile. I went to food pantries while paying my employees first. I visited my husband in rehab, in jail, in prison — and somehow thought if I just loved him better, he'd get clean.
              </p>
              <p>
                When Tim died suddenly in 2020, I finally stopped running. I found a grief class, a church that felt like home, and then — slowly — I found myself again.{" "}
                <span className="serif-italic" style={{ color: "var(--walnut)", fontSize: 18 }}>What I learned in that excavation is what I now bring to every session. Not theory. Not a method I read about. The road I actually walked.</span>
              </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)" }}>— Julie</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(46,58,41,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 ? "rgba(239,241,232,1)" : "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(239,241,232,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 ? "rgba(239,241,232,1)" : "var(--walnut)", display: "inline-flex", alignItems: "center", gap: 10 }}>
        <span style={{ borderBottom: `1px solid ${p.featured ? "rgba(239,241,232,1)" : "var(--walnut)"}`, paddingBottom: 2 }}>Learn More</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: "Grace & Truth", sub: "6-Month 1:1 Coaching", tag: "Flagship", format: "Weekly 60-min sessions · recorded & transcribed · connection exercises · weekly check-ins · lifetime access to session notes", pitch: "An hour a week, beginning and ending in prayer. We uncover the wound, bring Jesus into the memory, and let Holy Spirit do what no strategy ever could. This is where the deepest transformation happens.", featured: true },
    { n: "02", name: "GraceLife Circle", sub: "Small Group Cohort", tag: "Cohort", format: "Monthly group calls · shared rhythms · peer connection · community of belonging", pitch: "A vetted circle of women walking the same road. Not a Bible study. A sacred space where the real stuff gets said, heard, and healed — together, under Holy Spirit's guidance." },
    { n: "03", name: "Renew Your Mind", sub: "Digital Course · Romans 12:2", tag: "Self-Paced", format: "5 video modules · workbook · audio prayer tracks · journaling prompts · lifetime access", pitch: "The GraceLife framework at your own pace. Five modules walking you through identity, inner healing, attachment, and grace-led transformation — with journaling prompts and audio prayers." },
  ];
  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 doorways into{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>the same grace.</span>
            </h2>
          </div>
          <a href="work-with-me.html" className="btn btn-ghost">Compare programs <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>
  );
}

/* ============================================================
 * FRAMEWORK — 4 phases with tab UI
 * ============================================================ */
function Framework() {
  const [active, setActive] = useState(0);
  const phases = [
    { verb: "Uncover", sub: "The Wound", body: "We go beneath the behavior to the belief. Your intake form is the starting place, but we dig deeper — into the childhood memory, the formed conviction, the place where you first learned that love had to be earned. We name it. We don't skip it.", items: ["Family-of-origin map", "Childhood wounds surfaced", "Formed beliefs named", "The lie beneath the behavior"] },
    { verb: "Encounter", sub: "Jesus in the Pain", body: "This is the heartbeat of the work. We bring the wound into the room and invite Jesus into it. Holy Spirit-led inner healing — not therapy, not analysis, but an actual encounter with the One who was there in the memory all along.", items: ["Inner healing prayer", "Holy Spirit-led memory healing", "Jesus meets the wound", "Love floods what shame built"] },
    { verb: "Release", sub: "The Coping & the Shame", body: "We let go of the performing, the shrinking, the accepting-less-than-you-deserve. The coping strategies that once protected you now keep you in the cell. We surrender them — not out of guilt, but out of the freedom that grace makes possible.", items: ["Shame separated from story", "Coping patterns surrendered", "Forgiveness extended", "Grace received, not earned"] },
    { verb: "Walk", sub: "In Identity & Freedom", body: "A healed woman walks differently. She says no without spiraling. She gets curious when triggered, not reactive. She breaks generational patterns her children were about to inherit. This is what GraceLife is building toward — one session at a time.", items: ["Identity rooted in Christ", "Triggers met with curiosity", "Generational patterns broken", "Legacy of freedom forward"] },
  ];

  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(239,241,232,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: 0.98, color: "rgba(239,241,232,1)", fontWeight: 500 }}>
            Your path from the wound{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>to freedom.</span>
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid rgba(239,241,232,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 ? "rgba(239,241,232,1)" : "rgba(239,241,232,0.55)", textAlign: "left", padding: "24px 8px 20px", cursor: "pointer", borderRight: i < 3 ? "1px solid rgba(239,241,232,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(239,241,232,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(239,241,232,0.04)", borderLeft: "1px solid rgba(239,241,232,0.12)", borderRight: "1px solid rgba(239,241,232,0.12)", borderBottom: "1px solid rgba(239,241,232,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.35, color: "rgba(239,241,232,1)", 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(239,241,232,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(239,241,232,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 SHE CARRIES ALONE — emotional anchor section
 * ============================================================ */
function WhatSheCarries() {
  const thoughts = [
    "I know God is always with me. I just... don't feel Him. I want more connection to God and to other people.",
    "If anyone knew how I really feel, they might leave. So I keep the ugly thoughts to myself.",
    "I accept far more than I should, just so I have some friends and don't end up alone.",
    "I act out when I'm triggered, and then I hate how I treated the person I love most.",
    "I put on a happy face. But I feel so sad inside. And I'm exhausted from the performance.",
    "I know I have childhood hurts that shaped me. I just don't know where to even begin.",
  ];
  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 she carries alone</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.6vw, 64px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
              You've never said these out loud.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>I know, because I couldn't either.</span>
            </h2>
            <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.65, color: "var(--walnut-soft)", maxWidth: 420 }}>
              If any of these is the loop you can't stop running — you're not broken. You're a woman carrying wounds that were never meant to be carried alone. That's exactly what GraceLife is for.
            </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 - 1 && 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: 8, marginBottom: 14 }}>
                  <CrossMark size={9} color="var(--terracotta)" />
                  <span className="smallcaps" style={{ color: "var(--terracotta)", fontSize: 9 }}>What she carries</span>
                </div>
                <p className="serif-italic" style={{ fontSize: 19, lineHeight: 1.45, color: "var(--walnut)", fontWeight: 300 }}>"{t}"</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * TESTIMONIALS (3 on home)
 * ============================================================ */
function Testimonials() {
  const t = [
    { quote: "I learned to get curious when I was triggered — when I would normally lash out and wound others, I got more introspective. I started to recognize that my childhood wounds caused my triggers.", hi: "My husband noticed I wasn't attacking him anymore. For the first time, I felt like I was actually healing, not just managing.", name: "K", meta: "Wife · Healing journey" },
    { quote: "I leaned into releasing overresponsibility over the feelings of my adult children. In the past, I accepted all their pain and anger as my fault.", hi: "I've apologized for my part and moved on with love and compassion for them. I didn't know that was possible.", name: "R", meta: "Mother · Released from guilt" },
    { quote: "I realized a pattern of grooming and manipulation from a long-time 'friend' — something I had never been able to see before. Julie helped me name it.", hi: "I found a healthy, honoring way to let go — without shame, without guilt, and without losing myself.", name: "J", meta: "Reclaimed boundaries" },
  ];

  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 healing</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 76px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500, maxWidth: 800 }}>
              Women who came{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>home to themselves.</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 }}>Client 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.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 }}>
                <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 />
        <WhatSheCarries />
        <Testimonials />
        <CTA />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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