import React, { useEffect, useRef } from "react"
import styles from "./drone.module.css"

export default function Drone() {
  const videoRef = useRef<HTMLVideoElement | null>(null)
  const sourceRef = useRef<HTMLSourceElement | null>(null)

  useEffect(() => {
    function setVideoDroneQuality() {
      if (!sourceRef.current || !videoRef.current) return

      const videoSources = {
        fullHD: "static/home/video/drone-background-video-1080p.mp4", // For desktops (1920x1080)
        hd: "static/home/video/drone-background-video-720p.mp4",      // For tablets/smaller screens (1280x720)
        lowRes: "static/home/video/drone-background-video-480p.mp4"   // For mobile devices or low performance (854x480)
      }

      const screenWidth = window.innerWidth

      // Pick appropriate source
      if (screenWidth >= 1920) {
        sourceRef.current.src =
          "https://vontor-cz.s3.eu-central-1.amazonaws.com/" + videoSources.fullHD
      } else if (screenWidth >= 1280) {
        sourceRef.current.src =
          "https://vontor-cz.s3.eu-central-1.amazonaws.com/" + videoSources.hd
      } else {
        sourceRef.current.src =
          "https://vontor-cz.s3.eu-central-1.amazonaws.com/" + videoSources.lowRes
      }

      // Reload video
      videoRef.current.load()
      console.log("Drone video set!")
    }

    // Run once on mount
    setVideoDroneQuality()

    // Optional: rerun on resize
    window.addEventListener("resize", setVideoDroneQuality)
    return () => {
      window.removeEventListener("resize", setVideoDroneQuality)
    }
  }, [])

  return (
    <div className={`${styles.drone}`}>
      <video
        ref={videoRef}
        id="drone-video"
        className={styles.videoBackground}
        autoPlay
        muted
        loop
        playsInline
      >
        <source ref={sourceRef} id="video-source" type="video/mp4" />
        Your browser does not support video.
      </video>

      <article>
        <header>
          <h1>Letecké záběry, co zaujmou</h1>
        </header>

        <main>
          <section>
            <h2>Oprávnění</h2>
            <p>Oprávnění A1/A2/A3 + radiostanice. Bezpečný provoz i v omezených zónách, povolení zajistím.</p>
          </section>

          <section>
            <h2>Cena</h2>
            <p>Paušál 3 000 Kč. Ostrava zdarma; mimo 10 Kč/km. Cena se může lišit dle povolení.</p>
          </section>

          <section>
            <h2>Výstup</h2>
            <p>Krátký sestřih nebo surové záběry — podle potřeby.</p>
          </section>
        </main>

        <div>
          <a href="#contacts">Zájem?</a>
        </div>
      </article>
    </div>
  )
}