/* Offerings — three cards with gold spine + Starter feature */

const Offerings = () => (
  <section id="offerings" data-screen-label="04 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">04</span> How we work together
          </div>
          <h2 className="h2" style={{ maxWidth: "14ch" }}>
            Three ways to begin.
          </h2>
        </div>
      </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 support to get you where you want to reach. You'll see your possibilities clearer, gain confidence in your strengths and potential, and get clear on what to do, so taking action feels easier. You'll reach your goal, and enjoy the journey there, faster than alone."
          meta={["Built entirely around you and your goal", "A cadence and length that fit your life", "The deepest, most focused way we work together"]}
          cta="Book the Starter Pack"
          href="#starter"
        />
        <OfferingCard
          num="02"
          title="Women Leaders Club"
          subtitle="Group coaching · Live monthly"
          body="For accomplished women leaders who can feel alone in it. A monthly space to learn, deep dive into the challenges women leaders face, practice in a safe space, and find support among other women leaders who get you."
          meta={["2 live sessions per month", "Private Slack community", "Recordings and topic library"]}
          cta="Join the Club"
          href="/women-leaders-club"
        />
        <OfferingCard
          num="03"
          title="Career Transition Accelerator"
          subtitle="Group cohort program"
          body="For experienced professionals making a deliberate career change. You'll learn what actually makes a transition succeed, then practice it live and get feedback, in a room of others doing the same work."
          meta={["8 weekly sessions, October to December", "Small live cohort over Zoom", "Hands-on: learn, practice, get feedback"]}
          cta="View the program"
          href="/career-transition-accelerator"
        />
      </div>

      <StarterFeature />

      <style>{`
        @media (max-width: 900px) {
          .three-col { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </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: 14,
      marginBottom: 28,
    }}>
      <span style={{
        fontFamily: "var(--sans)",
        fontWeight: 600,
        fontSize: 12,
        color: "var(--ink-soft)",
        letterSpacing: "0.04em",
      }}>{num}</span>
      <span className="meta" style={{ color: "var(--ink-soft)" }}>{subtitle}</span>
    </div>

    <h3 className="h3" style={{ marginBottom: 18 }}>
      {title}
    </h3>

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

    <ul style={{ listStyle: "none", padding: 0, margin: 0, marginBottom: 28 }}>
      {meta.map((m, i) => (
        <li key={i} style={{
          fontFamily: "var(--sans)",
          fontWeight: 500,
          fontSize: 13,
          color: "var(--ink-soft)",
          padding: "10px 0",
          borderTop: "1px solid var(--rule)",
          display: "flex",
          alignItems: "center",
          gap: 10,
        }}>
          <span style={{
            width: 4, height: 4, borderRadius: "50%",
            background: "var(--accent)",
            flexShrink: 0,
          }} />
          {m}
        </li>
      ))}
    </ul>

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

/* Starter feature — full-width two-column primary CTA */
const StarterFeature = () => (
  <div id="starter" style={{
    marginTop: 48,
    background: "var(--paper)",
    border: "1px solid var(--rule)",
    borderLeft: "3px solid var(--accent)",
    borderRadius: 10,
    padding: 48,
    display: "grid",
    gridTemplateColumns: "1fr 1fr",
    gap: 56,
    alignItems: "center",
  }} className="starter-grid">
    <div>
      <div className="meta" style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 8,
        color: "var(--accent-deep)",
        marginBottom: 18,
      }}>
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }} />
        The Starter Pack · For new clients only
      </div>
      <h3 style={{
        fontFamily: "var(--sans)",
        fontSize: "clamp(28px, 3vw, 40px)",
        fontWeight: 600,
        lineHeight: 1.1,
        letterSpacing: "-0.025em",
        margin: 0, marginBottom: 16,
        color: "var(--ink)",
      }}>
        Two sessions to break through one real problem.
      </h3>
      <p style={{
        fontFamily: "var(--sans)",
        fontWeight: 500,
        fontSize: 15,
        lineHeight: 1.5,
        color: "var(--accent-deep)",
        margin: 0, marginBottom: 16,
      }}>
        New to working with me? Most people start 1:1 with the Starter Pack.
      </p>
      <p className="body" style={{ marginBottom: 16 }}>
        This isn't just a taste. You'll walk away with clarity on what you actually want, what you need to get there, and a tangible move on one specific problem you're stuck on right now.
      </p>
      <p className="body" style={{ marginBottom: 0 }}>
        It will also give you a real feel for how working together can support the rest of your journey, whatever shape that takes next.
      </p>
    </div>
    <div>
      <ol style={{ listStyle: "none", padding: 0, margin: 0, marginBottom: 28 }}>
        {[
          ["01", "Exploration", "We map where you are, what you want, and what's in the way."],
          ["02", "Breakthrough", "A real working session. We go deep on one specific challenge and move you forward on it before you leave."],
        ].map(([n, t, d], i) => (
          <li key={n} style={{
            display: "grid",
            gridTemplateColumns: "44px 1fr",
            gap: 16,
            padding: "20px 0",
            borderTop: "1px solid var(--rule)",
            borderBottom: i === 1 ? "1px solid var(--rule)" : "none",
          }}>
            <span style={{
              fontFamily: "var(--sans)",
              fontWeight: 600,
              fontSize: 12,
              color: "var(--accent-deep)",
              letterSpacing: "0.04em",
            }}>{n}</span>
            <div>
              <div style={{
                fontFamily: "var(--sans)",
                fontWeight: 600,
                fontSize: 18,
                color: "var(--ink)",
                marginBottom: 4,
                letterSpacing: "-0.015em",
              }}>{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 Starter Pack <span className="arrow">→</span>
      </a>
    </div>
    <style>{`
      @media (max-width: 900px) {
        .starter-grid { grid-template-columns: 1fr !important; gap: 32px !important; padding: 32px !important; }
      }
    `}</style>
  </div>
);

window.Offerings = Offerings;