/* Brenda McPherson · Free to Thrive Life Coaching — Home page (uses shared.jsx shell) */

const { useState, useEffect } = React;

/* ============================================================
 * HERO (page-specific) — Brenda asked for her logo, her headshot,
 * and just a few sentences on page one. Kept deliberately short.
 * ============================================================ */
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">Christian life coaching for women</span>
          <span style={{ flex: 1, height: 1, background: "var(--rule)" }} />
          <span className="smallcaps" style={{ color: "var(--walnut-soft)" }}>Leesburg, Alabama · Online</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.25fr 1fr", gap: "clamp(40px, 5vw, 80px)", alignItems: "stretch" }}>
          <div>
            <h1 className="display" style={{ fontSize: "clamp(42px, 5.4vw, 84px)", color: "var(--walnut)", marginBottom: 32, lineHeight: 1.0 }}>
              Healing is possible,<br />hope is real,{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>and no woman should have to walk this journey alone.</span>
            </h1>
            <p style={{ fontSize: 22, lineHeight: 1.4, color: "var(--walnut)", maxWidth: 560, marginBottom: 36, fontWeight: 300 }}>
              I'm Brenda McPherson, a Christian life coach. I've walked the long road of healing from childhood wounds myself, holding on to God every step of the way.
            </p>
            <p style={{ fontSize: 22, lineHeight: 1.4, color: "var(--walnut)", maxWidth: 560, marginBottom: 36, fontWeight: 300 }}>
              I walk with women through their challenges, their stories, their hurt and their inner healing. Helping them to embrace the God who loves them and has a plan for them.
            </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 Discovery Session <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>
                You've prayed, served, and done the counseling. You know God loves you, but you can't feel Him, and you are tired of faking that you have it all together.{" "}
                <span style={{ color: "var(--walnut)", fontStyle: "italic", fontFamily: "'Source Serif 4', serif" }}>I know that place. Let's walk from surviving to thriving together, at your pace.</span>
              </p>
            </div>
          </div>

          {/* Outer wrapper holds the verse card so that on phones (where the
              card turns static) it flows BELOW the photo instead of behind it. */}
          <div style={{ position: "relative", display: "flex", flexDirection: "column" }}>
            <div style={{ position: "relative", minHeight: 680, flex: 1 }}>
              <Placeholder label="Brenda McPherson" src={PORTRAIT_URL} alt="Brenda McPherson, Free to Thrive Life Coaching" objectPosition="center 22%" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", borderRadius: 2, overflow: "hidden" }} />

              <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(--sage-soft)" }} />
                <span style={{ fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase" }}>Now welcoming · new clients</span>
              </div>
            </div>

            <div style={{ position: "absolute", left: "-48px", bottom: "-36px", background: "var(--cream)", border: "1px solid var(--rule)", padding: "28px 30px 24px", maxWidth: 350, boxShadow: "0 24px 60px -30px rgba(31,41,55,0.35)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
                <img src={FTT_MARK} alt="" aria-hidden="true" style={{ height: 22, width: "auto", display: "block" }} />
                <span className="smallcaps" style={{ color: "var(--terracotta)" }}>Proverbs 3:5–6</span>
              </div>
              <p className="serif-italic" style={{ fontSize: 18, lineHeight: 1.4, color: "var(--walnut)", fontWeight: 300 }}>
                "Trust in the Lord with all your heart, and lean not on your own understanding; in all your ways acknowledge Him, and He shall direct your paths."
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * STATS STRIP
 * ============================================================ */
function Stats() {
  const stats = [
    { n: "27", unit: "yrs", l: "On my own healing journey" },
    { n: "37", unit: "yrs", l: "Pouring into lives in Christian education" },
    { n: "2–6", unit: "mo", l: "A typical 1:1 journey together" },
    { n: "0", unit: "", l: "Single formulas. Every story is unique." },
  ];
  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} className="stat-cell" 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(--sage-soft)", fontSize: 10 }}>{s.l}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============================================================
 * 4 PILLARS
 * ============================================================ */
function Pillars() {
  const pillars = [
    { n: "I", title: "God's Path for You", body: "I don't believe there is a single formula for healing, because every story is unique. We seek the Lord together and follow His path for you, trusting Him to direct each step, even the slow ones." },
    { n: "II", title: "Understanding Yourself", body: "The parts of you that learned to smile, give, and keep everyone happy were trying to protect you. Through inner child and parts work, we get to know them with compassion instead of shame." },
    { n: "III", title: "A Body That Feels Safe", body: "Old wounds live in the body too: exhaustion, tension, a nervous system that never quite rests. Simple somatic practices help your body learn it is safe, so healing has room to happen." },
    { n: "IV", title: "Walking With a Survivor", body: "My own healing changed most when another survivor walked beside me for a season. You'll have a deep listening ear from someone who has lived this road. No woman should have to walk it alone." },
  ];

  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 foundations,{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>lived first, then shared.</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>
                <StarMark 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="Brenda McPherson" src={PORTRAIT_URL} alt="Brenda McPherson" objectPosition="center 18%" 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)" }}>From surviving</div>
              <div className="display" style={{ fontSize: 26, fontWeight: 500, lineHeight: 1 }}>Thriving</div>
              <div className="smallcaps" style={{ fontSize: 9, marginTop: 4, color: "var(--cream)" }}>by His grace</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 }}>
              Healing was{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>worth the wait.</span>
            </h2>
            <div style={{ fontSize: 17.5, lineHeight: 1.7, color: "var(--walnut-soft)", marginBottom: 22 }}>
              <p style={{ marginBottom: 14 }}>
                I'm Brenda McPherson. For most of my life I told everyone I'd had the most amazing childhood, and I believed it. I had pushed the hardest years so far out of memory that I couldn't see what they were still doing to me. I gave and gave, taught and discipled, acted together, and no one could really know me.
              </p>
              <p style={{ marginBottom: 14 }}>
                In 1999 my husband urged me to see a Christian counselor, and the long road of understanding began: counseling, years of EMDR, and learning what my body and heart had been carrying.{" "}
                <span className="serif-italic" style={{ color: "var(--walnut)", fontSize: 19 }}>It wasn't linear. It was hard. And it was worth it.</span>
              </p>
              <p>Today my health has returned, my marriage is stronger than ever, and I'm thriving again, living in the country on a lake, beside still waters. Walking with other women on that same road is my privilege.</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)" }}>— Brenda</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: p.featured ? "var(--sage-soft)" : "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: "Free to Thrive 1:1", sub: "2–6 Months of One-on-One Coaching", tag: "Flagship", format: "Two to three 1:1 sessions a month · 2 to 6 months · somatic & nervous-system tools · inner healing prayer", pitch: "The heart of my work. We meet two to three times a month and walk gently through your story together: understanding yourself and your wounds, helping your body feel safe, and inviting God into the places that still hurt.", cta: "Learn More", featured: true },
    { n: "02", name: "The Still Waters Circle", sub: "Small-Group Healing Circle", tag: "Forming soon", format: "A small, confidential circle · gentle teaching · practices together · prayer, never pressure", pitch: "A small circle of women healing from childhood wounds. Healing happens in safe community too, when you hear another woman say \"me too\" and realize you were never the only one.", cta: "Join the Interest List" },
    { n: "03", name: "Finding Your Bearings", sub: "A Self-Paced Beginning", tag: "Coming soon", format: "Short lessons · your nervous system, explained simply · practices & prayer prompts · your own pace", pitch: "A quiet place to start if you're not ready to talk yet. Short lessons and simple practices to help you understand your story and feel a little steadier, with Scripture to hold along the way.", cta: "Join the Waitlist" },
  ];
  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{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>to begin.</span>
            </h2>
          </div>
          <a href="work-with-me.html" className="btn btn-ghost">What sessions are like <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 FREE TO THRIVE JOURNEY — Understand · Settle · Heal · Thrive
 * ============================================================ */
function Framework() {
  const [active, setActive] = useState(0);
  const phases = [
    { verb: "Understand", sub: "Your Story, Without Shame", body: "We begin by understanding you: your story, your wounds, and the protective parts of you that have worked so hard for so long. Nothing is forced. You share only what you're ready to share, and we go at your pace.", items: ["Your story, at your pace", "Wounds named gently", "Parts work: protective parts understood", "Somatic practices introduced", "How the past still shows up today"] },
    { verb: "Settle", sub: "A Body That Feels Safe", body: "Your nervous system may have been on guard for decades. We learn how it works and practice simple somatic tools that help your body settle, so healing has somewhere safe to happen.", items: ["How your nervous system works", "Simple somatic practices", "Tools for hard moments", "Listening to what your body says"] },
    { verb: "Heal", sub: "Meeting God in the Wound", body: "With the Holy Spirit leading, we invite Jesus into the places that still hurt. This is where \"I know He loves me\" can slowly become \"I can feel Him,\" and prayer becomes deeper and more alive.", items: ["Holy Spirit-led inner healing", "Lies exchanged for His truth", "Identity rooted in grace", "A deeper, more vibrant prayer life"] },
    { verb: "Thrive", sub: "Following His Path Forward", body: "Hope and joy you no longer have to perform. A renewed sense of purpose. You leave understanding yourself, carrying tools for life, and knowing that following God on your healing journey was worth it.", items: ["Joy that isn't performed", "Purpose rediscovered", "Tools you keep for life", "Trust to follow His path"] },
  ];

  return (
    <section className="section" style={{ background: "var(--walnut)", color: "var(--cream)", position: "relative", overflow: "hidden" }}>
      <img src={FTT_MARK} alt="" aria-hidden="true" style={{ position: "absolute", right: "-6vw", top: "8%", width: "38vw", maxWidth: 560, height: "auto", opacity: 0.05, filter: "brightness(0) invert(1)", pointerEvents: "none" }} />

      <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(--sage-soft)" }}>✦ The Free to Thrive journey</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5.6vw, 80px)", lineHeight: 0.98, color: "var(--cream)", fontWeight: 500 }}>
            From surviving{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--sage-soft)" }}>to thriving.</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)} aria-pressed={active === i} style={{ background: "transparent", border: "none", borderTop: active === i ? `3px solid var(--sage-soft)` : "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(--sage-soft)" }}>0{i + 1}</span>
                <StarMark size={10} color={active === i ? "var(--sage-soft)" : "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(--sage-soft)", 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(--sage-soft)" }}>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(--sage-soft)" /> {t}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * WHAT THE SMILE IS HOLDING — enhanced section unique to Brenda.
 * Built from her ideal clients' exact words ("I act joyful and look
 * successful, but I am exhausted and I am faking that joy...") and her
 * own years of performing joy. Each card turns over on tap.
 * ============================================================ */
function BehindTheSmile() {
  const cards = [
    { seen: "I'm doing great, thanks!", under: "I'm exhausted, and I'm faking that I have it all together." },
    { seen: "God is so good.", under: "I know God loves me. I just can't feel Him." },
    { seen: "Of course I can help. Count me in.", under: "I'm serving Him and trusting Him, but I'm losing hope." },
    { seen: "The doctor says it's probably menopause.", under: "My body has been trying to tell me something for years." },
    { seen: "I've done the counseling. I'm fine.", under: "I've tried everything, and I'm still stuck." },
    { seen: "My childhood was wonderful.", under: "I pushed those years so far down, I forgot they were there." },
  ];
  const [turned, setTurned] = useState(() => cards.map(() => false));
  const allTurned = turned.every(Boolean);
  const toggle = (i) => setTurned((t) => t.map((v, j) => (j === i ? !v : v)));
  const toggleAll = () => setTurned(cards.map(() => !allTurned));

  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 the smile is holding</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.6vw, 64px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
              You look fine.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>You're tired of pretending.</span>
            </h2>
            <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.65, color: "var(--walnut-soft)", maxWidth: 420 }}>
              I know this place well. For years I acted together and gave and gave, and no one could really know me. If any of these sound familiar, you are not failing at faith. Something in you is asking to be understood.
            </p>
            <div style={{ marginTop: 28, display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
              <button type="button" onClick={toggleAll} className="btn btn-ghost">
                {allTurned ? "Turn them back" : "Show what's underneath"} <span className="arrow">→</span>
              </button>
              <span className="serif-italic" style={{ fontSize: 15, color: "var(--walnut-soft)" }}>or tap any card</span>
            </div>
            <p className="serif-italic" style={{ marginTop: 32, fontSize: 19, lineHeight: 1.5, color: "var(--walnut)", maxWidth: 420, borderLeft: "2px solid var(--terracotta)", paddingLeft: 18 }}>
              Every one of these can change. Mine did.
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            {cards.map((c, i) => {
              const on = turned[i];
              return (
                <button
                  key={i}
                  type="button"
                  onClick={() => toggle(i)}
                  aria-pressed={on}
                  aria-label={on ? `What's underneath: ${c.under}` : `What people hear: ${c.seen}. Tap to see what's underneath.`}
                  style={{
                    display: "grid", textAlign: "left", cursor: "pointer",
                    padding: "26px 26px 28px", minHeight: 176,
                    background: on ? "var(--walnut)" : "var(--cream)",
                    border: on ? "1px solid var(--walnut)" : "1px solid var(--rule)",
                    transition: "background 0.35s ease, border-color 0.35s ease",
                    fontFamily: "inherit",
                  }}
                >
                  <span style={{ gridArea: "1 / 1", opacity: on ? 0 : 1, transition: "opacity 0.3s ease", display: "flex", flexDirection: "column" }}>
                    <span className="mono" style={{ fontSize: 11, color: "var(--terracotta)", marginBottom: 14 }}>0{i + 1} · what people hear</span>
                    <span className="serif-italic" style={{ fontSize: 20, lineHeight: 1.4, color: "var(--walnut)", fontWeight: 300 }}>"{c.seen}"</span>
                    <span className="grotesk" style={{ marginTop: "auto", paddingTop: 18, fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--walnut-soft)" }}>Turn over →</span>
                  </span>
                  <span style={{ gridArea: "1 / 1", opacity: on ? 1 : 0, transition: "opacity 0.3s ease", display: "flex", flexDirection: "column" }}>
                    <span className="mono" style={{ fontSize: 11, color: "var(--sage-soft)", marginBottom: 14 }}>0{i + 1} · what's underneath</span>
                    <span className="serif-italic" style={{ fontSize: 20, lineHeight: 1.4, color: "var(--cream)", fontWeight: 300 }}>"{c.under}"</span>
                  </span>
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * TESTIMONIALS — verbatim excerpts (full text on testimonials page)
 * ============================================================ */
function Testimonials() {
  const t = [
    { quote: "Brenda is one of those rare people who makes you feel truly seen, heard, and valued. She listens with genuine care, remembers the details that matter, follows up faithfully, and treats what you share with great discretion and integrity.", hi: "She has a soft heart for people who are hurting.", name: "Kim Russell", meta: "Friend & colleague" },
    { quote: "Having known Brenda for over 25 years, I can whole-heartedly say she has always been a listening ear, a trusted confidant, and a source of wise advice. She truly walks the walk, embodying the same principles and wisdom that she guides others toward.", hi: "If you're looking for someone to help you heal and grow, you couldn't be in better hands.", name: "Beth Lepore", meta: "Friend of 25+ years" },
    { quote: "Brenda is a breath of fresh air, a beam of sunshine into any dark place you are exploring within. She comes alongside you as a coach with understanding, sensitivity, care & compassion.", hi: "She radiates joy & wonder, empowering your spirit to soar.", name: "Charissa", meta: "Coaching client" },
  ];

  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 }}>✦ Words from people who know her</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 76px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500, maxWidth: 800 }}>
              Seen, heard,{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>and valued.</span>
            </h2>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
            <div className="display" style={{ fontSize: 44, color: "var(--walnut)" }}>25+</div>
            <div>
              <div className="smallcaps" style={{ color: "var(--terracotta)" }}>years of friendship</div>
              <div className="smallcaps" style={{ color: "var(--walnut-soft)", marginTop: 4 }}>behind these words</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="true" 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 }}>
                <Initials name={q.name} size={36} />
                <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 their words →
          </a>
        </div>
      </div>
    </section>
  );
}

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

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