/* About Christa — using official intake copy */
const { useState, useEffect } = React;

const IMG_STICKY = "https://images.unsplash.com/photo-1502082553048-f009c37129b9?auto=format&fit=crop&w=1200&q=80"; // rooted oak

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 Christa</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
              I lost myself in a marriage.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>God found me in the fire.</span>
            </h2>
            <Placeholder label="Rooted" src={IMG_STICKY} 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 }}>
                "I will refine them like silver and test them like gold. They will call on my name and I will answer them."
              </p>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginTop: 12 }}>Zechariah 13:9</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 }}>
                "You don't need the right words, and you don't have to have it all together. You just need someone to walk with you through the fire — and to remind you that you were never in it alone. I know, because someone finally did that for me."
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 26, fontSize: 17.5, lineHeight: 1.75, color: "var(--walnut-soft)" }}>
              <p>I first met God at fifteen, at a youth retreat called Chrysalis. It was the first time I knew — beyond the shadow of a doubt — that He was real, and that a Heavenly Father could be tangible. Ever since, God has spoken to me in butterflies. In small ways and, once, in millions of them.</p>
              <p>In 2005 my dad was on a ventilator and I flew to Texas to say goodbye. The next morning, standing in the driveway of my childhood home, I looked up and the sky was full of butterflies. I knew, somehow, that whatever came next, God was good. We followed them all the way to the hospital — where the doctor met us at the door to say my dad had started breathing on his own. <span className="serif-italic" style={{ color: "var(--walnut)" }}>He made a full recovery. That is just one of the ways God has cared for me my whole life.</span></p>
              <p>I married at twenty-one. We couldn't conceive, and both of my children came through IVF and much prayer. My daughter was created on September 11, 2001 — I was in recovery from the egg retrieval when the second plane hit, and I asked God to go be with those people, sure this cycle wouldn't work. In only the way that He can, He comforted a grieving nation and gave me a miracle at the same time. My son followed in 2005. Two gifts I did not deserve and infinitely loved.</p>
              <p>And then I started to believe a lie: that being anything less than the perfect mother meant I was ungrateful for the miracles I'd been given. I spiraled into a depression so deep my own pastor sent me to a psychologist. Soon after, a cross-country move left me with no church, no family, and no friends — and a marriage where Scripture was used to keep me small. I came to believe God only loved me when I was okay.</p>
              <p>My rock bottom came at a hotel pool in Charleston. I pulled a drowning boy from the water and did CPR while I waited for help; my own children watched, and all three of us have carried it ever since. When I finally reached my husband to tell him what had happened, he was too busy to hear it. <span className="serif-italic" style={{ color: "var(--walnut)", fontSize: 19 }}>After twenty years, I knew in that moment I was on my own — and I had no idea who I was. I was empty, alone, and I felt broken.</span></p>
              <p>What came next was a decade I never planned: a divorce, deep therapy, and a slow, holy unraveling. I found parts of myself I didn't know existed. I healed hurts I never knew I carried. I met a God so much kinder than the one I thought I knew. I remarried in 2021, walked through a betrayal I was sure would break me — and watched God use even that to refine my soul and save my husband. For the first time, I was rooted in who I am, in Him, and I knew I was never alone.</p>
              <p>Last October, while fasting and praying after a retreat, I read Luke 22:32 as if for the first time: <span className="serif-italic" style={{ color: "var(--walnut)" }}>"When you return, strengthen your sisters."</span> It hit my soul like lightning. I started training to be a faith-centered life coach not knowing what would happen just 3 months later. Within a week of losing my six-figure job to a reorganization, my practice was formed and everything was aligned, as only He can do.</p>
              <p>So here I am. Not because I've arrived — the fires still come. But because I finally know what it is to be refined by them, and loved through them. And I would count it a gift to walk with you through yours.</p>
            </div>
            <div className="display" style={{ fontSize: 32, fontWeight: 300, color: "var(--walnut)", marginTop: 36, fontFamily: "'Source Serif 4', serif", fontStyle: "italic" }}>— Christa</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Beliefs() {
  const beliefs = [
    { n: "I", title: "God is love — and you were made to be loved.", body: "This is the whole of it: God loves you so much that He would do anything to be with you — and so He did. We are made in His image, made to love and be loved. When we bury our hurt and shame, we drift from who He made us to be. All of my work is simply helping women come home to that love." },
    { n: "II", title: "I'm not here to fix you.", body: "Therapy often aims to fix a behavior. I do something different: I walk alongside you. I help you see what's impossible to see from inside the fire, offer another perspective, and help you gently remove the blocks that keep you stuck — so you don't stay there longer than you need to. You are not a problem to be solved." },
    { n: "III", title: "Your story is safe here.", body: "This is a completely private, one-on-one space — no group to perform for, no risk of being the topic at Bible study. Everyone's journey is different, and the specific healing you need rarely happens in a crowd. Here, you never have to worry about discretion or judgment. It's just you, me, and the God who already loves you." },
  ];
  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)" }}>underneath it all.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720 }}>
            Compassion first, then curiosity. Everything I offer grows out of three simple things I've come to believe about God, about you, and about what real healing looks like.
          </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: "A decade of active healing", d: "Ten years of therapy, surrender, and God's sanctifying grace — through divorce, betrayal, grief, and rebuilding. I've walked the road I now walk with you. This isn't a subject I studied. It's the fire I came through, and the reason I can sit calmly in yours." },
    { tag: "Formation & Modalities", t: "Trained in gentle, whole-person work", d: "My approach is shaped by Internal Family Systems (parts work), somatic and nervous-system work, inner-child reparenting, and grace-based, identity-in-Christ theology. Parts work taught me to meet every part of a person without judgment; somatic work, to connect the body to the heart; reparenting, to heal what we never knew was hurting." },
    { tag: "Professional Background", t: "Twenty years learning to see people", d: "Nearly twenty years in corporate marketing, and thirteen years before that owning a photography business. Three decades of learning to truly see people. Now I help women finally see themselves." },
    { tag: "The Calling", t: "“Strengthen your sisters”", d: "After a retreat, Luke 22:32 hit my soul like lightning: “When you return, strengthen your sisters.” Within a week of losing my six-figure job, Refined Life Coaching was formed and every door had opened — as only God can arrange. I'm simply living into the calling He gave me." },
  ];
  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 & formation</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--cream)", lineHeight: 0.98, fontWeight: 500 }}>
              Refined first,{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>so I could walk with you.</span>
            </h2>
            <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.6, color: "rgba(248,244,237,0.72)" }}>
              I'm not a licensed therapist, and I'll never pretend to be. What I bring is lived healing, gentle training in whole-person work, and a heart that has been through the fire and found God faithful in it.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid rgba(248,244,237,0.18)" }}>
            {items.map((it, i) => (
              <div key={i} style={{ padding: "32px 28px 32px 0", borderBottom: i < 2 ? "1px solid rgba(248,244,237,0.18)" : "none", borderRight: i % 2 === 0 ? "1px solid rgba(248,244,237,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(248,244,237,0.72)" }}>{it.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="about" />
      <main>
        <PageHero
          eyebrow="My Story"
          title="I lost myself—"
          italic="then God found me."
          subtitle="A butterfly in a Texas driveway. A miracle born on September 11th. A marriage that ended at a hotel pool. A decade of healing I never planned. This is the road I walked — and the reason I now walk it, gently, with other women."
          verse="When you return, strengthen your sisters."
          verseRef="Luke 22:32"
        />
        <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 }}>
              {[["15", "", "When God became real to me"], ["10", "yrs", "In active healing & therapy"], ["20", "yrs", "In marketing before this calling"], ["1", "", "Calling · to strengthen her sisters"]].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="Let's walk the next part"
          headlineItalic="together."
          checklist={[
            "Where you feel stuck right now — and what might be underneath it",
            "What gentle, one-on-one healing could look like for you",
            "Which starting place fits your season — 1:1, the Sisterhood, or on your own",
            "Whether we're the right fit to walk together",
          ]}
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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