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-white/10 rounded-2xl overflow-hidden bg-[#19392e]/80 backdrop-blur-sm">
      <button
        onClick={() => setOpen((v) => !v)}
        className="w-full flex items-start gap-4 px-6 py-5 text-left hover:bg-white/5 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' : 'rgba(255,254,246,0.2)' }}
        >
          {index + 1}
        </span>
        <span className="flex-1 font-bold text-[#fffef6] 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-[#fffef6]/40'}`} />
        </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-white/10 pt-4">
              {faq.content.map((para, i) => (
                <p key={i} className="text-sm text-[#fffef6]/60 leading-relaxed">
                  {para}
                </p>
              ))}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

export default function GuideSection({ bgSrc, bgMobileSrc }) {
  return (
    <section className="relative py-0" style={!bgSrc ? { backgroundColor: '#19392e' } : {}}>
      {/* Fond mobile (portrait) */}
      {(bgMobileSrc || bgSrc) && (
        <div
          className="md:hidden absolute inset-0 bg-cover bg-center"
          style={{ backgroundImage: `url(${bgMobileSrc || bgSrc})` }}
        />
      )}
      {/* Fond desktop (paysage, parallax) */}
      {bgSrc && (
        <div
          className="hidden md:block absolute inset-0 bg-cover bg-center bg-fixed"
          style={{ backgroundImage: `url(${bgSrc})` }}
        />
      )}
      {/* Overlay */}
      <div className="pointer-events-none absolute inset-0 bg-[#19392e]/70 backdrop-blur-[2px]" />

      {/* Wave ← ComparisonSection */}
      <div className="absolute top-0 left-0 w-full overflow-hidden leading-[0] pointer-events-none">
        <svg className="block w-full h-20 fill-white" viewBox="0 0 1200 120" preserveAspectRatio="none">
          <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" />
        </svg>
      </div>

      {/* Wave → Footer */}
      <div className="absolute bottom-0 left-0 w-full overflow-hidden leading-[0] pointer-events-none">
        <svg className="block w-full h-20" viewBox="0 0 1200 120" preserveAspectRatio="none" style={{ fill: '#19392e', transform: 'scaleY(-1)' }}>
          <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" />
        </svg>
      </div>

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 md:pt-48 pb-24 md:pb-48">

        <motion.div
          initial={{ opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="text-center mb-14"
        >
          <h2 className="text-2xl sm:text-4xl font-extrabold text-[#fffef6] tracking-tight mb-4">
            Tout savoir sur la mutuelle santé
          </h2>
          <p className="text-[#fffef6]/60 max-w-xl mx-auto">
            Nos guides répondent à toutes vos questions pour faire le bon choix.
          </p>
        </motion.div>

        <div className="grid lg:grid-cols-3 gap-6 lg: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 */}
              <motion.div
                initial={{ opacity: 0, y: 24 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.45, delay: 0.1 }}
                className="bg-[#19392e]/80 backdrop-blur-sm rounded-2xl border border-white/10 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-[#fffef6]">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-[#fffef6]/70 hover:text-[#9CCC8A] transition-colors py-2 group"
                      >
                        <FiChevronRight className="flex-shrink-0 mt-0.5 text-white/20 group-hover:text-[#9CCC8A] transition-colors" />
                        {guide}
                      </a>
                    </li>
                  ))}
                </ul>
              </motion.div>

              {/* CTA card */}
              <motion.div
                initial={{ opacity: 0, y: 24 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.45, delay: 0.2 }}
                className="bg-[#19392e]/80 backdrop-blur-sm rounded-2xl border border-white/10 p-6"
              >
                <div className="font-extrabold text-lg mb-2 text-[#fffef6]">
                  Besoin d'un conseil personnalisé ?
                </div>
                <p className="text-[#fffef6]/60 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-[#9CCC8A] hover:bg-[#87BE73] text-black font-bold text-sm py-3 rounded-xl transition-colors"
                >
                  📞 01 80 89 10 30
                </a>
              </motion.div>

            </div>
          </div>

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