/* William Sherry · River Song Heart and Spirit — Home page (uses shared.jsx shell) */

const { useState, useEffect, useRef } = React;

/* ============================================================
 * HERO (page-specific)
 * ============================================================ */
function Hero() {
  return (
    <section
      style={{
        padding: "clamp(40px, 6vw, 80px) clamp(28px, 6vw, 96px) clamp(80px, 10vw, 140px)",
        position: "relative",
      }}
    >
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 56, color: "var(--walnut-soft)" }}>
          <CircleMark size={6} color="var(--terracotta)" />
          <span className="smallcaps">River Song Heart and Spirit · Christian Life Coaching</span>
          <span style={{ flex: 1, height: 1, background: "var(--rule)" }} />
          <span className="smallcaps" style={{ color: "var(--walnut-soft)" }}>One-on-One · Remote</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.25fr 1fr", gap: "clamp(40px, 5vw, 80px)", alignItems: "stretch" }}>
          <div>
            <h1 className="display" style={{ fontSize: "clamp(48px, 7.4vw, 116px)", color: "var(--walnut)", marginBottom: 32 }}>
              Not good<br />enough.<br />Again.<br />
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Says who?</span>
            </h1>
            <p style={{ fontSize: 22, lineHeight: 1.4, color: "var(--walnut)", maxWidth: 540, marginBottom: 36, fontWeight: 300 }}>
              Married since 1977. Five kids. One marriage that almost didn't make it, and a God who never once failed me.<br />
              <span className="serif-italic" style={{ color: "var(--walnut-soft)", fontSize: 18 }}>I help believers stop believing the lies they have told themselves or about who they are. I help believers who feel unworthy due to shame, broken relationships, and comparison.</span>
            </p>
            <div style={{ display: "flex", gap: 14, marginBottom: 56, flexWrap: "wrap" }}>
              <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary">Book a Riverside Chat <span className="arrow">→</span></a>
              <a href="work-with-me.html" className="btn btn-ghost">How the coaching works</a>
            </div>
            <div style={{ maxWidth: 540, fontSize: 17, lineHeight: 1.7, color: "var(--walnut-soft)", borderTop: "1px solid var(--rule)", paddingTop: 28 }}>
              <p style={{ marginBottom: 14 }}>
                "It was all my fault. I wasn't good enough, again." That's what I believed the night my wife and I sat down and talked about divorce. Maybe you've got your own version of that sentence, and it's been playing on repeat for years.
              </p>
              <p>
                Here's the question that finally quieted mine:{" "}
                <span style={{ color: "var(--walnut)", fontStyle: "italic", fontFamily: "'Source Serif 4', serif" }}>if Scripture doesn't confirm it, is it true? River Song is where we ask it together, with a lot of grace, led by the Spirit, and at your pace.</span>
              </p>
            </div>
          </div>

          <div style={{ position: "relative", minHeight: 680 }}>
            <Placeholder label="Creek at golden hour" alt="A quiet creek winding under trees in golden morning light" src={HERO_IMAGE_URL} objectPosition="center" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", borderRadius: 2, overflow: "hidden" }} />

            <div style={{ position: "absolute", left: "-48px", bottom: "-36px", background: "var(--cream)", border: "1px solid var(--rule)", padding: "28px 30px 24px", maxWidth: 360, boxShadow: "0 24px 60px -30px rgba(46,58,41,0.35)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14, color: "var(--terracotta)" }}>
                <CrossMark size={10} color="var(--terracotta)" />
                <span className="smallcaps" style={{ color: "var(--terracotta)" }}>Joshua 1:9</span>
              </div>
              <p className="serif-italic" style={{ fontSize: 18, lineHeight: 1.4, color: "var(--walnut)", fontWeight: 300 }}>
                "Be strong and courageous. Do not be afraid; do not be discouraged, for the LORD your God will be with you wherever you go."
              </p>
            </div>

            <div className="grotesk" style={{ position: "absolute", top: 24, right: 24, background: "var(--walnut)", color: "var(--cream)", padding: "10px 14px", borderRadius: 999, display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: "var(--sage-soft)" }} />
              <span style={{ fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase" }}>Now accepting · 1:1 clients</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * STATS STRIP
 * ============================================================ */
function Stats() {
  const stats = [
    { n: "1977", unit: "", l: "Married · 50 years in 2027, Lord willing" },
    { n: "5", unit: "", l: "Children, after five years of waiting" },
    { n: "3", unit: "yrs", l: "In full-time ministry" },
    { n: "10", unit: "sec", l: "Blacked out at 65 mph. Then I came home." },
  ];
  return (
    <section style={{ padding: "44px clamp(28px, 6vw, 96px)", background: "var(--walnut)", color: "var(--cream)" }}>
      <div className="stats-row" style={{ maxWidth: 1320, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 40 }}>
        {stats.map((s, 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", display: "flex", alignItems: "baseline", gap: 6, whiteSpace: "nowrap" }}>
              <span>{s.n}</span>
              {s.unit && <span style={{ fontSize: 18, fontWeight: 400, color: "var(--cream)", opacity: 0.7, letterSpacing: "0.02em" }}>{s.unit}</span>}
            </div>
            <div>
              <div className="smallcaps" style={{ color: "var(--sage-soft)", opacity: 0.95, fontSize: 10 }}>{s.l}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============================================================
 * 4 PILLARS
 * ============================================================ */
function Pillars() {
  const pillars = [
    { n: "I", title: "A Listening Ear That Won't Run", body: "Years in sales, teaching, and leadership taught me to listen. Different is not wrong, and people want to be heard and respected. Bring whatever you're carrying. I won't flinch, I won't judge, and I won't leave." },
    { n: "II", title: "Grace Before Rules", body: "I was a Pharisee for a long time. Here's what I learned the hard way: people don't need more rules. They need to be loved right where they are. Where sin increased, grace abounded all the more. We start there." },
    { n: "III", title: "Every Voice, Tested", body: "The lies you tell yourself, the ones other people handed you, the ones the enemy whispers. They all have to answer one question: if Scripture doesn't confirm it, is it true? Most of them can't pass." },
    { n: "IV", title: "Spirit-Led, Your Direction", body: "You decide the goals and direction of each session. I'm your facilitator and guide, and the Holy Spirit leads us both. Integrity, trust, and confidentiality sit underneath every conversation." },
  ];

  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2.4fr", gap: 64, alignItems: "start", marginBottom: 72 }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ The four pillars</div>
          <div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.6vw, 64px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
              Four things this work{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>rests on.</span>
            </h2>
            <p style={{ marginTop: 18, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 620 }}>
              I won't compromise on any of them, because each one cost me something to learn.
            </p>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid var(--rule-strong)" }}>
          {pillars.map((p, i) => (
            <div key={p.n} style={{ padding: "40px 32px 48px", borderRight: i < 3 ? "1px solid var(--rule)" : "none" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 28 }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--terracotta)" }}>{p.n}</span>
                <CrossMark size={12} color="var(--sage)" />
              </div>
              <h3 className="display" style={{ fontSize: 22, fontWeight: 500, color: "var(--walnut)", marginBottom: 16, lineHeight: 1.15 }}>{p.title}</h3>
              <p style={{ fontSize: 15.5, lineHeight: 1.6, color: "var(--walnut-soft)" }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * ABOUT PREVIEW
 * ============================================================ */
function AboutPreview() {
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: "clamp(40px, 6vw, 100px)", alignItems: "center" }}>
          <div style={{ position: "relative" }}>
            <Placeholder label="Two chairs by the water" alt="Two chairs beside a small fire at the edge of a quiet pond" src={CHAIRS_IMAGE_URL} objectPosition="58% center" style={{ aspectRatio: "3 / 4", width: "100%" }} />
            <div style={{ position: "absolute", bottom: -28, right: -28, width: 140, height: 140, background: "var(--terracotta)", color: "var(--cream)", borderRadius: "50%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", padding: 18 }}>
              <div className="smallcaps" style={{ fontSize: 9, marginBottom: 4, color: "var(--cream)" }}>Married since</div>
              <div className="display" style={{ fontSize: 30, fontWeight: 500, lineHeight: 1 }}>1977</div>
              <div className="smallcaps" style={{ fontSize: 9, marginTop: 4, color: "var(--cream)" }}>Still talking</div>
            </div>
          </div>

          <div>
            <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 20 }}>✦ My Story</div>
            <h2 className="display" style={{ fontSize: "clamp(34px, 4.4vw, 60px)", color: "var(--walnut)", lineHeight: 1.05, marginBottom: 30, fontWeight: 500 }}>
              We sat down and talked about divorce.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Next year, we hope to celebrate fifty.</span>
            </h2>
            <div style={{ fontSize: 17.5, lineHeight: 1.7, color: "var(--walnut-soft)", marginBottom: 22 }}>
              <p style={{ marginBottom: 14 }}>
                I'm William Sherry. Husband since 1977, father of five. I grew up in church, walked away from God in college, and came home the night I blacked out for ten seconds at 65 miles an hour on the four-lane.
              </p>
              <p style={{ marginBottom: 14 }}>
                Twenty-two years into our marriage, my wife and I didn't know how to talk anymore. Kids' activities, church, a demanding career: we were trying to survive living in a tornado. The night we discussed divorce, I felt sick and ashamed, and I believed it was all my fault.{" "}
                <span className="serif-italic" style={{ color: "var(--walnut)", fontSize: 19 }}>I wasn't good enough, again.</span>
              </p>
              <p>We sought counseling. We endured counseling. And our marriage survived the harshest lies Satan could throw at us. What God did in our home, and what He's still doing in me, is the work I do with others now.</p>
            </div>

            <div style={{ display: "flex", alignItems: "center", gap: 18, marginTop: 28 }}>
              <div className="display" style={{ fontSize: 32, fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--walnut)" }}>William</div>
              <div style={{ flex: 1, height: 1, background: "var(--rule)" }} />
              <a href="about.html" className="grotesk" style={{ fontSize: 13, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--terracotta)", borderBottom: "1px solid var(--terracotta)", paddingBottom: 2 }}>
                Read the full story →
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * 3 PROGRAMS
 * ============================================================ */
function ProgramCard({ p }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: p.featured ? "var(--walnut)" : "var(--cream-2)",
        color: p.featured ? "var(--cream)" : "var(--walnut)",
        padding: "36px 32px",
        position: "relative",
        transition: "transform 0.3s, box-shadow 0.3s",
        transform: hover ? "translateY(-6px)" : "none",
        boxShadow: hover ? "0 30px 60px -30px rgba(46,58,41,0.4)" : "none",
        display: "flex", flexDirection: "column", minHeight: 460,
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 60 }}>
        <span className="mono" style={{ fontSize: 12, color: p.featured ? "var(--sage-soft)" : "var(--terracotta)" }}>{p.n}</span>
        <span className="smallcaps" style={{ fontSize: 10, background: p.featured ? "var(--terracotta)" : "transparent", color: p.featured ? "var(--cream)" : "var(--terracotta)", border: p.featured ? "none" : "1px solid var(--terracotta)", padding: "5px 10px", borderRadius: 999 }}>
          {p.tag}
        </span>
      </div>
      <div style={{ flex: 1 }}>
        <h3 className="display" style={{ fontSize: 32, fontWeight: 500, lineHeight: 1.05, marginBottom: 6, letterSpacing: "-0.025em" }}>{p.name}</h3>
        <div className="serif-italic" style={{ fontSize: 18, color: p.featured ? "var(--cream-3)" : "var(--walnut-soft)", marginBottom: 28 }}>{p.sub}</div>
        <p style={{ fontSize: 16, lineHeight: 1.55, color: p.featured ? "var(--cream-2)" : "var(--walnut-soft)", marginBottom: 24 }}>{p.pitch}</p>
        <div style={{ paddingTop: 18, borderTop: p.featured ? "1px solid rgba(239,241,232,0.15)" : "1px solid var(--rule)", fontSize: 13.5, lineHeight: 1.55, color: p.featured ? "var(--cream-3)" : "var(--walnut-soft)" }}>{p.format}</div>
      </div>
      <a href="work-with-me.html" className="grotesk" style={{ marginTop: 30, fontSize: 13, letterSpacing: "0.1em", textTransform: "uppercase", color: p.featured ? "var(--cream)" : "var(--walnut)", display: "inline-flex", alignItems: "center", gap: 10 }}>
        <span style={{ borderBottom: `1px solid ${p.featured ? "var(--cream)" : "var(--walnut)"}`, paddingBottom: 2 }}>{p.cta}</span>
        <span className="arrow" style={{ display: "inline-block", transition: "transform 0.3s", transform: hover ? "translateX(6px)" : "none" }}>→</span>
      </a>
    </div>
  );
}

function Programs() {
  const programs = [
    { n: "01", name: "Wherever You Go", sub: "4-Week or 8-Week 1:1 Coaching", tag: "Flagship", format: "4 or 8 weekly 60-min sessions by phone or video (more if the season calls for it) · you set each session's direction · confidential", pitch: "One-on-one, Spirit-led coaching for the tired believer who feels lost and can't say why. You talk, I listen, and we hold every lie up to Scripture until the truth is louder.", cta: "Book a Free Call", featured: true },
    { n: "02", name: "Learning to Talk Again", sub: "Couples Small Group", tag: "Interest list", format: "A small group of married couples · honest conversation, prayer, and Scripture together · details announced soon", pitch: "For couples who only talk when they have to, and it's usually about the kids. My wife and I didn't know how to talk either. It can be learned again.", cta: "Join the Interest List" },
    { n: "03", name: "Monday Morning", sub: "Self-Paced Journey", tag: "Coming soon", format: "Short readings and prayer prompts · Slow · Listen · Test · Flow · at your own pace · details announced soon", pitch: "For the one who dreads Sunday night. A quiet, private way to trade the Monday knot in your stomach for a better question: What are you going to do in me today, God?", cta: "Get Notified" },
  ];
  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 56, gap: 32, flexWrap: "wrap" }}>
          <div>
            <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Work With Me</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 76px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500, maxWidth: 720 }}>
              Three ways into the{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>same river.</span>
            </h2>
          </div>
          <a href="work-with-me.html" className="btn btn-ghost">Compare programs <span className="arrow">→</span></a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {programs.map((p, i) => <ProgramCard key={i} p={p} />)}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * THE RIVER SONG WAY — framework
 * ============================================================ */
function Framework() {
  const [active, setActive] = useState(0);
  const phases = [
    { verb: "Slow", sub: "and stop striving", body: "My own healing started five or six years ago, the day I quit running hard and striving. So we start there too. You come as you are, tired and maybe not sure why, and we slow down long enough to hear what's really going on. You set the direction. I'm not in a hurry.", items: ["Come as you are, no performing", "You set the goals and direction", "An honest look at why you're so tired", "Room to breathe before we dig"] },
    { verb: "Listen", sub: "beneath the surface", body: "Proverbs says the purposes of a person's heart are deep waters, and one who has insight draws them out. We draw them out together. I listen and ask good questions, and we look for root causes: patterns handed down in your family, father and mother wounds, the hurts you've quietly built a life around.", items: ["A listening ear that won't run", "Root causes, not just symptoms", "Family patterns and what got handed down", "Father and mother wounds, named gently"] },
    { verb: "Test", sub: "every lie against the Word", body: "Then we take what you've been believing and ask one question of each: if Scripture doesn't confirm it, is it true? \"It's all my fault.\" \"Not good enough, again.\" I believed those at my own kitchen table. They didn't survive the test. Yours won't either.", items: ["The lies named out loud", "Scripture as the measuring stick", "The enemy's lies seen for what they are", "Identity rooted in who God says you are"] },
    { verb: "Flow", sub: "grace, received and given", body: "Where sin increased, grace abounded all the more. Grace starts moving again: toward yourself, toward the people who hurt you (even when they don't deserve it), toward your spouse. What's left is hope, a sense of purpose, and a new morning prayer. What are you going to do in me today, God?", items: ["Grace for yourself, finally", "Forgiveness, even when it isn't deserved", "Hope and purpose for what's next", "A life that looks forward again"] },
  ];

  return (
    <section className="section" style={{ background: "var(--walnut)", color: "var(--cream)", position: "relative", overflow: "hidden" }}>
      <div aria-hidden="true" style={{ position: "absolute", right: "-6vw", top: "6%", width: "34vw", opacity: 0.05, pointerEvents: "none" }}>
        <RiverMark size="100%" color="var(--cream)" />
      </div>

      <div className="container" style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "start", marginBottom: 56 }}>
          <div className="smallcaps" style={{ color: "var(--sage-soft)" }}>✦ The River Song Way</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5.6vw, 80px)", lineHeight: 0.98, color: "var(--cream)", fontWeight: 500 }}>
            Four movements from worn out to{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--sage-soft)" }}>flowing again.</span>
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid rgba(239,241,232,0.18)" }}>
          {phases.map((p, i) => (
            <button key={i} className="fw-tab" onClick={() => setActive(i)} style={{ background: "transparent", border: "none", borderTop: active === i ? `3px solid var(--sage-soft)` : "3px solid transparent", marginTop: -1, color: active === i ? "var(--cream)" : "rgba(239,241,232,0.55)", textAlign: "left", padding: "24px 8px 20px", cursor: "pointer", borderRight: i < 3 ? "1px solid rgba(239,241,232,0.12)" : "none" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--sage-soft)" }}>0{i + 1}</span>
                <CrossMark size={10} color={active === i ? "var(--sage-soft)" : "rgba(239,241,232,0.4)"} />
              </div>
              <div className="display" style={{ fontSize: 30, fontWeight: 500, marginTop: 18, letterSpacing: "-0.02em" }}>{p.verb}</div>
              <div className="serif-italic" style={{ fontSize: 16, opacity: 0.7, marginTop: 2 }}>{p.sub}</div>
            </button>
          ))}
        </div>

        <div style={{ background: "rgba(239,241,232,0.04)", borderLeft: "1px solid rgba(239,241,232,0.12)", borderRight: "1px solid rgba(239,241,232,0.12)", borderBottom: "1px solid rgba(239,241,232,0.12)", padding: "44px clamp(28px, 5vw, 64px)", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60, alignItems: "center", minHeight: 280 }}>
          <div>
            <div className="smallcaps" style={{ color: "var(--sage-soft)", marginBottom: 18 }}>Movement 0{active + 1} of 04</div>
            <p style={{ fontSize: "clamp(22px, 2.6vw, 32px)", lineHeight: 1.35, color: "var(--cream)", fontWeight: 300, fontFamily: "'Source Serif 4', serif", fontStyle: "italic", maxWidth: 640 }}>
              {phases[active].body}
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 16, borderLeft: "1px solid rgba(239,241,232,0.18)", paddingLeft: 32 }}>
            <div className="smallcaps" style={{ color: "var(--sage-soft)" }}>In this movement</div>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 12, color: "rgba(239,241,232,0.85)", fontSize: 15.5 }}>
              {phases[active].items.map((t, i) => (
                <li key={i} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <DiamondMark size={7} color="var(--sage-soft)" /> {t}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * SUNDAY NIGHT — enhanced section unique to William
 * His ideal client's exact sentences (verbatim from intake), played out
 * across a Sunday evening, landing on William's own Monday-morning prayer.
 * ============================================================ */
function SundayNight() {
  const moments = [
    { t: "5:48 PM", left: "6h 12m", line: "I don't know why but I just feel lost." },
    { t: "7:15 PM", left: "4h 45m", line: "We only talk when we have to and that's about the kids." },
    { t: "8:40 PM", left: "3h 20m", line: "How do I know what I am supposed to be doing in my life between church, family, job, etc.?" },
    { t: "10:05 PM", left: "1h 55m", line: "My wife and I are drifting apart." },
    { t: "11:52 PM", left: "8 min", line: "I hate Sunday night because Monday is just a few hours away." },
  ];
  const last = moments.length; // final stop = Monday morning
  const [step, setStep] = useState(0);
  const [touched, setTouched] = useState(false);
  const panelRef = useRef(null);
  const morning = step === last;
  const m = moments[Math.min(step, last - 1)];

  /* Play the evening through once when the panel scrolls into view,
   * unless the visitor has already taken the wheel or prefers less motion. */
  useEffect(() => {
    if (touched) return;
    if (typeof window === "undefined" || typeof IntersectionObserver === "undefined") return;
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    let timer = null;
    const obs = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && !timer) {
        timer = setInterval(() => {
          setStep((s) => {
            if (s >= last) { clearInterval(timer); return s; }
            return s + 1;
          });
        }, 2600);
      }
    }, { threshold: 0.5 });
    if (panelRef.current) obs.observe(panelRef.current);
    return () => { obs.disconnect(); if (timer) clearInterval(timer); };
  }, [touched, last]);

  const go = (i) => { setTouched(true); setStep(i); };
  const ink = morning ? "var(--walnut)" : "var(--cream)";
  const soft = morning ? "var(--walnut-soft)" : "rgba(239,241,232,0.6)";
  const accent = morning ? "var(--terracotta)" : "var(--sage-soft)";

  return (
    <section className="section" style={{ background: "var(--cream-2)", position: "relative" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64, alignItems: "center" }}>
          <div>
            <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Sunday night</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.6vw, 64px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
              You know the Sunday-night feeling.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Monday can start somewhere else.</span>
            </h2>
            <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.65, color: "var(--walnut-soft)", maxWidth: 440 }}>
              Maybe you've said one of these out loud. More likely you've only thought it, on a Sunday evening when the weekend is spent and the week is closing in. I've said a couple of them myself. Drag through the evening and see if one sounds like yours.
            </p>
            <div style={{ marginTop: 32, background: "var(--cream)", maxWidth: 440 }}>
              <Placeholder label="River at sunrise" alt="Morning mist lifting off a river at sunrise" src={SUNRISE_IMAGE_URL} objectPosition="center" style={{ aspectRatio: "16 / 9", width: "100%" }} />
              <div style={{ padding: "22px 26px", borderLeft: "2px solid var(--terracotta)" }}>
                <p className="serif-italic" style={{ fontSize: 17, lineHeight: 1.5, color: "var(--walnut)", fontWeight: 300 }}>
                  "His compassions never fail. They are new every morning; great is your faithfulness."
                </p>
                <div className="smallcaps" style={{ color: "var(--terracotta)", marginTop: 10 }}>Lamentations 3:22–23</div>
              </div>
            </div>
          </div>

          <div ref={panelRef}>
            <div
              style={{
                background: morning ? "var(--cream)" : "var(--walnut)",
                color: ink,
                border: morning ? "1px solid var(--terracotta)" : "1px solid var(--walnut)",
                padding: "34px clamp(24px, 4vw, 48px) 30px",
                transition: "background 0.7s, color 0.7s, border-color 0.7s",
                position: "relative",
                overflow: "hidden",
                boxShadow: "0 30px 70px -40px rgba(46,58,41,0.55)",
              }}
            >
              <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 88% 0%, rgba(107,142,90,0.30), transparent 58%)", opacity: morning ? 1 : 0, transition: "opacity 0.9s", pointerEvents: "none" }} />

              <div style={{ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 20, flexWrap: "wrap", paddingBottom: 22, borderBottom: morning ? "1px solid var(--rule)" : "1px solid rgba(239,241,232,0.14)" }}>
                <div>
                  <div className="smallcaps" style={{ color: accent }}>{morning ? "Monday" : "Sunday"}</div>
                  <div className="display" style={{ fontSize: "clamp(40px, 5vw, 60px)", fontWeight: 500, letterSpacing: "-0.03em", lineHeight: 1, marginTop: 8 }}>
                    {morning ? "6:00 AM" : m.t}
                  </div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div className="smallcaps" style={{ color: soft, fontSize: 10 }}>{morning ? "A new week" : "Monday arrives in"}</div>
                  <div className="mono" style={{ fontSize: 18, marginTop: 6, color: accent }}>{morning ? "new mercies" : m.left}</div>
                </div>
              </div>

              <div style={{ position: "relative", minHeight: 230, paddingTop: 28 }} aria-live="polite">
                {morning ? (
                  <>
                    <p className="serif-italic" style={{ fontSize: "clamp(26px, 3vw, 38px)", lineHeight: 1.25, color: "var(--walnut)", fontWeight: 300 }}>
                      "What are you going to do in me today, God?"
                    </p>
                    <div className="smallcaps" style={{ color: "var(--terracotta)", marginTop: 14 }}>William's Monday-morning prayer</div>
                    <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--walnut-soft)", marginTop: 18, maxWidth: 520 }}>
                      It's the prayer I start with now, and River Song exists because God answered it. Sunday night still comes around every week. It just doesn't get the last word anymore.
                    </p>
                    <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{ marginTop: 22 }}>
                      Book a Riverside Chat <span className="arrow">→</span>
                    </a>
                  </>
                ) : (
                  <>
                    <div className="mono" style={{ fontSize: 11, color: accent, marginBottom: 16 }}>0{step + 1} / 0{last} · the thought that won't let go</div>
                    <p className="serif-italic" style={{ fontSize: "clamp(24px, 2.8vw, 34px)", lineHeight: 1.3, color: "var(--cream)", fontWeight: 300 }}>
                      "{m.line}"
                    </p>
                  </>
                )}
              </div>

              <div style={{ position: "relative", marginTop: 18 }}>
                <input
                  type="range"
                  min={0}
                  max={last}
                  step={1}
                  value={step}
                  onChange={(e) => go(Number(e.target.value))}
                  className={"sunday-range" + (morning ? " is-morning" : "")}
                  aria-label="Move through Sunday evening to Monday morning"
                />
                <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 6, marginTop: 14 }}>
                  {moments.map((mo, i) => (
                    <button key={mo.t} type="button" onClick={() => go(i)} className="mono" style={{ background: "transparent", border: "none", padding: "4px 0", cursor: "pointer", fontSize: 10.5, color: i === step ? accent : soft, fontWeight: i === step ? 500 : 400 }}>
                      {mo.t}
                    </button>
                  ))}
                  <button type="button" onClick={() => go(last)} className="mono" style={{ background: "transparent", border: "none", padding: "4px 0", cursor: "pointer", fontSize: 10.5, color: morning ? "var(--terracotta)" : "var(--sage-soft)", fontWeight: 500 }}>
                    Mon 6:00 AM ☀
                  </button>
                </div>
              </div>
            </div>

            <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 16 }}>
              <button type="button" onClick={() => go(morning ? 0 : last)} className="grotesk" style={{ background: "transparent", border: "none", cursor: "pointer", fontSize: 12.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--terracotta)", borderBottom: "1px solid var(--terracotta)", padding: "0 0 2px" }}>
                {morning ? "← Back to Sunday night" : "Skip to Monday morning →"}
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * TESTIMONIALS — honest: one witnessed story, his own words, an open seat
 * ============================================================ */
function Testimonials() {
  const t = [
    { quote: "I walked with Mike and Kim through a tough time in their marriage.", hi: "Through faith and love, God healed their marriage.", name: "Mike & Kim", meta: "As told by William" },
    { quote: "I do not believe the lies that I tell myself. I give myself and others grace.", hi: "I am more open and trusting and listen to others for confirmation.", name: "William", meta: "The first transformation · his own" },
  ];

  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 56, gap: 32, flexWrap: "wrap" }}>
          <div>
            <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Stories along the river</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 76px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500, maxWidth: 800 }}>
              Told{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>honestly.</span>
            </h2>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
            <div className="display" style={{ fontSize: 44, color: "var(--walnut)" }}>0</div>
            <div>
              <div className="smallcaps" style={{ color: "var(--terracotta)" }}>Invented testimonials</div>
              <div className="smallcaps" style={{ color: "var(--walnut-soft)", marginTop: 4 }}>A young practice · real words only</div>
            </div>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {t.map((q, i) => (
            <figure key={i} style={{ background: "var(--cream-2)", padding: "36px 32px 32px", display: "flex", flexDirection: "column", position: "relative" }}>
              <div aria-hidden="true" style={{ position: "absolute", top: 12, left: 24, fontFamily: "'Source Serif 4', serif", fontStyle: "italic", fontWeight: 300, fontSize: 90, color: "var(--terracotta)", opacity: 0.25, lineHeight: 1 }}>"</div>
              <blockquote style={{ fontSize: 17, lineHeight: 1.55, color: "var(--walnut-soft)", marginBottom: 18, fontFamily: "'Source Serif 4', serif", flex: 1, position: "relative", zIndex: 1, marginTop: 14 }}>{q.quote}</blockquote>
              <p className="serif-italic" style={{ fontSize: 19, color: "var(--walnut)", marginBottom: 26, lineHeight: 1.4, fontWeight: 400 }}>{q.hi}</p>
              <figcaption style={{ borderTop: "1px solid var(--rule)", paddingTop: 16, display: "flex", alignItems: "center", gap: 12 }}>
                <Placeholder label="" style={{ width: 36, height: 36, borderRadius: "50%" }} />
                <div>
                  <div className="grotesk" style={{ fontSize: 14, fontWeight: 500, color: "var(--walnut)" }}>{q.name}</div>
                  <div className="smallcaps" style={{ color: "var(--walnut-soft)", fontSize: 9 }}>{q.meta}</div>
                </div>
              </figcaption>
            </figure>
          ))}
          <figure style={{ background: "var(--walnut)", color: "var(--cream)", padding: "36px 32px 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 }}>
              River Song is new, so this seat is open. It's saved for the one who's tired of Sunday nights and ready to hear what God has to say instead.
            </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 style={{ marginTop: 40, textAlign: "center" }}>
          <a href="testimonials.html" className="grotesk" style={{ fontSize: 13, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--terracotta)", borderBottom: "1px solid var(--terracotta)", paddingBottom: 3 }}>
            Read all stories →
          </a>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * APP
 * ============================================================ */
function App() {
  return (
    <>
      <Nav current="home" />
      <main>
        <Hero />
        <Stats />
        <Pillars />
        <AboutPreview />
        <Programs />
        <Framework />
        <SundayNight />
        <Testimonials />
        <CTA />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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