import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { ArrowLeft, HelpCircle, ChevronDown, ChevronUp } from 'lucide-react';
import { Button } from '../components/Button';

interface FaqItemProps {
  question: string;
  answer: string;
}

const FaqItem: React.FC<FaqItemProps> = ({ question, answer }) => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div className="border border-gray-200 rounded-xl overflow-hidden transition-all duration-300 hover:border-primary/30">
      <button 
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-center justify-between p-5 bg-white text-left focus:outline-none"
      >
        <span className="font-semibold text-gray-900">{question}</span>
        {isOpen ? <ChevronUp className="w-5 h-5 text-primary" /> : <ChevronDown className="w-5 h-5 text-gray-400" />}
      </button>
      <div className={`bg-gray-50 px-5 transition-all duration-300 ${isOpen ? 'py-5 max-h-96 opacity-100' : 'max-h-0 py-0 opacity-0 overflow-hidden'}`}>
        <p className="text-gray-600 leading-relaxed">{answer}</p>
      </div>
    </div>
  );
};

export const FAQ: React.FC = () => {
  const navigate = useNavigate();

  const faqs = [
    {
      question: "Mennyi idő alatt készül el egy weboldal?",
      answer: "Ez a projekt összetettségétől függ. Egy egyszerűbb bemutatkozó oldal (Landing Page) általában 1-2 hét alatt elkészül, míg egy komplexebb webshop vagy egyedi fejlesztés 4-8 hetet is igénybe vehet. A pontos határidőt mindig az árajánlatban rögzítjük."
    },
    {
      question: "Kell saját domain névvel és tárhellyel rendelkeznem?",
      answer: "Nem feltétlenül. Ha még nincs, szívesen segítünk a beszerzésében és a beállításokban. Ha már van, akkor azokat használjuk. A 'Domain ügyintézés' és 'Tárhely ügyintézés' opciókat a megrendelésnél is kiválaszthatja."
    },
    {
      question: "Vannak rejtett költségek vagy havidíjak?",
      answer: "Nincsenek rejtett költségek. A fejlesztési díj egyszeri. Éves költségként a domain és tárhely díj merülhet fel (ha rajtunk keresztül intézi, akkor mi számlázzuk évente), illetve opcionálisan választható karbantartási csomagunk a folyamatos frissítésekért."
    },
    {
      question: "Kapok számlát a szolgáltatásról?",
      answer: "Természetesen. Minden szolgáltatásunkról hivatalos számlát állítunk ki, amelyet e-mailben küldünk el Önnek. Mivel alanyi adómentes (AAM) vállalkozás vagyunk, a számlán nem szerepel felszámított ÁFA, így a feltüntetett árak a teljes fizetendő összeget jelentik."
    },
    {
      question: "Tudom majd egyedül szerkeszteni az oldalt?",
      answer: "Igen! Olyan rendszereket építünk, amelyekhez kérés esetén adminisztrációs felületet biztosítunk (pl. blogbejegyzések írásához, termékek feltöltéséhez), és az átadáskor megmutatjuk a használatát."
    },
    {
      question: "Mi történik, ha elakadok vagy hibát találok?",
      answer: "Elakadás vagy technikai probléma esetén örömmel segítünk, kérjük, jelezze ezt felénk e-mailben. Amennyiben a hiba a mi oldalunkon merül fel, azt természetesen javítjuk. Ha azonban a probléma tőlünk független, vagy utólagos módosítást (pl. design változtatást) szeretne, abban is szívesen állunk rendelkezésére, de ezek a fejlesztések már nem ingyenesek."
    }
  ];

  return (
    <div className="pt-24 pb-16 min-h-screen bg-gray-50">
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <Button variant="white" onClick={() => navigate(-1)} className="mb-8 shadow-sm border border-gray-200">
          <ArrowLeft className="w-4 h-4 mr-2" /> Vissza
        </Button>

        <div className="text-center mb-12">
           <div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-6 text-primary">
              <HelpCircle className="w-8 h-8" />
           </div>
           <h1 className="text-4xl font-extrabold text-gray-900 mb-4">Gyakori Kérdések</h1>
           <p className="text-xl text-gray-600">
             Összeszedtük a leggyakrabban felmerülő kérdéseket, hogy segítsünk a döntésben.
           </p>
        </div>

        <div className="space-y-4">
          {faqs.map((faq, index) => (
            <FaqItem key={index} question={faq.question} answer={faq.answer} />
          ))}
        </div>
      </div>
    </div>
  );
};