/* Offerings — 1:1, Women Leaders Club, Career Changer (coming soon), Starter pair */

const Offerings = () => (
  <section id="offerings">
    <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">D</span>How we work together
          </div>
          <h2 className="h2" style={{ margin: 0, maxWidth: "14ch" }}>
            Three ways to <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>begin</em>.
          </h2>
        </div>
        <p className="body" style={{ maxWidth: "32ch", margin: 0 }}>
          Each engagement is shaped around your goals, your energy, and the chapter you're stepping into.
        </p>
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: 24,
      }} className="three-col">
        <OfferingCard
          num="01"
          title="Private 1:1 Coaching"
          subtitle="Personal · Strategic · Confidential"
          body="Highly personalized coaching, shaped to where you are and what you need. Together we land the bigger role, navigate the transition, or work through the conversation you've been postponing — while protecting your energy and wellbeing."
          meta={["Weekly, bi-weekly, or monthly", "60 min sessions · over Zoom", "Engagement length tailored to you"]}
          cta="Book the First Two"
          href="#starter"
        />
        <OfferingCard
          num="02"
          title="Women Leaders Club"
          subtitle="Group coaching · Live monthly"
          body="For accomplished women leaders who can feel alone in the journey. A monthly space to learn, be coached, and support one another through the challenges women leaders share — strategy, voice, boundaries, ambition. For women already established in their careers."
          meta={["2 live sessions per month", "Private Slack community", "Recordings & topic library"]}
          cta="Join the Club"
          href="#wlc"
        />
        <OfferingCard
          num="03"
          title="Career Changer Intensive"
          subtitle="Group cohort program"
          body="An 8-week group program for senior professionals making a deliberate career change. We teach, practice, and give feedback on the key moves that make career change actually work — positioning, narrative, networking, decision-making. Starting October."
          meta={["8 weeks · starting October", "Live group sessions over Zoom", "Practice + structured feedback"]}
          cta="More details coming in July"
          href="#waitlist"
          stamp="Coming Soon"
        />
      </div>

      <StarterStripe />
    </div>
  </section>
);

const OfferingCard = ({ num, title, subtitle, body, meta, cta, href, stamp }) => (
  <article className="card" style={{
    display: "flex", flexDirection: "column",
    minHeight: 520,
    position: "relative",
  }}>
    {stamp && (
      <div className="stamp" style={{
        position: "absolute",
        top: 24, right: 24,
      }}>
        ✦ {stamp}
      </div>
    )}
    <div style={{
      display: "flex",
      alignItems: "baseline",
      gap: 12,
      marginBottom: 36,
    }}>
      <span className="mono" style={{
        fontSize: 11,
        color: "var(--accent-deep)",
        letterSpacing: "0.14em",
      }}>{num}</span>
      <span className="mono" style={{
        fontSize: 11,
        color: "var(--ink-dim)",
        letterSpacing: "0.14em",
        textTransform: "uppercase",
      }}>{subtitle}</span>
    </div>

    <h3 className="h3" style={{ margin: 0, marginBottom: 20 }}>
      {title}
    </h3>

    <p className="body" style={{ fontSize: 15, marginBottom: 32, flex: 1 }}>
      {body}
    </p>

    <ul style={{ listStyle: "none", padding: 0, margin: 0, marginBottom: 32 }}>
      {meta.map((m, i) => (
        <li key={i} className="mono" style={{
          fontSize: 11,
          textTransform: "uppercase",
          letterSpacing: "0.14em",
          color: "var(--ink-soft)",
          padding: "10px 0",
          borderTop: "1px solid var(--rule-soft)",
          display: "flex",
          alignItems: "center",
          gap: 10,
        }}>
          <span style={{
            width: 4, height: 4, borderRadius: "50%",
            background: "var(--accent-deep)",
          }} />
          {m}
        </li>
      ))}
    </ul>

    <a href={href} className="ulink" style={{
      fontFamily: "var(--sans)",
      fontWeight: 500,
      fontSize: 14,
      display: "inline-flex",
      alignItems: "center",
      gap: 8,
      alignSelf: "flex-start",
    }}>
      {cta} <span>→</span>
    </a>
  </article>
);

/* Starter pair — primary CTA, full-width feature */
const StarterStripe = () => (
  <div id="starter" style={{
    marginTop: 48,
    border: "1px solid var(--ink)",
    background: "var(--paper)",
    padding: 48,
    display: "grid",
    gridTemplateColumns: "1fr 1fr",
    gap: 56,
    alignItems: "center",
  }} className="two-col">
    <div>
      <div className="chip" style={{ marginBottom: 24 }}>
        <span className="dot-sm" /> The First Two · For new clients only
      </div>
      <h3 style={{
        fontFamily: "var(--serif)",
        fontSize: "clamp(28px, 3.5vw, 44px)",
        lineHeight: 1.05,
        letterSpacing: "-0.02em",
        margin: 0, marginBottom: 16,
        fontWeight: 400,
      }}>
        Two sessions to feel what coaching <em style={{ color: "var(--accent-deep)", fontStyle: "italic" }}>actually does</em>.
      </h3>
      <p className="body" style={{ marginBottom: 16 }}>
        Ready to move from reflection into action? Start with one exploration session and one coaching session — at a special rate for new clients.
      </p>
      <p className="body" style={{ marginBottom: 0 }}>
        Afterwards, the choice is fully yours: you may already have what you came for, or want to continue 1:1, or join the Women Leaders Club. <strong>No pressure to keep going</strong> — just an honest place to begin.
      </p>
    </div>
    <div>
      <ol style={{ listStyle: "none", padding: 0, margin: 0, marginBottom: 32 }}>
        {[
          ["01", "Exploration", "We map where you are, what you want, and what's in the way."],
          ["02", "Coaching", "A real session — the work, the breakthrough, the next concrete step."],
        ].map(([n, t, d], i) => (
          <li key={n} style={{
            display: "grid",
            gridTemplateColumns: "48px 1fr",
            gap: 16,
            padding: "20px 0",
            borderTop: "1px solid var(--rule)",
            borderBottom: i === 1 ? "1px solid var(--rule)" : "none",
          }}>
            <span className="mono" style={{
              fontSize: 11,
              color: "var(--accent-deep)",
              letterSpacing: "0.14em",
            }}>{n}</span>
            <div>
              <div style={{
                fontFamily: "var(--serif)",
                fontSize: 20,
                lineHeight: 1.2,
                marginBottom: 4,
              }}>{t}</div>
              <div style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.5 }}>{d}</div>
            </div>
          </li>
        ))}
      </ol>
      <a href="https://tidycal.com/kcg/starter-package" target="_blank" rel="noopener" className="btn" style={{ width: "100%", justifyContent: "space-between" }}>
        Book the First Two <span className="arrow">→</span>
      </a>
    </div>
    <style>{`
      @media (max-width: 760px) {
        .two-col { grid-template-columns: 1fr !important; gap: 40px !important; }
        .three-col { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </div>
);

window.Offerings = Offerings;
