import { motion } from 'motion/react';
import { Mail, MessageCircle, Send } from 'lucide-react';
import { useState } from 'react';
import SEO from '../components/SEO';
import Layout from '../components/Layout';

export default function Contact() {
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <>
      <SEO 
        title="Contato | Blog SEO de Autoridade"
        description="Entre em contato conosco para parcerias, consultorias ou dúvidas sobre SEO e marketing digital."
      />

      <div className="pt-32 pb-24">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-20">
            {/* Coluna da Esquerda: Info */}
            <motion.div 
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              className="space-y-12"
            >
              <div>
                <h1 className="text-6xl font-serif font-bold text-slate-900 italic mb-6 leading-tight">
                  Vamos falar <br />de <span className="text-blue-600 underline decoration-blue-200 underline-offset-8">crescimento</span>.
                </h1>
                <p className="text-xl text-slate-500 max-w-md leading-relaxed">
                  Tem um projeto em mente ou quer escalar sua autoridade orgânica? Nossa equipe de estrategistas está pronta para ouvir.
                </p>
              </div>

              <div className="space-y-8">
                <div className="flex gap-6 group">
                  <div className="h-14 w-14 rounded-2xl bg-blue-50 flex items-center justify-center text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition-all">
                    <Mail size={24} />
                  </div>
                  <div>
                    <h4 className="font-bold text-slate-900 text-lg">E-mail</h4>
                    <p className="text-slate-500">contato@seoblog.com</p>
                  </div>
                </div>

                <a 
                  href="https://wa.me/5511999999999" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="flex gap-6 group"
                >
                  <div className="h-14 w-14 rounded-2xl bg-emerald-50 flex items-center justify-center text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white transition-all">
                    <MessageCircle size={24} />
                  </div>
                  <div>
                    <h4 className="font-bold text-slate-900 text-lg">WhatsApp</h4>
                    <p className="text-slate-500 font-medium group-hover:text-emerald-600 transition-colors">+55 (11) 99999-9999</p>
                  </div>
                </a>
              </div>
            </motion.div>

            {/* Coluna da Direita: Form */}
            <motion.div 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              className="bg-white p-12 rounded-[40px] border border-slate-100 shadow-2xl shadow-slate-200/50"
            >
              {submitted ? (
                <div className="h-full flex flex-col items-center justify-center text-center space-y-6">
                  <div className="h-20 w-20 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center">
                    <Send size={32} />
                  </div>
                  <h2 className="text-3xl font-bold text-slate-900 italic font-serif">Mensagem enviada!</h2>
                  <p className="text-slate-500">Obrigado pelo contato. Responderemos em até 24 horas.</p>
                  <button 
                    onClick={() => setSubmitted(false)}
                    className="text-blue-600 font-bold uppercase text-xs tracking-widest hover:underline"
                  >
                    Enviar outra mensagem
                  </button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-6">
                  <div className="grid md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <label className="text-[10px] font-bold uppercase tracking-widest text-slate-400 ml-1">Nome Completo</label>
                      <input 
                        required
                        type="text" 
                        placeholder="Ex: João Silva" 
                        className="w-full px-6 py-4 rounded-2xl bg-slate-50 border-none focus:ring-2 focus:ring-blue-600 transition-all font-medium text-slate-900"
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-[10px] font-bold uppercase tracking-widest text-slate-400 ml-1">E-mail Corporativo</label>
                      <input 
                        required
                        type="email" 
                        placeholder="seu@empresa.com" 
                        className="w-full px-6 py-4 rounded-2xl bg-slate-50 border-none focus:ring-2 focus:ring-blue-600 transition-all font-medium text-slate-900"
                      />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <label className="text-[10px] font-bold uppercase tracking-widest text-slate-400 ml-1">Assunto</label>
                    <select className="w-full px-6 py-4 rounded-2xl bg-slate-50 border-none focus:ring-2 focus:ring-blue-600 transition-all font-medium text-slate-900 appearance-none">
                      <option>Consultoria SEO</option>
                      <option>Parceria de Conteúdo</option>
                      <option>Reportar Erro Técnico</option>
                      <option>Outros</option>
                    </select>
                  </div>

                  <div className="space-y-2">
                    <label className="text-[10px] font-bold uppercase tracking-widest text-slate-400 ml-1">Sua Mensagem</label>
                    <textarea 
                      required
                      placeholder="Como podemos ajudar você hoje?"
                      rows={5}
                      className="w-full px-6 py-4 rounded-2xl bg-slate-50 border-none focus:ring-2 focus:ring-blue-600 transition-all font-medium text-slate-900 resize-none"
                    ></textarea>
                  </div>

                  <button className="w-full bg-slate-900 py-6 rounded-2xl text-white font-bold uppercase text-xs tracking-[.2em] hover:bg-blue-600 transition-all flex items-center justify-center gap-3 group">
                    Enviar Proposta
                    <Send size={16} className="group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform" />
                  </button>
                </form>
              )}
            </motion.div>
          </div>
        </div>
      </div>
    </>
  );
}