// Shared site shell — nav, footer, password gate, intro animation.
// Each page imports this and wraps its content in <SiteShell>.
//
// Active route is passed as `route` prop so nav can highlight it.

const ORANGE = '#E8633A';
const BLACK = '#0A0A0B';
const GREEN = '#1FB875';
const YELLOW = '#E5B100';

// ── theme ─────────────────────────────────────────
const THEME_KEY = 'evnted_theme';

function getInitialTheme() {
  try { return localStorage.getItem(THEME_KEY) || 'dark'; }
  catch (e) { return 'dark'; }
}

function applyTheme(t) {
  if (t === 'light') document.documentElement.classList.add('theme-light');
  else document.documentElement.classList.remove('theme-light');
  try { localStorage.setItem(THEME_KEY, t); } catch (e) {}
}

// Apply immediately so first paint matches stored preference
if (typeof document !== 'undefined') applyTheme(getInitialTheme());

function useTheme() {
  const [theme, setTheme] = React.useState(getInitialTheme);
  React.useEffect(() => { applyTheme(theme); }, [theme]);
  return [theme, setTheme];
}

function ThemeToggle({ theme, onChange }) {
  const isLight = theme === 'light';
  return (
    <button
      onClick={() => onChange(isLight ? 'dark' : 'light')}
      aria-label={`Switch to ${isLight ? 'dark' : 'light'} mode`}
      style={{
        width: 56, height: 30, borderRadius: 999,
        background: 'var(--bg-soft)',
        border: '1px solid var(--hairline-strong)',
        position: 'relative', cursor: 'pointer', padding: 0,
        transition: 'background 0.2s ease',
      }}
    >
      <span style={{
        position: 'absolute', top: 2, left: isLight ? 28 : 2,
        width: 24, height: 24, borderRadius: '50%',
        background: isLight ? '#0A0A0B' : '#FBFAF7',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        transition: 'left 0.22s cubic-bezier(.4,1.4,.6,1)',
      }}>
        {isLight ? (
          <svg width="12" height="12" viewBox="0 0 24 24" fill="#FBFAF7">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
          </svg>
        ) : (
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
               stroke="#0A0A0B" strokeWidth="2" strokeLinecap="round">
            <circle cx="12" cy="12" r="4" fill="#0A0A0B"/>
            <line x1="12" y1="3" x2="12" y2="5"/>
            <line x1="12" y1="19" x2="12" y2="21"/>
            <line x1="3" y1="12" x2="5" y2="12"/>
            <line x1="19" y1="12" x2="21" y2="12"/>
            <line x1="5.6" y1="5.6" x2="7" y2="7"/>
            <line x1="17" y1="17" x2="18.4" y2="18.4"/>
            <line x1="5.6" y1="18.4" x2="7" y2="17"/>
            <line x1="17" y1="7" x2="18.4" y2="5.6"/>
          </svg>
        )}
      </span>
    </button>
  );
}

function EvntdMark({ size = 26, color, dotColor }) {
  const dotSize = Math.max(4, size * 0.18);
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center',
      gap: size * 0.18, fontWeight: 800, fontSize: size,
      lineHeight: 1, letterSpacing: '-0.04em',
      color: color || 'var(--fg)',
      fontFamily: '"Geist", system-ui, sans-serif',
    }}>
      <span>Evnt</span>
      <span style={{
        width: dotSize, height: dotSize, borderRadius: '50%',
        background: dotColor || ORANGE, display: 'inline-block', marginBottom: size * 0.05,
      }}/>
      <span>d</span>
    </span>
  );
}

function TrafficDots({ size = 12, gap = 10 }) {
  const ring = (color) => ({
    width: size, height: size, borderRadius: '50%',
    border: `2px solid ${color}`, background: 'transparent',
  });
  return (
    <div style={{ display: 'inline-flex', gap, alignItems: 'center' }}>
      <div style={{ width: size, height: size, borderRadius: '50%', background: GREEN }}/>
      <div style={ring(YELLOW)}/>
      <div style={ring(ORANGE)}/>
    </div>
  );
}

function SiteNav({ route, theme, setTheme }) {
  const items = [
    { href: '/about/',    label: 'Learn',    key: 'about' },
    { href: '/support/',  label: 'Support',  key: 'support' },
  ];
  return (
    <div style={{
      height: 72, padding: '0 48px', display: 'flex',
      alignItems: 'center', justifyContent: 'space-between',
      borderBottom: '1px dashed var(--hairline)',
      position: 'sticky', top: 0, background: 'var(--bg)', zIndex: 50,
    }}>
      <a href="/" style={{ display: 'flex', alignItems: 'center',
        gap: 16, textDecoration: 'none' }}>
        <EvntdMark/>
      </a>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        {items.map(it => (
          <a key={it.key} href={it.href} style={{
            padding: '10px 16px', borderRadius: 999,
            fontSize: 14, fontWeight: 500, textDecoration: 'none',
            color: route === it.key ? 'var(--fg)' : 'var(--fg-soft)',
            background: route === it.key ? 'var(--bg-soft)' : 'transparent',
            transition: 'background .15s, color .15s',
          }}>{it.label}</a>
        ))}
        <span style={{ marginLeft: 12, marginRight: 4 }}>
          <ThemeToggle theme={theme} onChange={setTheme}/>
        </span>
        <a href="/download/" style={{
          marginLeft: 8, padding: '10px 18px', borderRadius: 999,
          background: ORANGE, color: '#fff', fontSize: 13.5, fontWeight: 600,
          textDecoration: 'none',
        }}>Get the app</a>
      </div>
    </div>
  );
}

function StoreBadge({ type, onDark = false }) {
  // onDark=true → white badge with black text (used on orange/dark backgrounds)
  // onDark=false → flips with theme
  const isApple = type === 'apple';
  const bg = onDark ? '#fff' : 'var(--fg)';
  const fg = onDark ? '#0A0A0B' : 'var(--bg)';
  return (
    <a href="#" style={{
      height: 56, padding: '0 22px', borderRadius: 14,
      background: bg, color: fg,
      display: 'inline-flex', alignItems: 'center', gap: 12,
      cursor: 'pointer', userSelect: 'none', minWidth: 200,
      textDecoration: 'none',
    }}>
      {isApple ? (
        <svg width="26" height="32" viewBox="0 0 24 28" fill="currentColor">
          <path d="M17.05 14.92c-.03-3 2.45-4.43 2.56-4.5-1.4-2.04-3.57-2.32-4.34-2.35-1.85-.19-3.6 1.08-4.54 1.08-.94 0-2.38-1.05-3.92-1.02-2.02.03-3.88 1.17-4.92 2.97-2.1 3.63-.54 9.01 1.51 11.97 1 1.45 2.2 3.07 3.74 3.01 1.5-.06 2.07-.97 3.88-.97 1.81 0 2.32.97 3.91.94 1.62-.03 2.64-1.47 3.63-2.93 1.14-1.69 1.61-3.31 1.64-3.4-.04-.02-3.14-1.21-3.17-4.79zM14 5.66C14.83 4.66 15.4 3.27 15.24 1.9c-1.2.05-2.66.8-3.52 1.8-.77.88-1.45 2.29-1.27 3.65 1.34.1 2.71-.69 3.55-1.69z"/>
        </svg>
      ) : (
        <svg width="26" height="28" viewBox="0 0 24 26" fill="currentColor">
          <path d="M3.6 1.3 13.4 11 3.6 20.7c-.4-.2-.6-.6-.6-1.1V2.4c0-.5.2-.9.6-1.1zm11 9.7L4.7 0 17 7c.7.4.7 1.4 0 1.8L14.6 11zm0 2L17 17c.7.4.7 1.4 0 1.8L4.7 26l9.9-13zm-9.9 13.7 9.9-9.7L17 19l-12.3 7z"/>
        </svg>
      )}
      <div>
        <div style={{ fontSize: 10, opacity: 0.7, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
          {isApple ? 'Download on the' : 'Get it on'}
        </div>
        <div style={{ fontSize: 18, fontWeight: 700, marginTop: -2 }}>
          {isApple ? 'App Store' : 'Google Play'}
        </div>
      </div>
    </a>
  );
}

function SiteFooter() {
  return (
    <div style={{
      padding: '60px 48px 40px',
      borderTop: '1px solid var(--hairline)',
      color: 'var(--fg)',
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
        marginBottom: 60, gap: 40, flexWrap: 'wrap',
      }}>
        <div>
          <EvntdMark size={32}/>
          <div style={{
            color: 'var(--fg-mute)', fontSize: 14, marginTop: 14, maxWidth: 320,
          }}>
            Find your people. Make it real.
          </div>
          <div style={{ marginTop: 16 }}>
            <TrafficDots/>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 56, fontSize: 14 }}>
          <FooterCol title="App" links={[
            ['Get the app', '/download/'],
            ['Learn',       '/about/'],
            ['Support',     '/support/'],
          ]}/>
          <FooterCol title="Company" links={[
            ['About',    '/about/'],
            ['Contact',  'mailto:hello@evnted.com'],
            ['Press',    '/press/'],
          ]}/>
          <FooterCol title="Legal" links={[
            ['Privacy',  '/support/#privacy'],
            ['Terms',    '/support/#terms'],
            ['Cookies',  '/support/#cookies'],
          ]}/>
        </div>
      </div>
      <div style={{
        display: 'flex', justifyContent: 'space-between',
        fontSize: 12, color: 'var(--fg-mute)',
        borderTop: '1px dashed var(--hairline)', paddingTop: 24,
      }}>
        <span>© 2026 Evnted Oy. All rights reserved.</span>
        <span>evnted.com</span>
      </div>
    </div>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div style={{ fontWeight: 600, marginBottom: 12, color: 'var(--fg)' }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8,
        color: 'var(--fg-soft)' }}>
        {links.map(([l, h]) => (
          <a key={l} href={h} style={{ color: 'inherit', textDecoration: 'none' }}>{l}</a>
        ))}
      </div>
    </div>
  );
}

function SiteShell({ route, children }) {
  const [theme, setTheme] = useTheme();
  return (
    <div style={{
      background: 'var(--bg)', color: 'var(--fg)', minHeight: '100vh',
      fontFamily: '"Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
      letterSpacing: '-0.01em',
      transition: 'background 0.25s ease, color 0.25s ease',
    }}>
      <SiteNav route={route} theme={theme} setTheme={setTheme}/>
      {children}
      <SiteFooter/>
    </div>
  );
}

Object.assign(window, {
  ORANGE, BLACK, GREEN, YELLOW,
  EvntdMark, TrafficDots, SiteNav, StoreBadge, SiteFooter, FooterCol, SiteShell,
  ThemeToggle, useTheme,
});