// Hero — saara Urdu, behtar animation:
//  - city background crossfades + Ken-Burns slow zoom
//  - headline letters/words fade-up in sequence
//  - "مشہور" wordmark mein photo strip horizontal scroll karti rehti hai
//  - subtle parallax: pointer ke saath wordmark thoda tilt
//  - tail "ہے" alag se entrance karta hai
//  - bottom rail: shehr ki list, active wala highlight, click se jump

const { useState, useEffect, useRef, useCallback } = React;

function Hero() {
  const cities = window.MASHOOR_CITIES;
  const [i, setI] = useState(0);
  const [paused, setPaused] = useState(false);
  const stageRef = useRef(null);
  const [tilt, setTilt] = useState({ x: 0, y: 0 });

  useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setI(v => (v + 1) % cities.length), 5000);
    return () => clearInterval(t);
  }, [paused, cities.length]);

  const onMove = useCallback((e) => {
    const r = stageRef.current?.getBoundingClientRect();
    if (!r) return;
    const x = (e.clientX - r.left) / r.width - 0.5;
    const y = (e.clientY - r.top) / r.height - 0.5;
    setTilt({ x, y });
  }, []);

  const c = cities[i];
  // split urItem into connector ("کا"/"کے"/"کی") + rest
  const parts = c.urItem.trim().split(/\s+/);
  const connector = parts[0];
  const item = parts.slice(1).join(' ');

  return (
    <section className="hero" data-screen-label="۰۱ ہیرو" onMouseMove={onMove}>
      {/* Crossfading skyline */}
      <div className="hero__bgs" aria-hidden="true">
        {cities.map((city, idx) => (
          <div
            key={city.ur}
            className={"hero__bg" + (idx === i ? " is-active" : "")}
            style={{ backgroundImage: `url(${city.bg})` }}
          />
        ))}
        <div className="hero__wash" />
        <div className="hero__grain" />
      </div>

      {/* Vertical side label — date + reel index */}
      <div className="hero__side hero__side--left" aria-hidden="true">
        <span>شمارہ {window.urNum(i + 1)} / {window.urNum(cities.length)}</span>
      </div>
      <div className="hero__side hero__side--right" aria-hidden="true">
        <span>پاکستان · ۲۰۲۶</span>
      </div>

      {/* Top chrome */}
      <header className="hero__chrome">
        <a className="brand" href="#" aria-label="مشہور">
          <span className="brand__mark">
            <img src="assets/mashoor-logo.png" alt="مشہور" />
          </span>
        </a>
        <nav className="navlinks">
          <a href="#manifesto">منشور</a>
          <a href="#directory">فہرست</a>
          <a href="#how">طریقۂ کار</a>
          <a href="#download" className="navlinks__cta">
            <span>ایپ ڈاؤن لوڈ کریں</span>
            <span className="navlinks__cta-arrow">←</span>
          </a>
        </nav>
      </header>

      {/* Stage */}
      <div
        className="hero__stage"
        ref={stageRef}
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
      >
        {/* Eyebrow */}
        <div className="hero__eyebrow">
          <span className="hero__eyebrow-dot" aria-hidden="true" />
          <span>پاکستان کا مشہور بازار</span>
          <span className="hero__eyebrow-dot" aria-hidden="true" />
        </div>

        {/* The composed line */}
        <div className="hero__line" key={i}>
          <span className="hero__word hero__word--city">{c.ur}</span>
          <span className="hero__word hero__word--connector">{connector}</span>
          <span className="hero__word hero__word--item">{item}</span>
        </div>

        {/* Wordmark — photo-filled PNG with tilt parallax */}
        <div
          className="wordmark"
          aria-label="مشہور"
          style={{
            transform: `perspective(1200px) rotateY(${tilt.x * 4}deg) rotateX(${-tilt.y * 4}deg)`,
          }}
        >
          <img src="assets/mashoor-logo.png" alt="مشہور" />
        </div>

        {/* Tail */}
        <div className="hero__tail" key={"tail-" + i}>ہے</div>

        {/* Sub-line */}
        <div className="hero__sub" key={"sub-" + i}>
          <span className="hero__sub-line" aria-hidden="true" />
          <span>اپنے شہر کی پہچان، براہِ راست وینڈر سے آپ کی دہلیز تک</span>
          <span className="hero__sub-line" aria-hidden="true" />
        </div>
      </div>

      {/* City rail */}
      <div className="hero__rail">
        <button className="rail__arrow" onClick={() => setI((i - 1 + cities.length) % cities.length)} aria-label="پچھلا">‹</button>
        <ol className="rail__list">
          {cities.map((city, idx) => (
            <li key={city.ur} className={idx === i ? 'is-active' : ''}>
              <button onClick={() => setI(idx)}>
                <span className="rail__num">{window.urNum(idx + 1).padStart(2, '۰')}</span>
                <span className="rail__city">{city.ur}</span>
                <span className="rail__item">{city.urItem.replace(/^(کا|کے|کی)\s/, '')}</span>
              </button>
            </li>
          ))}
        </ol>
        <button className="rail__arrow" onClick={() => setI((i + 1) % cities.length)} aria-label="اگلا">›</button>
      </div>

      {/* Auto-progress bar */}
      <div className="hero__progress" aria-hidden="true">
        <div
          className={`hero__progress-fill ${paused ? 'is-paused' : ''}`}
          key={`${i}-${paused}`}
        />
      </div>

      {/* Scroll cue */}
      <div className="hero__scroll" aria-hidden="true">
        <span>نیچے دیکھیں</span>
        <span className="hero__scroll-line" />
      </div>
    </section>
  );
}

window.Hero = Hero;