// Sections.jsx — content sections for ООО «РЕЗЕРВ» site

function Emblem({ size = 64 }) {
  return (
    <div className="emblem" style={{ width: size, height: size }}>
      <div className="emblem-ring"></div>
      <div className="emblem-mono" style={{ fontSize: size * 0.5 }}>Р</div>
    </div>
  );
}

function UtilityBar({ acc, setAcc, setSection }) {
  const goAnchor = (key, hash) => e => {
    e.preventDefault();
    setSection(key);
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        const el = document.getElementById(hash);
        if (el) {
          const top = el.getBoundingClientRect().top + window.scrollY - 80;
          window.scrollTo({ top, behavior: 'smooth' });
        } else {
          window.scrollTo({ top: 0, behavior: 'smooth' });
        }
      });
    });
  };
  return (
    <div className="utility-bar">
      <div className="inner">
        <div className="utility-links">
          <a href="#disclosure" onClick={goAnchor('documents', 'disclosure')}>Раскрытие информации</a>
          <a href="#corruption" onClick={goAnchor('documents', 'corruption')}>Противодействие коррупции</a>
          <a href="#pdn" onClick={goAnchor('documents', 'pdn')}>Персональные данные</a>
          <a href="https://egrul.nalog.ru/index.html?inn=9717190305" target="_blank" rel="noopener noreferrer">Сведения в ЕГРЮЛ</a>
        </div>
        <div className="utility-actions">
          <button className={acc ? 'active' : ''} onClick={() => setAcc(!acc)}>
            {acc ? '✓ ' : ''}Версия для слабовидящих
          </button>
        </div>
      </div>
    </div>
  );
}

function CrestBar({ setSection }) {
  const [q, setQ] = React.useState('');
  const [open, setOpen] = React.useState(false);
  const boxRef = React.useRef(null);

  const index = React.useMemo(() => [
    { section: 'about',       title: 'О компании · Общие сведения',           kw: 'компания организация общество резерв ооо реквизиты огрн инн кпп октмо адрес ифнс налоговый орган регистрация устав ' },
    { section: 'about',       title: 'Реквизиты · ОГРН, ИНН, КПП, адрес',     kw: 'огрн инн кпп октмо реквизиты адрес 1267700083023 9717190305 771701001 45360000 ростокино сельскохозяйственная ' },
    { section: 'activities',  title: 'Направления деятельности',              kw: 'направления деятельность транспорт перевозки автопарк техническое обслуживание то-1 то-2 гсм ремонт хозяйственное обеспечение поставки канцелярия закупки делопроизводство архив ' },
    { section: 'procurement', title: 'Закупки · 223-ФЗ · ЕИС',                kw: 'закупки тендеры процедуры 223-фз 223 фз еис zakupki.gov.ru единая информационная система ' },
    { section: 'documents',   title: 'Документы и реквизиты',                 kw: 'документы устав положение выписка егрюл свидетельство постановка учёт регистрация ' },
    { section: 'documents',   title: 'Раскрытие информации',                  kw: 'раскрытие информация сведения публикация ', anchor: 'disclosure' },
    { section: 'documents',   title: 'Противодействие коррупции',             kw: 'коррупция антикоррупционная политика 273-фз 13.3 ', anchor: 'corruption' },
    { section: 'documents',   title: 'Обработка персональных данных',         kw: 'персональные данные 152-фз пдн обработка ', anchor: 'pdn' },
    { section: 'contacts',    title: 'Контакты · адрес и e-mail',             kw: 'контакты адрес почта email info@reservgk.ru обращение канцелярия часы приёма ' },
  ], []);

  const results = React.useMemo(() => {
    const v = q.trim().toLowerCase();
    if (!v || v.length < 2) return [];
    return index.filter(it =>
      it.title.toLowerCase().includes(v) || it.kw.toLowerCase().includes(v)
    ).slice(0, 8);
  }, [q, index]);

  const goTo = (item) => {
    setSection(item.section);
    setQ('');
    setOpen(false);
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        if (item.anchor) {
          const el = document.getElementById(item.anchor);
          if (el) {
            const top = el.getBoundingClientRect().top + window.scrollY - 80;
            window.scrollTo({ top, behavior: 'smooth' });
            return;
          }
        }
        window.scrollTo({ top: 0, behavior: 'smooth' });
      });
    });
  };

  React.useEffect(() => {
    const onDocClick = (e) => { if (boxRef.current && !boxRef.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDocClick);
    return () => document.removeEventListener('mousedown', onDocClick);
  }, []);

  return (
    <div className="crest-bar">
      <div className="inner">
        <Emblem size={64} />
        <div className="crest-title">
          <div className="crest-pre">Общество с ограниченной ответственностью</div>
          <div className="full">РЕЗЕРВ</div>
          <div className="sub">Информационно-правовой портал юридического лица</div>
        </div>
        <div className="crest-spacer"></div>
        <div className="crest-search-wrap" ref={boxRef}>
          <form className="crest-search" onSubmit={e => { e.preventDefault(); if (results[0]) goTo(results[0]); }}>
            <input
              type="text"
              placeholder="Поиск по сайту"
              value={q}
              onChange={e => { setQ(e.target.value); setOpen(true); }}
              onFocus={() => setOpen(true)}
            />
            <button type="submit" aria-label="Найти">⌕</button>
          </form>
          {open && q.trim().length >= 2 && (
            <div className="search-results">
              {results.length === 0 ? (
                <div className="search-empty">Ничего не найдено. Попробуйте: «устав», «закупки», «реквизиты», «персональные данные».</div>
              ) : (
                results.map((it, i) => (
                  <button key={i} className="search-row" type="button" onClick={() => goTo(it)}>
                    <span className="search-row-section">{sectionLabel(it.section)}</span>
                    <span className="search-row-title">{it.title}</span>
                  </button>
                ))
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function sectionLabel(s) {
  return ({
    about: 'О компании',
    activities: 'Направления',
    procurement: 'Закупки',
    documents: 'Документы',
    contacts: 'Контакты',
  }[s]) || s;
}

function NavBar({ section, setSection, acc, setAcc }) {
  const [open, setOpen] = React.useState(false);
  const items = [
    ['home', 'Главная'],
    ['about', 'О компании'],
    ['activities', 'Направления'],
    ['procurement', 'Закупки'],
    ['documents', 'Документы'],
    ['contacts', 'Контакты'],
  ];
  const current = items.find(([k]) => k === section);
  const handleClick = (key) => {
    setSection(key);
    setOpen(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  const goAnchor = (key, hash) => () => {
    setSection(key);
    setOpen(false);
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        const el = document.getElementById(hash);
        if (el) {
          const top = el.getBoundingClientRect().top + window.scrollY - 80;
          window.scrollTo({ top, behavior: 'smooth' });
        } else {
          window.scrollTo({ top: 0, behavior: 'smooth' });
        }
      });
    });
  };
  return (
    <nav className={`nav-bar ${open ? 'nav-open' : ''}`}>
      <button
        className="nav-toggle"
        type="button"
        aria-label="Меню разделов"
        aria-expanded={open}
        onClick={() => setOpen(o => !o)}
      >
        <span className="nav-toggle-label">
          <span className="nav-toggle-pre">{open ? 'Меню' : 'Раздел'}</span>
          <span className="nav-toggle-cur">{open ? 'Выберите раздел' : (current ? current[1] : 'Меню')}</span>
        </span>
        <span className={`nav-toggle-icon ${open ? 'is-open' : ''}`} aria-hidden="true">
          <span></span><span></span><span></span>
        </span>
      </button>
      <div className="inner">
        {items.map(([key, label]) => (
          <button
            key={key}
            className={section === key ? 'active' : ''}
            onClick={() => handleClick(key)}
          >
            {label}
          </button>
        ))}
        <div className="nav-extras">
          <div className="nav-extras-label">Служебные разделы</div>
          <button type="button" className="nav-extra" onClick={goAnchor('documents', 'disclosure')}>Раскрытие информации</button>
          <button type="button" className="nav-extra" onClick={goAnchor('documents', 'corruption')}>Противодействие коррупции</button>
          <button type="button" className="nav-extra" onClick={goAnchor('documents', 'pdn')}>Персональные данные</button>
          <a className="nav-extra" href="https://egrul.nalog.ru/index.html?inn=9717190305" target="_blank" rel="noopener noreferrer">Сведения в ЕГРЮЛ ↗</a>
          <button
            type="button"
            className={`nav-extra nav-extra-a11y ${acc ? 'is-on' : ''}`}
            onClick={() => { setAcc(!acc); setOpen(false); }}
          >
            {acc ? '✓ ' : ''}Версия для слабовидящих
          </button>
        </div>
      </div>
    </nav>
  );
}

function Breadcrumb({ section }) {
  if (section === 'home') return null;
  const labels = {
    home: 'Главная', about: 'О компании', activities: 'Направления деятельности',
    procurement: 'Закупки', documents: 'Документы', contacts: 'Контакты',
  };
  return (
    <div className="breadcrumb">
      <div className="inner">
        <a href="#">Главная</a>
        <span className="sep">›</span><span>{labels[section]}</span>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <div className="page-banner">
      <div className="inner">
        <h1>Информационно-правовой портал</h1>
        <p>На страницах портала размещаются официальные сведения об организации, учредительные документы, сообщения о деятельности и сведения о закупках. Информация публикуется в соответствии с требованиями законодательства Российской Федерации.</p>
      </div>
    </div>
  );
}

function WelcomeBlock() {
  return (
    <div className="section section-welcome">
      <div className="page">
        <div className="welcome-grid">
          <div className="welcome-kicker">
            <div className="kicker-pre">Обращение</div>
            <div className="kicker-title">К&nbsp;посетителям портала</div>
          </div>
          <div className="welcome-text">
            <p className="welcome-lead">Уважаемые посетители!</p>
            <p>Настоящий портал является официальным информационным ресурсом организации, на котором размещаются сведения, подлежащие раскрытию в соответствии с законодательством Российской Федерации, а также иные материалы, имеющие отношение к деятельности.</p>
            <p>Юридически значимые документы предоставляются по письменному запросу в порядке, установленном внутренними нормативными актами организации. Подлинность сведений может быть подтверждена в Едином государственном реестре юридических лиц.</p>
            <a className="verify-link" href="https://egrul.nalog.ru/index.html?inn=9717190305" target="_blank" rel="noopener noreferrer">
              Проверить сведения в ЕГРЮЛ →
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

function AboutPillars() {
  return (
    <div className="section">
      <div className="section-head">
        <div className="kicker">Сведения об организации</div>
        <h2>Общие сведения</h2>
      </div>
      <div className="page">
        <div className="about-cols">
          <div className="about-text">
            <p>Общество с ограниченной ответственностью «РЕЗЕРВ» является юридическим лицом, действующим на основании устава и в соответствии с законодательством Российской Федерации. Сведения об организации внесены в Единый государственный реестр юридических лиц.</p>
            <p>Основные виды деятельности организации связаны с транспортным и административно-хозяйственным обеспечением. Перечень фактически выполняемых работ и оказываемых услуг определяется заключаемыми договорами и положениями локальных нормативных актов.</p>
            <p>Деятельность по закупкам товаров, работ и услуг для нужд организации осуществляется в порядке, установленном Федеральным законом от 18 июля 2011 года № 223-ФЗ «О закупках товаров, работ, услуг отдельными видами юридических лиц», и регламентируется внутренним положением о закупочной деятельности.</p>
            <p>Сведения о государственной регистрации, постановке на налоговый учёт и иных юридически значимых фактах подтверждаются документами, выдаваемыми уполномоченными органами и доступными в разделе «Документы». Достоверность сведений может быть подтверждена в Едином государственном реестре юридических лиц.</p>
          </div>
          <div className="about-aside">
            <div className="aside-block">
              <div className="aside-label">Основные сведения</div>
              <dl>
                <dt>ОГРН</dt><dd>1267700083023</dd>
                <dt>ИНН</dt><dd>9717190305</dd>
                <dt>КПП</dt><dd>771701001</dd>
                <dt>ОКТМО</dt><dd>45360000</dd>
              </dl>
            </div>
            <div className="aside-block">
              <div className="aside-label">Налоговый орган</div>
              <p style={{margin: 0, fontSize: 13, fontFamily: "'PT Sans', sans-serif", lineHeight: 1.6}}>
                ИФНС России № 17 по г. Москве<br/>
                <span style={{fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, color: 'var(--navy-deep)'}}>код 7717</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Activities() {
  const [tab, setTab] = React.useState(0);
  const tabs = [
    {
      title: 'Транспортное обеспечение',
      desc: 'Организация перевозок служебным автомобильным транспортом на основании заключённых договоров. Учёт пробега, ведение путевой документации, контроль технического состояния транспортных средств.',
      items: ['Перевозки служебным автотранспортом', 'Транспортное сопровождение мероприятий', 'Подача транспорта по заявкам', 'Ведение путевой документации'],
      label: 'ФОТО · колонна служебных автомобилей',
    },
    {
      title: 'Содержание и эксплуатация автопарка',
      desc: 'Поддержание транспортных средств в технически исправном состоянии: плановое и неплановое техническое обслуживание, ремонтные работы, обеспечение горюче-смазочными материалами, контроль соблюдения требований безопасности дорожного движения.',
      items: ['Техническое обслуживание (ТО-1, ТО-2)', 'Ремонтные работы', 'Обеспечение ГСМ', 'Предрейсовые и послерейсовые осмотры'],
      label: 'ФОТО · ремонтная зона',
    },
    {
      title: 'Хозяйственное обеспечение',
      desc: 'Поставка хозяйственных материалов, расходных средств и оборудования для нужд организации. Складское хранение, учёт материальных ценностей, выдача по нормативам.',
      items: ['Поставка хозяйственных материалов', 'Складское хранение', 'Учёт материальных ценностей', 'Обеспечение спецодеждой и СИЗ'],
      label: 'ФОТО · складское помещение',
    },
    {
      title: 'Закупочная деятельность',
      desc: 'Организация закупок в соответствии с Федеральным законом № 223-ФЗ и внутренним положением о закупочной деятельности. Размещение сведений в Единой информационной системе.',
      items: ['Конкурентные процедуры', 'Закупки у единственного поставщика', 'Сопровождение договоров', 'Отчётность по контрактам'],
      label: 'ФОТО · документооборот',
    },
    {
      title: 'Делопроизводство и архив',
      desc: 'Ведение организационно-распорядительной документации, регистрация входящей и исходящей корреспонденции, формирование дел, передача на архивное хранение в установленном порядке.',
      items: ['Регистрация документов', 'Формирование номенклатуры дел', 'Архивное хранение', 'Подготовка справочной информации'],
      label: 'ФОТО · канцелярия',
    },
  ];
  const cur = tabs[tab];
  const docs = [
    'Устав ООО «РЕЗЕРВ»',
    'Положение о закупочной деятельности',
    'Гражданский кодекс Российской Федерации (часть первая)',
    'Федеральный закон от 08.02.1998 № 14-ФЗ',
    'Федеральный закон от 18.07.2011 № 223-ФЗ',
  ];
  return (
    <div className="section alt">
      <div className="section-head">
        <div className="kicker">Направления деятельности</div>
        <h2>Перечень видов деятельности</h2>
        <p className="lede">Перечень носит общий характер. Фактически выполняемые работы и услуги определяются заключёнными договорами и положениями локальных нормативных актов организации.</p>
      </div>
      <div className="page">
        <div className="tabs">
          {tabs.map((t, i) => (
            <button key={i} className={`tab ${tab === i ? 'active' : ''}`} onClick={() => setTab(i)}>
              {t.title}
            </button>
          ))}
        </div>
        <div className="activity-panel">
          <div>
            <h3>{cur.title}</h3>
            <p>{cur.desc}</p>
            <ul className="activity-list">
              {cur.items.map(x => <li key={x}>{x}</li>)}
            </ul>
          </div>
          <aside className="activity-aside">
            <div className="aside-label">Нормативное регулирование</div>
            <ul className="ref-list">
              {docs.map((d, i) => <li key={i}>{d}</li>)}
            </ul>
            <div className="aside-label" style={{marginTop: 24}}>Ответственное подразделение</div>
            <p className="aside-text">Отдел транспортного и хозяйственного обеспечения</p>
          </aside>
        </div>
      </div>
    </div>
  );
}

function News() {
  const items = [
    {
      date: '11.03.2026',
      tag: 'Информация',
      title: 'О государственной регистрации организации',
      desc: 'В соответствии с записью в Едином государственном реестре юридических лиц от 11 марта 2026 года организация поставлена на учёт в ИФНС России № 17 по г. Москве. Сведения подтверждаются выпиской из ЕГРЮЛ, размещённой в разделе «Документы».',
    },
    {
      date: '25.03.2026',
      tag: 'Имущество',
      title: 'О постановке транспортных средств на регистрационный учёт',
      desc: 'В установленном порядке завершена постановка на регистрационный учёт транспортных средств, находящихся в собственности организации. Сведения о составе имущества содержатся в Едином государственном реестре налогоплательщиков.',
    },
    {
      date: '01.04.2026',
      tag: 'Регламент',
      title: 'О порядке приёма и регистрации обращений',
      desc: 'Установлен порядок приёма письменных обращений граждан и юридических лиц, направляемых в адрес организации. Обращения рассматриваются в порядке, предусмотренном Федеральным законом № 59-ФЗ.',
    },
  ];
  return (
    <div className="section">
      <div className="section-head">
        <div className="kicker">Официальные сообщения</div>
        <h2>Сведения о деятельности</h2>
      </div>
      <div className="page">
        <ul className="news-list news-list-prim">
          {items.map((n, i) => (
            <li key={i} className="news-row-wide">
              <div className="news-date-col">
                <span className="news-date">{n.date}</span>
                <span className="news-tag">{n.tag}</span>
              </div>
              <div className="news-title-col">
                <a href="#" className="news-link-title">{n.title}</a>
                <p className="news-desc">{n.desc}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function Management() {
  const people = [
    { role: 'Генеральный директор', name: '—', note: 'Общее руководство деятельностью организации, представление интересов во взаимоотношениях с третьими лицами.' },
    { role: 'Главный бухгалтер', name: '—', note: 'Организация бухгалтерского и налогового учёта, формирование отчётности.' },
    { role: 'Руководитель отдела транспортного обеспечения', name: '—', note: 'Организация работы служебного автотранспорта, ведение путевой документации.' },
  ];
  return (
    <div className="section">
      <div className="section-head">
        <div className="kicker">Руководство</div>
        <h2>Сведения о руководящем составе</h2>
        <p className="lede">Сведения о замещаемых должностях и фамилиях, именах, отчествах руководителей подлежат размещению в соответствии с внутренними решениями организации. Информация будет опубликована после утверждения штатного расписания.</p>
      </div>
      <div className="page">
        <ul className="mgmt-list">
          {people.map((p, i) => (
            <li key={i} className="mgmt-row">
              <div className="mgmt-role">{p.role}</div>
              <div className="mgmt-name">{p.name}</div>
              <div className="mgmt-note">{p.note}</div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function Procurement() {
  return (
    <div className="section alt">
      <div className="section-head">
        <div className="kicker">Закупочная деятельность</div>
        <h2>Сведения о закупках</h2>
      </div>
      <div className="page">
        <div className="notice-card">
          <div className="notice-pre">К сведению посетителей</div>
          <h3>Закупочная деятельность организации</h3>
          <p>
            Закупки товаров, работ и услуг для нужд организации осуществляются в соответствии с Федеральным законом от 18 июля 2011 года № 223-ФЗ «О закупках товаров, работ, услуг отдельными видами юридических лиц», положением о закупочной деятельности и иными локальными нормативными актами.
          </p>
          <p>
            Сведения о проводимых закупочных процедурах, заключённых договорах и иные обязательные к публикации данные размещаются в Единой информационной системе в сфере закупок (ЕИС). Идентификация организации в ЕИС осуществляется по идентификационному номеру налогоплательщика.
          </p>
          <div className="notice-actions">
            <a
              className="btn"
              href="https://zakupki.gov.ru/epz/main/public/home.html"
              target="_blank" rel="noopener noreferrer"
            >Перейти в ЕИС</a>
            <a
              className="btn btn-secondary"
              href="https://egrul.nalog.ru/index.html?inn=9717190305"
              target="_blank" rel="noopener noreferrer"
            >Проверить сведения в ЕГРЮЛ</a>
          </div>
          <div className="notice-meta">
            <div><span className="k">ИНН организации</span><span className="v" style={{fontFamily: "'IBM Plex Mono', monospace"}}>9717190305</span></div>
            <div><span className="k">ОГРН</span><span className="v" style={{fontFamily: "'IBM Plex Mono', monospace"}}>1267700083023</span></div>
            <div><span className="k">КПП</span><span className="v" style={{fontFamily: "'IBM Plex Mono', monospace"}}>771701001</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Autopark() {
  const vehicles = [
    {
      brand: 'HONGQI E-HS9',
      plate: 'С 806 ОО · 777',
      specs: [
        ['Год выпуска', '2021'],
        ['VIN', 'LFB1FV694M2L44209'],
        ['Номер кузова', 'LFB1FV694M2L44209'],
        ['Мощность двигателя', '160 кВт · 217,5 л/с'],
        ['Постановка на учёт', '25.03.2026'],
        ['Регистрирующий орган', 'МВД России'],
      ],
    },
    {
      brand: 'ФОРД ФОКУС',
      plate: 'М 308 СО · 797',
      specs: [
        ['Год выпуска', '2008'],
        ['VIN', 'X9FSXXEEDS8Y86356'],
        ['Номер двигателя', '8Y86356'],
        ['Рабочий объём', '1596 см³'],
        ['Мощность двигателя', '73,5 кВт · 99,9 л/с'],
        ['Постановка на учёт', '25.03.2026'],
      ],
    },
  ];
  return (
    <div className="section">
      <div className="section-head">
        <div className="kicker">Сведения о транспортных средствах</div>
        <h2>Транспортные средства, принадлежащие организации</h2>
        <p className="lede">В соответствии со сведениями, содержащимися в Едином государственном реестре налогоплательщиков, организации принадлежат транспортные средства, поставленные на учёт в установленном порядке.</p>
      </div>
      <div className="page">
        <div className="vehicle-list">
          {vehicles.map(v => (
            <div key={v.brand} className="vehicle-row">
              <div className="vehicle-head">
                <h3>{v.brand}</h3>
                <div className="plate">{v.plate}</div>
              </div>
              <dl className="vehicle-dl">
                {v.specs.map(([k, val]) => (
                  <React.Fragment key={k}>
                    <dt>{k}</dt><dd>{val}</dd>
                  </React.Fragment>
                ))}
              </dl>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Documents() {
  const docs = [
    { title: 'Выписка из Единого государственного реестра юридических лиц', meta: 'Подписана усиленной квалифицированной электронной подписью', size: 'PDF · 184 КБ', href: (typeof window !== 'undefined' && window.__resources && window.__resources.egrulPdf) || 'uploads/MI_EGRNUL_9717190305771701001_9965_20260527_23E00AE6-9193-423D-A490-CE6625744246.PDF', external: false },
    { title: 'Устав ООО «РЕЗЕРВ»', meta: 'Утверждён решением единственного учредителя', request: 'Устав ООО «РЕЗЕРВ»' },
    { title: 'Положение об обработке персональных данных', meta: 'Утверждено приказом по организации', request: 'Положение об обработке персональных данных' },
    { title: 'Положение о закупочной деятельности', meta: 'В соответствии с № 223-ФЗ', request: 'Положение о закупочной деятельности' },
    { title: 'Антикоррупционная политика', meta: 'В соответствии со ст. 13.3 № 273-ФЗ', request: 'Антикоррупционная политика' },
  ];
  const requestMail = title => `mailto:info@reservgk.ru?subject=${encodeURIComponent('Запрос документа: ' + title)}&body=${encodeURIComponent('В ООО «РЕЗЕРВ»\n\nПрошу предоставить копию документа: «' + title + '».\n\nС уважением,\n')}`;

  return (
    <div className="section alt">
      <div className="section-head">
        <div className="kicker">Документы и реквизиты</div>
        <h2>Учредительные и иные документы</h2>
      </div>
      <div className="page">
        <div className="docs-grid">
          <div className="req-card">
            <h3>Реквизиты организации</h3>
            <dl>
              <dt>Полное наименование</dt>
              <dd className="addr">Общество с ограниченной ответственностью «РЕЗЕРВ»</dd>
              <dt>Сокращённое</dt>
              <dd>ООО «РЕЗЕРВ»</dd>
              <dt>ОГРН</dt>
              <dd>1267700083023</dd>
              <dt>ИНН</dt>
              <dd>9717190305</dd>
              <dt>КПП</dt>
              <dd>771701001</dd>
              <dt>ОКТМО</dt>
              <dd>45360000</dd>
              <dt>Налоговый орган</dt>
              <dd className="addr">ИФНС России № 17 по г. Москве (код 7717)</dd>
              <dt>Юридический адрес</dt>
              <dd className="addr">129226, г. Москва, муниципальный округ Ростокино, ул. Сельскохозяйственная, д. 11, к. 3, помещ. 2/1</dd>
            </dl>
            <a className="verify-link" href="https://egrul.nalog.ru/index.html?inn=9717190305" target="_blank" rel="noopener noreferrer">
              Проверить сведения в ЕГРЮЛ →
            </a>
          </div>
          <div className="docs-list">
            {docs.map((d, i) => {
              const isPdf = !!d.href;
              const href = isPdf ? d.href : requestMail(d.request);
              return (
                <a
                  key={i}
                  className="doc-row"
                  href={href}
                  target={isPdf ? '_blank' : undefined}
                  rel={isPdf ? 'noopener noreferrer' : undefined}
                >
                  <div className="doc-icon">PDF</div>
                  <div>
                    <div className="title">{d.title}</div>
                    <div className="meta">{d.meta}</div>
                  </div>
                  <div className="size">{d.size || 'по запросу'}</div>
                  <div className="doc-action">{isPdf ? 'Открыть' : 'Запросить'}</div>
                </a>
              );
            })}
          </div>
        </div>

        <div className="compliance-grid">
          <article id="disclosure" className="compliance-card">
            <div className="compliance-kicker">Раскрытие информации</div>
            <h3>Порядок раскрытия сведений</h3>
            <p>Сведения о юридическом лице, подлежащие обязательному раскрытию, размещаются в государственных информационных ресурсах и подтверждаются документами, выдаваемыми уполномоченными органами. Подтверждение сведений о государственной регистрации, постановке на налоговый учёт и составе исполнительных органов доступно в Едином государственном реестре юридических лиц по идентификационному номеру налогоплательщика.</p>
            <a className="verify-link" href="https://egrul.nalog.ru/index.html?inn=9717190305" target="_blank" rel="noopener noreferrer">Проверить в ЕГРЮЛ →</a>
          </article>
          <article id="corruption" className="compliance-card">
            <div className="compliance-kicker">Противодействие коррупции</div>
            <h3>Меры по предупреждению коррупции</h3>
            <p>В соответствии со статьёй 13.3 Федерального закона от 25 декабря 2008 года № 273-ФЗ «О противодействии коррупции» организация принимает меры по предупреждению коррупции, включая определение должностных лиц, ответственных за профилактику коррупционных правонарушений, разработку и принятие антикоррупционной политики, а также установление порядка предотвращения и урегулирования конфликта интересов.</p>
            <a className="verify-link" href={requestMail('Антикоррупционная политика')}>Запросить политику →</a>
          </article>
          <article id="pdn" className="compliance-card">
            <div className="compliance-kicker">Персональные данные</div>
            <h3>Обработка персональных данных</h3>
            <p>Обработка персональных данных осуществляется в соответствии с Федеральным законом от 27 июля 2006 года № 152-ФЗ «О персональных данных». Сведения о цели, правовых основаниях, объёме и категориях обрабатываемых персональных данных определяются положением об обработке персональных данных, утверждённым в организации. Запросы субъектов персональных данных принимаются по адресу электронной почты организации.</p>
            <a className="verify-link" href="mailto:info@reservgk.ru?subject=Запрос%20субъекта%20персональных%20данных">Направить запрос →</a>
          </article>
        </div>
      </div>
    </div>
  );
}

function Contacts({ onContactClick }) {
  return (
    <div className="section">
      <div className="section-head">
        <div className="kicker">Контактная информация</div>
        <h2>Реквизиты для обращений</h2>
      </div>
      <div className="page">
        <div className="contacts-cols">
          <div className="contact-block">
            <h3>Канцелярия</h3>
            <div className="row"><div className="k">Почтовый адрес</div><div className="v">129226, г. Москва,<br/>ул. Сельскохозяйственная, д. 11,<br/>корп. 3, помещ. 2/1</div></div>
            <div className="row"><div className="k">Электронная почта</div><div className="v"><a href="mailto:info@reservgk.ru">info@reservgk.ru</a></div></div>
            <div className="row"><div className="k">Часы приёма</div><div className="v">Пн–Чт · 09:00 – 18:00<br/>Пт · 09:00 – 16:45<br/>Сб–Вс · нерабочие дни</div></div>
          </div>
          <div className="contact-block">
            <h3>Письменные обращения</h3>
            <p className="contact-text">
              Письменные обращения граждан и юридических лиц рассматриваются в порядке, установленном Федеральным законом от 2 мая 2006 года № 59-ФЗ «О порядке рассмотрения обращений граждан Российской Федерации».
            </p>
            <p className="contact-text">
              Срок рассмотрения обращения — 30 дней со дня его регистрации. В исключительных случаях срок может быть продлён с уведомлением заявителя.
            </p>
            <div style={{marginTop: 18}}>
              <button className="btn" onClick={onContactClick}>Направить обращение</button>
            </div>
          </div>
          <div className="contact-block">
            <h3>Идентификация организации</h3>
            <div className="row"><div className="k">Полное наименование</div><div className="v" style={{fontSize: 13}}>Общество с ограниченной ответственностью «РЕЗЕРВ»</div></div>
            <div className="row"><div className="k">ОГРН</div><div className="v"><span style={{fontFamily: "'IBM Plex Mono', monospace"}}>1267700083023</span></div></div>
            <div className="row"><div className="k">ИНН / КПП</div><div className="v"><span style={{fontFamily: "'IBM Plex Mono', monospace"}}>9717190305 / 771701001</span></div></div>
            <div className="row"><div className="k">ОКТМО</div><div className="v"><span style={{fontFamily: "'IBM Plex Mono', monospace"}}>45360000</span></div></div>
            <a className="verify-link" href="https://egrul.nalog.ru/index.html?inn=9717190305" target="_blank" rel="noopener noreferrer">
              Проверить сведения в ЕГРЮЛ →
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

function Footer({ setSection }) {
  const go = key => e => { e.preventDefault(); setSection(key); window.scrollTo({ top: 0, behavior: 'smooth' }); };
  const goAnchor = (key, hash) => e => {
    e.preventDefault();
    setSection(key);
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        const el = document.getElementById(hash);
        if (el) {
          const top = el.getBoundingClientRect().top + window.scrollY - 80;
          window.scrollTo({ top, behavior: 'smooth' });
        } else {
          window.scrollTo({ top: 0, behavior: 'smooth' });
        }
      });
    });
  };
  return (
    <footer className="footer">
      <div className="inner">
        <div className="footer-grid">
          <div>
            <div className="footer-emblem">
              <Emblem size={44} />
              <div className="text-block">
                <div className="name">ООО «РЕЗЕРВ»</div>
                <div className="sub">Информационно-правовой портал юридического лица</div>
              </div>
            </div>
            <p style={{color: '#8290b3', fontSize: 13, lineHeight: 1.6, maxWidth: '38ch'}}>
              Сведения, размещённые на портале, носят информационный характер. Юридически значимые документы предоставляются в порядке, установленном законодательством Российской Федерации.
            </p>
          </div>
          <div>
            <h4>Разделы</h4>
            <ul>
              <li><a href="#about" onClick={go('about')}>О компании</a></li>
              <li><a href="#activities" onClick={go('activities')}>Направления</a></li>
              <li><a href="#procurement" onClick={go('procurement')}>Закупки</a></li>
              <li><a href="#contacts" onClick={go('contacts')}>Контакты</a></li>
            </ul>
          </div>
          <div>
            <h4>Деятельность</h4>
            <ul>
              <li><a href="#procurement" onClick={go('procurement')}>Закупки</a></li>
              <li><a href="#documents" onClick={go('documents')}>Документы</a></li>
              <li><a href="#corruption" onClick={goAnchor('documents', 'corruption')}>Противодействие коррупции</a></li>
              <li><a href="#pdn" onClick={goAnchor('documents', 'pdn')}>Персональные данные</a></li>
            </ul>
          </div>
          <div>
            <h4>Контакты</h4>
            <ul>
              <li><a href="mailto:info@reservgk.ru">info@reservgk.ru</a></li>
              <li style={{marginTop: 8}}>129226, г. Москва,<br/>ул. Сельскохозяйственная, 11</li>
              <li style={{marginTop: 12}}><a href="https://egrul.nalog.ru/index.html?inn=9717190305" target="_blank" rel="noopener noreferrer" style={{color: 'var(--gold-soft)'}}>Проверить в ЕГРЮЛ →</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© ООО «РЕЗЕРВ» · ОГРН 1267700083023 · ИНН 9717190305</div>
          <div>Сведения подтверждаются документами, размещёнными в разделе «Документы»</div>
        </div>
      </div>
    </footer>
  );
}

function ContactModal({ open, onClose }) {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', topic: '', text: '' });
  const upd = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  React.useEffect(() => {
    if (!open) { setSent(false); setForm({ name: '', email: '', topic: '', text: '' }); }
  }, [open]);
  if (!open) return null;

  const handleSubmit = e => {
    e.preventDefault();
    const subject = `Обращение${form.topic ? ' · ' + form.topic : ''}`;
    const bodyLines = [
      'В ООО «РЕЗЕРВ»',
      '',
      `От: ${form.name}`,
      `Email для ответа: ${form.email}`,
      form.topic ? `Тема: ${form.topic}` : null,
      '',
      'Содержание обращения:',
      form.text,
      '',
      'С уважением,',
      form.name,
    ].filter(Boolean);
    const mailto = `mailto:info@reservgk.ru?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(bodyLines.join('\n'))}`;
    window.location.href = mailto;
    setSent(true);
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="close" onClick={onClose}>×</button>
        {!sent ? (
          <>
            <h2>Направить обращение</h2>
            <div className="sub">При нажатии кнопки откроется ваш почтовый клиент с заполненным письмом на адрес info@reservgk.ru. Отправьте письмо из почтового клиента.</div>
            <form onSubmit={handleSubmit}>
              <div className="field">
                <label>ФИО или наименование организации</label>
                <input type="text" required value={form.name} onChange={upd('name')} placeholder="Иванов Иван Иванович" />
              </div>
              <div className="field">
                <label>Электронная почта для ответа</label>
                <input type="email" required value={form.email} onChange={upd('email')} placeholder="name@example.ru" />
              </div>
              <div className="field">
                <label>Тема обращения</label>
                <select value={form.topic} onChange={upd('topic')}>
                  <option value="">— выберите тему —</option>
                  <option>Коммерческое предложение</option>
                  <option>Сотрудничество и партнёрство</option>
                  <option>Вопросы по закупкам</option>
                  <option>Запрос документов</option>
                  <option>Прочее</option>
                </select>
              </div>
              <div className="field">
                <label>Текст обращения</label>
                <textarea required value={form.text} onChange={upd('text')} placeholder="Изложите суть обращения..." />
              </div>
              <div className="actions">
                <button type="button" className="btn btn-secondary" onClick={onClose}>Отмена</button>
                <button type="submit" className="btn">Подготовить письмо</button>
              </div>
            </form>
          </>
        ) : (
          <div className="success-state">
            <div className="check">✉</div>
            <h2>Письмо подготовлено</h2>
            <div className="sub">
              Письмо открыто в вашем почтовом клиенте. Отправьте его — обращение поступит на адрес <strong>info@reservgk.ru</strong>.
              <br/><br/>
              Если почтовый клиент не открылся, направьте обращение вручную на адрес <a href="mailto:info@reservgk.ru" style={{color: 'var(--burgundy)'}}>info@reservgk.ru</a>.
            </div>
            <div className="actions" style={{justifyContent: 'center'}}>
              <button className="btn" onClick={onClose}>Закрыть</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, {
  Emblem, UtilityBar, CrestBar, NavBar, Breadcrumb,
  Hero, WelcomeBlock, AboutPillars, Activities, News, Management,
  Procurement, Autopark, Documents, Contacts, Footer, ContactModal,
});