/* Work With Me - Steve Wineland · Servant Leadership Life Coaching */
const { useState } = React;

const PROGRAMS = [
  {
    n: "01", icon: "✝", name: "The Clean Heart Journey", sub: "1:1 Coaching · 6 Sessions", tag: "Flagship",
    price: "By conversation", commit: "≈ 12 weeks · 1:1",
    pitch: "The heart of what I do. A focused season of one-on-one coaching — just the two of us — for the man who is done managing the surface and ready to let God do the deeper work. Honest, prayerful, and practical from the first session to the last.",
    inside: ["Six 60-minute one-on-one sessions, one every two weeks", "Every session opens in prayer", "We dig honestly into your heart and mind together", "Tools and resources to work with between sessions", "We pray over your goals for the next two weeks", "Contact between sessions when you need it"],
    cta: "Book a Free Call",
    featured: true,
  },
  {
    n: "02", icon: "🤝", name: "The Brotherhood", sub: "Small Group of Men", tag: "Forming",
    price: "Let's talk", commit: "Ongoing",
    pitch: "There is real value in walking with other men. A small, trusted circle for honesty, prayer, and the kind of accountability most men have never had — where you can finally say the hard things and not be alone with them. Forming now.",
    inside: ["A small, vetted circle of Christian men", "Regular gatherings centered on honesty & prayer", "Accountability that actually holds", "Shared tools, Scripture, and encouragement", "A safe place to be known and to grow"],
    cta: "Express Interest",
  },
  {
    n: "03", icon: "📖", name: "Foundations of Integrity", sub: "Self-Paced", tag: "Coming soon",
    price: "Coming soon", commit: "At your pace",
    pitch: "The core of the coaching at your own pace — identity in Christ, choosing honesty, and walking in integrity. The doorway in for the man who isn't ready for one-on-one yet but knows he can't stay where he is.",
    inside: ["Core teachings on identity, honesty & integrity", "Scripture and guided reflection", "Simple practices you can return to anytime", "Go at your own pace, on your own schedule", "A natural first step toward 1:1 coaching"],
    cta: "Learn More",
  },
];

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{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>real change.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720 }}>
            One foundation — identity in Christ, honesty, and integrity — with three ways to walk it out. You've done all the right things for long enough. This is the kind of work that actually changes a man.
          </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: "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: "var(--terracotta)" }}>{p.icon}</span>
            <h3 className="display" style={{ fontSize: 36, 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(238,241,245,0.7)" : "var(--walnut-soft)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", borderBottom: p.featured ? "1px solid rgba(238,241,245,0.15)" : "1px solid var(--rule)", paddingBottom: 8 }}>
              <span className="smallcaps" style={{ fontSize: 9 }}>Investment</span>
              <span className="grotesk">{p.price}</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between" }}>
              <span className="smallcaps" style={{ fontSize: 9 }}>Rhythm</span>
              <span className="grotesk">{p.commit}</span>
            </div>
          </div>
        </div>
        <div>
          <div className="smallcaps" style={{ color: "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(238,241,245,0.85)" : "var(--walnut-soft)" }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--terracotta)", marginTop: 4, minWidth: 22 }}>0{i + 1}</span>
                <span>{w}</span>
              </li>
            ))}
          </ul>
        </div>
        <div style={{ borderLeft: p.featured ? "1px solid rgba(238,241,245,0.15)" : "1px solid var(--rule)", paddingLeft: 32 }}>
          <a href={BOOKING_URL} 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(238,241,245,0.65)" : "var(--walnut-soft)", lineHeight: 1.5 }}>
            Not sure which fits? <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" style={{ color: "var(--terracotta)", textDecoration: "underline" }}>Book a free conversation</a> and we'll figure it out together.
          </p>
        </div>
      </div>
    </article>
  );
}

function Phases() {
  const phases = [
    { v: "Surrender", s: "The Heart", b: "It begins with the most freeing admission a man can make: I can't fix this on my own. We trade willpower for surrender and ask for the heart-level help only God can give. Every session opens here, in prayer." },
    { v: "Uncover", s: "the Truth", b: "What stays hidden keeps its power. Gently and without condemnation, we bring the real story into the light — the patterns, the lies you've believed, the things you've never said out loud. The truth is what sets a man free." },
    { v: "Reclaim", s: "Your Identity", b: "Create in me a clean heart. We rebuild on who God says you are — made by Him, loved by Him, paid for by Him. Grace replaces self-contempt, and you begin to want what God wants for you: not just to change, but to thrive." },
    { v: "Lead", s: "with Integrity", b: "A changed heart changes a home. You become the man your family already believes you are — the same inside and out — serving and leading the way Jesus did, with brothers around you who help you keep walking." },
  ];
  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 methodology</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)" }}>
            Every man moves through the same four movements — whether one-on-one, in the brotherhood, or at your own pace. The pace differs. The path is the same.
          </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: 30, 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: "The Capable Man", t: "Busy, providing — and quietly unsettled", d: "You're middle of life, working hard, raising kids, maybe coaching their teams. From the outside you've got it together. But somewhere inside, things don't quite add up, and you can't shake the feeling that you're doing the right things with a heart that's somewhere else." },
    { tag: "The Man With No One to Talk To", t: "No real accountability · no honest friend", d: "You don't have a single man in your life you can be fully honest with — no one to discuss the hard things, no one to challenge you, no one to ask the second question. You were never meant to carry it alone, and you don't have to." },
    { tag: "The Man Fighting in Secret", t: "Wrestling with something he's hidden", d: "There's something you keep telling yourself you can stop any time — and you're starting to wonder if that's true. You're not beyond help and you're not alone. This is a safe, honest place to finally bring it into the light." },
    { tag: "The Man Who Wants More Than 'Fine'", t: "Done settling · ready to thrive", d: "You don't just want to change — you want to thrive. You want to be the man God made you to be, the man on the inside that people already think you are on the outside. If that's the longing, you're in exactly the right place." },
  ];
  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: 36 }}>
          The men I walk with{" "}
          <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>most often.</span>
        </h2>
        <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 = [
    ["Personal, one-on-one attention", "Full", "Shared", "—"],
    ["Live time with Steve", "Every session", "In the group", "—"],
    ["Opens in prayer", "✓", "✓", "Guided"],
    ["Accountability between sessions", "Direct", "Group", "Self-guided"],
    ["Tools & resources to take with you", "✓", "✓", "✓"],
    ["Best for…", "Going deep", "Walking together", "Getting started"],
  ];
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Compare options</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", "Clean Heart 1:1"], ["02", "The Brotherhood"], ["03", "Self-Paced"]].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="Coaching & Programs"
          title="Sometimes it's better"
          italic="one-on-one."
          subtitle="There's real value in a group. But sometimes a man needs a space that's just the two of you — to explore thoughts and ideas in confidence, open in prayer, and do the honest heart work no one else gets to see. That's the heart of what I offer."
          verse="The Son of Man came not to be served but to serve, and to give his life as a ransom for many."
          verseRef="Mark 10:45"
        />
        <Programs />
        <Phases />
        <ClientFit />
        <Compare />
        <CTA
          eyebrow="✦ Ready when you are"
          headline="Let's start the"
          headlineItalic="conversation."
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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