/* global React */
const { useState } = React;

const FAQ_ITEMS = [
  {
    q: 'In een notendop: Hoe werkt het?',
    a: 'FrisseWand zorgt ervoor dat je regelmatig op kantoor hoogwaardige foto\u2019s op grote formaten ontvangt. Jij kiest de frequentie en eventueel het doek, wij regelen de rest, zodat je ruimte altijd fris en inspirerend blijft.'
  },
  {
    q: 'Hoe wordt het doek geleverd?',
    a: (
      <>
        <p>Indien je kiest voor het <strong>bronze</strong> of <strong>zilveren</strong> pakket krijg je inderdaad een verzendkoker naar je locatie gestuurd. Jij vervangt het ‘gebruikte doek’ met het nieuwe doek en stuurt het ‘gebruikte doek’ weer op naar ons. Retourkosten zijn voor ons.</p>
        <p>Kies je voor het <strong>gouden</strong> of <strong>platinum</strong> pakket? Dan komen wij het doek vervangen. Overal in Nederland. In een straal van 20 kilometer rondom Amsterdam rekenen wij geen reis- en ophangkosten. Zit je kantoor verder dan 20 kilometer rijden? Laat het ons weten, dan rekenen we het voor je uit.</p>
        <p className="fw-meta">Een verzendkoker is een stevige, cilindervormige kartonnen verpakking die speciaal is ontworpen om lange, smalle producten veilig te verzenden. Ze bieden optimale bescherming tegen vouwen, kreukels en andere transportschade.</p>
      </>
    )
  },
  {
    q: "Wie maakt de foto's?",
    a: 'De foto\u2019s die gebruikt worden voor FrisseWand zijn onderdeel van Robert de Groot z\u2019n portfolio. Wat begon als hobby bleek een schot in de roos. Robert fotografeert nu al geruime tijd op professioneel vlak (vooral corporate, commercial, real estate en events) en in zijn vrije tijd reist hij graag. Uiteraard gaat de camera dan mee want fotograferen blijft een hobby en die foto\u2019s? Die zijn hier te bewonderen.'
  },
  {
    q: "Kan ik zelf de foto's uitzoeken?",
    a: 'Zeker! Vanaf het zilver pakket kun je specifieke thema\u2019s of onderwerpen kiezen, zodat de beelden aansluiten bij de identiteit van jouw bedrijf. Maar ook bij het bronze pakket zullen we met je meedenken, enige is dat wij beslissen welk doek je kant op komt. Geef je voorkeuren door bij het starten van je abonnement.'
  },
  {
    q: "Ik wil graag FrisseWand aan de muur, maar dan wel foto's van uit de regio van het bedrijf. Is dat mogelijk?",
    a: 'Maatwerk is zonder twijfel mogelijk én iets wat we leuk vinden om te doen. Neem contact met ons op, dan bespreken we samen de mogelijkheden.'
  },
  {
    q: 'Zit het frame in het maandbedrag?',
    a: 'Nee, het frame komt bij de eerste factuur erbij. Dit is eenmalig, daarna betaal je gewoon het maandbedrag.'
  },
  {
    q: 'Ik betaal de eerste keer eenmalig voor het frame, betekent dat het frame daarna van mij is?',
    a: 'Klopt! Er is een eenmalige aanschaf van het frame om FrisseWand te kunnen gebruiken. Als hij eenmaal hangt kan je elke keer weer een nieuw doek gebruiken, wel zo fijn.'
  },
  {
    q: 'Wat als het toch niets voor mij is?',
    a: 'Dat zouden we natuurlijk erg jammer vinden om te horen, maar dat kan uiteraard gebeuren. Het abonnement wordt elk jaar vernieuwd en kan dus ook voorafgaand aan de nieuwe periode opgezegd worden.'
  }
];

function FAQItem({ item, open, onToggle }) {
  return (
    <div className={`fw-faq__item ${open ? 'is-open' : ''}`}>
      <button className="fw-faq__q" onClick={onToggle} aria-expanded={open}>
        <span>{item.q}</span>
        <span className="fw-faq__plus" aria-hidden="true">{open ? '–' : '+'}</span>
      </button>
      {open && <div className="fw-faq__a">{typeof item.a === 'string' ? <p>{item.a}</p> : item.a}</div>}
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="fw-section" id="faq">
      <div className="fw-container fw-faq__layout">
        <header className="fw-faq__head">
          <span className="fw-eyebrow">FAQ</span>
          <h2 className="fw-h1">Nog vragen?<br/>Hier wat antwoorden:</h2>
          <p className="fw-h4 fw-faq__sub">Duidelijkheid is altijd fijn.</p>
        </header>
        <div className="fw-faq__list">
          {FAQ_ITEMS.map((it, i) => (
            <FAQItem key={i} item={it} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;