/* Work With Me - William Sherry · River Song Heart and Spirit */
const { useState } = React;

const PROGRAMS = [
  {
    n: "01", icon: "✝", name: "Wherever You Go", sub: "4-Week or 8-Week 1:1 Coaching", tag: "Flagship",
    price: "Discussed on your free call", commit: "4 or 8 weeks · weekly · 1:1",
    pitch: "The flagship. Four or eight weeks of one-on-one, Spirit-led coaching (more if the season calls for it) for the tired believer who feels lost and can't say why. You set the direction. I listen, ask honest questions, and walk with you the whole way.",
    inside: ["Weekly 60-minute one-on-one sessions by phone or video, extended if needed", "You set the goals and direction of every session; I facilitate and guide", "Root-cause work: family patterns, father and mother wounds, what got handed down", "Every lie you've been believing, held up to Scripture", "Grace-first: forgiveness, for yourself and for the people who hurt you", "A listening ear that won't run, no judgment, and full confidentiality"],
    cta: "Book a Free Call",
    featured: true,
  },
  {
    n: "02", icon: "♡", name: "Learning to Talk Again", sub: "Couples Small Group", tag: "Interest list",
    price: "Announced soon", commit: "Small group · couples",
    pitch: "For couples who only talk when they have to, and it's usually about the kids. Twenty-two years into our marriage, my wife and I didn't know how to talk either. We learned again. A small group of couples, learning it together.",
    inside: ["A small group of married couples, no audience and no performing", "Honest conversation, prayer, and Scripture together", "Naming the lies each of you has been believing about the other", "The River Song Way (Slow · Listen · Test · Flow), walked as a couple", "Details and start date announced soon; join the interest list"],
    cta: "Join the Interest List",
  },
  {
    n: "03", icon: "☀", name: "Monday Morning", sub: "Self-Paced Journey", tag: "Coming soon",
    price: "Announced soon", commit: "Your own pace",
    pitch: "For the one who dreads Sunday night and isn't ready to talk to anyone yet. A quiet, private on-ramp that trades the Monday knot in your stomach for a better question: What are you going to do in me today, God?",
    inside: ["Short readings for each movement: Slow · Listen · Test · Flow", "Prayer prompts for Sunday nights and Monday mornings", "A simple way to test the lies you hear against Scripture", "A gentle on-ramp to 1:1 coaching whenever you're ready", "In development; get notified the day it opens"],
    cta: "Get Notified",
  },
];

function Programs() {
  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 920 }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Choose your path</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            Coaching for people who{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>need encouraging.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720 }}>
            Men and women who are tired and may not know why. Hungry for God and still searching. People who need to know God loves them for who they are, not what they do. Three ways in, and the same honest, grace-first work underneath all of them.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
          {PROGRAMS.map((p) => <ProgramRow key={p.sub} p={p} />)}
        </div>
      </div>
    </section>
  );
}

function ProgramRow({ p }) {
  return (
    <article style={{ background: p.featured ? "var(--walnut)" : "var(--cream-2)", color: p.featured ? "var(--cream)" : "var(--walnut)", padding: "48px clamp(28px, 4vw, 56px)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr 1.4fr", gap: 56, alignItems: "start" }}>
        <div>
          <div className="mono" style={{ fontSize: 12, color: p.featured ? "var(--sage-soft)" : "var(--terracotta)", marginBottom: 14 }}>{p.n}</div>
          <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 style={{ display: "flex", alignItems: "baseline", gap: 14, marginTop: 28 }}>
            <span style={{ fontSize: 28, color: p.featured ? "var(--sage-soft)" : "var(--terracotta)" }}>{p.icon}</span>
            <h3 className="display" style={{ fontSize: 40, fontWeight: 500, lineHeight: 1.05, letterSpacing: "-0.03em" }}>{p.name}</h3>
          </div>
          <div className="serif-italic" style={{ fontSize: 19, color: p.featured ? "var(--cream-3)" : "var(--walnut-soft)", marginTop: 4 }}>{p.sub}</div>
          <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 12, fontSize: 14, color: p.featured ? "rgba(239,241,232,0.7)" : "var(--walnut-soft)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", gap: 12, borderBottom: p.featured ? "1px solid rgba(239,241,232,0.15)" : "1px solid var(--rule)", paddingBottom: 8 }}>
              <span className="smallcaps" style={{ fontSize: 9 }}>Investment</span>
              <span className="grotesk" style={{ textAlign: "right" }}>{p.price}</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
              <span className="smallcaps" style={{ fontSize: 9 }}>Commitment</span>
              <span className="grotesk" style={{ textAlign: "right" }}>{p.commit}</span>
            </div>
          </div>
        </div>
        <div>
          <div className="smallcaps" style={{ color: p.featured ? "var(--sage-soft)" : "var(--terracotta)", marginBottom: 14 }}>What's inside</div>
          <p className="serif-italic" style={{ fontSize: 20, lineHeight: 1.5, color: p.featured ? "var(--cream)" : "var(--walnut)", marginBottom: 26, fontWeight: 300 }}>{p.pitch}</p>
          <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
            {p.inside.map((w, i) => (
              <li key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start", fontSize: 15.5, color: p.featured ? "rgba(239,241,232,0.85)" : "var(--walnut-soft)" }}>
                <span className="mono" style={{ fontSize: 11, color: p.featured ? "var(--sage-soft)" : "var(--terracotta)", marginTop: 4, minWidth: 22 }}>0{i + 1}</span>
                <span>{w}</span>
              </li>
            ))}
          </ul>
        </div>
        <div style={{ borderLeft: p.featured ? "1px solid rgba(239,241,232,0.15)" : "1px solid var(--rule)", paddingLeft: 32 }}>
          <a href={p.featured ? BOOKING_URL : "contact.html"} {...(p.featured ? { target: "_blank", rel: "noopener noreferrer" } : {})} className="btn" style={{ background: p.featured ? "var(--cream)" : "var(--walnut)", color: p.featured ? "var(--walnut)" : "var(--cream)" }}>
            {p.cta} <span className="arrow">→</span>
          </a>
          <p style={{ marginTop: 24, fontSize: 14, color: p.featured ? "rgba(239,241,232,0.65)" : "var(--walnut-soft)", lineHeight: 1.5 }}>
            Not sure which path is yours? <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" style={{ color: p.featured ? "var(--sage-soft)" : "var(--terracotta)", textDecoration: "underline" }}>Book a free Riverside Chat</a> and we'll figure it out together.
          </p>
        </div>
      </div>
    </article>
  );
}

function Phases() {
  const phases = [
    { v: "Slow", s: "and stop striving", b: "We start where my own healing started: by quitting the running and the striving. You come as you are, tired and maybe not sure why. You set the direction, and nobody is in a hurry." },
    { v: "Listen", s: "beneath the surface", b: "The purposes of a heart are deep waters (Proverbs 20:5). We draw them out together: root causes, family patterns, father and mother wounds, the hurts you've built a life around." },
    { v: "Test", s: "every lie against the Word", b: "Each thing you've been believing gets one question: if Scripture doesn't confirm it, is it true? The lies you tell yourself, and the enemy's lies, rarely survive it." },
    { v: "Flow", s: "grace, received and given", b: "Where sin increased, grace abounded all the more. Grace toward yourself and others, forgiveness even when it isn't deserved, and a life that looks forward with hope and purpose." },
  ];
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 880 }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ The River Song Way</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 76px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            How the journey{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>actually works.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)" }}>
            Four movements, like a river finding its way again. One-on-one, as a couple, or at your own pace, the current runs the same direction: out of the lies and into grace.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid var(--rule-strong)" }}>
          {phases.map((p, i) => (
            <div key={p.v} style={{ padding: "36px 28px 40px", borderRight: i < 3 ? "1px solid var(--rule)" : "none" }}>
              <div className="mono" style={{ fontSize: 11, color: "var(--terracotta)", marginBottom: 18 }}>0{i + 1} · ≈</div>
              <div className="display" style={{ fontSize: 32, fontWeight: 500, color: "var(--walnut)", letterSpacing: "-0.02em" }}>{p.v}</div>
              <div className="serif-italic" style={{ fontSize: 17, color: "var(--walnut-soft)", marginTop: 4, marginBottom: 18 }}>{p.s}</div>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--walnut-soft)" }}>{p.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClientFit() {
  const groups = [
    { tag: "Tired & Not Sure Why", t: "“I don't know why but I just feel lost.”", d: "Emotionally and physically tired. Discouraged. Maybe a little ashamed that you feel this way when, on paper, everything's fine. You don't need a better reason to reach out. Tired is reason enough." },
    { tag: "Sunday-Night Dread", t: "“I hate Sunday night because Monday is just a few hours away.”", d: "The weekend ends and the knot in your stomach starts. The job, the pace, the sense that you're running hard and going nowhere. I know that pace. My healing started the day I stopped running it." },
    { tag: "Drifting Apart", t: "“We only talk when we have to and that's about the kids.”", d: "You love your spouse, but you've become roommates who coordinate schedules. Twenty-two years in, my wife and I didn't know how to talk either. We almost quit. We're nearly at fifty now." },
    { tag: "Hungry & Searching", t: "“How do I know what I am supposed to be doing?”", d: "Between church, family, and job, you're stretched thin and still unsure what God actually wants from you. You're hungry for Him and searching. That's not a problem to fix. It's a great place to begin." },
  ];
  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Is this for you?</div>
        <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500, marginBottom: 20 }}>
          The people I'm here{" "}
          <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>to walk with.</span>
        </h2>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 680, marginBottom: 36 }}>
          Men and women, married or not, who are hungry for God and tired of the lies. If one of these sounds like you, you're in the right place.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid var(--rule-strong)" }}>
          {groups.map((g, i) => (
            <div key={i} style={{ padding: "36px 36px 40px", borderBottom: i < 2 ? "1px solid var(--rule)" : "none", borderRight: i % 2 === 0 ? "1px solid var(--rule)" : "none" }}>
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 12 }}>{g.tag}</div>
              <h3 className="display" style={{ fontSize: 24, fontWeight: 500, color: "var(--walnut)", lineHeight: 1.2, marginBottom: 14 }}>{g.t}</h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--walnut-soft)" }}>{g.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Compare() {
  const rows = [
    ["Live time with William", "Weekly 1:1", "Small-group sessions", "None; self-guided"],
    ["Who sets the direction", "You, every session", "Shared + couple goals", "You, at your pace"],
    ["Lies tested against Scripture", "Together", "Together, as couples", "Guided prompts"],
    ["Built for your marriage", "Woven in as needed", "The whole point", "Solo focus"],
    ["Pace", "4 or 8 wks + as needed", "Group schedule", "Yours"],
    ["Availability", "Now accepting", "Interest list", "Coming soon"],
  ];
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Compare programs</div>
        <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500, marginBottom: 48 }}>
          Find your{" "}
          <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>right fit.</span>
        </h2>
        <div style={{ overflow: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 720 }}>
            <thead>
              <tr style={{ borderTop: "1px solid var(--rule-strong)", borderBottom: "1px solid var(--rule-strong)" }}>
                <th style={{ textAlign: "left", padding: "20px 18px 20px 0", width: "30%" }}><div className="smallcaps" style={{ color: "var(--walnut-soft)" }}>Feature</div></th>
                {[["01", "Wherever You Go"], ["02", "Learning to Talk Again"], ["03", "Monday Morning"]].map(([n, name]) => (
                  <th key={n} style={{ textAlign: "left", padding: "20px 18px" }}>
                    <div className="mono" style={{ fontSize: 11, color: "var(--terracotta)" }}>{n}</div>
                    <div className="display" style={{ fontSize: 20, fontWeight: 500, color: "var(--walnut)", marginTop: 4 }}>{name}</div>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i} style={{ borderBottom: "1px solid var(--rule)" }}>
                  <td style={{ padding: "18px 18px 18px 0", color: "var(--walnut-soft)", fontSize: 14, fontFamily: "'Space Grotesk', sans-serif", letterSpacing: "0.04em", textTransform: "uppercase", verticalAlign: "top" }}>{r[0]}</td>
                  {r.slice(1).map((v, j) => (
                    <td key={j} style={{ padding: "18px", color: "var(--walnut)", fontSize: 16, lineHeight: 1.45, verticalAlign: "top", background: j === 0 ? "var(--cream)" : "transparent" }}>{v}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="work" />
      <main>
        <PageHero
          eyebrow="Programs & Coaching"
          title="You set the direction."
          italic="I'll listen the whole way."
          subtitle="This isn't a program that tells you what to do. It's a confidential, grace-first space where we find out who you are and what's really at the root, then test every lie against Scripture. You decide the goals. I'm your facilitator and guide, and the Holy Spirit leads us both."
          verse="The purposes of a person's heart are deep waters, but one who has insight draws them out."
          verseRef="Proverbs 20:5"
        />
        <Programs />
        <Phases />
        <ClientFit />
        <Compare />
        <CTA
          eyebrow="✦ You've been running hard long enough"
          headline="Slow down."
          headlineItalic="Let's talk."
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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