'use client'

import * as React from 'react'
import { Search, MapPin, ArrowRight } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { states, propertyTypes } from '@/lib/mock-data'

interface HeroSectionProps {
  onSearch?: (query: string) => void
}

export function HeroSection({ onSearch }: HeroSectionProps) {
  const [searchQuery, setSearchQuery] = React.useState('')

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    onSearch?.(searchQuery)
  }

  return (
    <section className="relative min-h-[600px] lg:min-h-[700px] flex items-center">
      {/* Background */}
      <div 
        className="absolute inset-0 bg-cover bg-center"
        style={{
          backgroundImage: 'url(https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1920&h=1080&fit=crop)',
        }}
      >
        <div className="absolute inset-0 bg-gradient-to-r from-foreground/80 via-foreground/60 to-foreground/40" />
      </div>

      {/* Content */}
      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 w-full">
        <div className="max-w-2xl">
          {/* Badge */}
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/20 text-primary-light text-sm font-medium mb-6">
            <span className="size-2 rounded-full bg-primary animate-pulse" />
            Mais de 500 imóveis disponíveis
          </div>

          {/* Heading */}
          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-card leading-tight mb-4 text-balance">
            Encontre o imóvel dos seus sonhos
          </h1>
          
          <p className="text-lg text-card/80 mb-8 max-w-lg leading-relaxed">
            Apartamentos, casas e espaços comerciais de alto padrão nas melhores localizações de São Paulo.
          </p>

          {/* Search Form */}
          <form onSubmit={handleSearch} className="bg-card rounded-xl p-4 shadow-xl">
            <div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
              <div className="sm:col-span-2 relative">
                <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 size-5 text-muted-foreground" />
                <Input
                  type="text"
                  placeholder="Buscar por bairro, cidade ou região..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10 h-12 bg-background"
                />
              </div>
              
              <Select defaultValue="">
                <SelectTrigger className="h-12 bg-background">
                  <SelectValue placeholder="Tipo de Imóvel" />
                </SelectTrigger>
                <SelectContent>
                  {propertyTypes.map((type) => (
                    <SelectItem key={type.value} value={type.value}>
                      {type.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

              <Button 
                type="submit" 
                className="h-12 bg-primary text-primary-foreground hover:bg-primary/90 gap-2"
              >
                <Search className="size-5" />
                Buscar
              </Button>
            </div>
          </form>

          {/* Quick links */}
          <div className="flex flex-wrap items-center gap-x-6 gap-y-2 mt-6 text-sm">
            <span className="text-card/60">Populares:</span>
            <a href="#" className="text-card/80 hover:text-primary transition-colors">
              Jardins
            </a>
            <a href="#" className="text-card/80 hover:text-primary transition-colors">
              Pinheiros
            </a>
            <a href="#" className="text-card/80 hover:text-primary transition-colors">
              Vila Madalena
            </a>
            <a href="#" className="text-card/80 hover:text-primary transition-colors">
              Moema
            </a>
          </div>
        </div>
      </div>

      {/* Scroll indicator */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-card/60">
        <span className="text-xs uppercase tracking-wider">Explorar imóveis</span>
        <ArrowRight className="size-5 rotate-90 animate-bounce" />
      </div>
    </section>
  )
}