/* Оконный Гид — page bottom: Works, Reviews, CallbackBand, Contacts,
   Footer, MobileBar, and the modal/lightbox overlays. */
const { useState: useStateB, useEffect: useEffectB } = React;

const WORKS = [
  { img: 'work-1.webp', cap: 'Остекление веранды, кирпичный дом' },
  { img: 'dir-panorama.webp', cap: 'Панорамное остекление зимнего сада' },
  { img: 'work-2.webp', cap: 'Окна в гостиной загородного дома' },
  { img: 'laminaciya.webp', cap: 'Ламинация под дерево, вид на лес' },
  { img: 'dir-veranda.webp', cap: 'Тёплая терраса с панорамой' },
  { img: 'cottage-2.webp', cap: 'Остекление коттеджа под ключ' },
  { img: 'srub.webp', cap: 'Окно в доме из бруса, обсада' },
  { img: 'work-3.webp', cap: 'Окно с видом на участок' },
  { img: 'work-4.webp', cap: 'Тёплая веранда с панорамным остеклением' },
  { img: 'work-5.webp', cap: 'Эркерное окно в гостиной' },
  { img: 'work-6.webp', cap: 'Арочное остекление, классический интерьер' },
  { img: 'work-7.webp', cap: 'Фасадное остекление кирпичного коттеджа' },
];

function Works() {
  const list = WORKS.map((w) => ({ src: `photos/${w.img}`, cap: w.cap }));
  return (
    <section id="raboty" className="okg-section">
      <div className="okg-container">
        <SectionHead eyebrow="Примеры работ" title="Остекление коттеджей в Москве и Области"
          sub="Реальные объекты: панорамные веранды, мансарды, дома из кирпича и бруса. Нажмите на фото, чтобы рассмотреть." />
        <div className="okg-grid okg-grid-4 okg-gallery" style={{ gap: 16 }}>
          {list.map((w, i) => (
            <Reveal key={i} delay={(i % 4) * 0.05}>
              <button onClick={() => openLightbox(list, i)} onMouseMove={spotMove} className="okg-spot-over" style={{ position: 'relative', display: 'block', width: '100%', padding: 0, border: 'none', borderRadius: 'var(--r-lg)', overflow: 'hidden', cursor: 'zoom-in', background: 'var(--surface-fill)', aspectRatio: '4 / 3' }}
                onMouseEnter={(e) => { const im = e.currentTarget.querySelector('img'); if (im) im.style.transform = 'scale(1.06)'; }}
                onMouseLeave={(e) => { const im = e.currentTarget.querySelector('img'); if (im) im.style.transform = 'scale(1)'; }}>
                <img src={w.src} alt={w.cap} loading="lazy" decoding="async" style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform .5s var(--ease)' }} />
                <span style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '24px 14px 12px', fontSize: 13, fontWeight: 600, color: '#fff', textAlign: 'left', background: 'linear-gradient(180deg, rgba(20,20,20,0), rgba(20,20,20,.8))' }}>{w.cap}</span>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const REVIEW_STATS = [['5.0', 'рейтинг на Яндексе'], ['230', 'оценок'], ['174', 'отзыва']];
const YANDEX_REVIEWS = 'https://yandex.ru/maps/org/okonny_gid/84736694955/?ll=37.546646%2C56.344350&z=14';
const REVIEW_BARS = [['Качество продукции', 99], ['Соблюдение сроков', 99], ['Доставка', 100]];
const REVIEWS = [
  { n: 'Сергей М.', t: 'Остекляли дом из бруса под ключ. Сделали обсаду, поставили большие окна на веранду — ни одной щели, зимой тепло. Замерщик приехал быстро, монтажники аккуратные.' },
  { n: 'Наталья К.', t: 'Заказывали панорамные окна в гостиную. Менеджер честно объяснил по профилям, не навязывал лишнего. Сроки выдержали, мусор убрали. Рекомендую.' },
  { n: 'Андрей В.', t: 'Брали Centum на коттедж — самый тёплый профиль. Разница с прежними окнами огромная, в доме тихо даже рядом с дорогой. Спасибо за работу.' },
];

function Reviews() {
  return (
    <section id="otzyvy" style={{ position: 'relative', overflow: 'hidden', background: 'var(--surface-subtle)' }} className="okg-section">
      <img src="photos/reviews-bg.webp" alt="" aria-hidden="true" loading="lazy" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.5 }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(247,244,239,.90) 0%, rgba(247,244,239,.82) 45%, rgba(247,244,239,.94) 100%)' }} />
      <div className="okg-container" style={{ position: 'relative' }}>
        <div className="okg-split" style={{ alignItems: 'flex-start', marginBottom: 'clamp(28px,4vw,44px)' }}>
          <div>
            <Eyebrow tone="terra">Отзывы</Eyebrow>
            <h2 style={{ margin: '14px 0 0', fontSize: 'clamp(28px,4vw,40px)', fontWeight: 800, letterSpacing: '-.02em', lineHeight: 1.1, color: 'var(--text-strong)' }}>Нам доверяют остекление дома</h2>
            <div style={{ display: 'flex', gap: 32, marginTop: 22, flexWrap: 'wrap' }}>
              {REVIEW_STATS.map(([v, l]) => (
                <div key={l}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ fontSize: 38, fontWeight: 800, color: 'var(--text-strong)', lineHeight: 1, letterSpacing: '-.02em' }}>{v}</span>
                    {l.includes('рейтинг') && <Icon name="star" size={22} fill="var(--rating)" style={{ color: 'var(--rating)' }} />}
                  </div>
                  <span style={{ fontSize: 13.5, color: 'var(--text-muted)' }}>{l}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ width: '100%', background: '#fff', border: '1px solid var(--border-hairline)', borderRadius: 'var(--r-lg)', padding: 26 }}>
            {REVIEW_BARS.map(([l, v]) => (
              <div key={l} style={{ marginBottom: 16 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, marginBottom: 7 }}>
                  <span style={{ color: 'var(--text-body)', fontWeight: 500 }}>{l}</span>
                  <span style={{ fontWeight: 700, color: 'var(--text-strong)' }}>{v}%</span>
                </div>
                <div style={{ height: 7, borderRadius: 4, background: 'var(--surface-fill)', overflow: 'hidden' }}>
                  <div style={{ width: v + '%', height: '100%', borderRadius: 4, background: 'var(--okg-pine-600)' }} />
                </div>
              </div>
            ))}
            <a href={YANDEX_REVIEWS} target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 4, fontSize: 14, fontWeight: 700, color: 'var(--okg-terra-600)' }}>
              Все отзывы на Яндекс.Картах <Icon name="arrowR" size={16} />
            </a>
          </div>
        </div>
        <div className="okg-grid okg-grid-3">
          {REVIEWS.map((r, i) => (
            <Reveal key={r.n} delay={(i % 3) * 0.06}>
              <a href={YANDEX_REVIEWS} target="_blank" rel="noopener" onMouseMove={spotMove} className="okg-spot" style={{ display: 'flex', flexDirection: 'column', gap: 14, padding: 26, height: '100%', background: '#fff', border: '1px solid var(--border-hairline)', borderRadius: 'var(--r-lg)', transition: 'border-color var(--dur), transform var(--dur), box-shadow var(--dur)' }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--okg-terra-500)'; e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border-hairline)'; e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}>
                <div style={{ display: 'flex', gap: 2, color: 'var(--rating)' }}>
                  {[0, 1, 2, 3, 4].map((s) => <Icon key={s} name="star" size={17} fill="var(--rating)" />)}
                </div>
                <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: 'var(--text-body)' }}>«{r.t}»</p>
                <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 11, paddingTop: 6 }}>
                  <span style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--okg-terra-100)', color: 'var(--okg-terra-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 16 }}>{r.n[0]}</span>
                  <div>
                    <div style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--text-strong)' }}>{r.n}</div>
                    <div style={{ fontSize: 12.5, color: 'var(--text-faint)' }}>Отзыв с Яндекс.Карт</div>
                  </div>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function CallbackBand() {
  const [sent, setSent] = useStateB(false);
  return (
    <section id="zayavka" className="okg-section">
      <div className="okg-container">
        <div style={{ position: 'relative', borderRadius: 'var(--r-xl)', overflow: 'hidden', background: 'var(--surface-ink)' }}>
          <img src="photos/dir-veranda.webp" alt="" loading="lazy" decoding="async" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.28 }} />
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr', gap: 0, padding: 'clamp(28px,4vw,52px)' }}>
            <div className="okg-split" style={{ alignItems: 'center' }}>
              <div>
                <Eyebrow tone="terra" light>Бесплатная консультация</Eyebrow>
                <h2 style={{ margin: '14px 0 0', fontSize: 'clamp(26px,3.5vw,38px)', fontWeight: 800, letterSpacing: '-.02em', lineHeight: 1.12, color: '#fff' }}>Оставьте номер — перезвоним и поможем с остеклением коттеджа</h2>
                <p style={{ margin: '16px 0 0', fontSize: 16, lineHeight: 1.6, color: 'rgba(255,255,255,.78)', maxWidth: 480 }}>
                  Подскажем по профилям, посчитаем стоимость и согласуем бесплатный замер с выездом за город.
                </p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 22, flexWrap: 'wrap' }}>
                  <a href={`tel:${PHONE_TEL}`} style={{ fontSize: 24, fontWeight: 800, color: '#fff' }}>{PHONE}</a>
                  <Button variant="outlineLight" href={MAX_URL} icon="max">Написать в MAX</Button>
                </div>
              </div>
              <div style={{ background: '#fff', borderRadius: 'var(--r-lg)', padding: 'clamp(22px,3vw,30px)' }}>
                {sent ? (
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 12, padding: '20px 8px' }}>
                    <span style={{ width: 52, height: 52, borderRadius: '50%', background: 'var(--okg-pine-100)', color: 'var(--okg-pine-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="check" size={28} /></span>
                    <h3 style={{ margin: 0, fontSize: 20, fontWeight: 800, color: 'var(--text-strong)' }}>Спасибо! Перезвоним в рабочее время</h3>
                  </div>
                ) : (
                  <form onSubmit={(e) => { e.preventDefault(); okgSendLead(e.currentTarget, { source: 'Блок «Заявка» внизу страницы' }); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                    <Field label="Ваше имя" name="name" placeholder="Иван" required />
                    <Field label="Телефон" name="phone" type="tel" placeholder="+7 (___) ___-__-__" required />
                    <Button type="submit" size="lg" fullWidth icon="phone">Заказать звонок</Button>
                    <Consent />
                  </form>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contacts() {
  const rows = [
    { icon: 'phone', label: 'Телефон', val: PHONE, href: `tel:${PHONE_TEL}` },
    { icon: 'mail', label: 'E-mail', val: 'oknavkotedj@mail.ru', href: 'mailto:oknavkotedj@mail.ru' },
    { icon: 'pin', label: 'Адрес', val: 'г. Дмитров, ул. Бирлово Поле, 24Б' },
    { icon: 'clock', label: 'Часы работы', val: 'Пн–Вс, с 9:00 до 18:00' },
  ];
  return (
    <section id="kontakty" style={{ position: 'relative', overflow: 'hidden', background: 'var(--surface-subtle)' }} className="okg-section">
      <img src="photos/contacts-bg.webp" alt="" aria-hidden="true" loading="lazy" decoding="async" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(247,244,239,.93) 0%, rgba(247,244,239,.85) 100%)' }} />
      <div className="okg-container" style={{ position: 'relative' }}>
        <SectionHead eyebrow="Контакты" title="Приезжайте или звоните" />
        <div className="okg-contacts-grid">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {rows.map((r) => (
              <div key={r.label} style={{ display: 'flex', gap: 14, alignItems: 'center', padding: 18, background: '#fff', border: '1px solid var(--border-hairline)', borderRadius: 'var(--r-lg)' }}>
                <span style={{ width: 46, height: 46, flex: 'none', borderRadius: 'var(--r-md)', background: 'var(--okg-terra-100)', color: 'var(--okg-terra-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={r.icon} size={22} /></span>
                <div>
                  <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>{r.label}</div>
                  {r.href ? <a href={r.href} style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-strong)' }}>{r.val}</a> : <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-strong)' }}>{r.val}</div>}
                </div>
              </div>
            ))}
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Button href={MAX_URL} icon="max">Написать в MAX</Button>
              <Button href={`tel:${PHONE_TEL}`} variant="outline" icon="phone">Позвонить</Button>
            </div>
          </div>
          <a href={YANDEX_REVIEWS} target="_blank" rel="noopener" style={{ position: 'relative', display: 'block', minHeight: 360, borderRadius: 'var(--r-lg)', overflow: 'hidden', border: '1px solid var(--border-hairline)' }}>
            <img src="photos/map.webp" alt="Карта: Дмитров, ул. Бирлово Поле, 24Б" loading="lazy" decoding="async" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
            <span style={{ position: 'absolute', left: 16, bottom: 16, display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 700, color: 'var(--text-strong)', background: 'rgba(255,255,255,.92)', padding: '9px 14px', borderRadius: 'var(--r-pill)', boxShadow: 'var(--shadow-sm)' }}>
              <Icon name="pin" size={17} style={{ color: 'var(--okg-terra-600)' }} /> Бирлово Поле, 24Б · Дмитров
            </span>
            <span style={{ position: 'absolute', right: 16, top: 16, display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 600, color: '#fff', background: 'var(--okg-terra-600)', padding: '8px 13px', borderRadius: 'var(--r-pill)', boxShadow: 'var(--shadow-sm)' }}>
              Открыть на карте <Icon name="arrowR" size={15} />
            </span>
          </a>
        </div>
      </div>
    </section>
  );
}

const FOOT_NAV = [
  ['#chto-osteklyaem', 'Проекты'],
  ['#profili', 'Профили'],
  ['#etapy', 'Этапы работы'],
  ['#raboty', 'Примеры работ'],
  ['#otzyvy', 'Отзывы'],
  ['#kontakty', 'Контакты'],
];

function Footer() {
  return (
    <footer style={{ background: 'var(--surface-ink-2)', color: 'rgba(255,255,255,.66)' }}>
      <div className="okg-container" style={{ paddingBlock: '52px 36px' }}>
        <div className="okg-footer-grid">
          <div>
            <Logo tone="light" height={22} />
            <p style={{ margin: '18px 0 0', fontSize: 14, lineHeight: 1.6, maxWidth: 280 }}>
              Остекление коттеджей и загородных домов в Дмитрове и районе. Производство, замер, монтаж по ГОСТ и гарантия.
            </p>
            <a href={`tel:${PHONE_TEL}`} style={{ display: 'inline-block', marginTop: 16, fontSize: 20, fontWeight: 800, color: '#fff' }}>{PHONE}</a>
          </div>
          <div>
            <h5 style={{ margin: '0 0 14px', fontSize: 14, fontWeight: 700, color: '#fff' }}>Разделы</h5>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {FOOT_NAV.map(([h, l]) => <li key={h}><a href={h} style={{ fontSize: 14 }}>{l}</a></li>)}
            </ul>
          </div>
          <div>
            <h5 style={{ margin: '0 0 14px', fontSize: 14, fontWeight: 700, color: '#fff' }}>Контакты</h5>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14 }}>
              <li>г. Дмитров, ул. Бирлово Поле, 24Б</li>
              <li><a href="mailto:oknavkotedj@mail.ru">oknavkotedj@mail.ru</a></li>
              <li>Пн–Вс, 9:00–18:00</li>
              <li style={{ display: 'flex', gap: 10, marginTop: 4 }}>
                <a href={MAX_URL} target="_blank" rel="noopener" aria-label="Написать в MAX" style={{ width: 44, height: 44, border: '1px solid var(--okg-terra-600)', background: 'var(--okg-terra-600)', borderRadius: '50%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}><Icon name="max" size={20} /></a>
                <a href={`tel:${PHONE_TEL}`} aria-label="Позвонить" style={{ width: 44, height: 44, border: '1px solid rgba(255,255,255,.2)', borderRadius: '50%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}><Icon name="phone" size={19} /></a>
                <a href="mailto:oknavkotedj@mail.ru" aria-label="Написать на e-mail" style={{ width: 44, height: 44, border: '1px solid rgba(255,255,255,.2)', borderRadius: '50%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}><Icon name="mail" size={19} /></a>
              </li>
            </ul>
          </div>
          <div>
            <h5 style={{ margin: '0 0 14px', fontSize: 14, fontWeight: 700, color: '#fff' }}>Запишитесь на замер</h5>
            <p style={{ margin: '0 0 14px', fontSize: 14, lineHeight: 1.55 }}>Бесплатно, с выездом за город. Перезвоним в рабочее время.</p>
            <Button onClick={() => openModal('callback')} icon="phone" fullWidth>Заказать звонок</Button>
          </div>
        </div>
        <div id="politika" style={{ marginTop: 40, paddingTop: 22, borderTop: '1px solid rgba(255,255,255,.12)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10, fontSize: 12.5, color: 'rgba(255,255,255,.5)' }}>
          <span style={{ display: 'flex', flexDirection: 'column', gap: 3, lineHeight: 1.5 }}>
            <span>© 2026 Окна в коттедж · ИП Кумихин Василий Алексеевич</span>
            <span>ИНН 500712663837 · ОГРНИП 322508100127797</span>
            <span>141802, Московская обл., г. Дмитров, д. Митькино</span>
          </span>
          <span style={{ display: 'inline-flex', gap: 16, flexWrap: 'wrap' }}>
            <a href="politika-konfidencialnosti.html" target="_blank" rel="noopener" style={{ color: 'rgba(255,255,255,.5)', textDecoration: 'underline' }}>Политика конфиденциальности</a>
            <a href="politika-cookie.html" target="_blank" rel="noopener" style={{ color: 'rgba(255,255,255,.5)', textDecoration: 'underline' }}>Обработка ПДн и cookie</a>
            <a href="soglasie-pdn.html" target="_blank" rel="noopener" style={{ color: 'rgba(255,255,255,.5)', textDecoration: 'underline' }}>Согласие на обработку ПДн</a>
            <button type="button" onClick={() => window.dispatchEvent(new Event('okg:cookie'))} style={{ background: 'none', border: 0, padding: 0, font: 'inherit', color: 'rgba(255,255,255,.5)', textDecoration: 'underline', cursor: 'pointer' }}>Настройки cookie</button>
          </span>
        </div>
      </div>
    </footer>
  );
}

function MobileBar() {
  return (
    <div className="okg-show-mobile okg-mobilebar" style={{ position: 'fixed', left: 0, right: 0, bottom: 0, zIndex: 150, display: 'none', gap: 10, padding: '10px 14px', paddingBottom: 'calc(10px + env(safe-area-inset-bottom, 0px))', background: 'rgba(255,255,255,.97)', backdropFilter: 'blur(10px)', borderTop: '1px solid var(--border-hairline)', boxShadow: '0 -4px 16px rgba(0,0,0,.08)' }}>
      <Button href={`tel:${PHONE_TEL}`} variant="outline" icon="phone" fullWidth style={{ padding: '13px 8px', fontSize: 14 }}>Позвонить</Button>
      <Button onClick={() => openModal('callback')} icon="arrowR" fullWidth style={{ padding: '13px 8px', fontSize: 14 }}>Заявка</Button>
    </div>
  );
}

Object.assign(window, { Works, Reviews, CallbackBand, Contacts, Footer, MobileBar });