clube67_newwhats.local/base-scoreodonto/scoreodonto/views/LandingPage.tsx

import React, { useEffect, useState } from 'react';
import {
    ChevronRight,
    Calendar,
    ShieldCheck,
    BarChart3,
    Users,
    Smartphone,
    CheckCircle2,
    ArrowRight,
    Menu,
    X,
    Stethoscope,
    Zap,
    MessageCircle
} from 'lucide-react';

const FeatureCard: React.FC<{ icon: React.ReactNode; title: string; description: string }> = ({ icon, title, description }) => (
    <div className="bg-white/70 backdrop-blur-md p-8 rounded-3xl border border-white/50 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_50px_rgba(8,112,184,0.1)] transition-all duration-500 group">
        <div className="w-14 h-14 bg-blue-600/10 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-blue-600 group-hover:text-white transition-all duration-500 text-blue-600">
            {icon}
        </div>
        <h3 className="text-xl font-bold text-gray-900 mb-3 uppercase tracking-tight">{title}</h3>
        <p className="text-gray-600 leading-relaxed text-sm">{description}</p>
    </div>
);

export const LandingPage: React.FC<{ onGetStarted: () => void }> = ({ onGetStarted }) => {
    const [scrolled, setScrolled] = useState(false);
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

    useEffect(() => {
        const handleScroll = () => setScrolled(window.scrollY > 20);
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    const heroImage = "https://images.unsplash.com/photo-1629909613654-28e377c37b09?q=80&w=2070&auto=format&fit=crop"; // Placeholder logic, will use local if needed later

    return (
        <div className="min-h-screen bg-[#F8FAFC] font-sans selection:bg-blue-100 selection:text-blue-900 overflow-x-hidden">
            {/* Navigation */}
            <nav className={`fixed top-0 left-0 right-0 z-[100] transition-all duration-500 ${scrolled ? 'bg-white/80 backdrop-blur-xl border-b border-gray-100 py-3 shadow-sm' : 'bg-transparent py-6'}`}>
                <div className="max-w-7xl mx-auto px-6 flex justify-between items-center">
                    <div className="flex items-center gap-2">
                        <div className="w-10 h-10 bg-gradient-to-tr from-blue-600 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
                            <Stethoscope className="text-white" size={24} />
                        </div>
                        <span className="text-2xl font-black text-gray-900 tracking-tighter uppercase italic">Score<span className="text-blue-600">Odonto</span></span>
                    </div>

                    {/* Desktop Menu */}
                    <div className="hidden md:flex items-center gap-8">
                        <a href="#features" className="text-sm font-bold text-gray-600 hover:text-blue-600 transition-colors uppercase tracking-widest">Recursos</a>
                        <a href="#solutions" className="text-sm font-bold text-gray-600 hover:text-blue-600 transition-colors uppercase tracking-widest">Soluções</a>
                        <a href="#mobile" className="text-sm font-bold text-gray-600 hover:text-blue-600 transition-colors uppercase tracking-widest">Mobile</a>
                        <button
                            onClick={onGetStarted}
                            className="bg-gray-900 text-white px-6 py-3 rounded-full text-xs font-black uppercase tracking-widest hover:bg-blue-600 hover:shadow-xl hover:shadow-blue-200 transition-all active:scale-95"
                        >
                            Começar Agora
                        </button>
                    </div>

                    {/* Mobile Menu Toggle */}
                    <button className="md:hidden p-2 text-gray-900" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
                        {mobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
                    </button>
                </div>
            </nav>

            {/* Hero Section */}
            <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-40 overflow-hidden">
                {/* Abstract Backgrounds */}
                <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-blue-50/50 to-transparent -z-10 translate-x-20 skew-x-12"></div>
                <div className="absolute top-40 left-10 w-72 h-72 bg-blue-400/10 rounded-full blur-3xl -z-10"></div>

                <div className="max-w-7xl mx-auto px-6">
                    <div className="grid lg:grid-cols-2 gap-16 items-center">
                        <div className="space-y-8">


                            <h1 className="text-6xl lg:text-7xl font-black text-gray-900 leading-[1.05] tracking-tighter">
                                O Futuro da Sua Clínica é <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 underline decoration-blue-200 underline-offset-8">Inteligente</span>
                            </h1>

                            <p className="text-xl text-gray-600 leading-relaxed max-w-lg font-medium">
                                Maximize a produtividade com gestão financeira, agenda com arraste e solte, e controle absoluto de tratamentos em uma plataforma única e elegante.
                            </p>

                            <div className="flex flex-col sm:flex-row gap-4">
                                <button
                                    onClick={onGetStarted}
                                    className="bg-blue-600 text-white px-10 py-5 rounded-2xl text-sm font-black uppercase tracking-widest shadow-2xl shadow-blue-200 hover:bg-blue-700 hover:-translate-y-1 transition-all flex items-center justify-center gap-3 group"
                                >
                                    Acessar Plataforma <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
                                </button>
                                <div className="flex items-center gap-4 py-2 px-4">
                                    <div className="flex -space-x-3">
                                        {[1, 2, 3, 4].map(i => (
                                            <div key={i} className="w-10 h-10 rounded-full border-2 border-white bg-gray-200 flex items-center justify-center text-[10px] font-bold overflow-hidden shadow-sm">
                                                <img src={`https://i.pravatar.cc/100?img=${i + 10}`} alt="User" />
                                            </div>
                                        ))}
                                    </div>
                                    <div className="text-xs text-gray-500 font-bold uppercase tracking-tight">
                                        <span className="text-gray-900">+400 Clínicas</span> <br /> que já otimizaram processos
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="relative">
                            <div className="relative z-10 rounded-[3rem] overflow-hidden shadow-[0_50px_100px_-20px_rgba(0,0,0,0.2)] border-8 border-white group">
                                <img
                                    src="/dental_landing_hero.png"
                                    alt="Interface ScoreOdonto"
                                    className="w-full h-auto transform group-hover:scale-105 transition-all duration-700"
                                    onError={(e) => {
                                        (e.target as HTMLImageElement).src = "https://images.unsplash.com/photo-1594832284143-588b813ed334?q=80&w=2070&auto=format&fit=crop";
                                    }}
                                />
                                <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent flex items-bottom p-10 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                                    <p className="mt-auto text-white font-bold uppercase text-xs tracking-widest">Interface Real: Dashboard Analítico</p>
                                </div>
                            </div>

                            {/* Floating Element 1: Google Agenda */}
                            <div className="absolute -top-10 -right-10 z-20 bg-white p-6 rounded-3xl shadow-2xl border border-blue-50 animate-bounce transition-all duration-1000 hidden md:block" style={{ animationDelay: '0.2s' }}>
                                <div className="flex items-center gap-4">
                                    <div className="p-3 bg-blue-100 text-blue-600 rounded-2xl">
                                        <Calendar size={24} />
                                    </div>
                                    <div>
                                        <div className="text-[10px] font-black text-gray-400 uppercase tracking-widest">Sincronização Total</div>
                                        <div className="text-lg font-black text-gray-900 tracking-tight">Google Agenda</div>
                                    </div>
                                </div>
                            </div>

                            {/* Floating Element 2: WhatsApp CRM */}
                            <div className="absolute -bottom-10 -left-10 z-20 bg-white p-6 rounded-3xl shadow-2xl border border-green-50 animate-bounce transition-all duration-1000">
                                <div className="flex items-center gap-4">
                                    <div className="p-3 bg-green-100 text-green-600 rounded-2xl">
                                        <MessageCircle size={24} />
                                    </div>
                                    <div>
                                        <div className="text-[10px] font-black text-gray-400 uppercase tracking-widest">Comunicação</div>
                                        <div className="text-lg font-black text-gray-900 tracking-tight">CRM WhatsApp</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Social Proof Bar */}
            <div className="bg-white border-y border-gray-100 py-10">
                <div className="max-w-7xl mx-auto px-6 overflow-hidden">
                    <p className="text-center text-[10px] font-black text-gray-400 uppercase tracking-[0.3em] mb-10">Conectado com os principais convênios</p>
                    <div className="flex justify-between items-center opacity-30 grayscale gap-10">
                        <span className="text-2xl font-black italic">CASSEMS</span>
                        <span className="text-2xl font-black italic">UNIMED</span>
                        <span className="text-2xl font-black italic">BRADESCO</span>
                        <span className="text-2xl font-black italic">SULAMÉRICA</span>
                        <span className="text-2xl font-black italic">AMIL DENTAL</span>
                        <span className="text-2xl font-black italic">REDE DENTAL</span>
                    </div>
                </div>
            </div>

            {/* Features Section */}
            <section id="features" className="py-32 px-6">
                <div className="max-w-7xl mx-auto">
                    <div className="text-center max-w-3xl mx-auto mb-20 space-y-4">
                        <h2 className="text-4xl lg:text-5xl font-black text-gray-900 leading-tight tracking-tighter uppercase">Todo o Controle na Sua Mão</h2>
                        <p className="text-lg text-gray-600 font-medium">Focamos na tecnologia para que você foque no que mais importa: o sorriso do seu paciente.</p>
                    </div>

                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                        <FeatureCard
                            icon={<Calendar size={28} />}
                            title="Agenda 4.0"
                            description="Controle total com arraste e solte, cores por profissional e sincronização em tempo real."
                        />
                        <FeatureCard
                            icon={<ShieldCheck size={28} />}
                            title="GTO Segura"
                            description="Lançamento simplificado de guias de convênio com validação automática de erros."
                        />
                        <FeatureCard
                            icon={<Users size={28} />}
                            title="Gestão de Pacientes"
                            description="CRM odontológico completo com histórico clínico, anexos e ortodontia avançada."
                        />
                        <FeatureCard
                            icon={<BarChart3 size={28} />}
                            title="BI Financeiro"
                            description="Gráficos de produtividade, fluxo de caixa e gestão de taxas de operadoras."
                        />
                    </div>
                </div>
            </section>

            {/* CTA Section */}
            <section className="py-20 px-6">
                <div className="max-w-7xl mx-auto bg-gradient-to-br from-blue-600 to-indigo-700 rounded-[3rem] p-12 lg:p-24 overflow-hidden relative shadow-2xl shadow-blue-300">
                    {/* Decorative elements */}
                    <div className="absolute top-0 right-0 w-96 h-96 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl"></div>
                    <div className="absolute bottom-0 left-0 w-64 h-64 bg-black/10 rounded-full translate-y-1/2 -translate-x-1/2 blur-3xl"></div>

                    <div className="relative z-10 text-center space-y-8 max-w-3xl mx-auto">
                        <h2 className="text-4xl lg:text-6xl font-black text-white leading-tight tracking-tighter uppercase italic">
                            Sua Clínica Elevada ao <span className="bg-white text-blue-600 px-4 py-1 rounded-2xl not-italic">Próximo Nível</span>
                        </h2>
                        <p className="text-blue-100 text-xl font-medium">
                            Junte-se a centenas de profissionais que já transformaram a gestão de seus consultórios. Comece agora gratuitamente.
                        </p>
                        <div className="pt-6">
                            <button
                                onClick={onGetStarted}
                                className="bg-white text-blue-600 px-12 py-6 rounded-3xl text-sm font-black uppercase tracking-widest shadow-xl hover:bg-gray-50 hover:-translate-y-1 transition-all active:scale-95"
                            >
                                Testar Demonstrativo
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            {/* Footer */}
            <footer className="py-20 border-t border-gray-100 bg-white">
                <div className="max-w-7xl mx-auto px-6 grid md:grid-cols-4 gap-12">
                    <div className="space-y-6">
                        <div className="flex items-center gap-2">
                            <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
                                <Stethoscope className="text-white" size={18} />
                            </div>
                            <span className="text-xl font-black text-gray-900 tracking-tighter uppercase italic">Score<span className="text-blue-600">Odonto</span></span>
                        </div>
                        <p className="text-gray-500 text-sm leading-relaxed">
                            A plataforma líder em gestão odontológica para clínicas que buscam excelência e eficiência.
                        </p>
                        <div className="flex gap-4">
                            <div className="w-8 h-8 bg-gray-100 rounded-full hover:bg-blue-600 hover:text-white transition-all flex items-center justify-center cursor-pointer"><Smartphone size={16} /></div>
                            <div className="w-8 h-8 bg-gray-100 rounded-full hover:bg-blue-600 hover:text-white transition-all flex items-center justify-center cursor-pointer"><Users size={16} /></div>
                            <div className="w-8 h-8 bg-gray-100 rounded-full hover:bg-blue-600 hover:text-white transition-all flex items-center justify-center cursor-pointer"><Zap size={16} /></div>
                        </div>
                    </div>

                    <div className="space-y-6">
                        <h4 className="text-xs font-black text-gray-900 uppercase tracking-widest">Produto</h4>
                        <ul className="space-y-3 text-sm text-gray-500 font-bold uppercase tracking-tight">
                            <li className="hover:text-blue-600 cursor-pointer transition-colors">Funcionalidades</li>
                            <li className="hover:text-blue-600 cursor-pointer transition-colors">Segurança</li>
                            <li className="hover:text-blue-600 cursor-pointer transition-colors">API</li>
                            <li className="hover:text-blue-600 cursor-pointer transition-colors">Mobile</li>
                        </ul>
                    </div>

                    <div className="space-y-6">
                        <h4 className="text-xs font-black text-gray-900 uppercase tracking-widest">Empresa</h4>
                        <ul className="space-y-3 text-sm text-gray-500 font-bold uppercase tracking-tight">
                            <li className="hover:text-blue-600 cursor-pointer transition-colors">Sobre Nós</li>
                            <li className="hover:text-blue-600 cursor-pointer transition-colors">Blog</li>
                            <li className="hover:text-blue-600 cursor-pointer transition-colors">Carreiras</li>
                            <li className="hover:text-blue-600 cursor-pointer transition-colors">Contato</li>
                        </ul>
                    </div>

                    <div className="space-y-6">
                        <h4 className="text-xs font-black text-gray-900 uppercase tracking-widest">Suporte</h4>
                        <div className="p-4 bg-gray-50 rounded-2xl border border-gray-100">
                            <p className="text-xs text-gray-500 font-bold uppercase mb-2">Central de Ajuda</p>
                            <a href="mailto:suporte@scoreodonto.com" className="text-sm font-black text-blue-600 hover:underline">suporte@scoreodonto.com</a>
                        </div>
                    </div>
                </div>
                <div className="max-w-7xl mx-auto px-6 mt-20 pt-10 border-t border-gray-50 flex flex-col md:flex-row justify-between items-center gap-6">
                    <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">© 2026 ScoreOdonto. Todos os direitos reservados.</p>
                    <div className="flex gap-8 text-[10px] font-black text-gray-400 uppercase tracking-widest">
                        <span className="hover:text-gray-900 cursor-pointer">Termos</span>
                        <span className="hover:text-gray-900 cursor-pointer">Privacidade</span>
                        <span className="hover:text-gray-900 cursor-pointer">Cookies</span>
                    </div>
                </div>
            </footer>
        </div>
    );
};