import React from 'react';
import { Shield, Activity, Heart, Check, ArrowRight, Star, Clock, Users, Smartphone, Zap } from 'lucide-react';

export const MedLandingPage: React.FC = () => {
    return (
        <div className="min-h-screen bg-[#0f172a] text-white font-sans selection:bg-cyan-500 selection:text-white">
            {/* Navigation */}
            <nav className="fixed top-0 w-full z-50 bg-slate-900/50 backdrop-blur-xl border-b border-white/10">
                <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <div className="w-10 h-10 bg-gradient-to-tr from-cyan-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-cyan-500/20">
                            <Activity className="text-white" size={24} />
                        </div>
                        <span className="text-xl font-black tracking-tighter uppercase italic">CRM MÉDICO <span className="text-cyan-400">FIDELIDADE</span></span>
                    </div>
                    <div className="hidden md:flex items-center gap-8 text-sm font-bold uppercase tracking-widest text-slate-400">
                        <a href="#planos" className="hover:text-white transition-colors">Planos</a>
                        <a href="#beneficios" className="hover:text-white transition-colors">Benefícios</a>
                        <button
                            onClick={() => window.location.hash = '/login'}
                            className="hover:text-white transition-colors uppercase"
                        >
                            Acesso Restrito
                        </button>
                        <button
                            onClick={() => window.location.hash = '/'}
                            className="px-6 py-2.5 bg-white text-slate-900 rounded-full hover:bg-cyan-400 transition-all hover:-translate-y-1"
                        >
                            Voltar ao CRM Odonto
                        </button>
                    </div>
                </div>
            </nav>

            {/* Hero Section */}
            <section className="relative pt-40 pb-20 overflow-hidden">
                <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full pointer-events-none">
                    <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-cyan-500/10 rounded-full blur-[120px] animate-pulse"></div>
                    <div className="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] bg-blue-600/10 rounded-full blur-[120px] animate-pulse delay-700"></div>
                </div>

                <div className="max-w-7xl mx-auto px-6 relative">
                    <div className="max-w-3xl">
                        <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/5 border border-white/10 rounded-full text-xs font-black uppercase tracking-widest text-cyan-400 mb-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
                            <Zap size={14} /> Novo: Fidelidade Multimédica
                        </div>
                        <h1 className="text-6xl md:text-8xl font-black tracking-tighter leading-[0.9] text-white mb-8 animate-in fade-in slide-in-from-bottom-6 duration-1000">
                            SAÚDE TOTAL, <br />
                            <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600">SEM COMPROMISSO.</span>
                        </h1>
                        <p className="text-xl text-slate-400 max-w-xl leading-relaxed mb-12 animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-200">
                            O primeiro plano de fidelidade que integra medicina, odontologia e bem-estar em um único ecossistema. Fidelize sua saúde com tecnologia de ponta.
                        </p>
                        <div className="flex flex-wrap gap-4 animate-in fade-in slide-in-from-bottom-10 duration-1000 delay-500">
                            <button className="px-10 py-5 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-2xl font-black uppercase tracking-widest hover:scale-105 transition-all shadow-xl shadow-cyan-500/20 flex items-center gap-3">
                                COMEÇAR AGORA <ArrowRight size={20} />
                            </button>
                            <button className="px-10 py-5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-2xl font-black uppercase tracking-widest transition-all">
                                VER PLANOS
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            {/* Plans Section */}
            <section id="planos" className="py-32 bg-slate-900/40 relative">
                <div className="max-w-7xl mx-auto px-6">
                    <div className="text-center mb-20">
                        <h2 className="text-4xl md:text-5xl font-black tracking-tighter mb-4">ESTRUTURA DE <span className="text-cyan-400">PLANOS</span></h2>
                        <p className="text-slate-400 uppercase tracking-[0.3em] font-bold text-xs">Exclusivo: Combos que não aceitam desmembramento</p>
                    </div>

                    <div className="grid md:grid-cols-2 gap-10 max-w-5xl mx-auto">
                        {/* Base Plan */}
                        <div className="group relative bg-white/5 border border-white/10 rounded-[3rem] p-12 hover:bg-white/[0.08] transition-all hover:-translate-y-2">
                            <div className="absolute top-8 right-8 text-slate-700 font-black text-6xl group-hover:text-slate-600 transition-colors">01</div>
                            <div className="mb-10">
                                <span className="px-4 py-1.5 bg-cyan-500/20 text-cyan-400 text-[10px] font-black uppercase tracking-widest rounded-full">LINHA BASE (OBRIGATÓRIO)</span>
                                <h3 className="text-4xl font-black tracking-tighter mt-4">MÉDICO + <br />ODONTO</h3>
                            </div>
                            <ul className="space-y-4 mb-12">
                                {[
                                    'Consultas Médicas ilimitadas',
                                    'Limpeza e Prevenção Dental',
                                    'Urgências 24h',
                                    'Rede Credenciada Platinum',
                                    'Descontos em Medicamentos'
                                ].map((item, i) => (
                                    <li key={i} className="flex items-center gap-3 text-slate-300 font-medium">
                                        <div className="w-5 h-5 rounded-full bg-cyan-500/20 flex items-center justify-center text-cyan-400">
                                            <Check size={12} strokeWidth={4} />
                                        </div>
                                        {item}
                                    </li>
                                ))}
                            </ul>
                            <div className="flex items-end gap-2 mb-8">
                                <span className="text-5xl font-black leading-none">R$ 149</span>
                                <span className="text-slate-500 font-bold uppercase text-[10px] tracking-widest mb-1">/mês individual</span>
                            </div>
                            <button className="w-full py-5 bg-white text-slate-900 rounded-2xl font-black uppercase tracking-widest hover:bg-cyan-400 transition-all">
                                SELECIONAR PLANO
                            </button>
                        </div>

                        {/* Premium Plan */}
                        <div className="group relative bg-white/5 border-2 border-cyan-500/50 rounded-[3rem] p-12 overflow-hidden hover:bg-white/[0.08] transition-all hover:-translate-y-2">
                            <div className="absolute -top-10 -right-10 w-40 h-40 bg-cyan-500/20 blur-[60px]"></div>
                            <div className="absolute top-8 right-8 text-cyan-900/30 font-black text-6xl group-hover:text-cyan-900/50 transition-colors">02</div>

                            <div className="mb-10">
                                <div className="flex items-center gap-2 mb-2">
                                    <span className="px-4 py-1.5 bg-gradient-to-r from-amber-400 to-orange-500 text-black text-[10px] font-black uppercase tracking-widest rounded-full">MAIS POPULAR</span>
                                </div>
                                <span className="px-4 py-1.5 bg-cyan-500/20 text-cyan-400 text-[10px] font-black uppercase tracking-widest rounded-full">LINHA PREMIUM</span>
                                <h3 className="text-4xl font-black tracking-tighter mt-4">MÉDICO + ODONTO <br /><span className="text-cyan-400">+ PSICOLOGIA</span></h3>
                            </div>
                            <ul className="space-y-4 mb-12">
                                {[
                                    'Tudo da Linha Base',
                                    'Suporte Psicológico 24h',
                                    'Sessões de Terapia Mensais',
                                    'Check-up Executivo Anual',
                                    'Prioridade na Agenda (VIP)'
                                ].map((item, i) => (
                                    <li key={i} className="flex items-center gap-3 text-slate-300 font-medium">
                                        <div className="w-5 h-5 rounded-full bg-cyan-500 flex items-center justify-center text-white">
                                            <Check size={12} strokeWidth={4} />
                                        </div>
                                        {item}
                                    </li>
                                ))}
                            </ul>
                            <div className="flex items-end gap-2 mb-8">
                                <span className="text-5xl font-black leading-none">R$ 249</span>
                                <span className="text-slate-500 font-bold uppercase text-[10px] tracking-widest mb-1">/mês individual</span>
                            </div>
                            <button className="w-full py-5 bg-gradient-to-r from-cyan-500 to-blue-600 text-white rounded-2xl font-black uppercase tracking-widest hover:scale-[1.02] transition-all shadow-lg shadow-cyan-500/20">
                                ASSINAR PREMIUM
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            {/* Features (CRM) */}
            <section id="beneficios" className="py-32 px-6">
                <div className="max-w-7xl mx-auto">
                    <div className="grid md:grid-cols-4 gap-8">
                        {[
                            { icon: Users, title: 'TITULAR E DEP.', desc: 'Gestão completa familiar com carteirinha individual digital.' },
                            { icon: Shield, title: 'ESTABILIDADE', desc: 'Previsibilidade total para o médico e segurança para o paciente.' },
                            { icon: Smartphone, title: 'WALLET DIGITAL', desc: 'QR Code e histórico médico sempre no seu bolso.' },
                            { icon: Zap, title: 'SEM GLOSA', desc: 'Processamento automático e repasse médico instantâneo.' }
                        ].map((feat, i) => (
                            <div key={i} className="p-8 bg-white/2 hover:bg-white/5 border border-white/5 rounded-3xl transition-all">
                                <feat.icon className="text-cyan-400 mb-6" size={32} />
                                <h4 className="text-lg font-black tracking-widest uppercase mb-4">{feat.title}</h4>
                                <p className="text-slate-400 text-sm leading-relaxed">{feat.desc}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Footer */}
            <footer className="py-20 border-t border-white/5 bg-slate-950">
                <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-10">
                    <div className="flex items-center gap-3">
                        <div className="w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center">
                            <Activity className="text-white" size={18} />
                        </div>
                        <span className="font-black uppercase tracking-tighter">CRM MÉDICO</span>
                    </div>
                    <div className="text-slate-500 text-[10px] font-black uppercase tracking-[0.4em]">
                        © 2026 SCOREODONTO HYBRID MEDICAL ENGINE. ALL RIGHTS RESERVED.
                    </div>
                    <div className="flex gap-6">
                        <button
                            onClick={() => window.location.hash = '/'}
                            className="text-slate-400 hover:text-white transition-colors uppercase font-bold text-xs tracking-widest"
                        >
                            Sair para Odonto
                        </button>
                        <button
                            onClick={() => window.location.hash = '/login'}
                            className="text-slate-400 hover:text-white transition-colors uppercase font-bold text-xs tracking-widest"
                        >
                            Painel Admin
                        </button>
                    </div>
                </div>
            </footer>

            <style>{`
                @keyframes animate-in {
                    from { opacity: 0; transform: translateY(20px); }
                    to { opacity: 1; transform: translateY(0); }
                }
                .animate-in {
                    animation: animate-in 0.8s ease-out forwards;
                }
            `}</style>
        </div>
    );
};