'use client';

import { Search, MapPin, Calendar, Users } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

export function HeroSection() {
  return (
    <section className="relative min-h-[600px] flex items-center">
      {/* Background */}
      <div className="absolute inset-0 z-0">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{
            backgroundImage: `url('https://images.unsplash.com/photo-1489392191049-fc10c97e64b6?w=1920&q=80')`,
          }}
        />
        <div className="absolute inset-0 bg-gradient-to-r from-black/70 to-black/30" />
      </div>

      {/* Content */}
      <div className="container mx-auto px-4 relative z-10">
        <div className="max-w-4xl">
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
            Descubra as Maravilhas
            <span className="block text-orange-400">de Angola</span>
          </h1>
          <p className="text-lg text-gray-200 mb-8 max-w-2xl">
            A Sincetur Viagens e Turismo oferece-lhe experiências únicas. Tours emocionantes, 
            alojamentos de qualidade e atendimento personalizado esperam por si.
          </p>

          {/* Search Box */}
          <div className="bg-white rounded-xl shadow-2xl p-4 md:p-6">
            <Tabs defaultValue="tours" className="w-full">
              <TabsList className="grid w-full grid-cols-5 mb-6">
                <TabsTrigger value="tours">Tours</TabsTrigger>
                <TabsTrigger value="hoteis">Hotéis</TabsTrigger>
                <TabsTrigger value="voos">Voos</TabsTrigger>
                <TabsTrigger value="autocarros">Autocarros</TabsTrigger>
                <TabsTrigger value="vistos">Vistos</TabsTrigger>
              </TabsList>

              <TabsContent value="tours" className="mt-0">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-700">Destino</label>
                    <div className="relative">
                      <MapPin className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
                      <Select>
                        <SelectTrigger className="pl-10">
                          <SelectValue placeholder="Para onde?" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="luanda">Luanda</SelectItem>
                          <SelectItem value="benguela">Benguela</SelectItem>
                          <SelectItem value="namibe">Namibe</SelectItem>
                          <SelectItem value="huila">Huíla</SelectItem>
                          <SelectItem value="malanje">Malanje</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-700">Data</label>
                    <div className="relative">
                      <Calendar className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
                      <Input type="date" className="pl-10" />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-700">Viajantes</label>
                    <div className="relative">
                      <Users className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
                      <Select>
                        <SelectTrigger className="pl-10">
                          <SelectValue placeholder="Quantos?" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="1">1 Adulto</SelectItem>
                          <SelectItem value="2">2 Adultos</SelectItem>
                          <SelectItem value="3">3 Adultos</SelectItem>
                          <SelectItem value="4">4 Adultos</SelectItem>
                          <SelectItem value="5+">5+ Adultos</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                  <div className="flex items-end">
                    <Button className="w-full bg-orange-600 hover:bg-orange-700 h-10">
                      <Search className="h-4 w-4 mr-2" />
                      Pesquisar
                    </Button>
                  </div>
                </div>
              </TabsContent>

              <TabsContent value="hoteis" className="mt-0">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-700">Localização</label>
                    <div className="relative">
                      <MapPin className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
                      <Input type="text" placeholder="Cidade ou hotel" className="pl-10" />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-700">Check-in</label>
                    <Input type="date" />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-700">Check-out</label>
                    <Input type="date" />
                  </div>
                  <div className="flex items-end">
                    <Button className="w-full bg-orange-600 hover:bg-orange-700 h-10">
                      <Search className="h-4 w-4 mr-2" />
                      Pesquisar
                    </Button>
                  </div>
                </div>
              </TabsContent>

              <TabsContent value="voos" className="mt-0">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-700">Origem</label>
                    <Input type="text" placeholder="De onde?" />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-700">Destino</label>
                    <Input type="text" placeholder="Para onde?" />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-700">Data</label>
                    <Input type="date" />
                  </div>
                  <div className="flex items-end">
                    <Button className="w-full bg-orange-600 hover:bg-orange-700 h-10">
                      <Search className="h-4 w-4 mr-2" />
                      Pesquisar
                    </Button>
                  </div>
                </div>
              </TabsContent>

              <TabsContent value="autocarros" className="mt-0">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-700">Origem</label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Partida" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="luanda">Luanda</SelectItem>
                        <SelectItem value="benguela">Benguela</SelectItem>
                        <SelectItem value="lubango">Lubango</SelectItem>
                        <SelectItem value="namibe">Namibe</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-700">Destino</label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Chegada" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="luanda">Luanda</SelectItem>
                        <SelectItem value="benguela">Benguela</SelectItem>
                        <SelectItem value="lubango">Lubango</SelectItem>
                        <SelectItem value="namibe">Namibe</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-700">Data</label>
                    <Input type="date" />
                  </div>
                  <div className="flex items-end">
                    <Button className="w-full bg-orange-600 hover:bg-orange-700 h-10">
                      <Search className="h-4 w-4 mr-2" />
                      Pesquisar
                    </Button>
                  </div>
                </div>
              </TabsContent>

              <TabsContent value="vistos" className="mt-0">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-700">País de Destino</label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="pt">Portugal</SelectItem>
                        <SelectItem value="br">Brasil</SelectItem>
                        <SelectItem value="us">Estados Unidos</SelectItem>
                        <SelectItem value="fr">França</SelectItem>
                        <SelectItem value="za">África do Sul</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-gray-700">Tipo de Visto</label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="turismo">Turismo</SelectItem>
                        <SelectItem value="negocios">Negócios</SelectItem>
                        <SelectItem value="estudo">Estudo</SelectItem>
                        <SelectItem value="trabalho">Trabalho</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="col-span-2 flex items-end">
                    <Button className="w-full md:w-auto bg-orange-600 hover:bg-orange-700 h-10">
                      Solicitar Assessoria
                    </Button>
                  </div>
                </div>
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </div>
    </section>
  );
}