/* About William - woven from his intake story, in his own voice */
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 William</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
              Life is a journey.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Some of it hard, some of it funny.</span>
            </h2>
            <Placeholder label="A river on a misty morning" alt="A still river on a misty morning, bare trees reflected in the water" src={MORNING_RIVER_IMAGE_URL} objectPosition="center" 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 }}>
                "Where sin increased, grace abounded all the more."
              </p>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginTop: 12 }}>Romans 5:20</div>
            </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 }}>
                "The night my wife and I talked about divorce, I believed one thing: it was all my fault. I wasn't good enough, again. I was about to be the biggest failure a man could be. I was hurt, but I wasn't totally hopeless. And God wasn't finished with either of us."
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 26, fontSize: 17.5, lineHeight: 1.75, color: "var(--walnut-soft)" }}>
              <p>I grew up in a Christ-believing, church-attending home. Two parents, an older sister, an older brother. I was in the church youth group, and in high school I counseled at a church camp. On paper, I was the kid nobody worried about.</p>
              <p>My first weekend away at college, the wheels came off. That whole first semester I was lost, torn between hedonism and everything I'd been raised to believe, and over the next two years my life spiraled. At one point, in all that turmoil, I actually told God to get out of my life. I knew the verse about being hot or cold instead of lukewarm. <span className="serif-italic" style={{ color: "var(--walnut)" }}>I was into the carnal, and I was going down.</span></p>
              <p>There were car accidents and motorcycle accidents. The injuries always seemed minor, but they were starting to border on serious, and every one was self-inflicted or a risk I'd signed off on. The last one came on a drive home one evening, when I blacked out for about ten seconds. Blacking out was no big deal. Ten seconds was no big deal. But at over 65 miles an hour on the four-lane? There was no way I could keep putting other men, women, and children at risk.</p>
              <p>That night I called my best friend and told him I wouldn't be back, and that our friendship had to be put on hold. <span className="serif-italic" style={{ color: "var(--walnut)", fontSize: 19 }}>God had made it very clear. It was time for me to come home.</span></p>
              <p>Over the next few years I returned to church, and to campus and high school ministries. In 1977 God blessed me with a wonderful wife. We struggled with infertility for five years, and our first son was born on our sixth wedding anniversary. Three daughters and another son followed over the next eight years. I taught Bible studies and Sunday school, sang in the choir, served on boards, and was blessed with several strong mentors.</p>
              <p>And underneath all of it was a gnawing feeling of inferiority. Of never being enough. Not good enough.</p>
              <p>Twenty-two years into our marriage, we were in trouble. We didn't know how to talk. Between the kids' activities, church, and a demanding career, we were trying to survive living in a tornado. When we finally sat down and discussed divorce, it was surreal. I felt sick. Worthless, ashamed, a failure. Neither of us could relate or even converse. We were both hurt and hurting so much.</p>
              <p>We sought counseling. We endured counseling. <span className="serif-italic" style={{ color: "var(--walnut)", fontSize: 19 }}>And our marriage survived the harshest lies Satan could throw at us.</span> Next year, Lord willing, we'll celebrate fifty years together.</p>
              <p>The last ten years have been hard in their own way, but looking back I can see God's hand moving. We served in full-time ministry for three years alongside some exceptional, selfless servants, and we saw God move and stay situations. We had some rough edges knocked off. The hard edges of legalism got filed down, and grace came flooding in. I used to be a Pharisee. Now I know people don't need more rules. They need to be loved right where they are.</p>
              <p>My own healing really began five or six years ago, when I stopped striving and running hard and simply chose to slow down and listen to what God was saying. I came to understand that I wasn't always right, that I was vulnerable, and that there was more of life to come as I came closer to the Father.</p>
              <p>These days my prayer is simple: <span className="serif-italic" style={{ color: "var(--walnut)" }}>What are you going to do in me today, God?</span> River Song is part of His answer. I believe He has someone waiting on the other side of this conversation. I have walked through a number of life's challenges, and God has not failed me. I would be honored to walk with you on your path.</p>
            </div>
            <div className="display" style={{ fontSize: 32, fontWeight: 300, color: "var(--walnut)", marginTop: 36, fontFamily: "'Source Serif 4', serif", fontStyle: "italic" }}>William</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Beliefs() {
  const beliefs = [
    { n: "I", title: "People don't need more rules. They need to be loved where they are.", body: "I spent years as a Pharisee, and more rules never healed a thing in me. Grace did what rules couldn't. So you won't get a lecture here. You'll get a safe place to be loved while God does His work, at the pace He sets." },
    { n: "II", title: "Forgive, even when they don't deserve it. Then let God tend the wound.", body: "Reparenting work taught me something I wish I'd known decades sooner: forgiveness doesn't repair the wound. We forgive anyway, because that's what we've been given. Then we look honestly at what was handed down, so we stop passing it on to the next generation." },
    { n: "III", title: "If Scripture doesn't confirm it, is it true?", body: "It's the one question I bring to every lie, including the ones I told myself for decades. \"It's all your fault.\" \"Not good enough, again.\" Those sound convincing on a Sunday night. Held up to the Word, they fall apart." },
  ];
  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 stand on</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 76px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            The foundations{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>of this work.</span>
          </h2>
          <p className="serif-italic" style={{ marginTop: 24, fontSize: "clamp(19px, 2vw, 24px)", lineHeight: 1.55, color: "var(--walnut)", maxWidth: 820, fontWeight: 300 }}>
            "Everybody is sinful or hurt or broken. Everybody has or will hurt somebody sometime. We often believe others' lies about us. We feel unworthy, not good enough, ashamed. We wonder how God could love or accept us, because He is holy, perfect, sinless. But God loved us so much that He sacrificed His Son, Jesus, to make a way for us to be with Him. We only need believe in Him and confess the name of Jesus to become God's child and live with Him forever."
          </p>
          <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720 }}>
            That's the gospel in my own words, and every conviction below stands on it.
          </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: "Ministry & Service", t: "A lifetime in the local church", d: "Church youth group, then counselor at a high school church camp. Campus and high school ministries after coming home to God. Bible studies, Sunday school, choir, and church boards. Then three years in full-time ministry alongside exceptional, selfless servants." },
    { tag: "Sales, Teaching & Leadership", t: "A career spent learning to listen", d: "Years in sales, teaching, and leadership roles taught me what I bring to every session: different is not wrong, and people want to be heard and respected. They also taught me life is a journey. Some things are hard, some easy, some funny, some sad." },
    { tag: "Teachers & Voices", t: "Shaped by sound teaching", d: "Paul David Tripp. James Bryan Smith. Michael Bungay Stanier's The Coaching Habit. Bessel van der Kolk's The Body Keeps the Score. And the old friends I keep coming back to: Solomon's Proverbs, Joshua, Nehemiah, and Ephesians." },
    { tag: "Lived Restoration", t: "Nearly fifty years of marriage", d: "Married in 1977. Five years of infertility, then five children. A marriage that came to the edge of divorce twenty-two years in, went through counseling, and survived. And five or six years of intentional healing, since the day I quit striving and started listening." },
  ];
  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 & formation</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--cream)", lineHeight: 0.98, fontWeight: 500 }}>
              Rough edges knocked off.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--sage-soft)" }}>Still walking.</span>
            </h2>
            <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.6, color: "rgba(239,241,232,0.7)" }}>
              My coaching draws on trauma-informed healing, inner child and reparenting work, father- and mother-wound work, Holy Spirit-led inner healing, and grace-based identity in Christ. But most of what I bring was learned the slow way: in the church, at work, and at my own kitchen table.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid rgba(239,241,232,0.18)" }}>
            {items.map((it, i) => (
              <div key={i} style={{ padding: "32px 28px 32px 0", borderBottom: i < 2 ? "1px solid rgba(239,241,232,0.18)" : "none", borderRight: i % 2 === 0 ? "1px solid rgba(239,241,232,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(239,241,232,0.7)" }}>{it.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="about" />
      <main>
        <PageHero
          eyebrow="My Story"
          title="I told God to get out of my life."
          italic="He didn't."
          subtitle="Raised in church. Gone by my second year of college. Home again after ten seconds of blackout on the four-lane. Then a marriage that nearly ended twenty-two years in, and a grace that outlasted every lie. This is the road I've walked, and the one I'd be honored to walk with you."
          verse="Have I not commanded you? Be strong and courageous. Do not be afraid; do not be discouraged, for the LORD your God will be with you wherever you go."
          verseRef="Joshua 1: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 }}>
              {[["50", "", "Years married in 2027, Lord willing"], ["5", "", "Kids · two sons, three daughters"], ["22", "yrs", "In, when we almost quit"], ["5–6", "yrs", "Active healing journey"]].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 stop believing"
          headlineItalic="the lie?"
          checklist={[
            "Where 'not good enough, again' first took root, and what it's costing you now",
            "What Spirit-led, grace-first coaching actually looks like week to week",
            "Which path fits your season: 1:1, the couples group, or self-paced",
            "Whether we're the right fit for the road ahead, answered honestly",
          ]}
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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