"use client"

import { motion } from "framer-motion"
import { ChevronDown, Phone } from "lucide-react"
import { Button } from "@/components/ui/button"

interface HeroSectionProps {
  onQuoteClick: () => void
}

export function HeroSection({ onQuoteClick }: HeroSectionProps) {
  const scrollToContent = () => {
    document.getElementById("about")?.scrollIntoView({ behavior: "smooth" })
  }

  return (
    <section id="home" className="relative min-h-screen flex items-center justify-center overflow-hidden">
      {/* Video Background */}
      <div className="absolute inset-0 z-0">
        <video
          autoPlay
          muted
          loop
          playsInline
          className="w-full h-full object-cover"
          poster="https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1920&q=80"
        >
          <source
            src="https://assets.mixkit.co/videos/preview/mixkit-industrial-factory-at-night-4327-large.mp4"
            type="video/mp4"
          />
        </video>
        <div className="hero-overlay absolute inset-0" />
        <div className="absolute inset-0 industrial-grid opacity-30" />
      </div>

      {/* Content */}
      <div className="relative z-10 container mx-auto px-4 lg:px-6 pt-20 lg:pt-32">
        <div className="max-w-4xl mx-auto text-center">
          {/* Badge */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 mb-8"
          >
            <div className="w-2 h-2 bg-primary rounded-full animate-pulse" />
            <span className="text-sm font-medium text-primary">Güvenilir Endüstriyel Çözüm Ortağınız</span>
          </motion.div>

          {/* Main Headline */}
          <motion.h1
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="text-4xl md:text-5xl lg:text-7xl font-bold text-foreground leading-tight mb-6"
          >
            <span className="text-balance">Endüstriyel Mühendislik</span>
            <br />
            <span className="text-primary">ve Mekanik Çözümler</span>
          </motion.h1>

          {/* Subheadline */}
          <motion.p
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
            className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 text-pretty"
          >
            Mekanik Montaj, Endüstriyel Borulama, Çelik Konstrüksiyon, Tank İmalatı ve Endüstriyel Bakım Hizmetlerinde Profesyonel Çözümler.
          </motion.p>

          {/* CTA Buttons */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.6 }}
            className="flex flex-col sm:flex-row items-center justify-center gap-4"
          >
            <Button
              size="lg"
              onClick={onQuoteClick}
              className="w-full sm:w-auto bg-primary hover:bg-primary/90 text-primary-foreground font-semibold px-8 py-6 text-lg animate-pulse-glow"
            >
              Teklif Al
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="w-full sm:w-auto border-border hover:bg-accent text-foreground font-semibold px-8 py-6 text-lg"
              asChild
            >
              <a href="tel:+905301305646">
                <Phone className="h-5 w-5 mr-2" />
                Hemen Arayın
              </a>
            </Button>
          </motion.div>

          {/* Service Areas */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 1, delay: 1 }}
            className="mt-16 pt-8 border-t border-border/30"
          >
            <p className="text-sm text-muted-foreground mb-6">Hizmet Alanlarımız</p>
            <div className="flex flex-wrap items-center justify-center gap-4 lg:gap-8">
              {["Petrokimya", "Rafineri", "Enerji", "Kimya", "Gıda", "Çimento"].map((area) => (
                <span key={area} className="text-sm lg:text-base font-medium text-muted-foreground px-4 py-2 bg-card/50 rounded-full border border-border/50">
                  {area}
                </span>
              ))}
            </div>
          </motion.div>
        </div>
      </div>

      {/* Scroll Indicator */}
      <motion.button
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1.5 }}
        onClick={scrollToContent}
        className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
        aria-label="İçeriğe kaydır"
      >
        <span className="text-xs uppercase tracking-widest">Aşağı Kaydır</span>
        <motion.div
          animate={{ y: [0, 8, 0] }}
          transition={{ repeat: Infinity, duration: 1.5 }}
        >
          <ChevronDown className="h-6 w-6" />
        </motion.div>
      </motion.button>
    </section>
  )
}