// THE EPIZODE — Shipping / Returns / FAQ / Warranty. Editorial style: huge bordo numeral left, terms right (вариант B).

function EpzShippingPage() {
  const F = EPZ_FONTS;
  useEpzLang();
  const [theme, setTheme, T] = useEpzTheme();

  // open tab from ?tab= (delivery | warranty | faq), default delivery; старый ?tab=returns → delivery
  const initial = (() => {
    try { const t = new URLSearchParams(location.search).get('tab'); if (['delivery', 'warranty', 'faq'].includes(t)) return t; if (t === 'returns') return 'delivery'; } catch (e) {}
    return 'delivery';
  })();
  const [tab, setTab] = React.useState(initial);

  const TABS = [['delivery', epzT('Доставка и возврат')], ['warranty', epzT('Гарантия')], ['faq', epzT('Вопросы')]];
  const noDot = (s) => s.replace(/\.\s*$/, '');
  const mono = { fontFamily: F.mono, fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase' };

  const row = (label, value, last) => (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, padding: '16px 0', borderBottom: last ? 'none' : `1px solid ${T.border}`, alignItems: 'baseline' }}>
      <span style={{ fontFamily: F.body, fontSize: 15, letterSpacing: 0, textTransform: 'none' }}>{label}</span>
      <span style={{ fontFamily: F.mono, fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', opacity: 0.75, textAlign: 'right' }}>{value}</span>
    </div>
  );

  // Editorial hero block: big numeral column + content column
  const heroBlock = ({ topLabel, num, numWord, bottomLabel, lead, rows, note, cta }) => (
    <div className="sh-hero" style={{ border: `1px solid ${T.border}`, background: T.bgFeatured }}>
      <div style={{ borderRight: `1px solid ${T.border}`, padding: '46px 40px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 40 }}>
        <div style={{ ...mono, color: T.accentInk }}>{topLabel}</div>
        <div>
          <div style={{ fontFamily: F.displayAlt, fontSize: 108, fontWeight: 400, lineHeight: '108px', letterSpacing: '-0.01em', color: T.accentInk, whiteSpace: 'nowrap' }}>{num}</div>
          <div style={{ fontFamily: F.display, fontSize: 28, fontStyle: 'italic', fontWeight: 400, marginTop: 14, color: T.accentInk }}>{numWord}</div>
        </div>
        <div style={{ ...mono, opacity: 0.5 }}>{bottomLabel}</div>
      </div>
      <div style={{ padding: '46px 48px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <p style={{ fontFamily: F.display, fontSize: 24, fontWeight: 400, lineHeight: 1.35, letterSpacing: 0, textTransform: 'none', margin: '0 0 28px', maxWidth: 460 }}>{lead}</p>
        <div>{rows.map(([l, v], i) => row(l, v, i === rows.length - 1))}</div>
        {note && <p style={{ margin: '22px 0 0', fontFamily: F.body, fontSize: 13.5, lineHeight: 1.65, letterSpacing: 0, textTransform: 'none', opacity: 0.65, maxWidth: 480 }}>{note}</p>}
        {cta && <a href="https://t.me/epizode_help" target="_blank" rel="noopener" style={{
          alignSelf: 'flex-start', marginTop: 28, background: T.btnPrimary, color: T.btnPrimaryFg, textDecoration: 'none',
          fontFamily: F.mono, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', padding: '15px 28px',
        }}>{cta}</a>}
      </div>
    </div>
  );

  return (
    <div style={{ width: '100%', background: T.bg, color: T.text, fontFamily: F.mono, fontSize: 13, lineHeight: 1.5, WebkitFontSmoothing: 'antialiased', transition: 'background 0.3s ease, color 0.3s ease' }}>
      <style>{`
        .sh-faq summary { list-style: none; cursor: pointer; }
        .sh-faq summary::-webkit-details-marker { display: none; }
        .sh-hero { display: grid; grid-template-columns: 300px 1fr; }
        @media (max-width: 760px) { .sh-hero { grid-template-columns: 1fr; } .sh-hero > div:first-child { border-right: 0 !important; border-bottom: 1px solid ${T.border}; gap: 20px !important; } }
      `}</style>

      <EpzHeader theme={theme} setTheme={setTheme} T={T} current="shipping" />

      {/* TABS */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 36, padding: '34px 24px 0' }}>
        {TABS.map(([key, label]) => (
          <button key={key} onClick={() => setTab(key)} style={{
            background: 'transparent', border: 0, cursor: 'pointer', padding: '0 0 6px',
            fontFamily: F.mono, fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase',
            color: T.text, opacity: tab === key ? 1 : 0.4,
            borderBottom: `1.5px solid ${tab === key ? T.accent : 'transparent'}`,
          }}>{label}</button>
        ))}
      </div>

      {/* CONTENT */}
      <section style={{ maxWidth: 960, margin: '0 auto', padding: '44px 24px 90px', display: 'flex', flexDirection: 'column', gap: 40 }}>
        {tab === 'delivery' && heroBlock({
          topLabel: epzT('доставка по России'),
          num: <React.Fragment>3<span style={{ fontSize: '0.62em' }}>-</span>7</React.Fragment>, numWord: epzT('дней'),
          bottomLabel: epzT('СДЭК · пункт выдачи или курьер'),
          lead: noDot(epzT('Бесплатная доставка по России при заказе от 100 000 ₽. Все изделия отправляем через СДЭК.')),
          rows: [
            [epzT('СДЭК — пункт выдачи'), epzT('3–7 дней')],
            [epzT('СДЭК — курьер до двери'), epzT('3–7 дней')],
            [epzT('Курьер с примеркой (Москва)'), epzT('по записи')],
            [epzT('Доставка за рубеж'), epzT('7–14 дней')],
          ],
          note: noDot(epzT('Точная стоимость и сроки рассчитываются при оформлении заказа по вашему адресу. Изделия под предзаказ отправляются после пошива партии — ориентировочно через 3 недели.')),
        })}
        {tab === 'delivery' && heroBlock({
          topLabel: epzT('возврат'),
          num: '14', numWord: epzT('дней'),
          bottomLabel: epzT('с момента получения'),
          lead: noDot(epzT('Вернуть изделие можно в течение 14 дней с момента получения, если сохранены товарный вид, бирки и упаковка.')),
          rows: [
            [epzT('Срок возврата'), epzT('14 дней')],
            [epzT('Состояние'), epzT('с бирками, не носили')],
            [epzT('Возврат средств'), epzT('до 10 дней')],
            [epzT('Изделия на заказ'), epzT('обмен / правка')],
          ],
          note: noDot(epzT('Чтобы оформить возврат, напишите нам в Telegram @epizode_help — подскажем, как удобнее отправить. Деньги возвращаем тем же способом, которым была оплата.')),
          cta: epzT('написать в telegram'),
        })}

        {tab === 'warranty' && heroBlock({
          topLabel: epzT('гарантия the epizode'),
          num: '12', numWord: epzT('месяцев'),
          bottomLabel: epzT('на каждое изделие · с момента покупки'),
          lead: noDot(epzT('Если при обычной носке что-то разошлось или оторвалось — починим бесплатно, включая пересылку в обе стороны')),
          rows: [
            [epzT('Швы, лямки, пуговицы, фурнитура'), epzT('ремонт бесплатно')],
            [epzT('Пересылка в ремонт и обратно'), epzT('за наш счёт')],
            [epzT('Срок ремонта'), epzT('7–14 дней')],
            [epzT('Повреждения вне гарантии'), epzT('ремонт по себестоимости')],
          ],
          note: noDot(epzT('Оторвалась лямка, разошёлся шов, отлетела пуговица — напишите в Telegram @epizode_help с фото, и мы организуем ремонт. Если вещь пострадала не по гарантийному случаю — например, порез или сложное пятно — всё равно напишите: поможем восстановить изделие в нашем ателье по себестоимости')),
          cta: epzT('написать в telegram'),
        })}

        {tab === 'faq' && (
          <div style={{ display: 'flex', flexDirection: 'column', maxWidth: 760, width: '100%', margin: '0 auto' }}>
            {[
              [epzT('Чем отличается предзаказ от наличия?'), noDot(epzT('Изделия в наличии отправляем сразу. Предзаказ шьётся под заказ — партия маленькая, отправка ориентировочно через 3 недели.'))],
              [epzT('Как подобрать размер?'), noDot(epzT('На странице каждого изделия есть размерная сетка и обмеры. Сомневаетесь между размерами — напишите нам, поможем.'))],
              [epzT('Можно ли примерить перед покупкой?'), noDot(epzT('Да, по Москве доступен курьер с примеркой и примерка в студии по записи.'))],
              [epzT('Как оплатить заказ?'), noDot(epzT('СБП, оплата долями, Yandex Pay или картой. Для заказов за рубеж — PayPal и карта через Stripe.'))],
            ].map(([q, a], i) => (
              <details key={i} className="sh-faq" style={{ borderBottom: `1px solid ${T.border}` }} open={i === 0}>
                <summary style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '18px 0', fontFamily: F.display, fontSize: 21 }}>
                  <span>{q}</span><span style={{ color: T.accentInk, fontFamily: F.mono, fontSize: 18 }}>+</span>
                </summary>
                <p style={{ margin: '0 0 18px', fontFamily: F.body, fontSize: 14, lineHeight: 1.65, letterSpacing: 0, textTransform: 'none', opacity: 0.75, maxWidth: 620 }}>{a}</p>
              </details>
            ))}
          </div>
        )}
      </section>

      <EpzFooter T={T} />
    </div>
  );
}

window.EpzShippingPage = EpzShippingPage;