/* ================================================================
   Components A - Header, Hero, Form, Quiz
   ================================================================ */
const { useState, useEffect, useRef, useCallback } = React;

/* ---------- Nav data ---------- */
const NAV = [
  { href: '#categories', label: 'Что шьём' },
  { href: '#why', label: 'Преимущества' },
  { href: '#how', label: 'Как мы работаем' },
  { href: '#faq', label: 'FAQ' },
  { href: '#contact', label: 'Контакты' },
];

/* ---------- Counter ---------- */
function Counter({ value, suffix = '', prefix = '', noSep = false, duration = 1700 }) {
  const ref = useRef(null);
  const [n, setN] = useState(0);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let started = false;
    let rafId;
    const run = () => {
      const start = performance.now();
      const step = (now) => {
        const t = Math.min(1, (now - start) / duration);
        const eased = 1 - Math.pow(1 - t, 3);
        setN(Math.round(value * eased));
        if (t < 1) rafId = requestAnimationFrame(step);
      };
      rafId = requestAnimationFrame(step);
    };
    if (typeof IntersectionObserver === 'undefined') { run(); return; }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          run();
          obs.disconnect();
        }
      });
    }, { threshold: 0.3 });
    obs.observe(el);
    return () => { obs.disconnect(); if (rafId) cancelAnimationFrame(rafId); };
  }, [value, duration]);
  const formatted = noSep ? String(n) : n.toLocaleString('ru-RU').replace(/,/g, ' ').replace(/\u00a0/g, ' ');
  return <span ref={ref}>{prefix}{formatted}{suffix}</span>;
}

/* ---------- Reusable: response badge ---------- */
function RespBadge({ dark }) {
  return (
    <span className={`resp-badge${dark ? ' on-dark' : ''}`}>
      <Ico.Clock style={{ width: 13, height: 13 }} />
      Ответ за 30 минут
    </span>
  );
}

/* ---------- Reusable: brand logo ---------- */
function BrandLogo({ inFooter }) {
  return (
    <a href="#top" className={`logo${inFooter ? ' footer-logo' : ''}`}>
      <img
        src={inFooter ? 'assets/logo-white.png' : 'assets/logo.png'}
        alt="DanaBaby"
        className="logo-img"
      />
    </a>
  );
}

/* ---------- Header ---------- */
function Header({ scrolled, onOpenMenu, onOpenQuiz }) {
  return (
    <header className={`header ${scrolled ? 'scrolled' : ''}`}>
      <div className="container">
        <div className="header-inner">
          <BrandLogo />
          <nav className="nav">
            {NAV.map((n) => <a key={n.href} href={n.href}>{n.label}</a>)}
          </nav>
          <div className="header-contacts">
            <a className="header-phone" href="tel:+996779766666">
              <Ico.Phone style={{ width: 15, height: 15, color: 'var(--brand)' }} />
              +996 779 766 666
            </a>
            <a href="https://wa.me/996779766666" target="_blank" rel="noopener" className="icon-btn" aria-label="WhatsApp"><Ico.WA /></a>
            <a href="https://t.me/+996779766666" target="_blank" rel="noopener" className="icon-btn" aria-label="Telegram"><Ico.TG /></a>
            <button onClick={onOpenQuiz} className="btn btn-primary btn-sm">Рассчитать пошив</button>
            <button className="icon-btn menu-toggle" onClick={onOpenMenu} aria-label="Меню"><Ico.Menu /></button>
          </div>
        </div>
      </div>
    </header>
  );
}

/* ---------- MobileMenu ---------- */
function MobileMenu({ open, onClose, onOpenQuiz }) {
  return (
    <div className={`mobile-menu ${open ? 'open' : ''}`} onClick={onClose}>
      <div className="mobile-menu-panel" onClick={(e) => e.stopPropagation()}>
        <BrandLogo />
        <button className="mobile-menu-close" onClick={onClose}><Ico.X /></button>
        <nav className="nav-mobile">
          {NAV.map((n) => <a key={n.href} href={n.href} onClick={onClose}>{n.label}</a>)}
        </nav>
        <div style={{ marginTop: 20, display: 'flex', gap: 10, flexDirection: 'column' }}>
          <button className="btn btn-primary" onClick={() => { onClose(); onOpenQuiz(); }}>
            Рассчитать пошив
            <span className="cta-arrow"><Ico.ArrowRight /></span>
          </button>
          <div style={{ display: 'flex', gap: 10 }}>
            <a href="https://wa.me/996779766666" target="_blank" rel="noopener" className="btn btn-wa" style={{ flex: 1 }}>
              <Ico.WA style={{ width: 18, height: 18 }} /> WhatsApp
            </a>
            <a href="https://t.me/+996779766666" target="_blank" rel="noopener" className="btn btn-tg" style={{ flex: 1 }}>
              <Ico.TG style={{ width: 18, height: 18 }} /> Telegram
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Hero ---------- */
function Hero({ onOpenQuiz }) {
  return (
    <section className="hero" id="top">
      <div className="hero-bg"></div>
      <div className="hero-blob a"></div>
      <div className="hero-blob b"></div>
      <div className="container">
        <div className="hero-grid">
          <div className="hero-left">
            <h1 className="hero-title">
              Пошив детской одежды <span style={{ color: '#d30d28' }}>под вашим брендом</span>
            </h1>
            <p className="hero-sub">
              Полный цикл OEM-производства: лекала, образец, отшив партии,
              <span className="hero-sub-em"> ваши лейблы и упаковка</span>.
              Работаем с готовыми ТЗ и помогаем создать модель с нуля.
              Организуем доставку по России и СНГ.
            </p>
            <div className="hero-moq">Минимальная партия <b>от 150 единиц</b></div>
            <div className="hero-actions" style={{ marginTop: 22 }}>
              <button className="btn btn-primary btn-lg" onClick={onOpenQuiz}>
                <span>Рассчитать стоимость пошива</span>
                <span className="cta-arrow"><Ico.ArrowRight /></span>
              </button>
              <a href="#categories" className="btn btn-ghost btn-lg">
                <span className="cta-arrow"><Ico.Stack /></span>
                <span>Посмотреть, что мы шьём</span>
              </a>
            </div>
            <div className="hero-badges">
              <div className="hero-badge">
                <span className="hero-badge-ico"><Ico.Factory /></span>
                <span>Своя фабрика в Бишкеке</span>
              </div>
              <div className="hero-badge">
                <span className="hero-badge-ico"><Ico.Stack /></span>
                <span>MOQ от 150 ед.</span>
              </div>
              <div className="hero-badge">
                <span className="hero-badge-ico"><Ico.TagLabel /></span>
                <span>Ваш бренд, лейблы, упаковка</span>
              </div>
              <div className="hero-badge">
                <span className="hero-badge-ico"><Ico.SampleCheck /></span>
                <span>Образец до запуска партии</span>
              </div>
            </div>
          </div>
          <div className="hero-right">
            <div className="hero-visual">
              <div className="img-wrap" data-placeholder="assets/hero-baby.jpg → детская одежда / процесс пошива">
                <img src="assets/hero-baby.jpg" alt="OEM-пошив детской одежды DanaBaby Production" onError={(e) => { e.currentTarget.style.display = 'none'; }} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================================================================
   FormSection (form + "use quiz" promo)
   ================================================================ */
function FormSection({ onOpenQuiz }) {
  const [data, setData] = useState({ name: '', phone: '', brief: '', link: '' });
  const [files, setFiles] = useState([]);
  const [sent, setSent] = useState(false);
  const [showMore, setShowMore] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState('');

  const upd = (k) => (e) => setData((d) => ({ ...d, [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    if (!data.name || !data.phone || submitting) return;

    setSubmitting(true);
    setSubmitError('');

    try {
      const commentParts = [
        data.brief ? `Что отшить: ${data.brief}` : '',
        data.link ? `Ссылка на ТЗ: ${data.link}` : '',
        files.length ? `Файлы: ${files.map((f) => f.name).join(', ')}` : '',
      ].filter(Boolean);

      const formData = new FormData();
      formData.append('name', data.name);
      formData.append('phone', data.phone);
      formData.append('city', '');
      formData.append('comment', commentParts.join('\n') || 'Заявка из формы расчёта пошива');
      files.forEach((file) => formData.append('files[]', file));

      const resp = await fetch('/mail.php', {
        method: 'POST',
        headers: { Accept: 'application/json' },
        body: formData,
      });

      if (!resp.ok) throw new Error('send_failed');
      const result = await resp.json().catch(() => ({}));
      if (!result || result.ok !== true) throw new Error('send_failed');

      setSent(true);
    } catch (err) {
      setSubmitError('Не удалось отправить заявку. Попробуйте ещё раз или напишите в WhatsApp.');
    } finally {
      setSubmitting(false);
    }
  };

  const onFiles = (e) => {
    const list = Array.from(e.target.files || []);
    if (list.length) setFiles((f) => [...f, ...list].slice(0, 5));
    e.target.value = '';
  };
  const removeFile = (i) => setFiles((f) => f.filter((_, idx) => idx !== i));

  return (
    <section className="section form-section" id="form">
      <div className="container">
        <div className="form-wrap">
          <div>
            <span className="eyebrow">Расчёт пошива</span>
            <h2>
              Получите <span className="h2-accent">расчёт пошива</span> под ваш бренд - за 30 минут
            </h2>
            <p className="section-sub">
              Пришлите ТЗ, эскиз или фото референса. Менеджер рассчитает стоимость единицы,
              сроки и пакет услуг под вашу задачу.
            </p>
            <ul className="what-you-get">
              <li>Расчёт цены за единицу</li>
              <li>Сроки производства партии</li>
              <li>Рекомендации по тканям и фурнитуре</li>
              <li>Варианты лейблов, бирок и упаковки</li>
              <li>Стоимость и сроки тестового образца</li>
              <li>Условия предоплаты и оплаты партии</li>
              <li>Сертификация ТР ТС 007/2011</li>
              <li>Помощь с маркировкой «Честный знак»</li>
            </ul>
          </div>

          <div className="form-card">
            <div className="form-card-top">
              <div className="form-card-tab">Менеджер на связи</div>
              <RespBadge />
            </div>

            {!sent ? (
              <form onSubmit={submit}>
                <div className="form-grid">
                  <div className="field row2">
                    <label>Имя</label>
                    <input type="text" placeholder="Как к вам обращаться" value={data.name} onChange={upd('name')} required />
                  </div>
                  <div className="field row2">
                    <label>Телефон / WhatsApp</label>
                    <input type="tel" placeholder="+7 ___ ___ __ __" value={data.phone} onChange={upd('phone')} required />
                  </div>

                  {showMore && (
                    <>
                      <div className="field row2">
                        <label>Что хотите отшить <span className="opt">(коротко)</span></label>
                        <textarea
                          rows="3"
                          placeholder="Тип изделия, количество, размер партии, бренд. Например: «боди 0-12 мес, 300 ед., бренд Tilly»"
                          value={data.brief}
                          onChange={upd('brief')}
                        ></textarea>
                      </div>
                      <div className="field row2">
                        <label>Файлы или ссылка на ТЗ <span className="opt">(эскиз / референс / Drive / Dropbox)</span></label>
                        <label className="file-drop">
                          <span className="file-drop-ico"><Ico.Upload /></span>
                          <span>
                            <b>Загрузить файлы</b> или перетащите сюда
                            <br /><span style={{ color: 'var(--muted)', fontSize: 11 }}>PDF, JPG, PNG, AI - до 5 файлов</span>
                          </span>
                          <input type="file" multiple accept=".pdf,.jpg,.jpeg,.png,.ai,.psd,.heic" onChange={onFiles} />
                        </label>
                        {files.length > 0 && (
                          <div className="file-list">
                            {files.map((f, i) => (
                              <span className="file-chip" key={i}>
                                {f.name.length > 22 ? f.name.slice(0, 20) + '…' : f.name}
                                <button type="button" onClick={() => removeFile(i)} aria-label="Удалить">×</button>
                              </span>
                            ))}
                          </div>
                        )}
                        <input
                          type="url"
                          placeholder="…или вставьте ссылку на Google Drive / Dropbox / Figma"
                          value={data.link}
                          onChange={upd('link')}
                          style={{ marginTop: 8 }}
                        />
                      </div>
                    </>
                  )}

                  {!showMore && (
                    <div className="field row2 form-more">
                      <button type="button" className="form-more-btn" onClick={() => setShowMore(true)}>
                        + Прикрепить ТЗ / эскиз / ссылку <span className="opt">(ускорит расчёт)</span>
                      </button>
                    </div>
                  )}
                </div>

                <div className="form-foot">
                  <button type="submit" className="btn btn-primary btn-lg btn-block" disabled={submitting}>
                    {submitting ? 'Отправляем...' : 'Получить расчёт пошива'}
                    <span className="cta-arrow"><Ico.ArrowRight /></span>
                  </button>
                  {submitError && (
                    <p style={{ margin: '2px 0 0', color: '#b8031c', fontSize: 13, fontWeight: 600, textAlign: 'center' }}>
                      {submitError}
                    </p>
                  )}
                  <div className="form-alt">
                    <a href="https://wa.me/996779766666" target="_blank" rel="noopener" className="btn btn-wa">
                      <Ico.WA style={{ width: 16, height: 16 }} /> WhatsApp
                    </a>
                    <a href="https://t.me/+996779766666" target="_blank" rel="noopener" className="btn btn-tg">
                      <Ico.TG style={{ width: 16, height: 16 }} /> Telegram
                    </a>
                  </div>
                  <p className="form-policy">
                    Нажимая кнопку, вы соглашаетесь с <a href="#">политикой конфиденциальности</a>.
                  </p>
                </div>
              </form>
            ) : (
              <div className="form-success">
                <div className="form-success-ico"><Ico.Check /></div>
                <h3 style={{ margin: '0 0 8px', fontSize: 22, fontWeight: 800 }}>Заявка принята</h3>
                <p style={{ color: 'var(--ink-soft)', maxWidth: 380, margin: '0 auto 22px' }}>
                  Менеджер свяжется с вами в течение 30 минут и пришлёт расчёт по вашему ТЗ.
                </p>
                <div className="form-alt" style={{ justifyContent: 'center', maxWidth: 300, margin: '0 auto' }}>
                  <a href="https://wa.me/996779766666" target="_blank" rel="noopener" className="btn btn-wa">
                    <Ico.WA style={{ width: 16, height: 16 }} /> Написать сейчас
                  </a>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================================================================
   QuizModal - 5-step OEM calculator
   ================================================================ */
const QUIZ_STEPS = [
  {
    key: 'item',
    title: 'Что хотите отшить?',
    tag: '1 / 5 · Категория',
    multi: false,
    options: [
      { v: 'bodi', label: 'Боди, распашонки, ползунки', iconPng: 'assets/1.png' },
      { v: 'slip', label: 'Слипы и комбинезоны', iconPng: 'assets/2.png' },
      { v: 'konvert', label: 'Конверты и одеяла на выписку', iconPng: 'assets/3.png' },
      { v: 'dress', label: 'Платья и сарафаны', iconPng: 'assets/4.png' },
      { v: 'kostum', label: 'Сумки, матрасы', iconPng: 'assets/5.png' },
      { v: 'other', label: 'Другое / несколько категорий', iconPng: 'assets/6.png' },
    ],
  },
  {
    key: 'qty',
    title: 'Какой объём планируете?',
    tag: '2 / 5 · Тираж',
    multi: false,
    options: [
      { v: '150-300', label: '150-300 ед. (тест модели)', ico: Ico.QuizQty },
      { v: '300-500', label: '300-500 ед.', ico: Ico.QuizQty },
      { v: '500-1000', label: '500-1 000 ед.', ico: Ico.QuizQty },
      { v: '1000+', label: '1 000+ ед. (серия)', ico: Ico.QuizQty },
    ],
  },
  {
    key: 'patterns',
    title: 'Есть ли у вас лекала или эскиз?',
    tag: '3 / 5 · Лекала',
    multi: false,
    options: [
      { v: 'ready', label: 'Есть готовые лекала', ico: Ico.StepPattern },
      { v: 'sketch', label: 'Есть эскиз или фото референса', ico: Ico.AudPattern },
      { v: 'idea', label: 'Только идея - нужна разработка с нуля', ico: Ico.Sparkles },
    ],
  },
  {
    key: 'when',
    title: 'Когда нужна партия?',
    tag: '4 / 5 · Сроки',
    multi: false,
    options: [
      { v: 'asap', label: 'Чем быстрее, тем лучше', ico: Ico.Clock },
      { v: '1-2m', label: 'Через 1-2 месяца', ico: Ico.QuizDate },
      { v: '2-3m', label: 'Через 2-3 месяца', ico: Ico.QuizDate },
      { v: 'flex', label: 'Сроки гибкие, важна цена', ico: Ico.QuizDate },
    ],
  },
];

const QUIZ_LABELS = {
  item: {
    bodi: 'Боди, распашонки', slip: 'Слипы и комбинезоны', konvert: 'Конверты и одеяла',
    dress: 'Платья и сарафаны', kostum: 'Сумки, матрасы', other: 'Другое',
  },
  qty: {
    '150-300': '150-300 ед.', '300-500': '300-500 ед.',
    '500-1000': '500-1 000 ед.', '1000+': '1 000+ ед.',
  },
  patterns: {
    ready: 'Лекала готовы', sketch: 'Есть эскиз/референс', idea: 'Разработка с нуля',
  },
  when: {
    asap: 'Срочно', '1-2m': 'Через 1-2 мес.', '2-3m': 'Через 2-3 мес.', flex: 'Гибкие сроки',
  },
};

function QuizModal({ open, onClose }) {
  const [step, setStep] = useState(0);
  const [answers, setAnswers] = useState({});
  const [contact, setContact] = useState({ name: '', phone: '', link: '' });
  const [files, setFiles] = useState([]);
  const [done, setDone] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState('');

  // Reset when reopened
  useEffect(() => {
    if (open) {
      setStep(0);
      setAnswers({});
      setContact({ name: '', phone: '', link: '' });
      setFiles([]);
      setDone(false);
      setSubmitting(false);
      setSubmitError('');
    }
  }, [open]);

  // ESC to close
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  // Lock scroll
  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, [open]);

  const totalSteps = QUIZ_STEPS.length + 1; // +1 contact step
  const stepNum = Math.min(step + 1, totalSteps);
  const progress = (stepNum / totalSteps) * 100;

  const pick = (key, v) => {
    setAnswers((a) => ({ ...a, [key]: v }));
    // Auto-advance unless on last quiz step
    setTimeout(() => {
      if (step < QUIZ_STEPS.length) setStep((s) => s + 1);
    }, 220);
  };

  const onFiles = (e) => {
    const list = Array.from(e.target.files || []);
    if (list.length) setFiles((f) => [...f, ...list].slice(0, 5));
    e.target.value = '';
  };
  const removeFile = (i) => setFiles((f) => f.filter((_, idx) => idx !== i));

  const submit = async (e) => {
    e.preventDefault();
    if (!contact.name || !contact.phone || submitting) return;

    setSubmitting(true);
    setSubmitError('');

    try {
      const commentParts = [
        answers.item ? `Категория: ${QUIZ_LABELS.item[answers.item]}` : '',
        answers.qty ? `Тираж: ${QUIZ_LABELS.qty[answers.qty]}` : '',
        answers.patterns ? `Лекала: ${QUIZ_LABELS.patterns[answers.patterns]}` : '',
        answers.when ? `Сроки: ${QUIZ_LABELS.when[answers.when]}` : '',
        contact.link ? `Ссылка на ТЗ: ${contact.link}` : '',
        files.length ? `Файлы: ${files.map((f) => f.name).join(', ')}` : '',
      ].filter(Boolean);

      const formData = new FormData();
      formData.append('name', contact.name);
      formData.append('phone', contact.phone);
      formData.append('city', '');
      formData.append('comment', commentParts.join('\n'));
      files.forEach((file) => formData.append('files[]', file));

      const resp = await fetch('/mail.php', {
        method: 'POST',
        headers: { Accept: 'application/json' },
        body: formData,
      });

      if (!resp.ok) throw new Error('send_failed');
      const data = await resp.json().catch(() => ({}));
      if (!data || data.ok !== true) throw new Error('send_failed');

      setDone(true);
    } catch (err) {
      setSubmitError('Не удалось отправить заявку. Попробуйте ещё раз или напишите в WhatsApp.');
    } finally {
      setSubmitting(false);
    }
  };

  const back = () => setStep((s) => Math.max(0, s - 1));

  return (
    <div className={`quiz-overlay${open ? ' open' : ''}`} onClick={onClose}>
      <div className="quiz-modal" onClick={(e) => e.stopPropagation()}>
        <div className="quiz-head">
          <div className="quiz-head-left">
            <span className="quiz-head-mark">
              <img src="assets/favicon_w.png" alt="" />
            </span>
            <div>
              <div className="quiz-head-title">Расчёт пошива под ваш бренд</div>
              <div className="quiz-head-sub">5 шагов · ~2 минуты · ответ за 30 мин</div>
            </div>
          </div>
          <button className="quiz-close" onClick={onClose} aria-label="Закрыть"><Ico.X /></button>
        </div>
        <div className="quiz-progress">
          <div className="quiz-progress-bar" style={{ width: `${progress}%` }}></div>
        </div>

        <div className="quiz-body">
          {done ? (
            <div className="quiz-done">
              <div className="form-success-ico"><Ico.Check /></div>
              <h3>Заявка принята</h3>
              <p>
                Менеджер свяжется с вами в течение 30 минут и пришлёт расчёт по вашему ТЗ
                + рекомендации по тканям, фурнитуре и срокам.
              </p>
              <div className="quiz-done-row">
                <a href="https://wa.me/996779766666" target="_blank" rel="noopener" className="btn btn-wa">
                  <Ico.WA style={{ width: 16, height: 16 }} /> Написать сразу
                </a>
                <a href="https://t.me/+996779766666" target="_blank" rel="noopener" className="btn btn-tg">
                  <Ico.TG style={{ width: 16, height: 16 }} /> Telegram
                </a>
              </div>
            </div>
          ) : step < QUIZ_STEPS.length ? (
            <div>
              <div className="quiz-step-tag">{QUIZ_STEPS[step].tag}</div>
              <h3 className="quiz-step-title">{QUIZ_STEPS[step].title}</h3>
              <div className={`quiz-opts${QUIZ_STEPS[step].options.length === 3 ? ' one-col' : ''}`}>
                {QUIZ_STEPS[step].options.map((opt) => {
                  const Icon = opt.ico;
                  const selected = answers[QUIZ_STEPS[step].key] === opt.v;
                  return (
                    <button
                      key={opt.v}
                      type="button"
                      className={`quiz-opt${selected ? ' selected' : ''}`}
                      onClick={() => pick(QUIZ_STEPS[step].key, opt.v)}
                    >
                      <span className={`quiz-opt-ico${opt.iconPng ? ' has-png' : ''}`}>
                        {opt.iconPng ? (
                          <img src={opt.iconPng} alt="" />
                        ) : (
                          <Icon />
                        )}
                      </span>
                      <span>{opt.label}</span>
                      <span className="quiz-opt-tail"><Ico.Check /></span>
                    </button>
                  );
                })}
              </div>
            </div>
          ) : (
            <div>
              <div className="quiz-step-tag">5 / 5 · Контакт</div>
              <h3 className="quiz-step-title">Куда отправить расчёт?</h3>
              <form className="quiz-form" id="quiz-contact-form" onSubmit={submit}>
                <div className="field">
                  <label>Имя</label>
                  <input
                    type="text"
                    placeholder="Как к вам обращаться"
                    value={contact.name}
                    onChange={(e) => setContact((c) => ({ ...c, name: e.target.value }))}
                    required
                  />
                </div>
                <div className="field">
                  <label>Телефон / WhatsApp</label>
                  <input
                    type="tel"
                    placeholder="+7 ___ ___ __ __"
                    value={contact.phone}
                    onChange={(e) => setContact((c) => ({ ...c, phone: e.target.value }))}
                    required
                  />
                </div>
                <div className="field">
                  <label>ТЗ / эскиз <span className="opt">(файлы или ссылка)</span></label>
                  <label className="file-drop">
                    <span className="file-drop-ico"><Ico.Upload /></span>
                    <span><b>Прикрепить файлы</b> - PDF, JPG, PNG, AI</span>
                    <input type="file" multiple accept=".pdf,.jpg,.jpeg,.png,.ai,.psd,.heic" onChange={onFiles} />
                  </label>
                  {files.length > 0 && (
                    <div className="file-list">
                      {files.map((f, i) => (
                        <span className="file-chip" key={i}>
                          {f.name.length > 22 ? f.name.slice(0, 20) + '…' : f.name}
                          <button type="button" onClick={() => removeFile(i)} aria-label="Удалить">×</button>
                        </span>
                      ))}
                    </div>
                  )}
                  <input
                    type="url"
                    placeholder="…или ссылка на Google Drive / Dropbox / Figma"
                    value={contact.link}
                    onChange={(e) => setContact((c) => ({ ...c, link: e.target.value }))}
                    style={{ marginTop: 8 }}
                  />
                </div>

                <div className="quiz-summary">
                  <b>Ваш запрос: </b>
                  {answers.item && <>{QUIZ_LABELS.item[answers.item]} · </>}
                  {answers.qty && <>{QUIZ_LABELS.qty[answers.qty]} · </>}
                  {answers.patterns && <>{QUIZ_LABELS.patterns[answers.patterns]} · </>}
                  {answers.when && <>{QUIZ_LABELS.when[answers.when]}</>}
                </div>
                {submitError && (
                  <p style={{ marginTop: 10, color: '#b8031c', fontSize: 13, fontWeight: 600 }}>{submitError}</p>
                )}
              </form>
            </div>
          )}
        </div>

        {!done && (
          <div className="quiz-foot">
            <button className="quiz-back" type="button" onClick={back} disabled={step === 0}>
              <Ico.ArrowLeft style={{ width: 14, height: 14 }} /> Назад
            </button>
            <div className="quiz-next-wrap">
              <RespBadge />
              {step >= QUIZ_STEPS.length ? (
                <button type="submit" form="quiz-contact-form" className="btn btn-primary" disabled={submitting}>
                  {submitting ? 'Отправляем...' : 'Получить расчёт'}
                  <span className="cta-arrow"><Ico.ArrowRight /></span>
                </button>
              ) : (
                <button
                  type="button"
                  className="btn btn-primary"
                  onClick={() => answers[QUIZ_STEPS[step].key] && setStep((s) => s + 1)}
                  disabled={!answers[QUIZ_STEPS[step].key]}
                  style={{ opacity: answers[QUIZ_STEPS[step].key] ? 1 : 0.4 }}
                >
                  Дальше
                  <span className="cta-arrow"><Ico.ArrowRight /></span>
                </button>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* Export to window for use across files */
Object.assign(window, {
  Counter, RespBadge, BrandLogo,
  Header, MobileMenu, Hero, FormSection, QuizModal, NAV,
});