/* Kevin Wood · Head to Heart — 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">Head to Heart · heart-aligned coaching</span>
          <span style={{ flex: 1, height: 1, background: "var(--rule)" }} />
          <span className="smallcaps" style={{ color: "var(--walnut-soft)" }}>Maine · 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: 32 }}>
              You can't think<br />your way<br />
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>to a free</span><br />
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>heart.</span>
            </h1>
            <p style={{ fontSize: 22, lineHeight: 1.4, color: "var(--walnut)", maxWidth: 540, marginBottom: 36, fontWeight: 300 }}>
              Almost 39 years married — restored by grace.<br />
              <span className="serif-italic" style={{ color: "var(--walnut-soft)", fontSize: 18 }}>I walked out of performance into peace. I'll 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 Heart-Aligned Call <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 know what the Bible says. You've read the books. You've sat in church for years. And still — at the end of the day — you're stuck in your head, replaying the what-ifs, asking <em>am I enough?</em>, tired of performing for acceptance.
              </p>
              <p>
                That's not a knowledge problem. It's a head-and-heart problem.{" "}
                <span style={{ color: "var(--walnut)", fontStyle: "italic", fontFamily: "'Source Serif 4', serif" }}>You can know what the Bible says without ever letting it land in the place that needs to hear it. Head to Heart is the bridge — grace-rooted, judgment-free, connection-first.</span>
              </p>
            </div>
          </div>

          <div style={{ position: "relative", minHeight: 680 }}>
            <Placeholder label="Above the cloud line · perfect peace" src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1600&q=80&auto=format&fit=crop" 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,41,55,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)" }}>Isaiah 26:3</span>
              </div>
              <p className="serif-italic" style={{ fontSize: 18, lineHeight: 1.4, color: "var(--walnut)", fontWeight: 300 }}>
                "You will keep him in perfect peace whose mind is stayed on you, because he trusts you."
              </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: "30+", unit: "yrs", l: "Years on the healing road" },
    { n: "39", unit: "yrs", l: "Marriage · restored by grace" },
    { n: "25+", unit: "yrs", l: "Leadership · before the call" },
    { n: "1", unit: "", l: "Mission · head to heart" },
  ];
  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(238,241,245,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: "Identity in Christ", body: "Performance had me in a cage for years. Grace is what opened it. Self-worth that rides on what you do collapses every time. Self-worth rooted in Christ holds. Everything we do starts here." },
    { n: "II", title: "Encounter the Father", body: "Information teaches. Encounter heals. Holy-Spirit-led memory work, listening prayer, and the kind of meeting with God that has felt — for me — like drinking from a fire hose. This is where the lies actually leave." },
    { n: "III", title: "Inner Child & Reparenting", body: "Many of the beliefs running your life were set in place by a much younger version of you. We trace them back, sit with that child, and let them hear — often for the first time — what they should have heard." },
    { n: "IV", title: "Heart-Aligned Connection", body: "When the walls between your head and your heart come down, the walls in your marriage and your family come down too. The morning my wife came home is the work I now do — in different rooms, with different hearts." },
  ];

  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 of them 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 label="Kevin · candid portrait" src="https://assets.cdn.filesafe.space/3AdNZ1kU76nSJubuR9ds/media/6a1f9987bce897da752a1b32.jpg" objectPosition="center 20%" 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)" }}>Coach · Mentor</div>
              <div className="display" style={{ fontSize: 28, fontWeight: 500, lineHeight: 1 }}>30+ yrs</div>
              <div className="smallcaps" style={{ fontSize: 9, marginTop: 4, color: "var(--cream)" }}>On the road</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 }}>
              I almost lost my marriage.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>God showed up at my kitchen table.</span>
            </h2>
            <div style={{ fontSize: 17.5, lineHeight: 1.7, color: "var(--walnut-soft)", marginBottom: 22 }}>
              <p style={{ marginBottom: 14 }}>
                I'm Kevin Wood. Husband to Kim for almost 39 years. Father of two daughters, grandfather of four. Former plant manager. Former church-school director. And — for most of my adult life — a man performing his way through love, work, and faith because I had learned young that performance was the only currency that paid.
              </p>
              <p style={{ marginBottom: 14 }}>
                My parents divorced when I was a teenager. I built walls. I performed. Years later our marriage suffered a significant breach in trust and my wife wanted out — and the thing I had sworn would never happen to me was happening. I cannot describe what those months did to me.{" "}
                <span className="serif-italic" style={{ color: "var(--walnut)", fontSize: 19 }}>One night I wrote in my journal, in big bold letters: "I CAN'T DO THIS ANYMORE! I KNOW YOU CAN'T BUT I CAN!" A week later, my wife came home.</span>
              </p>
              <p>For thirty years since, God has been moving me out of my head — where performance lives — and into my heart, where He has always been. That's the work. That's all of it.</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)" }}>— Kevin</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,41,55,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(238,241,245,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 Heart-Aligned Path", sub: "1:1 Coaching · 1–6 months", tag: "Flagship", format: "Weekly 60-min sessions (sometimes twice/week in heavier seasons) · root-cause work · inner child & reparenting · somatic & prayer practices between calls", pitch: "One-on-one coaching for the man or woman who knows what the Bible says and can't figure out why they're not living it out. We trace the root, bring healing, and realign heart and head — at your pace.", cta: "Apply Now", featured: true },
    { n: "02", name: "The Connection Circle", sub: "Small Group · monthly", tag: "Invitation only", format: "Monthly 90-min small-group calls · shared rhythms · peer connection · written practices between sessions · for people walking the work with others", pitch: "A small, vetted group of people walking the heart-aligned road together. Connection without performance. Conversation without scripts. Designed for the people who don't want to do this alone.", cta: "Request an Invite" },
    { n: "03", name: "Renewing of the Mind", sub: "Self-Paced Course", tag: "Always open", format: "5 video modules (Notice · Root · Heal · Realign · Live) · workbook · somatic & prayer audio guides · lifetime access · companion email path", pitch: "The full Head to Heart framework at your own pace. Teaching, somatic practices, guided prayer, and the language of heart-aligned living. The doorway in for the person who isn't ready for 1:1 yet but can't stay in their head either.", cta: "Enroll Now" },
  ];
  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 the{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>heart-aligned life.</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>
  );
}

/* ============================================================
 * THE HEAD-TO-HEART FRAMEWORK
 * ============================================================ */
function Framework() {
  const [active, setActive] = useState(0);
  const phases = [
    { verb: "Notice", sub: "The Head Loop", body: "We start by naming what's actually running through you. The thoughts you can't quiet. The performance you can't put down. The verses you've memorized that aren't yet living. No shame — just honest noticing. The head loop has to be visible before it can be addressed.", items: ["Name the head loop", "Map current pain points", "Surface the 'should' you live under", "Honest self-awareness — no judgment"] },
    { verb: "Root", sub: "The Lie Beneath", body: "Every head loop is downstream of a belief — usually one you set up young, in a moment that taught you what love costs and what worth requires. We trace it back. Family, history, the unspoken agreements, the lie underneath. The root is where the work happens.", items: ["Family-of-origin honesty", "Locate the early agreement", "Name the lie beneath", "Connect the loop to the moment"] },
    { verb: "Heal", sub: "Heart Encounter", body: "This is where the head work becomes heart work. Inner child reparenting. Holy-Spirit-led memory healing. Somatic exercises, breath, prayer. The boy or girl inside you finally gets to hear what they should have heard. The lie loses its grip — not because you out-thought it, but because the Father met you in it.", items: ["Inner child & reparenting", "Holy-Spirit-led memory healing", "Somatic, breath & prayer practice", "Lies replaced with truth, in the body"] },
    { verb: "Realign", sub: "Mind from Heart", body: "Now the renewing of the mind from Romans is no longer abstract. Your heart becomes the filter for your head — not the other way around. Marriage softens. Connection comes back. The Shalom-Shalom peace of Isaiah 26:3 stops being a verse you've memorized and starts being a life you live.", items: ["Heart-led decision making", "Marriage & family integration", "Sustained somatic + prayer rhythm", "Shalom-Shalom as a daily reality"] },
  ];

  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(238,241,245,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: "var(--cream)", fontWeight: 500 }}>
            From head{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>to heart.</span>
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid rgba(238,241,245,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(238,241,245,0.55)", textAlign: "left", padding: "24px 8px 20px", cursor: "pointer", borderRight: i < 3 ? "1px solid rgba(238,241,245,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(238,241,245,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(238,241,245,0.04)", borderLeft: "1px solid rgba(238,241,245,0.12)", borderRight: "1px solid rgba(238,241,245,0.12)", borderBottom: "1px solid rgba(238,241,245,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: "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(238,241,245,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(238,241,245,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>
  );
}

/* ============================================================
 * SENTENCES IN YOUR HEAD — enhanced section unique to Kevin
 * (Built around the "Exact Words" from his ideal-client section.)
 * ============================================================ */
function Sentences() {
  const thoughts = [
    "I know what the Bible says, but why am I not living it out?",
    "I'm tired of performing for acceptance.",
    "I want to feel significant and valued.",
    "I want to use my voice.",
    "I want to be free from the racing thoughts in my head.",
    "I think no one really cares what I have to say.",
  ];
  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 sentences in your head</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've said all of them.</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 quiet — you're not broken. You're a real person in a season your head can't fix on its own. That's exactly what Head to Heart is for. Judgment-free, by design.
            </p>
            <div style={{ marginTop: 28, paddingTop: 22, borderTop: "1px solid var(--rule-strong)" }}>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 10 }}>What the work does</div>
              <p className="serif-italic" style={{ fontSize: 18, color: "var(--walnut)", lineHeight: 1.5, fontWeight: 300 }}>
                "We get you unstuck from your head, into a heart that's safe to feel again — and then realign the two so your heart filters your mind, the way it was designed to."
              </p>
            </div>
          </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 className="mono" style={{ fontSize: 11, color: "var(--terracotta)", marginBottom: 14 }}>0{i + 1} · in your own words</div>
                <p className="serif-italic" style={{ fontSize: 19, lineHeight: 1.45, color: "var(--walnut)", fontWeight: 300 }}>"{t}"</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * TESTIMONIALS (home preview — 3 cards)
 * ============================================================ */
function Testimonials() {
  const t = [
    { quote: "Kevin Wood is a man of great integrity and faith, and a gifted administrator wherever God uses him in the Body of Christ. Through his leadership skills, compassion, and counsel, he has been a tremendous blessing to those he has served.", hi: "Hugely positive and completely trustworthy, but consistently \"real\" and able to discern proper godly direction in heavy situations.", name: "Pastor Doug", meta: "Pastor · long-time witness" },
    { quote: "Kevin is one of the nicest and holy people I have had the pleasure of knowing. When I think of the greatest example of someone to look up to, I think of Kevin.", hi: "Kevin is someone who will give you the best life advice, spiritual advice, and be your best friend all at the same time.", name: "Anthony", meta: "Friend · lasting impact" },
    { quote: "Kevin is that person who, in a casual or professional setting, will hear what is NOT being said and say that. And before you know it, you've just had a profound and life-changing moment.", hi: "You can tell quickly that he is a man of faith, love, and one who walks deeply with the Trinity and others.", name: "Shauna", meta: "Friend · profound conversations" },
  ];

  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 from those who know him</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 76px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500, maxWidth: 800 }}>
              Hearts that found their{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>voice.</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 }}>From peers, pastors, friends</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 />
        <Sentences />
        <Testimonials />
        <CTA />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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