'use client'

import * as React from 'react'
import { Send, Phone, Mail, MapPin, MessageCircle } from 'lucide-react'
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 { agency } from '@/lib/mock-data'
import { FieldGroup, Field, FieldLabel } from '@/components/ui/field'

export function ContactSection() {
  const [isSubmitting, setIsSubmitting] = React.useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    // Simulate form submission
    await new Promise((resolve) => setTimeout(resolve, 1000))
    setIsSubmitting(false)
  }

  return (
    <section id="contato" className="py-16 lg:py-24 bg-background">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-2xl mx-auto mb-12">
          <span className="text-primary font-medium text-sm uppercase tracking-wider">
            Fale Conosco
          </span>
          <h2 className="text-3xl lg:text-4xl font-bold text-foreground mt-2 mb-4 text-balance">
            Pronto para encontrar seu novo lar?
          </h2>
          <p className="text-muted-foreground">
            Entre em contato conosco e um de nossos especialistas entrará em contato 
            para ajudá-lo a encontrar o imóvel perfeito.
          </p>
        </div>

        <div className="grid lg:grid-cols-5 gap-8 lg:gap-12">
          {/* Contact info */}
          <div className="lg:col-span-2 space-y-6">
            <div className="bg-card rounded-xl p-6 border border-border/50">
              <h3 className="font-semibold text-foreground mb-4">Informações de Contato</h3>
              <ul className="space-y-4">
                <li>
                  <a
                    href={`tel:${agency.phone.replace(/\D/g, '')}`}
                    className="flex items-center gap-3 text-muted-foreground hover:text-primary transition-colors"
                  >
                    <div className="size-10 rounded-lg bg-primary/10 flex items-center justify-center">
                      <Phone className="size-5 text-primary" />
                    </div>
                    <div>
                      <p className="text-xs text-muted-foreground">Telefone</p>
                      <p className="font-medium text-foreground">{agency.phone}</p>
                    </div>
                  </a>
                </li>
                <li>
                  <a
                    href={`mailto:${agency.email}`}
                    className="flex items-center gap-3 text-muted-foreground hover:text-primary transition-colors"
                  >
                    <div className="size-10 rounded-lg bg-primary/10 flex items-center justify-center">
                      <Mail className="size-5 text-primary" />
                    </div>
                    <div>
                      <p className="text-xs text-muted-foreground">E-mail</p>
                      <p className="font-medium text-foreground">{agency.email}</p>
                    </div>
                  </a>
                </li>
                <li className="flex items-center gap-3">
                  <div className="size-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                    <MapPin className="size-5 text-primary" />
                  </div>
                  <div>
                    <p className="text-xs text-muted-foreground">Endereço</p>
                    <p className="font-medium text-foreground">{agency.address}</p>
                  </div>
                </li>
              </ul>
            </div>

            {/* WhatsApp CTA */}
            <a
              href={`https://wa.me/${agency.whatsapp}`}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-4 p-6 rounded-xl bg-secondary text-secondary-foreground hover:bg-secondary/90 transition-colors"
            >
              <div className="size-12 rounded-full bg-secondary-foreground/20 flex items-center justify-center">
                <MessageCircle className="size-6" />
              </div>
              <div>
                <p className="font-semibold">Fale pelo WhatsApp</p>
                <p className="text-sm text-secondary-foreground/80">
                  Resposta em até 30 minutos
                </p>
              </div>
            </a>
          </div>

          {/* Contact form */}
          <div className="lg:col-span-3">
            <form onSubmit={handleSubmit} className="bg-card rounded-xl p-6 lg:p-8 border border-border/50">
              <h3 className="font-semibold text-foreground mb-6">Envie sua mensagem</h3>
              
              <FieldGroup className="space-y-5">
                <div className="grid sm:grid-cols-2 gap-4">
                  <Field>
                    <FieldLabel htmlFor="name">Nome completo</FieldLabel>
                    <Input
                      id="name"
                      placeholder="Seu nome"
                      required
                    />
                  </Field>
                  <Field>
                    <FieldLabel htmlFor="phone">Telefone</FieldLabel>
                    <Input
                      id="phone"
                      type="tel"
                      placeholder="(11) 99999-9999"
                      required
                    />
                  </Field>
                </div>

                <Field>
                  <FieldLabel htmlFor="email">E-mail</FieldLabel>
                  <Input
                    id="email"
                    type="email"
                    placeholder="seu@email.com"
                    required
                  />
                </Field>

                <Field>
                  <FieldLabel htmlFor="subject">Assunto</FieldLabel>
                  <Input
                    id="subject"
                    placeholder="Interesse em imóvel, avaliação, etc."
                    required
                  />
                </Field>

                <Field>
                  <FieldLabel htmlFor="message">Mensagem</FieldLabel>
                  <Textarea
                    id="message"
                    placeholder="Conte-nos mais sobre o que você procura..."
                    rows={4}
                    required
                  />
                </Field>

                <Button
                  type="submit"
                  disabled={isSubmitting}
                  className="w-full bg-primary text-primary-foreground hover:bg-primary/90 h-12"
                >
                  {isSubmitting ? (
                    'Enviando...'
                  ) : (
                    <>
                      <Send className="size-4 mr-2" />
                      Enviar Mensagem
                    </>
                  )}
                </Button>
              </FieldGroup>
            </form>
          </div>
        </div>
      </div>
    </section>
  )
}