/* Stories / Testimonials — Kevin Wood · Head to Heart */
const { useState } = React;

const FEATURED = {
  name: "Pastor Doug", meta: "Pastor · long-time witness",
  quote: "Kevin Wood is a man of great integrity and faith, and a gifted administrator wherever God uses him in the Body of Christ. Through his leadership skills, compassion, and counsel, he has been a tremendous blessing to those he has served. Hugely positive and completely trustworthy, but consistently \"real\" and able to discern proper godly direction in heavy situations, he has left such a positive and lasting impression on so many. He certainly has on me.",
};

const ALL = [
  { kind: "endorsement", name: "Kara", meta: "Former employee · trusted voice", quote: "Kevin is one of the most genuinely honest and kind people I have ever met. He's not afraid of difficult conversations, but is able to have them in a way where people feel empowered and encouraged. He is trustworthy and dependable and always sees hope even in dark situations." },
  { kind: "endorsement", name: "Anthony", meta: "Friend · lasting impact", quote: "Kevin is one of the nicest and holy people I have had the pleasure of knowing. When I think of the greatest example of someone to look up to, I think of Kevin. Kevin is someone who will give you the best life advice, spiritual advice, and be your best friend all at the same time. Thank you Kevin for making a ever lasting impact on my life!" },
  { kind: "endorsement", name: "Shauna", meta: "Friend · profound conversations", quote: "Kevin is that person who, in a casual or professional setting, will hear what is NOT being said and say that. And before you know it, you've just had a profound and life-changing moment. You can tell quickly that He is a man of faith, love and one who walks deeply with the Trinity and others." },
  { kind: "endorsement", name: "Scott", meta: "Former coworker · 2 yrs under leadership", quote: "I had the privilege of serving under Kevin Wood's leadership for almost two years. I found Kevin to be genuine, authentic and a man who loves people. He has a very tender heart and a compassionate soul. These attributes are evident because above all, Kevin loves Jesus and desires to live a life according to Biblical truths and principles." },
  { kind: "story", name: "Rachel", meta: "Transformation story · in Kevin's words", quote: "Rachel was going through a divorce and needed help to find her value and identity again. She's happily remarried today to a wonderful, godly man — walking in a freedom she had stopped believing was possible." },
  { kind: "story", name: "John", meta: "Transformation story · in Kevin's words", quote: "John was going through a divorce and needed encouragement to find his worth again. He is now thriving and actively involved in his church, waiting on the Lord for what's next in his life — clear-eyed, settled, and at peace." },
];

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 heart, witnessed.{" "}
          <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>By a pastor who knows.</span>
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "center" }}>
          <Placeholder label={FEATURED.name + " · portrait"} src="https://assets.cdn.filesafe.space/3AdNZ1kU76nSJubuR9ds/media/6a1f9987bce897da752a1b32.jpg" objectPosition="center 20%" 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 }}>
            Friends, peers,{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>and stories.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)" }}>
            Endorsements from those who've walked with Kevin — co-workers, friends, pastors — alongside transformation stories of people he has come alongside. Words unedited where they came directly. Stories in his own framing where they didn't.
          </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 === "endorsement" ? "★★★★★" : "✦ Transformation story"}
              </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: "var(--cream)" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40 }}>
        {[["30+ yrs", "On the healing road · still walking"], ["39 yrs", "Marriage · restored by grace"], ["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="Hearts that found their"
          italic="voice."
          subtitle="These are people who have walked alongside me — co-workers, friends, a pastor, and those I've come alongside through divorce, career-defining seasons, and the slow work of moving from head to heart. Their words, unedited where they came directly. The next story could be yours."
          verse="We do not look at the things which are seen, but at the things which are not seen. For the things which are seen are temporary, but the things which are not seen are eternal."
          verseRef="2 Corinthians 4:18"
        />
        <StatsBar />
        <Featured />
        <Grid />
        <CTA
          eyebrow="✦ Your turn"
          headline="Ready to write"
          headlineItalic="your story?"
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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