// Components for Mollis Group site
const { useState, useEffect, useRef, useMemo } = React;

const T = {
  layers_h:    { en: "From idea to useful system.", sk: "Od nápadu k užitočnému systému.", uk: "Від ідеї до корисної системи." },
  layers_sub:  { en: "We keep the work simple: clarify the message, design the experience, then automate what repeats.",
                 sk: "Prácu držíme jednoducho: ujasniť správu, navrhnúť skúsenosť a automatizovať to, čo sa opakuje.",
                 uk: "Працюємо просто: прояснюємо сенс, робимо дизайн і автоматизуємо те, що повторюється." },
  caps_h:      { en: "What we can make for you.", sk: "Čo pre vás vieme spraviť.", uk: "Що ми можемо зробити для вас." },
  caps_sub:    { en: "Design covers visuals, content, websites, and AI-assisted creative work. Automation covers repeated business work and tool connections.",
                 sk: "Dizajn pokrýva vizuály, obsah, weby a kreatívnu prácu s AI. Automatizácia pokrýva opakovanú firemnú prácu a prepojenie nástrojov.",
                 uk: "Дизайн охоплює візуали, контент, сайти й креативну роботу з AI. Автоматизація - повторювану бізнес-роботу та зв'язки між інструментами." },
  arch_h:      { en: "Tools we use.", sk: "Nástroje, ktoré používame.", uk: "Інструменти, з якими працюємо." },
  arch_sub:    { en: "Modern design tools, AI tools, and automation platforms. Chosen for the job, not for buzzwords.",
                 sk: "Moderné dizajnové, AI a automatizačné nástroje. Vyberáme podľa úlohy, nie podľa buzzwordov.",
                 uk: "Сучасні інструменти для дизайну, AI та автоматизації. Обираємо під задачу, а не заради модних слів." },
  dep_h:       { en: "What this changes.", sk: "Čo sa tým mení.", uk: "Що це змінює." },
  dep_sub:     { en: "Examples are simplified and anonymized. The point is the kind of problem we solve.",
                 sk: "Príklady sú zjednodušené a anonymizované. Dôležitý je typ problému, ktorý riešime.",
                 uk: "Приклади спрощені й анонімізовані. Головне - які задачі ми розв'язуємо." },
  doc_h:       { en: "How we decide.", sk: "Ako sa rozhodujeme.", uk: "Як ми приймаємо рішення." },
  doc_sub:     { en: "Simple rules that keep the work useful, clear, and safe.",
                 sk: "Jednoduché pravidlá, ktoré držia prácu užitočnú, jasnú a bezpečnú.",
                 uk: "Прості правила, щоб робота була корисною, зрозумілою та безпечною." },
  eng_h:       { en: "Start small. Grow only what works.", sk: "Začať malým krokom. Rozvíjať len to, čo funguje.", uk: "Почати з малого. Розвивати лише те, що працює." },
  eng_sub:     { en: "No huge mystery project. First we make the next step clear, then build the useful part.",
                 sk: "Žiadny veľký nejasný projekt. Najprv ujasníme ďalší krok, potom postavíme užitočnú časť.",
                 uk: "Без великих туманних проєктів. Спочатку робимо наступний крок зрозумілим, потім будуємо корисну частину." },
  price_h:     { en: "Simple ways to start.", sk: "Jednoduché možnosti štartu.", uk: "Прості способи почати." },
  price_sub:   { en: "Pricing shown by locale: USD for EN, EUR for SK, UAH for UA. Final scope is confirmed before work starts.",
                 sk: "Ceny podľa lokality: USD pre EN, EUR pre SK, UAH pre UA. Rozsah potvrdíme pred začiatkom práce.",
                 uk: "Ціни за мовною версією: USD для EN, EUR для SK, UAH для UA. Фінальний обсяг погоджуємо до старту." },
  about_lbl:   { en: "/ ABOUT MOLLIS", sk: "/ O MOLLIS", uk: "/ ПРО MOLLIS" },
  email:       { en: "Email", sk: "E-mail", uk: "Пошта" },
  intro:       { en: "Intro call", sk: "Úvodný call", uk: "Вступний дзвінок" },
  office:      { en: "Company", sk: "Firma", uk: "Компанія" },
  made_in:     { en: "Built in Bratislava", sk: "Tvorené v Bratislave", uk: "Зроблено в Братиславі" },
  ch_active:   { en: "Channel", sk: "Kanál", uk: "Канал" },
  lbl_layers:  { en: "/ S0 · WORKFLOW", sk: "/ S0 · POSTUP", uk: "/ S0 · ПІДХІД" },
  lbl_caps:    { en: "/ S1 · SERVICES", sk: "/ S1 · SLUŽBY", uk: "/ S1 · ПОСЛУГИ" },
  lbl_arch:    { en: "/ S2 · TOOLS", sk: "/ S2 · NÁSTROJE", uk: "/ S2 · ІНСТРУМЕНТИ" },
  lbl_dep:     { en: "/ S3 · RESULTS", sk: "/ S3 · VÝSLEDKY", uk: "/ S3 · РЕЗУЛЬТАТИ" },
  lbl_doc:     { en: "/ S4 · RULES", sk: "/ S4 · PRAVIDLÁ", uk: "/ S4 · ПРАВИЛА" },
  lbl_eng:     { en: "/ S5 · START", sk: "/ S5 · ŠTART", uk: "/ S5 · СТАРТ" },
  lbl_contact: { en: "/ S6 · CONTACT", sk: "/ S6 · KONTAKT", uk: "/ S6 · КОНТАКТ" },
  phase:       { en: "STEP", sk: "KROK", uk: "КРОК" },
  since:       { en: "SINCE / CITY", sk: "OD / MESTO", uk: "З / МІСТО" },
  data:        { en: "DATA", sk: "DÁTA", uk: "ДАНІ" },
};
const t = (k, lang) => (T[k] && (T[k][lang] || T[k].en)) || k;

// === Logo mark (a small bracketed M) ===
function LogoMark() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M2 2H6V22H2V2Z" fill="var(--accent-active)"/>
      <path d="M22 2H18V22H22V2Z" fill="var(--accent-active)"/>
      <path d="M7 4L12 14L17 4" stroke="var(--fg)" strokeWidth="1.5"/>
      <path d="M7 20H17" stroke="var(--fg)" strokeWidth="1.5"/>
    </svg>
  );
}

// === System bar (top, very thin) — Palantir-style telemetry ===
function SysBar({ lang }) {
  const ui = MOLLIS_CONTENT.ui[lang];
  const telem = MOLLIS_CONTENT.telemetry[lang];
  const [time, setTime] = useState('--:--:--');
  useEffect(() => {
    const fmt = () => {
      const d = new Date();
      const opts = { timeZone: 'Europe/Bratislava', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };
      setTime(new Intl.DateTimeFormat('en-GB', opts).format(d) + ' CET');
    };
    fmt(); const id = setInterval(fmt, 1000); return () => clearInterval(id);
  }, []);
  return (
    <div className="sysbar">
      <div className="pulse">{ui.sys_label}</div>
      <div className="telem">
        {telem.map(([k, v], i) => (
          <span key={i} className="cell"><span className="k">{k}</span><span className="v">{v}</span></span>
        ))}
      </div>
      <div className="ts">T+ {time}</div>
    </div>
  );
}

// === Top bar (nav, lang, primary CTA) ===
function TopBar({ lang, setLang, mode, theme, setTheme }) {
  const ui = MOLLIS_CONTENT.ui[lang];
  const [menuOpen, setMenuOpen] = useState(false);
  const closeMenu = () => setMenuOpen(false);
  return (
    <div className={"topbar " + (menuOpen ? "menu-open" : "")}>
      <div className="logo">
        <div className="mark"><LogoMark/></div>
        <div className="name">
          <b>MOLLIS</b><span className="sub">{ui[mode]}</span>
        </div>
      </div>
      <nav>
        {ui.nav.map((n, i) => <a key={i} href={"#s" + i}>{String(i+1).padStart(2,'0')} {n}</a>)}
      </nav>
      <div className="right">
        <div className="lang-switch">
          <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
          <button className={lang === 'sk' ? 'on' : ''} onClick={() => setLang('sk')}>SK</button>
          <button className={lang === 'uk' ? 'on' : ''} onClick={() => setLang('uk')}>UA</button>
        </div>
        <div className="theme-switch">
          <button className={theme === 'dark' ? 'on' : ''} onClick={() => setTheme('dark')}>DARK</button>
          <button className={theme === 'light' ? 'on' : ''} onClick={() => setTheme('light')}>LIGHT</button>
        </div>
        <a href="#contact" className="cta-btn">{ui.cta_primary}</a>
        <button className="menu-toggle" type="button" aria-label="Menu" aria-expanded={menuOpen} onClick={() => setMenuOpen(!menuOpen)}>
          <span></span><span></span><span></span>
        </button>
      </div>
      <div className="mobile-menu" hidden={!menuOpen}>
        <div className="mobile-menu-row">
          <span>LANG</span>
          <div className="lang-switch">
            <button className={lang === 'en' ? 'on' : ''} onClick={() => { setLang('en'); closeMenu(); }}>EN</button>
            <button className={lang === 'sk' ? 'on' : ''} onClick={() => { setLang('sk'); closeMenu(); }}>SK</button>
            <button className={lang === 'uk' ? 'on' : ''} onClick={() => { setLang('uk'); closeMenu(); }}>UA</button>
          </div>
        </div>
        <div className="mobile-menu-row">
          <span>THEME</span>
          <div className="theme-switch">
            <button className={theme === 'dark' ? 'on' : ''} onClick={() => { setTheme('dark'); closeMenu(); }}>DARK</button>
            <button className={theme === 'light' ? 'on' : ''} onClick={() => { setTheme('light'); closeMenu(); }}>LIGHT</button>
          </div>
        </div>
        <div className="mobile-menu-links">
          {ui.nav.map((n, i) => <a key={i} href={"#s" + i} onClick={closeMenu}>{String(i+1).padStart(2,'0')} {n}</a>)}
          <a href="#contact" onClick={closeMenu}>08 Contact</a>
        </div>
      </div>
    </div>
  );
}

// === Channel switcher (formerly mode switcher) — bottom ===
function ModeSwitcher({ mode, setMode, lang }) {
  const ui = MOLLIS_CONTENT.ui[lang];
  return (
    <div className="mode-switcher">
      <span className="lbl">{ui.switch_mode}</span>
      {['creative', 'automation'].map((m) => (
        <button key={m} className={mode === m ? 'on' : ''} onClick={() => setMode(m)}>
          {ui[m]}
        </button>
      ))}
    </div>
  );
}

// === Hero ===
function Hero({ mode, lang }) {
  const h = MOLLIS_CONTENT.hero[lang];
  const ui = MOLLIS_CONTENT.ui[lang];
  const lines = h["headline_" + mode];
  const sub = h["sub_" + mode];

  return (
    <section className="hero" data-screen-label="01 Hero">
      <span className="crosshair" style={{ top: 88, left: 24 }}></span>
      <span className="crosshair" style={{ top: 88, right: 24 }}></span>

      <div className="hero-eyebrow">
        <div>{h.eyebrow}</div>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--accent-2)', display: 'inline-block' }}></span>
          {ui.live} · {MOLLIS_CONTENT.meta.timezone}
        </div>
      </div>

      <h1 className="hero-title">
        {lines.map((ln, i) => (
          <span key={i} className="line">
            <span className={i === 1 ? 'accent' : (i === 0 ? 'corp' : '')}>{ln}</span>
          </span>
        ))}
      </h1>

      <div className="hero-grid">
        <div>
          <p className="hero-sub">{sub}</p>
          <div className="hero-cta">
            <a href="#contact" className="cta-btn">{ui.cta_primary}</a>
            <a href="#s5" className="cta-btn ghost">{ui.cta_secondary}</a>
          </div>
        </div>
        <div className="hero-meta">
          <span className="k">{t('since', lang)}</span>
          <span className="v">{MOLLIS_CONTENT.meta.founded} · {MOLLIS_CONTENT.meta.city}</span>
        </div>
        <div className="hero-meta">
          <span className="k">{t('data', lang)}</span>
          <span className="v">EU · PRIVATE</span>
        </div>
      </div>

      <div className="hero-frame">
        <span>MOLLIS / {ui[mode].toUpperCase()}</span>
        <span>REV 2026.Q1 / SCHEMA 04</span>
      </div>
    </section>
  );
}

// === Ticker tape (subtle) ===
function Marquee({ lang }) {
  const phrases = {
    en: ["Websites", "Brand visuals", "Campaign content", "AI assistants",
         "Workflow automation", "Reports", "Dashboards", "Private data", "Bratislava studio"],
    sk: ["Weby", "Brand vizuály", "Obsah pre kampane", "AI asistenti",
         "Automatizácia workflow", "Reporty", "Dashboardy", "Súkromné dáta", "Bratislavské štúdio"],
    uk: ["Сайти", "Візуали для бренду", "Контент для кампаній", "AI-асистенти",
         "Автоматизація процесів", "Звіти", "Дашборди", "Приватні дані", "Студія в Братиславі"],
  };
  const items = phrases[lang] || phrases.en;
  const doubled = [...items, ...items, ...items];
  return (
    <div className="ticker-tape">
      <div className="ticker-track">
        {doubled.map((it, i) => <span key={i}>{it}</span>)}
      </div>
    </div>
  );
}

// === Layers (3 operating layers) ===
function Layers({ lang }) {
  const layers = MOLLIS_CONTENT.layers[lang];
  return (
    <section id="s0" data-screen-label="02 Layers">
      <div className="section-head">
        <div>
          <div className="lbl">{t('lbl_layers', lang)}</div>
          <h2>{t('layers_h', lang)}</h2>
        </div>
        <p className="sub">{t('layers_sub', lang)}</p>
      </div>
      <div className="layers">
        {layers.map((l, i) => (
          <div className="layer" key={l.code}>
            <div className="lhead">
              <span className="lcode">{l.code}</span>
              <span className="lnum">0{i+1} / 03</span>
            </div>
            <h3>{l.t}</h3>
            <p className="ldesc">{l.d}</p>
            <ul>
              {l.bullets.map((b, j) => <li key={j}>{b}</li>)}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

// === Capabilities (all 6 as matrix) ===
function Capabilities({ mode, lang }) {
  const ui = MOLLIS_CONTENT.ui[lang];
  // Show all six offers, ordered by the selected direction.
  const cre = MOLLIS_SERVICES.creative[lang];
  const aut = MOLLIS_SERVICES.automation[lang];
  let all = [...aut, ...cre];
  if (mode === 'creative') all = [...cre, ...aut];
  return (
    <section id="s1" data-screen-label="03 Capabilities">
      <div className="section-head">
        <div>
          <div className="lbl">{t('lbl_caps', lang)}</div>
          <h2>{t('caps_h', lang)}</h2>
        </div>
        <p className="sub">{t('caps_sub', lang)}</p>
      </div>
      <div className="caps-grid">
        {all.map((s) => {
          const isInfra = s.code.startsWith('CAP-0') && parseInt(s.code.slice(4)) <= 3;
          return (
            <div className="cap" key={s.code}>
              <div className="top">
                <span className="code">{s.code}</span>
                <span className="arm-tag">{isInfra ? ui.automation : ui.creative}</span>
              </div>
              <h4>{s.title}</h4>
              <div className="for">→ {s.for}</div>
              <ul>
                {s.bullets.map((b, j) => <li key={j}>{b}</li>)}
              </ul>
              <div className="price">{s.price}</div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// === Architecture / stack ===
function Architecture({ mode, lang }) {
  const a = MOLLIS_REST.stack.automation;
  const c = MOLLIS_REST.stack.creative;
  const rows = [...a, ...c];
  return (
    <section id="s2" data-screen-label="04 Architecture">
      <div className="section-head">
        <div>
          <div className="lbl">{t('lbl_arch', lang)}</div>
          <h2>{t('arch_h', lang)}</h2>
        </div>
        <p className="sub">{t('arch_sub', lang)}</p>
      </div>
      <div>
        {rows.map((row, i) => (
          <div className="stack-block" key={i}>
            <div className="lbl">{row[0]}</div>
            <div className="stack-tags">
              {row.slice(1).map((tag, j) => <div className="tag-chip" key={j}>{tag}</div>)}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// === Deployments / cases ===
function Cases({ mode, lang }) {
  const cases = MOLLIS_REST.cases[lang];
  return (
    <section id="s3" data-screen-label="05 Deployments">
      <div className="section-head">
        <div>
          <div className="lbl">{t('lbl_dep', lang)}</div>
          <h2>{t('dep_h', lang)}</h2>
        </div>
        <p className="sub">{t('dep_sub', lang)}</p>
      </div>
      <div className="cases">
        {cases.map((c) => (
          <div className="case-row" key={c.id}>
            <div className="id">{c.id}</div>
            <div className="name">{c.name}</div>
            <div className="line">{c.line}</div>
            <div className="metric">{c.metric}</div>
            <div className="arr">↗</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// === Doctrine ===
function Doctrine({ lang }) {
  const items = MOLLIS_REST.doctrine[lang];
  return (
    <section id="s4" data-screen-label="06 Doctrine">
      <div className="section-head">
        <div>
          <div className="lbl">{t('lbl_doc', lang)}</div>
          <h2>{t('doc_h', lang)}</h2>
        </div>
        <p className="sub">{t('doc_sub', lang)}</p>
      </div>
      <div className="doctrine">
        {items.map((d) => (
          <div className="doc" key={d.n}>
            <div className="roman">{d.n}</div>
            <h4>{d.t}</h4>
            <p>{d.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// === Engagement (process + pricing combined visual ladder) ===
function Engagement({ lang }) {
  const steps = MOLLIS_REST.process[lang];
  const tiers = MOLLIS_REST.pricing[lang];
  return (
    <section id="s5" data-screen-label="07 Engagement">
      <div className="section-head">
        <div>
          <div className="lbl">{t('lbl_eng', lang)}</div>
          <h2>{t('eng_h', lang)}</h2>
        </div>
        <p className="sub">{t('eng_sub', lang)}</p>
      </div>
      <div className="process-row">
        {steps.map((s) => (
          <div className="proc-step" key={s.n}>
            <div className="n">{t('phase', lang)} / {s.n}</div>
            <h5>{s.t}</h5>
            <p>{s.d}</p>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 56 }}>
        <div className="lbl mono" style={{ display: 'flex', alignItems: 'center', gap: 12, paddingBottom: 16 }}>{t('price_h', lang)}</div>
        <div className="pricing-grid">
          {tiers.map((tier) => (
            <div className={"tier " + (tier.featured ? "featured" : "")} key={tier.name}>
              <div>
                <div className="name">{tier.name}</div>
                <div className="sub">{tier.sub}</div>
              </div>
              <div>
                <div className="price">{tier.price}</div>
                <div className="unit">{tier.unit}</div>
              </div>
              <p className="for">{tier.for}</p>
              <ul>
                {tier.items.map((it, j) => <li key={j}>{it}</li>)}
              </ul>
            </div>
          ))}
        </div>
        <div className="mono" style={{ marginTop: 18, color: 'var(--muted)' }}>{t('price_sub', lang)}</div>
      </div>
    </section>
  );
}

// === About / founder ===
function About({ lang }) {
  const a = MOLLIS_REST.about[lang];
  return (
    <section id="s6" data-screen-label="08 Founder">
      <div className="section-head">
        <div>
          <div className="lbl">{t('about_lbl', lang)}</div>
        </div>
      </div>
      <div className="about-row">
        <h3>{a.h}</h3>
        <div>
          <p>{a.p}</p>
          <ul>
            {a.bullets.map((b, i) => <li key={i}>{b}</li>)}
          </ul>
        </div>
      </div>
    </section>
  );
}

// === Contact ===
function Contact({ lang }) {
  const c = MOLLIS_REST.contact[lang];
  const ui = MOLLIS_CONTENT.ui[lang];
  return (
    <section id="contact" className="contact" data-screen-label="09 Contact">
      <span className="corner tl"></span><span className="corner tr"></span>
      <span className="corner bl"></span><span className="corner br"></span>
      <div className="mono" style={{ marginBottom: 28 }}>{t('lbl_contact', lang)} — {ui.status_open}</div>
      <h2>{c.h}</h2>
      <p style={{ marginTop: 22, fontSize: 18, color: 'var(--fg-2)', maxWidth: '46ch', lineHeight: 1.5 }}>{c.sub}</p>
      <div className="meta">
        <div>
          <div className="lbl">{t('email', lang)}</div>
          <a href={"mailto:" + c.email}>{c.email}</a>
        </div>
        <div>
          <div className="lbl">{t('intro', lang)}</div>
          <a href={"https://" + c.cal} target="_blank">{c.cal}</a>
        </div>
        <div>
          <div className="lbl">{t('office', lang)}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, lineHeight: 1.55, color: 'var(--fg-2)' }}>{c.address}</div>
        </div>
      </div>
    </section>
  );
}

// === Footer ===
function Footer({ lang }) {
  return (
    <footer>
      <div>© 2018–2026 Mollis Group s.r.o. · IČO 51321858 · IČ DPH SK2120674226</div>
      <div className="right">
        <span>GDPR</span><span>EU AI ACT</span><span>SOC2-ALIGNED</span><span>{t('made_in', lang)}</span>
      </div>
    </footer>
  );
}

// === Live pill ===
function Ticker({ lang }) {
  const ui = MOLLIS_CONTENT.ui[lang];
  return (
    <div className="live-pill">
      <span className="dot"></span>
      <span>{ui.live} · MOLLIS-01 / BRA</span>
    </div>
  );
}

function Cursor() {
  const [pos, setPos] = React.useState({ x: -80, y: -80 });
  const [active, setActive] = React.useState(false);
  const [down, setDown] = React.useState(false);

  React.useEffect(() => {
    const interactive = 'a, button, input, textarea, select, [role="button"]';
    const move = (event) => {
      setPos({ x: event.clientX, y: event.clientY });
      setActive(Boolean(event.target.closest(interactive)));
    };
    const leave = () => setPos({ x: -80, y: -80 });
    const press = () => setDown(true);
    const release = () => setDown(false);

    window.addEventListener('pointermove', move);
    window.addEventListener('pointerleave', leave);
    window.addEventListener('pointerdown', press);
    window.addEventListener('pointerup', release);
    return () => {
      window.removeEventListener('pointermove', move);
      window.removeEventListener('pointerleave', leave);
      window.removeEventListener('pointerdown', press);
      window.removeEventListener('pointerup', release);
    };
  }, []);

  const style = { left: pos.x, top: pos.y };
  return (
    <div className={`cursor ${active ? 'is-active' : ''} ${down ? 'is-down' : ''}`} style={style} aria-hidden="true">
      <span className="cursor-ring"></span>
      <span className="cursor-dot"></span>
      <span className="cursor-vector"></span>
    </div>
  );
}

Object.assign(window, {
  Cursor, SysBar, TopBar, ModeSwitcher, Hero, Marquee, Layers, Capabilities,
  Architecture, Cases, Doctrine, Engagement, About, Contact, Footer, Ticker
});