/* Work With Me - Krystal Larkins Consulting */
const { useState } = React;

const PROGRAMS = [
  {
    n: "01", icon: "⚓", name: "The Grounded Path", sub: "3-Month 1:1 Mentorship", tag: "Flagship",
    price: "By application", commit: "3 months · 1:1",
    pitch: "The flagship offering. An unrushed, soft-but-deep 1:1 mentorship for the woman who is ready to come home to her body, her heart, and her God. Three months minimum, because survival mode doesn't unlearn itself overnight — and it shouldn't have to.",
    inside: [
      "12+ weekly 60-minute mentorship sessions",
      "Written reflections after each call",
      "Gentle micro-practices between sessions (small enough to actually do)",
      "Nervous system, identity, and Scripture work woven together",
      "Email support for between-session questions",
      "A pace that respects what your body can hold — never one more pressure",
    ],
    cta: "Apply Gently",
    featured: true,
  },
  {
    n: "02", icon: "🤍", name: "The Steady Companion", sub: "Call-free Voice & Text Coaching", tag: "Limited spots",
    price: "Monthly subscription", commit: "Min 3 months",
    pitch: "For the woman whose week is already too full for weekly calls — but who still needs an anchored, regulated presence walking beside her. Monthly deep-dives plus voice and text support in the real, small daily moments that matter most.",
    inside: [
      "One 60-minute deep-dive call every month",
      "Voice memo & text support throughout the week",
      "Real-time grounding when life gets loud or hard",
      "Gentle weekly practices tailored to your season",
      "Designed for mothers, caregivers, and women with full calendars",
      "Minimum 3-month commitment — healing takes time",
    ],
    cta: "Request a Spot",
  },
  {
    n: "03", icon: "📖", name: "Coming Home to Yourself", sub: "Self-Paced Course", tag: "Always open",
    price: "One-time", commit: "Lifetime access",
    pitch: "The Grounded-In-Christ Method at your own pace. Short audio practices, gentle journaling, nervous-system tools, and Scripture meditation — designed for women whose lives have no room for one more pressure. The gentlest doorway in.",
    inside: [
      "4 core modules mirroring the four pillars: Soften · Anchor · Feel · Tend",
      "Short audio practices (most under 10 minutes)",
      "Gentle journaling prompts and Scripture meditations",
      "Grounding and nervous-system regulation tools",
      "Lifetime access — return to any module any time",
      "Designed to never feel like one more thing to push through",
    ],
    cta: "Begin Gently",
  },
];

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: 1.0, fontWeight: 500 }}>
            Mentorship for{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>actual healing.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.65, color: "var(--walnut-soft)", maxWidth: 720 }}>
            Three doorways into the same foundation: body-first regulation, identity in Christ, and gentle, sustainable rhythms. Whichever path you choose, the pace will be kind, the work will be real, and the goal will be peace — not performance.
          </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(250,246,240,0.72)" : "var(--walnut-soft)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", borderBottom: p.featured ? "1px solid rgba(250,246,240,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.55, 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(250,246,240,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(250,246,240,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(250,246,240,0.72)" : "var(--walnut-soft)", lineHeight: 1.55 }}>
            Not sure which path is yours? <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" style={{ color: "var(--terracotta)", textDecoration: "underline" }}>Book a free 30-minute conversation</a> and we'll find it together.
          </p>
        </div>
      </div>
    </article>
  );
}

function Phases() {
  const phases = [
    { v: "Soften", s: "the body", b: "We slow down enough for your nervous system to come out of survival mode. Grounding, breath, regulation — your body remembering safety is the floor everything else stands on. No pressure. No checklist. Just permission and practice." },
    { v: "Anchor", s: "in Christ", b: "A quiet, sturdy belonging — anchored in who you already are in Christ, not in how today went. Scripture meets your body. Prayer stops feeling performative. Identity becomes a place to rest, not a goal to chase." },
    { v: "Feel", s: "without shame", b: "We undo the overriding — gently. You learn to recognize overwhelm before it consumes you. You learn that emotion is information, not failure. You learn compassionate self-talk and regulation tools that actually work in real life." },
    { v: "Tend", s: "your peace", b: "Honest boundaries. Gentle daily rhythms. Sustainable practices that hold the peace you've worked so hard to find. Not another performance — a life your body, heart, and faith can actually live inside, for the long haul." },
  ];
  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: 1.0, fontWeight: 500 }}>
            How the journey{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>gently unfolds.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.65, color: "var(--walnut-soft)" }}>
            Every woman moves through the same four pillars — whether in 1:1 mentorship, voice-and-text coaching, or the self-paced course. The pace differs. The depth 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.6, color: "var(--walnut-soft)" }}>{p.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClientFit() {
  const groups = [
    { tag: "Overwhelmed Mothers", t: "Loving God deeply · running on empty", d: "Homeschooling, working, raising small children, or just keeping the house alive — you carry the emotional weight of everyone around you. Your body has been braced for so long you've forgotten what calm feels like. This is exactly who this work was built for." },
    { tag: "Ministry Wives & Caregivers", t: "Serving others · quietly depleted", d: "You're the woman others lean on — at church, in your small group, in your family. You pour out spiritually all week and have very little left to receive. You need a space where, for once, you don't have to be the strong one." },
    { tag: "Foster & Adoptive Moms", t: "Holding hard stories · all day, every day", d: "You're caring for children who have lived through more than they should have. Compassion fatigue is real. So is the loneliness of doing this work without anyone holding you back. I've lived this season — and I know how much gentleness it takes." },
    { tag: "Women Stepping Out of Hustle Faith", t: "Loving Jesus · separating Him from striving", d: "You love God deeply, but you're tired of the pressure-heavy version of faith that left you exhausted. You want to come home to Jesus without the performance — and you want help that honors both your body and your Bible. This is that space." },
  ];
  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 women 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.65, color: "var(--walnut-soft)" }}>{g.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Compare() {
  const rows = [
    ["Personalized, deep-dive attention", "Full", "Flexible", "Self-guided"],
    ["Live coaching sessions with Krystal", "Weekly", "Monthly", "—"],
    ["Voice & text support between sessions", "Email-based", "Yes (primary)", "—"],
    ["Self-paced grounding & Scripture practices", "Included", "Included", "Full library"],
    ["Lifetime access to materials", "Yes", "Yes", "Yes"],
    ["Minimum commitment", "3 months", "3 months", "Lifetime access"],
  ];
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Compare paths</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)" }}>gentle 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", "Grounded Path"], ["02", "Steady Companion"], ["03", "Coming Home"]].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.5, 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 & mentorship"
          title="Healing that's gentle"
          italic="enough to actually last."
          subtitle="Three soft doorways into the same trauma-informed, faith-based work. Every path is built on the same foundation: regulating the body, anchoring identity in Christ, and building gentle rhythms that can hold real life. You've tried hard enough already. This is what makes the deposit stick."
          verse="He heals the brokenhearted and binds up their wounds."
          verseRef="Psalm 147:3"
        />
        <Programs />
        <Phases />
        <ClientFit />
        <Compare />
        <CTA
          eyebrow="✦ Not sure which path is yours?"
          headline="Let's figure it out"
          headlineItalic="together."
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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