/* Bri Hershberger · The Glass Heart — Work With Me page */
const { useState, useEffect } = React;

function ProgramRow({ p, index }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: p.featured ? "1fr 1.6fr 1fr" : "1fr 1.6fr 1fr", gap: 0, background: p.featured ? "var(--walnut)" : index % 2 === 0 ? "var(--cream)" : "var(--cream-2)", borderBottom: "1px solid var(--rule)", padding: "clamp(40px, 5vw, 72px) clamp(28px, 6vw, 96px)" }}>
      <div>
        <span className="mono" style={{ fontSize: 12, color: "var(--terracotta)", display: "block", marginBottom: 16 }}>{p.n}</span>
        <h3 className="display" style={{ fontSize: "clamp(28px, 3vw, 44px)", fontWeight: 500, color: p.featured ? "var(--cream)" : "var(--walnut)", lineHeight: 1.05, marginBottom: 8 }}>{p.name}</h3>
        <div className="serif-italic" style={{ fontSize: 18, color: p.featured ? "rgba(248,244,237,0.7)" : "var(--walnut-soft)" }}>{p.sub}</div>
        <span className="smallcaps" style={{ display: "inline-block", marginTop: 16, 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 12px", borderRadius: 999 }}>
          {p.tag}
        </span>
      </div>
      <div style={{ paddingLeft: 48, paddingRight: 48, borderLeft: "1px solid", borderRight: "1px solid", borderColor: p.featured ? "rgba(248,244,237,0.15)" : "var(--rule)" }}>
        <p style={{ fontSize: 17, lineHeight: 1.65, color: p.featured ? "rgba(248,244,237,0.9)" : "var(--walnut-soft)", marginBottom: 24 }}>{p.pitch}</p>
        <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 12 }}>
          {p.bullets.map((b, i) => (
            <li key={i} style={{ display: "flex", alignItems: "flex-start", gap: 12, fontSize: 15.5, color: p.featured ? "rgba(248,244,237,0.85)" : "var(--walnut-soft)" }}>
              <DiamondMark size={7} color="var(--terracotta)" style={{ marginTop: 6, flexShrink: 0 }} /> {b}
            </li>
          ))}
        </ul>
      </div>
      <div style={{ paddingLeft: 48 }}>
        <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 14 }}>Format</div>
        <p style={{ fontSize: 15, lineHeight: 1.65, color: p.featured ? "rgba(248,244,237,0.7)" : "var(--walnut-soft)", marginBottom: 32 }}>{p.format}</p>
        <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>
      </div>
    </div>
  );
}

function Programs() {
  const programs = [
    {
      n: "01", featured: true,
      name: "The Glass Heart Intensive",
      sub: "10-Week 1:1 Coaching",
      tag: "Flagship",
      pitch: "We go straight to the source. Not behavior — the wound beneath it. Ten weeks of honest, curiosity-led sessions connecting your present patterns to your childhood story, inviting God into the core memory, and walking you into the wholeness you were made for.",
      bullets: [
        "10 weekly 60-min sessions, one-on-one",
        "Breathwork and body-check opening each session",
        "Core wound and childhood memory work",
        "Internal Family Systems (parts) exploration",
        "Shame work, identity in Christ, grace-based healing",
        "Daily heart check-in rhythms between sessions",
      ],
      format: "10 weeks · 60 min/week · online via video · private and protected",
      cta: "Apply Now",
    },
    {
      n: "02", featured: false,
      name: "The Glass Circle",
      sub: "Group Cohort",
      tag: "Invitation only",
      pitch: "Women walking through the Uproot·Discover·Recover·Thrive framework together. Not a Bible study. Not a support group. A real circle of women witnessing each other's healing — and being witnessed by someone who has been in the fire.",
      bullets: [
        "Small, carefully curated group of women",
        "Weekly group sessions guided by Bri",
        "Shared Glass Heart framework as foundation",
        "Peer witness and accountability between sessions",
        "Community that gives back — not just takes",
        "Invitation-based enrollment",
      ],
      format: "Cohort format · weekly group sessions · limited spots · invitation only",
      cta: "Join the Waitlist",
    },
    {
      n: "03", featured: false,
      name: "Uproot + Thrive",
      sub: "5-Week Self-Paced",
      tag: "Always open",
      pitch: "The Glass Heart framework at your own pace. Audio sessions, heart prompts, and daily practices that begin reconnecting you with your story, your body, and the younger self who needed someone to stay.",
      bullets: [
        "5 audio sessions: Uproot · Discover · Recover · Thrive · Rooted",
        "Guided heart prompts after each session",
        "Daily practice: 'Heart, what do you need today?'",
        "Childhood photo compassion practice",
        "Breathwork and body-centering introduction",
        "Lifetime access to all content",
      ],
      format: "5 weeks of audio content · self-paced · immediate access · lifetime access",
      cta: "Start Now",
    },
  ];
  return (
    <section>
      <div style={{ borderTop: "1px solid var(--rule)" }}>
        {programs.map((p, i) => <ProgramRow key={i} p={p} index={i} />)}
      </div>
    </section>
  );
}

function Methodology() {
  const phases = [
    { n: "01", verb: "Uproot", body: "We go back before the behavior. We find the moment your heart first decided it wasn't safe to be seen — and we sit with it honestly, with curiosity instead of judgment." },
    { n: "02", verb: "Discover", body: "We ask what you needed in that moment. Then we invite God into the memory as the loving Father He is — not distant doctrine, but present, caring, and real." },
    { n: "03", verb: "Recover", body: "Between sessions, heart check-in rhythms, a childhood photo, and a daily question keep the healing active. You become a compassionate friend to your own heart." },
    { n: "04", verb: "Thrive", body: "A woman who has been witnessed in her wounds changes. She stops performing. She takes up space. She gives love from fullness — not from the fear of losing it." },
  ];
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2.4fr", gap: 64, marginBottom: 64 }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)" }}>✦ The methodology</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.6vw, 64px)", color: "var(--walnut)", lineHeight: 1.0, fontWeight: 500 }}>
            How the work{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>actually works.</span>
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid var(--rule-strong)" }}>
          {phases.map((p, i) => (
            <div key={i} style={{ padding: "40px 32px 48px", borderRight: i < 3 ? "1px solid var(--rule)" : "none" }}>
              <span className="mono" style={{ fontSize: 11, color: "var(--terracotta)", display: "block", marginBottom: 20 }}>{p.n}</span>
              <h3 className="display" style={{ fontSize: 28, fontWeight: 500, color: "var(--walnut)", marginBottom: 16, lineHeight: 1.1 }}>{p.verb}</h3>
              <p style={{ fontSize: 15.5, lineHeight: 1.6, color: "var(--walnut-soft)" }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhoIsThisFor() {
  const categories = [
    { title: "You feel invisible", items: ["You smile in small group and cry in the car", "You're the strong one — and exhausted by it", "You take care of everyone but feel unseen yourself", "You've been overlooked your whole life and accepted it"] },
    { title: "You're stuck in patterns", items: ["Old relationships and old behaviors keep repeating", "You change your behavior but nothing inside changes", "You people-please even when it costs you everything", "You don't know who you are outside of what others need"] },
    { title: "You want real change", items: ["You're done with Bible studies that don't reach the wound", "You want to understand why — not just what to do differently", "You're ready to go back before the behavior", "You want a compassionate guide, not a critic"] },
    { title: "You're in a season of loss", items: ["Navigating a breakup, grief, or identity shift", "Burned by the church or a community you trusted", "Feeling disconnected from God and yourself", "Ready to start over with someone who's been there"] },
  ];
  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div style={{ marginBottom: 56 }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Client fit</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 72px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            Who this is{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>for.</span>
          </h2>
          <p style={{ marginTop: 16, fontSize: 17, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 680 }}>
            The Glass Heart is for women ages 25–45 who are done performing and ready to be genuinely, honestly seen.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--rule-strong)" }}>
          {categories.map((cat, i) => (
            <div key={i} style={{ padding: "40px 32px 48px", borderRight: i < 3 ? "1px solid var(--rule)" : "none" }}>
              <h3 className="display" style={{ fontSize: 22, fontWeight: 500, color: "var(--walnut)", marginBottom: 24, lineHeight: 1.15 }}>{cat.title}</h3>
              <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 14 }}>
                {cat.items.map((item, j) => (
                  <li key={j} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 15, lineHeight: 1.5, color: "var(--walnut-soft)" }}>
                    <DiamondMark size={7} color="var(--terracotta)" style={{ marginTop: 4, flexShrink: 0 }} /> {item}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CompareTable() {
  const rows = [
    { feature: "Session length", intensive: "60 min / week", circle: "60 min / week (group)", selfPaced: "At your own pace" },
    { feature: "Duration", intensive: "10 weeks", circle: "Cohort length", selfPaced: "5 weeks of content" },
    { feature: "Format", intensive: "1:1 private video", circle: "Small group video", selfPaced: "Self-paced audio" },
    { feature: "Breathwork & body work", intensive: "✦ Every session", circle: "✦ Included", selfPaced: "✦ Intro practices" },
    { feature: "Core wound & IFS work", intensive: "✦ Deep, personalized", circle: "✦ Guided as a group", selfPaced: "Framework introduction" },
    { feature: "Between-session support", intensive: "✦ Heart rhythms + practices", circle: "✦ Community between sessions", selfPaced: "Daily prompts" },
    { feature: "Enrollment", intensive: "Application required", circle: "Invitation only", selfPaced: "Always open" },
  ];
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div style={{ marginBottom: 48 }}>
          <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Compare options</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.6vw, 60px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            Find your{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>right door.</span>
          </h2>
        </div>
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "'Space Grotesk', sans-serif" }}>
            <thead>
              <tr style={{ borderBottom: "2px solid var(--rule-strong)" }}>
                <th style={{ textAlign: "left", padding: "16px 20px 16px 0", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--walnut-soft)", fontWeight: 500, width: "26%" }}>Feature</th>
                <th style={{ textAlign: "left", padding: "16px 20px", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--terracotta)", fontWeight: 600, background: "var(--walnut)", width: "26%" }}>Glass Heart Intensive</th>
                <th style={{ textAlign: "left", padding: "16px 20px", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--walnut-soft)", fontWeight: 500, width: "24%" }}>The Glass Circle</th>
                <th style={{ textAlign: "left", padding: "16px 20px", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--walnut-soft)", fontWeight: 500, width: "24%" }}>Uproot + Thrive</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row, i) => (
                <tr key={i} style={{ borderBottom: "1px solid var(--rule)" }}>
                  <td style={{ padding: "18px 20px 18px 0", fontSize: 14.5, color: "var(--walnut-soft)" }}>{row.feature}</td>
                  <td style={{ padding: "18px 20px", fontSize: 14.5, color: "var(--cream)", background: "var(--walnut)", fontWeight: row.intensive.startsWith("✦") ? 500 : 400 }}>{row.intensive}</td>
                  <td style={{ padding: "18px 20px", fontSize: 14.5, color: "var(--walnut-soft)" }}>{row.circle}</td>
                  <td style={{ padding: "18px 20px", fontSize: 14.5, color: "var(--walnut-soft)" }}>{row.selfPaced}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="work" />
      <main>
        <PageHero
          eyebrow="Work With Me"
          title="Three doorways."
          italic="One wholeness."
          subtitle="Whether you're ready for deep 1:1 work, a circle of women to walk with, or a first step at your own pace — there is a place for you here."
          verse="God has not given you a spirit of fear, but of power and of love and of a sound mind."
          verseRef="2 Timothy 1:7"
        />
        <Programs />
        <Methodology />
        <WhoIsThisFor />
        <CompareTable />
        <CTA
          eyebrow="✦ Not sure which is right?"
          headline="Book a free call"
          headlineItalic="and we'll find out together."
          checklist={[
            "What you're carrying and what you're hoping to put down",
            "Which program fits your season and your readiness",
            "What The Glass Heart Approach actually looks like in practice",
            "Whether working together is the right next step",
          ]}
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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