/* Women Leaders Club — single-page composition in the 2D system
   (Inter only, navy + cream + gold) */

/* ─── Nav ────────────────────────────────────────────────────────────── */
const Nav = () => (
  <nav className="nav">
    <div className="nav-inner">
      <a href="index.html" className="logo">
        <img src="img/kcg-logo.png" alt="" />
        <span className="wordmark">Kim Coaching Group</span>
      </a>
      <div className="nav-links">
        <a href="index.html">← Main site</a>
        <a href="#program">Program</a>
        <a href="#topics">2026 Topics</a>
        <a href="#pricing" className="nav-cta">Start Full Membership →</a>
      </div>
    </div>
  </nav>
);

/* ─── 01 Hero ───────────────────────────────────────────────────────── */
const Hero = () => (
  <section data-screen-label="01 Hero" style={{ paddingTop: 56 }}>
    <div className="wrap">
      <div className="eyebrow fade-up" style={{ marginBottom: 32 }}>
        <span><span className="num">01</span> Women Leaders Club</span>
      </div>
      <h1 className="display fade-up" style={{ marginBottom: 48, maxWidth: "16ch" }}>
        Where women stop settling and unlock thrilling possibilities.
      </h1>
      <div style={{
        display: "grid",
        gridTemplateColumns: "1.4fr 1fr",
        gap: 64,
        alignItems: "start",
      }} className="two-col">
        <div className="fade-up" style={{ animationDelay: "120ms" }}>
          <p className="lede" style={{ marginBottom: 24, maxWidth: "48ch" }}>
            A monthly community for accomplished women who are respected, well-paid, and successful in their current roles, but no longer fulfilled.
          </p>
          <p className="body" style={{ marginBottom: 20 }}>
            We guide women through the transition from feeling stuck in a role that no longer excites them, to creating and stepping into a dream career that reflects their full potential. Whether that means expanding scope, shifting direction, or building something entirely their own.
          </p>
          <p className="body" style={{ marginBottom: 0 }}>
            <strong>You've already proven what you're capable of. Now it's time to create what's next.</strong>
          </p>
        </div>

        <div className="fade-up" style={{ animationDelay: "200ms" }}>
          <div style={{
            background: "var(--paper)",
            border: "1px solid var(--rule)",
            borderLeft: "3px solid var(--accent)",
            borderRadius: 10,
            padding: 28,
            position: "sticky",
            top: 100,
          }}>
            <div className="meta" style={{ color: "var(--accent-deep)", marginBottom: 16 }}>
              Try it for one month
            </div>
            <p style={{
              fontFamily: "var(--sans)",
              fontWeight: 500,
              fontSize: 19,
              lineHeight: 1.4,
              color: "var(--ink)",
              margin: 0, marginBottom: 10,
              letterSpacing: "-0.015em",
            }}>
              Join a single month before committing.
            </p>
            <p style={{
              fontFamily: "var(--sans)",
              fontWeight: 400,
              fontSize: 14.5,
              lineHeight: 1.55,
              color: "var(--ink-soft)",
              margin: 0, marginBottom: 22,
            }}>
              Get a real feel for the room, the work, and the women in it. Then decide.
            </p>
            <a
              href="/wlc-1-month-pass"
              className="btn"
              style={{ width: "100%", justifyContent: "space-between" }}
            >
              Try WLC for 1 Month <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .two-col { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </div>
  </section>
);

/* ─── 02 Who this is for ─────────────────────────────────────────────── */
const WhoFor = () => (
  <section data-screen-label="02 Who" style={{ background: "var(--paper)" }}>
    <div className="wrap">
      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1.4fr",
        gap: 80,
        alignItems: "start",
      }} className="two-col">
        <div style={{ position: "sticky", top: 100 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>
            <span className="num">02</span> Who this is for
          </div>
          <h2 className="h2">
            For women who have already made it, and know they're meant for more.
          </h2>
        </div>
        <div>
          <p className="body" style={{ fontSize: 18, marginBottom: 24 }}>
            This club is for women who have already achieved a great deal. <strong>You are trusted, respected, and known for getting things done.</strong> You've worked hard to build your career, and by most standards, you've made it.
          </p>
          <p className="body" style={{ fontSize: 18, marginBottom: 24 }}>
            But beneath the surface, you feel a pull for something more. You want to grow, to stretch into a bigger or different scope.
          </p>
          <p className="body" style={{ fontSize: 18, marginBottom: 24 }}>
            And yet, ironically, the very success you've built makes it harder to pursue something new. Letting go of a role where you are valued and secure can feel risky, especially when people around you say things like, <span style={{ color: "var(--ink)", fontWeight: 500 }}>"You're all set,"</span> or <span style={{ color: "var(--ink)", fontWeight: 500 }}>"Why would you leave such a great job?"</span>
          </p>
          <p className="body" style={{ fontSize: 18, marginBottom: 0 }}>
            You've tried to convince yourself you should be satisfied. But the frustration keeps coming back. So does the desire for change. <strong>This club is for those ready to honor that desire and step into what's next.</strong>
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ─── 03 What we offer ───────────────────────────────────────────────── */
const WhatWeOffer = () => (
  <section data-screen-label="03 What we offer">
    <div className="wrap">
      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1.4fr",
        gap: 80,
        alignItems: "start",
      }} className="two-col">
        <div style={{ position: "sticky", top: 100 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>
            <span className="num">03</span> What we offer
          </div>
          <h2 className="h2">
            A transformative experience, built around your own answers.
          </h2>
        </div>
        <div>
          <p className="body" style={{ fontSize: 18, marginBottom: 24 }}>
            We offer a transformative experience that supports high-achieving women in their journey toward something more.
          </p>
          <p className="body" style={{ fontSize: 18, marginBottom: 24 }}>
            Through a blend of <strong>coaching, teaching, and peer support</strong>, we help you gain clarity about what you truly want, spark creative ideas for what's possible, and build the courage to take meaningful action.
          </p>
          <p className="body" style={{ fontSize: 18, marginBottom: 0 }}>
            You won't be handed a rigid plan. You'll be supported in uncovering your own answers, with a community and structure that helps you keep moving forward.
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ─── 04 Why it's important ──────────────────────────────────────────── */
const WhyItMatters = () => (
  <section data-screen-label="04 Why it matters" style={{ background: "var(--paper)" }}>
    <div className="wrap">
      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1.4fr",
        gap: 80,
        alignItems: "start",
      }} className="two-col">
        <div style={{ position: "sticky", top: 100 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>
            <span className="num">04</span> Why it matters
          </div>
          <h2 className="h2">
            The methods that got you here aren't enough to take you there.
          </h2>
        </div>
        <div>
          <p className="body" style={{ fontSize: 18, marginBottom: 24 }}>
            Most high-achieving women are still using the methods that have always worked for them. But eventually, those methods stop being enough. You hit a wall, and without the right kind of support, you try to figure it out alone.
          </p>
          <p className="body" style={{ fontSize: 18, marginBottom: 24 }}>
            When your efforts don't yield results, frustration turns into self-doubt. You begin to question whether your dreams are realistic, whether you're asking for too much, whether you should just stay where you are.
          </p>
          <p className="body" style={{ fontSize: 18, marginBottom: 0 }}>
            But the desire for more doesn't go away. <strong>Without the right guidance and community, you risk staying stuck, not because you lack ability, but because you lack the support to grow in a new direction.</strong>
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ─── 05 The Program (navy inverted + Google Calendar embed) ────────── */
const Program = () => (
  <section id="program" data-screen-label="05 The program" style={{
    background: "var(--ink)",
    color: "var(--on-ink)",
  }}>
    <div className="wrap">
      <div className="eyebrow on-ink" style={{ marginBottom: 24 }}>
        <span className="num">05</span> The program
      </div>
      <h2 className="h2" style={{ color: "var(--on-ink)", marginBottom: 24, maxWidth: "20ch" }}>
        Two live sessions a month. A community in between.
      </h2>
      <p style={{
        fontFamily: "var(--sans)",
        fontWeight: 400,
        fontSize: 18,
        lineHeight: 1.6,
        color: "var(--on-ink-soft)",
        margin: 0, marginBottom: 56,
        maxWidth: "60ch",
      }}>
        We facilitate two powerful group sessions each month. One focused on coaching and learning. The other a live Q&A and mastermind. Together, we create a space that's both strategic and deeply <span style={{ color: "var(--accent)", fontWeight: 500 }}>human</span>.
      </p>

      {/* Sessions + support as a unified list */}
      <ul style={{
        listStyle: "none",
        padding: 0, margin: 0, marginBottom: 56,
        borderTop: "1px solid var(--on-ink-rule)",
      }}>
        <SessionListRow
          n="01"
          tag="Core Session"
          title="Coaching + teaching"
          duration="90 minutes"
          schedule="3rd Thursday · 11:30 AM PT"
          body="A live session where you'll be coached, learn from others being coached, and walk away with insights you can apply immediately."
        />
        <SessionListRow
          n="02"
          tag="Q&A + Mastermind"
          title="Ask. Share. Get unstuck."
          duration="60 minutes"
          schedule="4th Thursday · 12:00 PM PT"
          body="Bring a challenge or question. Get support, ideas, and perspectives from fellow members who understand what you're going through."
        />
        <SessionListRow
          n="03"
          tag="Between sessions"
          title="Private Slack community"
          schedule="Active throughout the month"
          body="For questions, idea exchange, and connection between sessions with the rest of the room."
        />
        <SessionListRow
          n="04"
          tag="Between sessions"
          title="Recordings of every session"
          schedule="Lifetime access while a member"
          body="Revisit insights anytime. Catch up on a session you missed."
        />
      </ul>

      {/* Google Calendar embed */}
      <div>
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "baseline",
          gap: 20,
          flexWrap: "wrap",
          marginBottom: 20,
        }}>
          <h3 style={{
            fontFamily: "var(--sans)",
            fontWeight: 600,
            fontSize: "clamp(20px, 2vw, 26px)",
            lineHeight: 1.2,
            letterSpacing: "-0.02em",
            margin: 0,
            color: "var(--on-ink)",
          }}>Upcoming sessions.</h3>
          <p className="meta" style={{ color: "var(--accent)" }}>
            Active members receive calendar invites with Zoom info
          </p>
        </div>

        {/*
          GOOGLE CALENDAR EMBED — replace `src` below with your calendar's embed URL.

          To get the URL:
            1. Open Google Calendar → Settings (gear icon) → Settings for my calendars
            2. Pick the calendar → "Integrate calendar" → copy the "Public URL to this calendar"
               (or the "Embed code" — paste the `src` value here)
            3. Make sure the calendar is set to "Make available to public" if you want it visible
               to non-logged-in users
        */}
        <div style={{
          background: "var(--paper)",
          border: "1px solid var(--on-ink-rule)",
          borderLeft: "3px solid var(--accent)",
          borderRadius: 10,
          padding: 8,
          overflow: "hidden",
        }}>
          <iframe
            src="https://calendar.google.com/calendar/embed?src=c_ec8c2c813de676b275af15c8ab4f3feec70e315d4281d57f7e0f011ca7e3788b%40group.calendar.google.com&height=600&wkst=1&ctz=America%2FLos_Angeles&showPrint=0&showTabs=1&showCalendars=0&showTz=1&mode=MONTH&title=Women%20Leaders%20Club"
            style={{
              border: 0,
              width: "100%",
              height: 600,
              borderRadius: 6,
              display: "block",
            }}
            frameBorder="0"
            scrolling="no"
            title="Women Leaders Club calendar"
          />
        </div>
      </div>

      <style>{`
        @media (max-width: 760px) {
          .program-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
          .session-row { grid-template-columns: 44px 1fr !important; }
          .session-row .session-meta { text-align: left !important; grid-column: 2 / 3 !important; margin-top: 8px !important; }
        }
      `}</style>
    </div>
  </section>
);

const SessionListRow = ({ n, tag, title, duration, schedule, body }) => (
  <li style={{
    display: "grid",
    gridTemplateColumns: "56px 1fr auto",
    gap: 32,
    padding: "24px 0",
    borderBottom: "1px solid var(--on-ink-rule)",
    alignItems: "baseline",
  }} className="session-row">
    <span style={{
      fontFamily: "var(--sans)",
      fontWeight: 600,
      fontSize: 12,
      color: "var(--accent)",
      letterSpacing: "0.04em",
      paddingTop: 4,
    }}>{n}</span>
    <div>
      <div style={{
        display: "flex", alignItems: "baseline", gap: 12,
        marginBottom: 8, flexWrap: "wrap",
      }}>
        <h3 style={{
          fontFamily: "var(--sans)",
          fontWeight: 600,
          fontSize: 20,
          lineHeight: 1.25,
          letterSpacing: "-0.015em",
          color: "var(--on-ink)",
          margin: 0,
        }}>{title}</h3>
        <span className="meta" style={{ color: "var(--on-ink-dim)" }}>{tag}</span>
      </div>
      <p style={{
        fontSize: 15,
        lineHeight: 1.6,
        color: "var(--on-ink-soft)",
        margin: 0,
        maxWidth: "56ch",
      }}>{body}</p>
    </div>
    <div style={{
      textAlign: "right",
      paddingTop: 4,
    }} className="session-meta">
      {duration && (
        <div className="meta" style={{ color: "var(--accent)", marginBottom: 4 }}>
          {duration}
        </div>
      )}
      <div className="meta" style={{ color: "var(--on-ink-dim)" }}>
        {schedule}
      </div>
    </div>
  </li>
);

const SessionRow = ({ n, tag, title, duration, schedule, body }) => (
  <div style={{ paddingLeft: 18, borderLeft: "3px solid var(--accent)" }}>
    <div style={{
      display: "flex", alignItems: "baseline", gap: 12,
      marginBottom: 16,
    }}>
      <span style={{
        fontFamily: "var(--sans)", fontWeight: 600, fontSize: 12,
        color: "var(--accent)", letterSpacing: "0.04em",
      }}>{n}</span>
      <span className="meta" style={{ color: "var(--on-ink-soft)" }}>{tag}</span>
    </div>
    <h3 style={{
      fontFamily: "var(--sans)",
      fontWeight: 600,
      fontSize: 22,
      lineHeight: 1.2,
      letterSpacing: "-0.02em",
      color: "var(--on-ink)",
      margin: 0, marginBottom: 12,
    }}>{title}</h3>
    <p style={{
      fontSize: 15,
      lineHeight: 1.6,
      color: "var(--on-ink-soft)",
      margin: 0, marginBottom: 20,
    }}>{body}</p>
    <div style={{
      display: "flex",
      gap: 16,
      flexWrap: "wrap",
    }}>
      <span className="meta" style={{ color: "var(--accent)" }}>{duration}</span>
      <span className="meta" style={{ color: "var(--on-ink-dim)" }}>{schedule}</span>
    </div>
  </div>
);

const SupportRow = ({ title, body }) => (
  <div>
    <div style={{
      fontFamily: "var(--sans)",
      fontWeight: 600,
      fontSize: 17,
      color: "var(--on-ink)",
      letterSpacing: "-0.01em",
      marginBottom: 6,
    }}>{title}</div>
    <div style={{
      fontSize: 14,
      color: "var(--on-ink-soft)",
      lineHeight: 1.55,
    }}>{body}</div>
  </div>
);

/* ─── 06 How it makes your life better ───────────────────────────────── */
const LifeBetter = () => (
  <section data-screen-label="07 What changes">
    <div className="wrap">
      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1.4fr",
        gap: 80,
        alignItems: "start",
      }} className="two-col">
        <div style={{ position: "sticky", top: 100 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>
            <span className="num">07</span> What changes
          </div>
          <h2 className="h2">
            Real progress. On your own terms. With a powerful network around you.
          </h2>
        </div>
        <div>
          <p className="body" style={{ fontSize: 18, marginBottom: 24 }}>
            With the right strategy for where you are now, and a strong support system behind you, you can move forward with clarity and confidence. <strong>You'll stop feeling like you're wasting your potential or second-guessing your desires.</strong>
          </p>
          <p className="body" style={{ fontSize: 18, marginBottom: 24 }}>
            Instead, you'll take bold, grounded action toward the career you truly want, and see real progress along the way. You don't have to settle for "good enough." You can have meaningful, exciting, fulfilling work, on your own terms.
          </p>
          <p className="body" style={{ fontSize: 18, marginBottom: 0 }}>
            And you won't do it alone. You'll be surrounded by a powerful network of women walking the same journey, cheering you on, sharing wisdom, and growing alongside you.
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ─── 07 2026 Topics ─────────────────────────────────────────────────── */
const Topics = () => {
  const topics = [
    { month: "January",   title: "Discover Your Hidden Strengths",
      desc: "Uncover the strengths and achievements that tell your real story. Walk away with the words and confidence to communicate your value with clarity and pride." },
    { month: "February",  title: "Create Agreements, Not Expectations",
      desc: "Move from unspoken expectations to clear, shared agreements that build trust and reduce misunderstandings. Smoother collaboration, more honest communication, more effective leadership." },
    { month: "March",     title: "Dream Big: Your Two-Year Vision",
      desc: "Give yourself permission to dream without limitations. Design a vivid picture of what life could look like two years from now, with clarity that turns the dream into daily direction." },
    { month: "April",     title: "Recognize Your Imposter Cycle",
      desc: "Identify how self-doubt creeps in, what triggers it, and how the imposter cycle keeps you playing small. Learn to see it for what it is: just a pattern." },
    { month: "May",       title: "Break the Imposter Cycle",
      desc: "Quiet the inner critic and replace it with a voice that supports you. Tools to reset your mindset in the moment so you can lead, decide, and act with calm assurance." },
    { month: "June",      title: "Raise Your Voice",
      desc: "Practice exactly what to do and say when staying silent would teach others they can disregard you. Build the muscle to protect your integrity, without feeling confrontational or rude." },
    { month: "July",      title: "Networking for Success",
      desc: "Connect with purpose. Know who to reach, what to offer, and how to build authentic relationships that create opportunity, whether you're exploring new roles or growing where you are." },
    { month: "August",    title: "Energy Audit",
      desc: "Identify where your limits are crossed, clarify your non-negotiables, and practice clear, kind language to say no, reset expectations, and renegotiate without guilt." },
    { month: "September", title: "Momentum Check-In: Keep Moving Toward Your Vision",
      desc: "Refocus on what matters most when everything feels urgent. Build a one-page Momentum Map and a repeatable system to keep your progress steady, month after month." },
    { month: "October",   title: "Outrageous October",
      desc: "Take small, bold actions that make big ripples. Each risk builds courage and proof that you're capable of far more than you thought. By the end, not just brave: unstoppable." },
    { month: "November",  title: "Build Structure for Success",
      desc: "Simple systems that make progress consistent, not chaotic. Structure that protects your time, energy, and focus, so you can grow sustainably without burning out." },
    { month: "December",  title: "Time Mastery",
      desc: "Uncover why your time feels scarce, find where to create it, and leave with a personal plan to keep your key priorities front and center." },
  ];

  return (
    <section id="topics" data-screen-label="06 Topics" style={{ background: "var(--paper)" }}>
      <div className="wrap">
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-end",
          marginBottom: 56,
          gap: 32,
          flexWrap: "wrap",
        }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              <span className="num">06</span> 2026 Topics
            </div>
            <h2 className="h2" style={{ maxWidth: "18ch" }}>
              A year of work, mapped month by month.
            </h2>
          </div>
          <p className="body" style={{ maxWidth: "32ch", margin: 0 }}>
            Each session pairs a teaching with live coaching. Members get the recording, the worksheet, and the room.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 0,
          borderTop: "1px solid var(--rule)",
        }} className="topics-grid">
          {topics.map((t, i) => (
            <div key={i} style={{
              padding: "28px 24px",
              borderLeft: i % 3 !== 0 ? "1px solid var(--rule)" : "none",
              borderBottom: "1px solid var(--rule)",
              display: "flex",
              flexDirection: "column",
              gap: 12,
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <span style={{
                  fontFamily: "var(--sans)",
                  fontWeight: 600,
                  fontSize: 12,
                  color: "var(--accent-deep)",
                  letterSpacing: "0.04em",
                  textTransform: "uppercase",
                }}>
                  {String(i + 1).padStart(2, "0")} · {t.month}
                </span>
              </div>
              <h3 style={{
                fontFamily: "var(--sans)",
                fontWeight: 600,
                fontSize: 19,
                lineHeight: 1.2,
                letterSpacing: "-0.02em",
                margin: 0,
                color: "var(--ink)",
              }}>{t.title}</h3>
              <p style={{
                fontSize: 14,
                lineHeight: 1.55,
                color: "var(--ink-soft)",
                margin: 0,
              }}>{t.desc}</p>
            </div>
          ))}
        </div>

        <style>{`
          @media (max-width: 900px) {
            .topics-grid { grid-template-columns: repeat(2, 1fr) !important; }
            .topics-grid > div:nth-child(2n+1) { border-left: none !important; }
            .topics-grid > div:nth-child(2n) { border-left: 1px solid var(--rule) !important; }
          }
          @media (max-width: 600px) {
            .topics-grid { grid-template-columns: 1fr !important; }
            .topics-grid > div { border-left: none !important; }
          }
        `}</style>
      </div>
    </section>
  );
};

/* ─── 08 Pricing & CTA ──────────────────────────────────────────────── */
const Pricing = () => (
  <section id="pricing" data-screen-label="08 Pricing" style={{ paddingBottom: 120 }}>
    <div className="wrap">
      <div className="eyebrow" style={{ marginBottom: 24, justifyContent: "center" }}>
        <span className="num">08</span> Join the club
      </div>
      <h2 style={{
        fontFamily: "var(--sans)",
        fontWeight: 600,
        fontSize: "clamp(36px, 5vw, 64px)",
        lineHeight: 1.05,
        letterSpacing: "-0.035em",
        margin: 0, textAlign: "center", marginBottom: 24,
        color: "var(--ink)",
        maxWidth: "20ch",
        marginInline: "auto",
      }}>
        Ready to step into what's next?
      </h2>
      <p className="body" style={{
        textAlign: "center", marginInline: "auto", marginBottom: 56,
        maxWidth: "56ch", fontSize: 17,
      }}>
        Two ways to join. Pick the one that fits where you are right now.
      </p>

      {/* Two equal pricing cards */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 24,
        marginBottom: 28,
      }} className="pricing-grid">
        <PriceCard
          tag="Full Membership"
          price="$150"
          per="/month"
          tagline="For when you're ready to commit to the work. Monthly or annual."
          features={[
            "All Core + Q&A sessions, every month",
            "Private Slack community access",
            "Recordings of every session",
            "Rate locked as long as you remain a member",
            "Cancel anytime, no long-term commitment",
          ]}
          ctaLabel="Start Full Membership"
          ctaHref="https://kimcoachinggroup.thrivecart.com/women-leaders-club-membership/"
          ctaPrimary
        />
        <PriceCard
          tag="1-month pass"
          price="$100"
          per=" one-time"
          tagline="Get a real feel for the room before committing."
          features={[
            "One live Core Session (90 min)",
            "No Slack or recordings",
            "Single payment, no commitment",
            "Decide whether to continue after",
          ]}
          ctaLabel="Try WLC for 1 Month"
          ctaHref="WLC 1-Month Pass.html"
        />
      </div>

      <p className="meta" style={{
        textAlign: "center",
        color: "var(--ink-dim)",
        maxWidth: "56ch",
        marginInline: "auto",
        display: "none",
      }}>
      </p>

      <style>{`
        @media (max-width: 760px) {
          .pricing-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  </section>
);

const PriceCard = ({ tag, price, per, tagline, features, ctaLabel, ctaHref, ctaPrimary }) => (
  <article style={{
    background: "var(--paper)",
    border: "1px solid var(--rule)",
    borderLeft: "3px solid var(--accent)",
    borderRadius: 10,
    padding: 32,
    display: "flex",
    flexDirection: "column",
    minHeight: 360,
  }}>
    <div className="meta" style={{ color: "var(--accent-deep)", marginBottom: 14 }}>
      {tag}
    </div>
    <div style={{
      fontFamily: "var(--sans)",
      fontSize: 40,
      fontWeight: 600,
      lineHeight: 1,
      letterSpacing: "-0.03em",
      color: "var(--ink)",
      marginBottom: 12,
    }}>
      {price}{per && (
        <span style={{
          fontSize: 17, fontWeight: 500,
          color: "var(--ink-soft)", letterSpacing: 0, marginLeft: 4,
        }}>{per}</span>
      )}
    </div>
    <p style={{
      fontFamily: "var(--sans)",
      fontWeight: 400,
      fontSize: 15,
      lineHeight: 1.55,
      color: "var(--ink-soft)",
      margin: 0, marginBottom: 24,
    }}>{tagline}</p>
    <ul style={{ listStyle: "none", padding: 0, margin: 0, marginBottom: 28, flex: 1 }}>
      {features.map((f, i) => (
        <li key={i} style={{
          display: "grid",
          gridTemplateColumns: "16px 1fr",
          gap: 12,
          padding: "8px 0",
          alignItems: "baseline",
        }}>
          <span style={{
            width: 5, height: 5, borderRadius: "50%",
            background: "var(--accent)",
            display: "inline-block",
            transform: "translateY(-2px)",
          }} />
          <span style={{
            fontSize: 14,
            lineHeight: 1.55,
            color: "var(--ink-soft)",
          }}>{f}</span>
        </li>
      ))}
    </ul>
    {ctaPrimary ? (
      <a
        href={ctaHref}
        {...(/^https?:/.test(ctaHref) ? { target: "_blank", rel: "noopener" } : {})}
        className="btn"
        style={{ width: "100%", justifyContent: "space-between" }}
      >
        {ctaLabel} <span className="arrow">→</span>
      </a>
    ) : (
      <a
        href={ctaHref}
        {...(/^https?:/.test(ctaHref) ? { target: "_blank", rel: "noopener" } : {})}
        className="btn"
        style={{
          width: "100%",
          justifyContent: "space-between",
          background: "transparent",
          color: "var(--ink)",
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.background = "var(--ink)";
          e.currentTarget.style.color = "#fff";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.background = "transparent";
          e.currentTarget.style.color = "var(--ink)";
        }}
      >
        {ctaLabel} <span className="arrow">→</span>
      </a>
    )}
  </article>
);

/* ─── Footer ─────────────────────────────────────────────────────────── */
const Footer = () => (
  <footer>
    <div className="wrap">
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "baseline",
        gap: 32, flexWrap: "wrap", marginBottom: 48,
      }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
            <img src="img/kcg-logo-white.png" alt="" style={{
              width: 36, height: 36, objectFit: "contain",
            }} />
            <span style={{
              fontFamily: "var(--sans)", fontWeight: 600, fontSize: 16,
              letterSpacing: "-0.015em", color: "var(--on-ink)",
            }}>Kim Coaching Group</span>
          </div>
          <div className="meta" style={{ color: "var(--on-ink-dim)" }}>
            Executive leadership coaching for the chapter you've been postponing.
          </div>
        </div>
        <a href="mailto:info@KimCoachingGroup.com" className="ulink" style={{ fontSize: 14 }}>
          info@KimCoachingGroup.com
        </a>
      </div>
      <div style={{ height: 1, background: "var(--on-ink-rule)", marginBottom: 20 }} />
      <div className="meta" style={{
        display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16,
        color: "var(--on-ink-dim)",
      }}>
        <span>© 2026 Kim Coaching Group · All rights reserved</span>
        <span>Hojeong Kim, PhD · CPC · ACC</span>
      </div>
    </div>
  </footer>
);

/* ─── App ────────────────────────────────────────────────────────────── */
const App = () => (
  <div id="top">
    <Nav />
    <Hero />
    <WhoFor />
    <WhatWeOffer />
    <WhyItMatters />
    <Program />
    <Topics />
    <LifeBetter />
    <Pricing />
    <Footer />
  </div>
);

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