/* Stories — Brenda's endorsements, verbatim; her practice stories told in
 * her own words with no names. Nothing here is invented. */
const { useState } = React;

const FEATURED = {
  name: "Kim Russell", meta: "Friend & colleague · written endorsement",
  quote: "Brenda is one of those rare people who makes you feel truly seen, heard, and valued. She listens with genuine care, remembers the details that matter, follows up faithfully, and treats what you share with great discretion and integrity. She has a soft heart for people who are hurting and, having experienced suffering herself, brings a unique depth of compassion and an ability to find hope even in difficult circumstances. Brenda exudes joy, is willing to do the hard work, and is someone I would trust wholeheartedly to walk alongside others in their most vulnerable seasons.",
};

const ALL = [
  { kind: "endorsement", name: "Beth Lepore", meta: "Friend of 25+ years · written endorsement", quote: "Having known Brenda for over 25 years, I can whole-heartedly say she has always been a listening ear, a trusted confidant, and a source of wise advice. She truly walks the walk, embodying the same principles and wisdom that she guides others toward. If you're looking for someone to help you heal and grow, you couldn't be in better hands." },
  { kind: "client", name: "Charissa", meta: "Coaching client · in her words", quote: "Brenda is a breath of fresh air, a beam of sunshine into any dark place you are exploring within. She comes alongside you as a coach with understanding, sensitivity, care & compassion. She radiates joy & wonder, empowering your spirit to soar." },
  { kind: "client", name: "Annie S.", meta: "Coaching client · in her words", quote: "Brenda brings knowledge to help heal trauma that is deep rooted and complicated to reach. She brings warmth, joy, wisdom and education to her coaching and makes you feel seen. She has a kind, loving, generous, compassionate heart, and I definitely recommend her to anyone who has been through trauma and needs to heal their inner child and nervous system." },
  { kind: "client", name: "Lisa M.", meta: "Coaching client · in her words", quote: "Brenda is an absolute delight! We have met a few times and she's never failed to touch my heart deeply. She's very good at inner child connection and healing. I highly recommend her!" },
  { kind: "client", name: "Dakota J.", meta: "Coaching client · in her words", quote: "I had the pleasure of meeting Brenda for sessions where we dove deep into inner child healing and reparenting my younger self. She was incredibly warm and inviting from the moment I got on the call and gently led me through real breakthrough. She allowed me to feel, and work through my emotions, all while providing the support and encouragement I needed to get through such a heavy moment. I recommend Brenda to anyone who wants to work on regulating their nervous system, and truly connect to the wounded parts of themselves that need extra love and attention!" },
  { kind: "endorsement", name: "Trudy Kocher", meta: "Friend · written endorsement", quote: "Brenda's love and passion for helping people is sincere. She is focused and knows how to make others feel that they are very important. She consistently displays a positive attitude. Her caring, warm personality makes it easy to share personal issues. Her close relationship with God and knowledge of the Bible is central to her in how she handles life and its many challenges." },
  { kind: "story", name: "Recognizing the wounds", meta: "Told by Brenda · names withheld", quote: "I have helped several women recognize their wounds and begin the steps of healing those wounds." },
  { kind: "story", name: "Working through triggers", meta: "Told by Brenda · name withheld", quote: "I have helped a trauma survivor with her triggers." },
  { kind: "story", name: "Seeing her own value", meta: "Told by Brenda · name withheld", quote: "I have helped a woman struggling in her job at a Christian school follow God's path in a very complicated and uncomfortable setting, enabling her to see her value, stay confident, resign, and find a new job that better values and suits her." },
  { kind: "own", name: "Brenda's own story", meta: "The healing she has lived", quote: "My physical challenges that exploded in my body in 2012 have healed. My marriage is stronger than ever!" },
];

const KIND_LABEL = {
  endorsement: "Written endorsement",
  client: "From a coaching client",
  story: "A story from the road",
  own: "Where healing led me",
};

function Featured() {
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Featured endorsement</div>
        <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500, marginBottom: 48 }}>
          Trusted in the most{" "}
          <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>vulnerable seasons.</span>
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "center" }}>
          <Placeholder label="Brenda McPherson" src={PORTRAIT_URL} alt="Brenda McPherson" objectPosition="center 20%" style={{ aspectRatio: "4 / 5", width: "100%" }} />
          <div>
            <div aria-hidden="true" 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(20px, 2.2vw, 27px)", 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(--walnut-soft)" }}>{FEATURED.meta}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Grid() {
  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 }}>✦ More words</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 64px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            Friends, clients,{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>and stories from the road.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)" }}>
            An honest note: Free to Thrive is a new practice, so you won't find paid reviews or polished case studies here. What you will find are words from her coaching clients and from people who know Brenda well, printed as they were written, and a few true stories from women she has already walked with, shared in her words and without names, because their privacy matters.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
          {ALL.map((t, i) => (
            <figure key={i} style={{ background: "var(--cream-2)", padding: "36px 36px 32px", display: "flex", flexDirection: "column" }}>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 18 }}>{KIND_LABEL[t.kind]}</div>
              <blockquote style={{ fontSize: 18, lineHeight: 1.55, color: "var(--walnut)", marginBottom: 26, fontFamily: "'Source Serif 4', serif", fontStyle: "italic", fontWeight: 300, flex: 1 }}>"{t.quote}"</blockquote>
              <figcaption style={{ borderTop: "1px solid var(--rule)", paddingTop: 16, display: "flex", alignItems: "center", gap: 14 }}>
                <Initials name={t.kind === "endorsement" || t.kind === "client" ? t.name : ""} size={44} />
                <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>
    </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 }}>
        {[["7", "Written testimonials · unedited"], ["25+ yrs", "The longest friendship behind them"], ["0", "Invented or paid reviews"]].map(([n, l], i) => (
          <div key={i} className="stat-cell" 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", whiteSpace: "nowrap" }}>{n}</div>
            <div className="smallcaps" style={{ color: "var(--sage-soft)" }}>{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="stories" />
      <main>
        <PageHero
          eyebrow="Stories & Kind Words"
          title="Seen, heard,"
          italic="and valued."
          subtitle="These are the words of coaching clients and of friends who have known Brenda for many years, printed as they were written. Alongside them are a few stories from women she has already walked with. The next story could be yours."
          verse="The God of all comfort, who comforts us in all our troubles, so that we can comfort those in any trouble with the comfort we ourselves receive from God."
          verseRef="2 Corinthians 1:3–4"
        />
        <StatsBar />
        <Featured />
        <Grid />
        <CTA
          eyebrow="✦ Your turn"
          headline="Ready to begin"
          headlineItalic="your story of healing?"
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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