/* About Sally Buckner — woven from her intake, in her 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 Sally</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
              He was speaking over me.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>I just couldn't hear it yet.</span>
            </h2>
            <Placeholder label="Sally · portrait" src={PORTRAIT_URL} objectPosition={PORTRAIT_POS} 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 }}>
                "Though my father and mother forsake me, the Lord will receive me." He has proven this scripture to me over and over again.
              </p>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginTop: 12 }}>Psalm 27:10</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 self-worth problem. You have a little one still hiding in the bushes, whispering 'The Lord is my Shepherd and I do want You too,' waiting to be told she was always wanted. We're going to tell her the truth — and you'll never see yourself the same way again."
              </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 the home everyone called "the unsupervised one." My dad lived away, my mom was always working, and I was the youngest of six — born six years after the rest, so I was the one left in my siblings' way. Life with them was emotionally and physically abusive. I was a child no one had time for.</p>
              <p>But at five years old, a kind family up the road took me to church. A Sunday school teacher read us Psalm 23 and showed us pictures of Jesus holding a lamb and a child in His lap. <span className="serif-italic" style={{ color: "var(--walnut)" }}>I remember wishing I were that little lamb in His arms.</span> Not long after, a brother and his friend began to abuse me and tormented the dog I loved. When I heard them coming, I would run and hide in the big bushes and say it over and over: "The Lord is my Shepherd, and I do want You too." Sometimes they couldn't find me. And I always found a little peace.</p>
              <p>At fourteen, my sister sat me down and told me the family secret: that when I turned eighteen, my father would tell me I was not his biological daughter. Everything I already believed about myself snapped into focus. <span className="serif-italic" style={{ color: "var(--walnut)", fontSize: 19 }}>I thought, no wonder he lived away. I was the mistake. I was the one nobody wanted.</span> I held the rage and the shame in, the way I'd learned to hold everything in.</p>
              <p>I found safety in being cute, smart, and athletic — Captain of the Drill Team, in love with our Drum Major. We married right after I graduated in 1977 and we are still married today. The first ten years were rough. Then my two daughters were born, and everything in me changed. I was going to protect them and live right. A dear friend invited me to a Bible study, and there, Jesus rocked my world. I had always believed in the Father, Son, and Holy Spirit — but I had never felt how much the Father actually loved me.</p>
              <p>Then the strangest thing started happening. People began handing me cards, little pictures, Precious Moments figures — all of them Psalm 23. Over and over. And it finally hit me: <span className="serif-italic" style={{ color: "var(--walnut)" }}>Jesus had been speaking to me since I was five years old. He had been there the whole time I was suffering.</span></p>
              <p>At twenty-eight I started volunteering at a crisis-pregnancy center, counseling women — most of them survivors of abuse — with the love of Jesus. They sent me to train under Elijah House Ministries, and I went through an intense healing and deliverance of my own. I served there for thirty-eight years, growing from a volunteer with no degree into the Executive Director, and watched that ministry grow from a single pregnancy test into a full medical clinic. I retired in 2025.</p>
              <p>I know the Lord closed that chapter to open this one: walking alongside people who are still bound by trauma, abuse, neglect, abandonment, illegitimacy, self-hatred, and self-rejection. I've had breakthrough in every one of those — by discovering that the real spiritual battle was in my own heart, and by embracing who Jesus says I am instead of what my circumstances made me believe.</p>
              <p>He marked me to help others come to know Him. So here I am.</p>
            </div>
            <div className="display" style={{ fontSize: 32, fontWeight: 300, color: "var(--walnut)", marginTop: 36, fontFamily: "'Source Serif 4', serif", fontStyle: "italic" }}>— Sally</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Beliefs() {
  const beliefs = [
    { n: "I", title: "You are who God says you are.", body: "Not what the abuse said. Not what your family decided. Not what your circumstances trained you to believe. The whole of this work is learning to believe — and to actually receive — the identity God authored for you before you were ever born. You are a human being, not a human doing." },
    { n: "II", title: "The battle is in the heart.", body: "Most people fight their symptoms and lose, because the real war is somewhere they've never looked. The spiritual battle is in your own heart — in the lies you came to believe and the unbelief hiding underneath your faith. When the heart is told the truth, the body and the soul follow." },
    { n: "III", title: "A safe place is sacred, not religious.", body: "I am not a therapist, and I will never hand you religion, rules, or 'turn or burn.' I offer a safe, nonjudgmental place where you can finally say what you've never said — and be met by the Father's heart, with compassion, hope, and the truth that sets you free." },
  ];
  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 }}>
            Compassionate. Hopeful. Encouraging. Every conversation I lead is built on these three convictions about people, healing, and what it means to come home to the Father's heart.
          </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: "Restoration Ministry", t: "38 years · volunteer to Executive Director", d: "Thirty-eight years in crisis-pregnancy ministry — from a volunteer with no degree to Executive Director, until I retired in 2025. I helped grow that ministry from a single pregnancy test into a full medical clinic offering ultrasounds, post-abortion counseling, STI care, abortion-pill reversal, parenting and life-skills programs, and a sexual-health curriculum taught in local high schools." },
    { tag: "Healing & Deliverance Training", t: "Trained under Elijah House Ministries", d: "Formally trained under Elijah House Ministries (John & Paula Sanford) and grounded in the Transformation of the Inner Man — the understanding that a broken spirit affects the soul and body. I began by going through my own intense healing and deliverance before ever walking it with anyone else." },
    { tag: "Coaching & Lived Healing", t: "Certified life coach · decades of inner work", d: "A certified life coach with decades on my own active healing journey out of abuse, abandonment, illegitimacy, self-hatred, and self-rejection. Trauma-informed work (van der Kolk, Maté, Walker) taught me about body memories; inner-child and shame work (John Bradshaw, Alice Miller) taught me it's safe to have feelings and express them." },
    { tag: "Theological Lineage", t: "Identity & grace-based teaching", d: "Shaped by John and Paula Sanford, Andrea Sanford Bareither, Steve and Wendy Backlund, Bill Johnson, and Sammi and Spenser Robbins. Identity in Christ and grace-based theology are not abstractions to me — they are the lifeline that pulled me out of believing I was unwanted." },
  ];
  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: 0.98, fontWeight: 500 }}>
              Trained, tested, and{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>still His.</span>
            </h2>
            <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.6, color: "rgba(238,241,245,0.7)" }}>
              Almost four decades of ministry, formal healing-and-deliverance training, and a lifetime of lived healing. None of this is theory. Most of it cost me something to learn.
            </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="They told me I was a mistake."
          italic="God had been calling me His."
          subtitle="The youngest of six in 'the unsupervised home.' Abused by the people meant to protect me. Told at fourteen that I was unwanted. And loved, the whole time, by a Shepherd I met at five years old. This is the road I walked — and the one I now walk with you."
          verse="Though my father and mother forsake me, the Lord will receive me."
          verseRef="Psalm 27:10"
        />
        <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 }}>
              {[["38", "yrs", "In restoration ministry"], ["2025", "", "Retired as Executive Director"], ["100s", "", "Counseled toward freedom"], ["1", "", "Mission · your freedom in Christ"]].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 meet"
          headlineItalic="the real you?"
          checklist={[
            "Where the lie about your worth first got handed to you",
            "What it looks like to believe — and receive — who God says you are",
            "Which path fits your season — the full Journey, an Intensive, or one conversation",
            "Whether we're the right fit to walk this road together",
          ]}
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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