/* Work With Me — Christa Niering · Refined Life Coaching */
const { useState } = React;

const PROGRAMS = [
  {
    n: "01", icon: "flame", name: "The Refining Room", sub: "1:1 Coaching", tag: "The heart of my work",
    price: "By inquiry", commit: "Weekly · 5–15 wks",
    pitch: "The heart of everything I do. Just you and me, in a completely private and safe space, walking gently through what's hard — one hour at a time, at your pace. This is where the deep, personal healing happens.",
    inside: ["Weekly 1-hour sessions — choose 5, 10, or 15 weeks", "A completely private, one-on-one space (never a group)", "Each session opens with prayer and gentle emotional exploration", "Parts work, somatic awareness, and inner-child comfort", "Simple tools, practices, or homework between sessions", "Encouragement and reassurance you can carry with you"],
    cta: "Book a Free Conversation",
    featured: true,
  },
  {
    n: "02", icon: "butterfly", name: "The Sisterhood", sub: "A Small Circle", tag: "Opening soon",
    price: "Waitlist open", commit: "Monthly",
    pitch: "For the woman who is healing and longs for companionship — a small circle of sisters walking the same road. Not group therapy, and never a place to be exposed. Simply a soft space to be seen, encouraged, and reminded you are not alone.",
    inside: ["A small circle of women walking the same road", "Monthly gathering — connection, encouragement, and prayer", "A gentle place to be seen and reminded you're not alone", "Rooted in Luke 22:32 — strengthening one another", "Companionship alongside (never instead of) personal healing"],
    cta: "Join the Waitlist",
  },
  {
    n: "03", icon: "flame", name: "The First Thread", sub: "Self-Paced", tag: "Opening soon",
    price: "Coming soon", commit: "In your own time",
    pitch: "Not ready to talk yet? Start with a quiet set of reflections and simple practices you can hold on your own — a first thread of hope to follow whenever you're ready to reach for it. Grace-based, never a workbook to power through.",
    inside: ["Gentle written reflections and simple practices", "Begin any time and move at your own quiet pace", "A first thread of hope for when you're not ready to talk", "Grace-based — never a checklist to 'get through'", "A soft on-ramp to 1:1 whenever you're ready"],
    cta: "Get Notified",
  },
];

function ProgramIcon({ kind, color }) {
  return kind === "butterfly" ? <ButterflyMark size={28} color={color} /> : <FlameMark size={26} color={color} />;
}

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 }}>✦ Ways to begin</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            Gentle ways to{" "}
            <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>start healing.</span>
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720 }}>
            The deep work happens one-on-one, in The Refining Room. Two softer starting places are opening soon — for the woman who longs for companionship, or who isn't quite ready to talk yet. Every one of them moves at your pace, not mine.
          </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: "center", gap: 14, marginTop: 28 }}>
            <ProgramIcon kind={p.icon} color="var(--terracotta)" />
            <h3 className="display" style={{ fontSize: 38, 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(248,244,237,0.7)" : "var(--walnut-soft)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", borderBottom: p.featured ? "1px solid rgba(248,244,237,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 }}>Rhythm</span>
              <span className="grotesk">{p.commit}</span>
            </div>
          </div>
        </div>
        <div>
          <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 14 }}>What it looks like</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(248,244,237,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(248,244,237,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(248,244,237,0.65)" : "var(--walnut-soft)", lineHeight: 1.5 }}>
            Not sure where to start? <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" style={{ color: "var(--terracotta)", textDecoration: "underline" }}>Book a free conversation</a> and we'll find the right pace together — no pressure at all.
          </p>
        </div>
      </div>
    </article>
  );
}

function Phases() {
  const phases = [
    { v: "Uncover", s: "What's really here", b: "We open with prayer and simply notice what's surfacing for you today. No agenda — just kind, honest attention to what your heart has been carrying." },
    { v: "Connect", s: "Head to heart", b: "You can know you're loved and still not feel it. We slow down and let the knowing travel the distance, until what's true becomes something you can actually feel." },
    { v: "Comfort", s: "Tending the hurt parts", b: "We turn toward the tender, hurting parts of you — and the protectors keeping you safe — and bring them comfort. Often this reaches a younger you who's waited a long time." },
    { v: "Renew", s: "Rebuilding what you believe", b: "As the hurt is comforted, its lies lose their grip. We rebuild what you believe about yourself and God — from striving and shame to grace and belonging. The real you, refined." },
  ];
  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 Refining Path</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 76px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500 }}>
            How a session{" "}
            <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.6, color: "var(--walnut-soft)" }}>
            Every hour follows the same soft rhythm — beginning with emotional discovery, moving into head-to-heart connection, and settling into comfort and renewed belief. Never rushed. Always at your pace.
          </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, display: "flex", alignItems: "center", gap: 8 }}>0{i + 1} <FlameMark size={11} 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 one doing everything right", t: "Successful on the outside · empty on the inside", d: "You're a professional woman who's figured out much of your world — but your personal life is quietly falling apart. From the outside it looks handled. Inside, you feel empty, alone, and unhappy, and you can't understand why. This is exactly who I built this for." },
    { tag: "The one carrying grief or betrayal", t: "Stuck in a pain you can't seem to move past", d: "You're trying to heal from a loss, or from a betrayal that cut deeper than you let anyone see. You sense there's an emotional connection you need to make, and you're ready — you just don't know how to begin, or how to stop feeling stuck." },
    { tag: "The one who can't feel God", t: "Seeking Him · but unable to feel Him near", d: "You're reaching for God, reading, praying, showing up — and still can't feel Him or see Him working the way others seem to. You know in your head that He loves you. You just can't get it to reach your heart. We can close that distance together." },
    { tag: "The one who's 'over it' (but isn't)", t: "Sure you should be past this by now", d: "You tell yourself you should be over it. You feel like you're pretending, frustrated that you can't move forward, apologizing for everything — even when it isn't your fault. You are not behind, and you are not too much. You're simply ready to be met." },
  ];
  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{" "}
          <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>walk with most.</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.6, color: "var(--walnut-soft)" }}>{g.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Compare() {
  const rows = [
    ["Completely private & one-on-one", "✓", "—", "✓"],
    ["Live sessions with Christa", "Weekly", "Monthly", "—"],
    ["Personalized to your exact story", "Deeply", "Some", "General"],
    ["Parts work & inner-child comfort", "Every session", "Light", "Intro"],
    ["Prayer & emotional exploration", "✓", "✓", "Guided"],
    ["Companionship with other women", "—", "✓", "—"],
    ["Move at your own pace", "5–15 wks", "Ongoing", "Anytime"],
    ["Availability", "Open now", "Opening soon", "Opening soon"],
  ];
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Compare the 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 starting place.</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)" }}>What matters</div></th>
                {[["01", "The Refining Room"], ["02", "The Sisterhood"], ["03", "The First Thread"]].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="How We Work Together"
          title="This isn't therapy."
          italic="It's someone in the fire with you."
          subtitle="I'm not here to diagnose you or fix your behavior. I'm here to walk alongside you — to help you see what's impossible to see from inside the fire, and to gently remove what's keeping you from moving forward. The deep work is one-on-one, private, and always at your pace."
          verse="When you walk through the fire, you will not be burned; the flames will not set you ablaze."
          verseRef="Isaiah 43:2"
        />
        <Programs />
        <Phases />
        <ClientFit />
        <Compare />
        <CTA
          eyebrow="✦ No pressure, ever"
          headline="Let's find your"
          headlineItalic="starting place."
        />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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