'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { ChevronDown } from 'lucide-react';

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 (
    <Box
      as={motion.div}
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ delay: index * 0.1 }}
      group
    >
      <Box rounded="lg" bg="bg-iron-gray" border borderColor="border-charcoal-outline" transition hoverBorderColor="border-primary-blue/50" transform={isOpen ? '' : 'translateY(0)'} hoverScale={!isOpen}>
        <Box
          as="button"
          onClick={() => setIsOpen(!isOpen)}
          fullWidth
          p={{ base: 2, md: 3, lg: 4 }}
          textAlign="left"
          rounded="lg"
          minHeight="44px"
        >
          <Box display="flex" alignItems="center" justifyContent="between" gap={{ base: 1.5, md: 2 }}>
            <Heading level={3} fontSize={{ base: 'xs', md: 'sm' }} weight="semibold" color="text-white" groupHoverColor="primary-blue" transition>
              {faq.question}
            </Heading>
            <Box
              as={motion.div}
              animate={{ rotate: isOpen ? 180 : 0 }}
              transition={{ duration: 0.15, ease: 'easeInOut' }}
              w={{ base: "3.5", md: "4" }}
              h={{ base: "3.5", md: "4" }}
              color="text-neon-aqua"
              flexShrink={0}
            >
              <Icon icon={ChevronDown} size="full" />
            </Box>
          </Box>
        </Box>
        <Box
          as={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' }
          }}
          overflow="hidden"
        >
          <Box px={{ base: 2, md: 3 }} pb={{ base: 2, md: 3 }} pt={1}>
            <Text size={{ base: 'xs', md: 'xs' }} color="text-gray-300" weight="light" leading="relaxed">
              {faq.answer}
            </Text>
          </Box>
        </Box>
      </Box>
    </Box>
  );
}

export function FAQ() {
  return (
    <Box as="section" position="relative" py={{ base: 3, md: 12, lg: 16 }} bg="bg-deep-graphite" overflow="hidden">
      {/* Background image with mask */}
      <Box
        position="absolute"
        inset="0"
        bg="url(/images/porsche.jpeg)"
        backgroundSize="cover"
        backgroundPosition="center"
        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 */}
      <Box position="absolute" top="0" left="0" right="0" h="px" bg="linear-gradient(to right, transparent, rgba(239, 68, 68, 0.3), transparent)" />
      
      <Box maxWidth="3xl" mx="auto" px={{ base: 4, md: 6 }} position="relative" zIndex={10}>
        <Box textAlign="center" mb={{ base: 4, md: 8 }}>
          <Heading level={2} fontSize={{ base: 'base', md: 'xl', lg: '2xl' }} weight="semibold" color="text-white" mb={1}>
            Frequently Asked Questions
          </Heading>
          <Box mx="auto" rounded="full" w={{ base: "24", md: "32" }} h="1" bg="linear-gradient(to right, var(--primary-blue), var(--neon-aqua))" />
        </Box>
        <Box display="flex" flexDirection="column" gap={{ base: 1.5, md: 2 }}>
          {faqs.map((faq, index) => (
            <FAQItem key={faq.question} faq={faq} index={index} />
          ))}
        </Box>
      </Box>
    </Box>
  );
}