import { motion } from 'motion/react';
import { useState } from 'react';

export function Contact() {
  const [activeTab, setActiveTab] = useState<'message' | 'schedule'>('message');

  return (
    <div className="pt-32 pb-24 px-6">
      <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24">
        
        <div className="flex flex-col gap-10">
          <div className="flex flex-col gap-4">
            <h1 className="text-5xl md:text-6xl font-serif leading-tight">
              Inicie a sua <span className="italic text-primary-800">jornada.</span>
            </h1>
            <p className="text-xl text-stone-500 font-light max-w-md">
              Nossa equipe de concierge está à disposição para agendar a sua avaliação e esclarecer qualquer dúvida.
            </p>
          </div>

          <div className="flex flex-col gap-8 bg-white p-8 md:p-12 rounded-[40px] border border-stone-100 shadow-sm">
            <div className="flex flex-col gap-2">
              <span className="text-sm font-medium text-stone-400 uppercase tracking-widest">WhatsApp Exclusivo</span>
              <a href="tel:+5511999999999" className="text-2xl font-serif text-primary-900">+55 11 99999-9999</a>
            </div>
            
            <div className="flex flex-col gap-2">
              <span className="text-sm font-medium text-stone-400 uppercase tracking-widest">E-mail</span>
              <a href="mailto:concierge@healthpremium.com" className="text-2xl font-serif text-primary-900">concierge@healthpremium.com</a>
            </div>

            <div className="flex flex-col gap-2">
              <span className="text-sm font-medium text-stone-400 uppercase tracking-widest">Endereço</span>
              <p className="text-xl font-serif text-primary-900 max-w-xs">Av. Faria Lima, 3400 - 15º Andar, Itaim Bibi, São Paulo - SP</p>
            </div>
          </div>
        </div>

        <div className="bg-sand-200 rounded-[40px] p-8 md:p-12 flex flex-col gap-8">
          <div className="flex flex-col gap-6">
            <div className="flex items-center gap-4 bg-white/50 p-1.5 rounded-full self-start">
              <button 
                onClick={() => setActiveTab('message')}
                className={`px-6 py-2.5 rounded-full text-sm font-medium transition-all ${activeTab === 'message' ? 'bg-primary-900 text-white shadow-sm' : 'text-stone-600 hover:text-stone-900 hover:bg-white/50'}`}
              >
                Enviar Mensagem
              </button>
              <button 
                onClick={() => setActiveTab('schedule')}
                className={`px-6 py-2.5 rounded-full text-sm font-medium transition-all ${activeTab === 'schedule' ? 'bg-primary-900 text-white shadow-sm' : 'text-stone-600 hover:text-stone-900 hover:bg-white/50'}`}
              >
                Integração c/ Google Agenda
              </button>
            </div>
          </div>
          
          {activeTab === 'message' ? (
            <motion.form 
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              className="flex flex-col gap-6" 
              onSubmit={(e) => e.preventDefault()}
            >
              <div className="flex flex-col gap-2">
                <label className="text-sm font-medium text-stone-600">Nome Completo</label>
                <input type="text" className="bg-white border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-primary-300 outline-none transition-all placeholder:text-stone-400" placeholder="Como deseja ser chamado?" />
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="flex flex-col gap-2">
                  <label className="text-sm font-medium text-stone-600">Telefone / WhatsApp</label>
                  <input type="tel" className="bg-white border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-primary-300 outline-none transition-all placeholder:text-stone-400" placeholder="(11) 90000-0000" />
                </div>
                <div className="flex flex-col gap-2">
                  <label className="text-sm font-medium text-stone-600">E-mail</label>
                  <input type="email" className="bg-white border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-primary-300 outline-none transition-all placeholder:text-stone-400" placeholder="seu@email.com" />
                </div>
              </div>

              <div className="flex flex-col gap-2">
                <label className="text-sm font-medium text-stone-600">Área de Interesse</label>
                <select className="bg-white border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-primary-300 outline-none transition-all text-stone-600 appearance-none">
                  <option>Estética Avançada</option>
                  <option>Odontologia Premium</option>
                  <option>Performance & Longevidade</option>
                  <option>Outros</option>
                </select>
              </div>

              <div className="flex flex-col gap-2">
                <label className="text-sm font-medium text-stone-600">Como podemos ajudar?</label>
                <textarea rows={4} className="bg-white border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-primary-300 outline-none transition-all placeholder:text-stone-400 resize-none" placeholder="Conte-nos um pouco sobre o que você busca..."></textarea>
              </div>

              <button type="submit" className="mt-4 bg-primary-900 text-white font-medium rounded-full py-5 hover:bg-primary-800 transition-colors active:scale-95 duration-200">
                Enviar Solicitação
              </button>
            </motion.form>
          ) : (
            <motion.div 
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              className="bg-white rounded-3xl overflow-hidden shadow-sm h-[650px] flex flex-col items-center justify-center p-8 text-center border border-stone-100"
            >
              <div className="w-16 h-16 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center mb-6">
                 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
              </div>
              <h4 className="text-2xl font-serif text-stone-900 mb-4">Agenda Online</h4>
              <p className="text-stone-500 font-light max-w-sm mb-8">
                Para integrar com o seu Google Agenda real, você precisa criar uma <a href="https://calendar.google.com/calendar/u/0/appointments/schedules" target="_blank" rel="noreferrer" className="text-blue-600 underline">Página de Agendamento do Google</a> e inserir o link (iframe) no código.
              </p>
              
              <div className="w-full max-w-sm bg-stone-50 rounded-2xl p-6 text-left border border-stone-200">
                 <p className="text-sm font-medium text-stone-600 mb-4">Exemplo de horários livres hoje:</p>
                 <div className="grid grid-cols-2 gap-3">
                   <button className="py-2.5 rounded-xl border border-primary-200 text-primary-800 font-medium hover:bg-primary-50 transition-colors">14:00</button>
                   <button className="py-2.5 rounded-xl border border-primary-200 text-primary-800 font-medium hover:bg-primary-50 transition-colors">15:30</button>
                   <button className="py-2.5 rounded-xl border border-primary-200 text-primary-800 font-medium hover:bg-primary-50 transition-colors">16:00</button>
                   <button className="py-2.5 rounded-xl border border-primary-200 text-primary-800 font-medium hover:bg-primary-50 transition-colors">17:30</button>
                 </div>
                 <button className="w-full mt-6 bg-primary-900 text-white font-medium rounded-xl py-3 hover:bg-primary-800 transition-colors active:scale-95 duration-200">
                    Simular Agendamento
                 </button>
              </div>
            </motion.div>
          )}
        </div>

      </div>
    </div>
  );
}