/* global React */
const PACKAGES = [
  {
    name: 'Bronze',
    blurb: 'Jij kiest de afmeting en frequentie, wij kiezen het doek.',
    price: 'Vanaf 35,-',
    cadence: 'per maand',
    features: [
      'Doek met zorg gekozen',
      'Doek wordt met koker naar locatie gestuurd',
      'Doek zelf vervangen'
    ],
    tone: 'default'
  },
  {
    name: 'Zilver',
    blurb: 'Voor degene die zelf wilt bepalen wat er aan de muur hangt.',
    price: 'Vanaf 42,-',
    cadence: 'per maand',
    features: [
      'Vrije keuze doek',
      'Doek wordt met koker naar locatie gestuurd',
      'Doek zelf vervangen'
    ],
    tone: 'feature',
    badge: 'Populair'
  },
  {
    name: 'Goud',
    blurb: 'Jij houdt alle touwtjes in handen, wij doen het werk.',
    price: 'Vanaf 50,-',
    cadence: 'per maand',
    features: [
      'Vrije keuze doek',
      'Doek wordt naar locatie gebracht',
      'Doek wordt door ons vervangen'
    ],
    tone: 'default'
  },
  {
    name: 'Platinum',
    blurb: 'Zitten de formaten en/of frequenties die je wilt er niet tussen? Wij denken graag met je mee.',
    price: 'Op aanvraag',
    cadence: ' ',
    features: [
      'Afmetingen zoals jij het wilt',
      'Zovaak wisselen als je wilt',
      'Vrije keuze doek',
      'Doek wordt naar locatie gebracht',
      'Doek wordt door ons vervangen'
    ],
    tone: 'default'
  }
];

function Packages() {
  return (
    <section className="fw-section" id="abonnementen">
      <div className="fw-container">
        <header className="fw-packages__head">
          <span className="fw-eyebrow">Abonnementen</span>
          <h2 className="fw-h1">Frisse Pakketten</h2>
          <p className="fw-lede">Meerdere pakketten voor meerdere wensen. Waar de ene graag alles zelf doet en kiest, daar geeft de ander juist de voorkeur aan FrisseWand die het werk doet.<br/>Welk pakket je ook kiest, mooie doeken komen in ieder geval aan je muur te hangen.</p>
        </header>
        <div className="fw-packages__grid">
          {PACKAGES.map((p, i) => (
            <article key={i} className={`fw-pkg fw-pkg--${p.tone}`}>
              {p.badge && <span className="fw-pkg__badge">{p.badge}</span>}
              <h3 className="fw-pkg__name">{p.name}</h3>
              <p className="fw-pkg__blurb">{p.blurb}</p>
              <div className="fw-pkg__price">
                <span className="fw-pkg__amount">{p.price}</span>
                {p.cadence && <span className="fw-pkg__cadence">{p.cadence}</span>}
              </div>
              <ul className="fw-pkg__features">
                {p.features.map((f, j) => (
                  <li key={j}><span className="fw-pkg__check" aria-hidden="true">✓</span>{f}</li>
                ))}
              </ul>
              <a href="#contact" className={`fw-btn ${p.tone === 'feature' ? 'fw-btn--primary' : p.tone === 'ink' ? 'fw-btn--ink' : 'fw-btn--ghost'}`}>Vraag dit pakket aan</a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Packages = Packages;