import React from 'react';
import Navbar from '@/components/layout/Navbar';
import Footer from '@/components/layout/Footer';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form';
import { Mail, Phone, MapPin, Calendar, Clock } from 'lucide-react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';

const formSchema = z.object({
  nombre: z.string().min(2, { message: 'El nombre debe tener al menos 2 caracteres' }),
  apellido: z.string().min(2, { message: 'El apellido debe tener al menos 2 caracteres' }),
  email: z.string().email({ message: 'Ingrese un email válido' }),
  telefono: z.string().optional(),
  empresa: z.string().optional(),
  asunto: z.string().min(3, { message: 'Ingrese un asunto' }),
  servicio: z.string().optional(),
  mensaje: z.string().min(10, { message: 'El mensaje debe tener al menos 10 caracteres' })
});

const Contacto = () => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      nombre: '',
      apellido: '',
      email: '',
      telefono: '',
      empresa: '',
      asunto: '',
      servicio: '',
      mensaje: ''
    }
  });

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values);
    // Aquí se implementaría la lógica para enviar el formulario
    alert('Formulario enviado correctamente. En breve nos contactaremos con usted.');
    form.reset();
  }

  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <main className="flex-grow pt-20">
        {/* Cabecera */}
        <section className="bg-magiaDelSur-turquoise py-16">
          <div className="container mx-auto px-4">
            <div className="text-center">
              <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
                Contacto
              </h1>
              <p className="text-xl text-white/90 max-w-3xl mx-auto">
                Estamos a su disposición para atender sus consultas y brindarle la asesoría que necesita.
              </p>
            </div>
          </div>
        </section>
        
        {/* Información de contacto y formulario */}
        <section className="py-16 bg-white">
          <div className="container mx-auto px-4">
            <div className="flex flex-col lg:flex-row gap-12">
              {/* Información de contacto */}
              <div className="lg:w-1/3">
                <div className="bg-magiaDelSur-lightGray rounded-lg p-8">
                  <h2 className="text-2xl font-bold text-magiaDelSur-gray mb-6">
                    Información de contacto
                  </h2>
                  
                  <div className="space-y-8">
                    <div className="flex items-start">
                      <div className="bg-magiaDelSur-turquoise/10 p-3 rounded-full mr-4">
                        <MapPin className="h-6 w-6 text-magiaDelSur-turquoise" />
                      </div>
                      <div>
                        <h3 className="font-semibold text-magiaDelSur-gray mb-1">Dirección</h3>
                        <p className="text-magiaDelSur-gray/80">Región del Biobío, Chile</p>
                      </div>
                    </div>
                    
                    <div className="flex items-start">
                      <div className="bg-magiaDelSur-turquoise/10 p-3 rounded-full mr-4">
                        <Phone className="h-6 w-6 text-magiaDelSur-turquoise" />
                      </div>
                      <div>
                        <h3 className="font-semibold text-magiaDelSur-gray mb-1">Teléfono</h3>
                        <p className="text-magiaDelSur-gray/80">+56 9 1234 5678</p>
                      </div>
                    </div>
                    
                    <div className="flex items-start">
                      <div className="bg-magiaDelSur-turquoise/10 p-3 rounded-full mr-4">
                        <Mail className="h-6 w-6 text-magiaDelSur-turquoise" />
                      </div>
                      <div>
                        <h3 className="font-semibold text-magiaDelSur-gray mb-1">Email</h3>
                        <p className="text-magiaDelSur-gray/80">contacto@lamagiadelsur.cl</p>
                      </div>
                    </div>
                    
                    <div className="flex items-start">
                      <div className="bg-magiaDelSur-turquoise/10 p-3 rounded-full mr-4">
                        <Calendar className="h-6 w-6 text-magiaDelSur-turquoise" />
                      </div>
                      <div>
                        <h3 className="font-semibold text-magiaDelSur-gray mb-1">Días de atención</h3>
                        <p className="text-magiaDelSur-gray/80">Lunes a Viernes</p>
                        <p className="text-magiaDelSur-gray/80">Sábados (media jornada)</p>
                      </div>
                    </div>
                    
                    <div className="flex items-start">
                      <div className="bg-magiaDelSur-turquoise/10 p-3 rounded-full mr-4">
                        <Clock className="h-6 w-6 text-magiaDelSur-turquoise" />
                      </div>
                      <div>
                        <h3 className="font-semibold text-magiaDelSur-gray mb-1">Horario</h3>
                        <p className="text-magiaDelSur-gray/80">Lun-Vie: 9:00 - 18:00</p>
                        <p className="text-magiaDelSur-gray/80">Sábados: 9:00 - 13:00</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              {/* Formulario de contacto */}
              <div className="lg:w-2/3">
                <h2 className="text-2xl font-bold text-magiaDelSur-gray mb-6">
                  Envíenos un mensaje
                </h2>
                <Form {...form}>
                  <form onSubmit={form.handleSubmit(onSubmit)} className="bg-white rounded-lg shadow-md p-8 border border-gray-100 space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <FormField
                        control={form.control}
                        name="nombre"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel className="text-magiaDelSur-gray">Nombre *</FormLabel>
                            <FormControl>
                              <Input 
                                placeholder="Ingrese su nombre" 
                                {...field} 
                                className="border-gray-300 focus-visible:ring-magiaDelSur-turquoise"
                              />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />

                      <FormField
                        control={form.control}
                        name="apellido"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel className="text-magiaDelSur-gray">Apellido *</FormLabel>
                            <FormControl>
                              <Input 
                                placeholder="Ingrese su apellido" 
                                {...field} 
                                className="border-gray-300 focus-visible:ring-magiaDelSur-turquoise"
                              />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                    </div>
                    
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <FormField
                        control={form.control}
                        name="email"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel className="text-magiaDelSur-gray">Email *</FormLabel>
                            <FormControl>
                              <Input 
                                type="email" 
                                placeholder="ejemplo@email.com" 
                                {...field} 
                                className="border-gray-300 focus-visible:ring-magiaDelSur-turquoise"
                              />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />

                      <FormField
                        control={form.control}
                        name="telefono"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel className="text-magiaDelSur-gray">Teléfono</FormLabel>
                            <FormControl>
                              <Input 
                                type="tel" 
                                placeholder="+56 9 1234 5678" 
                                {...field} 
                                className="border-gray-300 focus-visible:ring-magiaDelSur-turquoise"
                              />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                    </div>
                    
                    <FormField
                      control={form.control}
                      name="empresa"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel className="text-magiaDelSur-gray">Empresa</FormLabel>
                          <FormControl>
                            <Input 
                              placeholder="Nombre de su empresa" 
                              {...field} 
                              className="border-gray-300 focus-visible:ring-magiaDelSur-turquoise"
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    
                    <FormField
                      control={form.control}
                      name="asunto"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel className="text-magiaDelSur-gray">Asunto *</FormLabel>
                          <FormControl>
                            <Input 
                              placeholder="Tema de su consulta" 
                              {...field} 
                              className="border-gray-300 focus-visible:ring-magiaDelSur-turquoise"
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    
                    <FormField
                      control={form.control}
                      name="servicio"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel className="text-magiaDelSur-gray">Servicio de interés</FormLabel>
                          <FormControl>
                            <select 
                              {...field} 
                              className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-magiaDelSur-turquoise"
                            >
                              <option value="">Seleccione un servicio</option>
                              <option value="consultoria">Consultoría energética</option>
                              <option value="proyectos">Proyectos eléctricos</option>
                              <option value="mantenimiento">Mantenimiento</option>
                              <option value="mejora">Mejora de procesos</option>
                              <option value="cierre">Cierre de obras</option>
                              <option value="pm">PM Proyectos complejos</option>
                              <option value="capacitaciones">Capacitaciones</option>
                              <option value="otro">Otro</option>
                            </select>
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    
                    <FormField
                      control={form.control}
                      name="mensaje"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel className="text-magiaDelSur-gray">Mensaje *</FormLabel>
                          <FormControl>
                            <Textarea 
                              rows={6} 
                              placeholder="Detalle su consulta o requerimiento" 
                              {...field} 
                              className="border-gray-300 focus-visible:ring-magiaDelSur-turquoise"
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    
                    <Button 
                      type="submit"
                      className="w-full bg-magiaDelSur-turquoise hover:bg-magiaDelSur-darkTurquoise text-white py-3"
                    >
                      Enviar mensaje
                    </Button>
                  </form>
                </Form>
              </div>
            </div>
          </div>
        </section>
        
        {/* Mapa o ubicación */}
        <section className="py-16 bg-magiaDelSur-lightGray">
          <div className="container mx-auto px-4">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-magiaDelSur-gray mb-4">
                Nuestra Ubicación
              </h2>
              <p className="text-lg text-magiaDelSur-gray/80 max-w-3xl mx-auto">
                Prestamos servicios en toda la Región del Biobío y zonas aledañas.
              </p>
            </div>
            
            <div className="bg-white rounded-lg shadow-md p-4 border border-gray-100">
              <div className="h-80 bg-magiaDelSur-turquoise/10 rounded flex items-center justify-center">
                <div className="text-center p-8">
                  <MapPin className="h-12 w-12 text-magiaDelSur-turquoise mx-auto mb-4" />
                  <h3 className="text-xl font-semibold text-magiaDelSur-gray mb-2">
                    Región del Biobío, Chile
                  </h3>
                  <p className="text-magiaDelSur-gray/80">
                    Atendemos proyectos en toda la región y alrededores
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default Contacto;