/* Stories / Testimonials - Krystal Larkins Consulting */
const { useState } = React;

const FEATURED = {
  name: "A woman finding steadiness", meta: "After 12 weeks of mentorship",
  quote: "I came into coaching believing I was failing God because I couldn't stop feeling anxious and overwhelmed. Krystal helped me understand what was happening in my body without shame. She taught me to slow down, to ground myself, and to come back to my breath before I tried to think my way out of anything. She showed me how grace and nervous-system science could live in the same conversation. I no longer feel trapped in constant self-criticism. I feel more grounded, emotionally steady, and secure in God's love for me — for the first time in a very long time.",
};

const ALL = [
  { name: "A homeschooling mother", meta: "Mentorship · regulating an overwhelmed nervous system",
    quote: "I felt emotionally overwhelmed and reactive almost every day. Krystal helped me learn how to regulate my nervous system, create gentler daily rhythms, and respond more calmly to stress instead of constantly living in survival mode. For the first time in years, I feel like I can actually breathe again." },
  { name: "A mother in coaching", meta: "After 3 months of mentorship",
    quote: "For the first time in years, I don't feel like I'm drowning inside my own mind. I still have hard moments, but now I know how to slow down, ground myself, and reconnect with God instead of spiraling. The tools are small — small enough to actually do — but they have changed the texture of my days." },
  { name: "A mother in coaching · continued", meta: "Same client · what changed",
    quote: "I'm more present with my children and finally starting to feel peace in my body again. I used to think I needed to try harder spiritually to feel better. Now I understand my body needed something different — and that God was never disappointed in me for being exhausted. That truth alone has been worth everything." },
  { name: "Stacey", meta: "Friend & former boss · endorsement",
    quote: "Krystal is my go-to for advice on how to calm down and reframe my thinking. She always has the words I need to get a hold of my emotions so I can return to rational thinking. She remains my favorite source for Biblical wisdom with practical psychology methods mixed in." },
];

function Featured() {
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Featured story</div>
        <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500, marginBottom: 48 }}>
          From self-criticism{" "}
          <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>to grounded grace.</span>
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "center" }}>
          <Placeholder
            label={FEATURED.name + " · portrait"}
            src={PORTRAIT_URL}
            objectPosition="center top"
            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.5, 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 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 voices</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 64px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
            Mothers, friends, and{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>women coming home.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.65, color: "var(--walnut-soft)" }}>
            Words from women who have walked with me — through overwhelm, through caregiving, through the slow work of learning safety again. Their voices, lightly edited only for privacy, never for substance.
          </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" }}>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 18 }}>★★★★★</div>
              <blockquote style={{ fontSize: 18, lineHeight: 1.6, 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>
    </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 }}>
        {[["20+ yrs", "Ministry & mentoring"], ["12+ wks", "Average mentorship · 3-month minimum"], ["5.0", "Endorsements · ★★★★★"]].map(([n, l], i) => (
          <div key={i} style={{ display: "flex", alignItems: "baseline", gap: 16, borderLeft: i === 0 ? "none" : "1px solid rgba(250,246,240,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="Women learning to"
          italic="exhale again."
          subtitle="These are women who have walked with me — through caregiving exhaustion, anxious nights, motherhood overwhelm, and the slow, gentle work of nervous-system healing. Their words, lightly edited only for privacy. The next story could be yours, in the season that's right for you."
          verse="He heals the brokenhearted and binds up their wounds."
          verseRef="Psalm 147:3"
        />
        <StatsBar />
        <Featured />
        <Grid />
        <CTA
          eyebrow="✦ Your turn, in your time"
          headline="Ready to write"
          headlineItalic="your own?"
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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