/* ================================================================
   Components B - Catalog, Audience, Why, About, Gallery,
                  NDA, Steps, Docs, FAQ+CTA, Footer
   ================================================================ */

/* ---------- Data ---------- */
const CATEGORIES = [
  {
    img: 'assets/cat-konvert.jpg',
    title: 'Конверты и одеяла на выписку',
    desc: 'Сезонные модели, утеплители на выбор, индивидуальная вышивка и нашивки. Подходит для премиум-сегмента и подарочных линеек.',
  },
  {
    img: 'assets/cat-bodi.jpg',
    title: 'Боди и распашонки',
    desc: 'Базовая линейка для бренда. Интерлок, кулирка, рибана. Ваш принт, ваш лейбл, кастомная упаковка.',
  },
  {
    img: 'assets/cat-slip.jpg',
    title: 'Слипы и комбинезоны',
    desc: 'Модели для новорождённых и малышей. Реализуем ваш дизайн или предложим конструкцию из нашей базы лекал.',
  },
  {
    img: 'assets/cat-platya.jpg',
    title: 'Платья и сарафаны',
    desc: 'Праздничные и повседневные модели. Работаем со сложным кроем, отделкой и декором.',
  },
];

const AUDIENCE = [
  {
    ico: Ico.AudOwnBrand,
    title: 'Своему бренду одежды',
    text: 'Запускаете или развиваете собственную марку детской одежды - отшиваем партии под ваши лейблы, упаковку и фирменный стиль.',
  },
  {
    ico: Ico.AudMarketplace,
    title: 'Селлерам WB и Ozon',
    text: 'Шьём уникальные модели под ваш бренд на маркетплейсе. Помогаем с сертификацией и маркировкой «Честный знак» под отгрузку на ФБО.',
  },
  {
    ico: Ico.AudStores,
    title: 'Детским магазинам и сетям',
    text: 'Производим эксклюзивные линейки под СТМ магазина - отстройка от конкурентов и более высокая маржа на полке.',
  },
  {
    ico: Ico.AudPattern,
    title: 'Дизайнерам и шоурумам',
    text: 'Помогаем запустить пошив детской одежды по вашим эскизам, образцам или лекалам. Обсуждаем детали модели, материалы, отделку и подбираем оптимальный формат производства.',
  },
  {
    ico: Ico.AudStartup,
    title: 'Стартапам и новым брендам',
    text: 'Запускаем с нуля: помогаем с лекалами, выбором тканей, расчётом себестоимости и отшивом тестовой партии.',
  },
];

const WHY = [
  {
    num: '01',
    title: 'Низкая себестоимость пошива',
    text: 'Льготный налоговый режим швейной отрасли в Кыргызстане + прямые поставки тканей и фурнитуры из Турции и Китая.',
  },
  {
    num: '02',
    title: 'Образец до запуска партии',
    text: 'Сначала отшиваем тестовый образец, согласуем посадку и качество, и только потом запускаем основную партию. Никаких сюрпризов.',
  },
  {
    num: '03',
    title: 'Контроль качества на 3 этапах',
    text: 'Проверяем крой, пошив и финальную упаковку. По запросу подключаем независимого эксперта за наш счёт.',
  },
  {
    num: '04',
    title: 'Полный цикл под ключ',
    text: 'Лекала → ткани → пошив → лейблы → бирки → упаковка с логотипом. Вы получаете готовый к продаже товар, а не полуфабрикат.',
  },
  {
    num: '05',
    title: 'MOQ от 150 единиц',
    text: 'Реалистичная минимальная партия для теста модели. У большинства фабрик MOQ от 500-1000 - мы понимаем потребности новых брендов.',
  },
  {
    num: '06',
    title: 'Сертификация и маркировка',
    text: 'Поможем оформить ДС/СС по ТР ТС 007/2011 и нанести коды Data Matrix «Честный знак» - товар сразу готов к продаже на WB, Ozon и в офлайне.',
  },
];

const STEPS = [
  { ico: Ico.StepBrief, t: 'Заявка и ТЗ', d: 'Присылаете эскиз, фото референса или готовое ТЗ через сайт / WA / Telegram', time: '1 день' },
  { ico: Ico.StepCalc, t: 'Расчёт и КП', d: 'Менеджер пришлёт цену за единицу, рекомендации по тканям и срокам', time: '1-2 дня' },
  { ico: Ico.StepPattern, t: 'Лекала и образец', d: 'Разрабатываем лекала (если нужно), отшиваем тестовый образец и согласуем посадку', time: '7-14 дней' },
  { ico: Ico.StepContract, t: 'Договор и предоплата', d: 'Подписываем договор, фиксируем спецификацию, вы вносите предоплату 50%', time: '1-2 дня' },
  { ico: Ico.StepSewing, t: 'Пошив партии', d: 'Заказываем ткани и фурнитуру, отшиваем партию с контролем на 3 этапах', time: '20-45 дней' },
  { ico: Ico.StepPack, t: 'Упаковка и отгрузка', d: 'Лейблы, бирки, индивидуальная упаковка, передача в ТК на ваш выбор', time: '3-7 дней' },
];

const DOCS = [
  { ico: Ico.DocStamp, title: 'Сертификация ТР ТС 007/2011', text: 'Оформляем ДС, СС и СГР на отшитую партию. На каждой бирке - реквизиты вашего бренда и номер декларации.' },
  { ico: Ico.Barcode, title: 'Маркировка «Честный знак»', text: 'Получаем коды Data Matrix и наносим их на товар до отгрузки. Готово к приёмке на WB и Ozon FBO.' },
  { ico: Ico.FabricLeaf, title: 'Сертифицированные ткани', text: 'Работаем с поставщиками из Турции и Китая, у которых есть сертификаты на детскую группу. Никакой контрафактной ткани.' },
  { ico: Ico.ShieldCheck, title: 'Контроль качества + ОТК', text: 'Контроль на крое, в потоке и при упаковке. Подтверждённый брак заменяем за свой счёт.' },
];

const CASES = [
  {
    mark: 'TL',
    title: 'Бренд капсульной детской одежды',
    sub: 'Москва · запуск с нуля',
    stats: [['800', 'ед. боди'], ['35', 'дней'], ['NDA', 'подписан']],
    text: 'Разработали лекала и принт по эскизу клиента, согласовали образец и отшили первую партию с лейблами и кастомной упаковкой.',
    tags: ['Лекала с нуля', 'Боди', 'WB'],
  },
  {
    mark: 'SR',
    title: 'Селлер WB · детский трикотаж',
    sub: 'Серия из 4 моделей',
    stats: [['3 200', 'ед.'], ['42', 'дня'], ['0.8%', 'брак']],
    text: 'Шьём ежемесячно: 4 модели слипов и комбинезонов. Маркировка «Честный знак» нанесена до отгрузки - приёмка ФБО без правок.',
    tags: ['Серия', '«Честный знак»', 'Ozon/WB'],
  },
  {
    mark: 'OW',
    title: 'Сеть детских магазинов',
    sub: 'СТМ для розничной сети',
    stats: [['1 500', 'ед.'], ['28', 'дней'], ['+19%', 'маржа']],
    text: 'Отшили эксклюзивную линейку платьев и сарафанов под СТМ сети. Бирки и упаковка под фирменный стиль ритейлера.',
    tags: ['СТМ', 'Платья', 'Розница'],
  },
];

const FAQ_DATA = [
  { q: 'Какой минимальный заказ (MOQ)?', a: 'От 150 единиц на одну модель/цвет. Это минимум, при котором держится оптовая цена пошива.' },
  { q: 'Что нужно прислать для расчёта?', a: 'Достаточно описания модели, фото референса или эскиза, желаемого количества и сроков. Если есть лекала - отлично. Если нет - разработаем сами.' },
  { q: 'Кто разрабатывает лекала и дизайн?', a: 'Возможны 3 варианта: вы присылаете готовые лекала, мы адаптируем вашу модель по эскизу/референсу, или мы разрабатываем модель с нуля по вашему ТЗ.' },
  { q: 'Как защищены мои лекала и дизайн?', a: 'Подписываем NDA до начала работы. Ваши лекала, принты и фирменные элементы используем только для вашего заказа и не передаём третьим лицам.' },
  { q: 'Какие сроки производства партии?', a: 'Стандартная партия 150-500 ед. - 30-45 дней с момента предоплаты. На сложных моделях и крупных партиях - индивидуально, фиксируем в договоре.' },
  { q: 'Как происходит оплата?', a: '50% - предоплата после согласования образца и подписания договора, 50% - после готовности партии перед отгрузкой. Работаем с ИП, ООО и самозанятыми.' },
  { q: 'Кто отвечает за качество ткани и фурнитуры?', a: 'Все поставки тканей и фурнитуры идут через нас, с сертификатами. По запросу пришлём образцы тканей до запуска производства.' },
];

/* ================================================================
   Sections
   ================================================================ */

/* ---------- Categories ---------- */
function CategoriesSection({ onOpenQuiz }) {
  return (
    <section className="section section-cream" id="categories">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Что мы шьём</span>
          <h2>Какие изделия отшиваем <span className="h2-accent">под ваш бренд</span></h2>
          <p className="section-sub">
            Полный цикл: от лекал до упаковки с вашим логотипом. Шьём ваши модели или адаптируем
            готовые конструкции под ваше ТЗ.
          </p>
        </div>
        <div className="cat-grid">
          {CATEGORIES.map((c, i) => (
            <div className="cat-card" key={i}>
              <div className="cat-card-media">
                <div className="img-wrap" data-placeholder={`${c.img}`}>
                  <img src={c.img} alt={c.title} onError={(e) => { e.currentTarget.style.display = 'none'; }} />
                </div>
              </div>
              <div className="cat-card-body">
                <h3 className="cat-card-title">{c.title}</h3>
                <span className="cat-card-pricetag">
                  <Ico.StepCalc />
                  Расчёт цены под ваше ТЗ
                </span>
                <p className="cat-card-desc">{c.desc}</p>
                <button className="cat-card-cta" onClick={onOpenQuiz}>
                  Запросить расчёт <Ico.ArrowRight />
                </button>
              </div>
            </div>
          ))}
        </div>
        <div className="cat-after">
          <div className="cat-after-bar">
            <div className="cat-after-text">
              Шьём детскую одежду и изделия для малышей до 5 лет: слипы, боди, комплекты, костюмы, пижамы, платья, комбинезоны, конверты на выписку, матрасы, сумки и другие модели по вашему запросу.
              Если нужной модели нет в списке - обсудим индивидуально.
            </div>
            <button onClick={onOpenQuiz} className="btn btn-primary">
              Прислать ТЗ на расчёт
              <span className="cta-arrow"><Ico.ArrowRight /></span>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Audience ---------- */
function AudienceSection({ onOpenQuiz }) {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Кому подходит</span>
          <h2>С кем мы работаем</h2>
          <p className="section-sub">
            OEM-пошив подходит брендам на любом этапе - от запуска первой капсулы до серийного
            производства линейки.
          </p>
        </div>
        <div className="aud-grid">
          {AUDIENCE.map((a, i) => {
            const Icon = a.ico;
            return (
              <div className="aud-card" key={i}>
                <div className="aud-ico"><Icon /></div>
                <h3>{a.title}</h3>
                <p>{a.text}</p>
              </div>
            );
          })}
        </div>
        <div className="aud-after">
          <span className="aud-after-text">Не уверены, что подойдёт ваш формат? Обсудим задачу с менеджером</span>
          <button onClick={onOpenQuiz} className="btn btn-primary">
            Обсудить мой проект
            <span className="cta-arrow"><Ico.ArrowRight /></span>
          </button>
          <RespBadge />
        </div>
      </div>
    </section>
  );
}

/* ---------- Why ---------- */
function WhySection({ onOpenQuiz }) {
  return (
    <section className="section section-beige" id="why">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Почему DanaBaby</span>
          <h2>Что вы получаете <span className="h2-accent">на нашей фабрике</span></h2>
          <p className="section-sub">
            Шесть причин, почему бренды выбирают нашу фабрику для пошива детской одежды.
          </p>
        </div>
        <div className="why-grid">
          {WHY.map((w, i) => (
            <div className="why-card" key={i}>
              <div className="why-num">{w.num}</div>
              <h3>{w.title}</h3>
              <p>{w.text}</p>
            </div>
          ))}
        </div>
        <div className="aud-after">
          <span className="aud-after-text">Готовы обсудить ваш проект? Получите расчёт за 30 минут</span>
          <button onClick={onOpenQuiz} className="btn btn-primary">
            Получить расчёт
            <span className="cta-arrow"><Ico.ArrowRight /></span>
          </button>
          <RespBadge />
        </div>
      </div>
    </section>
  );
}

/* ---------- About ---------- */
function AboutSection() {
  return (
    <section className="section">
      <div className="container">
        <div className="about-wrap">
          <div>
            <span className="eyebrow">О фабрике</span>
            <h2>
              <span className="h2-accent">DanaBaby</span> - швейная фабрика полного цикла для брендов детской одежды
            </h2>
            <p className="section-sub">
              Швейная фабрика DANATEX в Бишкеке. Работаем с 2014 года, отшили линейки для
              100+ брендов в России, СНГ и Европе. Знаем, как запускать модели с нуля,
              и как держать стабильное качество на серии в 10 000+ единиц.
            </p>
            <div className="about-marketplaces">
              <span className="about-marketplaces-label">Бренды на нашем пошиве продают на:</span>
              <div className="about-marketplaces-list">
                <span className="mp-pill mp-pill-wb">Wildberries</span>
                <span className="mp-pill mp-pill-ozon">Ozon</span>
                <span className="mp-pill mp-pill-ym">Я.Маркет</span>
                <span className="mp-pill">сетевые магазины</span>
                <span className="mp-pill">собственные шоурумы</span>
              </div>
            </div>
            <div className="about-stats">
              <div className="stat-card">
                <div className="stat-num"><Counter value={2014} noSep /></div>
                <div className="stat-label">На рынке с</div>
              </div>
              <div className="stat-card">
                <div className="stat-num"><Counter value={100} suffix="+" /></div>
                <div className="stat-label">Брендов на нашем пошиве</div>
              </div>
              <div className="stat-card">
                <div className="stat-num"><Counter value={150} suffix=" ед." /></div>
                <div className="stat-label">Минимальная партия</div>
              </div>
              <div className="stat-card">
                <div className="stat-num">0-<Counter value={3} suffix="%" /></div>
                <div className="stat-label">Средний процент брака</div>
              </div>
            </div>
          </div>
          <div className="about-visual">
            <div className="img-wrap" data-placeholder="assets/about-baby.jpg"><img src="assets/about-baby.jpg" alt="" onError={(e) => { e.currentTarget.style.display = 'none'; }} /></div>
            <div className="img-wrap" data-placeholder="assets/about-bags.jpg"><img src="assets/about-bags.jpg" alt="" onError={(e) => { e.currentTarget.style.display = 'none'; }} /></div>
            <div className="img-wrap" data-placeholder="assets/about-warm.jpg"><img src="assets/about-warm.jpg" alt="" onError={(e) => { e.currentTarget.style.display = 'none'; }} /></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Gallery (red) + cases ---------- */
function GallerySection() {
  const videoRef = React.useRef(null);
  const items = [
    'assets/gallery-1.png',
    'assets/gallery-2.png',
    'assets/gallery-3.png',
    'assets/gallery-4.png',
    'assets/gallery-5.png',
  ];

  React.useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && videoRef.current) {
            videoRef.current.play().catch(() => {});
          } else if (!entry.isIntersecting && videoRef.current) {
            videoRef.current.pause();
          }
        });
      },
      { threshold: 0.5 }
    );

    if (videoRef.current) {
      observer.observe(videoRef.current);
    }

    return () => {
      if (videoRef.current) {
        observer.unobserve(videoRef.current);
      }
    };
  }, []);

  return (
    <section className="section gallery-section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Производство изнутри</span>
          <h2>Показываем <span className="h2-accent">цех, ткани и процесс пошива</span></h2>
          <p className="section-sub">
            Реальные кадры с производства: лекала, раскрой, пошив, контроль качества.
            Никаких стоковых фото - только наша фабрика.
          </p>
        </div>

        <div className="gal-wrap">
          <div className="gal-video" role="button" tabIndex={0}>
            <video 
              ref={videoRef}
              className="gal-video-element" 
              poster="https://fabrika.danababy.pro/assets/danababy-video-poster.png"
              muted
              loop
              playsInline
              preload="metadata"
              crossOrigin="anonymous"
            >
              <source src="https://fabrika.danababy.pro/assets/danababy-warehouse.mp4" type="video/mp4" />
              Ваш браузер не поддерживает видео
            </video>
            <div className="gal-video-label">
              <span className="gal-video-tag">Видео</span>
              <h3 className="gal-video-title">Экскурсия по цеху DanaBaby</h3>
              <p className="gal-video-sub">Покажем оборудование, процесс пошива и финального контроля качества.</p>
            </div>
          </div>
          <div className="gal-left">
            {items.map((src, i) => (
              <div className="gal-item" key={i}>
                <div className="img-wrap" data-placeholder={src}>
                  <img src={src} alt="" onError={(e) => { e.currentTarget.style.display = 'none'; }} />
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Cases - 3 анонимных кейса */}
        <div className="cases-wrap">
          {CASES.map((c, i) => (
            <div className="case-card" key={i}>
              <div className="case-card-head">
                <span className="case-card-mark">{c.mark}</span>
                <div>
                  <div className="case-card-title">{c.title}</div>
                  <div className="case-card-sub">{c.sub}</div>
                </div>
              </div>
              <div className="case-card-stats">
                {c.stats.map(([v, l], j) => (
                  <div key={j}>
                    <div className="case-card-stat-v">{v}</div>
                    <div className="case-card-stat-l">{l}</div>
                  </div>
                ))}
              </div>
              <p className="case-card-text">{c.text}</p>
              <div className="case-card-foot">
                {c.tags.map((t, j) => <span className="case-tag" key={j}>{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- NDA strip (above Steps) ---------- */
function NdaStrip({ onOpenQuiz }) {
  return (
    <section className="nda-strip">
      <div className="container">
        <div className="nda-wrap">
          <span className="nda-mark"><Ico.ShieldLock /></span>
          <div className="nda-text">
            <strong>Подписываем NDA до начала работы</strong>
            Ваши лекала, принты и фирменные элементы используем только для вашего заказа
            и не передаём третьим лицам.
            <div className="nda-tags">
              <span className="nda-tag"><Ico.Check /> NDA с самозанятыми, ИП и ООО</span>
              <span className="nda-tag"><Ico.Check /> Закрытый файловый обмен</span>
              <span className="nda-tag"><Ico.Check /> Лекала остаются у вас</span>
            </div>
          </div>
          <div className="nda-action">
            <button onClick={onOpenQuiz} className="btn btn-primary">
              Подписать NDA и обсудить
              <span className="cta-arrow"><Ico.ArrowRight /></span>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Steps ---------- */
function StepsSection({ onOpenQuiz }) {
  return (
    <section className="section section-cream" id="how">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Порядок работы</span>
          <h2>От ТЗ до готовой партии - <span className="h2-accent">6 шагов</span></h2>
          <p className="section-sub">
            Прозрачный процесс с фиксированными сроками на каждом этапе. Менеджер сопровождает
            проект от первой заявки до отгрузки.
          </p>
        </div>
        <div className="steps-route">
          <div className="steps-line"></div>
          <div className="steps-grid">
            {STEPS.map((s, i) => {
              const Icon = s.ico;
              return (
                <div className="step" key={i}>
                  <div className="step-bead">
                    <span className="step-bead-ico"><Icon /></span>
                    <span className="step-bead-badge">{i + 1}</span>
                  </div>
                  <div className="step-card">
                    <h4>{s.t}</h4>
                    <div className="step-time">{s.time}</div>
                    <p>{s.d}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <div className="steps-after">
          <span className="steps-after-text">Готовы запустить вашу первую партию?</span>
          <button onClick={onOpenQuiz} className="btn btn-primary">
            Прислать ТЗ
            <span className="cta-arrow"><Ico.ArrowRight /></span>
          </button>
          <RespBadge />
        </div>
      </div>
    </section>
  );
}

/* ---------- Docs ---------- */
function DocsSection({ onOpenQuiz }) {
  return (
    <section className="section section-beige" id="docs">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Качество и документы</span>
          <h2>Партия готова к продаже <span className="h2-accent">на маркетплейсах и в магазинах</span></h2>
          <p className="section-sub">
            Сертификация ТР ТС 007/2011, маркировка «Честный знак» и контроль качества
            на каждом этапе пошива.
          </p>
        </div>

        <div className="docs-split">
          <div className="docs-visual">
            <div className="docs-paper docs-paper-back"></div>
            <div className="docs-paper docs-paper-mid"></div>
            <div className="docs-paper docs-paper-front">
              <div className="docs-paper-head">
                <span className="docs-paper-logo">DanaBaby · DANATEX</span>
                <span className="docs-paper-no">№ ЕАЭС N RU Д-KG.PA01.B.•••••/••</span>
              </div>
              <div className="docs-paper-title">Декларация соответствия</div>
              <div className="docs-paper-sub">ТР ТС 007/2011 «О безопасности продукции,&nbsp;предназначенной для детей и подростков»</div>
              <div className="docs-paper-rows">
                <div className="docs-paper-row"><span>Изделия</span><b>Детская одежда под брендом клиента</b></div>
                <div className="docs-paper-row"><span>Возрастная группа</span><b>0-7 лет (группы 1-2)</b></div>
                <div className="docs-paper-row"><span>Состав</span><b>По спецификации заказчика</b></div>
                <div className="docs-paper-row"><span>Действует до</span><b>+ 3 года после оформления</b></div>
              </div>
              <div className="docs-paper-foot">
                <div className="docs-paper-blur">●●●●●●●● ●●●</div>
                <div className="docs-stamp">
                  <span>СООТВЕТСТВУЕТ</span>
                  <strong>ТР ТС</strong>
                  <span>007/2011</span>
                </div>
              </div>
            </div>
            <div className="docs-badges">
              <span className="docs-badge">ДС</span>
              <span className="docs-badge">СС</span>
              <span className="docs-badge">СГР</span>
              <span className="docs-badge docs-badge-cz">«Честный знак»</span>
            </div>
          </div>

          <div className="docs-grid">
            {DOCS.map((d, i) => {
              const Icon = d.ico;
              return (
                <div className="doc-card" key={i}>
                  <div className="doc-ico"><Icon /></div>
                  <h3>{d.title}</h3>
                  <p>{d.text}</p>
                </div>
              );
            })}
          </div>
        </div>

        <div className="docs-cta">
          <div className="docs-cta-text">
            <h4>Нужен пример договора и расчёт под вашу модель?</h4>
            <p>Менеджер пришлёт типовой договор, образец декларации и расчёт под ваше ТЗ.</p>
          </div>
          <div className="docs-cta-actions">
            <RespBadge />
            <button onClick={onOpenQuiz} className="btn btn-primary">
              Запросить документы и расчёт
              <span className="cta-arrow"><Ico.ArrowRight /></span>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ + Final CTA ---------- */
function FaqCtaSection({ onOpenQuiz }) {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head left" style={{ marginBottom: 40 }}>
          <span className="eyebrow">Частые вопросы</span>
          <h2>Что чаще всего <span className="h2-accent">спрашивают бренды</span></h2>
        </div>

        <div className="faq-merged">
          <div className="faq-wrap">
            {FAQ_DATA.map((f, i) => (
              <div className={`faq-item${open === i ? ' open' : ''}`} key={i}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="faq-q-ico"><Ico.ChevDown /></span>
                </button>
                <div className="faq-a"><p>{f.a}</p></div>
              </div>
            ))}
          </div>

          <div className="final-cta" id="contact">
            <span className="final-cta-live">Менеджер на связи · Расчёт за 30 минут</span>
            <h2 style={{ color: '#FFFDF7' }}>
              Готовы запустить производство?<br />
              Получите расчёт под ваш бренд
            </h2>
            <ul className="final-cta-perks">
              <li><span className="fcp-dot"></span><span><b>Бесплатная консультация</b> - обсудим вашу модель, выберем ткани, оценим сроки</span></li>
              <li><span className="fcp-dot"></span><span><b>Расчёт цены за единицу</b> - точная смета с учётом материалов, фурнитуры и упаковки</span></li>
              <li><span className="fcp-dot"></span><span><b>Образец до запуска партии</b> - никаких рисков, тестируете на одной единице</span></li>
            </ul>
            <div className="final-cta-actions">
              <button onClick={onOpenQuiz} className="btn btn-primary">
                Прислать ТЗ
                <span className="cta-arrow"><Ico.ArrowRight /></span>
              </button>
              <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>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <BrandLogo inFooter />
          <p className="footer-text">
            Швейная фабрика DanaBaby / DANATEX. С 2014 года шьём детскую одежду
            под брендами клиентов: помогаем запускать новые марки и масштабировать существующие
            линейки. Работаем с брендами по всей России и СНГ.
          </p>
        </div>
        <div className="footer-bot">
          <span>© {new Date().getFullYear()} DanaBaby · DANATEX. Все права защищены.</span>
          <span><a href="#">Политика конфиденциальности</a> · <a href="#">Реквизиты</a></span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Floating CTAs ---------- */
function FloatingCTAs() {
  return (
    <div className="floating-ctas">
      <a href="https://wa.me/996779766666" target="_blank" rel="noopener" className="float-btn wa" aria-label="WhatsApp"><Ico.WA /></a>
      <a href="https://t.me/+996779766666" target="_blank" rel="noopener" className="float-btn tg" aria-label="Telegram"><Ico.TG /></a>
    </div>
  );
}

/* Export to window */
Object.assign(window, {
  CategoriesSection, AudienceSection, WhySection,
  AboutSection, GallerySection, NdaStrip,
  StepsSection, DocsSection, FaqCtaSection, Footer, FloatingCTAs,
});