'use client';

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

const faqs = [
  {
    question: "What is GridPilot?",
    answer: "A platform to make league racing less chaotic. I kept running into the same problems running leagues myself (scattered spreadsheets, manual standings, DM chaos for protests), so I'm building something to fix that."
  },
  {
    question: "How much does it cost?",
    answer: "No idea yet. I'm focusing on making something useful first. Money isn't even on the table until the platform actually proves itself. When we do introduce any pricing, all running leagues will be able to finish their seasons before being charged. No subscriptions, no surprise fees."
  },
  {
    question: "When does it launch?",
    answer: "When it's ready. I'm aiming for ASAP, but definitely not before late March 2025. I'd rather ship something solid than rush it."
  },
  {
    question: "Will this replace iRacing / my existing tools?",
    answer: "No. I don't want to replace anything. GridPilot sits on top of iRacing - it just handles the league management part (standings, schedules, protests, team scoring) so you don't need 5 different spreadsheets and Discord channels. Racing still happens in iRacing."
  },
  {
    question: "What about my existing league data?",
    answer: "I'm thinking about migration tools to import your current standings, rosters, and results. Can't promise anything yet, but it's on my mind."
  },
  {
    question: "Who's building this?",
    answer: "Me (and hopefully some help along the way). I'm a racer who got tired of the chaos. This started as scratching my own itch."
  }
];

function FAQItem({ faq, index }: { faq: typeof faqs[0]; index: number }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ delay: index * 0.1 }}
      className="group"
    >
      <div className="rounded-lg bg-iron-gray border border-charcoal-outline transition-all duration-150 hover:-translate-y-1 hover:shadow-lg hover:border-primary-blue/50">
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="w-full p-2 md:p-3 lg:p-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-blue rounded-lg min-h-[44px]"
        >
          <div className="flex items-center justify-between gap-1.5 md:gap-2">
            <h3 className="text-xs md:text-sm font-semibold text-white group-hover:text-primary-blue transition-colors duration-150">
              {faq.question}
            </h3>
            <motion.svg
              animate={{ rotate: isOpen ? 180 : 0 }}
              transition={{ duration: 0.15, ease: 'easeInOut' }}
              className="w-3.5 h-3.5 md:w-4 md:h-4 text-neon-aqua flex-shrink-0"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
            </motion.svg>
          </div>
        </button>
        <motion.div
          initial={false}
          animate={{
            height: isOpen ? 'auto' : 0,
            opacity: isOpen ? 1 : 0
          }}
          transition={{
            height: { duration: 0.3, ease: [0.34, 1.56, 0.64, 1] },
            opacity: { duration: 0.2, ease: 'easeInOut' }
          }}
          className="overflow-hidden"
        >
          <div className="px-2 pb-2 pt-1 md:px-3 md:pb-3">
            <p className="text-[10px] md:text-xs text-gray-300 font-light leading-relaxed">
              {faq.answer}
            </p>
          </div>
        </motion.div>
      </div>
    </motion.div>
  );
}

export default function FAQ() {
  return (
    <section className="relative py-3 md:py-12 lg:py-16 bg-deep-graphite overflow-hidden">
      {/* Background image with mask */}
      <div
        className="absolute inset-0 bg-cover bg-center"
        style={{
          backgroundImage: 'url(/images/porsche.jpeg)',
          maskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.1) 40%, transparent 70%)',
          WebkitMaskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.1) 40%, transparent 70%)'
        }}
      />
      {/* Racing red accent */}
      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-red-500/30 to-transparent" />
      
      <div className="max-w-3xl mx-auto px-4 md:px-6 relative z-10">
        <div className="text-center mb-4 md:mb-8">
          <h2 className="text-base md:text-xl lg:text-2xl font-semibold text-white mb-1">
            Frequently Asked Questions
          </h2>
          <div className="w-24 md:w-32 h-1 bg-gradient-to-r from-primary-blue to-neon-aqua mx-auto rounded-full" />
        </div>
        <div className="space-y-1.5 md:space-y-2">
          {faqs.map((faq, index) => (
            <FAQItem key={faq.question} faq={faq} index={index} />
          ))}
        </div>
      </div>
    </section>
  );
}