// RiftHome.jsx — головна сторінка ТОВ «РІФТ»

const ZONES = [
  { tld: 'rivne.ua', status: 'open', year: '2015', tag: { uk: 'ОСНОВНА', en: 'PRIMARY' },
    short: { uk: 'Офіційна українська зона міста Рівне', en: 'Official Ukrainian zone of Rivne' },
    long: { uk: 'Делегована 02.02.2015. DNSSEC, локальна ідентичність — для установ, освіти, медіа та влади.', en: 'Delegated 02.02.2015. DNSSEC, local identity — for institutions, education, media and government.' } },
  { tld: 'rv.ua', status: 'open', year: '1997', tag: { uk: 'ВІДКРИТА', en: 'OPEN' },
    short: { uk: 'Коротке регіональне скорочення', en: 'Short regional alias' },
    long: { uk: 'Відкрита 16.02.1997 як скорочення для rivne.ua / rovno.ua. DNSSEC, вільна реєстрація — найзаселеніша зона.', en: 'Opened 16.02.1997 as an alias for rivne.ua / rovno.ua. DNSSEC, open registration — the most populated zone.' } },
  { tld: 'rovno.ua', status: 'retired', year: '1992', tag: { uk: 'ЗАКРИТА', en: 'CLOSED' },
    short: { uk: 'Найстаріша зона регіону', en: 'Oldest zone of the region' },
    long: { uk: 'Створена 12.12.1992 з російською транслітерацією. Виведена з обігу 2022 року. Нові реєстрації не приймаються.', en: 'Created 12.12.1992 with Russian transliteration. Retired in 2022. No new registrations.' } },
];

const T_HOME = {
  uk: {
    eyebrow: 'Адміністратор рівненських публічних доменів',
    h1a: 'Рівне —',
    h1b: 'завжди поряд',
    sub: 'ТОВ «РІФТ» адмініструє регіональні публічні домени rivne.ua, rv.ua та rovno.ua з 2011 року. Ми тримаємо реєстр, інфраструктуру та довіру, на яких тримається цифрова ідентичність Рівненщини.',
    primary: 'Зареєструвати домен',
    secondary: 'Про адміністратора',
    trustLbl: 'Стандарти та акредитація',
    statsLabel: 'Реєстр у цифрах',
    s: [
      { n: '2011', l: 'рік заснування адміністратора' },
      { n: '3', l: 'регіональні доменні зони' },
      { n: '48', l: 'акредитованих реєстраторів' },
      { n: '1 200+', l: 'активних доменів у зонах' },
    ],
    missionKicker: 'Місія',
    missionQ: 'Зробити українське — <em>найкращим</em>.',
    missionQSub: 'Локальна адреса як стандарт надійності, ідентичності та довіри.',
    missionP1: 'Товариство з обмеженою відповідальністю «РІФТ» заснувала у 2011 році група технічних фахівців-ентузіастів — як відповідь на вимоги ринку та користувачів.',
    missionP2: 'Ми перетворили систему доменних імен Рівненщини на платформу реєстрації та підтримки доменів з високим рівнем надійності, якості й доступності в інтересах українських споживачів.',
    signName: 'ТОВ «РІФТ»',
    signRole: 'Адміністратор зон rivne.ua · rv.ua · rovno.ua',
    valuesH: 'Принципи',
    values: [
      { t: 'Українська ідентичність', d: 'Українські назви топонімів. Рівне — не «Ровно». Деколонізація доменного простору.' },
      { t: 'Технічна надійність', d: 'Перший DNSSEC в Україні (2012). Anycast, IPv6, IDN, EPP — інфраструктура рівня enterprise.' },
      { t: 'Відкрита модель', d: 'Реєстрація лише через акредитованих партнерів — прозоро, як у gTLD через ICANN.' },
    ],
    zonesTitle: 'Зони, які ми адмініструємо',
    zonesSub: 'Три регіональні доменні зони Рівненщини під єдиним адмініструванням.',
    zoneCta: 'Детальніше →',
    roleTitle: 'Адміністратор, а не реєстратор',
    roleSub: 'Ми відповідаємо за підтримку зон та реєстру. Реєстрацію доменів для клієнтів виконують акредитовані партнери.',
    roleAdmin: { tag: 'Адміністратор зони · РІФТ', t: 'Що робить РІФТ', d: 'Тримає реєстр, інфраструктуру та правила регіональних зон Рівненщини.', items: ['Веде реєстр доменів і NS-делегування', 'Підтримує DNSSEC, anycast, дзеркала', 'Акредитує та контролює реєстраторів', 'Публікує регламенти й вирішує спори'] },
    roleReg: { tag: 'Реєстратор · партнер', t: 'Що робить реєстратор', d: 'Безпосередньо оформлює, продовжує й супроводжує домени для кінцевих клієнтів.', items: ['Приймає заявки та оплату', 'Реєструє домен у реєстрі РІФТ', 'Надає панель керування та підтримку', 'Допомагає з DNS, поштою, SSL'] },
    statusTitle: 'Стан інфраструктури',
    statusSub: 'Реєстр і DNS-зони працюють у режимі 24/7. Нижче — поточні показники.',
    statusLive: 'Усі системи в нормі',
    statusUptime: '99.98%',
    statusCap: 'доступність реєстру за 90 днів',
    statusCells: [
      { n: '3', l: 'глобальних сервісів DNS', sub: 'rivne.ua · rv.ua' },
      { n: '< 25 ms', l: 'медіанна відповідь DNS', sub: 'у межах України' },
      { n: 'DNSSEC', l: 'підпис усіх зон', sub: 'з 2012' },
      { n: 'IPv4 / IPv6', l: 'подвійний стек', sub: 'dual-stack' },
    ],
    regTitle: 'Де зареєструвати домен',
    regSub: 'РІФТ не приймає реєстрацій напряму — оберіть одного з 48 акредитованих реєстраторів.',
    regCta: 'Усі реєстратори →',
    faqTitle: 'Часті питання',
    faq: [
      { q: 'Чи можна зареєструвати rivne.ua напряму через РІФТ?', a: 'Ні. РІФТ — адміністратор зони. Реєстрації відбуваються лише через акредитованих реєстраторів. Це світова практика, подібна до моделі gTLD через ICANN.' },
      { q: 'Чим відрізняється rivne.ua від rv.ua?', a: 'rivne.ua — повна українська назва міста, для офіційних ресурсів, установ, освіти й медіа. rv.ua — коротке скорочення, зручне бізнесу та IT. Обидві зони DNSSEC-захищені й адмініструються РІФТ.' },
      { q: 'Чому зону rovno.ua закрито?', a: 'Зону створено 1992 року з російською транслітерацією назви міста. Після повномасштабного вторгнення РФ 2022 року її виведено з обігу. Активні домени мігрують у rivne.ua або rv.ua.' },
      { q: 'Чи захищені рівненські домени?', a: 'Так. Зони підписані DNSSEC на рівні .ua, передача — лише за одноразовим EPP-кодом, у реєстраторів обовʼязкова двофакторна автентифікація.' },
    ],
    ctaT: 'Готові отримати власну рівненську адресу в зоні .ua?',
    ctaS: 'Перевірте вільне імʼя та оформіть домен в акредитованого партнера.',
    ctaBtn: 'Обрати реєстратора',
    ctaGhost: 'Кабінет клієнта',
  },
  en: {
    eyebrow: 'Administrator of Rivne region public domains',
    h1a: 'Rivne —',
    h1b: 'always near',
    sub: 'RIFT Ltd. has administered the regional public domains rivne.ua, rv.ua and rovno.ua since 2011. We maintain the registry, the infrastructure and the trust on which the region\'s digital identity stands.',
    primary: 'Register a domain',
    secondary: 'About the administrator',
    trustLbl: 'Standards & accreditation',
    statsLabel: 'Registry at a glance',
    s: [
      { n: '2011', l: 'administrator founded' },
      { n: '3', l: 'regional domain zones' },
      { n: '48', l: 'accredited registrars' },
      { n: '1,200+', l: 'active domains in zones' },
    ],
    missionKicker: 'Mission',
    missionQ: 'Make Ukrainian — <em>the best</em>.',
    missionQSub: 'A local address as a standard of reliability, identity and trust.',
    missionP1: 'RIFT Ltd. was founded in 2011 by a group of technical enthusiasts — a response to the demands of the market and users.',
    missionP2: 'We turned the domain name system of the Rivne region into a platform for registering and supporting domains with a high level of reliability, quality and availability in the interest of Ukrainian users.',
    signName: 'RIFT Ltd.',
    signRole: 'Administrator of rivne.ua · rv.ua · rovno.ua',
    valuesH: 'Principles',
    values: [
      { t: 'Ukrainian identity', d: 'Ukrainian place names. Rivne — never "Rovno". Decolonising the domain space.' },
      { t: 'Technical reliability', d: 'First DNSSEC in Ukraine (2012). Anycast, IPv6, IDN, EPP — enterprise-grade infrastructure.' },
      { t: 'Open model', d: 'Registration only via accredited partners — transparent, like gTLDs via ICANN.' },
    ],
    zonesTitle: 'Zones we administer',
    zonesSub: 'Three regional domain zones of the Rivne region under one administration.',
    zoneCta: 'Details →',
    roleTitle: 'An administrator, not a registrar',
    roleSub: 'We are responsible for maintaining the zones and registry. Registering domains for clients is done by accredited partners.',
    roleAdmin: { tag: 'Zone administrator · RIFT', t: 'What RIFT does', d: 'Holds the registry, infrastructure and rules of the Rivne regional zones.', items: ['Maintains the domain registry and NS delegation', 'Runs DNSSEC, anycast, mirrors', 'Accredits and oversees registrars', 'Publishes regulations and resolves disputes'] },
    roleReg: { tag: 'Registrar · partner', t: 'What a registrar does', d: 'Directly registers, renews and supports domains for end clients.', items: ['Accepts applications and payment', 'Registers the domain in the RIFT registry', 'Provides a control panel and support', 'Helps with DNS, mail, SSL'] },
    statusTitle: 'Infrastructure status',
    statusSub: 'The registry and DNS zones run 24/7. Current metrics below.',
    statusLive: 'All systems operational',
    statusUptime: '99.98%',
    statusCap: 'registry availability over 90 days',
    statusCells: [
      { n: '3', l: 'global DNS services', sub: 'rivne.ua · rv.ua' },
      { n: '< 25 ms', l: 'median DNS response', sub: 'within Ukraine' },
      { n: 'DNSSEC', l: 'all zones signed', sub: 'since 2012' },
      { n: 'IPv4 / IPv6', l: 'dual stack', sub: 'dual-stack' },
    ],
    regTitle: 'Where to register a domain',
    regSub: 'RIFT does not register directly — choose one of 48 accredited registrars.',
    regCta: 'All registrars →',
    faqTitle: 'FAQ',
    faq: [
      { q: 'Can I register rivne.ua directly through RIFT?', a: 'No. RIFT is the zone administrator. Registrations happen only through accredited registrars — the same model as gTLDs via ICANN.' },
      { q: 'How does rivne.ua differ from rv.ua?', a: 'rivne.ua is the full Ukrainian city name, for official resources, institutions, education and media. rv.ua is a short alias, convenient for business and IT. Both are DNSSEC-protected and administered by RIFT.' },
      { q: 'Why was the rovno.ua zone closed?', a: 'The zone was created in 1992 with a Russian transliteration of the city name. After Russia\'s full-scale invasion in 2022 it was retired. Active domains migrate to rivne.ua or rv.ua.' },
      { q: 'Are Rivne domains protected?', a: 'Yes. Zones are DNSSEC-signed at the .ua level, transfers require a one-time EPP code, and registrars enforce two-factor authentication.' },
    ],
    ctaT: 'Ready to claim your own Rivne address in .ua?',
    ctaS: 'Check an available name and register a domain with an accredited partner.',
    ctaBtn: 'Choose a registrar',
    ctaGhost: 'Client area',
  },
};

// Orbital ring + node — the hero motif reused as a quiet section divider.
const RingDivider = ({ label }) => (
  <div className="rb-orbdiv" role="separator" aria-hidden="true">
    <span className="rb-orbdiv__line"></span>
    <svg className="rb-orbdiv__mark" width="30" height="30" viewBox="0 0 30 30">
      <circle cx="15" cy="15" r="13.5"></circle>
      <circle cx="15" cy="15" r="7.5"></circle>
      <circle className="rb-orbdiv__dot" cx="15" cy="15" r="2.4"></circle>
    </svg>
    {label ? <span className="rb-orbdiv__lbl">{label}</span> : null}
    <span className="rb-orbdiv__line"></span>
  </div>
);

const HomePage = ({ lang, setPage }) => {
  const t = T_HOME[lang];
  const [open, setOpen] = React.useState(0);

  return (
    <main className="rb-home">
      {/* HERO */}
      <section className="rb-hero">
        <div className="rb-hero__grid">
          <div className="rb-hero__copy">
            <div className="rb-eyebrow"><span className="rb-eyebrow__dot" />{t.eyebrow}</div>
            <h1 className="rb-h1">
              <span className="rb-h1__a">{t.h1a}</span>
              <span className="rb-h1__b">{t.h1b}</span>
            </h1>
            <p className="rb-lead">{t.sub}</p>
            <div className="rb-hero__cta">
              <button className="rb-btn rb-btn--primary" onClick={() => setPage('registrars')}>{t.primary} <span aria-hidden>→</span></button>
              <button className="rb-btn rb-btn--ghost" onClick={() => setPage('about')}>{t.secondary}</button>
            </div>
            <div className="rb-hero__meta">
              <span>50.6199° N</span><span>26.2516° E</span><span>UA-56</span><span>EST. 2011</span>
            </div>
          </div>
          <div className="rift-hero__visual" aria-hidden>
            <div className="rift-hero__crystal"><RiftMark size={210} /></div>
            <div className="rb-hero__rings">
              <span className="rb-ring rb-ring--1" />
              <span className="rb-ring rb-ring--2" />
              <span className="rb-ring rb-ring--3" />
            </div>
            <div className="rift-hero__badge rift-hero__badge--1"><span className="dot" />DNSSEC</div>
            <div className="rift-hero__badge rift-hero__badge--2">Anycast DNS</div>
            <div className="rift-hero__badge rift-hero__badge--3">IPv6</div>
            <div className="rift-hero__badge rift-hero__badge--4">IDN</div>
            <div className="rift-hero__badge rift-hero__badge--5">EPP</div>
          </div>
        </div>
      </section>

      {/* TRUST BAR */}
      <section className="rift-trust">
        <div className="rift-trust__inner">
          <div className="rift-trust__lbl">{t.trustLbl}</div>
          <div className="rift-trust__items">
            {[['DNSSEC', 'RFC 4033'], ['Anycast', lang === 'uk' ? '6 вузлів' : '6 nodes'], ['IPv6', 'dual-stack'], ['IDN', lang === 'uk' ? 'кирилиця' : 'cyrillic'], ['EPP', 'RFC 5731'], ['.UA', 'hostmaster.ua']].map(([a, b], i) => (
              <div className="rift-trust__item" key={i}><b>{a}</b><span>{b}</span></div>
            ))}
          </div>
        </div>
      </section>

      {/* STATS */}
      <section className="rb-stats">
        <div className="rb-stats__label">{t.statsLabel}</div>
        <div className="rb-stats__grid">
          {t.s.map((s, i) => (
            <div className="rb-stat" key={i}>
              <div className="rb-stat__num">{s.n}</div>
              <div className="rb-stat__lab">{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* FIRST-IN-UKRAINE ACCENT BAND */}
      <section className="rb-section" style={{ paddingTop: 0, paddingBottom: 0 }}>
        <div className="rift-firstband rift-firstband--gold">
          <div className="rift-firstband__badge">2012</div>
          <div className="rift-firstband__txt">
            <strong>{lang === 'uk' ? 'Перший в Україні DNSSEC для регіональних доменів' : 'The first regional-domain DNSSEC in Ukraine'}</strong>
            <span>{lang === 'uk' ? 'РІФТ першим в Україні впровадив DNSSEC для регіональних доменів — криптографічний захист раніше за всіх інших.' : 'RIFT was the first in Ukraine to deploy DNSSEC for regional domains — cryptographic protection ahead of everyone else.'}</span>
          </div>
          <button className="rift-firstband__link" onClick={() => setPage('history')}>{lang === 'uk' ? 'Історія' : 'History'} →</button>
        </div>
      </section>

      <RingDivider label="50.6199° N · 26.2516° E" />

      {/* MISSION */}
      <section className="rb-section">
        <div className="rift-mission">
          <div>
            <div className="rift-mission__kicker">{t.missionKicker}</div>
            <p className="rift-mission__q" dangerouslySetInnerHTML={{ __html: t.missionQ }} />
            <p className="rift-mission__qsub">{t.missionQSub}</p>
            <p className="rift-mission__p">{t.missionP1}</p>
            <p className="rift-mission__p">{t.missionP2}</p>
            <div className="rift-mission__sign">
              <img src="assets/rift-logo.svg" alt="RIFT" loading="lazy" decoding="async" />
              <div><b>{t.signName}</b>{t.signRole}</div>
            </div>
          </div>
          <aside className="rift-mission__aside">
            <div className="rift-mission__asideH">{t.valuesH}</div>
            {t.values.map((v, i) => (
              <div className="rift-vrow" key={i}>
                <div className="rift-vrow__n">{String(i + 1).padStart(2, '0')}</div>
                <div>
                  <div className="rift-vrow__t">{v.t}</div>
                  <div className="rift-vrow__d">{v.d}</div>
                </div>
              </div>
            ))}
          </aside>
        </div>
      </section>

      {/* ZONES */}
      <section className="rb-section rb-section--alt">
        <div className="rb-section__head rb-section__head--rail">
          <div className="rb-section__rail">
            <span className="rb-section__idx">02</span>
            <span className="rb-section__ey">{lang === 'uk' ? 'Доменні зони' : 'Domain zones'}</span>
          </div>
          <div>
            <h2 className="rb-h2">{t.zonesTitle}</h2>
            <p className="rb-sub">{t.zonesSub}</p>
          </div>
        </div>
        <div className="rb-zonegrid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
          {ZONES.map(z => (
            <article className={`rb-zonecard ${z.status === 'retired' ? 'rb-zonecard--retired' : 'rb-zonecard--live'}`} key={z.tld}>
              <div className="rb-zonecard__head">
                <span className={`rb-zonecard__tag rb-zonecard__tag--${z.status}`}>{z.tag[lang]}</span>
                <span className="rb-zonecard__year">{z.year}</span>
              </div>
              <div className="rb-zonecard__tld">.{z.tld}</div>
              <div className="rb-zonecard__short">{z.short[lang]}</div>
              <p className="rb-zonecard__long">{z.long[lang]}</p>
              <div className="rb-zonecard__status">
                <span className="rb-zonecard__sdot"></span>
                {z.status === 'retired'
                  ? (lang === 'uk' ? 'Архівна · 2022' : 'Retired · 2022')
                  : (lang === 'uk' ? 'DNSSEC · активна' : 'DNSSEC · active')}
              </div>
              {z.status === 'retired'
                ? <button className="rb-zonecard__cta" onClick={() => setPage('docs')}>{lang === 'uk' ? 'Регламент зони →' : 'Zone regulation →'}</button>
                : <button className="rb-zonecard__cta rb-zonecard__cta--primary" onClick={() => setPage('registrars')}>{lang === 'uk' ? 'Зареєструвати →' : 'Register →'}</button>}
            </article>
          ))}
        </div>
      </section>

      {/* ROLE SPLIT */}
      <section className="rb-section">
        <div className="rb-section__head rb-section__head--split">
          <h2 className="rb-h2">{t.roleTitle}</h2>
          <p className="rb-sub">{t.roleSub}</p>
        </div>
        <div className="rift-role">
          {[{ ...t.roleAdmin, kind: 'admin' }, { ...t.roleReg, kind: 'reg' }].map((r, i) => (
            <div className={`rift-rolecard rift-rolecard--${r.kind}`} key={i}>
              <span className="rift-rolecard__tag">{r.tag}</span>
              <h3 className="rift-rolecard__t">{r.t}</h3>
              <p className="rift-rolecard__d">{r.d}</p>
              <ul>{r.items.map((it, j) => <li key={j}>{it}</li>)}</ul>
            </div>
          ))}
        </div>
      </section>

      {/* INFRA STATUS */}
      <section className="rb-section rb-section--alt">
        <div className="rb-section__head rb-section__head--rail">
          <div className="rb-section__rail">
            <span className="rb-section__idx">04</span>
            <span className="rb-section__ey">{lang === 'uk' ? 'Інфраструктура' : 'Infrastructure'}</span>
          </div>
          <div>
            <h2 className="rb-h2">{t.statusTitle}</h2>
            <p className="rb-sub">{t.statusSub}</p>
          </div>
        </div>
        <LiveStatus lang={lang} fb={{ live: t.statusLive, uptime: t.statusUptime, cap: t.statusCap, cells: t.statusCells }} />
      </section>

      {/* REGISTRARS PREVIEW / CTA */}
      <section className="rb-section">
        <div className="rb-section__head">
          <h2 className="rb-h2">{t.regTitle}</h2>
          <p className="rb-sub">{t.regSub}</p>
        </div>
        <div className="rift-regpreview">
          <div className="rift-regpreview__num">48</div>
          <div className="rift-regpreview__body">
            <h3 className="rift-regpreview__t">{lang === 'uk' ? 'Акредитованих реєстраторів' : 'Accredited registrars'}</h3>
            <p className="rift-regpreview__s">{lang === 'uk' ? 'Повний перевірений список з юридичними особами та сайтами.' : 'Full verified list with legal entities and websites.'}</p>
          </div>
          <button className="rb-btn rb-btn--primary" onClick={() => setPage('registrars')}>{t.regCta}</button>
          <svg className="rift-regpreview__orb" viewBox="0 0 220 220" aria-hidden="true">
            <circle cx="110" cy="110" r="50"></circle>
            <circle cx="110" cy="110" r="80"></circle>
            <circle cx="110" cy="110" r="108"></circle>
          </svg>
        </div>
      </section>

      {/* FAQ teaser → consolidated FAQ page */}
      <section className="rb-section rb-section--alt">
        <button className="rift-faqteaser" onClick={() => setPage('faq')}>
          <span className="rift-faqteaser__txt">
            <span className="rift-faqteaser__k">{lang === 'uk' ? 'Довідковий центр' : 'Help centre'}</span>
            <span className="rift-faqteaser__t">{lang === 'uk' ? 'Питання про домени, реєстрацію, DNSSEC чи передачу?' : 'Questions about domains, registration, DNSSEC or transfer?'}</span>
          </span>
          <span className="rift-faqteaser__cta">{lang === 'uk' ? 'Усі поширені питання' : 'All FAQ'} <span aria-hidden>→</span></span>
        </button>
      </section>

      {/* FINAL CTA — the one deliberate, weighty dark moment */}
      <section className="rb-section" style={{ paddingTop: 0 }}>
        <div className="rb-finalcta">
          <div className="rb-finalcta__inner">
            <div className="rb-finalcta__copy">
              <div className="rb-finalcta__eyebrow">{lang === 'uk' ? 'Готові почати' : 'Ready to start'}</div>
              <h2 className="rb-finalcta__t">{t.ctaT}</h2>
              <p className="rb-finalcta__s">{t.ctaS}</p>
              <div className="rb-finalcta__actions">
                <button className="rb-btn rb-finalcta__btn" onClick={() => setPage('registrars')}>{t.ctaBtn} <span aria-hidden>→</span></button>
                <span className="rb-finalcta__meta">rivne.ua · rv.ua · DNSSEC</span>
              </div>
            </div>
            <div className="rb-finalcta__rings" aria-hidden="true">
              <svg viewBox="0 0 460 460">
                <circle cx="300" cy="230" r="62" className="rb-finalcta__core"></circle>
                <circle cx="300" cy="230" r="120"></circle>
                <circle cx="300" cy="230" r="180" className="rb-finalcta__ringDash"></circle>
                <circle cx="300" cy="230" r="226"></circle>
                <circle cx="300" cy="110" r="5" className="rb-finalcta__node"></circle>
                <circle cx="420" cy="230" r="4" className="rb-finalcta__node rb-finalcta__node--soft"></circle>
                <circle cx="225" cy="338" r="4" className="rb-finalcta__node rb-finalcta__node--soft"></circle>
                <circle cx="182" cy="168" r="3.4" className="rb-finalcta__node rb-finalcta__node--soft"></circle>
              </svg>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};
window.HomePage = HomePage;
window.RIFT_ZONES = ZONES;