// Kafana — shared primitives. Lives on window for use across babel scripts.

// Wordmark — New York serif
function Wordmark({ size = 22, color }) {
  return (
    <span style={{
      fontFamily: 'var(--serif)',
      fontWeight: 600,
      fontSize: size,
      letterSpacing: '-0.02em',
      color: color || 'inherit',
      lineHeight: 1,
    }}>
      Kafana
    </span>
  );
}

// SF-Symbol-style line icons (1.5px stroke, rounded). Hand-tuned, not from a pack.
function Icon({ name, size = 20, color = 'currentColor', strokeWidth = 1.5 }) {
  const common = {
    width: size, height: size, viewBox: '0 0 24 24',
    fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round',
  };
  switch (name) {
    case 'glass':
      // tulip glass
      return (
        <svg {...common}>
          <path d="M8 3h8l-1 7a4 4 0 0 1-3 3 4 4 0 0 1-3-3l-1-7Z" />
          <path d="M12 13v6" />
          <path d="M9 20h6" />
        </svg>
      );
    case 'book':
      return (
        <svg {...common}>
          <path d="M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3V4Z" />
          <path d="M5 17a3 3 0 0 1 3-3h11" />
        </svg>
      );
    case 'passport':
      return (
        <svg {...common}>
          <rect x="5" y="3" width="14" height="18" rx="1.5" />
          <circle cx="12" cy="11" r="3" />
          <path d="M9 17h6" />
        </svg>
      );
    case 'camera':
      return (
        <svg {...common}>
          <path d="M3 8h3l2-2h8l2 2h3v11H3V8Z" />
          <circle cx="12" cy="13" r="3.5" />
        </svg>
      );
    case 'pin':
      return (
        <svg {...common}>
          <path d="M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12Z" />
          <circle cx="12" cy="9" r="2.5" />
        </svg>
      );
    case 'star':
      return (
        <svg {...common} fill={color} stroke="none">
          <path d="m12 3 2.6 5.6 6 .6-4.5 4.1 1.3 6L12 16.5 6.6 19.4l1.3-6L3.4 9.2l6-.6L12 3Z" />
        </svg>
      );
    case 'plus':
      return (
        <svg {...common}><path d="M12 5v14M5 12h14" /></svg>
      );
    case 'arrow':
      return (
        <svg {...common}><path d="M5 12h14M13 6l6 6-6 6" /></svg>
      );
    case 'check':
      return (
        <svg {...common}><path d="m5 12 4 4 10-10" /></svg>
      );
    case 'fruit':
      // simple plum
      return (
        <svg {...common}>
          <circle cx="12" cy="14" r="6" />
          <path d="M12 8c0-3 2-5 4-5" />
        </svg>
      );
    case 'still':
      // alembic / copper still silhouette
      return (
        <svg {...common}>
          <path d="M8 4h8v3l2 2v6a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9l2-2V4Z" />
          <path d="M16 9h4l-1 4" />
          <path d="M12 19v2" />
        </svg>
      );
    case 'globe':
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="9" />
          <path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18" />
        </svg>
      );
    default:
      return null;
  }
}

// Status bar for phone screens
function StatusBar({ time = '20:14', dark = false }) {
  const fg = dark ? 'var(--d-text)' : 'var(--ink)';
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '14px 24px 4px', height: 44,
      fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 600, color: fg,
    }}>
      <span style={{ fontVariantNumeric: 'tabular-nums' }}>{time}</span>
      <div style={{ width: 90 }} />
      <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
        {/* signal */}
        <svg width="17" height="11" viewBox="0 0 17 11" fill={fg}><rect x="0" y="7" width="3" height="4" rx="0.5"/><rect x="4.5" y="5" width="3" height="6" rx="0.5"/><rect x="9" y="2.5" width="3" height="8.5" rx="0.5"/><rect x="13.5" y="0" width="3" height="11" rx="0.5"/></svg>
        {/* battery */}
        <svg width="26" height="11" viewBox="0 0 26 11" fill="none">
          <rect x="0.5" y="0.5" width="22" height="10" rx="2.5" stroke={fg} strokeWidth="0.7"/>
          <rect x="2" y="2" width="18" height="7" rx="1.4" fill={fg}/>
          <rect x="23.5" y="3.5" width="2" height="4" rx="1" fill={fg}/>
        </svg>
      </div>
    </div>
  );
}

// Small coral/copper underline used to mark the active nav link state — ONE per viewport
function CopperRule({ width = 18 }) {
  return <div style={{ width, height: 2, background: 'var(--copper)', borderRadius: 2 }} />;
}

// Country list (Latin / Cyrillic). `id` matches BALKAN_PATHS.
const COUNTRIES = [
  { id: 'rs', latin: 'Serbia',                 cyr: 'Србија' },
  { id: 'hr', latin: 'Croatia',                cyr: 'Hrvatska', latinOnly: true },
  { id: 'ba', latin: 'Bosnia and Herzegovina', cyr: 'Босна и Херцеговина' },
  { id: 'me', latin: 'Montenegro',             cyr: 'Crna Gora', latinOnly: true },
  { id: 'mk', latin: 'North Macedonia',        cyr: 'Северна Македонија' },
  { id: 'al', latin: 'Albania',                cyr: 'Shqipëria', latinOnly: true },
  { id: 'si', latin: 'Slovenia',               cyr: 'Slovenija', latinOnly: true },
  { id: 'bg', latin: 'Bulgaria',               cyr: 'България' },
  { id: 'ro', latin: 'Romania',                cyr: 'România', latinOnly: true },
  { id: 'xk', latin: 'Kosovo',                 cyr: 'Kosovë', latinOnly: true },
];

// 12 fruits + spirits, alphabetical (Latin/Bosnian-Serbian-Croatian).
// `file` is the SVG icon basename in /assets/fruits.
const FRUITS = [
  { latin: 'Dunja',     en: 'Quince',     file: 'dunja' },
  { latin: 'Jabuka',    en: 'Apple',      file: 'jabuka' },
  { latin: 'Kajsija',   en: 'Apricot',    file: 'kajsija' },
  { latin: 'Kruška',    en: 'Pear',       file: 'kruska' },
  { latin: 'Loza',      en: 'Grape',      file: 'loza' },
  { latin: 'Malina',    en: 'Raspberry',  file: 'malina' },
  { latin: 'Medovača',  en: 'Honey',      file: 'medovaca' },
  { latin: 'Orah',      en: 'Walnut',     file: 'orah' },
  { latin: 'Šljiva',    en: 'Plum',       file: 'sljiva' },
  { latin: 'Smokva',    en: 'Fig',        file: 'smokva' },
  { latin: 'Travarica', en: 'Herb',       file: 'travarica' },
  { latin: 'Višnja',    en: 'Sour cherry', file: 'visnja' },
];

// Geographically accurate Balkan map. Country paths baked at build time from
// world-atlas Natural Earth 50m (see balkan-paths.js), projected equirectangular
// with cos(midLat) correction onto a 320×260 viewBox.
function BalkanMap({ width = 280, visited = ['rs', 'ba', 'me', 'hr', 'mk'], dark = false }) {
  const stroke = dark ? 'var(--d-whisper)' : 'var(--whisper)';
  const visitedFill = 'var(--copper)';
  const baseFill = dark ? '#2C2924' : 'var(--honey-light)';
  const labelColor = dark ? 'var(--d-smoke)' : 'var(--smoke)';
  // Render order matters — large containers first so visited fills sit on top.
  return (
    <svg width={width} viewBox={window.BALKAN_VB || '0 0 320 260'} style={{ display: 'block' }}>
      {window.BALKAN_PATHS.map(c => {
        const isVisited = visited.includes(c.id);
        return (
          <path key={c.id} d={c.d}
            fill={isVisited ? visitedFill : baseFill}
            stroke={stroke} strokeWidth="0.5"
            strokeLinejoin="round" />
        );
      })}
      {window.BALKAN_PATHS.map(c => {
        const isVisited = visited.includes(c.id);
        return (
          <text key={c.id+'_t'} x={c.cx} y={c.cy}
            textAnchor="middle"
            style={{
              fontFamily: 'var(--mono)', fontSize: 9, fontWeight: 600,
              fill: isVisited ? 'var(--cream)' : labelColor,
              letterSpacing: '0.05em',
            }}>{c.label}</text>
        );
      })}
    </svg>
  );
}

// CountryMark — a tiny Balkans map highlighting just one country in copper.
// Uses the same baked geographic paths as BalkanMap. Shape variation per
// country gives each its own visual fingerprint.
function CountryMark({ id, size = 80, dark = false }) {
  const stroke = dark ? 'var(--d-whisper)' : 'var(--whisper)';
  const muted = dark ? 'rgba(241,239,232,0.10)' : 'rgba(74,27,12,0.10)';
  const visited = 'var(--copper)';
  const vb = window.BALKAN_VB || '0 0 320 260';
  return (
    <svg width={size} viewBox={vb} style={{ display: 'block' }}>
      {window.BALKAN_PATHS.map(c => (
        <path key={c.id} d={c.d}
          fill={c.id === id ? visited : muted}
          stroke={stroke} strokeWidth="0.5"
          strokeLinejoin="round" />
      ))}
    </svg>
  );
}

// Inline-replaced above; legacy stub removed.

Object.assign(window, { Wordmark, Icon, StatusBar, CopperRule, COUNTRIES, FRUITS, BalkanMap, CountryMark });