// marketing-rustmap.jsx — approved hero (variant 'rustmap').
// Full-bleed realistic Rust island map (three/rust-map.js mounts the canvas
// into #gl-rustmap-mount). DOM overlay carries the headline + the old
// homepage CTA (StoreButton) + the /var/log/adley.live liquid-glass feed.
// The site header (MKNav) + footer come from MKPage, as before.

function HeroRustMap({ accent, tone }) {
  const t = toneConfig(tone);
  return (
    <div className="rm-root" style={{ position: 'relative', width: '100vw', left: '50%', right: '50%',
      marginLeft: '-50vw', marginRight: '-50vw', marginTop: -67, height: '100vh', minHeight: 620,
      overflow: 'hidden', background: MK.bg }}>

      {/* GL canvas mounts here (behind everything) */}
      <div id="gl-rustmap-mount" style={{ position: 'absolute', inset: 0, zIndex: 0 }}/>

      {/* worn-table vignette + copy scrim (keeps text readable over snow/ocean) */}
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
        background: `radial-gradient(130% 110% at 62% 42%, transparent 38%, rgba(8,8,7,0.72) 100%),
          linear-gradient(72deg, rgba(7,7,6,0.9) 0%, rgba(7,7,6,0.55) 26%, transparent 50%),
          linear-gradient(to top, rgba(7,7,6,0.85) 0%, rgba(7,7,6,0.2) 28%, transparent 42%)` }}/>
      <CornerTicks accent={accent}/>

      {/* headline + CTA (bottom-left) */}
      <div className="rm-hero mk-pad-edge" style={{ position: 'absolute', inset: 0, zIndex: 2,
        display: 'flex', alignItems: 'flex-end', maxWidth: 1280, margin: '0 auto', padding: '0 40px 9vh',
        pointerEvents: 'none' }}>
        <div style={{ maxWidth: 600, pointerEvents: 'auto' }}>
          <div style={{ fontFamily: MK_MONO, fontSize: 12, letterSpacing: 4, color: accent, fontWeight: 600,
            marginBottom: 20, display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: MK.danger,
              boxShadow: `0 0 10px ${MK.danger}`, animation: 'rm-bl 1.2s infinite' }}/>
            LIVE · RUST CONSOLE EDITION
          </div>
          <h1 className="mk-h1-resp" style={{ fontFamily: t.headlineFont, fontSize: 76, fontWeight: 800,
            letterSpacing: -2, lineHeight: 0.95, color: MK.text, margin: 0, textWrap: 'balance',
            textShadow: '0 2px 4px rgba(0,0,0,0.85), 0 6px 40px rgba(0,0,0,0.7)' }}>
            the second your base is <span style={{ color: accent }}>hit</span>, you'll know.
          </h1>
          <p style={{ fontFamily: MK_SANS, fontSize: 19, color: '#cfd3dc', lineHeight: 1.5, maxWidth: '46ch',
            marginTop: 24, textWrap: 'pretty', textShadow: '0 1px 3px rgba(0,0,0,0.95), 0 2px 18px rgba(0,0,0,0.85)' }}>
            every alert below is a real raid happening right now on a server adley watches.
            if it were yours, your phone would already be ringing.
          </p>
          {/* old homepage CTA */}
          <div className="mk-store-row" style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap', alignItems: 'center' }}>
            <StoreButton store="apple" accent={accent}/>
            <StoreButton store="google" accent={accent}/>
          </div>
          <div style={{ fontFamily: MK_MONO, fontSize: 10, color: MK.mute, letterSpacing: 2, marginTop: 14 }}>
            FREE · NO ACCOUNT REQUIRED · iOS 16+ / ANDROID SOON
          </div>
        </div>
      </div>

      {/* /var/log/adley.live — dark liquid glass, fed by three/rust-map.js */}
      <div className="rm-log">
        <div className="rm-loghead"><span>/var/log/adley.live</span><span className="rm-live">STREAMING</span></div>
        <div className="rm-logsub">EU-3X MAX · POP <b>94/100</b> · WATCHING <b>G14 · STORM-7</b></div>
        <div className="rm-logrows" id="rustmap-log-rows"></div>
      </div>

      <style>{`
        @keyframes rm-bl { 50% { opacity: .3; } }
        /* dark liquid glass log */
        .rm-log { position:absolute; right:40px; bottom:9vh; z-index:3; width:330px; pointer-events:none; border-radius:14px; overflow:hidden;
          background:linear-gradient(150deg, rgba(40,38,34,0.55) 0%, rgba(14,14,13,0.62) 100%);
          backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3);
          border:1px solid rgba(255,255,255,0.09); font-family:${JSON.stringify(MK_MONO)};
          box-shadow:0 18px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.3); }
        .rm-log::before { content:''; position:absolute; inset:0 0 auto 0; height:42%; pointer-events:none;
          background:linear-gradient(180deg, rgba(255,255,255,0.10), transparent); }
        .rm-loghead { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border-bottom:1px solid ${MK.line};
          font-size:11px; letter-spacing:1px; color:${MK.dim}; }
        .rm-live { color:#7bbf6a; display:inline-flex; align-items:center; gap:6px; }
        .rm-live::before { content:''; width:6px; height:6px; border-radius:50%; background:#7bbf6a; box-shadow:0 0 6px #7bbf6a; }
        .rm-logsub { padding:7px 12px; font-size:10px; letter-spacing:1px; color:${MK.dim}; border-bottom:1px dashed ${MK.line}; }
        .rm-logsub b { color:${MK.text}; }
        .rm-logrows { padding:4px 12px 10px; }
        .rm-logrows .logrow { display:flex; gap:10px; padding:7px 0; align-items:flex-start; border-bottom:1px dashed rgba(58,53,41,0.5); }
        .rm-logrows .lt { color:${MK.dim}; font-size:10px; padding-top:1px; }
        .rm-logrows .lmain { display:flex; flex-direction:column; gap:2px; }
        .rm-logrows .le { color:#ff6a2a; font-weight:600; letter-spacing:0.5px; font-size:11px; }
        .rm-logrows .lsub { color:${MK.dim}; font-size:10px; letter-spacing:0.5px; }
        html[data-gl-tier="off"] .rm-log { display:none; }
        @media (max-width:860px){
          .rm-root { margin-top:-54px !important; }
          .rm-log { display:none; }
          .rm-hero { padding:0 20px 12vh !important; }
          .rm-hero h1 { font-size:clamp(34px,8.5vw,52px) !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { HeroRustMap });