/* WLC 1-Month Pass — focused checkout landing.
   Same 2D design system (Inter, navy + cream + gold). Short by design. */

/* ─── 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="/women-leaders-club">← Women Leaders Club</a>
        <a href="#pricing" className="nav-cta">Try for 1 Month →</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 · 1-Month Pass</span>
      </div>
      <h1 className="display fade-up" style={{ marginBottom: 32, maxWidth: "16ch" }}>
        Try the Club for one month before committing.
      </h1>
      <p className="lede fade-up" style={{ marginBottom: 0, maxWidth: "50ch", animationDelay: "120ms" }}>
        Join a single live <strong>Core Session</strong> and see what the Women Leaders Club feels like from the inside, before deciding whether to become a full member.
      </p>
    </div>
  </section>
);

/* ─── 02 What you get + What's not included ────────────────────────── */
const WhatsIncluded = () => (
  <section data-screen-label="02 Whats included" style={{ background: "var(--paper)" }}>
    <div className="wrap">
      <div className="eyebrow" style={{ marginBottom: 32 }}>
        <span className="num">02</span> What's included
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: "1.4fr 1fr",
        gap: 64,
        alignItems: "start",
      }} className="two-col">
        <div>
          <h2 className="h2" style={{ marginBottom: 32 }}>
            One live Core Session. The real thing.
          </h2>
          <p className="body" style={{ fontSize: 18, marginBottom: 24 }}>
            The Core Session is the heart of the Women Leaders Club. <strong>90 minutes</strong>, held on the 3rd Thursday of each month at 11:30 AM PT, live on Zoom.
          </p>
          <p className="body" style={{ fontSize: 18, marginBottom: 24 }}>
            You'll be coached, learn from other women being coached, and walk away with insights you can apply immediately.
          </p>
          <p className="body" style={{ fontSize: 18, marginBottom: 0 }}>
            It's the same room, the same coaching, the same teaching that full members experience every month, just for one session, with no commitment.
          </p>
        </div>

        <ul style={{
          listStyle: "none",
          padding: 0, margin: 0,
          borderTop: "1px solid var(--rule)",
        }}>
          <CompareRow included label="One live Core Session" sub="90 min · 3rd Thursday · 11:30 AM PT" />
          <CompareRow included label="Live coaching in the room" sub="Be coached or learn from others" />
          <CompareRow excluded label="No Slack community access" />
          <CompareRow excluded label="No session recording" />
          <CompareRow excluded label="No Q&A / Mastermind session" />
          <CompareRow excluded label="No ongoing membership" sub="One-time pass, no recurring charge" />
        </ul>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .two-col { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </div>
  </section>
);

const CompareRow = ({ included, excluded, label, sub, last }) => (
  <li style={{
    display: "grid",
    gridTemplateColumns: "28px 1fr",
    gap: 14,
    padding: "18px 0",
    borderBottom: "1px solid var(--rule)",
    alignItems: "baseline",
  }}>
    {included && (
      <span style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        width: 22, height: 22, borderRadius: "50%",
        background: "var(--accent)", color: "#fff",
        marginTop: 2,
      }}>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="20 6 9 17 4 12" />
        </svg>
      </span>
    )}
    {excluded && (
      <span style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        width: 22, height: 22, borderRadius: "50%",
        background: "transparent",
        border: "1.5px solid var(--ink-dim)",
        color: "var(--ink-dim)",
        marginTop: 2,
      }}>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
          <line x1="5" y1="5" x2="19" y2="19" />
          <line x1="19" y1="5" x2="5" y2="19" />
        </svg>
      </span>
    )}
    <div>
      <div style={{
        fontFamily: "var(--sans)",
        fontWeight: included ? 600 : 500,
        fontSize: 15,
        color: included ? "var(--ink)" : "var(--ink-soft)",
        letterSpacing: "-0.005em",
      }}>{label}</div>
      {sub && (
        <div className="meta" style={{ marginTop: 4 }}>{sub}</div>
      )}
    </div>
  </li>
);

/* ─── 04 Schedule (calendar only, agenda mode) ──────────────────────── */
const Schedule = () => (
  <section data-screen-label="04 Schedule" id="calendar">
    <div className="wrap">
      <div style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "flex-end",
        gap: 24,
        flexWrap: "wrap",
        marginBottom: 28,
      }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>
            <span className="num">04</span> Upcoming sessions
          </div>
          <h2 className="h2" style={{ maxWidth: "22ch" }}>
            See when the next Core Session lands.
          </h2>
        </div>
        <p className="meta" style={{ color: "var(--accent-deep)" }}>
          3rd Thursday of each month · 11:30 AM PT
        </p>
      </div>

      {/*
        GOOGLE CALENDAR EMBED (agenda mode) — replace the `src` URL below with
        your calendar's embed link. Use mode=AGENDA for the upcoming-list view.
      */}
      <div style={{
        background: "var(--paper)",
        border: "1px solid var(--rule)",
        borderRadius: 10,
        padding: 8,
        overflow: "hidden",
      }}>
        <iframe
          src="https://calendar.google.com/calendar/embed?src=c_ec8c2c813de676b275af15c8ab4f3feec70e315d4281d57f7e0f011ca7e3788b%40group.calendar.google.com&height=500&wkst=1&ctz=America%2FLos_Angeles&showPrint=0&showTabs=0&showCalendars=0&showTz=1&mode=AGENDA&title=Upcoming%20Core%20Sessions"
          style={{
            border: 0,
            width: "100%",
            height: 460,
            borderRadius: 6,
            display: "block",
          }}
          frameBorder="0"
          scrolling="no"
          title="Upcoming Core Sessions"
        />
      </div>
    </div>
  </section>
);

const PolicyRow = ({ title, body, first, last }) => (
  <li style={{
    display: "grid",
    gridTemplateColumns: "22px 1fr",
    gap: 14,
    padding: "18px 0",
    borderTop: first ? "none" : "1px solid var(--rule)",
    alignItems: "baseline",
  }}>
    <span style={{
      width: 6, height: 6, borderRadius: "50%",
      background: "var(--accent)",
      display: "inline-block",
      transform: "translateY(-2px)",
    }} />
    <div>
      <div style={{
        fontFamily: "var(--sans)",
        fontWeight: 600,
        fontSize: 16,
        color: "var(--ink)",
        letterSpacing: "-0.01em",
        marginBottom: 4,
      }}>{title}</div>
      <div style={{
        fontSize: 14.5,
        color: "var(--ink-soft)",
        lineHeight: 1.55,
      }}>{body}</div>
    </div>
  </li>
);

const WhyTry = () => (
  <section data-screen-label="03 Why try" style={{
    background: "var(--ink)",
    color: "var(--on-ink)",
  }}>
    <div className="wrap">
      <div className="eyebrow on-ink" style={{ marginBottom: 24 }}>
        <span className="num">03</span> Why try it first
      </div>
      <h2 className="h2" style={{ color: "var(--on-ink)", marginBottom: 56, maxWidth: "22ch" }}>
        The best way to know if the room is right for you, is to be in it.
      </h2>

      <ul style={{
        listStyle: "none",
        padding: 0, margin: 0,
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: 32,
      }} className="reasons-grid">
        <ReasonCard
          n="01"
          title="Feel the energy"
          body="Group coaching is a different animal than reading about it. One session tells you more than a brochure ever could."
        />
        <ReasonCard
          n="02"
          title="Meet the coach"
          body="See how Hojeong works, the questions she asks, the room she holds. Decide if her approach fits how you want to grow."
        />
        <ReasonCard
          n="03"
          title="Meet the room"
          body="Get a feel for the kind of women already inside. Honest, ambitious, generous with each other. See if it's your people."
        />
      </ul>

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

const ReasonCard = ({ n, title, body }) => (
  <li style={{
    paddingLeft: 18,
    borderLeft: "3px solid var(--accent)",
  }}>
    <span style={{
      fontFamily: "var(--sans)", fontWeight: 600, fontSize: 12,
      color: "var(--accent)", letterSpacing: "0.04em",
      display: "block", marginBottom: 14,
    }}>{n}</span>
    <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,
    }}>{body}</p>
  </li>
);

/* ─── 04 Pricing & CTA ──────────────────────────────────────────────── */
const Pricing = () => (
  <section id="pricing" data-screen-label="05 Pricing" style={{ paddingBottom: 120, background: "var(--paper)" }}>
    <div className="wrap">
      <div className="eyebrow" style={{ marginBottom: 24, justifyContent: "center" }}>
        <span className="num">05</span> Ready to try it
      </div>
      <h2 style={{
        fontFamily: "var(--sans)",
        fontWeight: 600,
        fontSize: "clamp(36px, 5vw, 64px)",
        lineHeight: 1.05,
        letterSpacing: "-0.035em",
        margin: 0, textAlign: "center", marginBottom: 56,
        color: "var(--ink)",
        maxWidth: "18ch",
        marginInline: "auto",
      }}>
        One session. One payment. No catch.
      </h2>

      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1.2fr",
        gap: 56,
        alignItems: "start",
        maxWidth: 1080,
        marginInline: "auto",
      }} className="pay-grid">
        {/* LEFT — policies (less noticeable, no card) */}
        <div>
          <div className="meta" style={{ color: "var(--accent-deep)", marginBottom: 16, display: "inline-flex", alignItems: "center", gap: 8 }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
              <line x1="12" y1="9" x2="12" y2="13"/>
              <line x1="12" y1="17" x2="12.01" y2="17"/>
            </svg>
            Please read before purchasing
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
            <PolicyRow
              first
              title="Core Session access only"
              body="This pass is valid for the upcoming Core Session only. Disregard any Q&A dates shown on the calendar."
            />
            <PolicyRow
              title="No refunds"
              body="Confirm the Core Session date and time work for your schedule before purchasing. All sales are final."
            />
            <PolicyRow
              title="One-time courtesy transfer"
              body="If you have an emergency, email us. We offer a one-time transfer to the next month's Core Session, but the pass expires after that."
            />
          </ul>
        </div>

        {/* RIGHT — pricing card (bigger, prominent) */}
        <div style={{
          border: "1px solid var(--rule)",
          borderLeft: "3px solid var(--accent)",
          background: "var(--bg)",
          borderRadius: 10,
          overflow: "hidden",
        }}>
          <div style={{ padding: "40px 40px 32px", textAlign: "center" }}>
            <div className="meta" style={{ color: "var(--accent-deep)", marginBottom: 14, justifyContent: "center", display: "inline-flex" }}>
              1-Month Pass
            </div>
            <div style={{
              fontFamily: "var(--sans)",
              fontSize: "clamp(48px, 7vw, 72px)",
              fontWeight: 600,
              lineHeight: 1,
              letterSpacing: "-0.04em",
              color: "var(--ink)",
            }}>
              $100<span style={{
                fontSize: 17,
                fontWeight: 500,
                color: "var(--ink-soft)",
                letterSpacing: 0,
                marginLeft: 6,
              }}>one-time</span>
            </div>
            <p style={{
              fontFamily: "var(--sans)",
              fontWeight: 400,
              fontSize: 15.5,
              lineHeight: 1.55,
              color: "var(--ink-soft)",
              margin: "16px auto 0",
              maxWidth: "40ch",
            }}>
              Includes a single live Core Session. Single payment, no recurring charge.
            </p>
          </div>

          <div style={{
            background: "var(--paper)",
            padding: "20px 40px",
            borderTop: "1px solid var(--rule)",
          }}>
            <a
              href="https://kimcoachinggroup.thrivecart.com/wlc-1-month-pass/"
              target="_blank"
              rel="noopener"
              className="btn"
              style={{ width: "100%", justifyContent: "center", fontSize: 16 }}
            >
              Try WLC for 1 Month <span className="arrow">→</span>
            </a>
            <p className="meta" style={{
              textAlign: "center", color: "var(--ink-dim)", marginTop: 14,
            }}>
              After your session, join the full membership if you want to continue
            </p>
          </div>
        </div>
      </div>

      <div style={{ textAlign: "center", marginTop: 40 }}>
        <a
          href="/women-leaders-club"
          className="ulink"
          style={{ fontSize: 14, fontWeight: 500, color: "var(--ink)" }}
        >
          See full membership details →
        </a>
      </div>

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

/* ─── 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 />
    <WhatsIncluded />
    <WhyTry />
    <Schedule />
    <Pricing />
    <Footer />
  </div>
);

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

/* Honor a #hash in the URL (e.g. arriving from an external link with
   #calendar). React renders async, so the browser's native jump fires
   before the target exists; re-run once the element is present and the
   layout settles. */
(function scrollToHashAfterRender() {
  const hash = window.location.hash;
  if (!hash || hash === "#top") return;

  let lastY = -1, stable = 0, tries = 0;
  const jump = () => {
    const el = document.querySelector(hash);
    if (!el) {
      if (tries++ < 60) requestAnimationFrame(jump);
      return;
    }
    const y = Math.max(0, el.getBoundingClientRect().top + window.pageYOffset - 64);
    window.scrollTo(0, y);
    const se = document.scrollingElement || document.documentElement;
    if (se) se.scrollTop = y;
    if (Math.abs(y - lastY) < 2) stable++; else stable = 0;
    lastY = y;
    if (stable < 3 && tries++ < 120) requestAnimationFrame(jump);
  };
  requestAnimationFrame(jump);
  window.addEventListener("load", () => { stable = 0; tries = 0; requestAnimationFrame(jump); });
})();