/* ui.jsx — i18n dictionary + Navbar and Hero sub-components. */

const I18N = {
  ru: {
    nav: [
      { label: 'Услуги', dd: true, href: 'vps.html' },
      { label: 'Дата-центры', dd: false, href: 'data-centers.html' },
      { label: 'Документация', dd: false, href: 'docs.html' },
      { label: 'Контакты', dd: false, href: 'contacts.html' },
    ],
    account: 'Личный кабинет',
    badge: 'Премиум облачный хостинг',
    h1a: 'Надёжный ', h1accent: 'хостинг', h1b: ' для', h1soft: 'вашего бизнеса',
    sub: 'Облачная инфраструктура Hostline Cloud для проектов любого масштаба. Высокая производительность, надёжность и защита 24/7.',
    ctaPrimary: 'Выбрать сервер',
    ctaGhost: 'Тех. поддержка',
    feats: ['Мгновенное подключение', 'Защита от DDoS', '99.9% Uptime'],
    statNum: '99.9%', statLabel: 'Uptime SLA', statBtn: 'Статус сервисов',
    cornerTitle: 'Документация', cornerLink: 'База знаний',

    f_eyebrow: 'Почему Hostline',
    f_title_a: 'Инфраструктура, на которую ', f_title_soft: 'можно положиться',
    f_lead: 'Современное оборудование, многоуровневая защита и поддержка, которая отвечает за минуты, а не за сутки.',
    features: [
      { icon: 'ShieldCheck', t: 'Защита от DDoS', d: 'Многоуровневая фильтрация трафика отражает атаки до того, как они достигнут ваших серверов.' },
      { icon: 'Zap', t: 'Мгновенное подключение', d: 'Сервер готов к работе через пару минут после оплаты — без ожидания и ручной настройки.' },
      { icon: 'Gauge', t: '99.9% Uptime', d: 'Резервирование питания, сети и оборудования в дата-центрах уровня Tier III.' },
      { icon: 'Lock', t: 'Выделенные ресурсы', d: 'Каждый клиент получает гарантированные CPU и RAM без соседей по серверу.' },
    ],

    s_eyebrow: 'Услуги',
    s_title_a: 'Решения для проектов ', s_title_soft: 'любого масштаба',
    s_lead: 'Виртуальные и физические серверы — выберите конфигурацию под свою задачу.',
    perMonth: '/мес',
    services: [
      { icon: 'Server', t: 'VPS / VDS', href: 'vps.html', specs: ['До 32 vCPU', 'NVMe SSD диски', 'Полный root-доступ', 'Anti-DDoS в подарок'], price: 'от 299 ₽' },
      { icon: 'Cpu', t: 'Выделенные серверы', href: 'dedicated.html', specs: ['Intel Xeon / AMD EPYC', 'До 256 ГБ RAM', 'Физический контроль', 'KVM/IPMI доступ'], price: 'от 4 900 ₽' },
      { icon: 'Globe', t: 'Веб-серверы', href: 'web-servers.html', specs: ['PHP 7.4–8.3', 'MySQL · PostgreSQL', 'Бесплатный SSL', 'ISPmanager включён'], price: 'от 99 ₽' },
    ],
    learn: 'Подробнее',

    dc_eyebrow: 'Дата-центры',
    dc_title_a: 'Собственная инфраструктура ', dc_title_soft: 'уровня Tier III',
    dc_lead: 'Оборудование размещено в сертифицированных дата-центрах с резервированием питания, охлаждения и каналов связи. Доступность 99.9% и мгновенное масштабирование ресурсов.',
    dc_bullets: ['Сертификация Tier III и круглосуточный мониторинг', 'Процессоры последнего поколения и NVMe-накопители', 'Ежедневное резервное копирование данных'],
    dc_badge1: 'Высокое качество', dc_badge2: 'Удобная настройка',
    dc_slot: 'Перетащите фото дата-центра',

    stats: [
      { big: '99.9%', cap: 'Uptime SLA' },
      { big: '24/7', cap: 'Техподдержка' },
      { big: '< 30 сек', cap: 'Развёртывание' },
      { big: 'Tier III', cap: 'Дата-центры' },
    ],

    cta_title: 'Запустите проект уже сегодня',
    cta_sub: 'Выберите конфигурацию за пару минут и получите сервер, готовый к работе. Перенос — бесплатно.',
    cta_primary: 'Выбрать сервер',
    cta_ghost: 'Связаться с нами',

    foot_links: [
      { l: 'VPS / VDS', h: 'vps.html' },
      { l: 'Выделенные серверы', h: 'dedicated.html' },
      { l: 'Веб-серверы', h: 'web-servers.html' },
      { l: 'Дата-центры', h: 'data-centers.html' },
      { l: 'Документация', h: 'docs.html' },
      { l: 'Контакты', h: 'contacts.html' },
    ],
    foot_legal: [
      { l: 'Политика конфиденциальности', h: 'privacy.html' },
      { l: 'Условия использования', h: 'terms.html' },
    ],
    foot_copy: '© 2026 «Hostline.cloud». Все права защищены.',
  },

  en: {
    nav: [
      { label: 'Services', dd: true, href: 'vps.html' },
      { label: 'Data centers', dd: false, href: 'data-centers.html' },
      { label: 'Pricing', dd: false, href: 'vps.html' },
      { label: 'Docs', dd: false, href: 'docs.html' },
      { label: 'Contacts', dd: false, href: 'contacts.html' },
    ],
    account: 'Sign in',
    badge: 'Premium cloud hosting',
    h1a: 'Reliable ', h1accent: 'hosting', h1b: ' for', h1soft: 'your business',
    sub: 'Hostline Cloud infrastructure for projects of any scale. High performance, reliability and 24/7 protection.',
    ctaPrimary: 'Choose a server',
    ctaGhost: 'Support',
    feats: ['Instant deployment', 'DDoS protection', '99.9% uptime'],
    statNum: '99.9%', statLabel: 'Uptime SLA', statBtn: 'Service status',
    cornerTitle: 'Documentation', cornerLink: 'Knowledge base',

    f_eyebrow: 'Why Hostline',
    f_title_a: 'Infrastructure you can ', f_title_soft: 'truly rely on',
    f_lead: 'Modern hardware, multi-layer protection and support that replies in minutes, not days.',
    features: [
      { icon: 'ShieldCheck', t: 'DDoS protection', d: 'Multi-layer traffic filtering absorbs attacks before they ever reach your servers.' },
      { icon: 'Zap', t: 'Instant deployment', d: 'Your server is ready a couple of minutes after payment — no waiting, no manual setup.' },
      { icon: 'Gauge', t: '99.9% uptime', d: 'Redundant power, network and hardware across Tier III certified data centers.' },
      { icon: 'Lock', t: 'Dedicated resources', d: 'Every client gets guaranteed CPU and RAM with no noisy neighbors on the box.' },
    ],

    s_eyebrow: 'Services',
    s_title_a: 'Solutions for projects ', s_title_soft: 'of any scale',
    s_lead: 'Virtual and physical servers — pick the configuration that fits your task.',
    perMonth: '/mo',
    services: [
      { icon: 'Server', t: 'VPS / VDS', href: 'vps.html', specs: ['Up to 32 vCPU', 'NVMe SSD storage', 'Full root access', 'Anti-DDoS included'], price: 'from $3.9' },
      { icon: 'Cpu', t: 'Dedicated servers', href: 'dedicated.html', specs: ['Intel Xeon / AMD EPYC', 'Up to 256 GB RAM', 'Physical control', 'KVM/IPMI access'], price: 'from $59' },
      { icon: 'Globe', t: 'Web servers', href: 'web-servers.html', specs: ['PHP 7.4–8.3', 'MySQL · PostgreSQL', 'Free SSL', 'ISPmanager included'], price: 'from $1.2' },
    ],
    learn: 'Learn more',

    dc_eyebrow: 'Data centers',
    dc_title_a: 'Our own infrastructure ', dc_title_soft: 'at Tier III level',
    dc_lead: 'Hardware lives in certified data centers with redundant power, cooling and connectivity. 99.9% availability and instant resource scaling.',
    dc_bullets: ['Tier III certification and round-the-clock monitoring', 'Latest-generation CPUs and NVMe storage', 'Daily data backups'],
    dc_badge1: 'High quality', dc_badge2: 'Easy setup',
    dc_slot: 'Drop a data-center photo',

    stats: [
      { big: '99.9%', cap: 'Uptime SLA' },
      { big: '24/7', cap: 'Support' },
      { big: '< 30 sec', cap: 'Deployment' },
      { big: 'Tier III', cap: 'Data centers' },
    ],

    cta_title: 'Launch your project today',
    cta_sub: 'Pick a configuration in a couple of minutes and get a server ready to go. Migration is free.',
    cta_primary: 'Choose a server',
    cta_ghost: 'Contact us',

    foot_links: [
      { l: 'VPS / VDS', h: 'vps.html' },
      { l: 'Dedicated servers', h: 'dedicated.html' },
      { l: 'Web servers', h: 'web-servers.html' },
      { l: 'Data centers', h: 'data-centers.html' },
      { l: 'Documentation', h: 'docs.html' },
      { l: 'Contacts', h: 'contacts.html' },
    ],
    foot_legal: [
      { l: 'Privacy Policy', h: 'privacy.html' },
      { l: 'Terms of Use', h: 'terms.html' },
    ],
    foot_copy: '© 2026 «Hostline.cloud». All rights reserved.',
  },
};

/* ---------- Navbar ---------- */
function Navbar({ t, lang, setLang, home }) {
  const homeHref = home || '/';
  return (
    <nav className="nav">
      <div className="nav-group nav-left">
        <ul className="nav-menu">
          {t.nav.map((it, i) => (
            <li key={i}>
              <a href={it.href || '#'} style={{ color: 'inherit', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
                {it.label}{it.dd && <ChevronRight />}
              </a>
            </li>
          ))}
        </ul>
      </div>

      <div className="nav-logo">
        <a href={homeHref} style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', textDecoration: 'none' }}>
          <LogoMark className="logo-mark" />
          <span className="logo-word">Hostline</span>
        </a>
      </div>

      <div className="nav-group nav-right">
        <div className="lang">
          <button className={lang === 'ru' ? 'active' : ''} onClick={() => setLang('ru')}>RU</button>
          <span className="sep">|</span>
          <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
        </div>
        <a className="btn-pill" href="https://my.hostline.cloud" style={{ textDecoration: 'none' }}>
          <span className="ic"><User /></span>
          <span style={{ whiteSpace: 'nowrap' }}>{t.account}</span>
        </a>
      </div>
    </nav>
  );
}

/* ---------- Hero badge ---------- */
function HeroBadge({ text }) {
  return (
    <div className="badge anim d1">
      <Sparkles />
      <span>{text}</span>
    </div>
  );
}

/* ---------- Bottom-left stat card ---------- */
function StatCard({ t }) {
  return (
    <div className="stat-card anim-l">
      <div>
        <div className="stat-num">{t.statNum}</div>
        <div className="stat-label">{t.statLabel}</div>
      </div>
      <button className="stat-btn">
        <span className="ic"><ArrowUpRight /></span>
        <span>{t.statBtn}</span>
      </button>
    </div>
  );
}

/* ---------- Bottom-right corner cut-out ---------- */
function Corner({ t }) {
  return (
    <div className="corner anim-r">
      <div className="corner-mask top">
        <svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M56 56V0C56 30.9279 30.9279 56 0 56H56Z" fill="var(--page)" />
        </svg>
      </div>
      <div className="corner-mask left">
        <svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M56 56H0C30.9279 56 56 30.9279 56 0V56Z" fill="var(--page)" />
        </svg>
      </div>
      <div className="corner-icon"><ArrowUpRight /></div>
      <a href="docs.html" style={{ textDecoration: 'none', color: 'inherit' }}>
        <div className="corner-title">{t.cornerTitle}</div>
        <div className="corner-link">
          <span>{t.cornerLink}</span><ChevronRight />
        </div>
      </a>
    </div>
  );
}

/* ---------- Shared Footer ---------- */
function SiteFooter({ t }) {
  const isRu = t === I18N.ru;
  return (
    <>
      <footer className="foot">
        <div className="left">
          <a href="/" style={{ display: 'flex', alignItems: 'center', gap: '0.7rem', textDecoration: 'none' }}>
            <LogoMark className="logo-mark" />
            <span className="logo-word">Hostline</span>
          </a>
        </div>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.4rem' }}>
            {t.foot_links.map((lk, i) => (
              <a key={i} href={lk.h}>{lk.l}</a>
            ))}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.4rem' }}>
            {t.foot_legal.map((lk, i) => (
              <a key={i} href={lk.h} style={{ fontSize: '0.82rem', opacity: 0.7 }}>{lk.l}</a>
            ))}
          </div>
        </nav>
        <div className="copy">{t.foot_copy}</div>
      </footer>

      {/* Реквизиты ИП + РКН */}
      <div className="foot-req">
        <span>ИП Кузнецов Кирилл Иванович</span>
        <span>ИНН: 245907141405</span>
        <span>ОГРНИП: 325246800066890</span>
        <span>{isRu ? 'РКН: реестр провайдеров хостинга № 1720' : 'RKN hosting registry № 1720'}</span>
        <span>admin@hostline.cloud</span>
        <a href="contacts.html">{isRu ? 'Реквизиты →' : 'Details →'}</a>
      </div>
    </>
  );
}

Object.assign(window, { I18N, Navbar, HeroBadge, StatCard, Corner, SiteFooter });