/* Hero — three variants exposed via Tweaks */

const Hero = ({ variant = "editorial", showStamp = true }) => {
  if (variant === "manifesto") return <HeroManifesto />;
  if (variant === "split")     return <HeroSplit showStamp={showStamp} />;
  return <HeroEditorial showStamp={showStamp} />;
};

/* --- Variant A: Editorial broadsheet --- */
const HeroEditorial = ({ showStamp }) => (
  <section style={{ paddingTop: 56, paddingBottom: 0 }}>
    <div className="wrap">
      <div className="eyebrow fade-up" style={{ marginBottom: 32, display: "flex", gap: 24, flexWrap: "wrap" }}>
        <span><span className="num">A</span>Executive Leadership Coaching</span>
        <span style={{ color: "var(--ink-dim)" }}>San Francisco · Remote · Est. 2024</span>
      </div>

      <h1 className="display fade-up" style={{ marginTop: 0, marginBottom: 0, animationDelay: "60ms" }}>
        You're ready<br />
        for <em>more</em>,<br />
        and you know it.
      </h1>

      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 64,
        marginTop: 80,
        alignItems: "start",
      }} className="hero-grid">
        <div className="fade-up" style={{ animationDelay: "180ms" }}>
          <div className="hairline" style={{ marginBottom: 24 }} />
          <p className="lede" style={{ margin: 0, marginBottom: 28 }}>
            I help successful professionals step confidently into their next big chapter — a higher leadership role, a new field, or a strategic thought partner for the ideas they're building.
          </p>
          <p className="body" style={{ marginBottom: 36 }}>
            We work in a way that protects your energy and aligns with your values and vision. We keep things simple, sharp, and a little bit fun — so you can step into the bigger opportunities you're already ready for.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
            <a href="#starter" className="btn">
              Book the First Two <span className="arrow">→</span>
            </a>
            <span className="mono" style={{ fontSize: 12, color: "var(--ink-dim)", textTransform: "uppercase", letterSpacing: "0.14em" }}>
              Two sessions · For new clients
            </span>
          </div>
        </div>

        <div className="fade-up" style={{ animationDelay: "260ms" }}>
          <PortraitBlock showStamp={showStamp} />
        </div>
      </div>

      <MarqueeStrip />
    </div>
  </section>
);

/* --- Variant B: Manifesto (full-bleed type) --- */
const HeroManifesto = () => (
  <section style={{ paddingTop: 80, paddingBottom: 40 }}>
    <div className="wrap">
      <div className="eyebrow fade-up" style={{ marginBottom: 56 }}>
        <span className="num">A</span>Hojeong Kim, PhD · CPC · ACC
      </div>
      <h1 className="fade-up" style={{
        fontFamily: "var(--serif)",
        fontWeight: 400,
        fontSize: "clamp(56px, 11vw, 180px)",
        lineHeight: 0.92,
        letterSpacing: "-0.035em",
        margin: 0,
      }}>
        Ready<br />
        for <em style={{ color: "var(--accent-deep)", fontStyle: "italic" }}>more</em>,<br />
        and you know it.
      </h1>
      <div style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "flex-end",
        marginTop: 64,
        gap: 48,
        flexWrap: "wrap",
      }} className="fade-up">
        <p className="lede" style={{ margin: 0, maxWidth: "44ch" }}>
          Leadership coaching for the role, transition, or chapter you've been postponing. Clarity, courage, and the support to act.
        </p>
        <a href="#starter" className="btn">
          Book the First Two <span className="arrow">→</span>
        </a>
      </div>
      <MarqueeStrip />
    </div>
  </section>
);

/* --- Variant C: Split with portrait --- */
const HeroSplit = ({ showStamp }) => (
  <section style={{ paddingTop: 56, paddingBottom: 24 }}>
    <div className="wrap">
      <div style={{
        display: "grid",
        gridTemplateColumns: "1.4fr 1fr",
        gap: 56,
        alignItems: "stretch",
      }} className="hero-grid">
        <div className="fade-up" style={{ display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
          <div className="eyebrow" style={{ marginBottom: 32 }}>
            <span className="num">A</span>Executive coaching · 1:1 & group
          </div>
          <h1 className="display" style={{ margin: 0 }}>
            Step into the <em>next chapter</em> you've been postponing.
          </h1>
          <div style={{ marginTop: 56 }}>
            <p className="lede" style={{ margin: 0, marginBottom: 32, maxWidth: "44ch" }}>
              I'm Hojeong Kim — PhD physicist turned tech leader turned coach. I work with senior professionals navigating their next big move.
            </p>
            <a href="#starter" className="btn">
              Book the First Two <span className="arrow">→</span>
            </a>
          </div>
        </div>
        <div className="fade-up" style={{ animationDelay: "180ms" }}>
          <PortraitBlock showStamp={showStamp} tall />
        </div>
      </div>
      <MarqueeStrip />
    </div>
  </section>
);

/* Portrait placeholder — editorial frame */
const PortraitBlock = ({ showStamp = true, tall = false }) => (
  <div style={{ position: "relative" }}>
    <div className="placeholder" style={{
      aspectRatio: tall ? "3 / 4" : "4 / 5",
      width: "100%",
    }}>
      portrait — hojeong kim
    </div>
    {showStamp && (
      <div style={{
        position: "absolute",
        top: -14, right: -14,
        background: "var(--bone)",
        border: "1px solid var(--ink)",
        padding: "10px 14px",
        fontFamily: "var(--mono)",
        fontSize: 10,
        textTransform: "uppercase",
        letterSpacing: "0.16em",
        lineHeight: 1.4,
        maxWidth: 220,
      }}>
        <div style={{ color: "var(--accent-deep)", fontWeight: 600 }}>ICF · ACC</div>
        <div style={{ color: "var(--ink-soft)", marginTop: 4 }}>
          Certified Professional Coach<br/>
          Imposter Syndrome Practitioner
        </div>
      </div>
    )}
    <div className="mono" style={{
      marginTop: 14,
      fontSize: 11,
      color: "var(--ink-dim)",
      textTransform: "uppercase",
      letterSpacing: "0.14em",
      display: "flex",
      justifyContent: "space-between",
    }}>
      <span>Fig. 01 / The coach</span>
      <span>—</span>
    </div>
  </div>
);

/* Marquee strip — credibility ticker */
const MarqueeStrip = () => {
  const items = [
    "PhD in Physics — UT Austin",
    "Postdoc — Stanford (SLAC)",
    "Postdoc — McGill",
    "Senior leader in tech — LinkedIn, Twilio & more",
    "ICF — ACC accredited",
    "Certified Professional Coach (CPC)",
    "Leadership Circle Profile™",
    "Imposter Syndrome Coach Practitioner",
    "Women-Centered Coaching",
    "Positive Intelligence",
  ];
  const all = [...items, ...items];
  return (
    <div style={{
      marginTop: 96,
      borderTop: "1px solid var(--rule)",
      borderBottom: "1px solid var(--rule)",
      overflow: "hidden",
      maskImage: "linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)",
      WebkitMaskImage: "linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)",
    }}>
      <div style={{
        display: "flex",
        gap: 48,
        padding: "20px 0",
        whiteSpace: "nowrap",
        animation: "marquee 60s linear infinite",
      }}>
        {all.map((t, i) => (
          <span key={i} className="mono" style={{
            fontSize: 12,
            color: "var(--ink-soft)",
            textTransform: "uppercase",
            letterSpacing: "0.14em",
            display: "inline-flex",
            alignItems: "center",
            gap: 24,
          }}>
            {t}
            <span style={{ color: "var(--accent-deep)" }}>✦</span>
          </span>
        ))}
      </div>
      <style>{`
        @keyframes marquee {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
        @media (max-width: 760px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </div>
  );
};

window.Hero = Hero;