/* Оконный Гид — page middle: Profiles, WhatsIncluded, Obsada, Stages */
const { useState: useStateM } = React;

const PROFILES = [
  // Melke
  { name: 'Lite 60', brand: 'Melke', cls: 'Эконом', depth: '60 мм · 3 камеры', warm: '0,62', noise: '33 дБ', price: '3 200', img: 'prof-lite60-sm.webp' },
  { name: 'Lite 70', brand: 'Melke', cls: 'Эконом', depth: '70 мм · 4 камеры', warm: '0,70', noise: '35 дБ', price: '3 900', img: 'prof-lite70-sm.webp' },
  { name: 'Smart Ultra 65', brand: 'Melke', cls: 'Комфорт', depth: '65 мм · 4 камеры', warm: '0,88', noise: '37 дБ', price: '4 900', img: 'prof-smart-sm.webp' },
  { name: 'Evolution 70', brand: 'Melke', cls: 'Комфорт', depth: '70 мм · 5 камер', warm: '1,06', noise: '40 дБ', price: '6 200', img: 'prof-evolution-sm.webp' },
  { name: 'Wide', brand: 'Melke', cls: 'Премиум', depth: '80/95 мм · 6 камер', warm: '1,12', noise: '42 дБ', price: '9 200', img: 'prof-wide-sm.webp' },
  { name: 'Centum', brand: 'Melke', cls: 'Премиум', depth: '80/100 мм · 6 камер', warm: '1,18', noise: '45 дБ', price: '10 500', best: true, img: 'prof-centum-sm.webp' },
  // Rehau
  { name: 'Blitz', brand: 'Rehau', cls: 'Эконом', depth: '60 мм · 3 камеры', warm: '0,60', noise: '33 дБ', price: '3 500', img: 'prof-blitz-t.webp' },
  { name: 'Termo', brand: 'Rehau', cls: 'Эконом', depth: '70 мм · 4 камеры', warm: '0,70', noise: '35 дБ', price: '4 300', img: 'prof-termo-t.webp' },
  { name: 'Grazio', brand: 'Rehau', cls: 'Комфорт', depth: '70 мм · 5 камер', warm: '0,80', noise: '38 дБ', price: '5 200', img: 'prof-grazio-t.webp' },
  { name: 'Delight', brand: 'Rehau', cls: 'Комфорт', depth: '70 мм · 5 камер', warm: '0,74', noise: '40 дБ', price: '5 700', img: 'prof-delight-t.webp' },
  { name: 'Intelio', brand: 'Rehau', cls: 'Премиум', depth: '80 мм · 6 камер', warm: '0,99', noise: '40 дБ', price: '6 750', img: 'prof-intelio-t.webp' },
  { name: 'Diamant', brand: 'Rehau', cls: 'Премиум', depth: '80 мм · 7 камер', warm: '1,01', noise: '42 дБ', price: '10 800', img: 'prof-diamant-t.webp' },
];

function ProfileCard({ p }) {
  const [h, setH] = useStateM(false);
  return (
    <article onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} onMouseMove={spotMove} className="okg-spot"
      style={{ position: 'relative', display: 'flex', flexDirection: 'column', background: '#fff', border: '1px solid ' + (p.best ? 'var(--okg-terra-500)' : 'var(--border-hairline)'), borderRadius: 'var(--r-lg)', padding: 24, boxShadow: h ? 'var(--shadow-md)' : 'var(--shadow-xs)', transform: h ? 'translateY(-3px)' : 'none', transition: 'all var(--dur)' }}>
      {p.best && <span style={{ position: 'absolute', top: -11, left: 24, zIndex: 2, background: 'var(--okg-terra-600)', color: '#fff', fontSize: 12, fontWeight: 700, padding: '4px 11px', borderRadius: 'var(--r-pill)' }}>Самый тёплый</span>}
      {p.img && (
        <div style={{ margin: '-24px -24px 20px', height: 188, background: 'linear-gradient(160deg,#fbfbfb,#f1ece5)', borderBottom: '1px solid var(--border-hairline)', borderRadius: 'var(--r-lg) var(--r-lg) 0 0', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <img src={`photos/${p.img}`} alt={`Профиль ${p.brand} ${p.name} в разрезе`} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'contain', padding: 10, transform: h ? 'scale(1.04)' : 'scale(1)', transition: 'transform .5s var(--ease)' }} />
        </div>
      )}
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
        <div>
          <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-faint)' }}>{p.brand}</span>
          <h3 style={{ margin: '2px 0 0', fontSize: 23, fontWeight: 800, color: 'var(--text-strong)', letterSpacing: '-.01em' }}>{p.name}</h3>
        </div>
        <span style={{ fontSize: 12, fontWeight: 700, padding: '4px 10px', borderRadius: 'var(--r-pill)', background: p.cls === 'Премиум' ? 'var(--mk-graphite-800)' : 'var(--surface-fill)', color: p.cls === 'Премиум' ? '#fff' : 'var(--text-strong)' }}>{p.cls}</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, margin: '20px 0', paddingTop: 18, borderTop: '1px solid var(--border-hairline)' }}>
        {[['Профиль', p.depth], ['Сохранение тепла', p.warm + ' м²·°С/Вт'], ['Шумоизоляция', 'до ' + p.noise]].map(([k, v]) => (
          <div key={k} style={{ display: 'flex', justifyContent: 'space-between', gap: 10, fontSize: 14.5 }}>
            <span style={{ color: 'var(--text-muted)' }}>{k}</span>
            <span style={{ fontWeight: 600, color: 'var(--text-strong)', textAlign: 'right' }}>{v}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 'auto' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 14 }}>
          <span style={{ fontSize: 14, color: 'var(--text-muted)' }}>от</span>
          <span style={{ fontSize: 28, fontWeight: 800, color: 'var(--text-strong)', letterSpacing: '-.01em' }}>{p.price}</span>
          <span style={{ fontSize: 15, color: 'var(--text-muted)', fontWeight: 600 }}>₽</span>
        </div>
        <Button variant={p.best ? 'primary' : 'outline'} onClick={() => openModal('callback')} fullWidth>Заказать звонок</Button>
      </div>
    </article>
  );
}

function Profiles() {
  const [tab, setTab] = useStateM('Melke');
  const tabs = ['Melke', 'Rehau'];
  const shown = PROFILES.filter((p) => p.brand === tab);
  return (
    <section id="profili" className="okg-section">
      <div className="okg-container">
        <SectionHead eyebrow="Профильные системы" title="Профили для загородного дома"
          sub="Работаем с двумя проверенными брендами — Melke и Rehau. В каждом есть линейки от эконома до премиума: чем больше монтажная глубина и число камер, тем теплее и тише в доме." />
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 30 }}>
          {tabs.map((t) => {
            const on = t === tab;
            return (
              <button key={t} onClick={() => setTab(t)} style={{ padding: '10px 20px', fontSize: 14.5, fontWeight: 600, cursor: 'pointer', borderRadius: 'var(--r-pill)', border: '1px solid ' + (on ? 'var(--surface-ink)' : 'var(--border-strong)'), background: on ? 'var(--surface-ink)' : 'transparent', color: on ? '#fff' : 'var(--text-body)', transition: 'all var(--dur)' }}>{t}</button>
            );
          })}
        </div>
        <div className="okg-grid okg-grid-3">
          {shown.map((p, i) => <Reveal key={p.name} delay={(i % 3) * 0.05}><ProfileCard p={p} /></Reveal>)}
        </div>
        <p style={{ margin: '26px 0 0', fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.6, maxWidth: 900 }}>
          Доступны также профили Veka, KBE, Deceuninck, Brusbox, Schüco и фурнитура Roto, Aubi, Vorne. Эконом-серии (Melke Lite, Rehau Blitz, Rehau Grazio) — по запросу. Цены указаны «от», за окно стандартного размера; итог зависит от конструкции и считается после замера. Не является публичной офертой.
        </p>
      </div>
    </section>
  );
}

const INCLUDED = ['Энергосберегающий стеклопакет', 'Подоконник', 'Откосы', 'Москитные сетки', 'Оконные ручки', 'Качественный монтаж по ГОСТ'];
const HIGHLIGHTS = [
  { icon: 'thermo', t: 'Энергосбережение', d: 'Мультифункциональное напыление держит тепло зимой и прохладу летом.' },
  { icon: 'sound', t: 'Шумоизоляция', d: 'Разнотолщинные стёкла гасят уличный шум — тишина даже у дороги.' },
  { icon: 'gost', t: 'Монтаж по ГОСТ', d: 'Узлы примыкания по стандарту: без сквозняков, продуваний и конденсата.' },
];

function WhatsIncluded() {
  return (
    <section style={{ background: 'var(--surface-subtle)' }} className="okg-section">
      <div className="okg-container">
        <div className="okg-split">
          <Reveal>
            <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>
            <p style={{ margin: '16px 0 24px', fontSize: 16, lineHeight: 1.6, color: 'var(--text-muted)' }}>
              Ставим окно в полной комплектации — вам не нужно докупать мелочи отдельно. Всё привозим и монтируем за один выезд.
            </p>
            <div className="okg-grid okg-grid-2" style={{ gap: 12, marginBottom: 28 }}>
              {INCLUDED.map((it) => (
                <div key={it} style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                  <span style={{ width: 26, height: 26, flex: 'none', borderRadius: '50%', background: 'var(--okg-pine-100)', color: 'var(--okg-pine-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="check" size={16} stroke={2.4} /></span>
                  <span style={{ fontSize: 15, fontWeight: 500, color: 'var(--text-body)' }}>{it}</span>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {HIGHLIGHTS.map((hl) => (
                <div key={hl.t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <span style={{ width: 44, height: 44, flex: 'none', borderRadius: 'var(--r-md)', background: '#fff', border: '1px solid var(--border-hairline)', color: 'var(--okg-terra-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={hl.icon} size={22} /></span>
                  <div>
                    <h4 style={{ margin: '2px 0 3px', fontSize: 16, fontWeight: 700, color: 'var(--text-strong)' }}>{hl.t}</h4>
                    <p style={{ margin: 0, fontSize: 14, lineHeight: 1.5, color: 'var(--text-muted)' }}>{hl.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={0.08}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: 'auto auto', gap: 16 }}>
              <div style={{ gridColumn: '1 / -1', borderRadius: 'var(--r-lg)', overflow: 'hidden', background: '#fff', border: '1px solid var(--border-hairline)' }}>
                <img src="photos/profil-cut.webp" alt="Многокамерный профиль в разрезе" style={{ width: '100%', height: 280, objectFit: 'cover' }} />
              </div>
              <div style={{ borderRadius: 'var(--r-lg)', overflow: 'hidden' }}>
                <img src="photos/furnitura.webp" alt="Оконная фурнитура" style={{ width: '100%', height: 190, objectFit: 'cover' }} />
              </div>
              <div style={{ borderRadius: 'var(--r-lg)', overflow: 'hidden' }}>
                <img src="photos/uplotnitel.webp" alt="Контур уплотнения" style={{ width: '100%', height: 190, objectFit: 'cover' }} />
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Obsada() {
  return (
    <section className="okg-section">
      <div className="okg-container">
        <div className="okg-split">
          <Reveal style={{ borderRadius: 'var(--r-xl)', overflow: 'hidden', order: 0 }}>
            <img src="photos/srub.webp" alt="Окно в доме из бруса" style={{ width: '100%', height: '100%', minHeight: 340, objectFit: 'cover' }} />
          </Reveal>
          <Reveal delay={0.08}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 13px', borderRadius: 'var(--r-pill)', background: 'var(--okg-pine-100)', color: 'var(--okg-pine-700)', fontSize: 13, fontWeight: 700 }}>
              <Icon name="home" size={16} /> Дома из бруса и дерева
            </span>
            <h2 style={{ margin: '16px 0 0', fontSize: 'clamp(28px,4vw,40px)', fontWeight: 800, letterSpacing: '-.02em', lineHeight: 1.1, color: 'var(--text-strong)' }}>Обсада и монтаж по ГОСТ</h2>
            <p style={{ margin: '16px 0 0', fontSize: 16, lineHeight: 1.65, color: 'var(--text-muted)' }}>
              Деревянный дом живёт и даёт усадку годами. Чтобы окно не зажало и не повело, ставим обсаду — окосячку: она принимает на себя движение сруба и защищает конструкцию от деформации.
            </p>
            <p style={{ margin: '14px 0 0', fontSize: 16, lineHeight: 1.65, color: 'var(--text-muted)' }}>
              Монтаж выполняем строго по ГОСТ, с правильными узлами примыкания и паро- и гидроизоляцией. Это особенно важно за городом — окна держат тепло и не продуваются даже в мороз.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 24 }}>
              <Button onClick={() => openModal('callback')} icon="phone">Заказать звонок</Button>
              <Button variant="outline" onClick={() => openModal('measure')} icon="ruler">Вызвать замерщика</Button>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

const STAGES = [
  { icon: 'phone', t: 'Заявка и консультация', d: 'Звоните или оставляете заявку — обсуждаем задачу и предварительную стоимость.' },
  { icon: 'ruler', t: 'Бесплатный замер', d: 'Замерщик выезжает на объект, в том числе за город, и уточняет все размеры.' },
  { icon: 'doc', t: 'Договор', d: 'Фиксируем состав, сроки и цену. При необходимости оформляем договор на дому.' },
  { icon: 'frame', t: 'Производство', d: 'Изготавливаем окна на профиле выбранной системы — точно по вашим размерам.' },
  { icon: 'hammer', t: 'Доставка и монтаж', d: 'Привозим, поднимаем и устанавливаем по ГОСТ. Убираем мусор за собой.' },
  { icon: 'shield', t: 'Гарантия от 5 лет', d: 'Выдаём гарантию и остаёмся на связи. Возможна рассрочка платежа.' },
];

function Stages() {
  return (
    <section id="etapy" style={{ position: 'relative', overflow: 'hidden', background: 'var(--surface-ink)' }} className="okg-section">
      <img src="photos/stages-bg2.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(18,18,18,.9) 0%, rgba(18,18,18,.84) 50%, rgba(18,18,18,.92) 100%)' }} />
      <div className="okg-container" style={{ position: 'relative' }}>
        <SectionHead light eyebrow="Как мы работаем" title="Этапы работы"
          sub="Прозрачный процесс от звонка до гарантии — вы всегда знаете, что происходит на каждом шаге." />
        <div className="okg-grid okg-grid-3">
          {STAGES.map((s, i) => (
            <Reveal key={s.t} delay={(i % 3) * 0.06}>
              <div onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.background = 'rgba(255,255,255,.08)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.background = 'rgba(255,255,255,.04)'; }}
                onMouseMove={spotMove} className="okg-spot"
                style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 12, padding: 26, height: '100%', background: 'rgba(255,255,255,.04)', border: '1px solid var(--border-on-dark)', borderRadius: 'var(--r-lg)', transition: 'transform var(--dur) var(--ease), background var(--dur)' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <span style={{ width: 50, height: 50, borderRadius: 'var(--r-md)', background: 'var(--okg-terra-600)', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={s.icon} size={24} /></span>
                  <span style={{ fontSize: 40, fontWeight: 800, color: 'rgba(255,255,255,.14)', lineHeight: 1 }}>{String(i + 1).padStart(2, '0')}</span>
                </div>
                <h3 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: '#fff' }}>{s.t}</h3>
                <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: 'rgba(255,255,255,.66)' }}>{s.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Profiles, WhatsIncluded, Obsada, Stages });