/* Общие компоненты: шапка, футер, плейсхолдеры, иконки */
const { useState, useEffect, useRef, useMemo } = React;

/* — простые штриховые иконки (минимум, не сложнее линий) — */
function Arrow({ className }) {
  return <svg className={className} width="18" height="18" viewBox="0 0 18 18" fill="none">
    <path d="M3 9h12M10 4l5 5-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>;
}
function Search({ size = 16 }) {
  return <svg width={size} height={size} viewBox="0 0 18 18" fill="none">
    <circle cx="8" cy="8" r="5.2" stroke="currentColor" strokeWidth="1.5" />
    <path d="M12 12l4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>;
}
function Star({ className }) {
  return <span className={className}>✦</span>;
}

/* — навигация — */
const NAV = [
{ id: 'home', label: 'Главная' },
{ id: 'feed', label: 'Лента' },
{ id: 'school', label: 'Школа' },
{ id: 'library', label: 'Библиотека' },
{ id: 'rental', label: 'Аренда' }];


function Header({ route, go }) {
  const [open, setOpen] = useState(false);
  const [authed, setAuthed] = useState(() => localStorage.getItem('dzagli_account_in')==='1');
  useEffect(() => {
    const h = () => setAuthed(localStorage.getItem('dzagli_account_in')==='1');
    window.addEventListener('authchange', h);
    window.addEventListener('storage', h);
    return () => { window.removeEventListener('authchange', h); window.removeEventListener('storage', h); };
  }, []);
  return (
    <header className={'nav' + (open ? ' is-open' : '')}>
      <div className="nav__inner">
        <a className="brand" href="#home" onClick={(e) => {e.preventDefault();go('home');setOpen(false);}}>
          <span className="brand__dot" aria-hidden="true"></span>
          <span className="brand__mark">Бродячая Собака</span>
        </a>
        <div className="nav__menu">
          <nav className="nav__links">
            {NAV.map((n) =>
            <a key={n.id} href={'#' + n.id}
            className={'nav__link' + (route === n.id ? ' is-active' : '')}
            onClick={(e) => {e.preventDefault();go(n.id);setOpen(false);}}>{n.label}</a>
            )}
          </nav>
          <a className="nav__cta" href="#account" onClick={(e) => {e.preventDefault();go('account');setOpen(false);}}>{authed ? 'Кабинет' : 'Войти'}</a>
        </div>
        <button className="nav__burger nav__link" onClick={() => setOpen((o) => !o)} aria-label="меню">
          {open ? '✕ закрыть' : '≡ меню'}
        </button>
      </div>
    </header>);

}

/* — плейсхолдер картинки — */
function Ph({ label, ratio = '4/3', className = '', style = {} }) {
  return (
    <div className={'ph ' + className} style={{ aspectRatio: ratio, ...style }}>
      <span className="ph__label">{label}</span>
    </div>);

}

/* — заголовок секции с mono-меткой — */
function SectionHead({ index, kicker, title, intro }) {
  return (
    <div style={{ marginBottom: 'clamp(28px,4vw,52px)' }}>
      <div className="flex center gap-s" style={{ marginBottom: 18 }}>
        <span className="tag green">[ {index} ]</span>
        <span className="tag">{kicker}</span>
      </div>
      <h2 style={{ maxWidth: '14ch', fontSize: "68px" }} className="wrapb">{title}</h2>
      {intro && <p className="muted prettyw" style={{ marginTop: 18, maxWidth: '52ch', fontSize: 18 }}>{intro}</p>}
    </div>);

}

/* — футер — */
function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="wrap" style={{ paddingBlock: 'clamp(48px,7vw,88px)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.4fr) repeat(3, minmax(0,1fr))', gap: 40 }} className="footer-grid">
          <div>
            <div className="brand__mark" style={{ fontSize: 34, marginBottom: 6, letterSpacing: '-0.01em', lineHeight: 1.02 }}>БРОДЯЧАЯ<br />СОБАКА</div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--green-2)', marginBottom: 14 }}>DZAGLI : Тбилиси</div>
            <p style={{ color: 'var(--green-pale)', maxWidth: '34ch', lineHeight: 1.5 }} className="prettyw">Заходите<br />разувайтесь<br />оставайтесь

            </p>
            <div className="mono" style={{ marginTop: 22, fontSize: 12.5, color: 'var(--green-pale)', letterSpacing: '0.04em' }}>

            </div>
          </div>
          <FootCol title="Разделы" links={[['Лента событий', 'feed'], ['Школа', 'school'], ['Библиотека', 'library'], ['Аренда', 'rental']]} go={go} />
          <FootCol title="Найти нас" plain={['ул. Бесики, Тбилиси', 'Грузия', 'каждый день · 10–22']
          } />
          <FootCol title="Связь" plain={[
          '@dzagli_tbilisi', 'hello@dzagli.space', '+995 555 00 00 00']
          } />
        </div>
        <hr className="rule" style={{ marginBlock: 36 }} />
        <div className="flex between center mono" style={{ fontSize: 11.5, color: 'var(--green-pale)', letterSpacing: '0.06em', flexWrap: 'wrap', gap: 12 }}>
          <span>© 2026 dzagli.space — третье место</span>
          <span>powered by dzgl</span>
        </div>
      </div>
    </footer>);

}
function FootCol({ title, links, plain, go }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--green-2)', marginBottom: 16 }}>{title}</div>
      <div className="flex col" style={{ gap: 10 }}>
        {links && links.map(([l, id]) =>
        <a key={id} href={'#' + id} onClick={(e) => {e.preventDefault();go(id);}} style={{ color: 'var(--paper)' }}>{l}</a>
        )}
        {plain && plain.map((p, i) => <span key={i} style={{ color: 'var(--paper)', opacity: .85 }}>{p}</span>)}
      </div>
    </div>);

}

Object.assign(window, { Header, Footer, Ph, SectionHead, Arrow, Search, Star, NAV });