import { motion } from 'framer-motion';
import { useState } from 'react';
import { ChevronDown } from 'lucide-react';
import { Link } from 'react-router-dom';
import { cn } from '@/lib/utils';

const FAQ = () => {
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  const faqs = [
    {
      question: 'Who are you?',
      answer: "I'm Jory. Hardware tinkerer, self-hosting enthusiast, and general builder of things that work.",
    },
    {
      question: 'What do you do?',
      answer: "I build stuff - both digital and physical. From self-hosted server infrastructure to DIY speaker systems and experimental hardware projects. If it can be taken apart and understood, I'm interested.",
    },
    {
      question: 'What are your interests?',
      answer: "Hardware, code, and audio. I enjoy understanding how things work at a fundamental level - whether that's electronics, networking, or sound engineering.",
    },
    {
      question: 'What kind of projects do you work on?',
      answer: "Anything from VPS infrastructure with self-hosted services to custom speaker builds and experimental hardware. Check the Projects page for specifics.",
    },
    {
      question: 'Why self-host everything?',
      answer: "Control, privacy, and learning. Running your own infrastructure teaches you more than any tutorial. Plus, you actually own your data.",
    },
    {
      question: 'Are you available for work?',
      answer: "Depends on the project. Reach out through my contact links if you have something interesting.",
    },
    {
      question: 'How can I contact you?',
      answer: null,
      customContent: (
        <p className="font-pixel text-foreground/80">
          Check out the{' '}
          <Link to="/links" className="text-primary hover:text-glow transition-all duration-300 border-b border-primary/50 hover:border-primary">
            Links
          </Link>{' '}
          page for contact info.
        </p>
      ),
    },
    {
      question: 'What tools do you use?',
      answer: "Linux servers, CoreDNS, Caddy, WireGuard, Gitea, Vaultwarden for infrastructure. React/TypeScript for web stuff. Soldering iron and multimeter for hardware.",
    },
    {
      question: 'Any hidden features on this site?',
      answer: "Maybe. Old-school gamers might find something familiar. Try the /hint command in the terminal.",
    },
  ];

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
      className="space-y-6"
    >
      <h1 className="font-minecraft text-3xl md:text-4xl text-primary text-glow-strong">
        FAQ
      </h1>
      
      <p className="font-pixel text-foreground/80">
        Frequently asked questions:
      </p>

      <div className="space-y-3">
        {faqs.map((faq, index) => (
          <motion.div
            key={index}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.05 }}
            className="border border-primary/30 hover:border-primary transition-all duration-300"
          >
            <button
              onClick={() => setOpenIndex(openIndex === index ? null : index)}
              className="w-full flex items-center justify-between p-4 text-left"
            >
              <span className="font-minecraft text-sm md:text-base text-primary text-glow">
                {faq.question}
              </span>
              <ChevronDown
                className={cn(
                  "w-5 h-5 text-primary transition-transform duration-300 flex-shrink-0 ml-2",
                  openIndex === index && "rotate-180"
                )}
              />
            </button>
            {openIndex === index && (
              <motion.div
                initial={{ height: 0, opacity: 0 }}
                animate={{ height: 'auto', opacity: 1 }}
                exit={{ height: 0, opacity: 0 }}
                className="px-4 pb-4"
              >
                {faq.customContent || (
                  <p className="font-pixel text-sm text-foreground/80 leading-relaxed">{faq.answer}</p>
                )}
              </motion.div>
            )}
          </motion.div>
        ))}
      </div>
    </motion.div>
  );
};

export default FAQ;