/* About Kevin Wood — Head to Heart LLC */
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 Kevin</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
              A heart that was hidden.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>And the God who found it anyway.</span>
            </h2>
            <Placeholder label="Kevin · candid portrait" src="https://assets.cdn.filesafe.space/3AdNZ1kU76nSJubuR9ds/media/6a1f9987bce897da752a1b32.jpg" 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 }}>
                "You will keep him in perfect peace whose mind is stayed on you, because he trusts you."
              </p>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginTop: 12 }}>Isaiah 26:3</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 }}>
                "I will never forget the journal entry. Big, bold letters: 'I CAN'T DO THIS ANYMORE! I KNOW YOU CAN'T BUT I CAN!' Those words weren't really mine. I believe God wrote them through me. A few days later, my wife came home and we have never looked back."
              </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 close family. Two sets of grandparents, aunts, uncles, cousins, holidays, traditions. I played soccer and hockey; my father took me everywhere. From the outside it looked good. From the inside, we were rarely shown love and affection — and I think I grew up assuming that the absence of dysfunction was the same as love. I'd learn it wasn't.</p>
              <p>When I was a teenager, my father took me on a ride to tell me he was leaving — that he needed to become a better father and husband. My parents divorced. I got angry. I got bitter. I decided I'd control my own happiness from then on by working harder for acceptance. I put up walls. I let people see a hard outer shell. <span className="serif-italic" style={{ color: "var(--walnut)" }}>Inside, I had real questions about my worth — and I made sure no one ever saw those.</span></p>
              <p>I met Kim my senior year of high school at a Friday-night party. I told her she was going to prom with me. What started as a drunken gesture turned into the love of my life. I'd been accepted to Maine Maritime Academy — something I'd had my sights on for years — but I lasted one semester. I remember standing on the ship one moonlit night, telling God I wanted to choose her over this. I dropped out, told my dad (the hardest conversation of my life up to that point), and a year later Kim and I were married at 19 and 20, expecting our first daughter. Nobody gave us a chance.</p>
              <p>Several years in, our marriage suffered a significant breach in trust and my wife wanted out. She asked me to leave the house, but we had two young daughters and I couldn't do that to them. So I came home every night, helped put the girls to bed, and left after they were asleep. I cannot describe what those months did to me. No eye contact. No touch. The thing I had sworn would never happen to me was happening, and I had no way to stop it.</p>
              <p>I got pastoral counseling. I prayed. I journaled. One night — alone, exhausted — I wrote those words in big bold letters. <span className="serif-italic" style={{ color: "var(--walnut)", fontSize: 19 }}>"I CAN'T DO THIS ANYMORE! I KNOW YOU CAN'T BUT I CAN!"</span> I still have that journal. A few days later my wife was going out for the night and I was staying home with the girls. Before she left, I asked if I could pray with her. She reluctantly agreed. I knelt down. I don't remember exactly what I said — but the Holy Spirit took over. When I stood up, I had a peace I hadn't felt in months.</p>
              <p>The next morning she pulled into the driveway. She walked through the door, sat on my lap, threw her arms around my neck, and said, <span className="serif-italic" style={{ color: "var(--walnut)" }}>"I want you to come home."</span> We have never looked back. We will celebrate 39 years of marriage this year. Restored. By the sheer grace and mercy of God.</p>
              <p>For the last thirty years, God has been doing the deeper work — undoing the performance and control I had built around my parents' divorce and around almost losing my own marriage, and teaching me that what He has always been after is my heart. He blessed my career: I spent almost twenty-five years in manufacturing, worked my way up to plant manager of a large facility, and at the top of that climb I came home one day and told my wife I didn't want to be "the guy" anymore. I wanted to go punch a clock. I was at the top of my career and tremendously blessed — and I couldn't figure out what was happening to me. I was tired of performing.</p>
              <p>Soon after, my pastor — a close friend — asked me to consider running the church school. I almost spit out my coffee. Seven years there reshaped me again. God kept moving me out of my head and into my heart, kept teaching me about Shalom-Shalom peace, kept showing me my worth was never in what I did. People started asking me, <em>"How do you stay so solid?"</em> The honest answer was always the same: <em>I'm not. He is.</em></p>
              <p>Head to Heart LLC exists for the person tired of performing — who is stuck in their head — who knows what the Bible says and can't figure out why they're not living it out. My heart breaks for people who have a wall between their head and their heart, who are living from their thoughts instead of their hearts. I've been on both sides of that wall.</p>
              <p>I'm not too late. Neither are you.</p>
            </div>
            <div className="display" style={{ fontSize: 32, fontWeight: 300, color: "var(--walnut)", marginTop: 36, fontFamily: "'Source Serif 4', serif", fontStyle: "italic" }}>— Kevin</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Story video ─────────────────────────────────────────────────────────────
// Kevin's "My Story · Variant A" (sent Jul 7 via iCloud share). Upload the file
// to Vimeo (or GHL media library → hosted video) and paste the *embed* URL here,
// e.g. "https://player.vimeo.com/video/123456789". Empty string = section hidden.
const STORY_VIDEO_URL = "";

function StoryVideo() {
  if (!STORY_VIDEO_URL) return null;
  return (
    <section className="section" style={{ background: "var(--walnut)", color: "var(--cream)" }}>
      <div className="container">
        <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ My story · in my own words</div>
          <h2 className="display" style={{ fontSize: "clamp(32px, 4vw, 52px)", lineHeight: 1.05, fontWeight: 500, marginBottom: 14, color: "var(--cream)" }}>
            Hear it from me.{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Not the polished version.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "rgba(238,241,245,0.8)", marginBottom: 32 }}>Rock bottom, the journal entry, and the morning Kim pulled back into the driveway. A few minutes, straight from the heart.</p>
          <div style={{ position: "relative", aspectRatio: "16 / 9", width: "100%", background: "#000", border: "1px solid rgba(238,241,245,0.15)" }}>
            <iframe
              src={STORY_VIDEO_URL}
              title="Kevin Wood · My Story"
              allow="autoplay; fullscreen; picture-in-picture"
              allowFullScreen
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: "none" }}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function Beliefs() {
  const beliefs = [
    { n: "I", title: "Christ-centered, grace-rooted.", body: "Head to Heart isn't a system I read about and apply. It's a road I walk. Every conversation, every practice, every framework is anchored in the finished work of Christ and the grace that doesn't depend on how well I performed today. We don't innovate the gospel — we let it land where it has always been trying to land." },
    { n: "II", title: "The heart over the head — but never without Scripture.", body: "Most of us live from our heads and starve our hearts. The work is to reverse that — without floating off into 'your truth' or 'just trust your gut.' Scripture is the authority. Experience without Scripture is opinion. Scripture interpreted into experience is where transformation actually happens." },
    { n: "III", title: "Judgment-free. By design.", body: "I will not shame you for what you've done, what was done to you, or what you've believed about yourself for years. I need grace every single day — there is no version of this work where I get to look at you and not extend the same grace I've been given. The room is safe. The work is honest." },
  ];
  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 for</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 style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720 }}>
            High invitation. Honest expectation. Real transformation. Every conversation I have is built on these three convictions about people, hearts, and what it means to come home to who God says we are.
          </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: "Lived Healing", t: "30+ years on the active road", d: "Performance-based living, self-shame, feelings of inadequacy, parents' divorce, my own near-divorce, restoration of a 39-year marriage. None of these are subjects I studied — they're seasons I lived through and that God walked me back out of. The road I've walked is the work I now offer." },
    { tag: "Leadership & Ministry", t: "Plant manager · church-school director", d: "Almost twenty-five years in manufacturing, including plant-manager-level roles in a large facility. Seven years as the director of my church's school. Public-facing leadership taught me what performance costs — and what the freedom on the other side of it feels like." },
    { tag: "Theological Lineage", t: "Identity in Christ · grace-based theology", d: "Influenced by Bill Johnson, John Bradshaw, Pete Walker, Danny Silk, Dietrich Bonhoeffer, and John Stott. Identity in Christ, grace-based theology, and the renewing of the mind (Romans 12) are not academic categories for me — they are the lifeline that pulled me out of performance and into peace." },
    { tag: "Modalities I draw on", t: "Inner healing · inner child · reparenting", d: "Holy-Spirit-led memory healing. Inner child work and reparenting. Marriage and intimacy work, lived through my own restoration. Somatic practices, breath, listening prayer, and meditation. Frameworks are tools — Scripture is the authority. I bring all of them to the room." },
  ];
  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(--terracotta)", marginBottom: 16 }}>✦ Background & credentials</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--cream)", lineHeight: 0.98, fontWeight: 500 }}>
              Lived, walked, and{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>still learning.</span>
            </h2>
            <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.6, color: "rgba(238,241,245,0.7)" }}>
              Three decades of lived restoration, a long career in leadership, and a steady diet of Scripture and Christ-centered teachers. I don't bring theory. I bring the road.
            </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(--terracotta)", 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="From head to heart."
          italic="The long way around."
          subtitle="Thirty years walking out of performance. A marriage almost lost, then restored at my kitchen table by a grace I didn't earn. Twenty-five years in manufacturing leadership, seven years running a church school, and a slow education in what God was really after — my heart. This is the road I walked, and the one I now walk with others."
          verse="For man looks at the outward appearance, but the Lord looks at the heart."
          verseRef="1 Samuel 16:7b"
        />
        <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 }}>
              {[["30+", "yrs", "On the healing road"], ["39", "yrs", "Marriage · restored by grace"], ["25+", "yrs", "Leadership & manufacturing"], ["1", "", "Mission · head to heart"]].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 />
        <StoryVideo />
        <Beliefs />
        <Credentials />
        <CTA
          eyebrow="✦ Your next step"
          headline="Ready to come"
          headlineItalic="home to your heart?"
          checklist={[
            "Where performance is still writing the story of who you think you have to be",
            "What a grace-rooted, heart-aligned path actually looks like for your season",
            "Which Head to Heart path fits you — 1:1, Connection Circle, or self-paced",
            "Whether walking with me through this work is the right next step for you",
          ]}
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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