/* Work With Me — Kevin Wood · Head to Heart */
const { useState } = React;

const PROGRAMS = [
  {
    n: "01", icon: "♥", name: "The Heart-Aligned Path", sub: "1:1 Coaching · 1–6 months", tag: "Flagship",
    price: "By application", commit: "Weekly · 60 min",
    pitch: "The flagship offering. One-on-one coaching for the person who knows what the Bible says and can't figure out why they're not living it out. We meet weekly (sometimes twice a week in heavier seasons) and walk the full Notice · Root · Heal · Realign arc at your pace.",
    inside: ["60-minute weekly 1:1 sessions (additional sessions in heavier seasons)", "Root-cause work — tracing the loop back to the moment", "Inner child work and reparenting", "Holy-Spirit-led memory healing & listening prayer", "Somatic practice — breath, meditation, prayer between calls", "Practical tools to attune with your inner child and heart on your own"],
    cta: "Apply Now",
    featured: true,
  },
  {
    n: "02", icon: "✦", name: "The Connection Circle", sub: "Small Group · monthly", tag: "Invitation only",
    price: "Monthly subscription", commit: "Min 6 months",
    pitch: "A small, vetted group of people walking the heart-aligned road together. Connection without performance. Conversation without scripts. For those who want to keep the work moving with others on the same path.",
    inside: ["Monthly 90-minute small-group video calls", "Shared rhythms — Scripture, somatic practice, prayer", "Written reflections between sessions", "Peer connection rooted in lived honesty", "Invitation only — requires intro call or 1:1 work first"],
    cta: "Request an Invite",
  },
  {
    n: "03", icon: "✝", name: "Renewing of the Mind", sub: "Self-Paced Course", tag: "Always open",
    price: "One-time", commit: "Lifetime access",
    pitch: "The full Head to Heart framework at your own pace — teaching, somatic practice, guided prayer, and the language of heart-aligned living. Five core modules mirroring the 1:1 arc. The doorway in for the person who isn't ready for 1:1 yet but can't stay in their head either.",
    inside: ["5 core video modules (Notice · Root · Heal · Realign · Live)", "Companion workbook and weekly practice guides", "Audio teachings and guided inner healing prayer tracks", "Somatic & breath practice audio library", "Lifetime access — return to any module any time"],
    cta: "Enroll Now",
  },
];

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 the{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>heart-aligned life.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720 }}>
            Three doorways into the same foundation: identity in Christ, encounter over effort, and the slow miracle of moving from your head into your heart. You've read enough. This is what changes you.
          </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: 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(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 }}>Commitment</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 path is yours? <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" style={{ color: "var(--terracotta)", textDecoration: "underline" }}>Book a free heart-aligned call</a> and we'll figure it out together.
          </p>
        </div>
      </div>
    </article>
  );
}

function Phases() {
  const phases = [
    { v: "Notice", s: "The Head Loop", b: "Name what's actually running you. The thoughts you can't quiet. The performance you can't put down. The verses you've memorized that haven't yet landed. No shame — just honest noticing. Awareness has to come before anything else can." },
    { v: "Root", s: "The Lie Beneath", b: "Every head loop is downstream of a belief — usually one you set up young. We trace it back. Family, early agreements, the unspoken lie underneath. The root is where the actual work begins." },
    { v: "Heal", s: "Heart Encounter", b: "Inner child work and reparenting. Holy-Spirit-led memory healing. Somatic practice, breath, prayer. The boy or girl inside you finally gets to hear what they should have heard. The lie loses its grip — not because you out-thought it, but because you encountered the Father." },
    { v: "Realign", s: "Mind from Heart", b: "Now Romans 12 is no longer abstract — the renewing of the mind starts to actually happen. Heart filters head, not the other way around. Marriage softens. Connection returns. Shalom-Shalom peace stops being a verse and becomes a life." },
  ];
  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 person moves through the same four phases — in 1:1 coaching, in the Connection Circle, or through the self-paced course. The pace differs. The path is identical.
          </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-of-Performing Men & Women", t: "Mid-career · self-worth on the line", d: "You've built a career, a marriage, a family — and somewhere in the middle of it all you stopped knowing whether you're enough. You're tired of performing for acceptance. You ask 'am I enough?' more than you'd ever say out loud. This is the right room for you." },
    { tag: "Mid-Marriage Strain", t: "Loving someone · drifting from yourself", d: "You and your spouse aren't where you want to be. The walls have been up so long you don't remember when they went up. You haven't given up — but you don't know how to come back. We've walked through that kitchen ourselves. There's a road back." },
    { tag: "Seekers & New Believers", t: "Curious about Jesus · not yet at home", d: "You're newer to faith, or somewhere between seeking and surrendering. You don't need a sermon. You need a real conversation with someone who has wrestled with this and ended up at the same kitchen table where the prodigal sat down. Come anyway." },
    { tag: "Mature Believers · Stuck", t: "Know the verses · not yet free", d: "You've been in church a long time. You know the verses. You've led the small group. And in private you still ask why the freedom in Christ you've taught about isn't yet the freedom you live. This is exactly the work I do." },
  ];
  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 people I work 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 = [
    ["Personalized, root-cause attention", "Full", "Partial", "—"],
    ["Live sessions with Kevin", "Weekly", "Monthly", "—"],
    ["Connection Circle access", "Optional add-on", "Included", "—"],
    ["Inner child & reparenting work", "Every session", "Group format", "Audio-guided"],
    ["Somatic & prayer practice library", "✓", "✓", "✓"],
    ["Lifetime access to all materials", "✓", "✓", "✓"],
  ];
  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", "1:1 Heart-Aligned"], ["02", "Connection Circle"], ["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="Programs & Coaching"
          title="This is not another"
          italic="self-improvement program."
          subtitle="Three entry points into the same grace-rooted work. Every offering is built on the same foundation: identity in Christ, encounter over effort, and the slow miracle of moving from your head into your heart. You've read enough. This is what makes the deposit."
          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"
        />
        <Programs />
        <Phases />
        <ClientFit />
        <Compare />
        <CTA
          eyebrow="✦ You've tried everything else"
          headline="This is genuinely"
          headlineItalic="different."
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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