const D = window.K7DATA;
const { MetaLabel, SectionHeader, Button, PhotoFrame, Wayfinding, BookingForm, NeedsData, Tabs, SpecList } = window.K7DesignSystem_46f20a;

const K7_SOCIAL_PATHS = {
  tg: 'M21.9 4.3 2.9 11.6c-1 .4-1 1.8.1 2.1l4.4 1.4 1.7 5.2c.3.8 1.3 1 1.9.4l2.4-2.3 4.4 3.2c.7.5 1.7.2 1.9-.7l3.3-15.2c.2-1-.8-1.8-1.1-1.4Zm-3.4 3.6-8.1 7.3c-.2.2-.3.4-.3.7l-.3 2.6-1.2-3.6 9.9-7Z',
  vk: 'M12.8 17.3h1c.3 0 .5-.2.6-.6 0-.4.3-1.3.6-1.6.4-.3.9.6 1.6 1.3.5.5.9.9 1.4.9h2.6c.4 0 .8-.2.5-1-.2-.5-1-1.4-2-2.4-.5-.5-1-1-1.1-1.3-.2-.4 0-.6 0-.6s2.3-3.2 2.5-4.3c.1-.4 0-.7-.6-.7h-2.7c-.4 0-.6.2-.7.5 0 0-.9 2.1-2 3.5-.4.4-.6.6-.8.5-.2 0-.3-.3-.3-.7V7.6c0-.5-.1-.8-.5-.8H9.6c-.3 0-.5.3-.5.5 0 .5.7.6.8 2v2.4c0 .6-.1.7-.3.7-.6 0-1.8-2.1-2.5-4.5-.1-.5-.3-.7-.8-.7H3.7c-.6 0-.7.3-.7.6 0 .5.7 3 3 6.3 1.6 2.3 3.9 3.5 6 3.5l.8-.3Z',
};

function SocialIcon({ href, label, kind }) {
  return (
    <a href={href} aria-label={label} title={label} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, border: '1px solid var(--border-hairline)', color: 'var(--text-accent)', borderBottom: '1px solid var(--border-hairline)' }}>
      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d={K7_SOCIAL_PATHS[kind]} /></svg>
    </a>
  );
}

function Hero({ index, title, note, mobile }) {
  return (
    <section style={{ padding: mobile ? 'var(--space-12) var(--space-4) var(--space-10)' : 'var(--space-20) max(var(--space-10), (100% - var(--content-max)) / 2) var(--space-12)', borderBottom: '1px solid var(--border-hairline)', display: 'grid', gap: 'var(--space-6)' }}>
      <MetaLabel tone="accent" wide>{index}</MetaLabel>
      <h1 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-black)', fontSize: mobile ? 42 : 76, lineHeight: .94, letterSpacing: '-0.04em', textTransform: 'uppercase', color: 'var(--text-primary)', maxWidth: '18ch' }}>{title}</h1>
      {note && <p style={{ margin: 0, fontSize: mobile ? 17 : 19, lineHeight: 1.6, color: 'var(--text-secondary)', maxWidth: '52ch' }}>{note}</p>}
    </section>
  );
}

function RoomsPage({ go, mobile }) {
  return (
    <>
      <Hero index="Комнаты" title="Четыре пространства" mobile={mobile}
        note="Цена зависит от дня. Пятница после 17:00 считается выходным днём." />
      <window.K7Rooms go={go} mobile={mobile} full />
      <section style={{ padding: mobile ? 'var(--space-10) var(--space-4)' : 'var(--space-16) max(var(--space-10), (100% - var(--content-max)) / 2)', borderBottom: '1px solid var(--border-hairline)', display: 'grid', gap: 'var(--space-6)' }}>
        <MetaLabel wide>Зоны без отдельной брони</MetaLabel>
        <p style={{ margin: 0, fontSize: 17, lineHeight: 1.6, color: 'var(--text-secondary)', maxWidth: '56ch' }}>Стойка, комната с кубками и стена с муралом «Underground» — части пространства, а не отдельные коммерческие комнаты. Показываем их фотографиями.</p>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3,1fr)', gap: 'var(--space-4)' }}>
          <PhotoFrame src={window.k7px('bar')} alt="Барная стойка" ratio="4 / 3" caption="Стойка" />
          <PhotoFrame src={window.k7px('trophies')} alt="Комната с кубками" ratio="4 / 3" caption="Кубки и дипломы" />
          <PhotoFrame src={window.k7px('underground')} alt="Мурал Underground" ratio="4 / 3" caption="Underground" />
        </div>
      </section>
    </>
  );
}

function EventsPage({ go, mobile }) {
  const [tab, setTab] = React.useState('soon');
  return (
    <>
      <Hero index="События" title="Здесь что-то происходит" mobile={mobile}
        note="По средам обычно играем. По воскресеньям собираемся поговорить о чём-нибудь интересном. Конкретные даты меняются — смотри ближайшие." />
      <div style={{ padding: mobile ? '0 var(--space-4)' : '0 var(--space-10)', paddingTop: 'var(--space-8)' }}>
        <Tabs active={tab} onChange={setTab} items={[{ id: 'soon', label: 'Ближайшие', count: D.events.length }, { id: 'past', label: 'Прошедшие' }]} />
      </div>
      {tab === 'soon'
        ? <window.K7Events go={go} mobile={mobile} full />
        : <section style={{ padding: mobile ? 'var(--space-10) var(--space-4)' : 'var(--space-16) max(var(--space-10), (100% - var(--content-max)) / 2)', display: 'grid', gap: 'var(--space-5)' }}>
            <MetaLabel wide>Архив</MetaLabel>
            <p style={{ margin: 0, fontSize: 17, lineHeight: 1.6, color: 'var(--text-secondary)', maxWidth: '48ch' }}>Место под архив прошедших вечеров: фото, ведущие, итоги турниров.</p>
            <div><NeedsData>архив событий</NeedsData></div>
          </section>}
    </>
  );
}

function PricesPage({ go, mobile }) {
  return (
    <>
      <Hero index="Цены" title="Экономика вечера" mobile={mobile}
        note="Антикафе считается по времени, комнаты — по часам, кальян — отдельно. Ничего не спрятано в мелком шрифте." />
      <window.K7Prices go={go} mobile={mobile} full />
    </>
  );
}

function BookingPage({ mobile }) {
  return (
    <>
      <Hero index="Бронь" title="Занять свой стол" mobile={mobile}
        note="Пять полей. Дальше отвечает человек, а не робот." />
      <section style={{ padding: mobile ? 'var(--space-10) var(--space-4)' : 'var(--space-16) max(var(--space-10), (100% - var(--content-max)) / 2)', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.1fr 1fr', gap: mobile ? 'var(--space-10)' : 'var(--space-16)', alignItems: 'start', borderBottom: '1px solid var(--border-hairline)' }}>
        <BookingForm compact={mobile} title="Прописаться на вечер" note="Придержим стол и напишем в ответ. Без предоплаты бронь не считается принятой — предоплата равна стоимости первого часа." />
        <div style={{ display: 'grid', gap: 'var(--space-8)' }}>
          <SpecList items={[
            { label: 'Адрес', value: 'БОЛЬШАЯ ОРДЫНКА, 68', href: D.links.maps },
            { label: 'Вход', value: 'СО ДВОРА, ВНИЗ' },
            { label: 'Предоплата брони', value: 'ПЕРВЫЙ ЧАС' },
            { label: 'Комнат', value: '04' },
          ].concat(window.K7L('occupancy').publish ? [{ label: 'Свободно сегодня', value: window.K7L('occupancy').free + ' ИЗ ' + window.K7L('occupancy').total }] : [])} />
          <div style={{ marginTop: 'calc(-1 * var(--space-6))', display: 'flex', justifyContent: 'flex-end' }}><MetaLabel size="sm">(после подтверждения брони)</MetaLabel></div>
          <div style={{ display: 'grid', gap: 'var(--space-3)' }}>
            <MetaLabel size="sm" wide>Каналы связи</MetaLabel>
            <div style={{ display: 'grid', gap: 'var(--space-3)' }}>
              <a href={'tel:' + window.K7L('links').phone.replace(/[^+\d]/g, '')} style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--size-mono)', fontWeight: 'var(--fw-medium)', letterSpacing: 'var(--ls-mono)', color: 'var(--text-accent)', justifySelf: 'start' }}>{window.K7L('links').phone}</a>
              <a href={window.K7L('links').booking} style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--size-mono)', fontWeight: 'var(--fw-medium)', letterSpacing: 'var(--ls-mono)', textTransform: 'uppercase', color: 'var(--text-accent)', justifySelf: 'start' }}>Бронь в телеграме</a>
              <div style={{ height: 1, background: 'var(--border-hairline)', margin: 'var(--space-2) 0' }} />
              <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'center' }}>
                <SocialIcon href={window.K7L('links').telegram} label="Telegram" kind="tg" />
                {window.K7L('links').vk && <SocialIcon href={window.K7L('links').vk} label="VK" kind="vk" />}
              </div>
            </div>
          </div>
          <PhotoFrame src={window.k7px('table')} alt="Стол на восемь, кирпич, лампы" ratio="4 / 3" caption="Твой стол" />
        </div>
      </section>
      <section style={{ padding: mobile ? 'var(--space-10) var(--space-4)' : 'var(--space-16) max(var(--space-10), (100% - var(--content-max)) / 2)' }}>
        <Wayfinding note="От Ордынки — в арку, через двор, дверь справа и вниз по лестнице."
          steps={D.wayfinding.map(s => ({ ...s, photo: window.k7px(s.photoKey) }))} />
      </section>
    </>
  );
}

Object.assign(window, { K7RoomsPage: RoomsPage, K7EventsPage: EventsPage, K7PricesPage: PricesPage, K7BookingPage: BookingPage });