import { Mail, MessageCircle } from "lucide-react"

export function ContactSection() {
  return (
    <section id="contacto" className="py-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-3xl lg:text-5xl font-bold text-balance mb-6">
            ¿Quieres llevar <span className="text-[#982866]">Qinaya</span> a tu institución?
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto text-pretty">
            Déjanos un mensaje y nuestro equipo te contactará
          </p>
        </div>

        <div className="grid lg:grid-cols-2 gap-12">
          {/* Contact Form */}
          <div className="bg-card text-card-foreground rounded-lg border shadow-sm">
            <div className="p-6 pb-0">
              <h3 className="text-lg font-semibold">Envíanos un mensaje</h3>
            </div>
            <div className="p-6 space-y-4">
              <div className="grid sm:grid-cols-2 gap-4">
                <input
                  placeholder="Nombre"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                />
                <input
                  placeholder="Apellido"
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                />
              </div>
              <input
                placeholder="Email"
                type="email"
                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
              />
              <input
                placeholder="Institución/Organización"
                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
              />
              <textarea
                placeholder="Cuéntanos sobre tu proyecto..."
                rows={4}
                className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
              />
              <button className="w-full px-6 py-3 bg-[#982866] hover:bg-[#69317A] text-white rounded-md font-medium transition-colors">
                Enviar mensaje
              </button>
            </div>
          </div>

          {/* Contact Info */}
          <div className="space-y-8">
            <div>
              <h3 className="text-2xl font-bold text-foreground mb-6">Otras formas de contacto</h3>
              <div className="space-y-4">
                <div className="flex items-center space-x-3">
                  <Mail className="w-6 h-6 text-[#982866]" />
                  <span className="text-muted-foreground">contacto@qinaya.com</span>
                </div>
                <div className="flex items-center space-x-3">
                  <MessageCircle className="w-6 h-6 text-[#982866]" />
                  <span className="text-muted-foreground">WhatsApp: +57 300 246756</span>
                </div>
              </div>
            </div>

            <div className="bg-gradient-to-br from-[#982866]/10 to-[#69317A]/10 rounded-2xl p-8">
              <h4 className="text-xl font-semibold text-foreground mb-4">¿Listo para transformar la educación?</h4>
              <p className="text-muted-foreground mb-6 text-pretty">
                Agenda una demo personalizada y descubre cómo Qinaya puede impactar tu comunidad.
              </p>
              <button className="px-6 py-3 bg-[#982866] hover:bg-[#69317A] text-white rounded-md font-medium transition-colors">
                Agenda una demo
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}