// RiftLayout.jsx — header, footer, nav, brand mark for ТОВ «РІФТ» (rift.org.ua)

// Спільні контури куба РІФТ (грані = tone-a/tone-b, ребра = stroke-змінна).
const RIFT_CUBE_TF = "matrix(0.13333333,0,0,-0.13333333,0,107.05333)";
const RiftCubePaths = () => {
  const edge = { stroke: 'var(--rift-cube-stroke, none)', strokeWidth: 'var(--rift-cube-strokeW, 0)', strokeLinejoin: 'round', vectorEffect: 'non-scaling-stroke' };
  return (
    <React.Fragment>
      <path style={{ fill: 'var(--rift-cube-a)', ...edge }} transform={RIFT_CUBE_TF} d="m 0,315.605 411.762,-50 V 536.328 L 0,486.328 V 315.605" />
      <path style={{ fill: 'var(--rift-cube-a)', ...edge }} transform={RIFT_CUBE_TF} d="M 0,672.871 V 506.328 l 411.762,50 V 802.871 L 0,672.871" />
      <path style={{ fill: 'var(--rift-cube-a)', ...edge }} transform={RIFT_CUBE_TF} d="M 0,130 411.762,0 V 245.605 L 0,295.605 V 130" />
      <path style={{ fill: 'var(--rift-cube-b)', ...edge }} transform={RIFT_CUBE_TF} d="m 823.531,315.605 -411.761,-50 v 270.723 l 411.761,-50 V 315.605" />
      <path style={{ fill: 'var(--rift-cube-b)', ...edge }} transform={RIFT_CUBE_TF} d="m 411.77,0 411.761,130 v 165.605 l -411.761,-50 V 0" />
      <path style={{ fill: 'var(--rift-cube-b)', ...edge }} transform={RIFT_CUBE_TF} d="M 411.77,802.871 V 556.328 l 411.761,-50 v 166.543 l -411.761,130" />
    </React.Fragment>
  );
};

// RiftMark — фірмовий знак РІФТ (куб). Кольори керуються CSS-змінними та адаптуються до фону.
const RiftMark = ({ size = 32 }) => (
  <svg height={size} width={Math.round(size * 109.8 / 107.05)} viewBox="0 0 109.8 107.05333"
       xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }} role="img" aria-label="RIFT">
    <RiftCubePaths />
  </svg>
);
window.RiftMark = RiftMark;

// RiftLogo — повне лого РІФТ inline (куб + напис RIFT кольором тексту).
const RiftLogo = ({ height = 30, wordmark = 'currentColor' }) => {
  const tf = RIFT_CUBE_TF;
  return (
    <svg height={height} viewBox="0 0 530.8667 107.05333" xmlns="http://www.w3.org/2000/svg"
         style={{ display: 'block' }} role="img" aria-label="RIFT">
      {/* напис RIFT */}
      <path style={{ fill: wordmark }} transform={tf} d="M 1499.57,336.738 H 1097.33 V 131.973 H 960.211 V 264.531 462.898 H 1680.58 V 523.23 H 960.211 v 140.786 h 172.779 l 517.42,-0.918 c 49.36,0.601 90.5,-10.825 123.4,-34.282 32.91,-23.464 49.37,-58.671 49.37,-105.586 v -60.332 c 0,-46.328 -14.48,-78.933 -43.42,-97.82 -28.95,-18.879 -72.38,-28.34 -130.26,-28.34 l 173.68,-204.765 h -149.92 l -173.69,204.765" />
      <path style={{ fill: wordmark }} transform={tf} d="m 2058.12,131.973 h -137.13 v 532.043 h 137.13 V 523.23 464.727 349.543 131.973" />
      <path style={{ fill: wordmark }} transform={tf} d="m 2294.88,131.973 h -137.12 v 330.925 h 862.97 V 336.738 H 2294.88 V 276.406 Z M 2157.76,523.23 v 8.227 c 0,36.57 16.75,67.793 50.27,93.699 33.52,25.899 74.36,38.86 122.5,38.86 l 517.42,-0.918 172.78,0.918 V 523.23 h -609.75 -48.46 -204.76" />
      <path style={{ fill: wordmark }} transform={tf} d="M 3615.83,131.973 H 3478.7 V 523.23 h -360.17 v 140.786 h 172.78 l 517.42,-0.918 172.78,0.918 V 523.23 H 3615.83 V 131.973" />
      {/* куб */}
      <RiftCubePaths />
    </svg>
  );
};
window.RiftLogo = RiftLogo;

// --- Anti-scrape email helpers ---------------------------------------------
// Повний рядок "user@rift.org.ua" ніде не зберігається як єдиний токен:
// домен зібрано з частин, "@" вставляється рантаймом (CSS ::before),
// а mailto будується лише в момент кліку.
const RIFT_MAIL_DOMAIN = ['rift', 'org', 'ua'].join('.');
const riftMailto = (user) => 'mailto:' + user + String.fromCharCode(64) + RIFT_MAIL_DOMAIN;
window.riftMailto = riftMailto;

const Email = ({ user, className }) => {
  const onClick = (e) => { e.preventDefault(); window.location.href = riftMailto(user); };
  return (
    <a className={className} href="#mail" rel="nofollow" onClick={onClick}
       title={user + ' ' + RIFT_MAIL_DOMAIN}>
      <span>{user}</span><span className="rift-at" aria-hidden="true"></span><span>{RIFT_MAIL_DOMAIN}</span>
    </a>
  );
};
window.Email = Email;

// Кнопка-CTA, що відкриває лист без явного mailto у розмітці.
const MailButton = ({ user, className, children }) => {
  const onClick = (e) => { e.preventDefault(); window.location.href = riftMailto(user); };
  return <a className={className} href="#mail" rel="nofollow" onClick={onClick}>{children}</a>;
};
window.MailButton = MailButton;

const NAV_ITEMS = [
  { id: 'home',       label: 'Головна',     labelEn: 'Home' },
  { id: 'about',      label: 'Про нас',     labelEn: 'About' },
  { id: 'history',    label: 'Історія',     labelEn: 'History' },
  { id: 'domains',    label: 'Домени',      labelEn: 'Domains' },
  { id: 'registrars', label: 'Реєстратори', labelEn: 'Registrars' },
  { id: 'tech',       label: 'Технології',  labelEn: 'Technology' },
  { id: 'docs',       label: 'Документи',   labelEn: 'Documents' },
  { id: 'faq',        label: 'Питання',     labelEn: 'FAQ' },
  { id: 'contacts',   label: 'Контакти',    labelEn: 'Contacts' },
];
window.NAV_ITEMS = NAV_ITEMS;

const Header = ({ page, setPage, lang, setLang }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const go = (id) => { setPage(id); setMenuOpen(false); };
  const strip = lang === 'uk'
    ? [['ЗАСН.', '2011'], ['ЗОНИ', 'rivne.ua · rv.ua'], ['РЕЄСТР', '.UA / hostmaster'], ['DNSSEC', 'active'], ['РЕЄСТРАТОРІВ', '48'], ['ДОМЕНІВ', '1 200+']]
    : [['EST.', '2011'], ['ZONES', 'rivne.ua · rv.ua'], ['REGISTRY', '.UA / hostmaster'], ['DNSSEC', 'active'], ['REGISTRARS', '48'], ['DOMAINS', '1,200+']];
  return (
    <header className="rb-header">
      <div className="rb-header__inner">
        <button className="rb-brand rb-brand--logo" onClick={() => go('home')} aria-label="RIFT home">
          <RiftLogo height={28} />
          <span className="rb-brand__div" aria-hidden></span>
          <span className="rb-brand__sub rb-brand__sub--logo">{lang === 'uk' ? 'Адміністратор доменів' : 'Domain administrator'}</span>
        </button>

        <div className="rb-header__actions">
          <div className="rb-lang">
            <button className={lang === 'uk' ? 'is-on' : ''} onClick={() => setLang('uk')}>UK</button>
            <span className="rb-lang__sep">/</span>
            <button className={lang === 'en' ? 'is-on' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
          <button className="rb-cta" onClick={() => go('registrars')}>
            {lang === 'uk' ? 'Зареєструвати' : 'Register'} <span aria-hidden>→</span>
          </button>
          <button className={`rb-burger ${menuOpen ? 'is-open' : ''}`} onClick={() => setMenuOpen(o => !o)} aria-label={lang === 'uk' ? 'Меню' : 'Menu'} aria-expanded={menuOpen}>
            <span></span>
          </button>
        </div>
      </div>

      <nav className="rb-navrow" aria-label="Primary">
        <div className="rb-navrow__inner">
          {NAV_ITEMS.map(item => (
            <button key={item.id}
              className={`rb-nav__link ${page === item.id ? 'is-active' : ''}`}
              onClick={() => go(item.id)}>
              {lang === 'uk' ? item.label : item.labelEn}
            </button>
          ))}
        </div>
      </nav>

      {menuOpen && (
        <nav className="rb-mobnav" aria-label="Mobile">
          <div className="rb-mobnav__inner">
            {NAV_ITEMS.map(item => (
              <button key={item.id}
                className={`rb-mobnav__link ${page === item.id ? 'is-active' : ''}`}
                onClick={() => go(item.id)}>
                {lang === 'uk' ? item.label : item.labelEn}
              </button>
            ))}
          </div>
        </nav>
      )}
      <div className="rb-header__strip rb-header__strip--rift" aria-hidden>
        {strip.map(([k, v], i) => <span key={i}>{k} <b>{v}</b></span>)}
      </div>
    </header>
  );
};
window.Header = Header;

const Footer = ({ lang, setPage }) => {
  const L = (uk, en) => (lang === 'uk' ? uk : en);
  return (
    <footer className="rb-footer">
      <div className="rb-footer__top">
        <div className="rb-footer__brand rift-footer__brand">
          <div className="rift-footer__id">
            <span className="rift-onblue" aria-hidden><RiftMark size={36} /></span>
            <span className="rb-footer__name">ТОВ «РІФТ»</span>
          </div>
          <div className="rb-footer__sub">{L('Адміністратор рівненських публічних доменів з 2011 року. Рівне — завжди поряд.', 'Administrator of Rivne region public domains since 2011. Rivne is always near.')}</div>
          <a className="rift-fb" href="https://www.facebook.com/RIFT.ltd" target="_blank" rel="noopener noreferrer">
            <span className="rift-fb__ic" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.51 1.49-3.9 3.78-3.9 1.1 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.44 2.89h-2.34v6.99A10 10 0 0 0 22 12z"/></svg>
            </span>
            <span className="rift-fb__txt">
              <span className="rift-fb__lbl">{L('Стежте за нами', 'Follow us')}</span>
              <span className="rift-fb__handle">facebook.com/RIFT.ltd</span>
            </span>
            <span className="rift-fb__arr" aria-hidden="true">→</span>
          </a>
        </div>
        <div className="rb-footer__cols">
          <div>
            <div className="rb-footer__h">{L('Зони', 'Zones')}</div>
            <a onClick={() => setPage('domains')}>rivne.ua</a>
            <a onClick={() => setPage('domains')}>rv.ua</a>
            <a onClick={() => setPage('domains')}>rovno.ua</a>
            <a onClick={() => setPage('registrars')}>{L('Реєстратори', 'Registrars')}</a>
          </div>
          <div>
            <div className="rb-footer__h">{L('Розділи', 'Sections')}</div>
            <a onClick={() => setPage('about')}>{L('Про нас', 'About')}</a>
            <a onClick={() => setPage('history')}>{L('Історія', 'History')}</a>
            <a onClick={() => setPage('tech')}>{L('Технології', 'Technology')}</a>
            <a onClick={() => setPage('docs')}>{L('Документи', 'Documents')}</a>
            <a onClick={() => setPage('faq')}>{L('Питання', 'FAQ')}</a>
          </div>
          <div>
            <div className="rb-footer__h">{L('Контакти', 'Contact')}</div>
            <Email user="info" />
            <Email user="support" />
            <a onClick={() => setPage('contacts')}>{L('33028, м. Рівне, а/с 28', '33028, Rivne, P.O. Box 28')}</a>
          </div>
        </div>
      </div>
      <div className="rb-footer__bottom">
        <span>© 2011–2026 {L('ТОВ «РІФТ»', 'RIFT Ltd.')}</span>
        <span>{L('Зробити українське найкращим', 'Make Ukrainian the best')}</span>
        <span>rift.org.ua</span>
      </div>
    </footer>
  );
};
window.Footer = Footer;