/* Stories / Testimonials — Julie Janes · GraceLife Coaching */
const { useState } = React;

const FEATURED = {
  name: "K", meta: "Wife · Healing journey",
  quote: "I learned to get curious when I was triggered. When I would normally lash out and wound others — I got more introspective. I started to recognize that my childhood wounds caused my triggers. My husband noticed I wasn't attacking him anymore. For the first time, I felt like I was actually healing, not just managing.",
};

const ALL = [
  { name: "K", meta: "Wife · Healing journey", quote: "I learned to get curious when triggered, instead of lashing out. I started to recognize that my childhood wounds caused my triggers. My husband noticed I wasn't attacking him anymore. For the first time, I felt like I was actually healing, not just managing." },
  { name: "R", meta: "Mother · Released from guilt", quote: "I leaned into releasing overresponsibility over the feelings of my adult children. In the past, I accepted all their pain and anger as my fault. I've apologized for my part and moved on with love and compassion for them. I didn't know that was possible." },
  { name: "J", meta: "Reclaimed boundaries", quote: "I realized a pattern of grooming and manipulation from a long-time 'friend' — something I had never been able to see before. Julie helped me name it. I found a healthy, honoring way to let go — without shame, without guilt, and without losing myself." },
  { name: "KC", meta: "Healed attachment wounds", quote: "I found healing from mom and dad hurt — with love and compassion for them. I can love and forgive them while still having safe boundaries to protect myself. I didn't know both of those things could be true at the same time." },
  { name: "M", meta: "Childhood healing", quote: "I found peace over something terrifying that happened to me as a little girl. What I realized in coaching was that Jesus was with me the whole time. He never left that little girl alone. That truth changed everything about how I carry myself now." },
  { name: "Anonymous", meta: "GraceLife Coaching client", quote: "I came into coaching thinking I needed to change my behavior. What I found was that I needed to heal the wound driving it. That shift changed everything. The behavior changed on its own once we got to the root." },
];

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: 0.98, fontWeight: 500, marginBottom: 48 }}>
          A wound touched.{" "}
          <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>A woman healed.</span>
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "center" }}>
          <Placeholder
            src="https://assets.cdn.filesafe.space/VUxT5WqlrIHpkaSRllVC/media/6a2227adda24932f1217f987.jpeg"
            alt="Julie Janes"
            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.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 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: 0.98, fontWeight: 500 }}>
            Women who came{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>home to themselves.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)" }}>
            These aren't success stories. They're healing stories. There's a difference. Their words. Their journeys. Their grace.
          </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.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>
    </section>
  );
}

function StatsBar() {
  return (
    <section style={{ padding: "48px clamp(28px, 6vw, 96px)", background: "var(--walnut)", color: "rgba(239,241,232,1)" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 40 }}>
        {[["Women", "coached"], ["Healing journeys", "completed"], ["5.0 ★★★★★", "Endorsements"], ["Years", "of ministry & lived experience"]].map(([n, l], i) => (
          <div key={i} style={{ display: "flex", alignItems: "baseline", gap: 16, borderLeft: i === 0 ? "none" : "1px solid rgba(239,241,232,0.18)", paddingLeft: i === 0 ? 0 : 32 }}>
            <div className="display" style={{ fontSize: 36, fontWeight: 500, color: "rgba(239,241,232,1)", 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 who came"
          italic="home to themselves."
          subtitle="These aren't success stories. They're healing stories. There's a difference."
          verse="Be transformed by the renewing of your mind."
          verseRef="Romans 12:2"
        />
        <StatsBar />
        <Featured />
        <Grid />
        <CTA
          eyebrow="✦ Your turn"
          headline="Ready to write"
          headlineItalic="your story?"
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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