/* global React, Ico, PageHead, SectionHead, BottomCTA */
const { useState: useStateDel } = React;

const METHODS = [
  {
    icon: 'Pin', title: 'Самовывоз', badge: { label: 'Бесплатно', variant: 'green' },
    meta: [
      ['АДРЕС', 'г. Красноярск, ул. Сопочная, 25'],
      ['РЕЖИМ', 'Пн–Пт 8:00–18:00 · Сб 9:00–14:00'],
      ['ОПЛАТА', 'Безнал · наличные'],
    ],
    body: <>Приезжайте на склад после подтверждения наличия товара по телефону. На месте — погрузка, выдача документов и пропуск для въезда.</>,
  },
  {
    icon: 'Truck', title: 'Доставка по Красноярску', badge: { label: 'День в день', variant: 'amber' },
    meta: [
      ['МИН. СУММА', 'от 10 000 ₽ — бесплатно'],
      ['СРОК', 'день в день при заказе до 12:00'],
      ['МЕНЬШЕ СУММЫ', 'стоимость обсуждается индивидуально'],
    ],
    body: <>Доставляем собственным транспортом по Красноярску. Согласовываем окно прибытия, отправляем номер машины и водителя.</>,
  },
  {
    icon: 'Map', title: 'Доставка по краю', badge: { label: 'ПЭК · СДЭК · ДЛ', variant: 'blue' },
    meta: [
      ['ГОРОДА', 'Канск · Ачинск · Минусинск · Зеленогорск · Железногорск'],
      ['СРОК', '1–3 рабочих дня'],
      ['СТОИМОСТЬ', 'по тарифам ТК — оплачивает получатель или включаем в счёт'],
    ],
    body: <>Работаем с транспортными компаниями. Отгружаем на терминал ТК в день заказа, отправляем номер накладной и трек.</>,
  },
  {
    icon: 'Snow', title: 'Север края и Норильск', badge: { label: '5–14 раб. дней', variant: 'blue' },
    meta: [
      ['ГОРОДА', 'Норильск · Дудинка · Игарка и др. северные'],
      ['СРОК', '5–14 рабочих дней по направлению'],
      ['ТК', 'с регулярными рейсами на север'],
    ],
    body: <>Работаем с транспортными компаниями, имеющими регулярные рейсы на Север. Актуальные сроки и тарифы — у менеджера по телефону.</>,
  },
];

const FAQ_ITEMS = [
  {
    q: 'Можно ли забрать товар сегодня?',
    a: 'Да, если товар есть на складе. Позвоните до 15:00, уточните наличие и подъезжайте — склад работает до 18:00. На вечер можем подготовить заказ и оставить для получения утром.',
  },
  {
    q: 'Есть ли доставка в Норильск?',
    a: 'Да. Работаем с транспортными компаниями, осуществляющими регулярные рейсы в Норильск. Срок доставки — 5–14 рабочих дней в зависимости от сезона. Стоимость — по тарифам ТК.',
  },
  {
    q: 'Какой минимальный заказ?',
    a: 'Минимальная сумма заказа для юридических лиц и ИП — 5 000 рублей. Для физических лиц — по договорённости, при самовывозе со склада.',
  },
  {
    q: 'Работаете ли с физическими лицами?',
    a: 'В основном работаем с юридическими лицами и ИП. С физлицами — по договорённости, при самовывозе. Безналичная оплата с физлицом возможна по реквизитам.',
  },
  {
    q: 'Можно ли получить сертификаты на продукцию?',
    a: 'Да. Предоставляем сертификаты соответствия и паспорта качества на металл по запросу. Уточняйте при оформлении заказа — комплект документов формируется к моменту отгрузки.',
  },
  {
    q: 'Как получить отсрочку платежа?',
    a: 'Отсрочка до 30 дней предоставляется постоянным клиентам с историей заказов. Условия и лимит обсуждаются индивидуально при заключении договора поставки.',
  },
];

function FAQ() {
  const [open, setOpen] = useStateDel(0);
  return (
    <div className="faq">
      {FAQ_ITEMS.map((it, i) => (
        <div key={i} className={`faq__item ${open === i ? 'is-open' : ''}`}>
          <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
            <span>{it.q}</span>
            <span className="faq__chev"><Ico.Chevron /></span>
          </button>
          {open === i && <div className="faq__a">{it.a}</div>}
        </div>
      ))}
    </div>
  );
}

function DeliveryPage({ navigate }) {
  return (
    <main>
      <PageHead
        navigate={navigate}
        crumbs={[{ label: 'Главная', to: 'home' }, { label: 'Доставка и оплата' }]}
        title="Доставка и оплата"
        sub="Работаем по всему Красноярскому краю. Самовывоз, доставка по городу собственным транспортом, отгрузка через транспортные компании."
      />

      {/* METHODS */}
      <section className="section section--white">
        <div className="wrap">
          <SectionHead
            eyebrow="01 — ДОСТАВКА"
            title="Способы доставки"
            sub="Четыре варианта — выберите подходящий или согласуйте индивидуальный с менеджером."
          />
          <div className="method-grid">
            {METHODS.map((m, i) => {
              const Icon = Ico[m.icon];
              return (
                <div key={i} className="method">
                  <div className="method__head">
                    <div className="method__icon"><Icon /></div>
                    <h3 className="method__title">{m.title}</h3>
                    <span className={`badge ${m.badge.variant === 'green' ? 'badge--green' : m.badge.variant === 'blue' ? 'badge--blue' : ''}`} style={{ marginLeft: 'auto' }}>
                      {m.badge.label}
                    </span>
                  </div>
                  <p className="method__body">{m.body}</p>
                  <div className="method__meta">
                    {m.meta.map(([k, v], j) => (
                      <div key={j} className="row">
                        <span className="k">{k}</span>
                        <span style={{ textAlign: 'right' }}>{v}</span>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* PAY */}
      <section className="section section--neutral">
        <div className="wrap">
          <SectionHead
            eyebrow="02 — ОПЛАТА"
            title="Способы оплаты"
            sub="Все формы расчёта с полным комплектом документов для бухгалтерии."
          />
          <div className="pay-grid">
            <div className="pay">
              <div className="pay__icon"><Ico.Wallet /></div>
              <h4 className="pay__title">Безнал с НДС</h4>
              <p className="pay__text">Для юрлиц и ИП на ОСН. Выставляем счёт, счёт-фактуру, УПД. Реквизиты — на странице «Контакты».</p>
            </div>
            <div className="pay">
              <div className="pay__icon"><Ico.Doc /></div>
              <h4 className="pay__title">Безнал без НДС</h4>
              <p className="pay__text">Для ИП и юрлиц на УСН. Выставляем счёт и УПД без НДС. Договор поставки заключается стандартный.</p>
            </div>
            <div className="pay">
              <div className="pay__icon"><Ico.Ruble /></div>
              <h4 className="pay__title">Наличные</h4>
              <p className="pay__text">При самовывозе со склада. Выдаём товарный чек и приходный ордер. Лимиты — по 54-ФЗ.</p>
            </div>
          </div>
        </div>
      </section>

      {/* LEGAL */}
      <section className="section section--soft">
        <div className="wrap">
          <SectionHead
            eyebrow="03 — ДЛЯ ЮРЛИЦ"
            title="Работаем с юридическими лицами"
            sub="ООО «ПСК СТУ» — ОСН, плательщик НДС. Оформляем полный пакет документов для бухгалтерии."
          />
          <ul className="legal-list">
            <li><Ico.Check /><span>Договор поставки с реквизитами сторон</span></li>
            <li><Ico.Check /><span>Счёт на оплату</span></li>
            <li><Ico.Check /><span>Счёт-фактура (при оплате с НДС)</span></li>
            <li><Ico.Check /><span>Товарная накладная ТОРГ-12 или УПД</span></li>
            <li><Ico.Check /><span>Сертификаты соответствия и паспорта качества — по запросу</span></li>
            <li><Ico.Check /><span>Отсрочка платежа до 30 дней — для постоянных клиентов</span></li>
          </ul>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 28 }}>
            <div className="term" style={{ borderLeftColor: 'var(--amber)' }}>
              <div className="term__label" style={{ color: 'var(--amber-2)' }}>ОТСРОЧКА ПЛАТЕЖА</div>
              <div className="term__value">до 30<small> дней</small></div>
              <div className="term__note">для постоянных клиентов с историей заказов — условия обсуждаются индивидуально при заключении договора</div>
            </div>
            <div className="term" style={{ borderLeftColor: 'var(--amber)' }}>
              <div className="term__label" style={{ color: 'var(--amber-2)' }}>МИНИМАЛЬНЫЙ ЗАКАЗ</div>
              <div className="term__value">от 5 000<small> ₽</small></div>
              <div className="term__note">для юридических лиц и ИП — для физлиц по договорённости</div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section section--white">
        <div className="wrap" style={{ maxWidth: 960 }}>
          <SectionHead
            eyebrow="04 — ВОПРОСЫ"
            title="Частые вопросы"
            sub="Если не нашли ответ — позвоните или напишите на 2153002@mail.ru, ответим в течение 15 минут."
          />
          <FAQ />
        </div>
      </section>

      <BottomCTA
        title="Остались вопросы по доставке?"
        text="Позвоните или напишите — рассчитаем срок и стоимость доставки до вашего города."
      />
    </main>
  );
}

window.DeliveryPage = DeliveryPage;