
import React, { useState } from 'react';
import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card.jsx';
import { Button } from '@/components/ui/button.jsx';
import { Input } from '@/components/ui/input.jsx';
import { Label } from '@/components/ui/label.jsx';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group.jsx';
import { Checkbox } from '@/components/ui/checkbox.jsx';
import { useToast } from '@/hooks/use-toast.js';
import pb from '@/lib/pocketbaseClient.js';
import { ArrowRight, ShieldCheck, Cpu, RefreshCw, BookOpen, Star, Play, CheckCircle2, Sparkles, Loader2 } from 'lucide-react';

export default function HomePage() {
  const { toast } = useToast();
  const [simStep, setSimStep] = useState(1);
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  // Simulator State
  const [simData, setSimData] = useState({
    faixa_valor: '',
    tipo_imovel: '',
    tecnologias_existentes: [],
    objetivo_principal: '',
    certificacao_desejada: '',
    nome: '',
    whatsapp: '',
    cidade: ''
  });

  const handleTechToggle = (tech) => {
    setSimData(prev => {
      const current = prev.tecnologias_existentes;
      if (tech === 'Nenhuma') return { ...prev, tecnologias_existentes: ['Nenhuma'] };
      const updated = current.includes('Nenhuma') ? [] : current;
      return {
        ...prev,
        tecnologias_existentes: updated.includes(tech) 
          ? updated.filter(t => t !== tech) 
          : [...updated, tech]
      };
    });
  };

  const submitLead = async () => {
    setIsSubmitting(true);
    try {
      await pb.collection('leads').create({
        nome: simData.nome,
        whatsapp: simData.whatsapp,
        email: simData.whatsapp + '@placeholder.com',
        cidade: simData.cidade,
        tipo_imovel: simData.tipo_imovel,
        faixa_valor: simData.faixa_valor,
        objetivo_principal: simData.objetivo_principal,
        tecnologias_existentes: simData.tecnologias_existentes.join(', '),
        mensagem_adicional: `Certificação desejada: ${simData.certificacao_desejada}`
      }, { $autoCancel: false });
      
      toast({
        title: "Avaliação Solicitada!",
        description: "Em breve um especialista entrará em contato."
      });
      setSimStep(8); 
    } catch (err) {
      toast({
        title: "Erro ao enviar",
        description: "Tente novamente ou chame no WhatsApp.",
        variant: "destructive"
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  const strategicCards = [
    { icon: ShieldCheck, title: "Método CVT™", desc: "Metodologia exclusiva de valorização patrimonial tecnológica." },
    { icon: Cpu, title: "Patrimônio Tecnológico™", desc: "Tecnologia transformada em patrimônio tangível." },
    { icon: RefreshCw, title: "Continuidade Tecnológica™", desc: "A tecnologia continua evoluindo após a implementação." },
    { icon: BookOpen, title: "Passaporte Tecnológico™", desc: "Histórico e documentação tecnológica do imóvel." },
    { icon: Star, title: "Experiências Reais™", desc: "Projetos e experiências de alto padrão certificadas." }
  ];

  return (
    <>
      <Helmet>
        <title>O futuro da valorização imobiliária já começou | LCP Valuation</title>
        <meta name="description" content="Transformamos imóveis sofisticados em Patrimônios Tecnológicos Certificados™." />
      </Helmet>

      <main className="min-h-screen">
        {/* HERO SECTION */}
        <section className="relative min-h-[100dvh] flex items-center pt-20">
          <div className="absolute inset-0 z-0">
            <img 
              src="https://images.unsplash.com/photo-1666108289883-615fb5387ebc" 
              alt="Imóvel sofisticado"
              className="w-full h-full object-cover"
            />
            <div className="absolute inset-0 bg-gradient-to-r from-background via-background/90 to-background/40" />
          </div>

          <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="max-w-3xl"
            >
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/30 bg-primary/10 text-primary text-sm font-semibold tracking-wide mb-8">
                <Sparkles className="h-4 w-4" /> Nova Categoria de Valor
              </div>
              <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 text-balance text-foreground leading-[1.1]">
                O futuro da valorização imobiliária já começou.
              </h1>
              <p className="text-xl md:text-2xl text-foreground/80 mb-10 text-balance max-w-2xl">
                Transformamos imóveis sofisticados em Patrimônios Tecnológicos Certificados™.
              </p>
              
              <div className="flex flex-col sm:flex-row gap-4">
                <Button size="lg" className="bg-primary text-primary-foreground hover:bg-accent h-14 px-8 text-base font-semibold" onClick={() => document.getElementById('simulator').scrollIntoView()}>
                  Avaliar Meu Imóvel
                </Button>
                <Button size="lg" variant="outline" className="h-14 px-8 text-base font-semibold border-border hover:bg-secondary">
                  Falar Com Especialista
                </Button>
              </div>
            </motion.div>
          </div>
        </section>

        {/* AUTHORITY BLOCK */}
        <section className="border-y border-border bg-card/50 backdrop-blur-sm py-10">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center divide-x divide-border/50">
              <div className="px-4">
                <div className="text-3xl font-bold text-primary mb-2">2006</div>
                <div className="text-sm font-medium text-foreground/70 uppercase tracking-widest">Desde</div>
              </div>
              <div className="px-4">
                <div className="text-3xl font-bold text-primary mb-2">25.000+</div>
                <div className="text-sm font-medium text-foreground/70 uppercase tracking-widest">Atendimentos</div>
              </div>
              <div className="px-4">
                <div className="text-3xl font-bold text-primary mb-2">SC</div>
                <div className="text-sm font-medium text-foreground/70 uppercase tracking-widest">Presença em</div>
              </div>
              <div className="px-4">
                <div className="text-3xl font-bold text-primary mb-2">Alto Padrão</div>
                <div className="text-sm font-medium text-foreground/70 uppercase tracking-widest">Especialistas</div>
              </div>
            </div>
          </div>
        </section>

        {/* STRATEGIC CARDS */}
        <section className="py-24 bg-background overflow-hidden">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="mb-16">
              <h2 className="text-3xl md:text-4xl font-bold mb-4">O Ecossistema LCP</h2>
              <p className="text-foreground/60 text-lg max-w-2xl">Os pilares que sustentam a nova categoria de valor imobiliário, transformando sistemas avulsos em patrimônio documentado.</p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:flex xl:flex-row gap-6 pb-4">
              {strategicCards.map((card, i) => (
                <Card key={i} className="bg-card border-border hover:border-primary/50 transition-colors xl:w-[300px] shrink-0">
                  <CardContent className="p-8">
                    <card.icon className="h-10 w-10 text-primary mb-6" />
                    <h3 className="text-xl font-bold mb-3">{card.title}</h3>
                    <p className="text-card-foreground/70 text-sm leading-relaxed">{card.desc}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* CERTIFICACAO CVT SECTION */}
        <section className="py-24 bg-secondary">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-16">
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/30 bg-primary/10 text-primary text-sm font-semibold tracking-wide mb-6">
                Selo de Excelência
              </div>
              <h2 className="text-3xl md:text-5xl font-bold mb-6">Certificação CVT™</h2>
              <p className="text-lg text-secondary-foreground/70 max-w-3xl mx-auto leading-relaxed">
                Um padrão de reconhecimento para imóveis preparados para o futuro. A Certificação CVT atesta a infraestrutura, a usabilidade e a longevidade tecnológica da sua residência, conferindo segurança e ágio em negociações imobiliárias.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {/* Silver */}
              <div className="group rounded-2xl overflow-hidden bg-card border border-border hover:border-primary/50 transition-colors flex flex-col">
                <div className="h-56 overflow-hidden relative">
                  <div className="absolute inset-0 bg-background/20 group-hover:bg-background/0 transition-colors z-10" />
                  <img src="https://images.unsplash.com/photo-1454462993392-ff8abba50b34" alt="CVT Silver" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
                  <div className="absolute bottom-4 left-4 z-20 bg-background/80 backdrop-blur-md px-3 py-1 rounded text-xs font-bold text-primary border border-primary/20">CVT SILVER™</div>
                </div>
                <div className="p-8 flex flex-col flex-1">
                  <h3 className="text-2xl font-bold mb-3 text-card-foreground">Base Tecnológica</h3>
                  <p className="text-card-foreground/70 text-sm leading-relaxed flex-1">
                    Estrutura essencial padronizada. Atesta que o imóvel possui a infraestrutura de rede, iluminação e climatização prontas para evolução, garantindo o mínimo viável de atrito para o alto padrão.
                  </p>
                </div>
              </div>

              {/* Gold */}
              <div className="group rounded-2xl overflow-hidden bg-card border border-primary/30 relative flex flex-col transform md:-translate-y-4 shadow-lg shadow-primary/5">
                <div className="absolute top-0 left-0 w-full h-1 bg-primary z-30" />
                <div className="h-56 overflow-hidden relative">
                  <div className="absolute inset-0 bg-background/20 group-hover:bg-background/0 transition-colors z-10" />
                  <img src="https://images.unsplash.com/photo-1611785693234-59c3a63b1cdd" alt="CVT Gold" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
                  <div className="absolute bottom-4 left-4 z-20 bg-primary px-3 py-1 rounded text-xs font-bold text-primary-foreground">CVT GOLD™</div>
                </div>
                <div className="p-8 flex flex-col flex-1">
                  <h3 className="text-2xl font-bold mb-3 text-card-foreground">Integração Avançada</h3>
                  <p className="text-card-foreground/70 text-sm leading-relaxed flex-1">
                    Experiência ampliada. Ecossistema orquestrado onde conforto, segurança e entretenimento conversam perfeitamente através de uma única interface elegante e invisível.
                  </p>
                </div>
              </div>

              {/* Platinum */}
              <div className="group rounded-2xl overflow-hidden bg-card border border-border hover:border-primary/50 transition-colors flex flex-col">
                <div className="h-56 overflow-hidden relative">
                  <div className="absolute inset-0 bg-background/20 group-hover:bg-background/0 transition-colors z-10" />
                  <img src="https://images.unsplash.com/photo-1498666894561-96df51ffb9e5" alt="CVT Platinum" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
                  <div className="absolute bottom-4 left-4 z-20 bg-background/80 backdrop-blur-md px-3 py-1 rounded text-xs font-bold text-primary border border-primary/20">CVT PLATINUM™</div>
                </div>
                <div className="p-8 flex flex-col flex-1">
                  <h3 className="text-2xl font-bold mb-3 text-card-foreground">Excelência Patrimonial</h3>
                  <p className="text-card-foreground/70 text-sm leading-relaxed flex-1">
                    O ápice do morar sem fricção. Sistemas preditivos, acústica de estúdio e soluções customizadas que redefinem a qualidade de vida. Um verdadeiro troféu imobiliário.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* INTERACTIVE CVT SIMULATOR */}
        <section id="simulator" className="py-24 bg-background">
          <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-bold mb-4">Simulador CVT™</h2>
              <p className="text-foreground/70 text-lg">Descubra o potencial tecnológico do seu imóvel em 1 minuto.</p>
            </div>

            <Card className="bg-secondary border-border shadow-2xl overflow-hidden relative min-h-[400px]">
              <div className="absolute top-0 left-0 w-full h-1 bg-background">
                <div className="h-full bg-primary transition-all duration-500" style={{ width: `${(simStep / 7) * 100}%` }} />
              </div>
              <CardContent className="p-8 md:p-12">
                <AnimatePresence mode="wait">
                  {simStep === 1 && (
                    <motion.div key="1" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }}>
                      <h3 className="text-2xl font-bold mb-6">Qual o valor aproximado do imóvel?</h3>
                      <RadioGroup value={simData.faixa_valor} onValueChange={(v) => setSimData({...simData, faixa_valor: v})} className="space-y-3">
                        {['Até R$ 500 mil', 'R$ 500 mil a R$ 1 milhão', 'R$ 1 milhão a R$ 3 milhões', 'R$ 3 milhões a R$ 5 milhões', 'Acima de R$ 5 milhões'].map(opt => (
                          <div key={opt} className="flex items-center space-x-3 bg-background/50 p-4 rounded-lg border border-transparent hover:border-border cursor-pointer">
                            <RadioGroupItem value={opt} id={`v-${opt}`} />
                            <Label htmlFor={`v-${opt}`} className="flex-1 cursor-pointer">{opt}</Label>
                          </div>
                        ))}
                      </RadioGroup>
                      <Button className="mt-8 w-full" disabled={!simData.faixa_valor} onClick={() => setSimStep(2)}>Continuar <ArrowRight className="ml-2 h-4 w-4"/></Button>
                    </motion.div>
                  )}

                  {simStep === 2 && (
                    <motion.div key="2" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }}>
                      <h3 className="text-2xl font-bold mb-6">Qual o perfil do imóvel?</h3>
                      <RadioGroup value={simData.tipo_imovel} onValueChange={(v) => setSimData({...simData, tipo_imovel: v})} className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        {['Apartamento', 'Casa', 'Cobertura', 'Imóvel para locação', 'Imóvel de alto padrão', 'Empreendimento'].map(opt => (
                          <div key={opt} className="flex items-center space-x-3 bg-background/50 p-4 rounded-lg border border-transparent hover:border-border">
                            <RadioGroupItem value={opt} id={`p-${opt}`} />
                            <Label htmlFor={`p-${opt}`} className="flex-1 cursor-pointer">{opt}</Label>
                          </div>
                        ))}
                      </RadioGroup>
                      <div className="flex gap-3 mt-8">
                        <Button variant="outline" onClick={() => setSimStep(1)}>Voltar</Button>
                        <Button className="flex-1" disabled={!simData.tipo_imovel} onClick={() => setSimStep(3)}>Continuar <ArrowRight className="ml-2 h-4 w-4"/></Button>
                      </div>
                    </motion.div>
                  )}

                  {simStep === 3 && (
                    <motion.div key="3" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }}>
                      <h3 className="text-2xl font-bold mb-6">Quais tecnologias já existem no imóvel?</h3>
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        {['Automação de iluminação', 'Assistente de voz', 'Fechadura inteligente', 'Sonorização integrada', 'Cortinas automatizadas', 'Climatização inteligente', 'Câmeras', 'Nenhuma'].map(opt => (
                          <div key={opt} className="flex items-center space-x-3 bg-background/50 p-4 rounded-lg border border-transparent hover:border-border">
                            <Checkbox 
                              id={`t-${opt}`} 
                              checked={simData.tecnologias_existentes.includes(opt)}
                              onCheckedChange={() => handleTechToggle(opt)}
                            />
                            <Label htmlFor={`t-${opt}`} className="flex-1 cursor-pointer">{opt}</Label>
                          </div>
                        ))}
                      </div>
                      <div className="flex gap-3 mt-8">
                        <Button variant="outline" onClick={() => setSimStep(2)}>Voltar</Button>
                        <Button className="flex-1" disabled={simData.tecnologias_existentes.length === 0} onClick={() => setSimStep(4)}>Continuar <ArrowRight className="ml-2 h-4 w-4"/></Button>
                      </div>
                    </motion.div>
                  )}

                  {simStep === 4 && (
                    <motion.div key="4" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }}>
                      <h3 className="text-2xl font-bold mb-6">Qual seu objetivo principal?</h3>
                      <RadioGroup value={simData.objetivo_principal} onValueChange={(v) => setSimData({...simData, objetivo_principal: v})} className="space-y-3">
                        {['Morar com mais conforto', 'Valorizar patrimônio', 'Vender o imóvel', 'Locação de temporada', 'Investimento imobiliário'].map(opt => (
                          <div key={opt} className="flex items-center space-x-3 bg-background/50 p-4 rounded-lg border border-transparent hover:border-border">
                            <RadioGroupItem value={opt} id={`o-${opt}`} />
                            <Label htmlFor={`o-${opt}`} className="flex-1 cursor-pointer">{opt}</Label>
                          </div>
                        ))}
                      </RadioGroup>
                      <div className="flex gap-3 mt-8">
                        <Button variant="outline" onClick={() => setSimStep(3)}>Voltar</Button>
                        <Button className="flex-1" disabled={!simData.objetivo_principal} onClick={() => setSimStep(5)}>Continuar <ArrowRight className="ml-2 h-4 w-4"/></Button>
                      </div>
                    </motion.div>
                  )}

                  {simStep === 5 && (
                    <motion.div key="5" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }}>
                      <h3 className="text-2xl font-bold mb-6">Qual nível de certificação deseja avaliar?</h3>
                      <RadioGroup value={simData.certificacao_desejada} onValueChange={(v) => setSimData({...simData, certificacao_desejada: v})} className="space-y-4">
                        <div className="flex items-center space-x-3 bg-background/50 p-6 rounded-lg border border-transparent hover:border-primary/50">
                          <RadioGroupItem value="CVT Silver" id="c-silver" />
                          <Label htmlFor="c-silver" className="flex-1 cursor-pointer">
                            <span className="block text-lg font-bold">CVT Silver</span>
                            <span className="text-sm text-secondary-foreground/70">Estrutura essencial para valorização.</span>
                          </Label>
                        </div>
                        <div className="flex items-center space-x-3 bg-background/50 p-6 rounded-lg border border-primary/20 hover:border-primary/50 relative overflow-hidden">
                          <div className="absolute top-0 right-0 bg-primary text-primary-foreground text-[10px] px-2 py-1 font-bold tracking-widest uppercase">Popular</div>
                          <RadioGroupItem value="CVT Gold" id="c-gold" />
                          <Label htmlFor="c-gold" className="flex-1 cursor-pointer">
                            <span className="block text-lg font-bold">CVT Gold</span>
                            <span className="text-sm text-secondary-foreground/70">Experiência inteligente completa.</span>
                          </Label>
                        </div>
                        <div className="flex items-center space-x-3 bg-background/50 p-6 rounded-lg border border-transparent hover:border-primary/50">
                          <RadioGroupItem value="CVT Platinum" id="c-plat" />
                          <Label htmlFor="c-plat" className="flex-1 cursor-pointer">
                            <span className="block text-lg font-bold">CVT Platinum</span>
                            <span className="text-sm text-secondary-foreground/70">O máximo em tecnologia e diferenciação.</span>
                          </Label>
                        </div>
                      </RadioGroup>
                      <div className="flex gap-3 mt-8">
                        <Button variant="outline" onClick={() => setSimStep(4)}>Voltar</Button>
                        <Button className="flex-1" disabled={!simData.certificacao_desejada} onClick={() => setSimStep(6)}>Analisar Resultados <ArrowRight className="ml-2 h-4 w-4"/></Button>
                      </div>
                    </motion.div>
                  )}

                  {simStep === 6 && (
                    <motion.div key="6" initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0 }}>
                      <div className="text-center mb-8">
                        <div className="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
                          <CheckCircle2 className="h-8 w-8 text-primary" />
                        </div>
                        <h3 className="text-3xl font-bold mb-2">Potencial Identificado!</h3>
                        <p className="text-secondary-foreground/70">Seu imóvel apresenta forte potencial para Certificação CVT.</p>
                      </div>
                      
                      <div className="bg-background/30 p-6 rounded-xl border border-border mb-8">
                        <h4 className="font-bold mb-4 uppercase tracking-widest text-sm text-primary">Benefícios Projetados:</h4>
                        <ul className="space-y-3">
                          {['Valorização percebida no mercado', 'Diferenciação imobiliária', 'Experiência premium de moradia', 'Continuidade tecnológica garantida', 'Patrimônio tecnológico certificado'].map((b,i) => (
                            <li key={i} className="flex items-center gap-3 text-sm font-medium">
                              <CheckCircle2 className="h-4 w-4 text-primary shrink-0"/> {b}
                            </li>
                          ))}
                        </ul>
                      </div>
                      
                      <Button className="w-full h-14 text-lg" onClick={() => setSimStep(7)}>Liberar Meu Relatório Completo</Button>
                    </motion.div>
                  )}

                  {simStep === 7 && (
                    <motion.div key="7" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0 }}>
                      <h3 className="text-2xl font-bold mb-2">Para onde enviamos a análise?</h3>
                      <p className="text-secondary-foreground/70 mb-6 text-sm">Nossos especialistas validarão os dados e entrarão em contato.</p>
                      
                      <div className="space-y-4">
                        <div>
                          <Label>Nome Completo</Label>
                          <Input className="mt-1 bg-background border-border" value={simData.nome} onChange={(e) => setSimData({...simData, nome: e.target.value})} />
                        </div>
                        <div>
                          <Label>WhatsApp</Label>
                          <Input className="mt-1 bg-background border-border" placeholder="(00) 00000-0000" value={simData.whatsapp} onChange={(e) => setSimData({...simData, whatsapp: e.target.value})} />
                        </div>
                        <div>
                          <Label>Cidade</Label>
                          <Input className="mt-1 bg-background border-border" value={simData.cidade} onChange={(e) => setSimData({...simData, cidade: e.target.value})} />
                        </div>
                      </div>
                      
                      <Button 
                        className="w-full mt-8 h-14" 
                        disabled={!simData.nome || !simData.whatsapp || isSubmitting}
                        onClick={submitLead}
                      >
                        {isSubmitting ? (
                          <>
                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                            Processando...
                          </>
                        ) : (
                          'Receber Avaliação Exclusiva'
                        )}
                      </Button>
                    </motion.div>
                  )}
                  
                  {simStep === 8 && (
                     <motion.div key="8" initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }}>
                      <div className="text-center py-10">
                        <CheckCircle2 className="h-16 w-16 text-primary mx-auto mb-6" />
                        <h3 className="text-3xl font-bold mb-4">Tudo Certo!</h3>
                        <p className="text-secondary-foreground/70 text-lg">
                          Recebemos seus dados. Um especialista em patrimônio tecnológico fará contato no seu WhatsApp em breve.
                        </p>
                      </div>
                     </motion.div>
                  )}
                </AnimatePresence>
              </CardContent>
            </Card>
          </div>
        </section>

        {/* CONTINUITY SECTION */}
        <section className="py-24 bg-secondary border-t border-border">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid md:grid-cols-2 gap-16 items-center">
              <div>
                <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/30 bg-primary/10 text-primary text-sm font-semibold tracking-wide mb-6">
                  O Fator LCP
                </div>
                <h2 className="text-4xl md:text-5xl font-bold mb-6">A maioria instala.<br/>A LCP permanece.</h2>
                <p className="text-lg text-secondary-foreground/70 mb-8 leading-relaxed">
                  Tecnologia abandonada perde valor. O <strong>Patrimônio Tecnológico™</strong> exige cuidado, atualização e gestão contínua. 
                  Com a <strong>Continuidade Tecnológica™</strong>, seu imóvel nunca fica obsoleto. Nós gerenciamos, atualizamos e garantimos a valorização do seu investimento ano após ano.
                </p>
                <Button asChild variant="outline" size="lg" className="border-border">
                  <Link to="/continuidade-tecnologica">Entender a Continuidade</Link>
                </Button>
              </div>
              <div className="relative">
                <div className="absolute inset-0 bg-primary/10 rounded-[2rem] transform translate-x-4 translate-y-4"></div>
                <img 
                  src="https://images.unsplash.com/photo-1600607686527-6fb886090705" 
                  alt="Interior sofisticado garantido"
                  className="rounded-[2rem] relative z-10 w-full h-[500px] object-cover grayscale hover:grayscale-0 transition-all duration-700"
                />
              </div>
            </div>
          </div>
        </section>

        {/* REAL EXPERIENCES SECTION */}
        <section className="py-24 bg-background">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
              <div>
                <h2 className="text-4xl font-bold mb-4">Experiências Reais™</h2>
                <p className="text-foreground/70 text-lg max-w-xl">Projetos certificados que redefiniram o padrão de moradia e valorização em Santa Catarina.</p>
              </div>
              <Button asChild variant="link" className="text-primary p-0">
                <Link to="/experiencias">Ver todas as obras <ArrowRight className="ml-2 h-4 w-4"/></Link>
              </Button>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="group relative overflow-hidden rounded-2xl cursor-pointer">
                <div className="absolute inset-0 bg-background/40 z-10 group-hover:bg-background/20 transition-colors duration-500"/>
                <img src="https://images.unsplash.com/photo-1570393625730-267b086a18a1" alt="Projeto 1" className="w-full h-[400px] object-cover transform group-hover:scale-105 transition-transform duration-700"/>
                <div className="absolute bottom-0 left-0 p-8 z-20">
                  <div className="bg-primary/90 text-primary-foreground text-xs font-bold px-3 py-1 rounded mb-3 inline-block">CVT PLATINUM</div>
                  <h3 className="text-2xl font-bold text-white mb-2">Cobertura Frente Mar, BC</h3>
                  <div className="flex items-center gap-2 text-white/80">
                    <Play className="h-4 w-4"/> Ver Estudo de Caso
                  </div>
                </div>
              </div>
              <div className="group relative overflow-hidden rounded-2xl cursor-pointer">
                <div className="absolute inset-0 bg-background/40 z-10 group-hover:bg-background/20 transition-colors duration-500"/>
                <img src="https://images.unsplash.com/photo-1684531975351-6fca7aaa6acb" alt="Projeto 2" className="w-full h-[400px] object-cover transform group-hover:scale-105 transition-transform duration-700"/>
                <div className="absolute bottom-0 left-0 p-8 z-20">
                  <div className="bg-primary/90 text-primary-foreground text-xs font-bold px-3 py-1 rounded mb-3 inline-block">CVT GOLD</div>
                  <h3 className="text-2xl font-bold text-white mb-2">Casa de Campo, Florianópolis</h3>
                  <div className="flex items-center gap-2 text-white/80">
                    <Play className="h-4 w-4"/> Ver Estudo de Caso
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* INVESTORS SECTION */}
        <section className="py-24 bg-secondary border-y border-border">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 className="text-sm font-bold tracking-widest text-primary uppercase mb-4">Para Investidores</h2>
            <h3 className="text-3xl md:text-5xl font-bold mb-6">A nova tese do Real Estate</h3>
            <p className="text-lg text-secondary-foreground/70 mb-10 leading-relaxed text-balance">
              Imóveis com alto nível de inteligência e certificação tecnológica vendem mais rápido e com prêmio sobre o mercado. Entenda nossa tese de como a tecnologia está moldando o futuro da rentabilidade imobiliária.
            </p>
            <Button asChild size="lg" className="bg-foreground text-background hover:bg-foreground/90 px-8">
              <Link to="/investidores">Conhecer Oportunidades</Link>
            </Button>
          </div>
        </section>

        {/* FINAL CTA */}
        <section className="py-32 relative overflow-hidden">
          <div className="absolute inset-0 bg-primary z-0">
             <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c')] opacity-10 mix-blend-overlay object-cover"></div>
          </div>
          <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-primary-foreground">
            <h2 className="text-4xl md:text-6xl font-bold mb-8 text-balance">
              Seu imóvel possui tecnologia. Mas ele possui Patrimônio Tecnológico Certificado™?
            </h2>
            <Button asChild size="lg" variant="secondary" className="h-14 px-10 text-lg font-bold">
              <Link to="/avaliacao-exclusiva">Solicitar Avaliação Exclusiva</Link>
            </Button>
          </div>
        </section>

      </main>
    </>
  );
}
