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 a honlap?",
      answer: "A MotionWeb félautomata technológiájának köszönhetően egy Landing Page akár 1-3 munkanap alatt elkészülhet. Egy összetettebb, többoldalas professzionális weboldal fejlesztése általában 1-2 hetet vesz igénybe. Ez változhat adott weboldal komplexitásától és funkcióitól függően így konkrét határidőt nem vállalunk."
    },
    {
      question: "Szükséges saját domain név és tárhely?",
      answer: "Nem feltétlenül. Teljes körű domain és tárhely ügyintézést biztosítunk, így Önnek a technikai beállításokkal nem kell foglalkoznia. Ha már rendelkezik ezekkel, természetesen azokhoz illesztjük az új oldalt."
    },
    {
      question: "Vannak rejtett költségek vagy havidíjak?",
      answer: "Nincsenek rejtett költségek. A weboldalkészítés díja egyszeri költség, nincs kötelező havidíj. Éves szinten csupán a domain és a tárhely fenntartási díja merül fel, amit átláthatóan kommunikálunk."
    },
    {
      question: "Kapok hivatalos számlát a szolgáltatásról?",
      answer: "Igen. Minden szolgáltatásunkról hivatalos számlát állítunk ki. Alanyi adómentes (AAM) vállalkozásként a feltüntetett árak a ténylegesen fizetendő végösszeget jelentik, nem számítunk fel plusz ÁFA-t."
    },
    {
      question: "Tudom majd önállóan szerkeszteni az oldalt?",
      answer: "Igen. Olyan rendszert adunk át, ahol kódolási tudás nélkül is egyszerűen szerkesztheti a szövegeket és képeket kérés, illetve igény esetén. Az átadáskor rövid oktatást is biztosítunk a kezelőfelülethez."
    },
    {
      question: "Milyen támogatást kapok a fejlesztés után?",
      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('/')} 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>
  );
};