/* global React, Ico, PageHead, SectionHead, BottomCTA */
// Catalog page — expandable rows
const { useState: useStateCat } = React;

const CAT_FULL = [
  {
    id: 'bolts', icon: 'Bolt', title: 'Болты и шпильки', sub: '11 подгрупп · ~420 SKU',
    items: [
      'Болты с шестигранной головкой (неполная резьба) ГОСТ 7798',
      'Болты с шестигранной головкой (полная резьба) ГОСТ 7805',
      'Болты с внутренним шестигранником DIN 912',
      'Болты откидные DIN 444',
      'Рым-болты DIN 580',
      'Болты мебельные DIN 603',
      'Шпильки резьбовые DIN 975 (1м, 2м)',
      'Шпильки сантехнические DIN 938',
    ],
    spec: {
      'Размеры': 'M6–M48 (длина 10–300 мм)',
      'Кл. прочности': '5.8 · 8.8 · 10.9 · 12.9',
      'Материал': 'ст.20, 35Х, нерж. A2 / A4',
      'Покрытие': 'без, цинк белый, цинк жёлтый, фосфат',
      'ГОСТ': '7798, 7805, 7811, 22032',
    },
  },
  {
    id: 'nuts', icon: 'Nut', title: 'Гайки', sub: '7 подгрупп · ~280 SKU',
    items: [
      'Гайки шестигранные стандартные ГОСТ 5915',
      'Гайки самоконтрящиеся с нейлоновым кольцом DIN 985',
      'Гайки корончатые ГОСТ 5918',
      'Гайки приварные DIN 929',
      'Гайки-барашки DIN 315',
      'Гайки колпачковые DIN 1587',
    ],
    spec: {
      'Размеры': 'M3–M48',
      'Кл. прочности': '5 · 6 · 8 · 10 · 12',
      'Материал': 'ст.20, 35Х, нерж. A2 / A4',
      'Покрытие': 'без, цинк, фосфат',
      'ГОСТ': '5915, 5916, 5918, 9064',
    },
  },
  {
    id: 'washers', icon: 'Washer', title: 'Шайбы', sub: '5 подгрупп · ~190 SKU',
    items: [
      'Шайбы плоские стандартные ГОСТ 11371 / DIN 125',
      'Шайбы гроверные (пружинные) ГОСТ 6402 / DIN 127',
      'Шайбы увеличенные DIN 9021',
      'Шайбы косые для двутавров и швеллеров',
      'Шайбы стопорные с лапками DIN 463',
    ],
    spec: {
      'Размеры': 'M3–M48',
      'Материал': 'ст.20, нерж. A2 / A4',
      'Покрытие': 'без, цинк, фосфат',
      'ГОСТ': '11371, 6402, 9649',
    },
  },
  {
    id: 'screws', icon: 'Screw', title: 'Саморезы и винты', sub: '9 подгрупп · ~520 SKU',
    items: [
      'Саморезы по дереву (жёлтый цинк, чёрный фосфат)',
      'Саморезы по металлу с буром и без',
      'Саморезы кровельные с ЭПДМ-шайбой (под заказ)',
      'Саморезы для гипсокартона (чёрные)',
      'Саморезы универсальные',
      'Винты с потайной головкой DIN 965',
      'Винты с полукруглой / цилиндрической головкой DIN 7985 / 84',
      'Глухари (шурупы с шестигранной головкой) DIN 571',
    ],
    spec: {
      'Размеры': '∅2.5–10 мм · L 12–250 мм',
      'Шлиц': 'PH, PZ, TX, Hex',
      'Покрытие': 'жёлт.цинк, чёрный фосфат, оксид',
      'ГОСТ / DIN': '11473, 571, 965, 7505',
    },
  },
  {
    id: 'anchors', icon: 'Anchor', title: 'Анкеры и дюбели', sub: '7 подгрупп · ~310 SKU',
    items: [
      'Анкеры клиновые M6–M24 (ударный монтаж в бетон)',
      'Анкеры химические — эпоксидные и полиэфирные составы',
      'Анкеры рамные (монтаж окон и дверей)',
      'Анкеры потолочные «бабочка»',
      'Дюбели нейлоновые универсальные',
      'Дюбели для газобетона и пустотелых материалов',
      'Дюбели металлические распорные',
    ],
    spec: {
      'Размеры': 'M6–M24 · L 50–250 мм',
      'Основание': 'бетон B25+, кирпич, газобетон',
      'Материал': 'оцинк. сталь, нерж. A4',
      'ETA': 'option 1 / 7 (по запросу)',
    },
  },
  {
    id: 'rivets', icon: 'Rivet', title: 'Заклёпки', sub: '5 подгрупп · ~140 SKU',
    items: [
      'Заклёпки вытяжные алюминиевые (стандартные и увеличенный бортик)',
      'Заклёпки вытяжные стальные и нержавеющие',
      'Заклёпки полнотелые DIN 660',
      'Гайки-заклёпки резьбовые',
      'Резьбовые вставки под вытяжку',
    ],
    spec: {
      'Диаметры': '∅3–6.4 мм',
      'Длины': '6–35 мм',
      'Материал': 'AL/AL, ST/ST, A2/A2',
      'ГОСТ / DIN': '10299, 7337',
    },
  },
  {
    id: 'strength', icon: 'Strength', title: 'Высокопрочный крепёж', sub: '5 подгрупп · ~95 SKU',
    items: [
      'Болты высокопрочные для металлоконструкций ГОСТ Р 52644',
      'Гайки высокопрочные ГОСТ Р 52645',
      'Шайбы высокопрочные ГОСТ Р 52646',
      'Фундаментные болты ГОСТ 24379 (типы 1.1 / 2.1)',
      'Анкерные болты для промышленного оборудования',
    ],
    spec: {
      'Кл. прочности': '8.8 · 10.9 · 12.9',
      'Материал': '40Х · 30ХГСА',
      'Покрытие': 'оцинк. термодиффузионное',
      'ГОСТ': 'Р 52644, 24379',
    },
  },
  {
    id: 'studs', icon: 'Stud', title: 'Шпильки фланцевые', sub: '4 подгруппы · ~70 SKU',
    items: [
      'Шпильки для фланцевых соединений ГОСТ 9066',
      'Шпильки исп. 1 (с гайками)',
      'Шпильки под заказ — длина по чертежу заказчика',
      'Гайки и шайбы фланцевые (в комплекте)',
    ],
    spec: {
      'Материал': 'сталь 35Х',
      'Кл. прочности': '5.6 · 6.8',
      'Диаметры': 'M10–M52',
      'Длина': 'по чертежу заказчика',
    },
  },
  {
    id: 'mesh', icon: 'Mesh', title: 'Сетка и проволока', sub: '5 подгрупп · ~85 SKU',
    items: [
      'Сетка сварная: строительная, дорожная, кладочная',
      'Сетка плетёная «рабица» (оцинкованная, с ПВХ-покрытием)',
      'Сетка тканая (фильтровальная)',
      'Проволока вязальная: отожжённая чёрная, оцинкованная',
      'Проволока колючая двухниточная оцинкованная',
    ],
    spec: {
      'Ячейка сетки': '10×10 – 100×100 мм',
      'Диаметр прутка': '∅1.6–6 мм',
      'Покрытие': 'без, цинк, ПВХ',
      'Рулон / карта': 'по запросу',
    },
  },
  {
    id: 'chains', icon: 'Chain', title: 'Цепи', sub: '3 подгруппы · ~40 SKU',
    items: [
      'Цепи грузовые круглозвенные ГОСТ 2319 (калиброванные и некалиброванные)',
      'Цепи пластинчатые приводные (однорядные, многорядные)',
      'Цепи якорные',
    ],
    spec: {
      'Диаметр прутка': '∅3–32 мм',
      'Класс': '4, 5, 8, 10',
      'ГОСТ': '2319, 13568',
      'Поверхность': 'без покрытия, оцинк.',
    },
  },
  {
    id: 'nails', icon: 'Nail', title: 'Гвозди и скобы', sub: '4 подгруппы · ~60 SKU',
    items: [
      'Гвозди строительные ГОСТ 4028 (все типоразмеры)',
      'Гвозди ершёные и кольцевые (повышенное сопротивление выдёргиванию)',
      'Гвозди финишные (чистовая отделка)',
      'Скобы монтажные для трубопроводов и кабелей',
    ],
    spec: {
      'Длины': '20–250 мм',
      'Тип': 'строит. / ершён. / кольц. / финиш',
      'Покрытие': 'без, цинк, медь',
      'ГОСТ': '4028, 7811',
    },
  },
  {
    id: 'stainless', icon: 'Stainless', title: 'Нержавеющий крепёж', sub: '6 подгрупп · ~210 SKU',
    items: [
      'Болты A2 / A4 — общестроительное и агрессивные среды',
      'Гайки A2 / A4 (DIN 934, DIN 985)',
      'Шайбы A2 / A4 (DIN 125, DIN 127)',
      'Шпильки резьбовые A2 / A4',
      'Винты A2 / A4 (DIN 912, DIN 965)',
      'Саморезы нержавеющие',
    ],
    spec: {
      'Марка': 'A2-70 · A4-80',
      'Применение': 'пищ. пром., химия, морские',
      'Размеры': 'M3–M24',
      'DIN': '912, 933, 934, 965',
    },
  },
];

function CatRow({ data, open, onToggle, navigate }) {
  const Icon = Ico[data.icon];
  return (
    <div className={`cat-full__row ${open ? 'is-open' : ''}`}>
      <button className="cat-full__head" onClick={onToggle} aria-expanded={open}>
        <div className="cat-full__icon"><Icon /></div>
        <div>
          <div className="cat-full__name">{data.title}<small>{data.sub}</small></div>
        </div>
        <div className="cat-full__count">{data.items.length} типов</div>
        <div className="cat-full__chev"><Ico.Chevron /></div>
      </button>
      {open && (
        <div className="cat-full__body">
          <ul className="cat-full__list">
            {data.items.map((it, i) => <li key={i}>{it}</li>)}
          </ul>
          <div className="cat-full__spec">
            <h5>Спецификация</h5>
            <dl>
              {Object.entries(data.spec).map(([k, v]) => (
                <React.Fragment key={k}>
                  <dt>{k}</dt><dd>{v}</dd>
                </React.Fragment>
              ))}
            </dl>
            <div className="cat-full__cta">
              <a href="tel:+73912153002" className="btn btn--amber" style={{ flex: 1, justifyContent: 'center' }}>
                Запросить цену
              </a>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function CatalogPage({ navigate }) {
  const [openIds, setOpenIds] = useStateCat(new Set(['bolts']));
  const toggle = (id) => {
    setOpenIds(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };
  const expandAll = () => setOpenIds(new Set(CAT_FULL.map(c => c.id)));
  const collapseAll = () => setOpenIds(new Set());

  return (
    <main>
      <PageHead
        navigate={navigate}
        crumbs={[{ label: 'Главная', to: 'home' }, { label: 'Каталог' }]}
        title="Каталог метизной продукции"
        sub="Более 2 400 позиций на складе в Красноярске. Отгрузка в день заказа. Цены и наличие — по запросу."
      />

      <section className="section section--white">
        <div className="wrap">
          <SectionHead
            eyebrow="ВСЕ КАТЕГОРИИ · 12"
            title="Полный каталог метизов"
            sub={<>Раскройте категорию, чтобы увидеть весь перечень и спецификации.<br/>Подбор по чертежу и спецификации — у менеджера.</>}
          />

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20, flexWrap: 'wrap', gap: 12 }}>
            <div style={{ display: 'flex', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
              <span>Развёрнуто {openIds.size} / {CAT_FULL.length}</span>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button className="btn btn--outline" onClick={expandAll}>Развернуть всё</button>
              <button className="btn btn--outline" onClick={collapseAll}>Свернуть всё</button>
            </div>
          </div>

          <div className="cat-full">
            {CAT_FULL.map(c => (
              <CatRow key={c.id} data={c} open={openIds.has(c.id)} onToggle={() => toggle(c.id)} navigate={navigate} />
            ))}
          </div>

          <div style={{ marginTop: 32, padding: '24px 0', borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
            <p className="text-muted" style={{ margin: 0, fontSize: 14 }}>
              Не нашли нужную позицию? Привезём под заказ — отправьте ТЗ или чертёж на почту.
            </p>
            <a href="mailto:2153002@mail.ru" className="btn btn--blue">
              Отправить ТЗ на 2153002@mail.ru
            </a>
          </div>
        </div>
      </section>

      <BottomCTA
        title="Нужен прайс-лист или расчёт стоимости?"
        text="Позвоните или напишите на почту — пришлём актуальный прайс в Excel и ответим на вопросы."
      />
    </main>
  );
}

window.CatalogPage = CatalogPage;