// marketing-shared.jsx — tokens, chrome, atoms for the Adley marketing site
// Three tones: 'cli' (terminal-extreme), 'tactical' (default), 'polished' (modern w/ accents)

const MK = {
  bg: '#04040A',
  bg2: '#08090E',
  panel: '#0B0B12',
  panelHi: '#11121A',
  line: '#1E1E26',
  line2: '#2A2A34',
  line3: '#3A3A47',
  text: '#E8E8EF',
  dim: '#8B8F9E',
  mute: '#54586A',
  ok: '#3DDC97',
  danger: '#FF3B30',
};

const MK_MONO = "ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace";
const MK_SANS = "'Inter', -apple-system, 'SF Pro Text', system-ui, sans-serif";

// Tone config — drives type scale + chrome density
function toneConfig(tone) {
  if (tone === 'cli') return {
    bodyFont: MK_MONO,
    headlineFont: MK_MONO,
    headlineScale: 1,
    headlineWeight: 700,
    headlineCase: 'uppercase',
    bodyCase: 'lowercase',
    sectionPad: 80,
    scanlines: true,
    dashed: '0.4 1.2',
    rule: 'ascii',
    kickerPrefix: '// ',
  };
  if (tone === 'polished') return {
    bodyFont: MK_SANS,
    headlineFont: MK_SANS,
    headlineScale: 1.15,
    headlineWeight: 700,
    headlineCase: 'none',
    bodyCase: 'none',
    sectionPad: 120,
    scanlines: false,
    dashed: '0.4 1.2',
    rule: 'hairline',
    kickerPrefix: '',
  };
  return { // tactical (default)
    bodyFont: MK_SANS,
    headlineFont: MK_SANS,
    headlineScale: 1,
    headlineWeight: 700,
    headlineCase: 'none',
    bodyCase: 'lowercase',
    sectionPad: 100,
    scanlines: false,
    dashed: '0.4 1.2',
    rule: 'dashed',
    kickerPrefix: '',
  };
}

// ─── Hairline rule ───
function MKRule({ tone, color, char }) {
  const t = toneConfig(tone);
  if (t.rule === 'ascii') {
    return <div style={{ fontFamily: MK_MONO, fontSize: 12, color: color || MK.line3, lineHeight: 1,
      whiteSpace: 'nowrap', overflow: 'hidden', userSelect: 'none' }}>
      {(char || '─').repeat(220)}
    </div>;
  }
  if (t.rule === 'hairline') {
    return <div style={{ height: 1, background: color || MK.line }}/>;
  }
  return <div style={{ height: 1, background: `repeating-linear-gradient(to right, ${color || MK.line2} 0 4px, transparent 4px 10px)` }}/>;
}

// ─── Kicker (mono label above headings) ───
function MKKicker({ children, accent, tone }) {
  const t = toneConfig(tone);
  return (
    <div style={{ fontFamily: MK_MONO, fontSize: 11, letterSpacing: 3, color: accent,
      textTransform: 'uppercase', fontWeight: 600 }}>
      {t.kickerPrefix}{children}
    </div>
  );
}

// ─── Buttons ───
function MKBtnPrimary({ children, accent, size = 'md', icon = '→', style }) {
  const pad = size === 'lg' ? '18px 28px' : size === 'sm' ? '10px 16px' : '14px 22px';
  const fs = size === 'lg' ? 15 : size === 'sm' ? 12 : 13;
  return (
    <button style={{
      padding: pad, background: accent, color: '#000', border: 0, cursor: 'pointer',
      fontFamily: MK_MONO, fontSize: fs, fontWeight: 700, letterSpacing: 2,
      textTransform: 'uppercase',
      display: 'inline-flex', alignItems: 'center', gap: 10, ...style,
    }}>
      {children} <span>{icon}</span>
    </button>
  );
}

function MKBtnGhost({ children, size = 'md', style }) {
  const pad = size === 'lg' ? '18px 28px' : size === 'sm' ? '10px 16px' : '14px 22px';
  const fs = size === 'lg' ? 15 : size === 'sm' ? 12 : 13;
  return (
    <button style={{
      padding: pad, background: 'transparent', color: MK.text, border: `1px solid ${MK.line3}`, cursor: 'pointer',
      fontFamily: MK_MONO, fontSize: fs, letterSpacing: 2, fontWeight: 600,
      textTransform: 'uppercase',
      display: 'inline-flex', alignItems: 'center', gap: 10, ...style,
    }}>
      {children}
    </button>
  );
}

// ─── Store buttons (App Store / Google Play) ───
// Apple → live App Store listing. Google → placeholder until android
// ships; click drops to a "coming soon" anchor on the landing page so
// users don't hit a dead store URL.
const APP_STORE_URL = 'https://apps.apple.com/us/app/adley-rust-console-companion/id6771007854';
const PLAY_STORE_URL = '/#install';

function StoreButton({ store, accent }) {
  const isApple = store === 'apple';
  const href = isApple ? APP_STORE_URL : PLAY_STORE_URL;
  const target = isApple ? '_blank' : undefined;
  const rel = isApple ? 'noreferrer' : undefined;
  return (
    <a href={href} target={target} rel={rel} style={{
      display: 'inline-flex', alignItems: 'center', gap: 12, padding: '12px 20px',
      background: '#000', border: `1px solid ${MK.line3}`, color: MK.text, textDecoration: 'none',
      minWidth: 180, cursor: 'pointer',
      opacity: isApple ? 1 : 0.6,
    }}>
      {isApple ? (
        <svg width="26" height="32" viewBox="0 0 24 30" fill="#fff">
          <path d="M16.4 15.7c0-3 2.5-4.5 2.6-4.6-1.4-2.1-3.6-2.4-4.4-2.4-1.9-.2-3.6 1.1-4.6 1.1-.9 0-2.4-1.1-4-1-2 0-3.9 1.2-5 3-2.1 3.6-.5 9 1.6 11.9 1 1.4 2.2 3 3.8 3 1.5-.1 2.1-1 3.9-1 1.8 0 2.4 1 4 1 1.6 0 2.7-1.5 3.7-2.9 1.2-1.7 1.6-3.3 1.7-3.4-.1-.1-3.3-1.3-3.3-4.7zm-3-8.6c.8-1 1.4-2.4 1.2-3.8-1.2.1-2.6.8-3.4 1.8-.7.9-1.4 2.3-1.2 3.7 1.3.1 2.6-.7 3.4-1.7z"/>
        </svg>
      ) : (
        <svg width="26" height="32" viewBox="0 0 24 30">
          <defs>
            <linearGradient id="play-a" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0" stopColor="#00C9F0"/><stop offset="1" stopColor="#0070D9"/>
            </linearGradient>
            <linearGradient id="play-b" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#FFD600"/><stop offset="1" stopColor="#FF8B00"/>
            </linearGradient>
            <linearGradient id="play-c" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0" stopColor="#FF3D00"/><stop offset="1" stopColor="#C30E0E"/>
            </linearGradient>
          </defs>
          <path fill="url(#play-a)" d="M3 4v22l11-11z"/>
          <path fill="url(#play-b)" d="M14 15l4-4-11-7v0z" opacity="0.9"/>
          <path fill="url(#play-c)" d="M14 15l4 4-11 7v0z"/>
          <path fill="#fff" d="M14 15l4-4 3 1.7c1.4.8 1.4 2.7 0 3.5L18 18z" opacity="0.05"/>
        </svg>
      )}
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <span style={{ fontFamily: MK_SANS, fontSize: 10, color: MK.dim, letterSpacing: 0.5, marginBottom: 2 }}>
          {isApple ? 'Download on the' : 'Coming soon to'}
        </span>
        <span style={{ fontFamily: MK_SANS, fontSize: 17, color: MK.text, fontWeight: 600, letterSpacing: 0.2 }}>
          {isApple ? 'App Store' : 'Google Play'}
        </span>
      </div>
    </a>
  );
}

// ─── Logo ───
function AdleyLogo({ accent, size = 26 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <svg width={size} height={size} viewBox="0 0 32 32">
        <circle cx="16" cy="16" r="14" fill="none" stroke={accent} strokeWidth="1.4" strokeDasharray="0.6 1.8" pathLength="100"/>
        <circle cx="16" cy="16" r="9" fill="none" stroke={accent} strokeWidth="1" strokeOpacity="0.5" strokeDasharray="0.6 1.8" pathLength="100"/>
        <circle cx="16" cy="16" r="3" fill={accent}/>
        <line x1="2" y1="16" x2="6" y2="16" stroke={accent} strokeWidth="1.2"/>
        <line x1="26" y1="16" x2="30" y2="16" stroke={accent} strokeWidth="1.2"/>
        <line x1="16" y1="2" x2="16" y2="6" stroke={accent} strokeWidth="1.2"/>
        <line x1="16" y1="26" x2="16" y2="30" stroke={accent} strokeWidth="1.2"/>
      </svg>
      <span style={{ fontFamily: MK_MONO, fontSize: size * 0.7, fontWeight: 700, letterSpacing: 4, color: MK.text }}>
        ADLEY
      </span>
    </div>
  );
}

// ─── Top nav ───
function MKNav({ accent, tone, active = 'home', width = 1280 }) {
  const links = [
    { id: 'home',     label: 'HOME',         href: '/' },
    { id: 'how',      label: 'HOW IT WORKS', href: '/how' },
    { id: 'features', label: 'FEATURES',     href: '/features' },
    { id: 'faq',      label: 'FAQ',          href: '/faq' },
  ];
  return (
    <div className="mk-nav-shell" style={{ position: 'sticky', top: 0, zIndex: 50,
      width: '100vw', marginLeft: 'calc(50% - 50vw)', marginRight: 'calc(50% - 50vw)',
      borderBottom: '1px solid rgba(255,255,255,0.08)',
      background: 'linear-gradient(180deg, rgba(20,19,17,0.7), rgba(9,9,8,0.55))',
      backdropFilter: 'blur(22px) saturate(1.3)', WebkitBackdropFilter: 'blur(22px) saturate(1.3)',
      boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 30px rgba(0,0,0,0.35)' }}>
      <div className="mk-nav" style={{ maxWidth: width, margin: '0 auto', padding: '20px 40px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <AdleyLogo accent={accent}/>
        <div className="mk-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
          {links.map(l => (
            <a key={l.id} href={l.href} style={{
              fontFamily: MK_MONO, fontSize: 11, letterSpacing: 2.5, textDecoration: 'none', fontWeight: 600,
              color: active === l.id ? accent : '#d9dce4', position: 'relative', cursor: 'pointer',
              textShadow: '0 1px 8px rgba(0,0,0,0.7)',
            }}>
              {active === l.id && <span style={{ position: 'absolute', left: -14, top: 2, fontFamily: MK_MONO, fontSize: 11, color: accent }}>▸</span>}
              {l.label}
            </a>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span className="mk-nav-status" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: MK_MONO, fontSize: 10, color: MK.dim, letterSpacing: 2 }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: MK.ok, boxShadow: `0 0 6px ${MK.ok}` }}/>
            EDGE ONLINE
          </span>
          <a href="#install" style={{ textDecoration: 'none' }}><MKBtnPrimary accent={accent} size="sm">DOWNLOAD</MKBtnPrimary></a>
        </div>
      </div>
    </div>
  );
}

// ─── Footer ───
function MKFooter({ accent, tone, width = 1280 }) {
  return (
    <div style={{ borderTop: `1px solid ${MK.line}`, background: MK.bg2 }}>
      <div className="mk-pad-section" style={{ maxWidth: width, margin: '0 auto', padding: '60px 40px 40px' }}>
        <div className="mk-row-footer" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 40, marginBottom: 60 }}>
          <div>
            <AdleyLogo accent={accent}/>
            <div style={{ fontFamily: MK_SANS, fontSize: 13, color: MK.dim, marginTop: 14, lineHeight: 1.5, maxWidth: 280 }}>
              the raid radar for rust console. real-time alerts from your base to your phone, in under a second.
            </div>
            <div style={{ fontFamily: MK_MONO, fontSize: 10, color: MK.mute, marginTop: 18, letterSpacing: 2 }}>
              BETA · 2026
            </div>
          </div>
          {[
            ['PRODUCT', [['How it works', '/how'], ['Features', '/features'], ['FAQ', '/faq'], ['Download', '/#install']]],
            ['SUPPORT', [['Contact', 'mailto:support@adley.gg'], ['Abuse reports', 'mailto:abuse@adley.gg'], ['Discord', 'https://discord.gg/wwzqrDryVn']]],
            ['LEGAL',   [['Terms', '/terms'], ['Privacy', '/privacy']]],
            ['COMMUNITY', [['Discord', 'https://discord.gg/wwzqrDryVn'], ['X / Twitter', 'https://x.com/adley_gg']]],
          ].map(([title, items]) => (
            <div key={title}>
              <div style={{ fontFamily: MK_MONO, fontSize: 10, color: accent, letterSpacing: 3, marginBottom: 14 }}>{title}</div>
              {items.map(([label, href]) => (
                <a key={label} href={href} style={{ display: 'block', fontFamily: MK_SANS, fontSize: 13, color: MK.dim, marginBottom: 10, textDecoration: 'none' }}>{label}</a>
              ))}
            </div>
          ))}
        </div>
        <div style={{ height: 1, background: MK.line, marginBottom: 24 }}/>
        <div className="mk-row-footer-meta" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: MK_MONO, fontSize: 10, color: MK.mute, letterSpacing: 1.5, gap: 12, flexWrap: 'wrap' }}>
          <span>© 2026 ADLEY OPS · UNAFFILIATED WITH FACEPUNCH STUDIOS</span>
          <span>MADE FOR PLAYERS WHO RAID AT NIGHT</span>
        </div>
      </div>
    </div>
  );
}

// ─── Mini phone (used inside feature grids etc) ───
// Wraps the existing MC screens at smaller scale.
function MiniPhone({ children, w = 280, dark = true }) {
  const scale = w / 390;
  const innerH = 844;
  return (
    <div style={{ width: w, height: innerH * scale, position: 'relative' }}>
      <div style={{
        position: 'absolute', inset: 0, width: 390, height: innerH,
        transform: `scale(${scale})`, transformOrigin: 'top left',
      }}>
        <div style={{
          width: 390, height: innerH, borderRadius: 48, overflow: 'hidden',
          background: '#000', position: 'relative',
          boxShadow: '0 0 0 8px #161616, 0 0 0 9px #2a2a2a, 0 0 0 12px #0a0a0a, 0 40px 80px rgba(0,0,0,0.6)',
        }}>
          <div style={{ position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
            width: 126, height: 37, borderRadius: 24, background: '#000', zIndex: 50 }}/>
          {children}
          <div style={{ position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)',
            width: 134, height: 5, borderRadius: 100, background: 'rgba(255,255,255,0.5)', zIndex: 70 }}/>
        </div>
      </div>
    </div>
  );
}

// ─── Scanline overlay (for cli tone) ───
function MKScanlines() {
  return <div style={{
    position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 100,
    background: 'repeating-linear-gradient(to bottom, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px)',
    mixBlendMode: 'screen',
  }}/>;
}

// ─── Page shell — wraps everything in 1280-wide column with nav + footer ───
function MKPage({ children, accent, tone, active, width = 1280, noFooter = false }) {
  const t = toneConfig(tone);
  return (
    <div style={{ width: '100%', maxWidth: width, margin: '0 auto',
      background: MK.bg, color: MK.text, fontFamily: t.bodyFont,
      textTransform: t.bodyCase === 'lowercase' ? 'none' : 'none', position: 'relative' }}>
      <MKNav accent={accent} tone={tone} active={active} width={width}/>
      {children}
      {!noFooter && <MKFooter accent={accent} tone={tone} width={width}/>}
      {t.scanlines && <MKScanlines/>}
    </div>
  );
}

Object.assign(window, {
  MK, MK_MONO, MK_SANS, toneConfig,
  MKRule, MKKicker, MKBtnPrimary, MKBtnGhost, StoreButton, AdleyLogo,
  MKNav, MKFooter, MiniPhone, MKScanlines, MKPage,
});