/* Stories - Steve Wineland · handled honestly (no fabricated client reviews) */
const { useState } = React;

/* A real transformation from the intake — a non-client conversation, anonymized. */
const FEATURED = {
  name: "A man I'll call Bob", meta: "A recent conversation · shared with permission, name changed",
  quote: "Bob came to me carrying the regret of a relationship that had fallen apart. He was certain it was all his fault — that he was the whole problem. As we talked, he was able to own his part honestly, without pretending. But he also came to see that it was never all his to carry. The deeper thing we landed on was this: our primary relationship is meant to be with Jesus. Our earthly relationships, as good as they are, come second. When that order gets set right, the weight a man has been carrying alone finally has somewhere to go.",
};

/* The real things the men I serve say — from the intake's own words.
   Framed honestly as admissions, NOT as paid endorsements. */
const VOICES = [
  { kind: "In their words", quote: "I know that God loves me — but sometimes I don't love me." },
  { kind: "In their words", quote: "I want to be the man that God made me to be, not the man that I have made me to be." },
  { kind: "In their words", quote: "I don't just want to change. I want to thrive." },
  { kind: "In their words", quote: "I want to actually be the man that my little boy thinks that I am." },
  { kind: "In their words", quote: "I want to be the man on the inside that people think that I am on the outside." },
  { kind: "My heart for this", quote: "I don't pretend to have all the answers. But I have walked this road, and I have a great deal of experience and knowledge I'm glad to share. I'd love the chance to help others along the same path I've traveled." },
];

function Featured() {
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ A story I can tell</div>
        <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500, marginBottom: 48 }}>
          Setting the weight{" "}
          <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>down.</span>
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "center" }}>
          <Placeholder label="A quiet conversation" src="https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=1100&q=72" objectPosition="center" 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(21px, 2.3vw, 28px)", 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 }}>✦ The honest truth</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 64px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            What men say when it{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>finally gets quiet.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)" }}>
            My coaching practice is new and personal, so you won't find a wall of five-star reviews here — and I'd rather keep it that way. What I can show you is real: the things men actually say to me, and the heart I bring to every conversation.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
          {VOICES.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: 19, lineHeight: 1.5, color: "var(--walnut)", fontFamily: "'Source Serif 4', serif", fontStyle: "italic", fontWeight: 300 }}>"{t.quote}"</blockquote>
            </figure>
          ))}
        </div>
        <div style={{ marginTop: 36, padding: "24px 28px", background: "var(--cream-2)", borderLeft: "2px solid var(--terracotta)", maxWidth: 920 }}>
          <p style={{ fontSize: 15.5, lineHeight: 1.6, color: "var(--walnut-soft)" }}>
            <strong style={{ color: "var(--walnut)" }}>A note on honesty:</strong> choosing honesty is one of the things I value most, so I won't invent testimonials I haven't earned. The quotes above are the real words of the men I serve and my own conviction for this work. As clients finish their journeys and want to share, their stories will go right here.
          </p>
        </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 }}>
        {[["1:1", "Personal · every single session"], ["Free", "The first conversation · always"], ["100%", "Confidential & honest"]].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="No spin."
          italic="Just the truth."
          subtitle="I value honesty too much to fill this page with reviews I haven't earned. Instead, here's a real conversation, the actual words of the men I serve, and the heart behind everything I do. The next story written here could be yours."
          verse="Then you will know the truth, and the truth will set you free."
          verseRef="John 8:32"
        />
        <StatsBar />
        <Featured />
        <Grid />
        <CTA
          eyebrow="✦ Your turn"
          headline="Ready to write"
          headlineItalic="your story?"
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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