/* Stories / Testimonials - William Sherry · honest handling: one witnessed
 * transformation (Mike & Kim, as told by William) + his own words, verbatim.
 * Endorsements are still being gathered. No invented clients. */
const { useState } = React;

const FEATURED = {
  name: "Mike & Kim", meta: "As told by William",
  quote: "I walked with Mike and Kim through a tough time in their marriage. Through faith and love, God healed their marriage.",
};

const ALL = [
  { name: "William", kind: "The first transformation", meta: "His own words, verbatim", quote: "I do not believe the lies that I tell myself. I give myself and others grace. I am more open and trusting and listen to others for confirmation." },
  { name: "William", kind: "The night he came home", meta: "From his story", quote: "Blacking out was no big deal. Ten seconds was no big deal. But while driving over 65 mph on the four-lane? There was no way that this lifestyle could continue. God had made it very clear that it was time for me to return." },
  { name: "William", kind: "Nearly fifty years", meta: "His marriage", quote: "We sought counseling. We endured counseling. Our marriage survived the harshest lies that Satan could throw at us. Next year we hope to celebrate 50 years together." },
  { name: "William", kind: "What grace did", meta: "His own words, verbatim", quote: "I was a Pharisee, and people don't need more rules, they need loved where they are. Forgiveness of others, especially when they don't deserve it. More grace!" },
  { name: "Friends & ministry partners", kind: "Endorsements", meta: "Being gathered now", quote: "Words from the people who know William best are being collected now. When they arrive, they'll appear here exactly as written. Nothing paraphrased, and nothing invented." },
];

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 marriage in a hard season.{" "}
          <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Healed by faith and love.</span>
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "center" }}>
          <Placeholder label="A bridge over the river" alt="A wooden footbridge crossing a rushing river into the forest" src={BRIDGE_IMAGE_URL} objectPosition="center" 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(24px, 2.8vw, 36px)", lineHeight: 1.4, color: "var(--walnut)", fontFamily: "'Source Serif 4', serif", fontWeight: 300, fontStyle: "italic", marginBottom: 28 }}>
              {FEATURED.quote}
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--walnut-soft)", marginBottom: 32, maxWidth: 620 }}>
              I knew that road before I ever walked it with them. Twenty-two years into our own marriage, my wife and I sat down and talked about divorce. So I didn't come to Mike and Kim with a technique. I came with a listening ear, a lot of grace, and a God who had already done it once in my own home.
            </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 from the river</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 64px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            Honest beats{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>impressive.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)" }}>
            River Song is a young practice, and I'd rather be honest with you than impressive. Everything below is real: my own story in my own words, because I was the first person this work had to be true for. Endorsements from people who know me are on their way, and when my first coaching clients finish, their words will live here too.
          </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 }}>{t.kind}</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>
          ))}
          <figure style={{ background: "var(--walnut)", color: "var(--cream)", padding: "36px 36px 32px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <div className="smallcaps" style={{ color: "var(--sage-soft)", marginBottom: 18 }}>The next story</div>
            <blockquote style={{ fontSize: 20, lineHeight: 1.5, fontFamily: "'Source Serif 4', serif", fontStyle: "italic", fontWeight: 300, marginBottom: 26 }}>
              This spot is saved for a story that hasn't happened yet: the one where Sunday night stops winning, and Monday starts with a prayer instead of a knot in your stomach.
            </blockquote>
            <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" className="btn" style={{ background: "var(--cream)", color: "var(--walnut)", alignSelf: "flex-start" }}>
              Start the conversation <span className="arrow">→</span>
            </a>
          </figure>
        </div>
      </div>
    </section>
  );
}

function StatsBar() {
  return (
    <section style={{ padding: "48px clamp(28px, 6vw, 96px)", background: "var(--walnut)", color: "var(--cream)" }}>
      <div className="container stats-row" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40 }}>
        {[["1977", "Married · still choosing each other"], ["1", "Marriage walked alongside & healed"], ["0", "Invented testimonials, ever"]].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: 44, fontWeight: 500, color: "var(--cream)", letterSpacing: "-0.04em" }}>{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"
          title="Real stories."
          italic="Nothing invented."
          subtitle="River Song Heart and Spirit is new, so this page only holds what's true: a marriage I walked alongside and watched God heal, and my own story in my own words. When my first clients finish their journey, their stories will live here too. Yours might be one of them."
          verse="When you pass through the waters, I will be with you; and when you pass through the rivers, they will not sweep over you."
          verseRef="Isaiah 43:2"
        />
        <StatsBar />
        <Featured />
        <Grid />
        <CTA
          eyebrow="✦ Your turn"
          headline="The next story could be"
          headlineItalic="yours."
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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