/* Stories — Sally Buckner · Triumph Life Coaching
 * Endorsements are real, lightly trimmed, attributed by relationship (names withheld
 * for privacy). The two longer "stories from the work" are Sally's own accounts of
 * people she has walked with — names changed, shared with their freedom in view. */
const { useState } = React;

const FEATURED = {
  name: "A trusted friend of 20+ years", meta: "Marriage · inner healing · confidant",
  quote: "I have had the honor of knowing Sally Buckner for more than twenty years, and through this time she has become a deeply trusted friend and confidant. Her wisdom and counsel in my life and marriage have been a lifeline and a non-judgmental safe place. I have grown so much and gained inner healing through her Spirit-led guidance. She is a woman of great integrity who walks with compassion toward others and lives what she knows to be the truth.",
};

/* Sally's own accounts — names changed for privacy */
const STORIES = [
  {
    name: "“Lynn”", meta: "Rejection · guilt · a daughter restored",
    body: "Lynn came to me hurting from her adult daughter's rejection — it was consuming her. After her husband passed, Lynn eventually moved on with her life, and her daughter pulled away in anger. We prayed through everything Lynn was feeling about herself and broke the lies and the guilt she was carrying for living again. She gave the rejection completely to the Lord. The very next day, out of the blue, her daughter called and asked Lynn to forgive her for being selfish and judgmental. Lynn told me she felt a shift in her heart the moment she released it to Jesus — and she was shocked how fast it all came.",
  },
  {
    name: "“Tina”", meta: "Could not trust the Father · 2½ years",
    body: "Tina could talk to Jesus and believe in the Holy Spirit, but she was terrified to call God 'Father.' She'd grown up without one, with a mother lost to addiction, and as a teenager had been pulled into a cult that demanded submission to an abusive 'father.' We worked together for two and a half years, always at the pace she could handle, because she finally felt safe. Her breakthrough came when she embraced the little girl inside who never had a father — and saw Jesus show her that He was one with the Father, and that He was hers. She told me the most beautiful thing: that I never forced her, she got to choose. For the first time she understood what a loving relationship really was.",
  },
];

const ENDORSEMENTS = [
  { name: "A friend of 10+ years", meta: "Church · personal counseling", quote: "I've known Sally for over ten years through church, and she has always been someone who carries compassion, wisdom, and integrity. I've personally had counseling sessions with her and always felt seen, safe, and never judged. Sally has a beautiful heart for people and creates an environment where you can truly be yourself and feel supported. She is someone I would confidently trust to walk alongside others in their healing and personal growth journey." },
  { name: "A friend of 30+ years", meta: "Counseled together · lifelong friend", quote: "I have known my friend Sally for over thirty years and plan on knowing her thirty more. She is my confidant, counselor, shoulder to cry on, and so much more. She is the person I go to when I need a place to unload my deepest feelings, hurts, questions, and spiritual thoughts. She taught me a lot about unconditional love as we counseled together at a pregnancy center, where confidentiality was a must. I couldn't imagine doing life without her." },
];

/* Things clients have said — verbatim, anonymous */
const WORDS = [
  "I feel so much lighter.",
  "Now I understand why I'm afraid of being in a crowd.",
  "I see where I was believing the lies about myself.",
  "I never knew that spiritual warfare was in my heart.",
  "I never knew I was struggling under religious beliefs that were never true.",
  "I had no idea unforgiveness was hurting me worse than the person I wasn't forgiving.",
];

function Featured() {
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Featured</div>
        <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500, marginBottom: 48 }}>
          A lifeline, and a{" "}
          <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>safe place.</span>
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "center" }}>
          <Placeholder label="Sally · portrait" src={PORTRAIT_URL} objectPosition={PORTRAIT_POS} style={{ aspectRatio: "4 / 5", width: "100%" }} />
          <div>
            <div aria-hidden style={{ fontFamily: "'Source Serif 4', serif", fontStyle: "italic", fontWeight: 300, fontSize: 140, color: "var(--terracotta)", opacity: 0.25, lineHeight: 0.5, marginBottom: 14 }}>"</div>
            <p style={{ fontSize: "clamp(22px, 2.4vw, 30px)", lineHeight: 1.45, color: "var(--walnut)", fontFamily: "'Source Serif 4', serif", fontWeight: 300, fontStyle: "italic", marginBottom: 32 }}>
              {FEATURED.quote}
            </p>
            <div style={{ display: "flex", alignItems: "center", gap: 14, paddingTop: 24, borderTop: "1px solid var(--rule-strong)", flexWrap: "wrap" }}>
              <div className="display" style={{ fontSize: 22, fontWeight: 500, color: "var(--walnut)" }}>— {FEATURED.name}</div>
              <div style={{ flex: 1, height: 1, background: "var(--rule)", minWidth: 30 }} />
              <div className="smallcaps" style={{ color: "var(--terracotta)" }}>★★★★★</div>
              <div className="smallcaps" style={{ color: "var(--walnut-soft)" }}>{FEATURED.meta}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StoriesFromWork() {
  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div style={{ marginBottom: 48, maxWidth: 920 }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Stories from the work</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 64px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            What breakthrough{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>actually looks like.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)" }}>
            Two stories from people I've walked with, shared in my own words. Names have been changed and details kept gentle — their privacy is sacred to me, and so is their freedom.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
          {STORIES.map((s, i) => (
            <figure key={i} style={{ background: "var(--cream-2)", padding: "40px 36px 34px", display: "flex", flexDirection: "column" }}>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 18 }}>{s.meta}</div>
              <blockquote style={{ fontSize: 17.5, lineHeight: 1.6, color: "var(--walnut)", marginBottom: 24, fontFamily: "'Source Serif 4', serif", fontWeight: 400, flex: 1 }}>{s.body}</blockquote>
              <figcaption style={{ borderTop: "1px solid var(--rule)", paddingTop: 16, display: "flex", alignItems: "center", gap: 12 }}>
                <div className="display" style={{ fontSize: 18, fontWeight: 500, color: "var(--walnut)" }}>{s.name}</div>
                <div style={{ flex: 1, height: 1, background: "var(--rule)" }} />
                <div className="smallcaps" style={{ color: "var(--walnut-soft)", fontSize: 9 }}>Name changed</div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function Endorsements() {
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div style={{ marginBottom: 48, maxWidth: 920 }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Those who know her</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 64px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            A decade — or three —{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>of trust.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)" }}>
            Endorsements from people who have known and been counseled by Sally for many years. Lightly trimmed, otherwise their words. Names withheld for privacy.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
          {ENDORSEMENTS.map((t, i) => (
            <figure key={i} style={{ background: "var(--cream)", padding: "36px 36px 32px", border: "1px solid var(--rule)" }}>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 18 }}>★★★★★</div>
              <blockquote style={{ fontSize: 18, lineHeight: 1.55, color: "var(--walnut)", marginBottom: 26, fontFamily: "'Source Serif 4', serif", fontStyle: "italic", fontWeight: 300 }}>"{t.quote}"</blockquote>
              <figcaption style={{ borderTop: "1px solid var(--rule)", paddingTop: 16, display: "flex", alignItems: "center", gap: 14 }}>
                <Placeholder label="" style={{ width: 44, height: 44, borderRadius: "50%" }} />
                <div>
                  <div className="grotesk" style={{ fontSize: 15, fontWeight: 500, color: "var(--walnut)" }}>{t.name}</div>
                  <div className="smallcaps" style={{ color: "var(--walnut-soft)", fontSize: 9 }}>{t.meta}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>

        <div style={{ marginTop: 56 }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 24 }}>✦ Words clients have said</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--rule-strong)" }}>
            {WORDS.map((w, i) => (
              <div key={i} style={{ padding: "26px 28px 28px", borderRight: (i % 3 !== 2) ? "1px solid var(--rule)" : "none", borderBottom: i < 3 ? "1px solid var(--rule)" : "none" }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--terracotta)", marginBottom: 12 }}>0{i + 1}</div>
                <p className="serif-italic" style={{ fontSize: 18, lineHeight: 1.45, color: "var(--walnut)", fontWeight: 300 }}>"{w}"</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function StatsBar() {
  return (
    <section style={{ padding: "48px clamp(28px, 6vw, 96px)", background: "var(--walnut)", color: "var(--cream)" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40 }}>
        {[["38 yrs", "Walking people toward freedom"], ["100s", "Counseled · nonjudgmental, confidential"], ["5.0", "Endorsements · ★★★★★"]].map(([n, l], i) => (
          <div key={i} style={{ display: "flex", alignItems: "baseline", gap: 16, borderLeft: i === 0 ? "none" : "1px solid rgba(238,241,245,0.18)", paddingLeft: i === 0 ? 0 : 32 }}>
            <div className="display" style={{ fontSize: 44, fontWeight: 500, color: "var(--cream)", letterSpacing: "-0.04em" }}>{n}</div>
            <div className="smallcaps" style={{ color: "var(--terracotta)" }}>{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="stories" />
      <main>
        <PageHero
          eyebrow="Stories"
          title="Seen, safe, and"
          italic="never judged."
          subtitle="Some of these are endorsements from people who have known and trusted Sally for decades. Two are stories from the work itself — shared in Sally's words, with names changed and privacy protected. The next story could be yours."
          verse="You will know the truth, and the truth will set you free."
          verseRef="John 8:32"
        />
        <StatsBar />
        <Featured />
        <StoriesFromWork />
        <Endorsements />
        <CTA
          eyebrow="✦ Your turn"
          headline="Ready to write"
          headlineItalic="your story?"
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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