/* Hero — Inter only, navy/gold/cream, no portrait (lives in About section). */

const Hero = () => (
  <section data-screen-label="01 Hero" style={{ paddingTop: 56, paddingBottom: 56 }}>
    <div className="wrap">
      <div className="eyebrow fade-up" style={{ marginBottom: 40 }}>
        <span><span className="num">01</span> Executive Leadership Coaching</span>
      </div>

      <h1 className="display fade-up" style={{ animationDelay: "60ms", maxWidth: "16ch" }}>
        You're ready for more, and you know it.
      </h1>

      <div style={{
        display: "grid",
        gridTemplateColumns: "1.4fr 1fr",
        gap: 64,
        marginTop: 64,
        alignItems: "start",
      }} className="hero-grid">
        <div className="fade-up" style={{ animationDelay: "180ms" }}>
          <p className="lede" style={{ marginBottom: 20, maxWidth: "46ch" }}>
            I'm Hojeong Kim, PhD, CPC, ACC. I work with successful professionals like you who want more: more scope, more influence, more leadership. I help you see your potential and what's possible for you, and move from where you are to where you want to go.
          </p>
          <p className="body" style={{ marginBottom: 0, fontSize: 17.5, color: "var(--ink)" }}>
            The difference is how you get there. Not by pushing harder, but with clarity, real confidence, and the right support, so the journey is lighter and even enjoyable.
          </p>
        </div>

        <div className="fade-up" style={{ animationDelay: "260ms" }}>
          <div style={{
            background: "var(--paper)",
            border: "1px solid var(--rule)",
            borderLeft: "3px solid var(--accent)",
            borderRadius: 10,
            padding: 28,
            position: "sticky",
            top: 100,
          }}>
            <div className="meta" style={{ color: "var(--accent-deep)", marginBottom: 16 }}>
              The Starter Pack · For new clients
            </div>
            <p style={{
              fontFamily: "var(--sans)",
              fontWeight: 500,
              fontSize: 19,
              lineHeight: 1.4,
              color: "var(--ink)",
              margin: 0, marginBottom: 10,
              letterSpacing: "-0.015em",
            }}>
              Ready to move from reflection into action? Book your Starter Pack at a special rate.
            </p>
            <p style={{
              fontFamily: "var(--sans)",
              fontWeight: 400,
              fontSize: 14.5,
              lineHeight: 1.55,
              color: "var(--ink-soft)",
              margin: 0, marginBottom: 22,
            }}>
              Experience the clarity, focus, and momentum coaching can give you.
            </p>
            <a href="#starter" className="btn" style={{ width: "100%", justifyContent: "space-between" }}>
              Book the Starter Pack <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>

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

window.Hero = Hero;