/* Work With Me — Julie Janes · GraceLife Coaching */
const { useState } = React;

const PROGRAMS = [
  {
    n: "01", name: "Grace & Truth", sub: "6-Month Deep Dive", tag: "Flagship",
    tagLine: "FLAGSHIP · 1:1 COACHING",
    pitch: "The most intimate container GraceLife offers. One hour a week, beginning and ending in prayer. We uncover the wound, bring Jesus into the memory, and let Holy Spirit do what no strategy ever could. Sessions are recorded and transcribed — so you can return to your own healing as often as you need.",
    inside: [
      "Weekly 60-minute sessions, beginning and ending in prayer",
      "Custom intake review — we go beneath the behavior to the belief",
      "Holy Spirit-led inner healing and memory work",
      "Connection exercises, challenges, and between-session homework",
      "Every session recorded, transcribed, and sent to you",
      "6-month commitment — long enough to see real transformation",
    ],
    featured: true,
  },
  {
    n: "02", name: "GraceLife Circle", sub: "Women Healing Together", tag: "Cohort",
    tagLine: "SMALL GROUP · COHORT",
    pitch: "A vetted circle of women on the same road. Not a Bible study — a sacred space where the real stuff gets said, heard, and prayed over. Monthly calls with Julie, shared rhythms, and a community that makes belonging feel possible again.",
    inside: [
      "Monthly 90-minute group calls with Julie",
      "Vetted small group — not just anyone; women committed to healing",
      "Shared weekly rhythms and connection exercises",
      "Between-session community and accountability",
      "Safe space to say the things you've been carrying alone",
      "Application required — invitation-style enrollment",
    ],
    featured: false,
  },
  {
    n: "03", name: "Renew Your Mind", sub: "Digital Course · Romans 12:2", tag: "Self-Paced",
    tagLine: "SELF-PACED · ALWAYS OPEN",
    pitch: "The full GraceLife framework at your own pace. Five modules walking you from wound to freedom — with video teaching, audio prayers, and journaling prompts. The doorway in, whenever you're ready.",
    inside: [
      "5 video modules: Uncover · Encounter · Release · Walk · Live",
      "Downloadable workbook for each module",
      "Audio prayer tracks — guided Holy Spirit encounters",
      "Journaling prompts for between-session integration",
      "Lifetime access — return whenever you need it",
      "Community forum access included",
    ],
    featured: false,
  },
];

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 }}>
            Three ways to{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>begin.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720 }}>
            Whether you're ready to go deep in a 1:1 container, find your people in a small group, or start at your own pace — the path is here.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
          {PROGRAMS.map((p) => <ProgramRow key={p.n} p={p} />)}
        </div>
      </div>
    </section>
  );
}

function ProgramRow({ p }) {
  return (
    <article style={{ background: p.featured ? "var(--walnut)" : "var(--cream-2)", color: p.featured ? "rgba(239,241,232,1)" : "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 ? "rgba(239,241,232,1)" : "var(--terracotta)", border: p.featured ? "none" : "1px solid var(--terracotta)", padding: "5px 10px", borderRadius: 999 }}>{p.tagLine}</span>
          <div style={{ marginTop: 28 }}>
            <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>
        <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 ? "rgba(239,241,232,1)" : "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: "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={BOOKING_URL} target="_blank" rel="noopener noreferrer" className="btn" style={{ background: p.featured ? "rgba(239,241,232,1)" : "var(--walnut)", color: p.featured ? "var(--walnut)" : "rgba(239,241,232,1)" }}>
            Book a Free Call <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: "var(--terracotta)", textDecoration: "underline" }}>Book a free heart connection call</a> and we'll figure it out together.
          </p>
        </div>
      </div>
    </article>
  );
}

function Phases() {
  const phases = [
    { v: "Uncover", s: "The Wound", b: "We go beneath the behavior to the belief. Your intake form is the starting place, but we dig deeper — into the childhood memory, the formed conviction, the place where you first learned that love had to be earned. We name it. We don't skip it." },
    { v: "Encounter", s: "Jesus in the Pain", b: "We bring the wound into the room and invite Jesus into it. Holy Spirit-led inner healing — not therapy, not analysis, but an actual encounter with the One who was there in the memory all along." },
    { v: "Release", s: "The Coping & the Shame", b: "We let go of the performing, the shrinking, the accepting-less-than-you-deserve. The coping strategies that once protected you now keep you in the cell. We surrender them — not out of guilt, but out of freedom." },
    { v: "Walk", s: "In Identity & Freedom", b: "A healed woman walks differently. She says no without spiraling. She gets curious when triggered. She breaks generational patterns her children were about to inherit. This is what GraceLife builds toward — one session at a time." },
  ];
  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 woman moves through the same four phases — in 1:1 coaching, in the circle cohort, 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: "The Woman Who Performs Love", t: "Exhausted from earning what was freely given", d: "You've been telling yourself if you just love people well enough, they'll stay. If you're kind enough, generous enough, pretty enough — someone will finally choose you. The performing is exhausting. And deep down you know it's not working." },
    { tag: "The Woman Who Carries Everyone", t: "Depleted from taking on what isn't yours", d: "You absorb other people's emotions as if they're your responsibility to fix. When someone is hurting, you take it on. You've apologized for things that weren't your fault because it was easier than conflict. You're depleted." },
    { tag: "The Woman Who's Hiding", t: "Afraid of being truly known", d: "You have thoughts so dark and honest that you'd never say them out loud. You're afraid if anyone really knew you — the triggered you, the resentful you, the lonely you — they'd leave. So you keep performing. And keep hiding." },
    { tag: "The Woman Who Wants Jesus but Can't Feel Him", t: "Believing, but longing for more", d: "You believe. You pray. You show up. But the connection feels thin. You know He's there — but somewhere between the church wound, the dad wound, and the mom wound, the line got fuzzy. You want more than information. You want encounter." },
  ];
  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Who this is for</div>
        <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500, marginBottom: 36 }}>
          You might be exactly who I've been{" "}
          <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>trained to serve.</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", background: "var(--cream-2)" }}>
              <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 headers = [["01", "Grace & Truth (1:1)"], ["02", "GraceLife Circle"], ["03", "Renew Your Mind"]];
  const rows = [
    ["Session format", "Weekly 1:1", "Monthly group", "Self-paced video"],
    ["Duration", "6 months", "Ongoing", "Lifetime access"],
    ["Personalization", "Fully custom", "Community-shaped", "Self-directed"],
    ["Inner healing prayer", "✓ Deep", "✓ Group", "✓ Audio-guided"],
    ["Session recordings", "✓ Every session", "—", "✓ Included"],
    ["Best for", "Deep 1:1 transformation", "Finding your people", "First step in"],
  ];
  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>
                {headers.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="Work With Me"
          title="Three ways to"
          italic="begin."
          subtitle="Whether you're ready to go deep in a 1:1 container, find your people in a small group, or start at your own pace — the path is here."
          verse="Be transformed by the renewing of your mind."
          verseRef="Romans 12:2"
        />
        <Programs />
        <Phases />
        <ClientFit />
        <Compare />
        <CTA
          eyebrow="✦ Ready to begin?"
          headline="The first step is"
          headlineItalic="just a conversation."
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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