// marketing-pages.jsx — landing sections + subpages (How it works, Features, FAQ)

// ─── HOW IT WORKS — 3-step diagram ─────────────────────────────────────
function SectionHowItWorks({ accent, tone }) {
  const t = toneConfig(tone);
  return (
    <div id="how" className="mk-pad-section" style={{ padding: "100px 40px", maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
      <div className="mk-row-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 60, alignItems: 'flex-start' }}>
        <div>
          <MKKicker accent={accent} tone={tone}>HOW IT WORKS</MKKicker>
          <h2 className="mk-h2-resp" style={{ fontFamily: t.headlineFont, fontSize: 52, fontWeight: 800, letterSpacing: -1.2,
            lineHeight: 1, color: MK.text, margin: '14px 0 18px', textWrap: 'balance' }}>
            three pieces. one second.
          </h2>
          <div style={{ maxWidth: 380, marginTop: 4, padding: '18px 20px', borderRadius: 3,
            background: 'rgba(255,107,26,0.06)', border: `1px solid ${accent}44`,
            backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
            boxShadow: `inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 30px rgba(0,0,0,0.35)` }}>
            <p style={{ fontFamily: MK_SANS, fontSize: 17, color: MK.text, lineHeight: 1.55, margin: 0, textWrap: 'pretty' }}>
              rust already broadcasts the signal — adley just gives it somewhere to go.
              no mods, no plugins, no game modifications.
            </p>
          </div>
          <a href="/how" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 24,
            fontFamily: MK_MONO, fontSize: 12, color: accent, textDecoration: 'none', letterSpacing: 2, fontWeight: 600 }}>
            FULL DOCS <span>→</span>
          </a>
        </div>

        <div style={{ position: 'relative', border: `1px solid ${accent}33`, borderRadius: 3,
          padding: '4px 24px', background: `linear-gradient(180deg, rgba(255,107,26,0.05), transparent 60%)` }}>
          {[
            { n: '01', kicker: 'IN-GAME', title: 'wire a smart alarm + RF broadcaster', body: 'place on a battery near your tc. set it to a frequency. when something on the wire breaks, the broadcaster goes live.', icon: BroadcastIcon },
            { n: '02', kicker: 'ADLEY EDGE', title: 'rcon listener matches the frequency', body: "adley hooks into your server's rcon. the moment your saved frequency fires, the event is captured.", icon: RcInIcon },
            { n: '03', kicker: 'YOUR PHONE', title: 'critical push to every squad member', body: 'apns / fcm fires a critical alert. bypasses focus, bypasses silent. grid + freq + base name on lock screen.', icon: PhonePushIcon },
          ].map((s, i) => (
            <div key={s.n} className="mk-row-step" style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 24,
              padding: '22px 0 22px 18px', borderLeft: `3px solid ${accent}`,
              borderBottom: i < 2 ? `1px dashed ${accent}55` : 0, position: 'relative' }}>
              <div>
                <div style={{ fontFamily: MK_MONO, fontSize: 28, fontWeight: 700, color: accent, letterSpacing: 1, lineHeight: 1 }}>{s.n}</div>
                <div style={{ marginTop: 10 }}>{s.icon({ accent, size: 36 })}</div>
              </div>
              <div>
                <div style={{ fontFamily: MK_MONO, fontSize: 10, color: MK.mute, letterSpacing: 3, marginBottom: 8 }}>{s.kicker}</div>
                <div style={{ fontFamily: t.headlineFont, fontSize: 22, fontWeight: 700, color: MK.text, marginBottom: 8, letterSpacing: -0.3 }}>{s.title}</div>
                <div style={{ fontFamily: MK_SANS, fontSize: 14, color: MK.dim, lineHeight: 1.5, textWrap: 'pretty' }}>{s.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// Iconography (line-style, hairline)
function BroadcastIcon({ accent, size = 32 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 36 36" fill="none">
      <rect x="14" y="18" width="8" height="12" stroke={accent} strokeWidth="1.4"/>
      <line x1="18" y1="18" x2="18" y2="6" stroke={accent} strokeWidth="1.4"/>
      <circle cx="18" cy="6" r="2" fill={accent}/>
      <path d="M11 12 Q9 6 14 4" stroke={accent} strokeWidth="1" fill="none" strokeDasharray="0.4 1.2" pathLength="100"/>
      <path d="M25 12 Q27 6 22 4" stroke={accent} strokeWidth="1" fill="none" strokeDasharray="0.4 1.2" pathLength="100"/>
    </svg>
  );
}
function RcInIcon({ accent, size = 32 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 36 36" fill="none">
      <rect x="6" y="14" width="24" height="14" stroke={accent} strokeWidth="1.4"/>
      <circle cx="11" cy="21" r="1.4" fill={accent}/>
      <circle cx="17" cy="21" r="1.4" fill={accent}/>
      <circle cx="23" cy="21" r="1.4" fill={accent}/>
      <line x1="18" y1="6" x2="18" y2="14" stroke={accent} strokeWidth="1.4" strokeDasharray="0.6 1.2" pathLength="100"/>
      <path d="M14 10 L18 6 L22 10" stroke={accent} strokeWidth="1.4" fill="none"/>
    </svg>
  );
}
function PhonePushIcon({ accent, size = 32 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 36 36" fill="none">
      <rect x="11" y="4" width="14" height="22" rx="2" stroke={accent} strokeWidth="1.4"/>
      <line x1="15" y1="8" x2="21" y2="8" stroke={accent} strokeWidth="1"/>
      <path d="M4 32 Q18 26 32 32" stroke={accent} strokeWidth="1" fill="none" strokeDasharray="0.4 1.2" pathLength="100"/>
      <circle cx="22" cy="6" r="3" fill={accent}/>
    </svg>
  );
}

// ─── FEATURE GRID with MC phone screenshots ────────────────────────────
function SectionFeatures({ accent, tone }) {
  const t = toneConfig(tone);
  const features = [
    { tag: 'RAID ALERTS', title: 'sub-second raid alerts', body: 'wire a smart alarm + RF broadcaster to a battery on your base. when it trips, every phone in your squad fires a critical alert through focus, silent, and do-not-disturb.', screen: 'raid' },
    { tag: 'LIVE MAP',    title: 'tactical map',            body: 'every cargo run, patrol heli, monument crate and tripped tc on one tactical map. tap a marker to jump to the grid.', screen: 'map' },
    { tag: 'CHAT',        title: 'live in-game chat',       body: 'read the server\'s chat from your pocket. reply with your gamertag attached. profanity filter, block, mute, and report — built in.', screen: 'chat' },
    { tag: 'SQUAD',       title: 'shared frequencies',      body: 'a 6-character invite code links your squad. arm a frequency once and every phone wakes at the same time. perfect for sleep schedules.', screen: 'squad' },
    { tag: 'EVENTS',      title: 'full rcon event stream',  body: 'pvp kills, c4, rockets, heli, cargo, oilrig, supply drops — every rust event threaded into one live log on your phone.', screen: 'events' },
    { tag: 'AUTO-SAY',    title: 'admin broadcast bot',     body: 'server owners only. wire any world event to a chat broadcast — cargo at G06, heli inbound, bradley cracked. flips on per-event.', screen: 'autosay' },
  ];
  const renderScreen = (id) => {
    if (id === 'raid'    && window.MCRaidAlert) return <MCRaidAlert accent={accent}/>;
    if (id === 'map'     && window.MCMap)       return <MCMap accent={accent}/>;
    if (id === 'squad'   && window.MCSquad)     return <MCSquad accent={accent}/>;
    if (id === 'events'  && window.MCEvents)    return <MCEvents accent={accent}/>;
    if (id === 'chat'    && window.MCChat)      return <MCChat accent={accent}/>;
    if (id === 'autosay' && window.MCAutoSay)   return <MCAutoSay accent={accent}/>;
    return null;
  };
  return (
    <div id="features" className="mk-pad-section" style={{ padding: "100px 40px", borderTop: `1px solid ${MK.line}`, background: MK.bg2, position: 'relative' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 60 }}>
          <div>
            <MKKicker accent={accent} tone={tone}>FEATURES</MKKicker>
            <h2 className="mk-h2-resp" style={{ fontFamily: t.headlineFont, fontSize: 52, fontWeight: 800, letterSpacing: -1.2,
              lineHeight: 1, color: MK.text, margin: '14px 0 0', textWrap: 'balance', maxWidth: 600 }}>
              everything you need.<br/>nothing you don't.
            </h2>
          </div>
          <a href="/features" style={{ fontFamily: MK_MONO, fontSize: 12, color: accent, textDecoration: 'none', letterSpacing: 2, fontWeight: 600 }}>
            SEE ALL FEATURES →
          </a>
        </div>

        <div className="mk-row-features" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
          {features.map(f => (
            <div key={f.tag} style={{ background: MK.panel, border: `1px solid ${MK.line2}`,
              padding: 36, display: 'grid', gridTemplateColumns: '1fr 200px', gap: 28, alignItems: 'center',
              minHeight: 380, position: 'relative', overflow: 'hidden' }}>
              <div>
                <div style={{ fontFamily: MK_MONO, fontSize: 10, color: accent, letterSpacing: 3, marginBottom: 14 }}>{f.tag}</div>
                <div style={{ fontFamily: t.headlineFont, fontSize: 26, fontWeight: 700, color: MK.text, letterSpacing: -0.5, lineHeight: 1.15, marginBottom: 12, textWrap: 'balance' }}>{f.title}</div>
                <div style={{ fontFamily: MK_SANS, fontSize: 14, color: MK.dim, lineHeight: 1.5, textWrap: 'pretty' }}>{f.body}</div>
              </div>
              <div style={{ position: 'relative', overflow: 'hidden', height: 320, display: 'flex',
                alignItems: 'flex-start', justifyContent: 'center' }}>
                <MiniPhone w={200}>{renderScreen(f.screen)}</MiniPhone>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── STATS BAR ─────────────────────────────────────────────────────────
function SectionStats({ accent, tone }) {
  const stats = [
    ['FREE',    'DURING BETA'],
    ['0',       'ADS · 0 TRACKERS'],
    ['<1s',     'PUSH LATENCY'],
    ['iOS',     'ANDROID SOON'],
  ];
  return (
    <div className="mk-pad-section" style={{ padding: "60px 40px", borderTop: `1px solid ${MK.line}`, borderBottom: `1px solid ${MK.line}`, background: MK.bg }}>
      <div className="mk-row-stats" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
        {stats.map(([v, k], i) => (
          <div key={k} className="mk-stat-cell" style={{ borderRight: i < 3 ? `1px dashed ${MK.line2}` : 0, padding: '0 24px' }}>
            <div className="mk-stat-num" style={{ fontFamily: MK_MONO, fontSize: 56, fontWeight: 700, color: MK.text, letterSpacing: -1.5, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>{v}</div>
            <div className="mk-stat-label" style={{ fontFamily: MK_MONO, fontSize: 10, color: accent, letterSpacing: 3, marginTop: 10 }}>{k}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── TESTIMONIALS ─────────────────────────────────────────────────────
function SectionTestimonials({ accent, tone }) {
  const t = toneConfig(tone);
  const quotes = [
    { body: "woke up at 3am to a raid alert. logged in, two of them dead at the airlock, base intact. before adley i'd just have logged in to ash.", name: 'KOMA', role: 'storm-7 · 3x server' },
    { body: 'we run a 12-man clan across 4 timezones. squad-shared alarms changed our wipes. someone is always awake when it matters.', name: 'P0LARIS', role: 'nightbirds · clan lead' },
    { body: 'the latency is genuinely insane. push hits my watch faster than the c4 ticks down. zero false positives in 6 wipes.', name: 'WRAITH', role: 'solo · eu-2x' },
  ];
  return (
    <div className="mk-pad-section" style={{ padding: "100px 40px", background: MK.bg2, borderBottom: `1px solid ${MK.line}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <MKKicker accent={accent} tone={tone}>OPS REPORTS</MKKicker>
        <h2 className="mk-h2-resp" style={{ fontFamily: t.headlineFont, fontSize: 44, fontWeight: 800, letterSpacing: -1,
          lineHeight: 1, color: MK.text, margin: '14px 0 56px', textWrap: 'balance', maxWidth: 800 }}>
          field reports from the night shift.
        </h2>
        <div className="mk-row-stats" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {quotes.map((q, i) => (
            <div key={i} style={{ background: MK.panel, border: `1px solid ${MK.line2}`, padding: 32, position: 'relative' }}>
              <div style={{ fontFamily: MK_MONO, fontSize: 28, color: accent, lineHeight: 1, marginBottom: 14 }}>"</div>
              <div style={{ fontFamily: MK_SANS, fontSize: 15, color: MK.text, lineHeight: 1.55, marginBottom: 28, textWrap: 'pretty' }}>{q.body}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingTop: 16, borderTop: `1px dashed ${MK.line}` }}>
                <div style={{ width: 36, height: 36, border: `1px solid ${accent}`, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: MK_MONO, fontSize: 11, color: accent, fontWeight: 700 }}>{q.name.slice(0, 2)}</div>
                <div>
                  <div style={{ fontFamily: MK_MONO, fontSize: 12, color: MK.text, fontWeight: 600, letterSpacing: 1 }}>{q.name}</div>
                  <div style={{ fontFamily: MK_MONO, fontSize: 10, color: MK.dim, letterSpacing: 1 }}>{q.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── COMPATIBILITY STRIP ──────────────────────────────────────────────
function SectionCompatibility({ accent, tone }) {
  const t = toneConfig(tone);
  return (
    <div className="mk-pad-section" style={{ padding: "80px 40px", background: MK.bg }}>
      <div className="mk-row-2" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
        <div>
          <MKKicker accent={accent} tone={tone}>COMPATIBLE</MKKicker>
          <h2 className="mk-h2-resp" style={{ fontFamily: t.headlineFont, fontSize: 40, fontWeight: 800, letterSpacing: -1, lineHeight: 1.05, color: MK.text, margin: '14px 0 16px', textWrap: 'balance' }}>
            works with any community server that exposes rcon.
          </h2>
          <p style={{ fontFamily: MK_SANS, fontSize: 15, color: MK.dim, lineHeight: 1.5, maxWidth: 480, margin: 0, textWrap: 'pretty' }}>
            community servers (rust ce private), facepunch official with rcon enabled, and oxide-style hosts.
            no client mods, no game modifications, no bans.
          </p>
        </div>
        <div className="mk-row-compat-tiles" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          {[
            ['RUST CONSOLE', 'community + official'],
            ['iOS 16+', 'iphone se / 13+'],
            ['ANDROID 12+', 'pixel 6+ / s22+'],
            ['RCON', 'webrcon · websocket'],
          ].map(([k, v]) => (
            <div key={k} style={{ border: `1px solid ${MK.line2}`, padding: 18, background: MK.panel }}>
              <div style={{ fontFamily: MK_MONO, fontSize: 11, color: accent, letterSpacing: 2, marginBottom: 8 }}>{k}</div>
              <div style={{ fontFamily: MK_SANS, fontSize: 13, color: MK.dim }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── FINAL CTA ────────────────────────────────────────────────────────
function SectionFinalCTA({ accent, tone }) {
  const t = toneConfig(tone);
  return (
    <div id="install" className="mk-pad-section" style={{ padding: "120px 40px", position: 'relative', overflow: 'hidden',
      background: `radial-gradient(ellipse 800px 600px at 50% 50%, ${accent}18, transparent 70%), ${MK.bg}` }}>
      {/* Concentric rings */}
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.3 }}>
        {[200, 350, 500, 650].map((r, i) => (
          <circle key={r} cx="50%" cy="50%" r={r} fill="none"
            stroke={accent} strokeOpacity={0.45 - i * 0.08} strokeWidth={1}
            strokeDasharray="0.4 1.2" pathLength="100"/>
        ))}
      </svg>
      <div style={{ maxWidth: 800, margin: '0 auto', textAlign: 'center', position: 'relative', zIndex: 2 }}>
        <MKKicker accent={accent} tone={tone}>FREE · NO ACCOUNT REQUIRED</MKKicker>
        <h2 className="mk-h2-resp" style={{ fontFamily: t.headlineFont, fontSize: 72, fontWeight: 800, letterSpacing: -2, lineHeight: 0.95, color: MK.text, margin: '20px 0 24px', textWrap: 'balance' }}>
          stop logging in<br/>to a <span style={{ color: accent }}>wipe.</span>
        </h2>
        <p style={{ fontFamily: MK_SANS, fontSize: 17, color: MK.dim, lineHeight: 1.5, margin: '0 auto 40px', maxWidth: 520, textWrap: 'pretty' }}>
          install adley, link your server, and sleep tonight knowing your phone is on watch.
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center' }}>
          <StoreButton store="apple" accent={accent}/>
            <StoreButton store="google" accent={accent}/>
        </div>
      </div>
    </div>
  );
}

// ─── FAQ TEASER ────────────────────────────────────────────────────────
function SectionFAQTeaser({ accent, tone }) {
  const t = toneConfig(tone);
  const qs = [
    { q: "do i need to mod my game?", a: "no. adley reads rcon (server-side). there's nothing installed in your rust client. zero ban risk." },
    { q: "does it work on official servers?",  a: "yes, on community / private servers with rcon exposed. official servers without rcon won't link." },
    { q: "how does the chat work?", a: "adley reads the server's live chat over rcon and shows it in the app. you can reply through adley with your gamertag attached — and block, mute, or report anyone in two taps." },
    { q: "what about critical-alert sounds?", a: "we're an approved critical-alert sender on iOS. raid pushes ring through silent mode, focus, and do-not-disturb by design." },
  ];
  return (
    <div id="faq" className="mk-pad-section" style={{ padding: "100px 40px", background: MK.bg, borderTop: `1px solid ${MK.line}` }}>
      <div className="mk-row-faq" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 60 }}>
        <div>
          <MKKicker accent={accent} tone={tone}>FAQ</MKKicker>
          <h2 className="mk-h2-resp" style={{ fontFamily: t.headlineFont, fontSize: 44, fontWeight: 800, letterSpacing: -1, lineHeight: 1, color: MK.text, margin: '14px 0 20px', textWrap: 'balance' }}>
            common questions.
          </h2>
          <a href="/faq" style={{ fontFamily: MK_MONO, fontSize: 12, color: accent, textDecoration: 'none', letterSpacing: 2, fontWeight: 600 }}>
            FULL FAQ →
          </a>
        </div>
        <div>
          {qs.map((item, i) => (
            <div key={i} style={{ borderBottom: `1px dashed ${MK.line}`, padding: '20px 0' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '32px 1fr', gap: 14, alignItems: 'flex-start' }}>
                <div style={{ fontFamily: MK_MONO, fontSize: 11, color: accent, letterSpacing: 2, fontWeight: 600 }}>0{i + 1}</div>
                <div>
                  <div style={{ fontFamily: t.headlineFont, fontSize: 18, color: MK.text, fontWeight: 600, marginBottom: 6, letterSpacing: -0.2 }}>{item.q}</div>
                  <div style={{ fontFamily: MK_SANS, fontSize: 14, color: MK.dim, lineHeight: 1.55, textWrap: 'pretty' }}>{item.a}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── PAGES ─────────────────────────────────────────────────────────────

function MarketingLanding({ accent, tone, heroVariant }) {
  const Hero =
    heroVariant === 'rustmap' ? HeroRustMap :
    heroVariant === 'radar' ? HeroRadar :
    heroVariant === 'ticker' ? HeroTicker :
    heroVariant === 'lock' ? HeroLockScreen :
    HeroDevice;
  return (
    <MKPage accent={accent} tone={tone} active="home">
      <Hero accent={accent} tone={tone}/>
      <SectionStats accent={accent} tone={tone}/>
      <SectionHowItWorks accent={accent} tone={tone}/>
      <SectionFeatures accent={accent} tone={tone}/>
      <SectionCompatibility accent={accent} tone={tone}/>
      <SectionFAQTeaser accent={accent} tone={tone}/>
      <SectionFinalCTA accent={accent} tone={tone}/>
    </MKPage>
  );
}

// HOW IT WORKS — dedicated page
function PageHowItWorks({ accent, tone }) {
  const t = toneConfig(tone);
  const steps = [
    {
      n: '01', kicker: 'IN-GAME · YOUR BASE',
      title: 'wire a smart alarm + RF broadcaster to a battery',
      body: 'craft a smart alarm and a battery. place the battery inside your base, wire the alarm to it for power, and connect an rf broadcaster set to a chosen frequency (1–9999 MHz). when the alarm trips on a wall, door, or tc break, the broadcaster goes live.',
      details: ['no mod required', 'standard rust ce wiring kit', 'frequency is per-base'],
      diagram: 'wiring',
    },
    {
      n: '02', kicker: 'EDGE · ADLEY OPS',
      title: "adley listens to your server's rcon stream",
      body: 'when you link a server, adley opens a low-latency websocket to its rcon endpoint. every event — pvp, world spawns, broadcasts — is parsed at the edge.',
      details: ['websocket / webrcon', 'edge node nearest to your server', 'we never see your password — it stays encrypted in your keychain'],
      diagram: 'edge',
    },
    {
      n: '03', kicker: 'NETWORK · APNs + FCM',
      title: 'frequency match fires a critical alert',
      body: 'the moment your saved frequency goes live on your server, adley fires a push payload tagged critical. on iOS that means it bypasses focus, silent, and do-not-disturb. on android, full-screen heads-up.',
      details: ['p50 latency 0.84s', 'p99 under 2s', 'shared with every squad member'],
      diagram: 'push',
    },
  ];
  return (
    <MKPage accent={accent} tone={tone} active="how">
      <div className="mk-pad-section" style={{ padding: "90px 40px 40px", maxWidth: 1280, margin: '0 auto' }}>
        <MKKicker accent={accent} tone={tone}>HOW IT WORKS</MKKicker>
        <h1 className="mk-h1-resp" style={{ fontFamily: t.headlineFont, fontSize: 80, fontWeight: 800, letterSpacing: -2.5, lineHeight: 0.95, color: MK.text, margin: '18px 0 24px', textWrap: 'balance' }}>
          from <span style={{ color: accent }}>tc trip</span> to phone push,<br/>in under a second.
        </h1>
        <p style={{ fontFamily: MK_SANS, fontSize: 18, color: MK.dim, lineHeight: 1.5, maxWidth: 700, textWrap: 'pretty' }}>
          adley is a thin pipe over rust's existing rcon protocol. nothing touches your game client.
        </p>
      </div>

      {/* Big system diagram */}
      <SystemDiagram accent={accent} tone={tone}/>

      {/* Stepped detail blocks */}
      <div className="mk-pad-section" style={{ padding: "60px 40px", maxWidth: 1280, margin: '0 auto' }}>
        {steps.map((s, i) => (
          <div key={s.n} className="mk-row-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60,
            padding: '60px 0', borderTop: `1px dashed ${MK.line2}`, alignItems: 'center' }}>
            <div style={{ order: i % 2 === 1 ? 2 : 1 }}>
              <div style={{ fontFamily: MK_MONO, fontSize: 48, fontWeight: 700, color: accent, letterSpacing: 0, lineHeight: 1, marginBottom: 14 }}>{s.n}</div>
              <div style={{ fontFamily: MK_MONO, fontSize: 11, color: MK.mute, letterSpacing: 3, marginBottom: 14 }}>{s.kicker}</div>
              <h3 style={{ fontFamily: t.headlineFont, fontSize: 36, fontWeight: 800, letterSpacing: -1, lineHeight: 1.05, color: MK.text, margin: '0 0 18px', textWrap: 'balance' }}>{s.title}</h3>
              <p style={{ fontFamily: MK_SANS, fontSize: 16, color: MK.dim, lineHeight: 1.55, margin: '0 0 24px', textWrap: 'pretty' }}>{s.body}</p>
              <div style={{ borderTop: `1px dashed ${MK.line}`, paddingTop: 16 }}>
                {s.details.map(d => (
                  <div key={d} style={{ fontFamily: MK_MONO, fontSize: 12, color: MK.text, padding: '6px 0', letterSpacing: 1 }}>
                    <span style={{ color: accent, marginRight: 10 }}>▸</span>{d}
                  </div>
                ))}
              </div>
            </div>
            <div style={{ order: i % 2 === 1 ? 1 : 2, height: 360, background: MK.panel, border: `1px solid ${MK.line2}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
              <StepDiagram kind={s.diagram} accent={accent}/>
            </div>
          </div>
        ))}
      </div>

      <SectionFinalCTA accent={accent} tone={tone}/>
    </MKPage>
  );
}

// System diagram (used on how-it-works page)
function SystemDiagram({ accent, tone }) {
  return (
    <div className="mk-system-diagram" style={{ padding: '0 40px 40px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', border: `1px solid ${MK.line2}`, background: MK.panel,
        padding: 60, position: 'relative', overflow: 'hidden', minHeight: 320 }}>
        <CornerTicks accent={accent}/>
        <svg viewBox="0 0 1200 240" width="100%" height="240" style={{ overflow: 'visible' }}>
          {/* Nodes */}
          {[
            { x: 100, y: 120, label: 'BASE', sub: 'rust client', shape: 'box' },
            { x: 360, y: 120, label: 'RF BROADCAST', sub: '4763 MHz', shape: 'box' },
            { x: 620, y: 120, label: 'RCON', sub: 'server-side', shape: 'box' },
            { x: 880, y: 120, label: 'ADLEY EDGE', sub: 'match · queue', shape: 'box' },
            { x: 1110, y: 120, label: 'PHONE', sub: 'apns / fcm', shape: 'phone' },
          ].map((n, i, arr) => (
            <g key={n.label}>
              {n.shape === 'phone' ? (
                <rect x={n.x - 22} y={n.y - 36} width={44} height={72} rx={4} fill="none" stroke={accent} strokeWidth={1.4}/>
              ) : (
                <rect x={n.x - 50} y={n.y - 22} width={100} height={44} fill={MK.bg2} stroke={accent} strokeWidth={1.2}/>
              )}
              <text x={n.x} y={n.y + (n.shape === 'phone' ? 60 : 44)} textAnchor="middle" fontFamily={MK_MONO} fontSize={11} fill={MK.text} fontWeight={600} style={{ letterSpacing: 2 }}>{n.label}</text>
              <text x={n.x} y={n.y + (n.shape === 'phone' ? 76 : 60)} textAnchor="middle" fontFamily={MK_MONO} fontSize={9} fill={MK.dim} style={{ letterSpacing: 1.5 }}>{n.sub}</text>
              {/* Connector */}
              {i < arr.length - 1 && (
                <line x1={n.x + (n.shape === 'phone' ? 22 : 50)} y1={n.y}
                      x2={arr[i + 1].x - (arr[i + 1].shape === 'phone' ? 22 : 50)} y2={n.y}
                      stroke={accent} strokeOpacity={0.5} strokeWidth={1} strokeDasharray="4 4"/>
              )}
            </g>
          ))}
          {/* Animated dot traveling along the chain */}
          <circle r="4" fill={accent}>
            <animateMotion dur="3.5s" repeatCount="indefinite"
              path="M150,120 L310,120 L410,120 L570,120 L670,120 L830,120 L930,120 L1088,120"/>
          </circle>
        </svg>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 24, fontFamily: MK_MONO, fontSize: 10, color: MK.mute, letterSpacing: 2 }}>
          <span>T+0.00s</span>
          <span>T+0.04s</span>
          <span>T+0.12s</span>
          <span>T+0.42s</span>
          <span>T+0.84s</span>
        </div>
      </div>
    </div>
  );
}

function StepDiagram({ kind, accent }) {
  if (kind === 'wiring') {
    return (
      <svg viewBox="0 0 360 280" width="80%" height="80%">
        <rect x="40" y="80" width="120" height="100" stroke={accent} strokeWidth="1.2" fill={`${accent}06`}/>
        <text x="100" y="135" textAnchor="middle" fontFamily={MK_MONO} fontSize="11" fill={MK.text} style={{ letterSpacing: 1 }}>BATTERY</text>
        <text x="100" y="155" textAnchor="middle" fontFamily={MK_MONO} fontSize="9" fill={MK.dim} style={{ letterSpacing: 1 }}>power source</text>
        <line x1="160" y1="120" x2="220" y2="120" stroke={accent} strokeWidth="1.2" strokeDasharray="3 3"/>
        <rect x="220" y="90" width="100" height="60" stroke={accent} strokeWidth="1.2" fill="none"/>
        <text x="270" y="115" textAnchor="middle" fontFamily={MK_MONO} fontSize="10" fill={accent} style={{ letterSpacing: 1 }}>SMART</text>
        <text x="270" y="130" textAnchor="middle" fontFamily={MK_MONO} fontSize="10" fill={accent} style={{ letterSpacing: 1 }}>ALARM</text>
        <line x1="270" y1="150" x2="270" y2="190" stroke={accent} strokeWidth="1.2" strokeDasharray="3 3"/>
        <rect x="220" y="190" width="100" height="44" stroke={accent} strokeWidth="1.2" fill="none"/>
        <text x="270" y="208" textAnchor="middle" fontFamily={MK_MONO} fontSize="10" fill={MK.text} style={{ letterSpacing: 1 }}>RF BCST</text>
        <text x="270" y="223" textAnchor="middle" fontFamily={MK_MONO} fontSize="11" fill={accent} fontWeight="700" style={{ letterSpacing: 2 }}>4763</text>
      </svg>
    );
  }
  if (kind === 'edge') {
    return (
      <svg viewBox="0 0 360 280" width="80%" height="80%">
        <rect x="40" y="60" width="120" height="160" stroke={accent} strokeWidth="1.2" fill={`${accent}06`}/>
        <text x="100" y="92" textAnchor="middle" fontFamily={MK_MONO} fontSize="11" fill={MK.text} style={{ letterSpacing: 1 }}>RCON</text>
        <text x="100" y="108" textAnchor="middle" fontFamily={MK_MONO} fontSize="9" fill={MK.dim} style={{ letterSpacing: 1 }}>WebSocket</text>
        {['kill', 'spawn', 'rf 4763', 'rf 8800', 'kill', 'cargo'].map((e, i) => (
          <text key={i} x="100" y={132 + i * 14} textAnchor="middle" fontFamily={MK_MONO} fontSize="9"
            fill={e === 'rf 4763' ? accent : MK.dim} style={{ letterSpacing: 1 }}>{`> ${e}`}</text>
        ))}
        <line x1="160" y1="140" x2="220" y2="140" stroke={accent} strokeWidth="1.2" strokeDasharray="3 3"/>
        <rect x="220" y="110" width="100" height="60" stroke={accent} strokeWidth="1.4" fill={`${accent}12`}/>
        <text x="270" y="135" textAnchor="middle" fontFamily={MK_MONO} fontSize="10" fill={accent} fontWeight="700" style={{ letterSpacing: 2 }}>MATCH</text>
        <text x="270" y="152" textAnchor="middle" fontFamily={MK_MONO} fontSize="9" fill={MK.dim} style={{ letterSpacing: 1 }}>4763 == saved</text>
      </svg>
    );
  }
  // push
  return (
    <svg viewBox="0 0 360 280" width="80%" height="80%">
      <rect x="40" y="80" width="100" height="120" stroke={accent} strokeWidth="1.4" fill={`${accent}08`}/>
      <text x="90" y="116" textAnchor="middle" fontFamily={MK_MONO} fontSize="10" fill={accent} fontWeight="700" style={{ letterSpacing: 2 }}>EDGE</text>
      {[120, 145, 170].map((y, i) => (
        <line key={i} x1="140" y1={y} x2="220" y2={120 + i * 25} stroke={accent} strokeWidth="1"
          strokeDasharray="3 3" strokeOpacity="0.6"/>
      ))}
      <rect x="220" y="100" width="50" height="80" rx="4" fill="none" stroke={accent} strokeWidth="1.2"/>
      <rect x="220" y="130" width="50" height="80" rx="4" fill="none" stroke={accent} strokeWidth="1.2"/>
      <rect x="220" y="160" width="50" height="80" rx="4" fill="none" stroke={accent} strokeWidth="1.2"/>
      <text x="305" y="200" fontFamily={MK_MONO} fontSize="9" fill={MK.dim} style={{ letterSpacing: 1 }}>SQUAD</text>
    </svg>
  );
}

// FEATURES — dedicated page
function PageFeatures({ accent, tone }) {
  const t = toneConfig(tone);
  const bigFeatures = [
    { tag: 'RAID ALERTS', title: 'critical raid alerts',     body: 'every notification adley sends is tagged with apple critical-alert and android high-priority. it bypasses focus, silent, dnd — and rings at full volume even when your phone is locked.', screen: 'raid', side: 'right', kpis: [['LATENCY', '<1s'], ['VOLUME', 'CRIT'], ['BYPASS', 'YES']] },
    { tag: 'WORLD MAP',   title: 'tactical map',             body: 'every armed frequency, every monument and cargo path on a single map. tap any marker to jump to the grid, broadcast to the squad, or ping a teammate.', screen: 'map',  side: 'left',  kpis: [['MARKERS', 'LIVE'], ['UPDATE', '1Hz'], ['EXPORT', 'PNG']] },
    { tag: 'CHAT',        title: 'live in-game chat',        body: 'read the server\'s live chat from your pocket and reply with your gamertag attached. profanity + link filter on every message; block, mute, and report any player in two taps.', screen: 'chat', side: 'right', kpis: [['FILTER', 'AUTO'], ['BLOCK', '1-TAP'], ['REPORT', 'OK']] },
    { tag: 'SQUAD',       title: 'shared frequencies',       body: 'a 6-character invite code links your squad. arm a frequency once and every roster member is wired in. roles let you control who can arm, silence, or invite.', screen: 'squad', side: 'left', kpis: [['MAX SIZE', '24'], ['ROLES', '3'], ['CODE', 'STRM']] },
    { tag: 'EVENTS',      title: 'rcon event stream',        body: 'pvp kills, c4, rockets, heli, cargo, oilrig, supply drops — the full rust event stream threaded into a single live log. filter by kind, sev, or grid.', screen: 'events', side: 'right', kpis: [['EVENTS', '24+'], ['FILTER', 'GRID'], ['HISTORY', '7d']] },
    { tag: 'AUTO-SAY',    title: 'admin broadcast bot',      body: 'server owners only. wire any world event to an in-game chat broadcast — cargo at G06, heli inbound, bradley cracked. flips on per-event, hardcoded templates so it can\'t leak squad data.', screen: 'autosay', side: 'left', kpis: [['EVENTS', '8'], ['SCOPE', 'GLOBAL'], ['RATE LIMIT', 'YES']] },
    { tag: 'SETUP',       title: 'rcon onboarding wizard',   body: 'paste your server\'s host, port, and password. adley runs a handshake, identifies the build, and subscribes to the event stream — usually under 10 seconds.', screen: 'rcon', side: 'right', kpis: [['SETUP', '<10s'], ['STEPS', '3'], ['VALIDATE', 'AUTO']] },
  ];
  const renderScreen = (id) => {
    if (id === 'raid'    && window.MCRaidAlert) return <MCRaidAlert accent={accent}/>;
    if (id === 'map'     && window.MCMap)       return <MCMap accent={accent}/>;
    if (id === 'squad'   && window.MCSquad)     return <MCSquad accent={accent}/>;
    if (id === 'events'  && window.MCEvents)    return <MCEvents accent={accent}/>;
    if (id === 'rcon'    && window.MCRcon)      return <MCRcon accent={accent}/>;
    if (id === 'chat'    && window.MCChat)      return <MCChat accent={accent}/>;
    if (id === 'autosay' && window.MCAutoSay)   return <MCAutoSay accent={accent}/>;
    return null;
  };
  return (
    <MKPage accent={accent} tone={tone} active="features">
      <div className="mk-pad-section" style={{ padding: "90px 40px 60px", maxWidth: 1280, margin: '0 auto' }}>
        <MKKicker accent={accent} tone={tone}>FEATURES</MKKicker>
        <h1 className="mk-h1-resp" style={{ fontFamily: t.headlineFont, fontSize: 80, fontWeight: 800, letterSpacing: -2.5, lineHeight: 0.95, color: MK.text, margin: '18px 0 24px', textWrap: 'balance' }}>
          built for the<br/>night shift.
        </h1>
        <p style={{ fontFamily: MK_SANS, fontSize: 18, color: MK.dim, lineHeight: 1.5, maxWidth: 700, textWrap: 'pretty' }}>
          every feature exists to answer one question: is my base getting raided right now?
        </p>
      </div>

      <div style={{ padding: '0 40px 60px', maxWidth: 1280, margin: '0 auto' }}>
        {bigFeatures.map((f, i) => (
          <div key={f.tag} className="mk-row-feature-card" style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 60,
            padding: '70px 0', borderTop: `1px dashed ${MK.line2}`, alignItems: 'center' }}>
            <div style={{ order: f.side === 'left' ? 2 : 1 }}>
              <div style={{ fontFamily: MK_MONO, fontSize: 11, color: accent, letterSpacing: 3, marginBottom: 14 }}>{f.tag}</div>
              <h3 style={{ fontFamily: t.headlineFont, fontSize: 44, fontWeight: 800, letterSpacing: -1, lineHeight: 1, color: MK.text, margin: '0 0 20px', textWrap: 'balance' }}>{f.title}</h3>
              <p style={{ fontFamily: MK_SANS, fontSize: 16, color: MK.dim, lineHeight: 1.55, margin: '0 0 32px', maxWidth: 540, textWrap: 'pretty' }}>{f.body}</p>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, max-content)', gap: 24,
                paddingTop: 20, borderTop: `1px dashed ${MK.line}` }}>
                {f.kpis.map(([k, v]) => (
                  <div key={k}>
                    <div style={{ fontFamily: MK_MONO, fontSize: 9, color: MK.mute, letterSpacing: 2, marginBottom: 6 }}>{k}</div>
                    <div style={{ fontFamily: MK_MONO, fontSize: 22, color: MK.text, fontWeight: 700, fontVariantNumeric: 'tabular-nums', letterSpacing: -0.5 }}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ order: f.side === 'left' ? 1 : 2, display: 'flex', justifyContent: 'center' }}>
              <MiniPhone w={300}>{renderScreen(f.screen)}</MiniPhone>
            </div>
          </div>
        ))}
      </div>

      <SectionFinalCTA accent={accent} tone={tone}/>
    </MKPage>
  );
}

// FAQ — dedicated page
function PageFAQ({ accent, tone }) {
  const t = toneConfig(tone);
  const sections = [
    {
      h: 'BASICS',
      items: [
        ['what does adley actually do?', 'adley listens to your rust console server\'s rcon stream and pushes a critical alert to your phone the moment a saved frequency goes live. that frequency is whatever you wired your rf broadcaster to in-game.'],
        ['do i need to mod or jailbreak anything?', 'no. adley reads rcon, which is a server-side protocol. there is nothing installed in your rust client. on iOS and android, adley installs from the official stores.'],
        ['is it free?', 'yes, completely. no account required, no paywall, no premium tier. open the app, link a server, save a frequency.'],
      ],
    },
    {
      h: 'COMPATIBILITY',
      items: [
        ['which servers work?', 'any rust console edition community / private server that exposes rcon (webrcon or websocket rcon). official facepunch servers without rcon are not supported.'],
        ['ios / android versions?', 'ios 16+ for critical alerts and dynamic island. android 12+ for notification channels and full-screen heads-up.'],
        ['will i get banned?', 'no. adley never touches your game client. it talks to your server, not your console.'],
      ],
    },
    {
      h: 'ALERTS',
      items: [
        ['will it ring through silent mode?', 'yes, by design. raid pushes use apple\'s critical alert entitlement and android\'s high-priority channel. they ring through silent, focus, and do-not-disturb at full volume.'],
        ['can i change the sound?', 'three built-in tones: SIREN, BUZZER, MORSE. all ~8s loops. custom uploads coming.'],
        ['what about false positives?', 'we only fire on the exact frequency you saved. if your alarm wiring is solid, your alerts will be.'],
      ],
    },
    {
      h: 'SQUAD',
      items: [
        ['how do invite codes work?', 'an invite code is a 6-character handle (e.g. STRM-7HQ4) that joins a squad. anyone with the code is wired into the same frequencies until removed.'],
        ['can i have different roles?', 'yes: LEAD, MEM, GUEST. leads can arm/silence and invite. guests get pushes but can\'t modify anything.'],
        ['max squad size?', '24 members per squad. you can be in multiple squads on different servers.'],
      ],
    },
    {
      h: 'PRIVACY',
      items: [
        ['where is my rcon password stored?', 'in your phone\'s secure keychain, encrypted with your device key. we never see it on our servers.'],
        ['what data do you keep?', 'rcon events are processed at the edge and not persisted past 7 days for replay. nothing is sold or shared with third parties.'],
        ['is this affiliated with facepunch?', 'no. adley is independent. we use rust\'s public rcon protocol the same way any tool would.'],
      ],
    },
  ];
  return (
    <MKPage accent={accent} tone={tone} active="faq">
      <div className="mk-pad-section" style={{ padding: "90px 40px 40px", maxWidth: 1280, margin: '0 auto' }}>
        <MKKicker accent={accent} tone={tone}>FAQ</MKKicker>
        <h1 className="mk-h1-resp" style={{ fontFamily: t.headlineFont, fontSize: 80, fontWeight: 800, letterSpacing: -2.5, lineHeight: 0.95, color: MK.text, margin: '18px 0 24px', textWrap: 'balance' }}>
          questions.<br/>answers.
        </h1>
        <p style={{ fontFamily: MK_SANS, fontSize: 18, color: MK.dim, lineHeight: 1.5, maxWidth: 700, textWrap: 'pretty' }}>
          everything we get asked on discord, in one place. if it\'s not here, hit us in #support.
        </p>
      </div>

      <div className="mk-pad-section" style={{ padding: "40px 40px 80px", maxWidth: 1280, margin: '0 auto' }}>
        {sections.map((sec, si) => (
          <div key={sec.h} className="mk-row-legal" style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 60,
            padding: '50px 0', borderTop: `1px dashed ${MK.line2}` }}>
            <div>
              <div style={{ fontFamily: MK_MONO, fontSize: 11, color: accent, letterSpacing: 3, marginBottom: 10 }}>{`0${si + 1} //`}</div>
              <div style={{ fontFamily: MK_MONO, fontSize: 22, color: MK.text, fontWeight: 700, letterSpacing: 2 }}>{sec.h}</div>
            </div>
            <div>
              {sec.items.map(([q, a], i) => (
                <div key={i} style={{ borderBottom: i < sec.items.length - 1 ? `1px dashed ${MK.line}` : 0, padding: '18px 0' }}>
                  <div style={{ fontFamily: t.headlineFont, fontSize: 19, color: MK.text, fontWeight: 600, marginBottom: 8, letterSpacing: -0.3 }}>{q}</div>
                  <div style={{ fontFamily: MK_SANS, fontSize: 14, color: MK.dim, lineHeight: 1.55, textWrap: 'pretty' }}>{a}</div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      <SectionFinalCTA accent={accent} tone={tone}/>
    </MKPage>
  );
}

// ─── LEGAL PAGE PRIMITIVES ─────────────────────────────────────────────
// Reuses the FAQ subpage shape: hero block (kicker + h1 + sub), then a
// 240px section-title | 1fr content grid. Body uses prose styles
// matched to MK tokens.

function LegalSection({ num, title, children, accent, tone }) {
  return (
    <div className="mk-row-legal" style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 60,
      padding: '50px 0', borderTop: `1px dashed ${MK.line2}` }}>
      <div>
        <div style={{ fontFamily: MK_MONO, fontSize: 11, color: accent, letterSpacing: 3, marginBottom: 10 }}>{num} //</div>
        <div style={{ fontFamily: MK_MONO, fontSize: 22, color: MK.text, fontWeight: 700, letterSpacing: 2 }}>{title}</div>
      </div>
      <div style={{ fontFamily: MK_SANS, fontSize: 15, color: MK.dim, lineHeight: 1.65 }}>
        {children}
      </div>
    </div>
  );
}

function LegalP({ children }) {
  return <p style={{ margin: '0 0 14px' }}>{children}</p>;
}

function LegalUL({ items }) {
  return (
    <ul style={{ margin: '0 0 14px', paddingLeft: 18 }}>
      {items.map((it, i) => <li key={i} style={{ margin: '6px 0' }}>{it}</li>)}
    </ul>
  );
}

function LegalCallout({ children, accent }) {
  return (
    <div style={{ borderLeft: `2px solid ${accent}`, padding: '14px 16px',
      background: `${accent}0a`, margin: '0 0 18px', color: MK.text }}>
      {children}
    </div>
  );
}

function LegalLink({ href, children }) {
  return <a href={href} style={{ color: 'inherit', borderBottom: `1px solid ${MK.line3}` }}>{children}</a>;
}

function LegalH3({ children }) {
  return <h3 style={{ fontFamily: MK_SANS, fontSize: 16, color: MK.text, fontWeight: 700,
    margin: '20px 0 8px', letterSpacing: -0.2 }}>{children}</h3>;
}

function LegalPageShell({ kicker, title, updated, intro, children, accent, tone, active }) {
  const t = toneConfig(tone);
  return (
    <MKPage accent={accent} tone={tone} active={active}>
      <div className="mk-pad-section" style={{ padding: "90px 40px 40px", maxWidth: 1280, margin: '0 auto' }}>
        <MKKicker accent={accent} tone={tone}>{kicker}</MKKicker>
        <h1 className="mk-h1-resp" style={{ fontFamily: t.headlineFont, fontSize: 80, fontWeight: 800, letterSpacing: -2.5,
          lineHeight: 0.95, color: MK.text, margin: '18px 0 24px', textWrap: 'balance' }}>
          {title}
        </h1>
        {updated && (
          <div style={{ fontFamily: MK_MONO, fontSize: 11, color: MK.mute, letterSpacing: 2,
            textTransform: 'uppercase', marginBottom: 18 }}>
            // last updated {updated}
          </div>
        )}
        <p style={{ fontFamily: MK_SANS, fontSize: 18, color: MK.dim, lineHeight: 1.55, maxWidth: 700, textWrap: 'pretty' }}>
          {intro}
        </p>
      </div>
      <div className="mk-pad-section" style={{ padding: "40px 40px 80px", maxWidth: 1280, margin: '0 auto' }}>
        {children}
      </div>
      <SectionFinalCTA accent={accent} tone={tone}/>
    </MKPage>
  );
}

// ─── PRIVACY ───────────────────────────────────────────────────────────
function PagePrivacy({ accent, tone }) {
  return (
    <LegalPageShell
      accent={accent} tone={tone} active=""
      kicker="PRIVACY"
      title={<>your data.<br/>what we keep, what we don't.</>}
      updated="2026-05-25"
      intro="what adley collects, why, how long we keep it, and who processes it on our behalf. plain-english version below."
    >
      <LegalSection num="00" title="TL;DR" accent={accent} tone={tone}>
        <LegalCallout accent={accent}>
          we store the minimum needed to run the service: your account identity (via clerk),
          your server credentials encrypted at rest, your saved frequencies, recent raid events,
          and the in-game chat ring. we do not sell data. we do not track you across the web.
          no ads, no analytics cookies on the marketing site.
        </LegalCallout>
      </LegalSection>

      <LegalSection num="01" title="WHAT WE COLLECT" accent={accent} tone={tone}>
        <LegalH3>from you directly</LegalH3>
        <LegalUL items={[
          <><strong style={{ color: MK.text }}>identity</strong> — via clerk: email, name, avatar, oauth provider links (discord, apple). passwords never reach our servers; clerk handles them.</>,
          <><strong style={{ color: MK.text }}>server credentials</strong> — hostname, rcon port, rcon password. password is encrypted at rest with AES-256-GCM and never returned by any API.</>,
          <><strong style={{ color: MK.text }}>registrations</strong> — the frequencies and labels you arm, plus the in-game coords captured on first trigger.</>,
          <><strong style={{ color: MK.text }}>discord webhook URL</strong> (optional) — encrypted at rest.</>,
          <><strong style={{ color: MK.text }}>push tokens</strong> — the expo push token your device registers so we can deliver alerts.</>,
          <><strong style={{ color: MK.text }}>console gamertag</strong> — when you sign in via discord and have linked your PSN or xbox account to discord, adley reads the gamertag and platform via discord's public connections API. only the gamertag, platform, and a stable discord-side account ID are stored. we never read messages, friends, or any other discord data.</>,
          <><strong style={{ color: MK.text }}>chat content</strong> — messages you send via adley's in-app chat are filtered, then relayed to your rust console server via rcon. the recent ring (last 7d / 200 lines per server) is retained in redis to power the chat tab's initial load.</>,
          <><strong style={{ color: MK.text }}>block + report records</strong> — gamertags you block are stored on your account so we can hide their messages on every server you visit. reports sent via the long-press "report" action go to <LegalLink href="mailto:abuse@adley.gg">abuse@adley.gg</LegalLink>; the email includes your account id, server id, the offending message, and the author's gamertag.</>,
        ]}/>
        <LegalH3>automatically generated</LegalH3>
        <LegalUL items={[
          <><strong style={{ color: MK.text }}>raid alerts</strong> — server id, frequency, coordinates, timestamp, detection source. retained 30 days.</>,
          <><strong style={{ color: MK.text }}>service logs</strong> — request method, path, status, latency, request id. no IPs beyond short-term rate-limiting. retained 30 days.</>,
        ]}/>
      </LegalSection>

      <LegalSection num="02" title="WHY" accent={accent} tone={tone}>
        <LegalUL items={[
          <><strong style={{ color: MK.text }}>to run the service</strong> — connect to your rcon, detect raid events, deliver alerts, ship chat.</>,
          <><strong style={{ color: MK.text }}>to enforce limits</strong> — rate limits, anti-abuse, profanity + link filtering.</>,
          <><strong style={{ color: MK.text }}>to improve reliability</strong> — aggregate error rates, latency percentiles.</>,
        ]}/>
        <LegalP>we do not use your data for advertising and we do not sell it to third parties.</LegalP>
      </LegalSection>

      <LegalSection num="03" title="PROCESSORS" accent={accent} tone={tone}>
        <LegalUL items={[
          <><strong style={{ color: MK.text }}>clerk</strong> — identity, sessions, oauth.</>,
          <><strong style={{ color: MK.text }}>railway</strong> — hosting (app + postgres + redis).</>,
          <><strong style={{ color: MK.text }}>cloudflare</strong> — edge, DNS, static hosting for the marketing site.</>,
          <><strong style={{ color: MK.text }}>expo</strong> — mobile push delivery.</>,
          <><strong style={{ color: MK.text }}>discord</strong> — we read your linked PSN / xbox connection (when present) via <code style={{ fontFamily: MK_MONO, fontSize: 13 }}>/users/@me/connections</code>. we also post to your configured webhook URL when you set one up.</>,
          <><strong style={{ color: MK.text }}>playstation network / xbox live</strong> — we do not call sony or microsoft APIs directly; the gamertag arrives via discord's connection record.</>,
        ]}/>
      </LegalSection>

      <LegalSection num="04" title="COOKIES" accent={accent} tone={tone}>
        <LegalP>
          the marketing site uses no analytics cookies. the app uses clerk's session cookie to keep you signed in
          and localstorage to remember preferences. no third-party tracking cookies.
        </LegalP>
      </LegalSection>

      <LegalSection num="05" title="RETENTION" accent={accent} tone={tone}>
        <LegalUL items={[
          'account identity — kept until you delete your account.',
          'raid alerts — 30 days, then hard-deleted by scheduled sweep.',
          'chat ring — capped at 200 lines per server, auto-evicted after 7 days of inactivity.',
          'console gamertag — kept until you sign out, delete your account, or unlink discord. tap "recheck" in settings to refresh.',
          'block list — kept until you delete your account.',
          'abuse reports — retained 90 days for moderation review, then deleted unless tied to an open investigation.',
          'service logs — 30 days.',
        ]}/>
      </LegalSection>

      <LegalSection num="06" title="YOUR RIGHTS" accent={accent} tone={tone}>
        <LegalP>under GDPR, CCPA, and similar laws you can:</LegalP>
        <LegalUL items={[
          <><strong style={{ color: MK.text }}>access</strong> — request a copy of your data.</>,
          <><strong style={{ color: MK.text }}>correct</strong> — update incorrect info.</>,
          <><strong style={{ color: MK.text }}>delete</strong> — remove your account and associated data.</>,
          <><strong style={{ color: MK.text }}>port</strong> — receive a machine-readable export.</>,
          <><strong style={{ color: MK.text }}>object</strong> — ask us to stop processing for specific purposes.</>,
        ]}/>
        <LegalP>
          email <LegalLink href="mailto:support@adley.gg">support@adley.gg</LegalLink>. we respond within 30 days.
        </LegalP>
      </LegalSection>

      <LegalSection num="07" title="SECURITY" accent={accent} tone={tone}>
        <LegalP>
          secrets (rcon passwords, discord webhook URLs) are encrypted at rest with AES-256-GCM. transport is TLS-only.
          our infrastructure runs in a private VPC on railway. no system is unbreakable; if we discover a breach that
          affects your data, we will notify you by email within 72 hours of confirmation.
        </LegalP>
      </LegalSection>

      <LegalSection num="08" title="CHILDREN" accent={accent} tone={tone}>
        <LegalP>
          adley is not intended for users under 13. if you believe a child under 13 has given us personal data,
          contact us and we'll delete it.
        </LegalP>
      </LegalSection>

      <LegalSection num="09" title="CONTACT" accent={accent} tone={tone}>
        <LegalP>
          questions about your privacy: <LegalLink href="mailto:support@adley.gg">support@adley.gg</LegalLink>.
        </LegalP>
      </LegalSection>
    </LegalPageShell>
  );
}

// ─── TERMS ─────────────────────────────────────────────────────────────
function PageTerms({ accent, tone }) {
  return (
    <LegalPageShell
      accent={accent} tone={tone} active=""
      kicker="TERMS OF SERVICE"
      title={<>the rules.<br/>short and plain.</>}
      updated="2026-04-22"
      intro="these terms govern your use of adley. by creating an account or using any part of the service, you agree to them."
    >
      <LegalSection num="00" title="TL;DR" accent={accent} tone={tone}>
        <LegalCallout accent={accent}>
          adley monitors RCON events from rust console servers you own or join, and delivers raid alerts and chat
          to your devices. you must have the right to connect an RCON bridge to any server you add. free during beta.
          we're not affiliated with facepunch studios.
        </LegalCallout>
      </LegalSection>

      <LegalSection num="01" title="ELIGIBILITY" accent={accent} tone={tone}>
        <LegalP>
          you must be at least 13 years old (or the minimum age of digital consent in your country) to use adley.
          if you're under 18, a parent or guardian must accept these terms on your behalf.
        </LegalP>
      </LegalSection>

      <LegalSection num="02" title="ACCOUNTS" accent={accent} tone={tone}>
        <LegalP>
          authentication is handled by <LegalLink href="https://clerk.com">clerk</LegalLink>. you're responsible
          for the credentials of any oauth provider you link (discord, apple, email) and for any activity that happens
          under your account.
        </LegalP>
      </LegalSection>

      <LegalSection num="03" title="YOUR SERVERS" accent={accent} tone={tone}>
        <LegalP>
          when you add a rust console server to adley, you represent that you are either the owner of that server or
          have been authorised by the owner to connect an RCON client. connecting a server you do not own or have
          authorisation for is prohibited under this agreement.
        </LegalP>
      </LegalSection>

      <LegalSection num="04" title="ACCEPTABLE USE" accent={accent} tone={tone}>
        <LegalP>you will not:</LegalP>
        <LegalUL items={[
          'use the service to harass, stalk, or target any specific player or group outside of your own servers.',
          'attempt to reverse-engineer or overload our infrastructure.',
          'send chat messages that violate the in-app filter — slurs, links, harassment, or threats.',
          'use the service for any activity prohibited by facepunch studios\' own terms.',
        ]}/>
      </LegalSection>

      <LegalSection num="05" title="USER-GENERATED CONTENT" accent={accent} tone={tone}>
        <LegalP>
          adley lets you send chat messages and broadcasts that other players see. every outgoing message passes
          through our profanity + link filter. you remain responsible for the content you send. we operate a
          report flow (long-press → report) and a block flow (long-press → block) — both feed
          <LegalLink href="mailto:abuse@adley.gg"> abuse@adley.gg</LegalLink>. accounts that repeatedly violate
          acceptable use may be suspended.
        </LegalP>
      </LegalSection>

      <LegalSection num="06" title="PRICING" accent={accent} tone={tone}>
        <LegalP>
          adley is free during the beta. when paid plans launch we will give at least 30 days' notice via email and in-app
          before any feature you currently use moves behind a paywall.
        </LegalP>
      </LegalSection>

      <LegalSection num="07" title="AVAILABILITY" accent={accent} tone={tone}>
        <LegalP>
          we aim for high uptime but do not guarantee 100%. alerts may be delayed or missed during maintenance,
          upstream rust server outages, platform push-provider outages (apple, google, expo), or network failures
          beyond our control. do not rely on adley as your sole defence mechanism.
        </LegalP>
      </LegalSection>

      <LegalSection num="08" title="THIRD PARTIES" accent={accent} tone={tone}>
        <LegalP>
          adley relies on a small set of service providers (identity, push delivery, hosting). the full list,
          purposes, and data flows are disclosed in our <LegalLink href="/privacy">privacy policy</LegalLink>.
          their terms and privacy policies apply in addition to ours.
        </LegalP>
      </LegalSection>

      <LegalSection num="09" title="TERMINATION" accent={accent} tone={tone}>
        <LegalP>
          you may delete your account at any time from settings. we may suspend or terminate accounts that violate
          these terms, with notice where practicable. on termination, your personal data is handled per our
          <LegalLink href="/privacy"> privacy policy</LegalLink>.
        </LegalP>
      </LegalSection>

      <LegalSection num="10" title="DISCLAIMER" accent={accent} tone={tone}>
        <LegalP>
          the service is provided "as is", without warranty of any kind. to the maximum extent permitted by law, our
          total liability for any claim relating to the service is limited to the greater of the amount you paid us in
          the 12 months preceding the claim, or USD 50.
        </LegalP>
      </LegalSection>

      <LegalSection num="11" title="NOT FACEPUNCH" accent={accent} tone={tone}>
        <LegalP>
          adley is an independent tool. we are not owned by, endorsed by, or otherwise affiliated with facepunch studios ltd.
          "rust" is a trademark of facepunch studios ltd.
        </LegalP>
      </LegalSection>

      <LegalSection num="12" title="CHANGES" accent={accent} tone={tone}>
        <LegalP>
          we may update these terms periodically. material changes will be announced in-app and by email. continued use
          after the effective date constitutes acceptance.
        </LegalP>
      </LegalSection>

      <LegalSection num="13" title="CONTACT" accent={accent} tone={tone}>
        <LegalP>
          questions about these terms: <LegalLink href="mailto:support@adley.gg">support@adley.gg</LegalLink>.
        </LegalP>
      </LegalSection>
    </LegalPageShell>
  );
}

// ─── DELETE ACCOUNT ────────────────────────────────────────────────────
// Public account-deletion instructions. Google Play requires a reachable
// URL describing how a user deletes their account + what data is removed
// vs retained. Mirrors the clerk user.deleted webhook cascade in the API.
function PageDeleteAccount({ accent, tone }) {
  return (
    <LegalPageShell
      accent={accent} tone={tone} active=""
      kicker="DELETE ACCOUNT"
      title={<>delete your account.<br/>and everything tied to it.</>}
      updated="2026-06-08"
      intro="how to delete your adley account, and exactly what we erase versus keep when you do."
    >
      <LegalSection num="00" title="TL;DR" accent={accent} tone={tone}>
        <LegalCallout accent={accent}>
          open the adley app → settings → danger zone → delete account. or email
          {' '}<LegalLink href="mailto:support@adley.gg">support@adley.gg</LegalLink> from your account
          email. your account and associated data are permanently erased; a small set of records is
          kept only where the law requires it.
        </LegalCallout>
      </LegalSection>

      <LegalSection num="01" title="DELETE FROM THE APP" accent={accent} tone={tone}>
        <LegalUL items={[
          'open adley and sign in.',
          <>go to <strong style={{ color: MK.text }}>settings → danger zone → delete account</strong>.</>,
          'confirm. your account is deleted immediately.',
        ]}/>
      </LegalSection>

      <LegalSection num="02" title="DELETE BY REQUEST" accent={accent} tone={tone}>
        <LegalP>
          if you can't reach the app, email <LegalLink href="mailto:support@adley.gg">support@adley.gg</LegalLink>{' '}
          from the address on your account with the subject "delete my account". we verify ownership and
          complete the deletion within 30 days (usually far sooner).
        </LegalP>
      </LegalSection>

      <LegalSection num="03" title="WHAT GETS DELETED" accent={accent} tone={tone}>
        <LegalUL items={[
          <><strong style={{ color: MK.text }}>account identity</strong> — email, name, avatar, oauth provider links (handled by clerk).</>,
          <><strong style={{ color: MK.text }}>push tokens</strong> — every device registered to you stops receiving notifications.</>,
          <><strong style={{ color: MK.text }}>armed frequencies</strong> — all raid registrations and the coordinates captured on trigger.</>,
          <><strong style={{ color: MK.text }}>server memberships</strong> — your membership in every server.</>,
          <><strong style={{ color: MK.text }}>squad membership</strong> — you're removed from all squads; squads you led transfer to another member, or are deleted if empty.</>,
          <><strong style={{ color: MK.text }}>encrypted server credentials + discord webhook URLs</strong> you added, where applicable.</>,
          <><strong style={{ color: MK.text }}>block + report records</strong> tied to your account.</>,
        ]}/>
      </LegalSection>

      <LegalSection num="04" title="WHAT WE KEEP" accent={accent} tone={tone}>
        <LegalUL items={[
          'billing records — required for tax/accounting law, retained up to 7 years (paid plans only; free users have no billing record).',
          'service logs — request method, path, status, latency. no identifiers tie back to you after deletion; purged on the normal 30-day window.',
        ]}/>
        <LegalP>nothing in the retained set can re-create your account or profile. we do not sell data.</LegalP>
      </LegalSection>

      <LegalSection num="05" title="CONTACT" accent={accent} tone={tone}>
        <LegalP>
          questions: <LegalLink href="mailto:support@adley.gg">support@adley.gg</LegalLink>. see also our{' '}
          <LegalLink href="/privacy">privacy policy</LegalLink>.
        </LegalP>
      </LegalSection>
    </LegalPageShell>
  );
}

Object.assign(window, {
  SectionHowItWorks, SectionFeatures, SectionStats, SectionTestimonials,
  SectionCompatibility, SectionFinalCTA, SectionFAQTeaser,
  MarketingLanding, PageHowItWorks, PageFeatures, PageFAQ, PagePrivacy, PageTerms, PageDeleteAccount,
  SystemDiagram, StepDiagram,
});