'use client'

import { useState, useEffect } from 'react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Badge } from '@/components/ui/badge'
import { useToast } from '@/hooks/use-toast'
import {
  Car,
  GraduationCap,
  ClipboardCheck,
  Phone,
  Mail,
  MapPin,
  Clock,
  ArrowRight,
  CheckCircle2,
  Users,
  Award,
  BookOpen,
  Shield,
  PlayCircle,
  ChevronLeft,
  ChevronRight,
  Menu,
  X as CloseIcon
} from 'lucide-react'

type Section = 'home' | 'about' | 'program' | 'tests' | 'gallery' | 'pricing' | 'faq' | 'contact' | 'register'

export default function Home() {
  const [showPopup, setShowPopup] = useState(() => {
    if (typeof window !== 'undefined') {
      return !localStorage.getItem('hasSeenPopup')
    }
    return true
  })
  const [currentSlide, setCurrentSlide] = useState(0)
  const [activeSection, setActiveSection] = useState<Section>('home')
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const { toast } = useToast()

  const handlePopupClose = () => {
    localStorage.setItem('hasSeenPopup', 'true')
    setShowPopup(false)
  }

  const handleStartClick = () => {
    handlePopupClose()
    setTimeout(() => {
      document.getElementById('home')?.scrollIntoView({ behavior: 'smooth' })
    }, 100)
  }

  // ==========================================
  // SLIDE CAROUSEL DATA
  // ==========================================
  const slides = [
    {
      title: 'Autoškola Start Sarajevo',
      subtitle: 'Vaš put do vozačke dozvole počinje ovdje',
      description: 'Profesionalna obuka s iskusnim instruktorima i modernim vozilima. Pridružite nam se i postanite siguran vozač.',
      buttonText: 'Započnite obuku',
      image: '👨‍🏫',
      accent: 'Instruktori i obuka'
    },
    {
      title: 'Moderni Automobili',
      subtitle: 'Vožnja na vozilima najnovije generacije',
      description: 'Naša flota automobila opremljena je najnovijim sigurnosnim sistemima za vašu ugodnu i sigurnu vožnju.',
      buttonText: 'Kontaktirajte nas',
      image: '🚗',
      accent: 'Praksa na modernim vozilima'
    },
    {
      title: 'Visok Procenat Polaganja',
      subtitle: 'Naši kandidati uspješni su u 95% slučajeva',
      description: 'Sa sistematičnim pristupom i individualnom pažnjom, osiguravamo da budete spremni za ispit.',
      buttonText: 'Prijavite se',
      image: '🏆',
      accent: 'Uspješni kandidati'
    }
  ]

  const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % slides.length)
  }

  const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length)
  }

  useEffect(() => {
    const interval = setInterval(nextSlide, 5000)
    return () => clearInterval(interval)
  }, [])

  const scrollToSection = (section: Section) => {
    setActiveSection(section)
    setIsMenuOpen(false)
    const element = document.getElementById(section)
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' })
    }
  }

  useEffect(() => {
    const handleScroll = () => {
      const sections = ['home', 'about', 'program', 'tests', 'gallery', 'pricing', 'faq', 'contact', 'register']
      for (const section of sections) {
        const element = document.getElementById(section)
        if (element) {
          const rect = element.getBoundingClientRect()
          if (rect.top <= 100 && rect.bottom >= 100) {
            setActiveSection(section as Section)
            break
          }
        }
      }
    }
    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  const handleContactSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    toast({
      title: 'Poruka poslana!',
      description: 'Kontaktirat ćemo vas u roku od 24 sata.',
    })
  }

  const handleRegisterSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    toast({
      title: 'Prijava primljena!',
      description: 'Kontaktirat ćemo vas u roku od 24 sata za detalje upisa.',
    })
  }

  // ==========================================
  // GALLERY IMAGES
  // ==========================================
  const galleryImages = [
    { src: '🚗', alt: 'Vozila za obuku' },
    { src: '👨‍🏫', alt: 'Instruktori' },
    { src: '📚', alt: 'Učionice' },
    { src: '🎓', alt: 'Uspješni kandidati' },
    { src: '🚦', alt: 'Praksa u prometu' },
    { src: '✅', alt: 'Polaganje ispita' },
  ]

  // ==========================================
  // TRAINING PROGRAMS
  // ==========================================
  const programs = [
    {
      icon: <BookOpen className="h-8 w-8" />,
      title: 'Teorijska nastava',
      description: 'Sveobuhvatna teorijska priprema kroz interaktivna predavanja i savremena nastavna sredstva.',
      duration: '40 časova',
      color: 'bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-300'
    },
    {
      icon: <Car className="h-8 w-8" />,
      title: 'Praktična vožnja',
      description: 'Individualna praktična obuka sa iskusnim instruktorima na modernim vozilima.',
      duration: '40 časova',
      color: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300'
    },
    {
      icon: <Shield className="h-8 w-8" />,
      title: 'Prva pomoć',
      description: 'Obuka za pružanje prve pomoći u saobraćajnim nezgodama i hitnim situacijama.',
      duration: '8 časova',
      color: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300'
    },
    {
      icon: <ClipboardCheck className="h-8 w-8" />,
      title: 'Testovi i ispiti',
      description: 'Priprema za polaganje teorijskog i praktičnog ispita uz probne testove i simulacije.',
      duration: 'Po dogovoru',
      color: 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300'
    }
  ]

  // ==========================================
  // PRICING PACKAGES
  // ==========================================
  const pricing = [
    {
      name: 'Paket Osnovni',
      price: '500 KM',
      features: [
        'Teorijska nastava (40 časova)',
        'Praktična vožnja (30 časova)',
        'Prva pomoć (8 časova)',
        'Udžbenici i materijali',
        'Probni testovi'
      ],
      popular: false
    },
    {
      name: 'Paket Standard',
      price: '650 KM',
      features: [
        'Teorijska nastava (40 časova)',
        'Praktična vožnja (40 časova)',
        'Prva pomoć (8 časova)',
        'Udžbenici i materijali',
        'Probni testovi',
        '2 dodatna sata vožnje',
        'Prijava za ispit'
      ],
      popular: true
    },
    {
      name: 'Paket Premium',
      price: '800 KM',
      features: [
        'Teorijska nastava (40 časova)',
        'Praktična vožnja (50 časova)',
        'Prva pomoć (8 časova)',
        'Udžbenici i materijali',
        'Neograničeni probni testovi',
        '5 dodatnih sati vožnje',
        'Prijava za ispit',
        'Garancija na polaganje'
      ],
      popular: false
    }
  ]

  // ==========================================
  // FAQ
  // ==========================================
  const faqs = [
    {
      question: 'Koliko traje obuka za vozačku dozvolu?',
      answer: 'Standardna obuka za B kategoriju traje oko 2-3 mjeseca, ovisno o vašem raspoloživom vremenu i intenzitetu vožnje.'
    },
    {
      question: 'Koliko košta komplet obuka?',
      answer: 'Cijena obuke varira ovisno o odabranom paketu. Osnovni paket kreće se od 500 KM, dok premium paket košta 800 KM. Detaljan cjenovnik možete vidjeti u sekciji Cjenovnik.'
    },
    {
      question: 'Šta ako padnem ispit?',
      answer: 'Nema brige! Ako ne položite ispit prvom prilikom, možete ponoviti polaganje uz dodatnu pripremu. Nudimo popuste za ponovno polaganje.'
    },
    {
      question: 'Koliko časova vožnje ima u paketu?',
      answer: 'Osnovni paket uključuje 30 sati vožnje, standardni 40 sati, a premium 50 sati. Uz to, možete dodati dodatne sate po posebnoj cijeni.'
    },
    {
      question: 'Kako mogu platiti obuku?',
      answer: 'Ponudimo mogućnost rate na 3 mjesečne rate bez kamate. Također, možete platiti cijeli iznos odjednom uz 5% popusta.'
    },
    {
      question: 'Imate li online pripremu za testove?',
      answer: 'Da! Nudimo online probne testove koje možete rješavati kod kuće kako biste se najbolje pripremili za teorijski ispit.'
    }
  ]

  // ==========================================
  // TEST QUESTIONS
  // ==========================================
  const testQuestions = [
    {
      question: 'Koja je maksimalna dozvoljena brzina u naseljenom mjestu?',
      options: ['30 km/h', '50 km/h', '60 km/h', '80 km/h'],
      correct: 1
    },
    {
      question: 'Šta znači crveni semafor?',
      options: ['Ubrzaj', 'Zaustavi se', 'Smanji brzinu', 'Nastavi vožnju'],
      correct: 1
    },
    {
      question: 'Kada moraš koristiti smjernice?',
      options: ['Nikad', 'Samo u noći', 'Prije promjene smjera', 'Samo na auto-putu'],
      correct: 2
    }
  ]

  const [selectedAnswers, setSelectedAnswers] = useState<number[]>([])

  const handleAnswerSelect = (questionIndex: number, answerIndex: number) => {
    const newAnswers = [...selectedAnswers]
    newAnswers[questionIndex] = answerIndex
    setSelectedAnswers(newAnswers)
  }

  const getAnswerStatus = (questionIndex: number, answerIndex: number) => {
    if (selectedAnswers[questionIndex] === undefined) return ''
    const correct = testQuestions[questionIndex].correct
    if (answerIndex === correct) return 'bg-green-100 border-green-500 text-green-700 dark:bg-green-900 dark:text-green-300'
    if (selectedAnswers[questionIndex] === answerIndex && answerIndex !== correct) return 'bg-red-100 border-red-500 text-red-700 dark:bg-red-900 dark:text-red-300'
    return ''
  }

  // ==========================================
  // NAVIGATION ITEMS
  // ==========================================
  const navItems = [
    { id: 'home' as Section, label: 'Početna' },
    { id: 'about' as Section, label: 'O nama' },
    { id: 'program' as Section, label: 'Program' },
    { id: 'tests' as Section, label: 'Testovi' },
    { id: 'gallery' as Section, label: 'Galerija' },
    { id: 'pricing' as Section, label: 'Cjenovnik' },
    { id: 'faq' as Section, label: 'FAQ' },
    { id: 'contact' as Section, label: 'Kontakt' },
    { id: 'register' as Section, label: 'Prijava' },
  ]

  // ==========================================
  // RENDER
  // ==========================================
  return (
    <div className="min-h-screen flex flex-col bg-background text-foreground">
      {/* ========================================== */}
      {/* SLIKA 1 - POP-UP (Ulazni ekran) */}
      {/* ========================================== */}
      {showPopup && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
          <div className="bg-white dark:bg-slate-900 rounded-2xl p-8 md:p-12 max-w-lg w-full text-center shadow-2xl animate-in fade-in zoom-in duration-500">
            {/* Lik koji maše */}
            <div className="text-8xl mb-6 animate-bounce">👋</div>

            {/* Veliko dugme Start */}
            <h1 className="text-4xl md:text-5xl font-bold mb-4 text-primary">Autoškola Start</h1>

            {/* Slogan */}
            <p className="text-xl text-muted-foreground mb-8">Kreni sigurno na put do vozačke dozvole</p>

            <Button
              size="lg"
              className="w-full text-lg py-6 bg-primary hover:bg-blue-700 text-white"
              onClick={handleStartClick}
            >
              Start <ArrowRight className="ml-2 h-5 w-5" />
            </Button>

            {/* Preskoči */}
            <button
              onClick={handlePopupClose}
              className="mt-4 text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              Preskoči
            </button>
          </div>
        </div>
      )}

      {/* ========================================== */}
      {/* NAVIGATION */}
      {/* ========================================== */}
      <nav className="sticky top-0 z-40 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border-b border-border">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center gap-2 cursor-pointer" onClick={() => scrollToSection('home')}>
              <div className="text-3xl">🚗</div>
              <span className="text-xl font-bold text-primary">Autoškola Start</span>
            </div>

            {/* Desktop Navigation */}
            <div className="hidden lg:flex items-center gap-6">
              {navItems.map((item) => (
                <button
                  key={item.id}
                  onClick={() => scrollToSection(item.id)}
                  className={`text-sm font-medium transition-colors hover:text-primary ${
                    activeSection === item.id ? 'text-primary' : 'text-muted-foreground'
                  }`}
                >
                  {item.label}
                </button>
              ))}
            </div>

            {/* Mobile Menu Button */}
            <button
              className="lg:hidden p-2"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
            >
              {isMenuOpen ? <CloseIcon className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </button>
          </div>

          {/* Mobile Navigation */}
          {isMenuOpen && (
            <div className="lg:hidden py-4 border-t border-border">
              <div className="flex flex-col gap-2">
                {navItems.map((item) => (
                  <button
                    key={item.id}
                    onClick={() => scrollToSection(item.id)}
                    className={`text-left px-4 py-2 rounded-lg transition-colors ${
                      activeSection === item.id
                        ? 'bg-primary text-primary-foreground'
                        : 'hover:bg-muted'
                    }`}
                  >
                    {item.label}
                  </button>
                ))}
              </div>
            </div>
          )}
        </div>
      </nav>

      {/* ========================================== */}
      {/* SLIKA 2 - NASLOVNA STRANICA (Homepage) */}
      {/* ========================================== */}
      <section id="home" className="relative overflow-hidden bg-gradient-to-br from-blue-50 to-yellow-50 dark:from-slate-900 dark:to-slate-800 py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Lijevo: Tekst i CTA */}
            <div className="text-center lg:text-left order-2 lg:order-1">
              <Badge className="mb-4 bg-yellow-400 text-yellow-900 hover:bg-yellow-500">
                {slides[currentSlide].accent}
              </Badge>
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 text-primary">
                {slides[currentSlide].title}
              </h1>
              <p className="text-xl md:text-2xl text-muted-foreground mb-4">
                {slides[currentSlide].subtitle}
              </p>
              <p className="text-lg text-muted-foreground mb-8 max-w-xl mx-auto lg:mx-0">
                {slides[currentSlide].description}
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                <Button
                  size="lg"
                  className="bg-primary hover:bg-blue-700 text-white text-lg px-8"
                  onClick={() => scrollToSection('register')}
                >
                  {slides[currentSlide].buttonText} <ArrowRight className="ml-2 h-5 w-5" />
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  className="text-lg px-8"
                  onClick={() => scrollToSection('contact')}
                >
                  Saznaj više
                </Button>
              </div>
            </div>

            {/* Desno: Ilustracija ( carousel image ) */}
            <div className="flex justify-center items-center order-1 lg:order-2">
              <div className="relative">
                <div className="text-[12rem] md:text-[16rem] leading-none animate-pulse">
                  {slides[currentSlide].image}
                </div>
                <div className="absolute -bottom-4 -right-4 flex gap-2">
                  <Button
                    size="icon"
                    variant="outline"
                    className="rounded-full bg-white dark:bg-slate-800"
                    onClick={prevSlide}
                  >
                    <ChevronLeft className="h-5 w-5" />
                  </Button>
                  <Button
                    size="icon"
                    variant="outline"
                    className="rounded-full bg-white dark:bg-slate-800"
                    onClick={nextSlide}
                  >
                    <ChevronRight className="h-5 w-5" />
                  </Button>
                </div>
              </div>
            </div>
          </div>

          {/* Carousel Dots */}
          <div className="flex justify-center gap-2 mt-8">
            {slides.map((_, index) => (
              <button
                key={index}
                className={`h-2 rounded-full transition-all ${
                  currentSlide === index ? 'w-8 bg-primary' : 'w-2 bg-muted-foreground/30'
                }`}
                onClick={() => setCurrentSlide(index)}
              />
            ))}
          </div>
        </div>
      </section>

      {/* ========================================== */}
      {/* SLIKA 3 - O NAMA STRANICA */}
      {/* ========================================== */}
      <section id="about" className="py-16 md:py-24 bg-white dark:bg-slate-900">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-primary">O nama</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Autoškola Start je vaš pouzdani partner na putu do vozačke dozvole
            </p>
          </div>

          {/* Mini navigacija unutar stranice */}
          <div className="flex justify-center gap-4 mb-8 flex-wrap">
            <Button variant="outline" onClick={() => scrollToSection('gallery')}>Galerija</Button>
            <Button variant="outline" onClick={() => scrollToSection('program')}>Program</Button>
            <Button variant="outline" onClick={() => scrollToSection('tests')}>Testovi</Button>
          </div>

          <div className="grid md:grid-cols-2 gap-12 items-center mb-16">
            {/* Vizuelni elementi: Auto sa strane, oblaci */}
            <div className="relative">
              <div className="text-[10rem] md:text-[12rem] leading-none text-center">🏫</div>
              <div className="absolute top-0 left-0 text-4xl animate-bounce">☁️</div>
              <div className="absolute top-10 right-0 text-3xl animate-bounce delay-100">☁️</div>
              <div className="absolute bottom-10 left-10 text-3xl animate-bounce delay-200">☁️</div>
            </div>

            {/* Veliki tekstualni blok */}
            <div>
              <h3 className="text-2xl font-bold mb-4">Više od 15 godina iskustva</h3>
              <p className="text-muted-foreground mb-6">
                Autoškola Start djeluje na tržištu više od 15 godina i za to vrijeme obučila hiljade uspješnih vozača.
                Naš tim se sastoji od iskusnih instruktora koji su posvećeni vašem uspjehu.
              </p>
              <p className="text-muted-foreground mb-6">
                Koristimo najmodernije metode nastave i vozila najnovije generacije kako bismo vam pružili
                najkvalitetniju obuku. Naš fokus je na sigurnosti, kvaliteti i individualnom pristupu svakom kandidatu.
              </p>

              <div className="grid grid-cols-2 gap-4">
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="h-5 w-5 text-green-500" />
                  <span className="text-sm">95% uspješnost</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="h-5 w-5 text-green-500" />
                  <span className="text-sm">15+ godina iskustva</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="h-5 w-5 text-green-500" />
                  <span className="text-sm">10+ instruktora</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="h-5 w-5 text-green-500" />
                  <span className="text-sm">Moderni automobili</span>
                </div>
              </div>
            </div>
          </div>

          {/* Statistics */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            <Card className="text-center border-2 border-primary/20">
              <CardContent className="pt-6">
                <Users className="h-10 w-10 mx-auto mb-2 text-primary" />
                <div className="text-3xl font-bold text-primary">5000+</div>
                <div className="text-sm text-muted-foreground">Obučenih kandidata</div>
              </CardContent>
            </Card>
            <Card className="text-center border-2 border-primary/20">
              <CardContent className="pt-6">
                <Award className="h-10 w-10 mx-auto mb-2 text-primary" />
                <div className="text-3xl font-bold text-primary">95%</div>
                <div className="text-sm text-muted-foreground">Procenat polaganja</div>
              </CardContent>
            </Card>
            <Card className="text-center border-2 border-primary/20">
              <CardContent className="pt-6">
                <Car className="h-10 w-10 mx-auto mb-2 text-primary" />
                <div className="text-3xl font-bold text-primary">20+</div>
                <div className="text-sm text-muted-foreground">Vozila u floti</div>
              </CardContent>
            </Card>
            <Card className="text-center border-2 border-primary/20">
              <CardContent className="pt-6">
                <GraduationCap className="h-10 w-10 mx-auto mb-2 text-primary" />
                <div className="text-3xl font-bold text-primary">15+</div>
                <div className="text-sm text-muted-foreground">Godina iskustva</div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* ========================================== */}
      {/* PROGRAM OBUKA */}
      {/* ========================================== */}
      <section id="program" className="py-16 md:py-24 bg-gradient-to-br from-blue-50 to-white dark:from-slate-800 dark:to-slate-900">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-primary">Program obuke</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Sveobuhvatan program koji vas priprema za sigurno voženje
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {programs.map((program, index) => (
              <Card key={index} className="border-2 hover:border-primary transition-all hover:shadow-lg">
                <CardHeader>
                  <div className={`${program.color} w-16 h-16 rounded-xl flex items-center justify-center mb-4`}>
                    {program.icon}
                  </div>
                  <CardTitle className="text-xl">{program.title}</CardTitle>
                  <CardDescription>{program.duration}</CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground">{program.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ========================================== */}
      {/* TESTOVI / PRIPREMA */}
      {/* ========================================== */}
      <section id="tests" className="py-16 md:py-24 bg-white dark:bg-slate-900">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-primary">Testovi i priprema</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Probni testovi za najbolju pripremu za teorijski ispit
            </p>
          </div>

          <div className="max-w-3xl mx-auto">
            <Card className="border-2 border-primary/20">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <PlayCircle className="h-6 w-6 text-primary" />
                  Online probni testovi
                </CardTitle>
                <CardDescription>
                  Odgovorite na pitanja i provjerite vaše znanje
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                {testQuestions.map((q, qIndex) => (
                  <div key={qIndex} className="space-y-3">
                    <p className="font-medium">
                      {qIndex + 1}. {q.question}
                    </p>
                    <div className="grid gap-2">
                      {q.options.map((option, oIndex) => (
                        <button
                          key={oIndex}
                          onClick={() => handleAnswerSelect(qIndex, oIndex)}
                          className={`p-3 text-left rounded-lg border-2 transition-all ${
                            getAnswerStatus(qIndex, oIndex) || 'border-border hover:border-primary/50'
                          }`}
                        >
                          {option}
                        </button>
                      ))}
                    </div>
                  </div>
                ))}

                <div className="pt-4 border-t">
                  <p className="text-sm text-muted-foreground mb-4">
                    Želite više testova? Prijavite se i dobijte pristup kompletnoj bazi pitanja!
                  </p>
                  <Button
                    className="w-full"
                    onClick={() => scrollToSection('register')}
                  >
                    Prijavite se za pristup svim testovima
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* ========================================== */}
      {/* GALERIJA */}
      {/* ========================================== */}
      <section id="gallery" className="py-16 md:py-24 bg-gradient-to-br from-yellow-50 to-blue-50 dark:from-slate-800 dark:to-slate-900">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-primary">Galerija</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Pogledajte našu opremu, učionice i uspješne kandidate
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
            {galleryImages.map((image, index) => (
              <Card key={index} className="overflow-hidden border-2 hover:border-primary transition-all hover:shadow-lg">
                <div className="aspect-square bg-gradient-to-br from-blue-100 to-yellow-100 dark:from-blue-900 dark:to-yellow-900 flex items-center justify-center text-6xl">
                  {image.src}
                </div>
                <CardContent className="p-4">
                  <p className="text-sm font-medium text-center">{image.alt}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ========================================== */}
      {/* CJENOVNIK */}
      {/* ========================================== */}
      <section id="pricing" className="py-16 md:py-24 bg-white dark:bg-slate-900">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-primary">Cjenovnik</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Odaberite paket koji najbolje odgovara vašim potrebama
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
            {pricing.map((plan, index) => (
              <Card
                key={index}
                className={`relative border-2 transition-all hover:shadow-lg ${
                  plan.popular ? 'border-primary scale-105' : 'border-border'
                }`}
              >
                {plan.popular && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                    <Badge className="bg-yellow-400 text-yellow-900 hover:bg-yellow-500">
                      Najpopularnije
                    </Badge>
                  </div>
                )}
                <CardHeader className="text-center pb-4">
                  <CardTitle className="text-xl">{plan.name}</CardTitle>
                  <div className="mt-4">
                    <span className="text-4xl font-bold text-primary">{plan.price}</span>
                  </div>
                </CardHeader>
                <CardContent className="space-y-3">
                  <ul className="space-y-2">
                    {plan.features.map((feature, fIndex) => (
                      <li key={fIndex} className="flex items-start gap-2 text-sm">
                        <CheckCircle2 className="h-5 w-5 text-green-500 shrink-0 mt-0.5" />
                        <span>{feature}</span>
                      </li>
                    ))}
                  </ul>
                  <Button
                    className={`w-full mt-4 ${plan.popular ? 'bg-primary hover:bg-blue-700' : ''}`}
                    variant={plan.popular ? 'default' : 'outline'}
                    onClick={() => scrollToSection('register')}
                  >
                    Odaberi paket
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>

          <div className="mt-12 text-center">
            <Card className="max-w-2xl mx-auto border-2 border-yellow-400 dark:border-yellow-600">
              <CardContent className="pt-6">
                <div className="flex items-center justify-center gap-2 text-lg font-medium mb-2">
                  <span className="text-2xl">💳</span>
                  <span>Plaćanje na rate</span>
                </div>
                <p className="text-muted-foreground">
                  Mogućnost plaćanja na 3 mjesečne rate bez kamate. Ili 5% popusta za plaćanje odjednom!
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* ========================================== */}
      {/* FAQ (ČESTA PITANJA) */}
      {/* ========================================== */}
      <section id="faq" className="py-16 md:py-24 bg-gradient-to-br from-blue-50 to-white dark:from-slate-800 dark:to-slate-900">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-primary">Česta pitanja</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Pronađite odgovore na najčešća pitanja o našoj obuci
            </p>
          </div>

          <div className="max-w-3xl mx-auto">
            <Accordion type="single" collapsible className="space-y-4">
              {faqs.map((faq, index) => (
                <AccordionItem
                  key={index}
                  value={`item-${index}`}
                  className="border-2 border-border rounded-lg px-4"
                >
                  <AccordionTrigger className="text-left hover:no-underline py-4">
                    {faq.question}
                  </AccordionTrigger>
                  <AccordionContent className="pb-4 text-muted-foreground">
                    {faq.answer}
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        </div>
      </section>

      {/* ========================================== */}
      {/* KONTAKT */}
      {/* ========================================== */}
      <section id="contact" className="py-16 md:py-24 bg-white dark:bg-slate-900">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-primary">Kontakt</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Kontaktirajte nas za sva pitanja i prijavu
            </p>
          </div>

          <div className="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
            {/* Forma */}
            <Card className="border-2 border-primary/20">
              <CardHeader>
                <CardTitle>Pošaljite nam poruku</CardTitle>
                <CardDescription>
                  Ispunite formu i odgovorit ćemo u roku od 24 sata
                </CardDescription>
              </CardHeader>
              <CardContent>
                <form onSubmit={handleContactSubmit} className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="firstName">Ime</Label>
                      <Input id="firstName" placeholder="Vaše ime" required />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="lastName">Prezime</Label>
                      <Input id="lastName" placeholder="Vaše prezime" required />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="email">Email</Label>
                    <Input id="email" type="email" placeholder="vas@email.com" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="phone">Telefon</Label>
                    <Input id="phone" type="tel" placeholder="+387 60 123 456" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="message">Poruka</Label>
                    <Textarea
                      id="message"
                      placeholder="Vaša poruka..."
                      rows={4}
                      required
                    />
                  </div>
                  <Button type="submit" className="w-full bg-primary hover:bg-blue-700">
                    Pošalji poruku
                  </Button>
                </form>
              </CardContent>
            </Card>

            {/* Kontakt informacije */}
            <div className="space-y-6">
              <Card className="border-2">
                <CardContent className="pt-6">
                  <div className="flex items-start gap-4">
                    <div className="bg-primary/10 p-3 rounded-lg">
                      <MapPin className="h-6 w-6 text-primary" />
                    </div>
                    <div>
                      <h3 className="font-semibold mb-1">Lokacija</h3>
                      <p className="text-muted-foreground">
                        Zmaja od Bosne 12<br />
                        71000 Sarajevo, Bosna i Hercegovina
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card className="border-2">
                <CardContent className="pt-6">
                  <div className="flex items-start gap-4">
                    <div className="bg-primary/10 p-3 rounded-lg">
                      <Phone className="h-6 w-6 text-primary" />
                    </div>
                    <div>
                      <h3 className="font-semibold mb-1">Telefon</h3>
                      <p className="text-muted-foreground">
                        +387 33 123 456<br />
                        +387 60 123 456
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card className="border-2">
                <CardContent className="pt-6">
                  <div className="flex items-start gap-4">
                    <div className="bg-primary/10 p-3 rounded-lg">
                      <Mail className="h-6 w-6 text-primary" />
                    </div>
                    <div>
                      <h3 className="font-semibold mb-1">Email</h3>
                      <p className="text-muted-foreground">
                        info@autoskolastart.ba<br />
                        prijava@autoskolastart.ba
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card className="border-2">
                <CardContent className="pt-6">
                  <div className="flex items-start gap-4">
                    <div className="bg-primary/10 p-3 rounded-lg">
                      <Clock className="h-6 w-6 text-primary" />
                    </div>
                    <div>
                      <h3 className="font-semibold mb-1">Radno vrijeme</h3>
                      <p className="text-muted-foreground">
                        Ponedjeljak - Petak: 08:00 - 18:00<br />
                        Subota: 09:00 - 14:00<br />
                        Nedjelja: Zatvoreno
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Dugme "Pozovi odmah" */}
              <Button
                size="lg"
                className="w-full bg-green-600 hover:bg-green-700 text-white"
                asChild
              >
                <a href="tel:+38760123456">
                  <Phone className="mr-2 h-5 w-5" />
                  Pozovi odmah
                </a>
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* ========================================== */}
      {/* PRIJAVA / ONLINE UPIS */}
      {/* ========================================== */}
      <section id="register" className="py-16 md:py-24 bg-gradient-to-br from-blue-600 to-blue-800 text-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Online prijava</h2>
            <p className="text-lg text-blue-100 max-w-2xl mx-auto">
              Prijavite se online i mi ćemo vas kontaktirati u roku od 24 sata
            </p>
          </div>

          <Card className="max-w-2xl mx-auto border-0 shadow-2xl">
            <CardContent className="pt-6">
              <form onSubmit={handleRegisterSubmit} className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="regFirstName" className="text-foreground">Ime</Label>
                    <Input
                      id="regFirstName"
                      placeholder="Vaše ime"
                      required
                      className="bg-white/10 border-white/20 text-white placeholder:text-white/50"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="regLastName" className="text-foreground">Prezime</Label>
                    <Input
                      id="regLastName"
                      placeholder="Vaše prezime"
                      required
                      className="bg-white/10 border-white/20 text-white placeholder:text-white/50"
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="regBirthYear" className="text-foreground">Godina rođenja</Label>
                  <Input
                    id="regBirthYear"
                    type="number"
                    placeholder="2000"
                    min="1940"
                    max="2010"
                    required
                    className="bg-white/10 border-white/20 text-white placeholder:text-white/50"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="regCategory" className="text-foreground">Kategorija</Label>
                  <Select required>
                    <SelectTrigger className="bg-white/10 border-white/20 text-white">
                      <SelectValue placeholder="Odaberite kategoriju" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="B">B kategorija (Osobni automobili)</SelectItem>
                      <SelectItem value="A">A kategorija (Motocikli)</SelectItem>
                      <SelectItem value="AM">AM kategorija (Mopedi)</SelectItem>
                      <SelectItem value="C">C kategorija (Kamioni)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="regPhone" className="text-foreground">Broj telefona</Label>
                  <Input
                    id="regPhone"
                    type="tel"
                    placeholder="+387 60 123 456"
                    required
                    className="bg-white/10 border-white/20 text-white placeholder:text-white/50"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="regEmail" className="text-foreground">Email adresa</Label>
                  <Input
                    id="regEmail"
                    type="email"
                    placeholder="vas@email.com"
                    required
                    className="bg-white/10 border-white/20 text-white placeholder:text-white/50"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="regPackage" className="text-foreground">Odaberite paket</Label>
                  <Select required>
                    <SelectTrigger className="bg-white/10 border-white/20 text-white">
                      <SelectValue placeholder="Odaberite paket" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="basic">Paket Osnovni - 500 KM</SelectItem>
                      <SelectItem value="standard">Paket Standard - 650 KM</SelectItem>
                      <SelectItem value="premium">Paket Premium - 800 KM</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <Button
                  type="submit"
                  size="lg"
                  className="w-full bg-yellow-400 hover:bg-yellow-500 text-yellow-900 text-lg py-6"
                >
                  Prijavi se za obuku
                </Button>
                <p className="text-center text-sm text-blue-100">
                  Kontaktirat ćemo vas u roku od 24h
                </p>
              </form>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* ========================================== */}
      {/* FOOTER - STICKY TO BOTTOM */}
      {/* ========================================== */}
      <footer className="bg-slate-900 text-white mt-auto">
        <div className="container mx-auto px-4 py-12">
          <div className="grid md:grid-cols-4 gap-8">
            <div>
              <div className="flex items-center gap-2 mb-4">
                <div className="text-3xl">🚗</div>
                <span className="text-xl font-bold">Autoškola Start</span>
              </div>
              <p className="text-slate-400 text-sm">
                Vaš pouzdani partner na putu do vozačke dozvole. Više od 15 godina iskustva u obuci vozača.
              </p>
            </div>

            <div>
              <h3 className="font-semibold mb-4">Brzi linkovi</h3>
              <ul className="space-y-2 text-sm text-slate-400">
                <li>
                  <button onClick={() => scrollToSection('home')} className="hover:text-white transition-colors">
                    Početna
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection('about')} className="hover:text-white transition-colors">
                    O nama
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection('program')} className="hover:text-white transition-colors">
                    Program
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection('pricing')} className="hover:text-white transition-colors">
                    Cjenovnik
                  </button>
                </li>
              </ul>
            </div>

            <div>
              <h3 className="font-semibold mb-4">Usluge</h3>
              <ul className="space-y-2 text-sm text-slate-400">
                <li>
                  <button onClick={() => scrollToSection('tests')} className="hover:text-white transition-colors">
                    Online testovi
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection('gallery')} className="hover:text-white transition-colors">
                    Galerija
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection('faq')} className="hover:text-white transition-colors">
                    FAQ
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection('register')} className="hover:text-white transition-colors">
                    Online prijava
                  </button>
                </li>
              </ul>
            </div>

            <div>
              <h3 className="font-semibold mb-4">Kontakt</h3>
              <ul className="space-y-2 text-sm text-slate-400">
                <li className="flex items-center gap-2">
                  <MapPin className="h-4 w-4" />
                  Zmaja od Bosne 12, Sarajevo
                </li>
                <li className="flex items-center gap-2">
                  <Phone className="h-4 w-4" />
                  +387 33 123 456
                </li>
                <li className="flex items-center gap-2">
                  <Mail className="h-4 w-4" />
                  info@autoskolastart.ba
                </li>
              </ul>
            </div>
          </div>

          <div className="border-t border-slate-800 mt-8 pt-8 text-center text-sm text-slate-400">
            <p>© {new Date().getFullYear()} Autoškola Start. Sva prava zadržana.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}