/* Hero — wordmark, intro, animated pond, primary CTA. */

function Hero({ tweaks }) {
  return (
    <section style={{ paddingTop: 28, paddingBottom: 8 }} className="boot-fade">
      {/* Top bar: wordmark + secondary nav */}
      <div style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "flex-start",
        gap: 24,
        marginBottom: 36,
        flexWrap: "wrap",
      }}>
        <Wordmark size={72} withTagline skip={tweaks.wordmark_skip} />
        <nav style={{
          display: "flex",
          gap: 22,
          alignItems: "center",
          marginTop: 12,
          fontFamily: "basis33, monospace",
          fontSize: 16,
          letterSpacing: "0.04em",
          flexWrap: "wrap",
        }} className="pixel-text">
          <a href="#shelf" className="lnk">shelf</a>
          <a href="#log" className="lnk">dev log</a>
          <a href="#about" className="lnk">about</a>
          <a href="https://www.instagram.com/skipstone_studio/"
             target="_blank" rel="noopener noreferrer"
             className="lnk">instagram&nbsp;↗</a>
          <span style={{
            display: "inline-flex",
            alignItems: "center",
            gap: 6,
            padding: "4px 10px 2px",
            border: "1.5px solid var(--ss-mulberry)",
            background: "var(--ss-pink)",
            color: "var(--ss-mulberry)",
            boxShadow: "2px 2px 0 var(--ss-mulberry)",
            fontSize: 13,
            letterSpacing: "0.14em",
            textTransform: "uppercase",
          }}>
            <span style={{
              width: 7, height: 7, background: "var(--ss-mulberry)",
              borderRadius: "50%", display: "inline-block",
              animation: "twinkle 1s steps(2,end) infinite",
            }}/>
            shipping rtd
          </span>
        </nav>
      </div>

      {/* Headline + intro flex layout */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "1.2fr 1fr",
        gap: 36,
        alignItems: "end",
        marginBottom: 28,
      }} className="hero-grid">
        <div>
          <div className="eyebrow pixel-text" style={{ marginBottom: 14 }}>
            ▸ established 2024 · solo studio · still small
          </div>
          <h1 className="display" style={{
            fontSize: "clamp(56px, 9vw, 112px)",
            margin: "0 0 18px",
            color: "var(--ss-navy)",
          }}>
            small games.<br/>
            <span style={{ position: "relative", display: "inline-block", color: "var(--ss-mulberry)" }}>
              weird ones.
              <span className="hero-sticker" style={{
                position: "absolute",
                right: -18, top: -22,
                transform: "rotate(8deg)",
              }}>
                <span className="sticker">est. nz '24</span>
              </span>
            </span>
          </h1>
        </div>
        <div style={{
          fontFamily: "basis33, monospace",
          fontSize: 18,
          lineHeight: 1.55,
          color: "var(--ss-navy)",
        }} className="pixel-text">
          <p style={{ margin: "0 0 14px" }}>
            i'm alex. i make small, experimental games out of the kapiti coast,
            new zealand. prolific over precious.
          </p>
          <p style={{ margin: "0 0 22px", color: "var(--ss-mulberry)" }}>
            currently shipping one. probably more.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="https://store.steampowered.com/app/4340400/Remember_to_Die/"
               target="_blank" rel="noopener noreferrer"
               className="btn">
              wishlist remember to die&nbsp;↗
            </a>
          </div>
        </div>
      </div>

      {/* Pond */}
      <Pond fps={20}/>

      {/* Pond caption */}
      <div style={{
        marginTop: 12,
        fontFamily: "basis33, monospace",
        fontSize: 13,
        color: "var(--ss-mulberry)",
        letterSpacing: "0.06em",
      }} className="pixel-text">
        fig 1. waikanae river. click and hold to throw across — release for power.
      </div>
    </section>
  );
}

window.Hero = Hero;