/* Work With Me — Sally Buckner · Triumph Life Coaching */
const { useState } = React;

const PROGRAMS = [
  {
    n: "01", icon: "✦", name: "The Triumph Journey", sub: "Six 1:1 Sessions", tag: "Best value",
    price: "$275 · six sessions", commit: "Paced to you",
    pitch: "The complete walk out of bondage and into who God says you are. Over six unhurried one-on-one sessions we move together through all four phases — Uncover, Expose, Renounce, Receive — at your pace, with nothing forced and nothing performed.",
    inside: ["Six 1:1 Zoom sessions (Zoom Pro — no 30-minute cutoff)", "The full Uncover → Receive arc, paced to your readiness", "Mapping your belief window and naming the lies", "Forgiveness and renouncing work, anchored in Scripture", "Reparenting the inner child in a safe, held space", "Take-home prayer and truth-declaration practices"],
    cta: "Start the Journey",
    featured: true,
  },
  {
    n: "02", icon: "✚", name: "Breakthrough Intensive", sub: "Three 1:1 Sessions", tag: "Focused work",
    price: "$140 · three sessions", commit: "One stronghold",
    pitch: "For one specific lie, wound, or stuck place that you can feel but can't shake. In three focused sessions we name what's really happening in your heart, expose the lie underneath it, and replace it with the truth — Scripture by Scripture.",
    inside: ["Three focused 1:1 Zoom sessions", "One stronghold or recurring lie at a time", "Belief-window work around that specific area", "Scripture chosen to break the lie you've believed", "A clear take-home practice to keep the ground you gain"],
    cta: "Book the Intensive",
  },
  {
    n: "03", icon: "✺", name: "A First Conversation", sub: "Single Session", tag: "Start here",
    price: "$50 · single session", commit: "No commitment",
    pitch: "Not sure where to begin? Start with one honest conversation. A safe, confidential place to tell your story, be heard without judgment, and get an honest sense of what's keeping you in bondage — and what a next step could look like.",
    inside: ["One 1:1 Zoom session (no 30-minute cutoff)", "Space to tell your story in a safe place", "An honest, nonjudgmental read on what's going on", "A clear, no-pressure sense of your next step", "Additional sessions afterward are just $45 / hour"],
    cta: "Begin Here",
  },
];

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 how to begin</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            One-on-one, and{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>always a safe place.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720 }}>
            Three ways to begin the same walk home — from a single honest conversation to the full Triumph Journey. Every session is one-on-one over Zoom, where you can finally say what's hard to share in a church pew or a small group. The container is shaped around your needs, and the cost is talked through openly before we start.
          </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 }}>Pace</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 is right for you? <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: "Uncover", s: "Your Belief Window", b: "A safe place first. We get to know your story — the home you came from, what happened, and the window of beliefs you've been viewing yourself and God through. No history skipped. No shame attached." },
    { v: "Expose", s: "The Lies", b: "We find the specific lies you came to believe — worthless, unwanted, a mistake — and the hidden unbelief underneath your faith. And we see the truth most people miss: the real battle was always in your own heart." },
    { v: "Renounce", s: "Forgive & Release", b: "Where the bondage breaks. We renounce the lies and replace them with Scripture, release the unforgiveness that's been hurting you most, and reparent the little one inside who never felt safe." },
    { v: "Receive", s: "Who God Says You Are", b: "You stop striving and start receiving — adopted, wanted, an incorruptible seed. This is triumph: not a tidy ending, but the proof that the old identity is gone and the peace of Christ has the last word." },
  ];
  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 — whether in the full Journey, a focused Intensive, or starting with one conversation. 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: 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: "Survivors of Abuse", t: "Carrying what was done to you", d: "If you've survived any form of abuse — physical, emotional, sexual — and you've quietly carried it for years, you're exactly who this work is for. You don't need the right words. You only need a safe place and a willingness to be honest." },
    { tag: "The Unworthy & Unseen", t: "Sure you don't fit anywhere", d: "You struggle with abandonment, self-hatred, worthlessness, shame, guilt, rejection, fear. You don't feel like you fit in any crowd. Underneath it all, there may be a quiet unbelief that God could really want you. That's the ground we'll walk." },
    { tag: "Stuck Despite Faith", t: "Saved, but still in bondage", d: "You love God and you've done the church things, and yet the old patterns and the old voice won't lift. Often the issue isn't your faith — it's a religious belief that was never true, or a lie that has never been renounced. We'll find it together." },
    { tag: "Teens & Young Adults", t: "Fifteen and up · early is a gift", d: "If you're fifteen or older and already feel the weight of what's happened to you, you are not too young and you are not too late. Getting the truth early changes the whole rest of the story. This is a safe place to start." },
  ];
  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 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 = [
    ["One-on-one, fully confidential", "✓", "✓", "✓"],
    ["Zoom Pro — no 30-minute cutoff", "✓", "✓", "✓"],
    ["Full Uncover → Receive arc", "Complete", "One area", "Intro"],
    ["Forgiveness & renouncing work", "In depth", "Focused", "As needed"],
    ["Reparenting the inner child", "✓", "Partial", "—"],
    ["Take-home prayer & truth practices", "✓", "✓", "Light"],
  ];
  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", "Triumph Journey"], ["02", "Breakthrough Intensive"], ["03", "First Conversation"]].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 & Sessions"
          title="This is not therapy."
          italic="It's the walk home."
          subtitle="I'm not a therapist — so you can set down whatever you've felt about therapists and just be heard. Every session is one-on-one over Zoom, nonjudgmental and confidential, with all the time you need. Three ways to begin the same walk: believing and receiving who God says you are."
          verse="For you have been born again, not of perishable seed, but of imperishable, through the living and enduring word of God."
          verseRef="1 Peter 1:23"
        />
        <Programs />
        <Phases />
        <ClientFit />
        <Compare />
        <CTA
          eyebrow="✦ You've carried it long enough"
          headline="Let's start"
          headlineItalic="the walk home."
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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