import { motion } from 'motion/react';
import { ArrowRight, Mail, MapPin } from 'lucide-react';
import SEO from '@/components/SEO';

export default function Contact() {
  return (
    <div className="flex flex-col w-full pb-32">
      <SEO 
        title="Contato | Bora Escalar com a Onyx"
        description="Preencha o formulário e marcaremos uma chamada profunda de negócios nas próximas 24 horas. Descubra o verdadeiro potencial do seu produto."
        url="https://onyx.com.br/contact"
        schema={{
          "@context": "https://schema.org",
          "@type": "ContactPage",
          "name": "Contato | Onyx Growth",
          "description": "Preencha o formulário e marcaremos uma chamada profunda de negócios nas próximas 24 horas.",
          "mainEntity": {
            "@type": "Organization",
            "name": "Onyx Growth",
            "email": "growth@onyx.agencia",
            "address": {
              "@type": "PostalAddress",
              "streetAddress": "Av. Paulista, 1000 - Bela Vista",
              "addressLocality": "São Paulo",
              "addressRegion": "SP",
              "postalCode": "01310-000",
              "addressCountry": "BR"
            }
          }
        }}
      />
      <section className="pt-32 pb-20 px-6 relative overflow-hidden">
        {/* Glow */}
        <div className="absolute top-0 right-1/4 w-[500px] h-[500px] bg-blue-600/10 rounded-full blur-[120px] pointer-events-none" />
        
        <div className="container mx-auto max-w-6xl relative z-10">
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="mb-16 md:mb-24"
          >
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-display font-semibold tracking-tighter mb-6">Bora Escalar.</h1>
            <p className="text-xl text-gray-400 font-light max-w-xl">
              Preencha o formulário abaixo. Se houver um fit estratégico mútou, marcaremos uma chamada profunda de negócios nas próximas 24 horas.
            </p>
          </motion.div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
            <motion.div 
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.1 }}
            >
              <form className="flex flex-col gap-8" onSubmit={(e) => e.preventDefault()}>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                  <div className="flex flex-col gap-3">
                    <label className="text-sm font-medium text-gray-400 uppercase tracking-widest">Nome</label>
                    <input type="text" className="bg-transparent border-b border-white/20 pb-4 text-xl focus:outline-none focus:border-white transition-colors text-white" placeholder="João da Silva" />
                  </div>
                  <div className="flex flex-col gap-3">
                    <label className="text-sm font-medium text-gray-400 uppercase tracking-widest">Empresa</label>
                    <input type="text" className="bg-transparent border-b border-white/20 pb-4 text-xl focus:outline-none focus:border-white transition-colors text-white" placeholder="Acme Inc." />
                  </div>
                </div>
                
                <div className="flex flex-col gap-3">
                  <label className="text-sm font-medium text-gray-400 uppercase tracking-widest">E-mail</label>
                  <input type="email" className="bg-transparent border-b border-white/20 pb-4 text-xl focus:outline-none focus:border-white transition-colors text-white" placeholder="joao@acme.com.br" />
                </div>

                <div className="flex flex-col gap-3">
                  <label className="text-sm font-medium text-gray-400 uppercase tracking-widest">Faturamento Mensal Atual</label>
                  <select className="bg-transparent border-b border-white/20 pb-4 text-xl focus:outline-none focus:border-white transition-colors text-white appearance-none">
                    <option className="bg-black text-white">&lt; R$ 50k</option>
                    <option className="bg-black text-white">R$ 50k - R$ 250k</option>
                    <option className="bg-black text-white">R$ 250k - R$ 1M</option>
                    <option className="bg-black text-white">R$ 1M+</option>
                  </select>
                </div>

                <div className="flex flex-col gap-3">
                  <label className="text-sm font-medium text-gray-400 uppercase tracking-widest">Como podemos ajudar?</label>
                  <textarea rows={3} className="bg-transparent border-b border-white/20 pb-4 text-xl focus:outline-none focus:border-white transition-colors text-white resize-none" placeholder="Precisamos dominar o SEO no nosso nicho e triplicar a conversão..." />
                </div>

                <button type="submit" className="inline-flex items-center justify-center gap-2 bg-white text-black px-8 py-5 rounded-full text-lg font-medium hover:scale-105 transition-transform self-start mt-4">
                  Solicitar Sessão Estratégica
                  <ArrowRight className="w-5 h-5" />
                </button>
              </form>
            </motion.div>

            <motion.div 
               initial={{ opacity: 0, x: 20 }}
               animate={{ opacity: 1, x: 0 }}
               transition={{ delay: 0.2 }}
               className="flex flex-col gap-12 lg:pl-16"
            >
               <div className="glass-panel p-10 rounded-[32px]">
                  <h3 className="text-2xl font-display font-medium mb-6">Quais os próximos passos?</h3>
                  <ul className="space-y-6">
                    <li className="flex gap-4">
                       <div className="w-8 h-8 rounded-full border border-white/20 flex items-center justify-center shrink-0 font-mono text-sm text-gray-400">01</div>
                       <p className="text-gray-400 leading-relaxed"><span className="text-white font-medium">Descoberta.</span> Nós revisaremos os seus dados para ver entendermos em que momento do jogo vocês estão.</p>
                    </li>
                    <li className="flex gap-4">
                       <div className="w-8 h-8 rounded-full border border-white/20 flex items-center justify-center shrink-0 font-mono text-sm text-gray-400">02</div>
                       <p className="text-gray-400 leading-relaxed"><span className="text-white font-medium">Auditoria Interna.</span> Um membro sênior mapeará todo o território do seu concorrente e a falha do mercado.</p>
                    </li>
                    <li className="flex gap-4">
                       <div className="w-8 h-8 rounded-full border border-white/20 flex items-center justify-center shrink-0 font-mono text-sm text-gray-400">03</div>
                       <p className="text-gray-400 leading-relaxed"><span className="text-white font-medium">Execução Tática.</span> Nós entregaremos a Rota de Fuga. Se ambos quiserem, nós a trilhamos juntos.</p>
                    </li>
                  </ul>
               </div>

               <div className="flex flex-col gap-6">
                 <div className="flex items-center gap-4 text-gray-400">
                   <Mail className="w-6 h-6 text-white" />
                   <span className="text-lg">growth@onyx.agencia</span>
                 </div>
                 <div className="flex items-center gap-4 text-gray-400">
                   <MapPin className="w-6 h-6 text-white" />
                   <span className="text-lg">Av. Paulista, 1000 - Bela Vista<br/>São Paulo, BR 01310</span>
                 </div>
               </div>
            </motion.div>
          </div>
        </div>
      </section>
    </div>
  );
}
