'use client';

import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { motion } from 'framer-motion';
import { ChevronDown } from 'lucide-react';
import { useState } from '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 (
    <Stack
      as={motion.div}
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ delay: index * 0.1 }}
      group
    >
      <Stack rounded="none" bg="panel-gray/40" border borderColor="border-gray/50" transition hoverBorderColor="primary-accent/30">
        <Stack
          as="button"
          onClick={() => setIsOpen(!isOpen)}
          fullWidth
          p={{ base: 4, md: 6 }}
          textAlign="left"
          rounded="none"
          minHeight="44px"
          className="relative overflow-hidden"
        >
          <Stack display="flex" alignItems="center" justifyContent="between" gap={{ base: 2, md: 4 }}>
            <Stack direction="row" align="center" gap={4}>
              <Stack w="1" h="4" bg={isOpen ? "primary-accent" : "border-gray"} transition className="group-hover:bg-primary-accent" />
              <Heading level={3} fontSize={{ base: 'sm', md: 'base' }} weight="bold" color="text-white" groupHoverColor="primary-accent" transition className="tracking-wide">
                {faq.question}
              </Heading>
            </Stack>
            <Stack
              as={motion.div}
              animate={{ rotate: isOpen ? 180 : 0 }}
              transition={{ duration: 0.15, ease: 'easeInOut' }}
              w={{ base: "4", md: "5" }}
              h={{ base: "4", md: "5" }}
              color={isOpen ? "text-primary-accent" : "text-gray-500"}
              flexShrink={0}
            >
              <Icon icon={ChevronDown} size="full" />
            </Stack>
          </Stack>
        </Stack>
        <Stack
          as={motion.div}
          initial={false}
          animate={{
            height: isOpen ? 'auto' : 0,
            opacity: isOpen ? 1 : 0
          }}
          transition={{
            height: { duration: 0.2, ease: 'easeInOut' },
            opacity: { duration: 0.15, ease: 'easeInOut' }
          }}
          overflow="hidden"
        >
          <Stack px={{ base: 4, md: 6 }} pb={{ base: 4, md: 6 }} pt={0} ml={5}>
            <Text size="sm" color="text-gray-400" weight="normal" leading="relaxed" className="max-w-2xl">
              {faq.answer}
            </Text>
          </Stack>
        </Stack>
      </Stack>
    </Stack>
  );
}

export function FAQ() {
  return (
    <Stack as="section" position="relative" py={{ base: 20, md: 32 }} bg="graphite-black" overflow="hidden" borderBottom borderColor="border-gray/50">
      {/* Background image with mask */}
      <Stack
        position="absolute"
        inset="0"
        bg="url(/images/porsche.jpeg)"
        backgroundSize="cover"
        backgroundPosition="center"
        opacity={0.03}
      />
      
      <Stack maxWidth="4xl" mx="auto" px={{ base: 4, md: 6 }} position="relative" zIndex={10}>
        <Stack textAlign="center" mb={{ base: 12, md: 16 }}>
          <Stack borderLeft borderRight borderStyle="solid" borderColor="primary-accent" px={4} display="inline-block" mb={4}>
            <Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-[0.2em]">
              Support & Information
            </Text>
          </Stack>
          <Heading level={2} fontSize={{ base: '3xl', md: '4xl' }} weight="bold" color="text-white" mb={4} className="tracking-tight">
            Frequently Asked Questions
          </Heading>
        </Stack>
        <Stack display="flex" flexDirection="column" gap={4}>
          {faqs.map((faq, index) => (
            <FAQItem key={faq.question} faq={faq} index={index} />
          ))}
        </Stack>
      </Stack>
    </Stack>
  );
}