/* Bri Hershberger · The Glass Heart — About page */
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 Bri</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
              I'm still on the path.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Still becoming.</span>
            </h2>
            <Placeholder label="Bri · portrait" src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1200&q=80" alt="Soft light breaking through mist" 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 }}>
                "In him was life and the life was the light of men. The light shone in the darkness and the darkness could not comprehend it."
              </p>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginTop: 12 }}>John 1:4–5</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 someone to fix you or give you a ten-step plan. You need someone to actually sit with you in it — and stay. That's what I always needed. That's what I offer."
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 26, fontSize: 17.5, lineHeight: 1.75, color: "var(--walnut-soft)" }}>
              <p>I became a Christian at 13 without any real guidance. I found the church, made the decision — and then felt completely lost about what came next. I drifted. Got depressed. Floated through a faith I couldn't feel until a counselor at a summer camp named Chantelle agreed to be my mentor.</p>
              <p>Chantelle was the first person who ever made me feel fully seen without judgment. We prayed together. We cried together. She listened to my heart without trying to fix it, and I began digging into the Bible with a hunger I'd never had before. <span className="serif-italic" style={{ color: "var(--walnut)" }}>For the first time, I felt like someone was actually with me — not just around me.</span></p>
              <p>And then my mom died. I was sixteen, two weeks from my seventeenth birthday. It started with a stroke, then surgery, then a tear in her brain that wouldn't stop bleeding. I got thirty minutes of sleep in the twenty-four hours before she was gone.</p>
              <p>The grief was barely a few weeks old when our house caught fire. I woke up early and saw the flames before they reached the room where my sisters were sleeping. We watched it burn for hours — from eight in the morning until three in the afternoon. The upstairs destroyed by fire. The downstairs destroyed by water. Ten thousand gallons in the basement alone. <span className="serif-italic" style={{ color: "var(--walnut)", fontSize: 19 }}>I remember wishing I had grabbed my Bible.</span></p>
              <p>In the rubble, people said things like: "You should be glad — it's less work going through your mom's things now." Someone told me to write thank-you notes. I was sixteen. My mother was barely buried. I felt guilty for not having the strength to be grateful. I took on the lie that another person would have handled this better — that my grief was a failure.</p>
              <p>I still believed God was good. But I wanted people who could witness my pain — not fix it, not over-spiritualize it, not minimize it. People who would just stay. Over time, I found them. And over twelve years of therapy, life coaching, inner healing, IFS, shame work, psychology, and Scripture that has been alive and active in me since I was fifteen — I have become one.</p>
              <p>I am currently in therapy and working on my bachelor's degree in psychology. I am committed to always growing and never becoming stagnant. I am a testimony to what happens when someone finally sits with the wound instead of running from it.</p>
            </div>
            <div className="display" style={{ fontSize: 32, fontWeight: 300, color: "var(--walnut)", marginTop: 36, fontFamily: "'Source Serif 4', serif", fontStyle: "italic" }}>— Bri</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Beliefs() {
  const beliefs = [
    { n: "I", title: "I go straight to the source.", body: "Not behavior. Not over-spiritualized platitudes. Not a Bible study or a better morning routine. The wound beneath the pattern is where we start — because that's where real change happens. I'll be honest with you about what I'm noticing, and I'll help you get there yourself through curiosity, not criticism." },
    { n: "II", title: "Your body knows your story.", body: "Every tight chest, every held breath, every moment of sudden overwhelm — it's memory stored in the body. The body keeps score of everything you've been through, and it's still trying to protect you. In our sessions, we listen to it together, with kindness." },
    { n: "III", title: "God is not a fixer. He's a Father.", body: "He doesn't show up to take away your pain. He shows up to sit with you in it — as the loving, intricate, detail-oriented Father who notices every aspect of your life. He is the friend by the campfire, staying up late to talk through the tough times. He is not a distant doctrine. He is present." },
  ];
  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 }}>
            Rooted. Wholeness. Compassion. Every session I lead is built on these three convictions about women, healing, and what it means to become your most alive self.
          </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: "Active Healing Journey", t: "12+ years of personal healing work", d: "I have spent thousands of dollars and hundreds of hours in therapy and life coaching to get to the root of why I do what I do. I am currently in therapy and plan to be for the rest of my life. I am committed to always growing — because you cannot lead someone somewhere you haven't been willing to go yourself." },
    { tag: "Alive & Free Life Coaching", t: "Transformational coaching program", d: "Were it not for life coaching through Alive & Free, I would not have expedited my healing journey, understood my feelings of abandonment, or connected them to a core childhood wound. I am a testimony to why this kind of coaching works — and that testimony is what I bring to every session." },
    { tag: "Psychology Background", t: "Bachelor's degree in progress (3rd year)", d: "I am constantly learning more about how the mind works and why we should take it and our bodies seriously. Hundreds of hours of research into trauma, attachment theory, reparenting, and betrayal recovery ground every question I ask and every practice I recommend." },
    { tag: "Healing Frameworks", t: "IFS · Shame Work · Inner Healing · Reparenting", d: "Inner child work, Internal Family Systems, John Bradshaw's shame work, Alice Miller, identity in Christ and grace-based theology, Holy Spirit-led memory healing, addiction recovery, and attachment theory. Not subjects I studied in a class — seasons I survived and practices that changed 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 }}>
              Formed by the fire.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Still burning clean.</span>
            </h2>
            <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.6, color: "rgba(248,244,237,0.7)" }}>
              I don't offer frameworks I read about in a book. I offer the road I walked — with all the weight, the wrong turns, and the places where God showed up in ways I didn't expect.
            </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.7)" }}>{it.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="about" />
      <main>
        <PageHero
          eyebrow="My Story"
          title="I've been in the fire."
          italic="God didn't leave."
          subtitle="I lost my mom at 16 and my home burned three weeks later. I've spent 12+ years chasing down healing — through therapy, life coaching, inner healing, shame work, and a Bible that has been alive and active in me since I was fifteen. This is what I now offer other women."
          verse="God has not given you a spirit of fear, but of power and of love and of a sound mind."
          verseRef="2 Timothy 1:7"
        />
        <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 }}>
              {[["12+", "yrs", "Active healing journey"], ["100s", "", "Hours in therapy & coaching"], ["3rd", "yr", "Psychology degree in progress"], ["1", "", "Framework — Uproot · Discover · Recover · Thrive"]].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 be"
          headlineItalic="witnessed?"
          checklist={[
            "Where the childhood wound is still writing the script you keep performing",
            "What The Glass Heart Approach actually looks like in a real session",
            "Which path fits your season — intensive 1:1, group circle, or self-paced",
            "Whether we're the right fit for the work ahead",
          ]}
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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