/* Work With Me — Brenda McPherson · Free to Thrive Life Coaching
 * Brenda asked for this page to explain "what sessions are like", so that
 * section leads, ahead of the three programs. */
const { useState } = React;

const PROGRAMS = [
  {
    n: "01", name: "Free to Thrive 1:1", sub: "2–6 Months of One-on-One Coaching", tag: "Flagship",
    price: "Shared in your discovery session", commit: "2–6 months · 2–3 sessions a month",
    pitch: "The heart of my work. We meet two to three times a month for two to six months, and we walk gently through your story together. You'll come to understand yourself and your wounding, learn to help your body feel safe, and grow a deeper, more vibrant prayer life along the way.",
    inside: ["Two to three one-on-one sessions each month, for 2 to 6 months", "Understanding yourself: your story, your wounds, and your protective parts", "Somatic practices and simple tools to regulate your nervous system", "Parts work to understand and heal your protective parts", "Holy Spirit-led inner healing prayer, always at your pace", "A deeper, more vibrant prayer life", "A deep listening ear from someone who has walked this road herself"],
    cta: "Book a Free Discovery Session",
    featured: true,
  },
  {
    n: "02", name: "The Still Waters Circle", sub: "Small-Group Healing Circle", tag: "Forming soon",
    price: "Shared when the circle opens", commit: "Small group · seasonal",
    pitch: "A small, confidential circle of women healing from childhood wounds. Healing happens in safe community too, when you hear another woman say \"me too\" and realize you were never the only one. We learn together, practice together, and pray together, and no one is ever pressured to share.",
    inside: ["A small circle of women, kept intentionally small", "Gentle teaching on wounds, the nervous system, and healing", "Somatic practices we learn and try together", "Prayer, and space to share, with never any pressure to", "Confidentiality agreed to by every member"],
    cta: "Join the Interest List",
  },
  {
    n: "03", name: "Finding Your Bearings", sub: "A Self-Paced Beginning", tag: "Coming soon",
    price: "To be announced", commit: "Your own pace",
    pitch: "A quiet place to begin if you're not ready to talk with anyone yet. Short lessons on how childhood wounds shape adult life and how your nervous system works, with simple practices to help you feel a little steadier and Scripture to hold along the way.",
    inside: ["Short lessons you can take at your own pace", "Understanding your wounds, without shame", "Your nervous system, explained simply", "Somatic practices for everyday moments", "Anchor scriptures and gentle prayer prompts"],
    cta: "Join the Waitlist",
  },
];

function Sessions() {
  const items = [
    { t: "Safe first", d: "Before anything else, you need to feel safe. We start slowly, and we only go deeper when you're ready." },
    { t: "At your pace", d: "You never have to share details you're not ready to share. You decide what we talk about, and when." },
    { t: "With a fellow survivor", d: "You're not talking with someone reading from a textbook. You're talking with someone who has walked the long road of healing herself." },
    { t: "Body and soul together", d: "We learn how your nervous system works and practice simple somatic tools you can use between sessions, in real life." },
    { t: "Seeking God together", d: "We pray, and we invite the Holy Spirit to lead us into the places that need healing. Many women find their prayer life grows deeper and more alive." },
    { t: "Held in confidence", d: "What you share is treated with great care and discretion. Your story is yours, and it stays that way." },
  ];
  return (
    <section className="section" style={{ background: "var(--cream)", paddingTop: 40 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "start" }}>
          <div>
            <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ What sessions are like</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.6vw, 64px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
              Safe first.{" "}
              <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Then, gently, deeper.</span>
            </h2>
            <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.65, color: "var(--walnut-soft)", maxWidth: 440 }}>
              What I offer is compassion, a deep listening ear from another survivor, and experience navigating recovery. Here is what our time together feels like.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid var(--rule-strong)" }}>
            {items.map((it, i) => (
              <div key={i} style={{ padding: "28px 28px 30px", borderBottom: i < items.length - 2 ? "1px solid var(--rule)" : "none", borderRight: i % 2 === 0 ? "1px solid var(--rule)" : "none" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
                  <StarMark size={10} color="var(--terracotta)" />
                  <h3 className="display" style={{ fontSize: 21, fontWeight: 500, color: "var(--walnut)", lineHeight: 1.2 }}>{it.t}</h3>
                </div>
                <p style={{ fontSize: 15.5, lineHeight: 1.6, color: "var(--walnut-soft)" }}>{it.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Programs() {
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 920 }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Ways to work together</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            Three doorways,{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>one gentle path.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720 }}>
            Each one rests on the same foundations: following God's path for you, understanding yourself, helping your body feel safe, and never walking alone. The pace differs. The heart 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 }) {
  const href = p.featured ? BOOKING_URL : "contact.html";
  const external = /^https?:\/\//.test(href);
  return (
    <article style={{ background: p.featured ? "var(--walnut)" : "var(--cream)", 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: p.featured ? "var(--sage-soft)" : "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>
          <h3 className="display" style={{ fontSize: 40, fontWeight: 500, lineHeight: 1.05, letterSpacing: "-0.03em", marginTop: 28 }}>{p.name}</h3>
          <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", gap: 12, 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" style={{ textAlign: "right" }}>{p.price}</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
              <span className="smallcaps" style={{ fontSize: 9 }}>Commitment</span>
              <span className="grotesk" style={{ textAlign: "right" }}>{p.commit}</span>
            </div>
          </div>
        </div>
        <div>
          <div className="smallcaps" style={{ color: p.featured ? "var(--sage-soft)" : "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: p.featured ? "var(--sage-soft)" : "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={href} {...(external ? { 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: p.featured ? "var(--cream)" : "var(--terracotta)", textDecoration: "underline" }}>Book a free discovery session</a> and we'll figure it out together.
          </p>
        </div>
      </div>
    </article>
  );
}

function Phases() {
  const phases = [
    { v: "Understand", s: "Your Story, Without Shame", b: "Your story, your wounds, and parts work with the protective parts of you that have worked so hard for so long. Somatic practices are introduced gently. Nothing is forced, and you share only what you're ready to share." },
    { v: "Settle", s: "A Body That Feels Safe", b: "How your nervous system works, and simple somatic practices that help your body settle, so healing has somewhere safe to happen." },
    { v: "Heal", s: "Meeting God in the Wound", b: "With the Holy Spirit leading, we invite Jesus into the places that still hurt. \"I know He loves me\" can slowly become \"I can feel Him.\"" },
    { v: "Thrive", s: "Following His Path Forward", b: "Hope and joy you no longer have to perform, a renewed sense of purpose, and tools you keep for life. Following God on your healing journey was worth it." },
  ];
  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 880 }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ The Free to Thrive journey</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 76px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            Four movements,{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>never a formula.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)" }}>
            Most journeys move through these four movements, but healing isn't linear. We circle back whenever your heart or body asks us to. That isn't falling behind. It's simply how healing happens.
          </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 style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--terracotta)" }}>0{i + 1}</span>
                <StarMark size={10} color="var(--sage)" />
              </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 Faithful & Weary", t: "You've served God for years, and you're exhausted", d: "You love Him. You've served, trusted, and given and given. You look joyful and successful. But you're tired of faking that you have it all together, and quietly, you're losing hope." },
    { tag: "The Ones Who've Tried Everything", t: "Counseling, books, prayer, and still stuck", d: "You've done the work. Some of it helped. But you're still stuck, confused, and a little scared that this is as good as it gets. You're lost, and you don't know what to try next." },
    { tag: "Midlife, and Your Body Is Speaking", t: "Exhausted, hurting, and told it's \"just menopause\"", d: "Exhaustion, pain, or health struggles that seem tied to old wounds, and doctors who can't quite explain it. Your body may be asking for a kind of care it has never been given." },
    { tag: "Wounded by Someone Who Should Have Protected You", t: "Healing from abuse, including in church or ministry", d: "Physical or sexual abuse, whether it came from family, a trusted leader, or someone in ministry. You deserve to be believed, and to heal without being rushed or judged. I understand how complicated that kind of wound can be." },
  ];
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <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 }}>
          Women who have navigated deep childhood wounds and have tried so hard to serve God and honor Him with their lives, and who are disappointed that all of it, therapy included, hasn't brought the healing they hoped for.
        </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", "Full", "Small group", "—"],
    ["Time with Brenda", "2–3 sessions a month", "Each circle gathering", "—"],
    ["Women walking the same road", "—", "✓", "—"],
    ["Inner healing prayer", "Personal, Holy Spirit-led", "Together, in prayer", "Prayer prompts"],
    ["Somatic & nervous-system tools", "✓", "✓", "✓"],
    ["Parts work", "✓", "—", "—"],
    ["Your pace, never a formula", "✓", "✓", "✓"],
  ];
  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Compare</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", "The Still Waters 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-2)" : "transparent" }}>{v}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="work" />
      <main>
        <PageHero
          eyebrow="Work With Me"
          title="What our time together"
          italic="is like."
          subtitle="Compassion, a deep listening ear, and someone who has walked the long road of healing herself. Coaching with me is unhurried, confidential, and shaped around your story, because every story is unique."
          verse="In all your ways acknowledge Him, and He shall direct your paths."
          verseRef="Proverbs 3:6"
        />
        <Sessions />
        <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 />);
