// i18n.jsx — translations + language context for Calendify video (NL / EN / NO)

const LANGS = {
  nl: {
    label: 'NL',
    name: 'Mark de Vries',
    eventTitle: '30-min strategiegesprek',
    // Scene 1
    headline: 'Deel één link. Laat gasten zelf inplannen.',
    sub: 'Calendify.ai handelt de rest af — kalender, bevestiging, reminders.',
    copyBtn: 'Kopieer link',
    copiedBtn: 'Gekopieerd',
    // Scene 2
    days: ['MA','DI','WO','DO','VR','ZA','ZO'],
    dateHeading: 'Woensdag 13 mei',
    min: '30 min',
    confirmTitle: 'Ingepland · wo 13 mei',
    confirmSub: '10:00 – 10:30 · Google Meet',
    // Scene 3
    syncCap: { a: 'Werkt met tools die je al ', hi: 'gebruikt', b: '.' },
    payLabel: 'Betaling · Factuur #INV-2481',
    paidBadge: 'BETAALD',
    price: '€ 45,00',
    lnService: 'Service',
    lnClient: 'Klant',
    lnMethod: 'Methode',
    // Scene 4
    teamLabel: 'Sales team · round-robin',
    assigned: 'Toegewezen aan Sanne',
    assignedTime: 'di 10:00',
    searching: 'zoekt de eerstvolgende beschikbare…',
    teamCap: { a: 'Ook voor ', hi: 'teams', b: '.' },
    // Scene 5
    tagline: 'Boek tijd. Skip het heen-en-weer gemail.',
    cta: 'Start gratis',
  },
  en: {
    label: 'EN',
    name: 'Mark de Vries',
    eventTitle: '30-min strategy call',
    headline: 'Share one link. Let guests book themselves.',
    sub: 'Calendify.ai handles the rest — calendar, confirmation, reminders.',
    copyBtn: 'Copy link',
    copiedBtn: 'Copied',
    days: ['MON','TUE','WED','THU','FRI','SAT','SUN'],
    dateHeading: 'Wednesday 13 May',
    min: '30 min',
    confirmTitle: 'Booked · Wed 13 May',
    confirmSub: '10:00 – 10:30 · Google Meet',
    syncCap: { a: 'Works with tools you already ', hi: 'use', b: '.' },
    payLabel: 'Payment · Invoice #INV-2481',
    paidBadge: 'PAID',
    price: '€45.00',
    lnService: 'Service',
    lnClient: 'Client',
    lnMethod: 'Method',
    teamLabel: 'Sales team · round-robin',
    assigned: 'Assigned to Sanne',
    assignedTime: 'Tue 10:00',
    searching: 'finding the next available…',
    teamCap: { a: 'For ', hi: 'teams', b: ', too.' },
    tagline: 'Book time. Skip the back-and-forth.',
    cta: 'Start free',
  },
  no: {
    label: 'NO',
    name: 'Mark de Vries',
    eventTitle: '30-min strategimøte',
    headline: 'Del én lenke. La gjestene booke selv.',
    sub: 'Calendify.ai ordner resten — kalender, bekreftelse, påminnelser.',
    copyBtn: 'Kopier lenke',
    copiedBtn: 'Kopiert',
    days: ['MAN','TIR','ONS','TOR','FRE','LØR','SØN'],
    dateHeading: 'Onsdag 13. mai',
    min: '30 min',
    confirmTitle: 'Booket · ons 13. mai',
    confirmSub: '10:00 – 10:30 · Google Meet',
    syncCap: { a: 'Fungerer med verktøy du allerede ', hi: 'bruker', b: '.' },
    payLabel: 'Betaling · Faktura #INV-2481',
    paidBadge: 'BETALT',
    price: 'kr 450',
    lnService: 'Tjeneste',
    lnClient: 'Kunde',
    lnMethod: 'Metode',
    teamLabel: 'Salgsteam · round-robin',
    assigned: 'Tildelt Sanne',
    assignedTime: 'tir 10:00',
    searching: 'finner neste ledige…',
    teamCap: { a: 'Også for ', hi: 'team', b: '.' },
    tagline: 'Book tid. Dropp e-postpinglingen.',
    cta: 'Kom i gang gratis',
  },
  de: {
    label: 'DE',
    name: 'Mark de Vries',
    eventTitle: '30-Min-Strategiegespräch',
    headline: 'Teile einen Link. Lass Gäste selbst buchen.',
    sub: 'Calendify.ai erledigt den Rest — Kalender, Bestätigung, Erinnerungen.',
    copyBtn: 'Link kopieren',
    copiedBtn: 'Kopiert',
    days: ['MO','DI','MI','DO','FR','SA','SO'],
    dateHeading: 'Mittwoch, 13. Mai',
    min: '30 Min',
    confirmTitle: 'Gebucht · Mi 13. Mai',
    confirmSub: '10:00 – 10:30 · Google Meet',
    syncCap: { a: 'Funktioniert mit Tools, die du bereits ', hi: 'nutzt', b: '.' },
    payLabel: 'Zahlung · Rechnung #INV-2481',
    paidBadge: 'BEZAHLT',
    price: '45,00 €',
    lnService: 'Leistung',
    lnClient: 'Kunde',
    lnMethod: 'Methode',
    teamLabel: 'Sales-Team · Round-Robin',
    assigned: 'Zugewiesen an Sanne',
    assignedTime: 'Di 10:00',
    searching: 'sucht den nächsten freien…',
    teamCap: { a: 'Auch für ', hi: 'Teams', b: '.' },
    tagline: 'Buche Zeit. Spar dir das Hin und Her.',
    cta: 'Kostenlos starten',
  },
};

const LangContext = React.createContext({ lang: 'nl', t: LANGS.nl, setLang: () => {} });
const useT = () => React.useContext(LangContext).t;
const useLang = () => React.useContext(LangContext);

// Language switcher — fixed top-right, outside the scaled canvas
function LangSwitcher() {
  const { lang, setLang } = useLang();
  const order = ['en', 'nl', 'no', 'de'];
  return (
    <div style={{
      position: 'fixed', top: 16, right: 16, zIndex: 9999,
      display: 'flex', gap: 4,
      padding: 4,
      background: 'rgba(255,255,255,0.92)',
      border: '1px solid rgba(20,22,40,0.1)',
      borderRadius: 999,
      boxShadow: '0 6px 20px -6px rgba(20,22,40,0.25)',
      backdropFilter: 'blur(8px)',
      fontFamily: '"Space Grotesk", system-ui, sans-serif',
    }}>
      {order.map(code => {
        const active = code === lang;
        return (
          <button key={code} onClick={() => setLang(code)} style={{
            border: 'none',
            padding: '7px 14px',
            borderRadius: 999,
            background: active ? '#2F6BFF' : 'transparent',
            color: active ? '#fff' : '#6b7280',
            fontFamily: 'inherit',
            fontSize: 13, fontWeight: 600,
            letterSpacing: '0.02em',
            cursor: 'pointer',
            transition: 'color 140ms',
          }}>{LANGS[code].label}</button>
        );
      })}
    </div>
  );
}

// When embedded on the site, the page forces the language via ?lang= and the
// in-video switcher is hidden (the site has its own switcher). Standalone, the
// switcher shows and the choice is remembered.
function getForcedLang() {
  try {
    const code = new URLSearchParams(window.location.search).get('lang');
    return code && LANGS[code] ? code : null;
  } catch { return null; }
}

function LangProvider({ children }) {
  const forced = getForcedLang();
  const [lang, setLangState] = React.useState(() => {
    if (forced) return forced;
    try { return localStorage.getItem('calendify-lang-v2') || 'en'; } catch { return 'en'; }
  });
  const setLang = React.useCallback((code) => {
    setLangState(code);
    try { localStorage.setItem('calendify-lang-v2', code); } catch {}
  }, []);
  const value = React.useMemo(() => ({ lang, t: LANGS[lang], setLang }), [lang]);
  return (
    <LangContext.Provider value={value}>
      {children}
      {forced ? null : <LangSwitcher />}
    </LangContext.Provider>
  );
}

Object.assign(window, { LANGS, LangContext, useT, useLang, LangProvider, LangSwitcher });