// Hero — 3 modes: video / collage / map

const HeroVideo = () => (
  <>
    <div className="hero-media" aria-hidden="true">
      <video autoPlay muted loop playsInline poster={IMG.hero}
             style={{ width: '100%', height: '100%', objectFit: 'cover' }}>
        <source src="https://cdn.coverr.co/videos/coverr-mountains-at-sunset-6612/1080p.mp4" type="video/mp4" />
      </video>
      <div className="hero-img" style={{ position: 'absolute', inset: 0, backgroundImage: `url(${IMG.hero})`, zIndex: -1 }} />
    </div>
    <div className="hero-overlay" />
  </>
);

const COLLAGE = [
  { img: IMG.hunza, label: "Attabad · GB" },
  { img: IMG.turkey, label: "Cappadocia · TR" },
  { img: IMG.umrah, label: "Haram · SA" },
  { img: IMG.europe, label: "Alps · CH" },
  { img: IMG.dubai, label: "Downtown · DXB" },
];

const HeroCollage = () => (
  <>
    <div className="hero-collage" aria-hidden="true">
      {COLLAGE.map((t, i) => (
        <div className="tile" key={i}>
          <div className="tile-img" style={{ backgroundImage: `url(${t.img})` }} />
          <span className="tile-label">{t.label}</span>
        </div>
      ))}
    </div>
    <div className="hero-overlay" style={{ background: 'linear-gradient(180deg, rgba(11,30,63,0.55), rgba(11,30,63,0.82))' }} />
  </>
);

const HeroMap = () => {
  // Abstract dotted topographic map with travel pins
  return (
    <div className="hero-map" aria-hidden="true">
      <svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id="dots" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
            <circle cx="12" cy="12" r="1" fill="rgba(255,255,255,0.35)" />
          </pattern>
          <radialGradient id="vig" cx="50%" cy="50%" r="70%">
            <stop offset="0%" stopColor="transparent" />
            <stop offset="100%" stopColor="#05112A" />
          </radialGradient>
        </defs>
        <rect width="1200" height="800" fill="url(#dots)" />
        {/* abstract curved routes */}
        <path d="M 180 520 Q 380 280 600 340 T 1020 260" fill="none" stroke="#FF6B35" strokeWidth="1.2" strokeDasharray="3 5" opacity="0.7" />
        <path d="M 220 600 Q 500 560 780 480 T 1080 520" fill="none" stroke="#0EA5E9" strokeWidth="1.2" strokeDasharray="3 5" opacity="0.55" />
        <path d="M 300 240 Q 500 400 680 300 T 960 420" fill="none" stroke="rgba(255,255,255,0.4)" strokeWidth="1" strokeDasharray="2 6" />
        <rect width="1200" height="800" fill="url(#vig)" />
      </svg>
      <div className="pin" style={{ left: '18%', top: '55%' }}><span className="dot" />LHE</div>
      <div className="pin" style={{ left: '42%', top: '35%' }}><span className="dot" />GIL</div>
      <div className="pin" style={{ left: '68%', top: '48%' }}><span className="dot" />DXB</div>
      <div className="pin" style={{ left: '84%', top: '28%' }}><span className="dot" />IST</div>
    </div>
  );
};

const Hero = ({ mode = 'video' }) => {
  const goTo = (id) => () => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
  <section className="hero" id="top">
    {mode === 'video' && <HeroVideo />}
    {mode === 'collage' && <HeroCollage />}
    {mode === 'map' && <HeroMap />}
    <div className="container hero-inner">
      <div>
        <span className="hero-eyebrow"><span className="dot" />Boarding Pass · Lahore, PK → The World</span>
        <h1 className="hero-title">Explore Pakistan<br/>& <em>Beyond</em>, with Departures.pk</h1>
        <p className="hero-sub">Tailor-made itineraries, hand-picked hotels, and drivers who know the mountain roads by heart. Whether it's a honeymoon in Hunza or a 14-day circuit through Europe — we plan the trip, you pack the bag.</p>
        <div className="hero-ctas">
          <button className="btn btn-primary btn-lg" onClick={goTo('calc')}>Plan my trip <IconArrowRight size={16} /></button>
          <button className="btn btn-ghost btn-lg" onClick={goTo('tours')}>View tour packages</button>
        </div>
        <div className="hero-trust">
          <div className="trust-stat"><div className="k">10,000<span style={{ color: 'var(--brand-orange)' }}>+</span></div><span className="l">Happy travellers</span></div>
          <div className="trust-stat"><div className="k">150<span style={{ color: 'var(--brand-orange)' }}>+</span></div><span className="l">Curated itineraries</span></div>
          <div className="trust-stat"><div className="k">4.9<span style={{ color: 'var(--brand-orange)' }}>★</span></div><span className="l">From 800+ reviews</span></div>
          <div className="trust-stat"><div className="k">Regd.</div><span className="l">Govt. of Pakistan · GoP</span></div>
        </div>
      </div>
    </div>
  </section>
  );
};

Object.assign(window, { Hero });