'use client'

import { useEffect, useState } from 'react'
import { Phone, Wrench, ChevronDown } from 'lucide-react'

export default function HeroSection() {
  const [videoLoaded, setVideoLoaded] = useState(false)

  useEffect(() => {
    // Detect iOS and set body position for safe area support
    const isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent)
    if (isIOS) {
      document.body.style.position = 'fixed'
      document.body.style.width = '100%'
    }

    // Handle video loading with fallback
    const video = document.getElementById('hero-video') as HTMLVideoElement
    if (video) {
      // Check if video can play
      if (video.readyState >= 3) {
        setVideoLoaded(true)
      } else {
        video.addEventListener('loadeddata', () => {
          setVideoLoaded(true)
        })
      }

      // Fallback timeout to show content even if video doesn't load
      setTimeout(() => {
        setVideoLoaded(true)
      }, 1000)

      // iOS autoplay fallback
      const tryPlay = () => {
        if (video.paused) {
          video.play().catch(() => {})
        }
      }
      window.addEventListener('touchstart', tryPlay, { once: true })
    } else {
      // If video element doesn't exist, show content anyway
      setVideoLoaded(true)
    }
  }, [])

  return (
    <section className="relative h-screen w-full overflow-hidden">
      {/* Video Background */}
      <div className="absolute inset-0 w-full h-full">
        <video
          id="hero-video"
          autoPlay
          muted
          loop
          playsInline
          className="absolute inset-0 h-full w-full object-cover"
        >
          <source
            src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4"
            type="video/mp4"
          />
        </video>
      </div>

      {/* Overlay - Separate from video container */}
      <div className="absolute inset-0 bg-gradient-to-b from-harbor-blue/30 via-harbor-blue/50 to-harbor-blue/70 z-[1]" />

      {/* Hero Content */}
      <div className={`relative z-10 flex h-full flex-col items-center justify-start pt-24 md:justify-center md:pt-0 px-4 text-white transition-opacity duration-1000 ${videoLoaded ? 'opacity-100' : 'opacity-0'}`}>
        <div className="max-w-3xl text-center">
          {/* Logo - Responsive sizing */}
          <img
            src="/HARBOR-SMITH-white.png"
            alt="Harbor Smith"
            className="mx-auto mb-3 md:mb-2 h-auto w-64 sm:w-80 md:w-96 lg:w-[400px]"
          />

          {/* Tagline - Responsive text sizing - much tighter on desktop */}
          <p className="mb-1 md:mb-1 text-xl sm:text-2xl md:text-3xl font-medium">
            Personalized Service Maintenance for Your Boat
          </p>
          <p className="mb-6 md:mb-3 text-base sm:text-lg md:text-xl font-light px-4">
            Reliable Care Above and Below the Waterline. Servicing the Bay Area and Beyond!
          </p>

          {/* CTAs - Responsive button sizing - more space on mobile */}
          <div className="flex flex-col gap-3 sm:gap-4 sm:flex-row sm:justify-center px-4">
            <a
              href="tel:510-701-2535"
              className="flex items-center justify-center gap-2 rounded-lg bg-harbor-gold px-6 sm:px-8 py-3 sm:py-4 text-sm sm:text-base font-semibold text-white transition hover:bg-harbor-amber"
            >
              <Phone className="w-4 h-4 sm:w-5 sm:h-5" />
              Call (510) 701-2535
            </a>
            <button
              onClick={() => document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' })}
              className="flex items-center justify-center gap-2 rounded-lg border-2 border-white px-6 sm:px-8 py-3 sm:py-4 text-sm sm:text-base font-semibold text-white transition hover:bg-white hover:text-harbor-blue"
            >
              <Wrench className="w-4 h-4 sm:w-5 sm:h-5" />
              View Our Services
            </button>
          </div>
        </div>

        {/* Scroll Indicator - Now visible on all screen sizes */}
        <div
          className="absolute bottom-8 cursor-pointer flex flex-col items-center"
          onClick={() => document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' })}
        >
          <p className="mb-2 text-xs md:text-sm uppercase tracking-widest opacity-80">Scroll to explore</p>
          <ChevronDown className="h-5 w-5 md:h-6 md:w-6 animate-bounce" />
        </div>
      </div>
    </section>
  )
}