.elementor-666 .elementor-element.elementor-element-76abab5{--display:flex;--min-height:1000px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}.elementor-666 .elementor-element.elementor-element-95f007a{--display:flex;--background-transition:0.3s;}.elementor-666 .elementor-element.elementor-element-2867c5e{--display:flex;--background-transition:0.3s;}/* Start custom CSS for html, class: .elementor-element-eab7f31 */import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import {
  CheckCircle2,
  Star,
  Award,
  Users,
  Clock,
  TrendingUp,
  Sparkles,
  Shield,
  Zap,
  Play,
  Mail,
  ArrowRight,
  Timer
} from 'lucide-react';

export default function LandingPage() {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [scrollY, setScrollY] = useState(0);
  const [spotsLeft, setSpotsLeft] = useState(100);

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);

    const savedSpots = localStorage.getItem('spotsLeft');
    if (savedSpots) {
      setSpotsLeft(parseInt(savedSpots));
    }

    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();

    const leads = JSON.parse(localStorage.getItem('leads') || '[]');
    leads.push({ name, email, timestamp: new Date().toISOString() });
    localStorage.setItem('leads', JSON.stringify(leads));

    const newSpots = spotsLeft - 1;
    setSpotsLeft(newSpots);
    localStorage.setItem('spotsLeft', newSpots.toString());

    setSubmitted(true);
    setEmail('');
    setName('');

    setTimeout(() => setSubmitted(false), 3000);
  };

  const handleCTAClick = () => {
    window.open('https://checkout.exemplo.com', '_blank');
  };

  const modules = [
    {
      title: 'Módulo 01 - Seleção de Materiais',
      lessons: [
        'Aula 01 - Seleção de materiais: Concha Palatina',
        'Aula 02 - Seleção de materiais - Halo Opaco',
        'Aula 03 - Seleção de materiais - Dentina',
        'Aula 04 - Seleção de materiais - Esmalte'
      ]
    },
    {
      title: 'Módulo 02 - Prática Avançada',
      lessons: [
        'Aula 05 - Prática - Confecção da concha palatina',
        'Aula 06 - Prática - Halo Opaco',
        'Aula 07 - Prática - Camada de dentina + Maquiagem com Corantes',
        'Aula 08 - Resina de Efeito Incisal',
        'Aula 09 - Camada de Esmalte + Técnica de Texturização superficial',
        'Aula 10 - Resultado final do caso clínico'
      ]
    }
  ];

  const benefits = [
    { icon: Sparkles, text: 'Reproduzir sorrisos com naturalidade e brilho, alcançando resultados comparáveis às lentes de porcelana' },
    { icon: TrendingUp, text: 'Entender a fundo o comportamento óptico das resinas e garantir previsibilidade em cada caso clínico' },
    { icon: Award, text: 'Cobrar valores mais altos pelos seus trabalhos estéticos, posicionando-se como especialista' },
    { icon: Users, text: 'Fazer com que seus pacientes se encantem com o resultado e indiquem espontaneamente o seu trabalho' },
    { icon: Star, text: 'Diferenciar-se no mercado e se tornar referência em estética direta' },
    { icon: CheckCircle2, text: 'Reduzir retrabalhos, acertar a cor e a translucidez de primeira e ganhar tempo' },
    { icon: TrendingUp, text: 'Aumentar sua rentabilidade por cadeira, com procedimentos de alto valor agregado' },
    { icon: Shield, text: 'Trabalhar com mais segurança, previsibilidade e confiança em cada camada aplicada' }
  ];

  const clinicalCases = [
    {
      url: 'https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/68ed5597d35e3590d79e0053/f79f027a7_505976219_18069850814055958_6173554313781314993_n.jpg',
      alt: 'Caso Clínico 1 - Transformação com Facetas em Resina'
    },
    {
      url: 'https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/68ed5597d35e3590d79e0053/086fa4401_514796209_18071620622055958_136312624332245161_n.jpg',
      alt: 'Caso Clínico 2 - Resultado Natural e Harmônico'
    },
    {
      url: 'https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/68ed5597d35e3590d79e0053/268e82c2d_514505408_18071696120055958_5750773067484958409_n.jpg',
      alt: 'Caso Clínico 3 - Estratificação Direta Avançada'
    },
    {
      url: 'https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/68ed5597d35e3590d79e0053/63ed17034_515722885_18071911562055958_8651149268695710913_n.jpg',
      alt: 'Caso Clínico 4 - Antes e Depois Impressionante'
    },
    {
      url: 'https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/68ed5597d35e3590d79e0053/3fe785ec0_516106547_18071831633055958_3021798048696777588_n.jpg',
      alt: 'Caso Clínico 5 - Texturização e Detalhes'
    },
    {
      url: 'https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/68ed5597d35e3590d79e0053/5cd37554e_505431302_18069770900055958_2464466333129926790_n.jpg',
      alt: 'Caso Clínico 6 - Sorriso Natural e Brilhante'
    }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white">
      {/* Hero Section */}
      <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-900">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1606811971618-4486d14f3f99?w=1920')] bg-cover bg-center opacity-10" />
        
        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="relative z-10 max-w-6xl mx-auto px-6 py-20 text-center">
          <Badge className="bg-[#FA3333] text-white mb-6 px-6 py-2 text-lg font-semibold rounded-full inline-flex items-center border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-orange-600">
            <Timer className="w-4 h-4 mr-2" />
            Apenas {spotsLeft} vagas disponíveis
          </Badge>
          
          <motion.h1
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
            className="text-slate-50 mb-6 text-3xl font-bold leading-tight md:text-6xl lg:text-7xl">
            Aprimore Sua Técnica e Alcance Resultados Naturais Que Impressionam em Cada Caso de Faceta em Resina
          </motion.h1>
          
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4 }}
            className="text-xl md:text-2xl text-blue-100 mb-12 max-w-4xl mx-auto leading-relaxed">
            Um treinamento completo para dominar a estratificação direta, elevar a previsibilidade dos resultados
            e se destacar como referência em odontologia estética.
          </motion.p>
          
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.6 }}
            className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              size="lg"
              onClick={handleCTAClick}
              className="bg-[#af3131] text-white px-8 py-6 text-lg font-bold rounded-md inline-flex items-center justify-center gap-2 whitespace-nowrap ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-11 hover:bg-orange-600 shadow-2xl hover:shadow-orange-500/50 transition-all duration-300 transform hover:scale-105">
              <Zap className="w-5 h-5 mr-2" />
              GARANTIR MINHA VAGA AGORA
            </Button>
            
            <Button
              size="lg"
              variant="outline"
              className="text-lg px-8 py-6 bg-white/10 backdrop-blur-sm border-2 border-white/30 text-white hover:bg-white/20 font-semibold"
              onClick={() => document.getElementById('modulos')?.scrollIntoView({ behavior: 'smooth' })}>
              <Play className="w-5 h-5 mr-2" />
              Ver Módulos do Curso
            </Button>
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.8 }}
            className="mt-12 flex items-center justify-center gap-8 text-white">
            <div className="flex items-center gap-2">
              <Users className="w-6 h-6" />
              <span className="font-semibold">150+ Alunos</span>
            </div>
            <div className="flex items-center gap-2">
              <Star className="w-6 h-6 fill-orange-400 text-orange-400" />
              <span className="font-semibold">Avaliação 5.0</span>
            </div>
            <div className="flex items-center gap-2">
              <Clock className="w-6 h-6" />
              <span className="font-semibold">10 Aulas</span>
            </div>
          </motion.div>
        </motion.div>

        <div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-slate-50 to-transparent" />
      </section>

      {/* Seção de Oferta */}
      <section className="py-20 px-6 bg-slate-50">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-12">
            <h2 className="text-3xl md:text-5xl font-bold text-gray-900 mb-6">
              Saia do "Acertar às Vezes" e Entre para o Grupo dos Dentistas que Entregam{' '}
              <span className="text-blue-600">Excelência</span>
            </h2>
            <p className="text-xl text-gray-600 max-w-4xl mx-auto">
              Aprimore sua técnica e alcance o nível de excelência que diferencia um bom profissional 
              de um verdadeiro artista do sorriso.
            </p>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}>
            <Card className="bg-white shadow-2xl border-none overflow-hidden">
              <CardContent className="p-8 md:p-12">
                <div className="flex items-start gap-4 mb-8">
                  <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
                    <Sparkles className="w-6 h-6 text-orange-600" />
                  </div>
                  <div>
                    <h3 className="text-2xl font-bold text-gray-900 mb-4">
                      Você já atua com facetas em resina, mas sente que ainda há algo faltando?
                    </h3>
                    <p className="text-lg text-gray-600 mb-6">
                      Este curso vai elevar o seu padrão técnico e estético a outro nível.
                    </p>
                  </div>
                </div>

                <div className="space-y-4">
                  <h4 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
                    <span className="text-3xl">✨</span>
                    Você vai aprender a:
                  </h4>
                  
                  {[
                    'Refinar o controle de camadas, translucidez e textura superficial, atingindo o acabamento de laboratório',
                    'Escolher com precisão as resinas certas (dentina, esmalte, halo opaco, efeito incisal) para cada situação clínica',
                    'Corrigir falhas que comprometem a naturalidade do sorriso — e ganhar segurança em cada caso clínico',
                    'Entregar resultados consistentes que fazem o paciente se emocionar e reconhecer o seu valor profissional',
                    'Construir uma reputação sólida na odontologia estética, sendo visto como especialista e referência'
                  ].map((item, index) => (
                    <motion.div
                      key={index}
                      initial={{ opacity: 0, x: -20 }}
                      whileInView={{ opacity: 1, x: 0 }}
                      viewport={{ once: true }}
                      transition={{ delay: index * 0.1 }}
                      className="flex items-start gap-3 p-4 bg-blue-50 rounded-lg">
                      <CheckCircle2 className="w-6 h-6 text-blue-600 flex-shrink-0 mt-1" />
                      <p className="text-gray-800 text-lg">{item}</p>
                    </motion.div>
                  ))}
                </div>

                <div className="mt-12 p-6 bg-gradient-to-r from-red-500 to-red-600 rounded-xl text-white text-center">
                  <p className="text-2xl font-bold">
                    💡 Saia do "acertar às vezes" e entre para o grupo dos dentistas que entregam excelência em todos os casos.
                  </p>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </section>

      {/* Galeria de Resultados */}
      <section className="py-20 px-6 bg-white">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-12">
            <h2 className="text-3xl md:text-5xl font-bold text-gray-900 mb-4">
              Resultados que <span className="text-blue-600">Impressionam</span>
            </h2>
            <p className="text-xl text-gray-600">
              Veja a transformação nos sorrisos dos nossos pacientes
            </p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {clinicalCases.map((clinicalCase, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, scale: 0.9 }}
                whileInView={{ opacity: 1, scale: 1 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
                className="relative group overflow-hidden rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 bg-slate-900">
                <img
                  src={clinicalCase.url}
                  alt={clinicalCase.alt}
                  className="w-full h-80 object-contain group-hover:scale-105 transition-transform duration-500"
                />
                <div className="bg-gradient-to-t pt-6 pr-6 pb-6 pl-6 rounded absolute inset-0 from-black/70 to-transparent flex items-end opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <div className="text-white">
                    <Badge className="bg-red-500 text-white mb-2 px-2.5 py-0.5 text-xs font-semibold rounded-full inline-flex items-center border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-red-600">
                      Caso Clínico {index + 1}
                    </Badge>
                    <p className="font-semibold">Facetas em Resina - Método Nine</p>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Módulos do Curso */}
      <section id="modulos" className="py-20 px-6 bg-gradient-to-br from-blue-900 to-indigo-900 text-white">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16">
            <Badge className="bg-slate-50 text-slate-950 mb-4 px-6 py-2 text-lg font-semibold rounded-full inline-flex items-center border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-primary/80">
              Conteúdo Completo
            </Badge>
            <h2 className="text-3xl md:text-5xl font-bold mb-4">
              O Que Você Vai Aprender
            </h2>
            <p className="text-xl text-blue-100">
              Estratificação Direta: do zero ao avançado
            </p>
          </motion.div>

          <div className="grid md:grid-cols-2 gap-8">
            {modules.map((module, moduleIndex) => (
              <motion.div
                key={moduleIndex}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: moduleIndex * 0.2 }}>
                <Card className="bg-white/10 backdrop-blur-sm border-white/20 hover:bg-white/15 transition-all duration-300">
                  <CardContent className="p-8">
                    <div className="flex items-center gap-3 mb-6">
                      <div className="bg-slate-800 text-slate-50 text-2xl font-bold rounded-full w-12 h-12 flex items-center justify-center">
                        {moduleIndex + 1}
                      </div>
                      <h3 className="text-slate-50 text-2xl font-bold">{module.title}</h3>
                    </div>
                    
                    <div className="space-y-3">
                      {module.lessons.map((lesson, lessonIndex) => (
                        <div key={lessonIndex} className="flex items-start gap-3 p-3 bg-white/5 rounded-lg">
                          <Play className="w-5 h-5 text-orange-400 flex-shrink-0 mt-1" />
                          <p className="text-blue-50">{lesson}</p>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Benefícios e Transformação */}
      <section className="py-20 px-6 bg-slate-50">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-bold text-gray-900 mb-6">
              Ao Dominar as Técnicas de Estratificação Direta, Você Será Capaz de:
            </h2>
          </motion.div>

          <div className="grid md:grid-cols-2 gap-6">
            {benefits.map((benefit, index) => {
              const IconComponent = benefit.icon;
              return (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, x: index % 2 === 0 ? -20 : 20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: index * 0.1 }}>
                  <Card className="h-full border-none shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <CardContent className="p-6">
                      <div className="flex items-start gap-4">
                        <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center flex-shrink-0">
                          <IconComponent className="w-6 h-6 text-white" />
                        </div>
                        <p className="text-gray-700 text-lg">{benefit.text}</p>
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              );
            })}
          </div>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="mt-12 text-center">
            <Card className="bg-gradient-to-r from-red-500 to-red-600 border-none shadow-2xl">
              <CardContent className="p-8">
                <p className="text-2xl md:text-3xl font-bold text-white">
                  ❤️ Sentir orgulho ao ver o paciente se emocionando com o novo sorriso — 
                  e saber que foi você quem o criou com técnica, sensibilidade e arte.
                </p>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </section>

      {/* CTA Principal */}
      <section className="py-20 px-6 bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-900 text-white relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1629909613654-28e377c37b09?w=1920')] bg-cover bg-center opacity-5" />
        
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          className="max-w-4xl mx-auto text-center relative z-10">
          <Badge className="bg-[#af3131] text-primary-foreground mb-6 px-8 py-3 text-xl font-semibold rounded-full inline-flex items-center border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-red-600 animate-pulse">
            <Timer className="w-5 h-5 mr-2" />
            OFERTA LIMITADA - Apenas {spotsLeft} vagas restantes
          </Badge>
          
          <h2 className="text-4xl md:text-6xl font-bold mb-6">
            Garanta Sua Vaga Agora
          </h2>
          
          <p className="text-2xl text-blue-100 mb-8">
            Oferta disponível apenas para os 100 primeiros alunos
          </p>
          
          <Button
            size="lg"
            onClick={handleCTAClick}
            className="bg-[#af3131] text-white mb-6 px-12 py-8 text-2xl font-bold rounded-md inline-flex items-center justify-center gap-2 whitespace-nowrap ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-11 hover:bg-orange-600 shadow-2xl hover:shadow-orange-500/50 transition-all duration-300 transform hover:scale-105">
            <Zap className="w-7 h-7 mr-3" />
            COMPRE AGORA
            <ArrowRight className="w-7 h-7 ml-3" />
          </Button>
          
          <div className="flex flex-col md:flex-row items-center justify-center gap-6 text-lg">
            <div className="flex items-center gap-2">
              <Shield className="w-6 h-6 text-green-400" />
              <span>Garantia de 14 dias</span>
            </div>
            <div className="flex items-center gap-2">
              <Star className="w-6 h-6 text-yellow-400 fill-yellow-400" />
              <span>150+ alunos satisfeitos</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle2 className="w-6 h-6 text-green-400" />
              <span>Acesso vitalício</span>
            </div>
          </div>
        </motion.div>
      </section>

      {/* Prova Social */}
      <section className="py-20 px-6 bg-white">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center">
            <Badge className="mb-6 text-lg px-6 py-2 bg-green-500 text-white font-semibold rounded-full inline-flex items-center border-none">
              Metodologia Validada
            </Badge>
            
            <h2 className="text-3xl md:text-5xl font-bold text-gray-900 mb-6">
              Mais de 150 Alunos Aprovaram
            </h2>
            
            <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-none shadow-xl">
              <CardContent className="p-12">
                <div className="flex justify-center mb-6">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="w-12 h-12 text-yellow-400 fill-yellow-400" />
                  ))}
                </div>
                
                <p className="text-2xl text-gray-800 mb-8 leading-relaxed">
                  Mais de <span className="font-bold text-blue-600">150 alunos</span> usaram essa técnica e aprovaram 
                  o resultado em seus pacientes. Uma técnica refinada para transformar a satisfação 
                  dos seus pacientes em consultório.
                </p>
                
                <div className="flex items-center justify-center gap-4 p-6 bg-white rounded-lg shadow-md">
                  <Shield className="w-12 h-12 text-green-500" />
                  <div className="text-left">
                    <p className="text-xl font-bold text-gray-900">Garantia de 14 dias</p>
                    <p className="text-gray-600">Satisfação garantida ou seu dinheiro de volta</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </section>

      {/* Bio do Autor */}
      <section className="py-20 px-6 bg-gradient-to-br from-slate-900 to-slate-800 text-white">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-12">
            <h2 className="text-3xl md:text-5xl font-bold mb-4">
              Sobre o Criador do Método
            </h2>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}>
            <Card className="bg-white/10 backdrop-blur-sm border-white/20">
              <CardContent className="p-8 md:p-12">
                <div className="flex flex-col md:flex-row items-center gap-8">
                  <div className="rounded-[64px] w-48 h-48 overflow-hidden border-4 border-red-500 shadow-2xl flex-shrink-0">
                    <img
                      src="https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/68ed5597d35e3590d79e0053/8afcb27cb_IMG_0256.jpg"
                      alt="Dr. Tiago Pessoa"
                      className="w-full h-full object-cover"
                    />
                  </div>
                  
                  <div>
                    <div className="flex items-center gap-3 mb-4">
                      <Badge className="bg-[#FA3333] text-white px-4 py-2 text-lg font-semibold rounded-full inline-flex items-center border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-primary/80">
                        Criador do Método Nine
                      </Badge>
                    </div>
                    
                    <h3 className="text-slate-50 mb-6 text-3xl font-bold">Dr. Tiago Pessoa</h3>
                    
                    <p className="text-lg text-blue-100 leading-relaxed mb-6">
                      Com mais de <span className="text-[#FA3333] font-bold">150 alunos formados</span> e criador do <span className="text-[#FA3333] font-bold">Método Nine</span>, 
                      o Dr. Tiago Pessoa construiu uma trajetória de destaque na odontologia estética.
                    </p>
                    
                    <p className="text-lg text-blue-100 leading-relaxed mb-6">
                      Reconhecido pelos resultados naturais e pela precisão nas facetas em resina, Tiago decidiu 
                      levar sua experiência clínica para a docência — ajudando outros profissionais a atingirem 
                      o mesmo nível de excelência.
                    </p>
                    
                    <p className="text-lg text-blue-100 leading-relaxed">
                      Hoje, além de atender seus pacientes com maestria, ele dedica-se a transformar a carreira 
                      de dentistas que desejam dominar a técnica de estratificação direta e entregar resultados 
                      de alto padrão com segurança, previsibilidade e arte.
                    </p>
                    
                    <div className="flex flex-wrap gap-4 mt-8">
                      <div className="bg-white/10 text-slate-50 px-4 py-2 rounded-full flex items-center gap-2">
                        <Award className="w-5 h-5 text-orange-400" />
                        <span>150+ Alunos</span>
                      </div>
                      <div className="bg-white/10 text-slate-50 px-4 py-2 rounded-full flex items-center gap-2">
                        <Star className="w-5 h-5 text-yellow-400 fill-yellow-400" />
                        <span>Método Nine</span>
                      </div>
                      <div className="bg-white/10 text-slate-50 px-4 py-2 rounded-full flex items-center gap-2">
                        <Sparkles className="w-5 h-5 text-blue-400" />
                        <span>Especialista em Estética</span>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </section>
      
      {/* Urgência Final */}
      <section className="py-20 px-6 bg-gradient-to-br from-red-600 to-red-700 text-white">
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          className="max-w-4xl mx-auto text-center">
          <div className="mb-8">
            <div className="inline-flex items-center gap-3 bg-white/20 backdrop-blur-sm px-4 md:px-8 py-3 md:py-4 rounded-full text-lg md:text-2xl font-bold mb-6">
              <Timer className="w-6 h-6 md:w-8 md:h-8 animate-pulse" />
              Apenas {spotsLeft} vagas disponíveis
            </div>
          </div>
          
          <h2 className="text-3xl md:text-4xl lg:text-6xl font-bold mb-6">
            Não Perca Esta Oportunidade
          </h2>
          
          <p className="text-xl md:text-2xl mb-8 text-red-100">
            Oferta disponível apenas para os 100 primeiros alunos
          </p>
          
          <Button
            size="lg"
            onClick={handleCTAClick}
            className="w-full md:w-auto bg-white hover:bg-gray-100 text-red-600 px-6 md:px-12 py-6 md:py-8 text-lg md:text-2xl font-bold rounded-md inline-flex items-center justify-center gap-2 whitespace-nowrap ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-auto shadow-2xl transition-all duration-300 transform hover:scale-105">
            <Zap className="w-5 h-5 md:w-7 md:h-7" />
            <span className="text-center">GARANTIR MINHA VAGA AGORA</span>
            <ArrowRight className="w-5 h-5 md:w-7 md:h-7" />
          </Button>
        </motion.div>
      </section>

      {/* Footer */}
      <footer className="py-12 px-6 bg-slate-900 text-white text-center">
        <div className="max-w-6xl mx-auto">
          <p className="text-lg text-slate-400 mb-4">
            © 2024 Método Nine - Dr. Tiago Pessoa. Todos os direitos reservados.
          </p>
          <div className="flex justify-center gap-6">
            <a href="#" className="text-slate-400 hover:text-white transition-colors">Termos de Uso</a>
            <a href="#" className="text-slate-400 hover:text-white transition-colors">Política de Privacidade</a>
            <a href="#" className="text-slate-400 hover:text-white transition-colors">Contato</a>
          </div>
        </div>
      </footer>
    </div>
  );
}/* End custom CSS */