/* Sections — Quiet Struggle + Bold Moves */

const QuietStruggle = () => (
  <section id="approach" data-screen-label="02 Quiet Struggle" style={{ background: "var(--paper)" }}>
    <div className="wrap">
      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 2fr",
        gap: 80,
        alignItems: "start",
      }} className="two-col">
        <div style={{ position: "sticky", top: 100 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>
            <span className="num">02</span> The pattern
          </div>
          <h2 className="h2">
            The quiet struggle of high achievers.
          </h2>
        </div>
        <div>
          <p className="body" style={{ fontSize: 18, marginBottom: 24 }}>
            You've quietly outgrown your role. You're great at what you do. People respect you, praise your work, and rely on you. But you know <strong>you're ready for more</strong>, and the pull is real.
          </p>
          <p className="body" style={{ fontSize: 18, marginBottom: 24 }}>
            So you do what's always worked. You push hard, you deliver, you wait to be seen. But this time it isn't getting you there, and you're not sure what to do differently. You feel stuck.
          </p>
          <p className="body" style={{ fontSize: 18, marginBottom: 0 }}>
            That's when the doubt creeps in, about your potential, about what's really possible for you. So you hold back, push even harder, and feel the stress build.
          </p>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .two-col { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </div>
  </section>
);

const BoldMoves = () => (
  <section id="method" data-screen-label="03 Bold Moves" style={{
    background: "var(--ink)",
    color: "var(--on-ink)",
  }}>
    <div className="wrap">
      <div className="eyebrow on-ink" style={{ marginBottom: 32 }}>
        <span className="num">03</span> The shift
      </div>

      <h2 className="h2" style={{ color: "var(--on-ink)", marginBottom: 56, maxWidth: "16ch" }}>
        From stuck to bold moves.
      </h2>

      <div style={{
        display: "grid",
        gridTemplateColumns: "1.12fr 0.88fr",
        gap: 72,
      }} className="two-col">
        <div>
          <p style={{
            color: "var(--on-ink-body)",
            fontSize: 17.5,
            lineHeight: 1.65,
            margin: 0, marginBottom: 22,
            maxWidth: "44ch",
          }}>
            You're already successful, but you want more, and what's worked so far isn't working anymore.
          </p>
          <p style={{
            color: "var(--on-ink-body)",
            fontSize: 17.5,
            lineHeight: 1.65,
            margin: 0, marginBottom: 22,
            maxWidth: "44ch",
          }}>
            That's where I come in. Working together, you'll see your potential and your possibilities, and move past the self-doubt that's been holding you back. That's where your real confidence comes from.
          </p>
          <p style={{
            color: "var(--on-ink-body)",
            fontSize: 17.5,
            lineHeight: 1.65,
            margin: 0, marginBottom: 22,
            maxWidth: "44ch",
          }}>
            With that clarity, that confidence, and my guidance, you grow into the leader you want to be. You think at a larger scope, speak up with your ideas, influence others, and protect your time for what matters most.
          </p>
          <p style={{
            fontFamily: "var(--sans)",
            fontWeight: 500,
            fontSize: 19,
            lineHeight: 1.5,
            letterSpacing: "-0.01em",
            color: "var(--on-ink)",
            margin: 0,
            maxWidth: "40ch",
          }}>
            And the journey to a career that finally fulfills you becomes peaceful, even enjoyable. <span style={{ color: "var(--accent)" }}>That's what I provide.</span>
          </p>
        </div>

        <div>
          <h3 style={{
            fontFamily: "var(--sans)",
            fontWeight: 600,
            fontSize: "clamp(22px, 2.3vw, 30px)",
            lineHeight: 1.15,
            letterSpacing: "-0.025em",
            color: "var(--on-ink)",
            margin: "0 0 16px",
            maxWidth: "22ch",
          }}>
            What's possible in six months.
          </h3>
          <p style={{
            color: "var(--on-ink-soft)",
            fontSize: 14,
            lineHeight: 1.55,
            margin: "0 0 22px",
            maxWidth: "44ch",
          }}>
            Real results my clients reached in six months. Yours will look different, shaped by your goals and effort. These are here to spark what's possible for you.
          </p>
          <ul style={{
            listStyle: "none",
            padding: 0, margin: 0,
          }}>
            {[
              "Landed a job in a different industry and function, one that felt impossible without direct experience",
              "Planned to aim for lower-level roles to feel safe, then together, changed to their level, and landed an offer with higher title and more pay",
              "Had a role created just for them, by sharing their vision with leadership at a company they were ready to leave",
              "Spoke up to senior leadership using an approach we built and practiced together, and saw it land",
              "Navigated difficult people and conflict with a clear strategy, and felt heard, without feeling pushy or becoming someone they're not",
              "Protected their evenings with family while making more impact at work, something they'd assumed wasn't possible",
              "Started their dream business on the side, something they thought they'd have to wait 20+ years until retirement to do, which helped their tech career too",
            ].map((t, i) => (
              <li key={i} style={{
                display: "grid",
                gridTemplateColumns: "16px 1fr",
                gap: 12,
                padding: "6px 0",
                alignItems: "baseline",
              }}>
                <span style={{
                  width: 5, height: 5, borderRadius: "50%",
                  background: "var(--accent)",
                  display: "inline-block",
                  transform: "translateY(-3px)",
                }} />
                <span style={{
                  fontFamily: "var(--sans)",
                  fontWeight: 400,
                  fontSize: 14,
                  lineHeight: 1.5,
                  color: "var(--on-ink-body)",
                  letterSpacing: "-0.005em",
                }}>{t}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  </section>
);

window.QuietStruggle = QuietStruggle;
window.BoldMoves = BoldMoves;
