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

const PHASES = [
  {
    label: 'Fase 1',
    sub: 'De eerste keer — eenmalig',
    steps: [
      { t: 'Kies je frequentie', b: 'Elke maand je kantoor verfrissen of ga je het liefste met de seizoenen mee? Alles is mogelijk!' },
      { t: 'Kies de afmeting', b: 'Met vijf zorgvuldig gekozen formaten wordt 90% van alle lege kantoorwanden ingevuld. Staat je formaat er toch niet bij? Dan kijken we graag met je mee voor een andere oplossing.' },
      { t: 'Kies het doek', b: 'Van natuurfoto\u2019s tot citylife en van artistieke zwart/wit foto\u2019s tot kleurrijke creaties, de keuze is reuze \u00e9n de collectie wordt continue vernieuwd. Heb je thema verzoeken? Wellicht wordt die de volgende periode er wel bij gezet!' }
    ]
  },
  {
    label: 'Fase 2',
    sub: 'De installatie — eenmalig',
    steps: [
      { t: 'Wij printen en leveren', b: 'En wel op locatie, zodat jij niet de deur uit hoeft.' },
      { t: 'Monteer het frame en hang het doek op', b: 'Zo makkelijk kan het zijn.' }
    ]
  },
  {
    label: 'Fase 3',
    sub: 'De rotatie — terugkerend',
    steps: [
      { t: 'Kies het doek uit voor de volgende periode', b: 'Geen stress, wel veel keuze. Toch teveel keuze? Wij geven je graag een voorzetje met onze favorieten.' },
      { t: 'Doek wordt geleverd', b: 'Als de nieuwe periode is aangebroken krijg je een verzendkoker met doek naar je locatie gestuurd.' },
      { t: "Verwissel het 'gebruikte' doek met de nieuwe", b: 'Of wij verwisselen het doek op locatie, daar draaien wij onze hand niet voor om.' },
      { t: "Stuur de koker inclusief 'gebruikte' doek terug", b: 'Zo zijn we lekker milieubewust bezig. En, niet geheel onbelangrijk: op onze kosten, uiteraard.' },
      { t: 'Geniet van je vernieuwde kantoor', b: 'Want waarom niet.' },
      { t: 'Tijd voor een nieuwe doek', b: 'Ga terug naar het begin van Fase 3: De rotatie.' }
    ]
  }
];

function Process() {
  const [open, setOpen] = useState(0);
  return (
    <section className="fw-section" id="werkwijze">
      <div className="fw-container">
        <header className="fw-process__head">
          <span className="fw-eyebrow">Werkwijze</span>
          <h2 className="fw-h1 fw-process__title">Zo makkelijk werkt FrisseWand</h2>
          <p className="fw-lede">Eén keer opzetten, daarna wisselen wanneer je wilt.<br/>Maar als je nog een stappenplan wilt kan je die hieronder vinden.<br/>We werken namelijk in 3 fases:</p>
        </header>

        <div className="fw-process">
          {PHASES.map((phase, i) => (
            <article key={i} className={`fw-phase ${open === i ? 'is-open' : ''}`}>
              <button className="fw-phase__head" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span className="fw-phase__label">{phase.label}</span>
                <span className="fw-phase__sub">{phase.sub}</span>
                <span className="fw-phase__chevron" aria-hidden="true">{open === i ? '–' : '+'}</span>
              </button>
              {open === i && (
                <ol className="fw-phase__steps">
                  {phase.steps.map((s, j) => (
                    <li key={j} className="fw-step">
                      <span className="fw-step__num fw-mono">{String(j+1).padStart(2,'0')}</span>
                      <div>
                        <h4 className="fw-h4">{s.t}</h4>
                        <p>{s.b}</p>
                      </div>
                    </li>
                  ))}
                </ol>
              )}
            </article>
          ))}
        </div>

        <div className="fw-process__matrix">
          <div className="fw-card">
            <h3 className="fw-h2">Frequentie</h3>
            <p className="fw-meta">Verandering is nooit verkeerd</p>
            <ul className="fw-list">
              <li>Jaarlijks (1 wissel per jaar)</li>
              <li>Half jaarlijks (2 wissels per jaar)</li>
              <li>Kwartaal (4 wissels per jaar)</li>
              <li>Geen vaste frequentie (vanaf platinum pakket)</li>
            </ul>
          </div>
          <div className="fw-card">
            <h3 className="fw-h2">Formaten</h3>
            <p className="fw-meta">Voor iedere locatie wat wils</p>
            <ul className="fw-list fw-list--mono">
              <li>90×60</li>
              <li>120×80</li>
              <li>150×100</li>
              <li>200×100</li>
              <li>240×120</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Process = Process;