/* Sections — Quiet Struggle, Bold Moves, Outcomes */

const QuietStruggle = () => (
  <section id="approach">
    <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">B</span>The pattern
          </div>
          <h2 className="h2" style={{ margin: 0 }}>
            The <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>quiet struggle</em><br/>
            of high achievers.
          </h2>
        </div>
        <div>
          <p className="body" style={{ fontSize: 18, marginBottom: 28 }}>
            Many brilliant professionals quietly outgrow their roles. You're great at what you do. People respect you, praise your work, rely on you.
          </p>
          <p className="body" style={{ fontSize: 18, marginBottom: 28 }}>
            <strong>But you know you want more.</strong> A bigger role. A new challenge. A different way of leading. The pull is real — and so is the risk of leaving what's comfortable.
          </p>
          <p className="body" style={{ fontSize: 18, marginBottom: 28 }}>
            So you wait. You hope someone will notice your potential and open the door. <em style={{ color: "var(--ink)", fontFamily: "var(--serif)" }}>What if I'm not ready? What if it's too late?</em> The longer no one says it, the more the silence starts to feel like the answer.
          </p>
          <p className="body" style={{ fontSize: 18, marginBottom: 0 }}>
            That waiting strategy almost never works. I've seen it play out — with my clients, and on my own path.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const BoldMoves = () => (
  <section style={{
    background: "var(--ink)",
    color: "var(--bone)",
  }} id="method">
    <div className="wrap">
      <div className="eyebrow" style={{
        marginBottom: 32,
        color: "oklch(0.75 0.012 250)",
      }}>
        <span className="num" style={{ color: "var(--accent)" }}>C</span>The shift
      </div>

      <h2 className="h2" style={{ margin: 0, marginBottom: 64, color: "var(--bone)", maxWidth: "16ch" }}>
        From stuck to <em style={{ color: "var(--accent)", fontStyle: "italic" }}>bold moves</em>.
      </h2>

      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 64,
      }} className="two-col">
        <div>
          <p style={{
            fontFamily: "var(--serif)",
            fontSize: 22,
            lineHeight: 1.5,
            color: "var(--bone)",
            margin: 0, marginBottom: 28,
            fontWeight: 300,
          }}>
            My clients are successful but often overwhelmed. They give so much to others that they leave no room to go after what they really want.
          </p>
          <p style={{
            color: "oklch(0.85 0.010 250)",
            fontSize: 16,
            lineHeight: 1.65,
            margin: 0, marginBottom: 24,
          }}>
            Coaching helps them get clear on what truly matters — so they can focus on fewer things that create more impact. They learn to say no to what isn't aligned. They gain the energy and space to finally make the moves they've been putting off.
          </p>
          <p style={{
            color: "oklch(0.85 0.010 250)",
            fontSize: 16,
            lineHeight: 1.65,
            margin: 0,
          }}>
            Together, we quiet the inner voices that hold them back, and build the clarity, courage, and support they need to move forward.
          </p>
        </div>

        <div>
          <div className="mono" style={{
            fontSize: 11,
            textTransform: "uppercase",
            letterSpacing: "0.16em",
            color: "var(--accent)",
            marginBottom: 24,
          }}>
            Within six months — clients have:
          </div>
          <ol style={{
            listStyle: "none",
            padding: 0, margin: 0,
            counterReset: "out",
          }}>
            {[
              "Landed a job in a different industry and function",
              "Received offers with higher titles — and more money — than they applied for",
              "Landed roles that didn't exist before; created for them",
              "Spoken to senior leadership about their vision with passion — calmly, clearly, without hesitation",
              "Found that expressing thoughts and emotions, opening real conversations, and setting boundaries now feels easy",
              "Protected their evenings with family, while having more impact at work",
            ].map((t, i) => (
              <li key={i} style={{
                counterIncrement: "out",
                display: "grid",
                gridTemplateColumns: "auto 1fr",
                gap: 18,
                padding: "18px 0",
                borderTop: i === 0 ? "1px solid oklch(0.30 0.012 250)" : "none",
                borderBottom: "1px solid oklch(0.30 0.012 250)",
                alignItems: "baseline",
              }}>
                <span className="mono" style={{
                  fontSize: 11,
                  letterSpacing: "0.14em",
                  color: "var(--accent)",
                  minWidth: 32,
                }}>
                  {String(i + 1).padStart(2, "0")}
                </span>
                <span style={{
                  fontFamily: "var(--serif)",
                  fontSize: 18,
                  lineHeight: 1.4,
                  color: "var(--bone)",
                }}>{t}</span>
              </li>
            ))}
          </ol>
          <p style={{
            marginTop: 28,
            color: "oklch(0.88 0.010 250)",
            fontFamily: "var(--serif)",
            fontStyle: "italic",
            fontSize: 22,
            lineHeight: 1.4,
            fontWeight: 300,
            letterSpacing: "-0.005em",
          }}>
            They didn't push harder. They had the right <span style={{ color: "var(--accent)", fontStyle: "normal", fontWeight: 500 }}>support</span> — the kind that turns clarity into action. That's what I provide.
          </p>
        </div>
      </div>
    </div>
  </section>
);

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