/* global React, Reveal, Availability, Counter */
const { useState, useEffect, useRef } = React;

function HeroHeadline() {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => { if (entries[0].isIntersecting) { setShown(true); io.disconnect(); } },
      { threshold: 0.15 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <h1 ref={ref} className={`pc-hero__head pc-h1 pc-hero__headline ${shown ? "is-shown" : ""}`}>
      <span className="pc-hl" style={{"--hl-delay": "0ms"}}>Experienced Civil Operator.</span>
      <span className="pc-hl" style={{"--hl-delay": "130ms"}}>Serious Machine Capability.</span>
      <span className="pc-hl" style={{"--hl-delay": "260ms"}}><em>Easy Hire.</em></span>
    </h1>
  );
}

function Hero() {
  const sectionRef = useRef(null);
  useEffect(() => {
    const onScroll = () => {
      if (sectionRef.current) {
        sectionRef.current.style.setProperty("--hero-parallax", `${window.scrollY * 0.13}px`);
      }
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const trust = [
    { v: "17 yrs", l: "Operator experience" },
    { v: "SA wide", l: "Coverage" },
    { v: "Civil", l: "Earthworks" },
    { v: "Wet hire", l: "Operator + machine" },
    { v: "Major", l: "Project background" },
  ];

  return (
    <section id="top" className="pc-hero" ref={sectionRef}>
      <div className="pc-container">

        <Reveal className="pc-hero__topline">
          <span className="pc-hero__coord" aria-label="Location: Adelaide, South Australia">
            <svg className="pc-hero__coord-scope" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
              <circle cx="12" cy="12" r="7"/>
              <line x1="22" y1="12" x2="16" y2="12"/>
              <line x1="8"  y1="12" x2="2"  y2="12"/>
              <line x1="12" y1="2"  x2="12" y2="8"/>
              <line x1="12" y1="16" x2="12" y2="22"/>
            </svg>
            <span className="pc-mono pc-hero__coord-num">-34.9285° S</span>
            <span className="pc-hero__coord-sep" aria-hidden="true" />
            <span className="pc-mono pc-hero__coord-num">138.6007° E</span>
            <span className="pc-hero__coord-city">Adelaide, SA</span>
          </span>
          <Availability label="Wet hire enquiries open" />
        </Reveal>

        <HeroHeadline />

        <div className="pc-hero__row">
          <Reveal className="pc-hero__lead" delay={160}>
            <p className="pc-lead">
              Wet machine hire and civil earthworks support for builders, trades,
              councils and construction teams across South Australia.
            </p>
            <div className="pc-hero__cta">
              <a className="pc-btn pc-btn--primary" href="tel:+61459235860">
                <svg className="pc-btn__arrow" viewBox="0 0 24 24" aria-hidden="true" style={{transform:"none"}}>
                  <path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z" />
                </svg>
                <span>Call Pathway Civil</span>
              </a>
              <a className="pc-btn pc-btn--accent" href="#contact">
                <span>Send the scope</span>
                <svg className="pc-btn__arrow" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M5 12h14" /><path d="M13 6l6 6-6 6" />
                </svg>
              </a>
            </div>
          </Reveal>

          <Reveal className="pc-hero__stat" delay={220}>
            <div className="pc-hero__stat-num"><Counter to={17} /></div>
            <div className="pc-hero__stat-lbl">
              <div>Years of operator experience</div>
              <div className="pc-hero__stat-sub">Across major civil and infrastructure projects in SA.</div>
            </div>
          </Reveal>
        </div>

        <Reveal className="pc-hero__band pc-hero__band--5" delay={280}>
          {trust.map((t) => (
            <div key={t.l}>
              <span className="pc-mono">{t.v}</span>
              <span>{t.l}</span>
            </div>
          ))}
        </Reveal>

      </div>
    </section>
  );
}

window.Hero = Hero;