import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { FiChevronDown, FiBookOpen, FiChevronRight } from 'react-icons/fi'
import { faqs, guides } from '../data/mutuelles'

function FaqItem({ faq, index }) {
  const [open, setOpen] = useState(index === 0)

  return (
    <div className="border border-slate-100 rounded-2xl overflow-hidden">
      <button
        onClick={() => setOpen((v) => !v)}
        className="w-full flex items-start gap-4 px-6 py-5 text-left hover:bg-slate-50 transition-colors"
      >
        <span
          className="flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center text-xs font-extrabold mt-0.5 text-white"
          style={{ backgroundColor: open ? '#9CCC8A' : '#CBD5E1' }}
        >
          {index + 1}
        </span>
        <span className="flex-1 font-bold text-slate-900 leading-snug">{faq.question}</span>
        <motion.div
          animate={{ rotate: open ? 180 : 0 }}
          transition={{ duration: 0.2 }}
          className="flex-shrink-0 mt-0.5"
        >
          <FiChevronDown className={`text-lg transition-colors ${open ? 'text-[#9CCC8A]' : 'text-slate-400'}`} />
        </motion.div>
      </button>

      <AnimatePresence initial={false}>
        {open && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.25 }}
          >
            <div className="px-6 pb-6 space-y-3 border-t border-slate-100 pt-4">
              {faq.content.map((para, i) => (
                <p key={i} className="text-sm text-slate-500 leading-relaxed">
                  {para}
                </p>
              ))}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

export default function GuideSection() {
  return (
    <section className="py-20 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <div className="text-center mb-14">
          <h2 className="text-4xl font-extrabold text-slate-900 tracking-tight mb-4">
            Tout savoir sur la mutuelle santé
          </h2>
          <p className="text-slate-500 max-w-xl mx-auto">
            Nos guides répondent à toutes vos questions pour faire le bon choix.
          </p>
        </div>

        <div className="grid lg:grid-cols-3 gap-12">

          {/* FAQ accordéon */}
          <div className="lg:col-span-2 space-y-3">
            {faqs.map((faq, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 12 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.07, duration: 0.4 }}
              >
                <FaqItem faq={faq} index={i} />
              </motion.div>
            ))}
          </div>

          {/* Sidebar */}
          <div className="lg:col-span-1 self-start">
            <div className="sticky top-24 space-y-4">

              {/* Guides card */}
              <div className="bg-slate-50 rounded-2xl border border-slate-100 p-6">
                <div className="flex items-center gap-2 mb-5">
                  <div className="w-8 h-8 bg-[#9CCC8A]/20 rounded-xl flex items-center justify-center">
                    <FiBookOpen className="text-[#9CCC8A] text-sm" />
                  </div>
                  <h3 className="font-bold text-slate-900">Tous nos guides</h3>
                </div>
                <ul className="space-y-1">
                  {guides.map((guide, i) => (
                    <li key={i}>
                      <a
                        href="#"
                        className="flex items-start gap-2 text-sm text-slate-600 hover:text-[#9CCC8A] transition-colors py-2 group"
                      >
                        <FiChevronRight className="flex-shrink-0 mt-0.5 text-slate-300 group-hover:text-[#9CCC8A] transition-colors" />
                        {guide}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>

              {/* CTA card */}
              <div className="bg-gradient-to-br from-[#9CCC8A] to-[#74AB61] rounded-2xl p-6 text-white">
                <div className="font-extrabold text-lg mb-2">
                  Besoin d'un conseil personnalisé ?
                </div>
                <p className="text-white/70 text-sm mb-5 leading-relaxed">
                  Nos experts répondent à toutes vos questions gratuitement, sans engagement.
                </p>
                <a
                  href="tel:+33180891030"
                  className="flex items-center justify-center gap-2 bg-white text-[#74AB61] font-bold text-sm py-3 rounded-xl hover:bg-[#9CCC8A]/10 transition-colors"
                >
                  📞 01 80 89 10 30
                </a>
              </div>

            </div>
          </div>

        </div>
      </div>
    </section>
  )
}
