/* About Krystal - using official intake copy */
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 Krystal</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
              I'm a woman still healing.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Walking it gently with God.</span>
            </h2>
            <Placeholder
              label="Krystal · candid portrait"
              src={PORTRAIT_URL}
              objectPosition="center top"
              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.55, color: "var(--walnut)", fontWeight: 300 }}>
                "We have this hope as an anchor for our lives, safe and secure."
              </p>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginTop: 12 }}>Hebrews 6:19</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 have a faith problem. You have a nervous system that has carried too much, for too long. We're going to gently care for what no one ever taught you how to care for — and you'll find God meeting you there, kinder than you ever knew."
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 26, fontSize: 17.5, lineHeight: 1.75, color: "var(--walnut-soft)" }}>
              <p>My story with God is not a story of avoiding suffering. It is a story of God carrying me through it.</p>
              <p>I grew up in a loving Christian home and came to know Christ at a young age. I studied psychology and Christian leadership, married a pastor, and spent years in ministry — mentoring women, pouring myself into caring for others. I became a mother. I homeschooled my children. I fostered twelve children across eight years, and eventually adopted my youngest two from foster care. <span className="serif-italic" style={{ color: "var(--walnut)" }}>My home was loud, messy, exhausting, and full of people who needed love and stability. I truly believed that creating safety for vulnerable children was one of the greatest callings God had given me.</span></p>
              <p>Then my world shattered. The life I thought I understood suddenly became filled with grief, betrayal, trauma, confusion, and deep pain. There were questions I couldn't answer, wounds I couldn't fix, and losses that changed me deeply. For a while, survival was all I could manage.</p>
              <p>I learned, slowly and hard, that trauma does not only affect the mind or spirit — it affects the body too. My nervous system lived in survival mode. I was exhausted, overwhelmed, hypervigilant, emotionally flooded, and trying to hold together a life that no longer felt familiar. At first, I thought healing meant trying harder spiritually. Praying more. Having more faith. Holding myself together better. <span className="serif-italic" style={{ color: "var(--walnut)", fontSize: 19 }}>But over time, God gently taught me something different. He showed me that healing is often slower, softer, and more human than I expected.</span></p>
              <p>I began learning about trauma-informed care and somatic healing. I started practicing grounding exercises, breathing slowly, reconnecting with my body, and allowing myself to rest. I learned that sometimes God meets us the way He met Elijah in the wilderness — first with rest, nourishment, gentleness, and safety before anything else. That realization changed me.</p>
              <p>I learned my survival responses were not moral failures. My exhaustion was not weakness. My emotions were not signs that I lacked faith. God cared about my whole person — body, mind, heart, and spirit. Slowly, healing stopped looking like "pushing through" and started looking more like learning safety again.</p>
              <p>Somewhere in the middle of my own healing journey, God began reshaping my ministry too. My heart became especially drawn toward overwhelmed women and mothers — women who love God deeply but feel emotionally exhausted, spiritually disconnected, stuck in survival mode, or lost underneath the weight they carry.</p>
              <p>Now I help women reconnect with both their bodies and their faith. I teach grounding, nervous system regulation, emotional safety, gentle rhythms, and identity in Christ. My work blends trauma-informed somatic support with biblical truth — because that is the path God used in my own healing.</p>
              <p>My story is not polished. It is a story of walking wounded and discovering that God still stays. <span className="serif-italic" style={{ color: "var(--walnut)" }}>I still carry grief. I still have healing to do. But I also carry hope.</span> I still believe in beauty. I still believe in healing. I still believe God restores broken places slowly and faithfully over time. And by the grace of God, I am still walking.</p>
            </div>
            <div className="display" style={{ fontSize: 32, fontWeight: 300, color: "var(--walnut)", marginTop: 36, fontFamily: "'Source Serif 4', serif", fontStyle: "italic" }}>— Krystal</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Beliefs() {
  const beliefs = [
    { n: "I", title: "God cares for the whole person.", body: "Body. Mind. Heart. Spirit. The Spirit doesn't only care about your thoughts. He cares about the shoulders that won't drop, the breath that stays shallow, the sleep that doesn't come. Real healing has to include what you carry in your body — or it isn't healing." },
    { n: "II", title: "Trying harder is not the gospel.", body: "Hustle is not holiness. Pressure does not heal an overwhelmed nervous system — it deepens the wound. Grace, gentleness, and slow obedience are how God carried me through. They are also how I walk with women. There is no shame here, ever." },
    { n: "III", title: "Identity in Christ over performance.", body: "You are loved before you produce. You are seen before you serve. You are held before you achieve. Your healing rests on who God already says you are in Christ — not on how hard you can try this week. We anchor there first, and the rest follows." },
  ];
  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: 1.0, fontWeight: 500 }}>
            The convictions{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>this work rests on.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.65, color: "var(--walnut-soft)", maxWidth: 720 }}>
            Soft does not mean shallow. Gentle does not mean weak. Every mentorship I offer rests on three foundational beliefs about God, women, and what real healing actually 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.2, marginBottom: 18 }}>{b.title}</h3>
              <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--walnut-soft)" }}>{b.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Credentials() {
  const items = [
    { tag: "Academic & Vocational", t: "Psychology · Christian Leadership · two decades in ministry", d: "I studied psychology and Christian leadership. Married a pastor and spent nearly two decades in ministry, women's discipleship, and mentoring. I love Scripture as deeply as I love nervous-system science — and have spent twenty years learning to hold both with care." },
    { tag: "Trauma-Informed Training", t: "Somatic care · nervous system · attachment", d: "Trained in trauma-informed somatic care, nervous system regulation, attachment work, and emotional regulation. Shaped by the work of Aimie Apigian, Bessel van der Kolk, Dan Siegel, and Nadine Burke Harris — the language of the body, applied gently inside a Christ-centered frame." },
    { tag: "Caregiving & Foster Care", t: "12 foster children · adopted two", d: "Mother. Homeschool teacher. Foster parent to twelve children across eight years. Adoptive mother of two. I have personally lived inside the chronic caregiver overwhelm I now help other women heal from — and I know how easily a woman disappears underneath everyone else's needs." },
    { tag: "Lived Healing", t: "Walked through grief · betrayal · trauma · burnout", d: "Personal experience with deep grief, betrayal, chronic stress, and the slow work of nervous-system healing. I do not write or teach what I haven't first lived. The path I walk women through is the same one God walked me through — and the one I am still walking, one gentle day at a time." },
  ];
  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 & training</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--cream)", lineHeight: 1.0, fontWeight: 500 }}>
              Trained, tested, 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.65, color: "rgba(250,246,240,0.72)" }}>
              Two decades in ministry. Trauma-informed somatic training. Years of fostering, homeschooling, and caregiving. And a long, gentle road of personal healing that taught me how to walk with women in theirs.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid rgba(250,246,240,0.18)" }}>
            {items.map((it, i) => (
              <div key={i} style={{ padding: "32px 28px 32px 0", borderBottom: i < 2 ? "1px solid rgba(250,246,240,0.18)" : "none", borderRight: i % 2 === 0 ? "1px solid rgba(250,246,240,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.25, marginBottom: 10 }}>{it.t}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6, color: "rgba(250,246,240,0.72)" }}>{it.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="about" />
      <main>
        <PageHero
          eyebrow="My story"
          title="My world shattered."
          italic="God carried me through."
          subtitle="Two decades of ministry. Twelve foster children. A season that broke me open and a slow, gentle road back into my own body and into the steady arms of God. This is the road I walked — and the one I now walk with women who are tired of pretending they're okay."
          verse="My flesh and my heart may fail, but God is the strength of my heart and my portion forever."
          verseRef="Psalm 73:26"
        />
        <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 }}>
              {[["20+", "yrs", "Ministry & mentoring"], ["12", "", "Foster children · loved"], ["2", "", "Adopted from foster care"], ["1", "", "Mission · whole-person 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 start"
          headlineItalic="exhaling?"
          checklist={[
            "Where survival mode is still quietly running things in your body and your day",
            "What a gentle, whole-person path toward steadiness might actually look like for you",
            "Which path feels right for your season — weekly 1:1, flexible voice-and-text, or self-paced",
            "Whether we're a kind, honest fit for the work ahead — no pressure either way",
          ]}
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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