workshopclaudecode/src/components/FAQ.jsx

/**
 * 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."
    }
  ];

  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;