/* eslint-disable */
/* global React, Reveal, useInView, prefersReducedMotion */

function Builds() {
  const builds = [
    { cls: 'b-1', car: 'Nissan R32 GT-R', work: 'Engine rebuild · turbo upgrade · ECU', img: 'assets/builds/01-r32-gtr.webp' },
    { cls: 'b-2', car: 'Subaru WRX STI', work: 'Full build · 412 kW @ wheels', img: 'assets/builds/02-wrx-sti.webp' },
    { cls: 'b-3', car: 'Mitsubishi Evo IX', work: 'Motorsport prep · cage compatible', img: 'assets/builds/03-evo-ix.webp' },
    { cls: 'b-4', car: 'Toyota Supra A80', work: '2JZ rebuild · standalone wiring', img: 'assets/builds/04-supra-a80.webp' },
    { cls: 'b-5', car: 'Holden VF SS', work: 'Cam package · dyno tune', img: 'assets/builds/05-vf-ss.webp' },
    { cls: 'b-6', car: 'Ford BA XR6 Turbo', work: 'Fuel system · 380 kW street', img: 'assets/builds/06-ba-xr6.webp' },
  ];

  const [gridRef, inView] = useInView({ threshold: 0.15 });
  const visible = inView || prefersReducedMotion;

  return (
    <section id="builds" className="section" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <Reveal>
          <div className="section-head">
            <hr className="hr-gold" />
            <span className="eyebrow">Recent work</span>
            <h2>Recent builds.</h2>
            <p>A sample of recent work — daily drivers, weekend cars, and dedicated motorsport machines. Full gallery on Instagram.</p>
          </div>
        </Reveal>

        <div className="builds__grid" ref={gridRef}>
          {builds.map((b, i) => (
            <div
              className={'build ' + b.cls}
              key={b.car}
              style={{
                opacity: visible ? 1 : 0,
                transform: visible ? 'translate3d(0,0,0)' : 'translate3d(0,16px,0)',
                transition: `opacity 700ms cubic-bezier(0.16,1,0.3,1) ${i * 90}ms, transform 700ms cubic-bezier(0.16,1,0.3,1) ${i * 90}ms, border-color 200ms cubic-bezier(0.65,0,0.35,1)`,
                willChange: 'opacity, transform',
              }}
            >
              <img src={b.img} alt={b.car} className="build__img" loading="lazy" />
              <div className="build__corner" aria-hidden="true"></div>
              <div className="build__caption">
                <h3 className="build__car">{b.car}</h3>
                <span className="build__work">{b.work}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Builds = Builds;