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

function Timeline() {
  return (
    <section className="section" id="opleiding" style={{ paddingTop: 0 }}>
      <div className="container" style={{ maxWidth: 980 }}>
        <div className="eyebrow">Opleiding &amp; scholing</div>
        <h2 style={{ marginTop: 14, marginBottom: 40 }}>
          Een lijn die <em style={{ fontStyle: 'italic', color: 'var(--terra-deep)', fontWeight: 400 }}>niet recht</em> loopt.
        </h2>
        <div className="flow-steps">
          {[
          { n: "2013", h: "Bachelor Fysiotherapie", d: "Start als fysiotherapeut. Algemene musculoskeletale praktijk en revalidatie.", dur: "BSc" },
          { n: "2014", h: "CMD-therapie module 1 en 2", d: "Specialisatie cervicale, thoracale en temporomandibulaire regio.", dur: "Specialisatie" },
          { n: "2021", h: "Long- en ademtherapie", d: "COPD, astma, ademregulatie. BORG-gestuurde inspanningsopbouw.", dur: "Certificering" },
          { n: "2021", h: "Post-covid", d: "Pacing, PEM, autonome dysregulatie. Blijvend traject.", dur: "Certificering" },
          { n: "2026", h: "Nervus vagus specialisatie", d: "Polyvagal-informed practice, autonome regulatie.", dur: "Certificering" },
          { n: "2026", h: "Fuego del Útero", d: "Viscerale buikbehandeling, rebozo-werk.", dur: "Certificering" }].
          map((s, i) =>
          <div key={i} className="flow-step">
              <div className="flow-num">{s.n}</div>
              <div>
                <h3>{s.h}</h3>
                <p>{s.d}</p>
              </div>
              <div className="duration">{s.dur}</div>
            </div>)}
        </div>
      </div>
    </section>);

}

function MapBlock() {
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="container" style={{ maxWidth: 1060 }}>
        <div className="eyebrow" style={{ marginBottom: 20 }}>De praktijk</div>
        <div className="map-placeholder">
          <div className="map-placeholder-bg" />
          <div className="map-pin" />
        </div>
      </div>
    </section>);

}

function Faq() {
  const items = [
  ["Heb ik een verwijzing nodig?", "Nee. Je kunt rechtstreeks bij mij terecht, zonder verwijzing van je huisarts. Omdat ik particulier werk, is een verwijzing ook niet nodig."],
  ["Wordt mijn behandeling vergoed?", "Ik sta als therapeut geregistreerd in het Kwaliteitsregister voor Fysiotherapie, dus je ontvangt erkende, kwalitatieve zorg. De behandeling zelf wordt echter niet vergoed: declareren bij je zorgverzekering is niet mogelijk. Ik kies er bewust voor om uitsluitend particulier te werken, zodat ik volledig vanuit mijn eigen kracht en vuur kan werken, met alle tijd en aandacht die jouw herstel vraagt. Alle tarieven staan vooraf helder vermeld."],
  ["Is Fuego del Útero alleen voor vrouwen?", "Het werk is ontwikkeld rond het vrouwelijk bekken, maar mannen en mensen met andere lichamen kunnen ook viscerale buikbehandelingen krijgen, in dezelfde zachte benadering."],
  ["Hoe lang duurt een traject?", "Dat is vooraf lastig te zeggen, iedereen is anders en elk lichaam reageert op zijn eigen manier. Na de eerste intake en behandeling bespreken we samen de mogelijke opties en wat bij jou past."],
  ["Werk je ook met suppletie?", "Soms, ja. Wanneer ik merk dat suppletie iemands herstel echt kan ondersteunen, kijken we daar samen naar. Ik werk daarvoor samen met Zinzino. Belangrijk: ik start nooit zomaar iets. Eerst brengen we via een bloedonderzoek in kaart wat jouw lichaam werkelijk nodig heeft, en pas daarna stemmen we de ondersteuning daarop af."],
  ["En als ik niet kan, of vergeet te komen?", "Tot 24 uur vooraf annuleren is kosteloos. Kom je niet opdagen of zeg je te laat af, dan wordt de behandeling in rekening gebracht, omdat dat tijdsblok voor jou is vrijgehouden."]];

  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="therapies-head">
          <div>
            <div className="eyebrow">Veelgestelde vragen</div>
            <h2 style={{ marginTop: 14 }}>Praktisch.</h2>
          </div>
          <p>Wat handig is om te weten voor een eerste afspraak.</p>
        </div>
        <div className="therapy-list">
          {items.map(([q, a], i) => <FaqItem key={i} q={q} a={a} />)}
        </div>
      </div>
    </section>);

}

function FaqItem({ q, a }) {
  const [open, setOpen] = useStateE(false);
  return (
    <div className={"therapy" + (open ? " open" : "")} onClick={() => setOpen(!open)}>
      <div className="therapy-num">?</div>
      <div>
        <div className="therapy-title" style={{ fontSize: 'clamp(22px,2.4vw,30px)' }}>{q}</div>
        <div className="therapy-body">
          <div style={{ paddingTop: 20 }}>
            <p style={{ color: 'var(--ink-soft)', fontSize: 16, lineHeight: 1.7, maxWidth: '60ch' }}>{a}</p>
          </div>
        </div>
      </div>
      <button className="therapy-toggle" aria-label="open"><PlusGlyph /></button>
    </div>);

}

Object.assign(window, { Timeline, MapBlock, Faq });