/* eslint-disable */
/* global React, Reveal, Stagger, Bars, prefersReducedMotion */
const { useEffect: useEffHero, useRef: useRefHero, useState: useStateHero } = React;

function Hero() {
  // Animate the background bars in on load (staggered draw-in)
  const barsRef = useRefHero(null);
  useEffHero(() => {
    if (!barsRef.current) return;
    if (prefersReducedMotion) {
      barsRef.current.querySelectorAll('.hero__bar').forEach((el) => {
        el.style.transform = 'scaleX(1)';
      });
      return;
    }
    const bars = barsRef.current.querySelectorAll('.hero__bar');
    bars.forEach((el, i) => {
      el.style.transform = 'scaleX(0)';
      el.style.transition = `transform 1100ms cubic-bezier(0.16,1,0.3,1) ${200 + i * 110}ms`;
      requestAnimationFrame(() => requestAnimationFrame(() => {
        el.style.transform = 'scaleX(1)';
      }));
    });
  }, []);

  return (
    <section id="top" className="hero">
      <div className="hero__bars" ref={barsRef} aria-hidden="true">
        <div className="hero__bar"></div>
        <div className="hero__bar"></div>
        <div className="hero__bar"></div>
        <div className="hero__bar"></div>
        <div className="hero__bar"></div>
        <div className="hero__bar"></div>
        <div className="hero__bar"></div>
      </div>

      <div className="hero__inner">
        <div className="hero__content">
          <Reveal delay={80}>
            <div className="eyebrow-row">
              <Bars size="sm" />
              <span className="eyebrow">Hobart · Performance Workshop</span>
            </div>
          </Reveal>

          <h1 className="hero__title">
            <Reveal delay={180}><span style={{ display: 'block' }}>Built in-house.</span></Reveal>
            <Reveal delay={320}><span className="gold" style={{ display: 'block' }}>Proven on the dyno.</span></Reveal>
          </h1>

          <Reveal delay={520}>
            <p className="hero__lede">
              Hobart performance workshop. Mechanical, fabrication, ECU and dyno tuning —
              all under one roof.
            </p>
          </Reveal>

          <Reveal delay={660}>
            <div className="hero__pillars">
              <span className="hero__pillar">Mechanical</span>
              <span className="hero__pillar"><span className="dot"></span>Performance</span>
              <span className="hero__pillar"><span className="dot"></span>Fabrication</span>
              <span className="hero__pillar"><span className="dot"></span>Dyno Tuning</span>
            </div>
          </Reveal>

          <Reveal delay={800}>
            <div className="hero__cta">
              <button className="btn btn--primary" onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}>Enquire</button>
              <button className="btn btn--ghost" onClick={() => document.getElementById('builds')?.scrollIntoView({ behavior: 'smooth' })}>
                See Recent Work <span className="btn__rule"></span>
              </button>
            </div>
          </Reveal>
        </div>

        <Reveal delay={420} className="hero__media-wrap">
          <div className="hero__media hero__media--has-image">
            <img src="assets/hero-s15.webp" alt="Platinum Tuning workshop S15" className="hero__media__img" />
            <div className="hero__media__corner-br"></div>
          </div>
        </Reveal>
      </div>

      <div className="hero__scroll" aria-hidden="true">
        <span>Scroll</span>
        <span className="hero__scroll__line"></span>
      </div>
    </section>
  );
}

window.Hero = Hero;