/* global React, Ico, BigHex, HexField, SectionHead */
// Home page

const CAT_LIST = [
  { id: 'bolts', icon: 'Bolt', title: 'Болты и шпильки', desc: 'M6–M48 · Классы прочности 5.8 / 8.8 / 10.9 / 12.9', count: '~420' },
  { id: 'nuts', icon: 'Nut', title: 'Гайки', desc: 'Шестигранные, самоконтрящиеся, корончатые', count: '~280' },
  { id: 'washers', icon: 'Washer', title: 'Шайбы', desc: 'Плоские, гроверные, увеличенные', count: '~190' },
  { id: 'screws', icon: 'Screw', title: 'Саморезы и винты', desc: 'По дереву, металлу, гипсокартону, кровельные', count: '~520' },
  { id: 'anchors', icon: 'Anchor', title: 'Анкеры и дюбели', desc: 'Клиновые, химические, рамные · под бетон и кирпич', count: '~310' },
  { id: 'rivets', icon: 'Rivet', title: 'Заклёпки', desc: 'Вытяжные алюминиевые и стальные, резьбовые', count: '~140' },
  { id: 'strength', icon: 'Strength', title: 'Высокопрочный крепёж', desc: 'Болты ГОСТ Р 52644 · Фундаментные ГОСТ 24379', count: '~95' },
  { id: 'studs', icon: 'Stud', title: 'Шпильки фланцевые', desc: 'ГОСТ 9066 · Сталь 35Х · Классы 5.6 / 6.8', count: '~70' },
  { id: 'mesh', icon: 'Mesh', title: 'Сетка и проволока', desc: 'Сварная, рабица, кладочная · вязальная и колючая', count: '~85' },
  { id: 'chains', icon: 'Chain', title: 'Цепи', desc: 'Грузовые круглозвенные · пластинчатые приводные', count: '~40' },
  { id: 'nails', icon: 'Nail', title: 'Гвозди и скобы', desc: 'Строительные, ершёные, кольцевые · скобы монтажные', count: '~60' },
  { id: 'stainless', icon: 'Stainless', title: 'Нержавеющий крепёж', desc: 'Марки A2 / A4 · болты, гайки, шайбы, шпильки', count: '~210' },
];

function MobileCatGrid({ cats, navigate, gridCols }) {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);
  React.useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

  if (isMobile) {
    return (
      <div style={{ borderTop: '1px solid var(--line)' }}>
        {cats.map((c, idx) => {
          const Icon = Ico[c.icon];
          return (
            <button
              key={c.id}
              onClick={() => navigate('catalog')}
              style={{
                display: 'grid',
                gridTemplateColumns: '36px 1fr',
                gridTemplateRows: 'auto auto',
                gap: '2px 14px',
                width: '100%',
                padding: '14px 16px',
                background: idx % 2 === 0 ? 'var(--paper)' : 'var(--neutral)',
                border: 'none',
                borderBottom: '1px solid var(--line)',
                textAlign: 'left',
                cursor: 'pointer',
                alignItems: 'start',
              }}
            >
              <div style={{
                gridColumn: 1,
                gridRow: '1 / 3',
                width: 32,
                height: 32,
                color: 'var(--mid)',
                marginTop: 2,
                flexShrink: 0,
              }}>
                <Icon />
              </div>
              <div style={{
                gridColumn: 2,
                gridRow: 1,
                fontSize: 15,
                fontWeight: 700,
                color: 'var(--mid-2)',
                lineHeight: 1.25,
              }}>
                {c.title}
              </div>
              <div style={{
                gridColumn: 2,
                gridRow: 2,
                fontSize: 12,
                color: 'var(--ink-2)',
                lineHeight: 1.4,
                marginTop: 2,
              }}>
                {c.desc}
              </div>
            </button>
          );
        })}
      </div>
    );
  }

  return (
    <div className="cat-grid" data-cols={gridCols}>
      {cats.map((c, idx) => {
        const Icon = Ico[c.icon];
        return (
          <button key={c.id} className="cat-card" onClick={() => navigate('catalog')}>
            <span className="cat-card__num">{String(idx + 1).padStart(2, '0')}</span>
            <span className="cat-card__arrow"><Ico.Arrow /></span>
            <div className="cat-card__icon"><Icon /></div>
            <h3 className="cat-card__title">{c.title}</h3>
            <p className="cat-card__desc">{c.desc}</p>
            <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 10, paddingTop: 8 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.05em' }}>SKU</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600 }}>{c.count}</span>
            </div>
          </button>
        );
      })}
    </div>
  );
}

function HomePage({ navigate, gridCols }) {
  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="hero__hex"><BigHex stroke="rgba(255,255,255,0.16)" /></div>
        <div className="wrap hero__inner">
          <div>
            <span className="badge">МЕТИЗЫ ОПТОМ · КРАСНОЯРСК</span>
            <h1 className="hero__title">
              Болты, гайки, крепёж <br />
              <span className="amber">— отгрузка в день заказа</span>
            </h1>
            <p className="hero__sub">
              Более 2 400 позиций на складе в Красноярске. Работаем с юрлицами и ИП — ОСН с НДС,
              сертификаты на все позиции, доставка по всему Красноярскому краю.
            </p>
            <div className="hero__cta">
              <a href="tel:+73912153002" className="btn btn--amber btn--lg">
                +7 (391) 215-30-02
              </a>
              <a href="mailto:2153002@mail.ru" className="btn btn--ghost btn--lg">
                2153002@mail.ru
              </a>
            </div>
          </div>

          <div className="hero__panel">
            <div className="h-eyebrow" style={{ color: 'rgba(255,255,255,0.55)', marginBottom: 12 }}>СПЕЦИФИКАЦИЯ ПОСТАВЩИКА</div>
            <div className="hero__panel-row"><span className="k">Компания</span><span className="v">ООО «ПСК СТУ»</span></div>
            <div className="hero__panel-row"><span className="k">Налогообложение</span><span className="v">ОСН · с НДС</span></div>
            <div className="hero__panel-row"><span className="k">Минимальный заказ</span><span className="v amber">от 5 000 ₽</span></div>
            <div className="hero__panel-row"><span className="k">Отсрочка платежа</span><span className="v">до 30 дней</span></div>
            <div className="hero__panel-row"><span className="k">Документы</span><span className="v">УПД · с/ф · договор</span></div>
            <div className="hero__panel-row"><span className="k">Склад</span><span className="v">ул. Сопочная, 25</span></div>
          </div>
        </div>

        <div className="wrap">
          <div className="hero-stats">
            <div className="hero-stat">
              <div className="hero-stat__num">2 400<small>+</small></div>
              <div className="hero-stat__label">Позиций на складе</div>
            </div>
            <div className="hero-stat">
              <div className="hero-stat__num">1<small>день</small></div>
              <div className="hero-stat__label">Срок отгрузки</div>
            </div>
            <div className="hero-stat">
              <div className="hero-stat__num">17<small>городов</small></div>
              <div className="hero-stat__label">Доставка по краю</div>
            </div>
            <div className="hero-stat">
              <div className="hero-stat__num">ОСН<small>НДС · с/ф</small></div>
              <div className="hero-stat__label">Документы для бухгалтерии</div>
            </div>
          </div>
        </div>
      </section>

      {/* CATEGORIES */}
      <section className="section section--white">
        <div className="wrap">
          <SectionHead
            eyebrow="01 — АССОРТИМЕНТ"
            title="Основные группы метизной продукции"
            sub="12 категорий, более 2 400 позиций на складе в Красноярске. Полный прайс-лист — по запросу."
          />
          <MobileCatGrid cats={CAT_LIST} navigate={navigate} gridCols={gridCols} />
          <div style={{ marginTop: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
            <p className="text-muted" style={{ margin: 0, fontSize: 14 }}>
              Полный прайс-лист — по запросу. Звоните или пишите на почту.
            </p>
            <a href="#catalog" onClick={(e) => { e.preventDefault(); navigate('catalog'); }} className="btn btn--outline">
              Открыть полный каталог <Ico.Arrow />
            </a>
          </div>
        </div>
      </section>

      {/* WHY US */}
      <section className="section section--neutral">
        <div className="wrap">
          <SectionHead
            eyebrow="02 — ПРЕИМУЩЕСТВА"
            title="Почему выбирают нас"
            sub="6 причин для снабженцев промышленных и строительных компаний"
          />
          <div className="feature-grid">
            <div className="feature feature--accent">
              <div className="feature__icon"><Ico.Truck /></div>
              <h3 className="feature__title">Отгрузка в день заказа</h3>
              <p className="feature__text">Склад в Красноярске. Принимаем заявки до 15:00 — отгружаем в тот же день при наличии товара.</p>
            </div>
            <div className="feature">
              <div className="feature__icon"><Ico.Certificate /></div>
              <h3 className="feature__title">Сертификаты на всё</h3>
              <p className="feature__text">ГОСТ, паспорта качества на металл. Предоставляем документацию для тендеров и промышленных заказчиков.</p>
            </div>
            <div className="feature">
              <div className="feature__icon"><Ico.Doc /></div>
              <h3 className="feature__title">Работаем с юрлицами</h3>
              <p className="feature__text">НДС, счета-фактуры, договор поставки. Отсрочка платежа для постоянных клиентов.</p>
            </div>
            <div className="feature">
              <div className="feature__icon"><Ico.Map /></div>
              <h3 className="feature__title">Доставка по всему краю</h3>
              <p className="feature__text">Норильск, Канск, Ачинск, Лесосибирск, Минусинск. Работаем с ПЭК, Деловые Линии, СДЭК.</p>
            </div>
            <div className="feature">
              <div className="feature__icon"><Ico.User /></div>
              <h3 className="feature__title">Личный менеджер</h3>
              <p className="feature__text">Прямой контакт, помощь с подбором по чертежу или спецификации, оперативные ответы в мессенджерах.</p>
            </div>
            <div className="feature feature--accent">
              <div className="feature__icon"><Ico.Mail /></div>
              <h3 className="feature__title">Прайс по запросу</h3>
              <p className="feature__text">Актуальный прайс-лист для снабженцев высылаем на почту без регистрации. Позвоните или напишите на 2153002@mail.ru.</p>
            </div>
          </div>
        </div>
      </section>

      {/* TERMS */}
      <section className="section section--soft">
        <div className="wrap">
          <SectionHead
            eyebrow="03 — КОММЕРЧЕСКИЕ УСЛОВИЯ"
            title="Условия работы"
            sub="Стандартные условия. Индивидуальные обсуждаются при заключении договора поставки."
          />
          <div className="terms-grid">
            <div className="term">
              <div className="term__label">МИН. ЗАКАЗ</div>
              <div className="term__value">от 5 000<small> ₽</small></div>
              <div className="term__note">для юридических лиц и ИП</div>
            </div>
            <div className="term">
              <div className="term__label">ОТСРОЧКА ПЛАТЕЖА</div>
              <div className="term__value">до 30<small> дней</small></div>
              <div className="term__note">для постоянных клиентов по договору</div>
            </div>
            <div className="term">
              <div className="term__label">СКИДКИ ОТ ОБЪЁМА</div>
              <div className="term__value">от 5<small> до 18%</small></div>
              <div className="term__note">обсуждается индивидуально при заказе</div>
            </div>
            <div className="term">
              <div className="term__label">ОПЛАТА</div>
              <div className="term__value" style={{ fontSize: 22 }}>Безнал · наличные</div>
              <div className="term__note">НДС · счёт-фактура · УПД</div>
            </div>
          </div>
        </div>
      </section>

      {/* CONTACTS ON HOME */}
      <section className="section cta">
        <div className="cta__hex"><BigHex stroke="rgba(255,255,255,0.18)" /></div>
        <div className="wrap cta__inner">
          <div>
            <span className="h-eyebrow" style={{ color: 'rgba(255,255,255,0.55)' }}>04 — СВЯЗЬ</span>
            <h2 className="cta__title">Свяжитесь с нами<br/>и получите расчёт</h2>
            <p className="cta__sub">Ответим на вопросы, рассчитаем стоимость и сроки доставки. Пришлём актуальный прайс-лист на почту без регистрации.</p>
            <ul className="contact-list">
              <li>
                <span style={{ color: 'rgba(255,255,255,0.5)' }}><Ico.Phone /></span>
                <span className="k">Телефон</span>
                <span className="v amber">+7 (391) 215-30-02</span>
              </li>
              <li>
                <span style={{ color: 'rgba(255,255,255,0.5)' }}><Ico.Phone /></span>
                <span className="k">Телефон</span>
                <span className="v amber">+7 (391) 214-30-02</span>
              </li>
              <li>
                <span style={{ color: 'rgba(255,255,255,0.5)' }}><Ico.Mail /></span>
                <span className="k">E-mail</span>
                <span className="v">2153002@mail.ru</span>
              </li>
              <li>
                <span style={{ color: 'rgba(255,255,255,0.5)' }}><Ico.Pin /></span>
                <span className="k">Склад</span>
                <span className="v">г. Красноярск, ул. Сопочная, 25</span>
              </li>
              <li>
                <span style={{ color: 'rgba(255,255,255,0.5)' }}><Ico.Clock /></span>
                <span className="k">Режим</span>
                <span className="v">Пн–Пт 8:00–18:00 · Сб 9:00–14:00</span>
              </li>
            </ul>
          </div>
          <div className="cta__panel">
            <span className="h-eyebrow" style={{ color: 'rgba(255,255,255,0.5)' }}>БЫСТРАЯ СВЯЗЬ</span>
            <h4>Прайс или расчёт за 15 минут</h4>
            <p>В рабочее время отвечаем оперативно. Позвоните или напишите на почту.</p>
            <a href="tel:+73912153002" className="btn btn--amber btn--lg btn--full">+7 (391) 215-30-02</a>
            <a href="tel:+73912143002" className="btn btn--blue btn--lg btn--full">+7 (391) 214-30-02</a>
            <a href="mailto:2153002@mail.ru" className="btn btn--ghost btn--full">2153002@mail.ru</a>
          </div>
        </div>
      </section>
    </main>
  );
}

window.HomePage = HomePage;
window.CAT_LIST = CAT_LIST;