/**
 * FAQ.jsx - "Veelgestelde vragen" sectie
 *
 * Accordion component met 6 FAQ items.
 * Klikbaar om te openen/sluiten met chevron icon animatie.
 */

import { useState } from 'react';

function FAQ() {
  // State om bij te houden welke items open zijn
  // We gebruiken een array zodat meerdere items tegelijk open kunnen
  const [openItems, setOpenItems] = useState([]);

  // Toggle functie voor een item
  const toggleItem = (index) => {
    if (openItems.includes(index)) {
      // Item is al open, sluit het
      setOpenItems(openItems.filter(i => i !== index));
    } else {
      // Item is dicht, open het
      setOpenItems([...openItems, index]);
    }
  };

  // FAQ items uit de content
  const faqItems = [
    {
      question: "Ik heb nog nooit geprogrammeerd. Kan ik meedoen?",
      answer: "Ja. Claude Code is juist gemaakt voor mensen zonder technische achtergrond. Je typt wat je wilt, Claude Code doet het zware werk. De workshop is specifiek ontworpen voor niet-programmeurs."
    },
    {
      question: "Wat is een Claude Pro of Max account en waarom heb ik dat nodig?",
      answer: "Dit is een betaald abonnement bij Anthropic (het bedrijf achter Claude). Pro kost ongeveer 20 euro per maand, Max ongeveer 100 euro. Je hebt dit nodig om Claude Code te kunnen gebruiken. Aanmelden kan via claude.ai."
    },
    {
      question: "Moet ik iets voorbereiden?",
      answer: "Je ontvangt vooraf een korte handleiding om Claude Code te installeren. Lukt dat niet? Geen probleem, we helpen je aan het begin van de workshop."
    },
    {
      question: "Wat voor project ga ik bouwen?",
      answer: "Dat bepaal je zelf. Vooraf bespreken we kort wat voor jou relevant is. Denk aan: een simpele website, een automatisering, een tool die je dagelijks werk makkelijker maakt. We zorgen dat het haalbaar is binnen de tijd."
    },
    {
      question: "Kan ik mijn geld terugkrijgen als ik niet kan komen?",
      answer: "Bij annulering meer dan 14 dagen voor de workshop krijg je het volledige bedrag terug. Tussen 7 en 14 dagen voor de workshop is dat 50%. Binnen 7 dagen is geen restitutie mogelijk, maar je mag altijd iemand anders in je plaats sturen."
    },
    {
      question: "Ik heb al wat ervaring met Claude. Is dit dan niet te basic?",
      answer: "De workshop begint bij de basis, maar gaat vrij snel naar de interessantere features zoals agents en skills. Je werkt aan je eigen tempo en project, dus ook met voorkennis haal je er genoeg uit."
    },
    {
      question: "Is 399 euro niet veel voor een halve dag?",
      answer: "Je betaalt niet voor een halve dag, maar voor het overslaan van weken zelf uitzoeken. De meeste deelnemers besparen die investering binnen een maand door tools die ze zelf bouwen in plaats van inhuren. Plus: je hebt daarna toegang tot de community voor vragen."
    },
    {
      question: "Ik ben geen techbedrijf. Heeft Claude Code dan wel zin voor mij?",
      answer: "Juist wel. De meeste deelnemers zijn coaches, consultants, marketeers of dienstverleners. Claude Code is het nuttigst als je regelmatig terugkerende taken hebt die je nu handmatig doet, of een idee hebt voor een tool die voor jouw business van pas zou komen."
    },
    {
      question: "Wat als ik na de workshop ergens niet uitkom?",
      answer: "Je krijgt toegang tot een besloten community waar je vragen kunt stellen. Andere deelnemers en Frank helpen je verder. Je staat er na de workshop niet alleen voor."
    },
    {
      question: "Er staan genoeg tutorials online. Waarom zou ik hiervoor betalen?",
      answer: "Tutorials laten zien hoe het bij iemand anders werkt. In de workshop bouw je iets voor jouw eigen bedrijf, met directe hulp als je vastloopt. Dat scheelt je de frustratie van uren solo experimenteren zonder feedback."
    },
    {
      question: "Hoe snel kan ik na de workshop iets bruikbaars maken?",
      answer: "Tijdens de workshop al. Je gaat naar huis met een werkend project dat je de maandag erna kunt gebruiken. De meeste deelnemers bouwen in de weken erna zelfstandig verder omdat ze dan snappen hoe het werkt."
    }
  ];

  return (
    <section className="section-alt">
      <div className="container-page">
        {/* Section title */}
        <h2 className="heading-2 text-center mb-12">
          Veelgestelde vragen
        </h2>

        {/* FAQ accordion */}
        <div className="max-w-3xl mx-auto space-y-4">
          {faqItems.map((item, index) => {
            const isOpen = openItems.includes(index);

            return (
              <div
                key={index}
                className="bg-white rounded-xl border border-warm-200 overflow-hidden"
              >
                {/* Question button */}
                <button
                  onClick={() => toggleItem(index)}
                  className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-warm-50 transition-colors"
                  aria-expanded={isOpen}
                >
                  <span className="font-semibold text-warm-900 pr-4">
                    {item.question}
                  </span>

                  {/* Chevron icon - roteert bij open */}
                  <svg
                    className={`w-5 h-5 text-coral-500 flex-shrink-0 transition-transform duration-200 ${
                      isOpen ? 'rotate-180' : ''
                    }`}
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M19 9l-7 7-7-7"
                    />
                  </svg>
                </button>

                {/* Answer - conditionally rendered */}
                {isOpen && (
                  <div className="px-6 pb-4">
                    <p className="text-warm-600 leading-relaxed">
                      {item.answer}
                    </p>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

export default FAQ;