/* Work With Me - using Denice's intake */
const { useState } = React;

const PROGRAMS = [
  {
    n: "01", icon: "✝", name: "Restoring Paths 1:1", sub: "12-Week One-on-One Coaching", tag: "Flagship",
    price: "Discussed on the call", commit: "12 weeks · 1:1",
    pitch: "The full journey, walked together. Weekly 45–50 minute sessions of honest conversation, truth seeking, and simple practices — moving from wherever you are today toward His presence and the path He has planned for you. Firm, but inviting. Warm, and unhurried.",
    inside: ["Weekly 45–50 minute one-on-one sessions", "We start every session getting acquainted — no rushing into the deep end", "Gentle, practical homework after each session (I take homework too — preparing for your next one)", "Scripture-anchored tools for prayer, quiet time, and worship", "Loving accountability, at a pace that honors the ebb and flow", "A feedback check every session — this has to actually serve you"],
    cta: "Book a Call",
    featured: true,
  },
  {
    n: "02", icon: "🕊", name: "Walking With Loss", sub: "Grief Small Group", tag: "Forming now",
    price: "Discussed on the call", commit: "Small group · seasonal",
    pitch: "For those grieving the loss of a spouse or a parent. A small circle of people who actually understand — because most people around you, kind as they are, cannot comprehend what you're feeling. Progress in grief ebbs and flows, and no one should have to walk it alone.",
    inside: ["Small group sessions with others walking the same road", "Scripture, prayer, and honest conversation — no clichés", "Room for the hard questions, without judgment", "A pace that honors grief's ebb and flow — no timeline pressure", "Led by a GriefShare facilitator who has walked this road herself"],
    cta: "Ask About the Group",
  },
  {
    n: "03", icon: "📖", name: "Seeking His Presence", sub: "Self-Paced Path", tag: "Coming soon",
    price: "To be announced", commit: "Your own pace",
    pitch: "A gentle, self-paced path for rebuilding your quiet time, your prayer life, and your sense of His presence. Solid practices, repeated simply, until they hold. For the woman who is ready to simplify her life and put truth into action — one faithful, ordinary day at a time.",
    inside: ["Short weekly readings and reflection questions", "A step-by-step quiet-time rebuilding plan", "Anchor scriptures to carry through the week", "Simple disciplines — the mundane, repeated, until it bears fruit", "Move at your own pace, revisit any week any time"],
    cta: "Join the List",
  },
];

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)" }}>road you're on.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720 }}>
            Three doorways into the same foundation: His presence, truth seeking, your identity as a daughter of God, and someone faithfully coming alongside. The pace differs. The path is the same.
          </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 getting-acquainted call</a> and we'll figure it out together.
          </p>
        </div>
      </div>
    </article>
  );
}

function Phases() {
  const phases = [
    { v: "Meet", s: "You, Where You Are", b: "We start the way a good visit does: getting acquainted, unhurried. You tell your story in your own words and we name what you actually want help with — listening, with discernment, for the need beneath the presenting one." },
    { v: "Ask", s: "The Honest Questions", b: "Not 'why' — that question rarely heals. Better questions: What am I afraid of? What am I believing about God right now? What lie have I been carrying? Honest questions, asked without shame, are where restoration begins." },
    { v: "Seek", s: "His Presence & His Truth", b: "God reveals Himself to those who seek — He wants to be found. Scripture searched sincerely, quiet time rebuilt, lies exchanged for truth: you are His daughter, He delights in you, and He has plans for you." },
    { v: "Walk", s: "The Restored Path", b: "Solid practices put into action and repeated until they hold. Prayer, worship, simple disciplines, loving accountability. Restored relationships — with God, yourself, and others — and peace, even in hard circumstances." },
  ];
  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 Restoring Paths{" "}
            <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 path moves through the same four movements — in 1:1 coaching, in the grief group, or at your own pace. And because grief and disappointment ebb and flow, we circle back whenever the road requires it. That's not falling behind. That's how restoration works.
          </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 Grieving", t: "You lost a spouse or a parent — and the world kept moving", d: "It is more painful than people can imagine, and the ones comforting you often can't comprehend it. You struggle with isolation — sometimes wanting it, sometimes fearing it. I have walked this exact road. God sees you, and He wants to be with you in this painful, sad situation." },
    { tag: "The Disappointed", t: "Not where you thought you'd be by now", d: "Dashed expectations. Health changes. Financial or relationship setbacks. The creativity and dreams are still in there, but it feels like the window is closing. You don't need a pep talk — you need to reground in truth and rediscover the path God still has for you." },
    { tag: "The Drifting", t: "Faith that's gone quiet · relationships gone thin", d: "You and your spouse feel like strangers. Your children are grown and you wonder if you're needed. Prayer feels unanswered, and a quiet voice whispers that God must not love you. Those are lies worth exchanging for truth — and that exchange is exactly what we do." },
    { tag: "The Ready", t: "Willing to do the simple things, over and over", d: "You're ready to simplify your life and put solid practices into action. You understand that some of it will be mundane — a quiet time kept, a prayer repeated, an honest check-in — done faithfully until it bears fruit. You want accountability, not applause. Welcome. Let's walk." },
  ];
  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>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720, marginBottom: 40, marginTop: -16 }}>
          Mostly women, 35 to 70 — though not exclusively; grief doesn't check demographics, and neither do I.
        </p>
        <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 attention & discernment", "Full", "Group format", "—"],
    ["Live time with Denice", "Weekly", "Each group session", "—"],
    ["Companions walking the same road", "—", "✓", "—"],
    ["Personalized homework & follow-up", "Every session", "Group practices", "Self-guided"],
    ["Scripture-anchored tools & practices", "✓", "✓", "✓"],
    ["Pace honors grief's ebb and flow", "✓", "✓", "✓"],
  ];
  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 Coaching"], ["02", "Grief Small Group"], ["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="Coaching for the road"
          italic="you didn't choose."
          subtitle="Grief. Disappointment. A season where the plans ran out. You don't need someone to explain it away — you need someone to come alongside you while you find truthful answers and a path restored. Three doorways, one foundation: His presence, His truth, and your identity as His daughter."
          verse="Bless the Lord, O my soul, and forget not all his benefits… who redeems your life from the pit and crowns you with steadfast love and mercy."
          verseRef="Psalm 103:2–4"
        />
        <Programs />
        <Phases />
        <ClientFit />
        <Compare />
        <CTA
          eyebrow="✦ Not sure where to start?"
          headline="Start with a"
          headlineItalic="conversation."
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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