import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ChevronDown } from 'lucide-react';

const faqs = [
  {
    q: 'Что такое бронирующая пленка для окон и от чего она защищает?',
    a: 'Бронирующая пленка — многослойная полиэстеровая пленка толщиной 200–300 мкм, которая наклеивается на стекло с внутренней стороны. При взрыве или ударе она удерживает осколки стекла, предотвращая их разлёт. Пленка снижает риск поражения людей в помещении и частично поглощает энергию взрывной волны.',
  },
  {
    q: 'Защищает ли пленка от прямого попадания снаряда или дрона?',
    a: 'Нет. Бронирующая пленка не является бронестеклом и не останавливает прямое попадание. Её главная задача — критически снизить риск вторичного поражения осколками стекла и частично погасить ударную волну. Именно осколки остекления являются причиной большинства травм при взрывах.',
  },
  {
    q: 'Какие классы защиты предлагает Осколкам.Нет?',
    a: 'Мы поставляем пленки классов А1, А2 и А3 по ГОСТ 30826-2014 и европейскому стандарту EN 356. Класс А1 (200 мкм) — для жилых и коммерческих помещений. А2/А3 (300 мкм) — усиленная защита для промышленных объектов, критической инфраструктуры и военных объектов.',
  },
  {
    q: 'Сколько стоит установка защитной пленки для окон?',
    a: 'Стоимость зависит от толщины пленки и площади остекления. Базовая цена: пленка 200 мкм — от 2 000 руб/м², пленка 300 мкм — от 3 000 руб/м². Полный расчёт стоимости выполняется бесплатно после выезда инженера для замера.',
  },
  {
    q: 'Как долго длится монтаж и каков срок службы пленки?',
    a: 'Монтаж стандартной квартиры занимает 1 рабочий день, промышленного объекта — от 2 до 7 дней. Срок службы бронирующей пленки составляет 10–15 лет при соблюдении условий эксплуатации. Пленка не требует специального обслуживания.',
  },
  {
    q: 'В каких регионах работает компания?',
    a: 'Мы работаем по всей территории России и в странах СНГ: Казахстан, Беларусь, Узбекистан. Возможен выезд специализированной бригады в любой регион. Для удалённых объектов организуется поставка материалов и обучение местных монтажников.',
  },
  {
    q: 'Можно ли наклеить пленку самостоятельно?',
    a: 'Технически возможно, но не рекомендуется. Профессиональный монтаж исключает пузыри, отслоения и нахлёсты, которые снижают защитные характеристики пленки. Только корректно смонтированная пленка обеспечивает заявленный класс защиты по ГОСТ и EN 356. Самостоятельная установка аннулирует сертификат соответствия.',
  },
  {
    q: 'Заметна ли бронирующая пленка на стеклах?',
    a: 'Прозрачная бронирующая пленка практически незаметна — светопропускаемость составляет 87–92%. Внешний вид окон не меняется. Пленка не искажает обзор, не бликует и не влияет на естественное освещение помещения.',
  },
];

const FAQItem = ({ q, a, index }) => {
  const [open, setOpen] = useState(false);

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, delay: index * 0.06 }}
      viewport={{ once: true }}
      style={{
        borderBottom: '1px solid var(--border-light)',
      }}
    >
      <button
        onClick={() => setOpen(!open)}
        aria-expanded={open}
        style={{
          width: '100%',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          padding: '24px 0',
          background: 'none',
          border: 'none',
          cursor: 'pointer',
          textAlign: 'left',
          gap: '20px',
        }}
      >
        <span style={{ fontSize: '1.1rem', fontWeight: 700, color: 'var(--text-main)', lineHeight: 1.4 }}>
          {q}
        </span>
        <motion.span
          animate={{ rotate: open ? 180 : 0 }}
          transition={{ duration: 0.25 }}
          style={{ flexShrink: 0 }}
        >
          <ChevronDown size={22} className="text-accent-blue" />
        </motion.span>
      </button>
      <AnimatePresence initial={false}>
        {open && (
          <motion.div
            key="answer"
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.25, ease: 'easeInOut' }}
            style={{ overflow: 'hidden' }}
          >
            <p style={{
              paddingBottom: '24px',
              color: 'var(--text-muted)',
              fontSize: '1.05rem',
              lineHeight: 1.7,
              maxWidth: '860px',
            }}>
              {a}
            </p>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
};

const FAQ = () => (
  <section id="faq" style={{ backgroundColor: 'var(--bg-light)', padding: '100px 0' }}>
    <div className="container">
      <div style={{ textAlign: 'center', marginBottom: '70px' }}>
        <motion.h2
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          style={{ fontSize: '3rem', marginBottom: '20px', textTransform: 'uppercase' }}
        >
          Частые <span className="text-accent-blue">вопросы</span>
        </motion.h2>
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.15 }}
          viewport={{ once: true }}
          style={{ color: 'var(--text-muted)', fontSize: '1.2rem', maxWidth: '600px', margin: '0 auto' }}
        >
          Отвечаем на самые популярные вопросы о защитных пленках для окон
        </motion.p>
      </div>

      <div style={{ maxWidth: '900px', margin: '0 auto' }}>
        {faqs.map((item, i) => (
          <FAQItem key={i} q={item.q} a={item.a} index={i} />
        ))}
      </div>
    </div>
  </section>
);

export default FAQ;
