/* About Brenda — from her intake, kept at the level of detail she approved
 * for public view (see privacy note in shared.jsx). */
const { useState, useEffect } = React;

function StoryBlock() {
  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 120 }}>
            <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Meet Brenda</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
              Held by God,{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>every step of the way.</span>
            </h2>
            <Placeholder label="Brenda McPherson" src={PORTRAIT_URL} alt="Brenda McPherson" objectPosition="center 20%" style={{ marginTop: 32, aspectRatio: "4 / 5", width: "100%" }} />
            <div style={{ marginTop: 32, padding: "24px 28px", background: "var(--cream-2)", borderLeft: "2px solid var(--terracotta)" }}>
              <p className="serif-italic" style={{ fontSize: 18, lineHeight: 1.5, color: "var(--walnut)", fontWeight: 300 }}>
                "The Lord is my shepherd; I shall not want. He makes me to lie down in green pastures; He leads me beside the still waters. He restores my soul."
              </p>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginTop: 12 }}>Psalm 23:1–3</div>
              <p style={{ marginTop: 14, fontSize: 14.5, lineHeight: 1.55, color: "var(--walnut-soft)" }}>
                Psalm 23 is my story right now. We live in the country on a lake, and I live beside both, every day.
              </p>
            </div>
          </div>
          <div>
            <div style={{ borderLeft: "2px solid var(--terracotta)", paddingLeft: 28, marginBottom: 40 }}>
              <p className="serif-italic" style={{ fontSize: "clamp(22px, 2.4vw, 30px)", lineHeight: 1.45, color: "var(--walnut)", fontWeight: 300 }}>
                "It is my privilege to support women as they seek the Lord in their personal healing journeys, discovering hope and the path from surviving to thriving. I don't believe there is a single formula for healing, because every story is unique. What I do believe is that healing is possible, hope is real, and no woman should have to walk this journey alone."
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 26, fontSize: 17.5, lineHeight: 1.75, color: "var(--walnut-soft)" }}>
              <p>For most of my life, I told everyone I'd had the most amazing childhood. I believed it, too. I had pushed my earliest years so far out of memory that I couldn't see what they were still doing to me.</p>
              <p>What I did have was God, and a Christian school that changed my life. From seventh grade through twelfth, I had teachers and coaches who cared about me, built my confidence, and told me there were parts of me that were truly special. Those were the best of years. I became less numb, more confident, and more joyful. I even met my husband there.</p>
              <p>In 1987 I felt God calling me back to that school to work alongside my husband. It became my career for 37 years, and I deeply loved all of it. Pouring into the lives of students and colleagues was amazing, and it was healing for me too.</p>
              <p>But I refused to acknowledge the deep wounds I was still carrying. I struggled with intimacy with friends. No one could really know me. I fawned: I acted together, and I gave and gave, as a teacher and discipler in the church and in my work at school. I was numb to what was going on inside. A doctor told me they couldn't help me. <span className="serif-italic" style={{ color: "var(--walnut)" }}>So I prayed like the persistent widow in Luke 18, asking again and again, trusting that God would hear.</span></p>
              <p>In 1999 my husband urged me to see a Christian counselor, and I began the long journey of understanding my childhood and its impact. Later I saw an EMDR therapist for many years. I was healing, but I was still deeply stuck.</p>
              <p>In 2005 we moved to Hilton Head Island, and something in me began to soar. For the first time, I could simply be me. Those were thriving years.</p>
              <p>Then in 2012 we moved back to Massachusetts (where my childhood wounding happened), and my health crumbled. I have always been health-conscious. I eat well, I exercise, and I do what my doctors say. Yet my bloodwork became challenging, and I lived with constant, overwhelming pain that no one could diagnose. A chiropractor finally found old injuries in my neck and back that were only now flaring, and it took years to bring them under control. <span className="serif-italic" style={{ color: "var(--walnut)", fontSize: 19 }}>I realize now that my nervous system was screaming for help. I kept crying out to God to heal me, and I sat waiting, for years.</span></p>
              <p>In 2019 my therapist suggested my system might be reacting to where we were living. In 2022 we returned to the Lowcountry, and my body began to come alive again. Today my health has returned. The old injuries still speak up now and then, but chiropractic care and exercise keep them in check. And my marriage is stronger than ever.</p>
              <p>Bigger than all of that, God truly healed me from the inside out. I'll be honest: I wish He had healed me quickly, the way He did in the Bible. It took, in my opinion, way too long. But He has His own plans, and I have learned to deeply trust Him.</p>
              <p>What changed my journey most was another survivor who shared her story with me and walked beside me over a season of several months. She changed my life. Now I get to be that for other women. Healing isn't linear, and I sure wish it were. It is hard. But it is worth it, and you don't have to walk it alone.</p>
            </div>
            <div className="display" style={{ fontSize: 32, fontWeight: 300, color: "var(--walnut)", marginTop: 36, fontFamily: "'Source Serif 4', serif", fontStyle: "italic" }}>— Brenda</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Beliefs() {
  const beliefs = [
    { n: "I", title: "There is no single formula.", body: "Every story is unique, so every healing journey is too. I won't hand you a program built for someone else. We seek the Lord together and follow the path He has for you, at a pace your heart and body can hold." },
    { n: "II", title: "Healing isn't linear. It's worth it.", body: "I sure wish it were linear. Some seasons you'll feel lighter, and some you'll wonder if anything has changed at all. That is normal. I waited years for God to heal me, and I learned that His grace really is sufficient in the waiting." },
    { n: "III", title: "Compassion comes first.", body: "To me, the Gospel is the story of Jesus' life on earth: His ministry, His living in the flesh, and His compassion for humankind. That compassion sets the tone for every session. There is no judgment here, and no pressure to be further along than you are." },
  ];
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 920 }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ What I believe</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 76px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            The convictions{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>under this work.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720 }}>
            Gentle, honest, and unhurried. These three convictions shape every conversation I have with the women I walk alongside.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--rule-strong)" }}>
          {beliefs.map((b, i) => (
            <div key={b.n} style={{ padding: "44px 36px 48px", borderRight: i < 2 ? "1px solid var(--rule)" : "none" }}>
              <div className="mono" style={{ fontSize: 11, color: "var(--terracotta)", marginBottom: 24 }}>{b.n}</div>
              <h3 className="display" style={{ fontSize: 26, fontWeight: 500, color: "var(--walnut)", lineHeight: 1.15, marginBottom: 18 }}>{b.title}</h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--walnut-soft)" }}>{b.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Credentials() {
  const items = [
    { tag: "A Fellow Survivor", t: "27 years on my own healing journey", d: "Christian counseling beginning in 1999, many years of EMDR therapy, and later parts work, somatic, and inner healing work. I know from the inside how long, complicated, and worthwhile this road is." },
    { tag: "Coach Training", t: "Formally trained", d: "I've completed formal coach training, and I'm already walking with women in my practice sessions. Coaching is where my story, my training, and my calling finally meet." },
    { tag: "Christian Education & Ministry", t: "37 years of pouring into lives", d: "A career in Christian education, alongside years as a teacher and discipler in the church. Decades of walking with students, colleagues, and women through every season of life." },
    { tag: "Trauma-Informed Learning", t: "Body, soul, and spirit", d: "Internal Family Systems and parts work, inner child work, somatic and nervous-system practices, attachment theory, and Holy Spirit-led inner healing. Shaped by Bessel van der Kolk, Sarah Baldwin, Spencer & Sami Robbins, and above all, by God." },
  ];
  return (
    <section className="section" style={{ background: "var(--walnut)", color: "var(--cream)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, alignItems: "start" }}>
          <div>
            <div className="smallcaps" style={{ color: "var(--sage-soft)", marginBottom: 16 }}>✦ Background & training</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--cream)", lineHeight: 0.98, fontWeight: 500 }}>
              Lived, learned,{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--sage-soft)" }}>and still growing.</span>
            </h2>
            <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.6, color: "rgba(238,241,245,0.7)" }}>
              I'm not a therapist, and I won't pretend to be. What I bring is formal coach training, a long career of pouring into people, decades of my own healing work, and a road I have actually walked, holding on to God the whole way.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid rgba(238,241,245,0.18)" }}>
            {items.map((it, i) => (
              <div key={i} style={{ padding: "32px 28px 32px 0", borderBottom: i < 2 ? "1px solid rgba(238,241,245,0.18)" : "none", borderRight: i % 2 === 0 ? "1px solid rgba(238,241,245,0.18)" : "none", paddingLeft: i % 2 === 1 ? 28 : 0 }}>
                <div className="smallcaps" style={{ color: "var(--sage-soft)", marginBottom: 14 }}>{it.tag}</div>
                <h3 className="display" style={{ fontSize: 21, fontWeight: 500, color: "var(--cream)", lineHeight: 1.2, marginBottom: 10 }}>{it.t}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "rgba(238,241,245,0.7)" }}>{it.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="about" />
      <main>
        <PageHero
          eyebrow="My Story"
          title="I know the long road"
          italic="from surviving to thriving."
          subtitle="As someone who has walked the difficult journey of healing from childhood trauma, I understand both the challenge and the hope that comes with the process. God has transformed my life, and it is my passion to encourage and support women as they seek His guidance in their healing journeys."
          verse="Therefore I will boast all the more gladly about my weaknesses, so that Christ's power may rest on me."
          verseRef="2 Corinthians 12:9"
        />
        <section style={{ padding: "60px clamp(28px, 6vw, 96px) 0", background: "var(--cream)" }}>
          <div className="container">
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, borderTop: "1px solid var(--rule)", paddingTop: 36 }}>
              {[["1999", "", "The year I began facing my story"], ["27", "yrs", "On my own healing journey"], ["37", "yrs", "In Christian education"], ["0", "", "Single formulas for healing"]].map(([n, unit, l], i) => (
                <div key={i}>
                  <div className="display" style={{ fontSize: 38, fontWeight: 500, color: "var(--walnut)", letterSpacing: "-0.03em", display: "flex", alignItems: "baseline", gap: 6, whiteSpace: "nowrap" }}>
                    <span>{n}</span>
                    {unit && <span style={{ fontSize: 18, fontWeight: 400, color: "var(--walnut-soft)", letterSpacing: "0.02em" }}>{unit}</span>}
                  </div>
                  <div className="smallcaps" style={{ color: "var(--terracotta)", marginTop: 6 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
        <StoryBlock />
        <Beliefs />
        <Credentials />
        <CTA
          eyebrow="✦ Your next step"
          headline="Ready to take"
          headlineItalic="the first step?"
          checklist={[
            "Where you are right now, in your own words and at your own pace",
            "What healing could look like for your heart, your body, and your faith",
            "Which doorway fits: 1:1 coaching, the circle, or self-paced",
            "Whether we're the right fit. I'll be honest and kind either way",
          ]}
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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