/* global React, Ico, PageHead, SectionHead */

function ContactsPage({ navigate }) {
  const reqs = [
  ['Полное наименование', 'Общество с ограниченной ответственностью «Производственно-строительная компания Стройтехноуниверсал»'],
  ['Краткое наименование', 'ООО «ПСК СТУ»'],
  ['ИНН', '2466123456'],
  ['КПП', '246601001'],
  ['ОГРН', '1152468000000'],
  ['ОКПО', '38745621'],
  ['Юридический адрес', 'Красноярский край, г. Красноярск, ул. Сопочная, д. 25, кв. 12'],
  ['Банк', 'АО «АЛЬФА-БАНК»'],
  ['Расчётный счёт', '40702 810 1 0123 0000123'],
  ['Корреспондентский счёт', '30101 810 2 0000 0000593'],
  ['БИК', '044525593'],
  ['Система налогообложения', 'Основная (ОСН), плательщик НДС'],
  ['Руководитель', 'Директор Туркина Ольга Сергеевна, действует на основании Устава']];


  return (
    <main>
      <PageHead
        navigate={navigate}
        crumbs={[{ label: 'Главная', to: 'home' }, { label: 'Контакты' }]}
        title="Контакты"
        sub="Ответим на вопросы, пришлём прайс и рассчитаем стоимость доставки. В рабочее время отвечаем в течение 15 минут." />
      

      {/* MAIN CONTACTS */}
      <section className="section section--white">
        <div className="wrap">
          <div className="contacts-grid">
            <div>
              <div className="contact-block">
                <div className="contact-block__label">Телефоны</div>
                <div className="contact-block__items">
                  <a href="tel:+73912153002" className="amber">+7 (391) 215-30-02</a>
                  <a href="tel:+73912143002" className="amber">+7 (391) 214-30-02</a>
                </div>
              </div>

              <div className="contact-block">
                <div className="contact-block__label">Электронная почта</div>
                <div className="contact-block__items">
                  <a href="mailto:2153002@mail.ru" className="amber">2153002@mail.ru</a>
                </div>
              </div>

              <div className="contact-block">
                <div className="contact-block__label">Адрес склада</div>
                <div className="contact-block__items">
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                    <Ico.Pin /> г. Красноярск, ул. Сопочная, д. 25
                  </span>
                </div>
              </div>

              <div className="contact-block" style={{ marginBottom: 0 }}>
                <div className="contact-block__label">Режим работы</div>
                <div className="contact-block__items" style={{ fontFamily: 'var(--font-mono)', fontSize: 14 }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '70px 1fr', gap: '4px 16px', maxWidth: 280 }}>
                    <span style={{ color: 'var(--ink-3)' }}>ПН–ПТ</span><span>8:00 — 18:00</span>
                    <span style={{ color: 'var(--ink-3)' }}>СБ</span><span>9:00 — 14:00</span>
                    <span style={{ color: 'var(--ink-3)' }}>ВС</span><span>выходной</span>
                  </div>
                </div>
              </div>
            </div>

            <aside className="contact-card">
              <span className="h-eyebrow">БЫСТРАЯ СВЯЗЬ</span>
              <h3>Нужен прайс или расчёт?</h3>
              <p>Звоните или пишите на почту — ответим в течение 15 минут в рабочее время.</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--outline btn--full">2153002@mail.ru</a>
              <div style={{ marginTop: 8, paddingTop: 16, borderTop: '1px solid var(--line)', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>
                СРЕДНЕЕ ВРЕМЯ ОТВЕТА · 15 МИН
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* MAP */}
      <section className="map-block">
        <div className="map-head">
          <span><span className="k">СКЛАД</span> &nbsp; г. Красноярск, ул. Сопочная, д. 25</span>
          <a href="https://yandex.ru/maps/?text=Красноярск+Сопочная+25" style={{ color: 'var(--mid-2)' }}>Открыть в Яндекс.Картах →</a>
        </div>
        <div className="map-canvas">
          <div className="map-pin">
            <div className="map-pin__dot"></div>
            <div className="map-pin__label">ПСК СТУ · Сопочная, 25</div>
          </div>
          <div className="map-watermark">[ ЯНДЕКС.КАРТЫ · ПЛЕЙСХОЛДЕР ]</div>
        </div>
      </section>

      {/* REQUISITES */}
      <section className="section section--neutral">
        <div className="wrap">
          <SectionHead
            eyebrow="РЕКВИЗИТЫ"
            title="Реквизиты организации"
            sub="Полные реквизиты для договора и платежа. Карточку предприятия можно скачать в PDF." />
          
          <table className="req-table">
            <tbody>
              {reqs.map(([k, v], i) =>
              <tr key={i}>
                  <th>{k}</th>
                  <td className={['ИНН', 'КПП', 'ОГРН', 'ОКПО', 'Расчётный счёт', 'Корреспондентский счёт', 'БИК'].includes(k) ? 'mono' : ''}>{v}</td>
                </tr>
              )}
            </tbody>
          </table>
          <div style={{ marginTop: 24, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="btn btn--blue" onClick={(e) => {e.preventDefault();alert('Скачивание карточки предприятия (демо-прототип)');}}>Скачать реквизит (PDF)

            </button>
            <button className="btn btn--outline" onClick={(e) => {
              const text = reqs.map(([k, v]) => `${k}: ${v}`).join('\n');
              if (navigator.clipboard) navigator.clipboard.writeText(text);
            }}>
              Скопировать реквизиты
            </button>
          </div>
        </div>
      </section>
    </main>);

}

window.ContactsPage = ContactsPage;