// marketing-heroes.jsx — 4 hero variants for the Adley landing page
// All 1280 wide. Heroes are full-bleed within page column, ~760 tall.

// ─── 1 · DEVICE — phone front-and-center mid-raid ─────────────────────
function HeroDevice({ accent, tone }) {
  const t = toneConfig(tone);
  return (
    <div style={{ position: 'relative', overflow: 'hidden', minHeight: 720,
      background: `radial-gradient(ellipse 800px 600px at 78% 50%, ${accent}18, transparent 70%), ${MK.bg}` }}>
      {/* Dotted grid backdrop */}
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.5 }}>
        <defs>
          <pattern id="hd-grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <circle cx="0" cy="0" r="0.6" fill={MK.line3}/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#hd-grid)"/>
      </svg>
      {/* Corner ticks */}
      <CornerTicks accent={accent}/>

      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '80px 40px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center',
        position: 'relative', zIndex: 2 }}>
        <div>
          <MKKicker accent={accent} tone={tone}>RAID RADAR · RUST CONSOLE</MKKicker>
          <h1 className="mk-h1-resp" style={{ fontFamily: t.headlineFont, fontSize: 76 * t.headlineScale, fontWeight: 800, letterSpacing: -2,
            lineHeight: 0.95, color: MK.text, margin: '20px 0 24px', textWrap: 'balance' }}>
            your base gets hit.<br/>
            <span style={{ color: accent }}>your phone</span> hits back.
          </h1>
          <p style={{ fontFamily: MK_SANS, fontSize: 18, color: MK.dim, lineHeight: 1.5, maxWidth: 480, textWrap: 'pretty', margin: 0 }}>
            adley listens to your server's rcon and pushes a raid alert the second your tc trips.
            sub-second latency. critical alerts that bypass focus.
          </p>

          {/* Sub-spec strip */}
          <div style={{ display: 'flex', gap: 32, marginTop: 36, marginBottom: 36 }}>
            {[['LATENCY', '0.84s'], ['SERVERS', '142'], ['SQUADS', '3,200+']].map(([k, v]) => (
              <div key={k}>
                <div style={{ fontFamily: MK_MONO, fontSize: 10, color: MK.mute, letterSpacing: 2, marginBottom: 6 }}>{k}</div>
                <div style={{ fontFamily: MK_MONO, fontSize: 28, fontWeight: 700, color: MK.text, fontVariantNumeric: 'tabular-nums' }}>{v}</div>
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', gap: 12, 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>

        {/* Phone column */}
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
          {/* Pulse rings behind */}
          <svg width="640" height="640" viewBox="0 0 640 640" style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', overflow: 'visible' }}>
            {[160, 220, 280].map((r, i) => (
              <circle key={r} cx={320} cy={320} r={r} fill="none"
                stroke={accent} strokeOpacity={0.25 - i * 0.06} strokeWidth={1}
                strokeDasharray="0.4 1.2" pathLength="100"/>
            ))}
            {[0, 1].map(i => (
              <circle key={i} cx={320} cy={320} r={140} fill="none" stroke={accent} strokeWidth={1.4}
                style={{ animation: `mk-pulse 2.6s cubic-bezier(0.2,0.7,0.3,1) ${i * 1.3}s infinite` }}/>
            ))}
          </svg>
          <style>{`@keyframes mk-pulse {
            0% { r: 140; opacity: 0.8; stroke-width: 1.6; }
            80% { r: 290; opacity: 0; stroke-width: 0.4; }
          }`}</style>
          <MiniPhone w={340}>
            {window.MCRaidAlert ? <MCRaidAlert accent={accent}/> : null}
          </MiniPhone>
        </div>
      </div>
    </div>
  );
}

// ─── 2 · RADAR — animated glyph, no device ─────────────────────────────
function HeroRadar({ accent, tone }) {
  const t = toneConfig(tone);
  return (
    <div style={{ position: 'relative', overflow: 'hidden', minHeight: 760, background: MK.bg }}>
      {/* Background radar */}
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: 0.85 }}>
        <svg width="900" height="900" viewBox="0 0 900 900" style={{ overflow: 'visible' }}>
          {[120, 180, 240, 300, 360, 420].map((r, i) => (
            <circle key={r} cx={450} cy={450} r={r} fill="none"
              stroke={accent} strokeOpacity={0.30 - i * 0.04} strokeWidth={0.8}
              strokeDasharray="0.4 1.2" pathLength="100"/>
          ))}
          {/* sweep */}
          <defs>
            <linearGradient id="sweep-grad-2" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor={accent} stopOpacity="0"/>
              <stop offset="100%" stopColor={accent} stopOpacity="0.7"/>
            </linearGradient>
          </defs>
          <g style={{ transformOrigin: '450px 450px', animation: 'mk-sweep 5.5s linear infinite' }}>
            <path d={`M 450 450 L 870 450 A 420 420 0 0 0 ${450 + 420 * Math.cos(-Math.PI / 6)} ${450 + 420 * Math.sin(-Math.PI / 6)} Z`}
              fill={`${accent}10`} stroke="none"/>
            <line x1={450} y1={450} x2={870} y2={450} stroke="url(#sweep-grad-2)" strokeWidth={1.6}/>
          </g>
          {/* Crosshair */}
          <line x1={60} y1={450} x2={840} y2={450} stroke={MK.line2} strokeWidth={0.6} strokeDasharray="0.4 1.2" pathLength="100"/>
          <line x1={450} y1={60} x2={450} y2={840} stroke={MK.line2} strokeWidth={0.6} strokeDasharray="0.4 1.2" pathLength="100"/>
          {/* Pulse hits */}
          {[0, 1, 2].map(i => (
            <circle key={i} cx={450} cy={450} r={60} fill="none" stroke={accent} strokeWidth={1.2}
              style={{ animation: `mk-pulse2 2.4s cubic-bezier(0.2,0.7,0.3,1) ${i * 0.8}s infinite` }}/>
          ))}
          {/* Threat markers */}
          {[
            { x: 280, y: 220, label: 'G14', live: true },
            { x: 620, y: 360, label: 'H07', live: false },
            { x: 540, y: 600, label: 'D11', live: false },
            { x: 220, y: 540, label: 'M03', live: false },
          ].map((p, i) => (
            <g key={i}>
              <rect x={p.x - 8} y={p.y - 8} width={16} height={16} fill="none"
                stroke={p.live ? MK.danger : accent} strokeOpacity={p.live ? 1 : 0.5} strokeWidth={p.live ? 1.5 : 1}/>
              <text x={p.x + 14} y={p.y + 4} fontFamily={MK_MONO} fontSize={11} fill={p.live ? MK.danger : MK.dim}
                style={{ letterSpacing: 1 }}>{p.label}</text>
              {p.live && <circle cx={p.x} cy={p.y} r={2} fill={MK.danger}>
                <animate attributeName="opacity" values="1;0.2;1" dur="1s" repeatCount="indefinite"/>
              </circle>}
            </g>
          ))}
          <circle cx={450} cy={450} r={5} fill={accent}/>
        </svg>
      </div>
      <style>{`
        @keyframes mk-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes mk-pulse2 { 0% { r: 30; opacity: 0.9; } 80% { r: 430; opacity: 0; } }
      `}</style>

      <CornerTicks accent={accent}/>

      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1280, margin: '0 auto', padding: '120px 40px',
        display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
        <MKKicker accent={accent} tone={tone}>RAID RADAR · ALWAYS ON</MKKicker>
        <h1 className="mk-h1-resp" style={{ fontFamily: t.headlineFont, fontSize: 96 * t.headlineScale, fontWeight: 800, letterSpacing: -3,
          lineHeight: 0.95, color: MK.text, margin: '24px 0 0', textWrap: 'balance' }}>
          sleep through your<br/>next <span style={{ color: accent }}>raid.</span>
        </h1>
        <p style={{ fontFamily: MK_SANS, fontSize: 20, color: MK.dim, lineHeight: 1.5,
          maxWidth: 560, marginTop: 28, textWrap: 'pretty' }}>
          adley listens to your rust console server in real time.
          when your tc trips, your phone wakes you in under a second.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 36 }}>
          <StoreButton store="apple" accent={accent}/>
            <StoreButton store="google" accent={accent}/>
        </div>
        <div style={{ fontFamily: MK_MONO, fontSize: 10, color: MK.mute, letterSpacing: 2, marginTop: 18 }}>
          FREE · 142 SERVERS LIVE · 3,200+ SQUADS
        </div>
      </div>
    </div>
  );
}

// ─── 3 · TICKER — live event feed running across the screen ─────────────
function HeroTicker({ accent, tone }) {
  const t = toneConfig(tone);
  const events = [
    { t: '02:14:08', srv: 'EU-3X MAX',     grid: 'G14', freq: '4763', label: 'RAID ALERT · STORM-7' },
    { t: '02:13:51', srv: 'US-2X MAIN',    grid: 'H07', freq: '8800', label: 'RAID ALERT · WOLFPACK' },
    { t: '02:13:33', srv: 'EU-3X MAX',     grid: 'D04', freq: '2914', label: 'RAID ALERT · SOLO BASE' },
    { t: '02:13:10', srv: 'AU-1X PURE',    grid: 'P11', freq: '1240', label: 'RAID ALERT · MIDNIGHT' },
    { t: '02:12:58', srv: 'EU-RUST-PVP',   grid: 'F02', freq: '5566', label: 'RAID ALERT · DOJO' },
    { t: '02:12:24', srv: 'US-2X MAIN',    grid: 'L09', freq: '7102', label: 'RAID ALERT · NIGHTBIRDS' },
    { t: '02:11:50', srv: 'BR-3X TURBO',   grid: 'C08', freq: '3300', label: 'RAID ALERT · QUARRY' },
    { t: '02:11:22', srv: 'EU-3X MAX',     grid: 'K12', freq: '9009', label: 'RAID ALERT · COVE' },
  ];
  return (
    <div style={{ position: 'relative', overflow: 'hidden', minHeight: 720, background: MK.bg }}>
      <CornerTicks accent={accent}/>

      <div className="mk-pad-section-lg" style={{ maxWidth: 1280, margin: '0 auto', padding: '80px 40px', position: 'relative', zIndex: 2 }}>
        <div className="mk-row-2" style={{ display: 'grid', gridTemplateColumns: '1fr 540px', alignItems: 'flex-start', gap: 60 }}>
          <div style={{ maxWidth: 580 }}>
            <MKKicker accent={accent} tone={tone}>LIVE · RAIDS DETECTED THIS HOUR</MKKicker>
            <h1 className="mk-h1-resp" style={{ fontFamily: t.headlineFont, fontSize: 72 * t.headlineScale, fontWeight: 800, letterSpacing: -2,
              lineHeight: 0.95, color: MK.text, margin: '20px 0 24px', textWrap: 'balance' }}>
              tonight, someone is<br/>raiding your <span style={{ color: accent }}>base.</span>
            </h1>
            <p style={{ fontFamily: MK_SANS, fontSize: 18, color: MK.dim, lineHeight: 1.55, maxWidth: 520, textWrap: 'pretty', margin: 0 }}>
              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>
            <div className="mk-store-row" style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 32, marginBottom: 18, flexWrap: 'wrap' }}>
              <StoreButton store="apple" accent={accent}/>
            <StoreButton store="google" accent={accent}/>
            </div>
            <div style={{ fontFamily: MK_MONO, fontSize: 10, color: MK.mute, letterSpacing: 2 }}>
              FREE · iOS 16+ / ANDROID SOON
            </div>
          </div>

          {/* Live ticker pane */}
          <div className="mk-ticker-pane" style={{ background: MK.panel, border: `1px solid ${MK.line2}`,
            minHeight: 480, position: 'relative' }}>
            <div style={{ padding: '14px 16px', display: 'flex', justifyContent: 'space-between',
              alignItems: 'center', borderBottom: `1px solid ${MK.line}` }}>
              <span style={{ fontFamily: MK_MONO, fontSize: 11, color: MK.dim, letterSpacing: 2 }}>
                /var/log/adley.live
              </span>
              <span style={{ fontFamily: MK_MONO, fontSize: 10, color: MK.ok, letterSpacing: 2, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: MK.ok, boxShadow: `0 0 6px ${MK.ok}` }}/>
                STREAMING
              </span>
            </div>
            <div style={{ padding: '8px 16px', maxHeight: 460, overflow: 'hidden' }}>
              {events.map((e, i) => (
                <div key={i} className="mk-ticker-row" style={{ display: 'grid', gridTemplateColumns: '72px 1fr auto', gap: 14,
                  padding: '12px 0', borderBottom: `1px dashed ${MK.line}`, alignItems: 'center',
                  opacity: i === 0 ? 1 : Math.max(0.35, 1 - i * 0.08) }}>
                  <span style={{ fontFamily: MK_MONO, fontSize: 10, color: MK.mute, letterSpacing: 1 }}>{e.t}</span>
                  <div>
                    <div style={{ fontFamily: MK_MONO, fontSize: 12, color: i === 0 ? MK.danger : MK.text, fontWeight: 600, letterSpacing: 0.5 }}>
                      ▲ {e.label}
                    </div>
                    <div style={{ fontFamily: MK_MONO, fontSize: 10, color: MK.dim, letterSpacing: 1, marginTop: 2 }}>
                      {e.srv} · {e.grid} · {e.freq} MHz
                    </div>
                  </div>
                  {i === 0 && <span style={{ fontFamily: MK_MONO, fontSize: 9, color: MK.danger,
                    border: `1px solid ${MK.danger}`, padding: '2px 6px', letterSpacing: 1 }}>NOW</span>}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── 4 · LOCK SCREEN — notification cascading in ────────────────────────
function HeroLockScreen({ accent, tone }) {
  const t = toneConfig(tone);
  return (
    <div style={{ position: 'relative', overflow: 'hidden', minHeight: 760,
      background: `radial-gradient(ellipse 600px 500px at 30% 50%, ${MK.danger}10, transparent 60%), ${MK.bg}` }}>
      <CornerTicks accent={accent}/>

      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '90px 40px',
        display: 'grid', gridTemplateColumns: '1fr 380px', gap: 80, alignItems: 'center', position: 'relative', zIndex: 2 }}>
        <div>
          <MKKicker accent={MK.danger} tone={tone}>2:14 AM · CRITICAL ALERT</MKKicker>
          <h1 className="mk-h1-resp" style={{ fontFamily: t.headlineFont, fontSize: 84 * t.headlineScale, fontWeight: 800, letterSpacing: -2.5,
            lineHeight: 0.95, color: MK.text, margin: '20px 0 24px', textWrap: 'balance' }}>
            wake up.<br/>
            <span style={{ color: MK.danger }}>they're hitting<br/>your base.</span>
          </h1>
          <p style={{ fontFamily: MK_SANS, fontSize: 18, color: MK.dim, lineHeight: 1.55, maxWidth: 520, margin: 0, textWrap: 'pretty' }}>
            adley fires a critical-alert push that bypasses silent mode and focus.
            grid, frequency, base name, all on your lock screen before you've sat up.
          </p>

          {/* Latency callout */}
          <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 12, marginTop: 36, marginBottom: 36,
            padding: '18px 22px', border: `1px solid ${MK.line2}`, background: MK.panel }}>
            <span style={{ fontFamily: MK_MONO, fontSize: 10, color: MK.mute, letterSpacing: 2 }}>P50 LATENCY</span>
            <span style={{ fontFamily: MK_MONO, fontSize: 36, fontWeight: 700, color: accent, fontVariantNumeric: 'tabular-nums', letterSpacing: -1 }}>0.84s</span>
            <span style={{ fontFamily: MK_MONO, fontSize: 10, color: MK.mute, letterSpacing: 2 }}>RCON → APNs</span>
          </div>

          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <StoreButton store="apple" accent={accent}/>
            <StoreButton store="google" accent={accent}/>
          </div>
        </div>

        {/* Lock screen mockup */}
        <LockScreenMock accent={accent}/>
      </div>
    </div>
  );
}

// Inline lock-screen renderer (built fresh, not lifted from the app)
function LockScreenMock({ accent }) {
  return (
    <MiniPhone w={340}>
      <div style={{ height: '100%', width: '100%', background: '#000', position: 'relative', overflow: 'hidden' }}>
        {/* wallpaper grid */}
        <div style={{ position: 'absolute', inset: 0,
          background: `radial-gradient(ellipse at 30% 20%, ${accent}10, transparent 50%), radial-gradient(ellipse at 80% 60%, ${MK.danger}12, transparent 60%), #050508` }}/>
        <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.18 }}>
          {Array.from({ length: 40 }).map((_, i) => (
            <line key={i} x1={0} y1={i * 22} x2="100%" y2={i * 22} stroke={accent} strokeWidth="0.4"/>
          ))}
        </svg>
        {/* time */}
        <div style={{ position: 'absolute', top: 80, left: 0, right: 0, textAlign: 'center', zIndex: 10 }}>
          <div style={{ fontFamily: MK_MONO, fontSize: 13, color: MK.dim, letterSpacing: 2, marginBottom: 4 }}>FRI 22 MAY</div>
          <div style={{ fontFamily: MK_MONO, fontSize: 78, fontWeight: 300, color: '#fff', letterSpacing: -2, lineHeight: 1 }}>02:14</div>
        </div>
        {/* dynamic island raid badge */}
        <div style={{ position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
          background: '#000', borderRadius: 24, height: 37, padding: '0 14px 0 50px',
          display: 'flex', alignItems: 'center', gap: 8, zIndex: 51 }}>
          <div style={{ width: 7, height: 7, borderRadius: '50%', background: MK.danger,
            animation: 'mk-blink 0.6s infinite' }}/>
          <span style={{ fontFamily: MK_MONO, fontSize: 11, color: MK.danger, fontWeight: 700, letterSpacing: 1 }}>RAID · G14</span>
        </div>
        <style>{`@keyframes mk-blink { 50% { opacity: 0.25; } }`}</style>

        {/* raid notification card */}
        <div style={{ position: 'absolute', top: 290, left: 14, right: 14 }}>
          <div style={{ background: 'rgba(40,5,5,0.92)', border: `1.5px solid ${MK.danger}`, padding: 14,
            backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
            animation: 'mk-strobe 0.8s steps(1) infinite' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
              <span style={{ fontFamily: MK_MONO, fontSize: 11, color: MK.danger, letterSpacing: 2, fontWeight: 700 }}>▲ RAID · ADLEY</span>
              <span style={{ fontFamily: MK_MONO, fontSize: 9, color: MK.dim }}>now</span>
            </div>
            <div style={{ fontFamily: MK_MONO, fontSize: 14, color: '#fff', fontWeight: 700, letterSpacing: 1, marginBottom: 4 }}>TC TRIPPED · 4763</div>
            <div style={{ fontFamily: MK_MONO, fontSize: 11, color: MK.dim, letterSpacing: 1 }}>G14 · BLDG ALPHA · STORM-7</div>
          </div>
        </div>
        <style>{`@keyframes mk-strobe { 50% { box-shadow: 0 0 24px ${MK.danger}66; } }`}</style>

        {/* live activity card (server status) */}
        <div style={{ position: 'absolute', top: 430, left: 14, right: 14 }}>
          <div style={{ background: 'rgba(15,15,20,0.85)', border: `1px solid ${accent}55`, padding: 12,
            backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
              <span style={{ fontFamily: MK_MONO, fontSize: 11, color: MK.text, letterSpacing: 2, fontWeight: 600 }}>ADLEY · EU-3X</span>
              <span style={{ fontFamily: MK_MONO, fontSize: 9, color: MK.ok, letterSpacing: 1 }}>● LIVE</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
              {[['POP', '94', accent], ['FPS', '252', MK.ok], ['RF', '2', accent]].map(([k, v, c]) => (
                <div key={k}>
                  <div style={{ fontFamily: MK_MONO, fontSize: 9, color: MK.mute, letterSpacing: 1 }}>{k}</div>
                  <div style={{ fontFamily: MK_MONO, fontSize: 20, fontWeight: 600, color: c, lineHeight: 1 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </MiniPhone>
  );
}

// ─── Corner ticks (decorative) ───
function CornerTicks({ accent }) {
  const ticks = [
    { top: 20, left: 20, t: 'M0,0 L14,0 M0,0 L0,14' },
    { top: 20, right: 20, t: 'M14,0 L0,0 M14,0 L14,14' },
    { bottom: 20, left: 20, t: 'M0,14 L14,14 M0,14 L0,0' },
    { bottom: 20, right: 20, t: 'M14,14 L0,14 M14,14 L14,0' },
  ];
  return ticks.map((p, i) => (
    <svg key={i} width="14" height="14" viewBox="0 0 14 14" style={{ position: 'absolute', ...p, zIndex: 3 }}>
      <path d={p.t} stroke={accent} strokeWidth="1.4" fill="none"/>
    </svg>
  ));
}

Object.assign(window, { HeroDevice, HeroRadar, HeroTicker, HeroLockScreen, LockScreenMock, CornerTicks });