/* eslint-disable */
/* global React, Reveal, Stagger, Bars */

function Services() {
  const cols = [
    {
      num: '01',
      title: 'Mechanical',
      items: [
        'General Mechanical Servicing and Repairs',
        'Logbook Servicing',
        'Diagnostic Work',
        'Suspension Repairs and Maintenance',
        'Clutch Repairs and Replacement',
        'Brake and Driveline Repairs and Maintenance',
      ],
    },
    {
      num: '02',
      title: 'Performance & Fabrication',
      items: [
        'Engine Builds',
        'ECU Upgrades and Installation',
        'Turbocharger Upgrades',
        'Fuel System Upgrades',
        'Driveline Upgrades',
        'Brake Upgrades',
        'Custom Wiring and Electrical Work',
        'Motorsport Wiring',
        'Rollcage Fabrication',
        'Exhaust Fabrication',
        'Aluminium Fabrication',
        'Motorsport and Track Car Preparation',
      ],
    },
    {
      num: '03',
      title: 'Dyno Tuning',
      items: [
        'Carburettor Tuning',
        'Standalone ECU Tuning',
        'OEM ECU Reflashing',
        'OEM ECU Tuning',
        'Dyno Hire and Power Runs',
        'Diagnostics and Fault Finding',
      ],
    },
  ];

  return (
    <section id="services" className="section">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <hr className="hr-gold" />
            <span className="eyebrow">Services</span>
            <h2>What we do.</h2>
          </div>
        </Reveal>

        <Stagger className="services__grid" step={120}>
          {cols.map((c) => (
            <div className="svc-col" key={c.title}>
              <div className="svc-col__head">
                <Bars size="md" />
                <div className="svc-col__num">{c.num} —</div>
                <h3 className="svc-col__title">{c.title}</h3>
              </div>
              <ul className="svc-list">
                {c.items.map((it) => (
                  <li className="svc-item" key={it}>
                    <span className="svc-item__bullet" aria-hidden="true"></span>
                    <span className="svc-item__text">{it}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </Stagger>
      </div>
    </section>
  );
}

window.Services = Services;