// Shared Nextoflow building blocks — logo, copy bank, tweaks state
const { useState, useEffect, useRef, useMemo } = React;

// ─────────── COPY BANK ───────────
const COPY = {
  en: {
    nav: ['How I work', 'Automations', 'Process', 'FAQ'],
    cta: 'Get an AI assessment',
    ctaAlt: 'Describe your task →',
    headlines: [
    ['AI does 80%.', 'The other 20% is why it works.'],
    ['I don\'t sell automation.', 'I lead the AI that builds it.'],
    ['One human.', 'Seventeen robots.', 'Counting.']],

    kicker: 'RPA · AI-led delivery · Czech Republic',
    lede: 'I ship production-grade automations in days, not months — because I put AI on the tools and keep the judgment calls for myself.',
    proof80: 'AI writes the code, the tests, the docs, the rollout plan.',
    proof20: 'I decide what to build, where it breaks, and when to ship.'
  },
  cz: {
    nav: ['Jak pracuji', 'Automatizace', 'Proces', 'FAQ'],
    cta: 'Chci AI posouzení',
    ctaAlt: 'Popište svůj úkol →',
    headlines: [
    ['80 % práce dělá AI.', 'Zbylých 20 % je důvod, proč to funguje.'],
    ['Neprodávám automatizaci.', 'Vedu AI, která ji staví.'],
    ['Jeden člověk.', 'Sedmnáct robotů.', 'A počítám dál.']],

    kicker: 'RPA · doručování s AI · Česká republika',
    lede: 'Stavím produkční automatizace ve dnech, ne v měsících — protože AI dělá práci a já dělám rozhodnutí.',
    proof80: 'AI píše kód, testy, dokumentaci i plán nasazení.',
    proof20: 'Já rozhoduji, co stavět, kde se to rozbije a kdy to pustíme.'
  }
};

// Real metrics the user shared
const METRICS = {
  bots: 17,
  inDev: 6,
  hoursSaved: 1413,
  moneySaved: '934 000',
  potential: 2230,
  biggestHours: 416,
  biggestMoney: '275 000'
};

const STACK = ['UiPath', 'SAP', 'M-Files', 'GOLD', 'n8n', 'Claude', 'ChatGPT', 'GoPay', 'Excel/VBA'];

const CASES = [
{
  id: 'saldo',
  name: { en: 'Reconciliation bot', cz: 'Saldo automatizace' },
  blurb: {
    en: 'Matches payments to invoices across two ERPs, flags exceptions.',
    cz: 'Páruje platby s fakturami mezi dvěma systémy, hlásí výjimky.'
  },
  before: '480 min/týden',
  after: { en: 'fully automated', cz: 'plně automatizováno' },
  save: { hours: 416, money: '275 000' },
  aiShare: 82
},
{
  id: 'dunning',
  name: { en: 'Overdue-receivables monitor', cz: 'Monitoring pohledávek' },
  blurb: {
    en: 'Chases overdue invoices via Creditcheck + email sequences.',
    cz: 'Hlídá nezaplacené faktury přes Creditcheck a e-mailové sekvence.'
  },
  before: '245 min/týden',
  after: { en: 'fully automated', cz: 'plně automatizováno' },
  save: { hours: 212, money: '140 000' },
  aiShare: 78
},
{
  id: 'reporting',
  name: { en: 'FIN weekly report', cz: 'Finanční reporty' },
  blurb: {
    en: 'Pulls SAP extracts, formats, and emails leadership.',
    cz: 'Tahá výpisy ze SAPu, formátuje, odesílá vedení.'
  },
  before: '180 min/týden',
  after: { en: 'fully automated', cz: 'plně automatizováno' },
  save: { hours: 156, money: '98 000' },
  aiShare: 85
},
{
  id: 'sales',
  name: { en: 'Sales handoff', cz: 'SALES → FIN předávka' },
  blurb: {
    en: 'Hands new contracts from CRM into SAP with validation.',
    cz: 'Překlápí nové smlouvy z CRM do SAPu s validací.'
  },
  before: '320 min/týden',
  after: { en: 'fully automated', cz: 'plně automatizováno' },
  save: { hours: 278, money: '180 000' },
  aiShare: 75
}];


// The 80/20 split — real examples
const SPLIT = {
  ai: [
  { en: 'Writes UiPath/Python/n8n code', cz: 'Píše kód v UiPath/Pythonu/n8n' },
  { en: 'Figures out how to break it before production', cz: 'Vymýšlí, jak to rozbít, než to pustíme do provozu' },
  { en: 'Generates docs & handover', cz: 'Vytváří dokumentaci a předávku' },
  { en: 'Hunts down where it fails', cz: 'Hledá, kde to padá' },
  { en: 'Takes over legacy scripts', cz: 'Přebírá zastaralé skripty' },
  { en: 'Plans the launch', cz: 'Plánuje spuštění' }],

  me: [
  { en: 'Picks the right process', cz: 'Vybírá správný proces' },
  { en: 'Owns the client relationship', cz: 'Vede vztah s klientem' },
  { en: 'Catches situations AI didn\'t think of', cz: 'Chytá situace, na které AI nepomyslela' },
  { en: 'Decides when it\'s production-ready', cz: 'Rozhoduje, kdy je to hotovo' }]

};

// ─────────── LOGO MARK ───────────
function NextoflowMark({ size = 20, showText = true, textColor, style }) {
  // Use the full lockup PNG when text is shown; the icon PNG alone otherwise.
  // In standalone bundles these come from window.__resources (inlined blobs).
  const R = (typeof window !== 'undefined' && window.__resources) || {};
  const src = showText
    ? (R.logoFull || 'assets/logo-full.png')
    : (R.logoIcon || 'assets/logo-icon.png');
  // logo-full.png true aspect ≈ 1640/320 = 5.125; logo-icon.png = 1
  const aspect = showText ? 5.125 : 1;
  return (
    <span className="nf-mark" style={{ display: 'inline-flex', alignItems: 'center', ...style }}>
      <img
        src={src}
        alt="Nextoflow"
        style={{ height: size, width: size * aspect, display: 'block' }} />
    </span>);

}

// ─────────── TWEAKS CONTEXT ───────────
// Shared tweaks state — headline variant (0/1/2), CTA variant (0/1), language
const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headlineVariant": 0,
  "ctaVariant": 0,
  "language": "cz"
} /*EDITMODE-END*/;

const TweakCtx = React.createContext(TWEAKS_DEFAULTS);

function useTweaks() {
  return React.useContext(TweakCtx);
}

function useCopy() {
  const { language } = useTweaks();
  return COPY[language] || COPY.en;
}

// Localize helper for object fields with {en, cz}
function L(obj, lang) {
  if (!obj) return '';
  if (typeof obj === 'string') return obj;
  return obj[lang] || obj.en || '';
}

// CZK → USD helper (approx rate 1 USD = 23 CZK; rounds to nearest 100)
const czkToUsd = (czkStr) => {
  const num = parseInt(String(czkStr).replace(/\s/g, ''), 10);
  if (!num) return czkStr;
  const usd = Math.round(num / 23 / 100) * 100;
  return usd.toLocaleString('en-US');
};

// Format money according to language
const fmtMoney = (czkStr, lang) => lang === 'cz' ? `${czkStr} Kč` : `$${czkToUsd(czkStr)}`;

// Viewport hook — used by living-top.jsx and living-bot.jsx for responsive behavior
// that pure CSS can't express (e.g. swapping SVG diagram coordinates on mobile).
function useViewport() {
  const [w, setW] = React.useState(() => typeof window !== 'undefined' ? window.innerWidth : 1440);
  React.useEffect(() => {
    const onR = () => setW(window.innerWidth);
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, []);
  return { w, isMobile: w < 768, isTablet: w >= 768 && w < 1024, isDesktop: w >= 1024 };
}

Object.assign(window, {
  COPY, METRICS, STACK, CASES, SPLIT, czkToUsd, fmtMoney,
  NextoflowMark, TweakCtx, useTweaks, useCopy, L,
  TWEAKS_DEFAULTS, useViewport
});