// axios estate — sections (header, hero, advantages, projects, map, about, faq, contact, footer, fab, drawer, modal, cookie)

const { useState, useEffect, useRef, Fragment } = React;

// ---------- Logo ----------
function Logo() {
  return <span className="logo">axios:</span>;
}

// ---------- Header ----------
window.Header = function Header({ onContact }) {
  return (
    <header className="header">
      <div className="container header__inner">
        <div><a href="#top"><Logo /></a></div>
        <nav className="header__nav">
          {window.AXIOS_NAV.map(n => <a key={n.href} href={n.href}>{n.label}</a>)}
        </nav>
        <div className="header__right">
          <a className="header__phone" href="tel:+74951234567">+7 (495) 123-45-67</a>
          <button className="btn btn--secondary btn--sm" onClick={onContact}>Заказать звонок</button>
        </div>
      </div>
    </header>
  );
};

// ---------- Hero ----------
window.Hero = function Hero({ variant = 'invest', onPrimary }) {
  const v = window.AXIOS_HERO_VARIANTS[variant] || window.AXIOS_HERO_VARIANTS.invest;
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero__grid">
          <div className="hero__copy">
            <div className="hero__eyebrow">{v.eyebrow}</div>
            <h1 className="hero__h1">{v.h1.replace('\n', ' ')}</h1>
            <p className="hero__sub">{v.sub}</p>
            <div className="hero__cta-row">
              <button className="btn btn--primary btn--lg" onClick={onPrimary}>
                {v.cta} <window.Icon name="arrow-right" size={14} />
              </button>
              <a className="btn btn--ghost btn--lg" href="#projects">Смотреть проекты</a>
            </div>
          </div>
          <div className="hero__visual">
            <window.HeroVisual src={window.AXIOS_HERO_IMAGE} alt="Лимасол, Кипр — :sky tower" />
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- Advantages ----------
window.Advantages = function Advantages() {
  return (
    <div className="container" style={{ paddingTop: 0, paddingBottom: 0 }}>
      <div className="adv">
        {window.AXIOS_ADVANTAGES.map((a, i) => (
          <div className="adv__cell" key={i}>
            <div className="adv__num">{a.num}</div>
            <div className="adv__label">{a.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ---------- Projects ----------
window.Projects = function Projects({ cardStyle = 'grid', onOpenProject, onContact }) {
  const [tier, setTier] = useState('all');
  const projects = window.AXIOS_PROJECTS.filter(p =>
    tier === 'all' ? true : p.tier === tier
  );
  const tiers = [
    { id: 'all', label: 'Все' },
    { id: 'элитарный', label: 'Элитарный' },
    { id: 'доступная роскошь', label: 'Доступная роскошь' },
    { id: 'комфорт', label: 'Комфорт' },
  ];

  return (
    <section id="projects">
      <div className="container">
        <div className="section-eyebrow">
          <span className="section-eyebrow__num">01 / проекты</span>
          <span className="section-eyebrow__line" />
          <span className="t-overline" style={{ color: 'var(--text-2)' }}>{projects.length} объект{projects.length === 1 ? '' : projects.length < 5 ? 'а' : 'ов'} · кипр</span>
        </div>
        <div className="projects__head">
          <div>
            <h2 className="t-h2" style={{ margin: 0, marginBottom: 16 }}>Активные проекты bbf: на Кипре</h2>
            <p className="projects__intro">
              Шесть представительных объектов из портфолио bbf:. От премиум-башен на набережной Лимасола до студий с входом от 280&nbsp;000&nbsp;€ для пакета ВНЖ.
            </p>
          </div>
          <div className="projects__filters">
            {tiers.map(t => (
              <button
                key={t.id}
                className={`chip ${tier === t.id ? 'chip--active' : ''}`}
                onClick={() => setTier(t.id)}
              >{t.label}</button>
            ))}
          </div>
        </div>
        <div className={`proj-grid proj-grid--${cardStyle}`}>
          {projects.map((p, i) => (
            <ProjectCard key={p.id} project={p} seed={i} onOpen={() => onOpenProject(p)} cardStyle={cardStyle} />
          ))}
        </div>
      </div>
    </section>
  );
};

function ProjectCard({ project, seed, onOpen, cardStyle }) {
  return (
    <a className="proj-card" href={`projects/${project.id}.html`}>
      <div className="proj-card__visual">
        <window.ProjectVisual seed={seed + 1} src={project.cover} alt={project.name} />
      </div>
      <div className="proj-card__body">
        <div className="proj-card__title-row">
          <span className="proj-card__title">{project.name}</span>
          <span className="proj-card__city">{project.city}</span>
        </div>
        <div className="t-caption">{project.short}</div>
        {cardStyle !== 'minimal' && (
          <div className="proj-card__meta">
            <div className="proj-card__meta-item">
              <span className="proj-card__meta-label">Тип</span>
              <span className="proj-card__meta-value">{project.type}</span>
            </div>
            <div className="proj-card__meta-item">
              <span className="proj-card__meta-label">Сдача</span>
              <span className="proj-card__meta-value">{project.completion}</span>
            </div>
            <div className="proj-card__meta-item">
              <span className="proj-card__meta-label">Доходность</span>
              <span className="proj-card__meta-value">{project.yieldRange}</span>
            </div>
          </div>
        )}
        <div className="proj-card__price-row">
          <div>
            <span className="proj-card__price-from">от</span>
            <span className="proj-card__price">€&thinsp;{project.priceFromEur.toLocaleString('ru-RU')}</span>
          </div>
          <span className="t-caption" style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
            Открыть <window.Icon name="arrow-up-right" size={12} />
          </span>
        </div>
      </div>
    </a>
  );
}

// ---------- Map ----------
window.MapSection = function MapSection({ onOpenProject }) {
  const cities = [
    { name: 'Лимасол', count: window.AXIOS_PROJECTS.filter(p => p.city === 'Лимасол').length, x: 55, y: 65 },
    { name: 'Пафос', count: window.AXIOS_PROJECTS.filter(p => p.city === 'Пафос').length, x: 18, y: 70 },
    { name: 'Ларнака', count: window.AXIOS_PROJECTS.filter(p => p.city === 'Ларнака').length, x: 78, y: 60 },
    { name: 'Никосия', count: 0, x: 58, y: 45 },
  ];
  const airports = [
    { name: 'LCA', x: 80, y: 62 },
    { name: 'PFO', x: 14, y: 72 },
  ];

  return (
    <section id="location">
      <div className="container">
        <div className="section-eyebrow">
          <span className="section-eyebrow__num">02 / расположение</span>
          <span className="section-eyebrow__line" />
        </div>
        <h2 className="t-h2" style={{ margin: 0, marginBottom: 16 }}>География на острове</h2>
        <p className="projects__intro" style={{ marginBottom: 40 }}>
          Все проекты на Кипре. Лимасол — основной фокус, два международных аэропорта в часе езды от любого объекта.
        </p>
        <div className="map">
          <div className="map__svg-wrap">
            <window.CyprusMap />
            {cities.map((c, i) => (
              <div className="map__pin map__pin--city" key={i} style={{ left: `${c.x}%`, top: `${c.y}%` }}>
                <span className="map__pin-dot" />
                <span className="map__pin-label">{c.name}</span>
              </div>
            ))}
            {airports.map((a, i) => (
              <div className="map__pin map__pin--airport" key={`a-${i}`} style={{ left: `${a.x}%`, top: `${a.y - 4}%` }}>
                <span className="map__pin-dot" />
                <span className="map__pin-label" style={{ background: '#fff' }}>✈ {a.name}</span>
              </div>
            ))}
            {window.AXIOS_PROJECTS.map((p, i) => (
              <div
                className="map__pin"
                key={p.id}
                style={{ left: `${p.coords.x + (i % 3) * 1.5}%`, top: `${p.coords.y + (i % 2) * 3 + 3}%` }}
                onClick={() => onOpenProject(p)}
              >
                <span className="map__pin-dot" />
                <span className="map__pin-label">{p.name}</span>
              </div>
            ))}
          </div>
          <div className="map__side">
            <div>
              <div className="t-overline" style={{ color: 'var(--text-2)', marginBottom: 12 }}>Города и проекты</div>
              <div className="map__cities">
                {cities.filter(c => c.count > 0).map((c, i) => (
                  <div className="map__city" key={i}>
                    <span className="map__city-name">{c.name}</span>
                    <span className="map__city-count">{c.count} объект{c.count === 1 ? '' : c.count < 5 ? 'а' : 'ов'}</span>
                    <span className="t-caption">→</span>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="t-overline" style={{ color: 'var(--text-2)', marginBottom: 12 }}>Транспорт</div>
              <div className="t-body" style={{ color: 'var(--text-2)', lineHeight: 1.65 }}>
                Два международных аэропорта — Ларнака (LCA) и Пафос (PFO) — обеспечивают прямую связь с 40+ странами. От любого нашего проекта до ближайшего аэропорта — не более 60 минут на машине.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- About ----------
window.About = function About() {
  return (
    <section id="about">
      <div className="container">
        <div className="section-eyebrow">
          <span className="section-eyebrow__num">03 / о компании</span>
          <span className="section-eyebrow__line" />
        </div>
        <div className="about">
          <div>
            <h2 className="t-h2" style={{ margin: 0, marginBottom: 24 }}>axios: — российское представительство bbf:</h2>
            <p className="about__text">
              <strong>bbf:</strong> — застройщик и девелопер №1 на Кипре с долей рынка <strong>20%</strong> по новому жилью. Построены и проданы сотни объектов в Лимасоле, Пафосе, Ларнаке и Никосии. Сервис одного окна: проектирование, строительство, продажи, аренда, управление, юридическое сопровождение.
            </p>
            <p className="about__text" style={{ marginTop: 16 }}>
              <strong>axios:</strong> — официальный российский партнёр bbf:. Мы работаем с покупателями из РФ и СНГ: подбор объекта, оформление ВНЖ, KYC, открытие счёта в кипрском банке, рассрочка от застройщика, передача в аренду после покупки.
            </p>
          </div>
          <div className="counters">
            <div className="counter"><span className="counter__num">185+</span><span className="counter__label">проектов в портфолио bbf:</span></div>
            <div className="counter"><span className="counter__num">€3.9 млрд</span><span className="counter__label">общая стоимость продаж</span></div>
            <div className="counter"><span className="counter__num">1.4M м²</span><span className="counter__label">продаваемая площадь</span></div>
            <div className="counter"><span className="counter__num">2007</span><span className="counter__label">год основания bbf:</span></div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- FAQ ----------
window.FAQ = function FAQ({ onContact }) {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq">
      <div className="container">
        <div className="section-eyebrow">
          <span className="section-eyebrow__num">04 / faq</span>
          <span className="section-eyebrow__line" />
        </div>
        <h2 className="t-h2" style={{ margin: 0, marginBottom: 48, textAlign: 'center' }}>Частые вопросы</h2>
        <div className="faq">
          {window.AXIOS_FAQ.map((item, i) => (
            <div className={`faq__item ${open === i ? 'faq__item--open' : ''}`} key={i}>
              <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{item.q}</span>
                <span className="faq__q-icon" />
              </button>
              <div className="faq__a">{item.a}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 48 }}>
          <button className="btn btn--secondary btn--lg" onClick={onContact}>
            У меня остались вопросы <window.Icon name="arrow-right" size={14} />
          </button>
        </div>
      </div>
    </section>
  );
};

// ---------- Contact / Form ----------
window.LeadForm = function LeadForm({ onSubmit, projectId, compact = false, embedded = false }) {
  const [form, setForm] = useState({ name: '', phone: '', email: '', topic: 'select', message: '', consent: false });
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.phone || !form.consent || form.topic === 'select') return;
    onSubmit({ ...form, projectId });
  };

  return (
    <form className="form-grid" onSubmit={submit}>
      <div className="field">
        <label className="field__label">Как к вам обращаться *</label>
        <input className="field__input" placeholder="Имя" value={form.name} onChange={set('name')} required />
      </div>
      <div className="field">
        <label className="field__label">Телефон *</label>
        <input className="field__input" placeholder="+7 (___) ___-__-__" value={form.phone} onChange={set('phone')} required />
      </div>
      {!compact && (
        <div className="field">
          <label className="field__label">Email</label>
          <input type="email" className="field__input" placeholder="вы@домен.ру" value={form.email} onChange={set('email')} />
        </div>
      )}
      <div className="field">
        <label className="field__label">Тема обращения *</label>
        <select className="field__input" value={form.topic} onChange={set('topic')} required>
          <option value="select" disabled>Выберите тему</option>
          <option value="property">Подобрать недвижимость</option>
          <option value="prp">Условия ВНЖ</option>
          <option value="payment">Условия покупки и оплаты</option>
          <option value="rent">Передача в аренду</option>
          <option value="other">Другое</option>
        </select>
      </div>
      {!compact && (
        <div className="field form-grid__full">
          <label className="field__label">Сообщение</label>
          <textarea className="field__input field__input--block" rows="3" placeholder="Кратко опишите запрос — необязательно" value={form.message} onChange={set('message')} />
        </div>
      )}
      <div className="form-actions">
        <label className="checkbox">
          <input type="checkbox" checked={form.consent} onChange={set('consent')} />
          <span className="checkbox__box">
            <svg width="10" height="10" viewBox="0 0 10 10"><polyline points="2,5 4,7 8,3" fill="none" stroke="#fff" strokeWidth="1.5" /></svg>
          </span>
          <span>Согласен на <a href="#" style={{ color: 'var(--text)', textDecoration: 'underline', textUnderlineOffset: 2 }}>обработку персональных данных</a></span>
        </label>
        <button type="submit" className="btn btn--primary btn--lg" disabled={!form.name || !form.phone || !form.consent || form.topic === 'select'}>
          Отправить заявку <window.Icon name="arrow-right" size={14} />
        </button>
      </div>
      <div className="form-meta form-grid__full">Ответим в течение 30 минут в рабочее время. Часовой пояс — Москва, GMT+3.</div>
    </form>
  );
};

window.Contact = function Contact({ onSubmit }) {
  return (
    <section id="contact">
      <div className="container">
        <div className="section-eyebrow">
          <span className="section-eyebrow__num">05 / контакты</span>
          <span className="section-eyebrow__line" />
        </div>
        <div className="contact">
          <div className="contact__info">
            <h2 className="t-h2" style={{ margin: 0 }}>Связаться с командой</h2>
            <p className="t-body-lg" style={{ color: 'var(--text-2)', margin: 0 }}>
              Расскажите о цели — ВНЖ, аренда, покупка для семьи. В ответ пришлём короткий разбор по подходящим объектам и пакету услуг.
            </p>
            <div className="contact__channels">
              <div className="contact__channel">
                <span className="contact__channel-label">Москва</span>
                <a className="contact__channel-value" href="tel:+74951234567">+7 (495) 123-45-67</a>
              </div>
              <div className="contact__channel">
                <span className="contact__channel-label">WhatsApp</span>
                <a className="contact__channel-value" href="https://wa.me/74951234567">+7 (495) 123-45-67</a>
              </div>
              <div className="contact__channel">
                <span className="contact__channel-label">Telegram</span>
                <a className="contact__channel-value" href="https://t.me/axios_estate">@axios_estate</a>
              </div>
              <div className="contact__channel">
                <span className="contact__channel-label">Email</span>
                <a className="contact__channel-value" href="mailto:info@axios.estate">info@axios.estate</a>
              </div>
            </div>
          </div>
          <div>
            <window.LeadForm onSubmit={onSubmit} embedded />
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- Footer ----------
window.Footer = function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__inner">
          <div className="footer__col">
            <Logo />
            <div className="t-caption" style={{ marginTop: 8, maxWidth: 280 }}>
              Российское представительство bbf:. Недвижимость на Кипре: подбор, ВНЖ, сопровождение сделки, передача в аренду.
            </div>
          </div>
          <div className="footer__col">
            <h4>Навигация</h4>
            {window.AXIOS_NAV.map(n => <a key={n.href} href={n.href}>{n.label}</a>)}
          </div>
          <div className="footer__col">
            <h4>Контакты</h4>
            <a href="tel:+74951234567">+7 (495) 123-45-67</a>
            <a href="mailto:info@axios.estate">info@axios.estate</a>
            <a href="https://t.me/axios_estate">Telegram @axios_estate</a>
            <a href="https://wa.me/74951234567">WhatsApp</a>
          </div>
          <div className="footer__col">
            <h4>Юр. информация</h4>
            <a href="#">Политика конфиденциальности</a>
            <a href="#">Согласие на обработку ПД</a>
            <a href="#">Cookie</a>
          </div>
        </div>
        <div className="footer__legal">
          <span>ООО «Аксиос Эстейт» · ИНН 7700000000 · ОГРН 1000000000000</span>
          <span>© 2026 axios:estate</span>
        </div>
      </div>
    </footer>
  );
};

// ---------- FAB ----------
window.FAB = function FAB({ onContact }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="fab">
      {open && (
        <div className="fab__pop">
          <a href="tel:+74951234567" onClick={() => setOpen(false)}>
            <span>Позвонить</span>
            <span>+7 495</span>
          </a>
          <a href="https://wa.me/74951234567" onClick={() => setOpen(false)}>
            <span>WhatsApp</span>
            <span>чат</span>
          </a>
          <a href="https://t.me/axios_estate" onClick={() => setOpen(false)}>
            <span>Telegram</span>
            <span>@axios</span>
          </a>
          <a onClick={(e) => { e.preventDefault(); setOpen(false); onContact(); }} href="#">
            <span>Заказать звонок</span>
            <span>форма</span>
          </a>
        </div>
      )}
      <button className="fab__btn" onClick={() => setOpen(o => !o)}>
        {open ? 'Закрыть' : 'Связаться'}
        {!open && <window.Icon name="message" size={14} />}
      </button>
    </div>
  );
};

// ---------- Project Drawer ----------
window.ProjectDrawer = function ProjectDrawer({ project, onClose, onContact }) {
  const open = !!project;
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    if (open) window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  return (
    <>
      <div className={`drawer-backdrop ${open ? 'drawer-backdrop--open' : ''}`} onClick={onClose} />
      <div className={`drawer ${open ? 'drawer--open' : ''}`}>
        {project && (
          <>
            <div className="drawer__head">
              <div>
                <div className="t-overline" style={{ color: 'var(--text-2)' }}>{project.city} · {project.tier}</div>
                <div className="t-h3" style={{ marginTop: 4 }}>{project.name}</div>
              </div>
              <button className="drawer__close" onClick={onClose}><window.Icon name="close" size={20} /></button>
            </div>
            <div className="drawer__body">
              <div className="drawer__hero">
                <window.ProjectVisual seed={window.AXIOS_PROJECTS.findIndex(p => p.id === project.id) + 1} src={project.cover} alt={project.name} />
              </div>
              <div className="drawer__section">
                <h3>Описание</h3>
                <p className="t-body-lg" style={{ color: 'var(--text-2)', margin: 0 }}>{project.long}</p>
              </div>
              <div className="drawer__section">
                <h3>Ключевые параметры</h3>
                <div className="drawer__params">
                  <div className="drawer__param"><span className="drawer__param-label">Тип</span><span className="drawer__param-value">{project.type}</span></div>
                  <div className="drawer__param"><span className="drawer__param-label">Юниты</span><span className="drawer__param-value">{project.units}</span></div>
                  <div className="drawer__param"><span className="drawer__param-label">Площадь</span><span className="drawer__param-value">{project.area}</span></div>
                  <div className="drawer__param"><span className="drawer__param-label">Типология</span><span className="drawer__param-value" style={{ fontFamily: 'Inter', fontSize: 13 }}>{project.typology}</span></div>
                  <div className="drawer__param"><span className="drawer__param-label">Сдача</span><span className="drawer__param-value">{project.completion}</span></div>
                  <div className="drawer__param"><span className="drawer__param-label">Доходность</span><span className="drawer__param-value">{project.yieldRange}</span></div>
                </div>
              </div>
              <div className="drawer__section">
                <h3>Цена</h3>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                  <span className="t-overline" style={{ color: 'var(--text-2)' }}>от</span>
                  <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em' }}>
                    €&thinsp;{project.priceFromEur.toLocaleString('ru-RU')}
                  </span>
                </div>
                <div className="t-caption" style={{ marginTop: 8 }}>
                  Рассрочка от застройщика 30/40/30 (резерв / по этапам / при сдаче). Подходит для пакета ВНЖ от 300&nbsp;000&nbsp;€.
                </div>
              </div>
              <div className="drawer__section">
                <h3>Галерея</h3>
                <div className="drawer__gallery">
                  {(project.gallery && project.gallery.length > 0
                    ? project.gallery
                    : [1,2,3,4,5,6].map(n => null)
                  ).map((u, n) => (
                    <div key={n}>
                      <window.ProjectVisual
                        seed={window.AXIOS_PROJECTS.findIndex(p => p.id === project.id) * 7 + n + 1}
                        src={u}
                        alt={`${project.name} — фото ${n + 1}`}
                      />
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div className="drawer__cta-row">
              <button className="btn btn--primary btn--lg" style={{ flex: 1 }} onClick={() => onContact(project.id)}>
                Связаться по проекту <window.Icon name="arrow-right" size={14} />
              </button>
              <button className="btn btn--secondary btn--lg" onClick={() => onContact(project.id, 'pdf')}>
                <window.Icon name="download" size={14} /> Скачать презентацию
              </button>
            </div>
          </>
        )}
      </div>
    </>
  );
};

// ---------- Contact Modal ----------
window.ContactModal = function ContactModal({ open, onClose, onSubmit, projectId, formVariant = 'modal' }) {
  // formVariant: modal / drawer / (inline handled separately)
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    if (open) window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  if (formVariant === 'drawer') {
    return (
      <>
        <div className={`drawer-backdrop ${open ? 'drawer-backdrop--open' : ''}`} onClick={onClose} />
        <div className={`drawer ${open ? 'drawer--open' : ''}`} style={{ width: 520 }}>
          <div className="drawer__head">
            <div>
              <div className="t-overline" style={{ color: 'var(--text-2)' }}>заявка</div>
              <div className="t-h3" style={{ marginTop: 4 }}>Связаться с командой</div>
            </div>
            <button className="drawer__close" onClick={onClose}><window.Icon name="close" size={20} /></button>
          </div>
          <div className="drawer__body">
            <div className="drawer__section" style={{ borderBottom: 0 }}>
              <window.LeadForm onSubmit={onSubmit} projectId={projectId} />
            </div>
          </div>
        </div>
      </>
    );
  }

  return (
    <div className={`modal-backdrop ${open ? 'modal-backdrop--open' : ''}`} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal__head">
          <div>
            <div className="t-overline" style={{ color: 'var(--text-2)' }}>заявка</div>
            <div className="t-h3" style={{ marginTop: 4 }}>Связаться с командой</div>
          </div>
          <button className="drawer__close" onClick={onClose}><window.Icon name="close" size={20} /></button>
        </div>
        <div className="modal__body">
          <window.LeadForm onSubmit={onSubmit} projectId={projectId} />
        </div>
      </div>
    </div>
  );
};

// ---------- Cookie Banner ----------
window.CookieBanner = function CookieBanner() {
  const [closed, setClosed] = useState(() => localStorage.getItem('axios_cookie') === 'ok');
  if (closed) return null;
  return (
    <div className="cookie">
      <div>
        Мы используем cookie и Yandex.Metrica для аналитики и улучшения сайта. Хранение данных — на серверах в РФ согласно 152-ФЗ. Подробнее в <a href="#" style={{ color: 'var(--text)', textDecoration: 'underline' }}>политике конфиденциальности</a>.
      </div>
      <div className="cookie__actions">
        <button className="btn btn--primary btn--sm" onClick={() => { localStorage.setItem('axios_cookie', 'ok'); setClosed(true); }}>Принять</button>
        <button className="btn btn--ghost btn--sm" onClick={() => setClosed(true)}>Только необходимые</button>
      </div>
    </div>
  );
};

// ---------- Toast ----------
window.Toast = function Toast({ show, message }) {
  return <div className={`toast ${show ? 'toast--show' : ''}`}>
    <window.Icon name="arrow-right" size={14} /> {message}
  </div>;
};