
import React from 'react';
import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button.jsx';
import { Card, CardContent } from '@/components/ui/card.jsx';
import { Shield, Settings, Infinity, TrendingUp, FileText, Network, History, ArrowRightLeft, User, Key, Building } from 'lucide-react';

export default function MetodoCVTPage() {
  const pillars = [
    { icon: Settings, title: "Experiência", desc: "A tecnologia deve servir à vida, sendo invisível, intuitiva e sem atritos no dia a dia." },
    { icon: Shield, title: "Integração", desc: "Sistemas independentes não geram valor. O método exige orquestração centralizada." },
    { icon: Infinity, title: "Continuidade", desc: "A garantia de que o patrimônio tecnológico evoluirá, sem obsolescência programada." },
    { icon: TrendingUp, title: "Valorização", desc: "O resultado final: um prêmio financeiro e de liquidez sobre o valor de mercado." }
  ];

  const steps = [
    { phase: "01", title: "Análise", desc: "Auditoria completa da infraestrutura e potencial do imóvel." },
    { phase: "02", title: "Avaliação", desc: "Definição do escopo e adequação ao nível de certificação (Silver, Gold, Platinum)." },
    { phase: "03", title: "Implementação", desc: "Engenharia de precisão com equipes homologadas LCP." },
    { phase: "04", title: "Certificação", desc: "Emissão do Passaporte Tecnológico™ validando o patrimônio." },
    { phase: "05", title: "Continuidade", desc: "Gestão ativa, suporte e atualizações constantes." }
  ];

  return (
    <>
      <Helmet>
        <title>Método CVT™ | LCP Valuation</title>
        <meta name="description" content="Certificação. Continuidade. Valorização. Conheça a metodologia exclusiva de valorização patrimonial." />
      </Helmet>

      <main className="min-h-screen pt-24 bg-background">
        {/* HERO */}
        <section className="py-20 border-b border-border">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
              <div className="text-primary font-bold tracking-widest text-sm mb-4">METODOLOGIA EXCLUSIVA</div>
              <h1 className="text-5xl md:text-7xl font-bold mb-6">Método CVT™</h1>
              <p className="text-2xl text-foreground/80 mb-6">Certificação. Continuidade. Valorização.</p>
              <p className="text-lg text-foreground/60 mb-10 text-balance leading-relaxed">
                Mais do que instalar equipamentos, o Método de Certificação de Valor Tecnológico™ (CVT) é a estrutura proprietária da LCP para auditar, padronizar e atestar a inteligência de imóveis de luxo, transformando gadgets dispersos em um ativo financeiro reconhecido.
              </p>
              <Button asChild size="lg" className="bg-primary text-primary-foreground hover:bg-accent px-8">
                <Link to="/avaliacao-exclusiva">Solicitar Avaliação Exclusiva</Link>
              </Button>
            </motion.div>
          </div>
        </section>

        {/* PILLARS */}
        <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">
              <h2 className="text-3xl md:text-4xl font-bold mb-4">Os 4 Pilares da Certificação</h2>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {pillars.map((p, i) => (
                <div key={i} className="bg-card p-8 rounded-2xl border border-border hover:border-primary/30 transition-colors">
                  <p.icon className="h-10 w-10 text-primary mb-6" />
                  <h3 className="text-xl font-bold mb-3">{p.title}</h3>
                  <p className="text-card-foreground/70 text-sm leading-relaxed">{p.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* PROCESS */}
        <section className="py-24 bg-background">
          <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="text-3xl md:text-4xl font-bold mb-16 text-center">A Jornada de Valorização</h2>
            <div className="space-y-12 relative before:absolute before:inset-0 before:ml-8 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-border">
              {steps.map((step, i) => (
                <div key={i} className="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
                  <div className="flex items-center justify-center w-16 h-16 rounded-full border-4 border-background bg-secondary text-primary font-bold shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10">
                    {step.phase}
                  </div>
                  <div className="w-[calc(100%-4rem)] md:w-[calc(50%-3rem)] p-6 bg-card border border-border rounded-2xl shadow-sm">
                    <h3 className="text-xl font-bold mb-2">{step.title}</h3>
                    <p className="text-card-foreground/70 text-sm">{step.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* NOVO: PASSAPORTE TECNOLOGICO */}
        <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="text-center mb-16">
              <h2 className="text-3xl md:text-5xl font-bold mb-4">Passaporte Tecnológico™</h2>
              <p className="text-lg text-secondary-foreground/70 max-w-2xl mx-auto">O resultado documentado da certificação.</p>
              <p className="mt-6 text-secondary-foreground/80 max-w-3xl mx-auto leading-relaxed">
                Assim como um veículo de luxo possui um manual de revisões, o seu imóvel ganha um documento oficial que atesta todo o investimento, a topologia de rede e o histórico evolutivo da sua residência. A tecnologia deixa de ser abstrata e passa a ter registro.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6 mb-24">
              <Card className="bg-card border-border lg:col-span-2 hover:border-primary/30 transition-colors">
                <CardContent className="p-8">
                  <FileText className="h-8 w-8 text-primary mb-4" />
                  <h3 className="font-bold text-lg mb-2">Certificação CVT</h3>
                  <p className="text-sm text-card-foreground/70">Registro do nível de certificação alcançado (Silver, Gold ou Platinum).</p>
                </CardContent>
              </Card>
              <Card className="bg-card border-border lg:col-span-2 hover:border-primary/30 transition-colors">
                <CardContent className="p-8">
                  <Network className="h-8 w-8 text-primary mb-4" />
                  <h3 className="font-bold text-lg mb-2">Infraestrutura</h3>
                  <p className="text-sm text-card-foreground/70">Mapeamento preciso dos sistemas, cabeamentos e integrações existentes.</p>
                </CardContent>
              </Card>
              <Card className="bg-card border-border lg:col-span-2 hover:border-primary/30 transition-colors">
                <CardContent className="p-8">
                  <History className="h-8 w-8 text-primary mb-4" />
                  <h3 className="font-bold text-lg mb-2">Histórico Evolutivo</h3>
                  <p className="text-sm text-card-foreground/70">Registro imutável de atualizações, upgrades e melhorias realizadas ao longo do tempo.</p>
                </CardContent>
              </Card>
              <Card className="bg-card border-border lg:col-span-3 hover:border-primary/30 transition-colors">
                <CardContent className="p-8">
                  <Infinity className="h-8 w-8 text-primary mb-4" />
                  <h3 className="font-bold text-lg mb-2">Continuidade Tecnológica</h3>
                  <p className="text-sm text-card-foreground/70">Documentação do acompanhamento preventivo e corretivo realizado periodicamente pela LCP.</p>
                </CardContent>
              </Card>
              <Card className="bg-card border-border lg:col-span-3 hover:border-primary/30 transition-colors">
                <CardContent className="p-8">
                  <ArrowRightLeft className="h-8 w-8 text-primary mb-4" />
                  <h3 className="font-bold text-lg mb-2">Transferência Patrimonial</h3>
                  <p className="text-sm text-card-foreground/70">Preservação intacta do conhecimento tecnológico do imóvel para futuros proprietários, agregando valor e confiança na negociação.</p>
                </CardContent>
              </Card>
            </div>

            <div className="grid md:grid-cols-3 gap-12 bg-background p-10 rounded-3xl border border-border relative overflow-hidden">
              <div className="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl" />
              <div className="relative z-10">
                <div className="flex items-center gap-3 mb-6">
                  <User className="h-6 w-6 text-primary" />
                  <h3 className="text-xl font-bold uppercase tracking-widest text-primary text-sm">Para Proprietários</h3>
                </div>
                <ul className="space-y-4">
                  <li className="flex items-start gap-2 text-sm text-foreground/80"><span className="text-primary mt-0.5">•</span> Organização e clareza do escopo</li>
                  <li className="flex items-start gap-2 text-sm text-foreground/80"><span className="text-primary mt-0.5">•</span> Controle total sobre os sistemas</li>
                  <li className="flex items-start gap-2 text-sm text-foreground/80"><span className="text-primary mt-0.5">•</span> Segurança patrimonial ativa</li>
                  <li className="flex items-start gap-2 text-sm text-foreground/80"><span className="text-primary mt-0.5">•</span> Histórico de valor permanente</li>
                </ul>
              </div>
              <div className="relative z-10">
                <div className="flex items-center gap-3 mb-6">
                  <Key className="h-6 w-6 text-primary" />
                  <h3 className="text-xl font-bold uppercase tracking-widest text-primary text-sm">Para Compradores</h3>
                </div>
                <ul className="space-y-4">
                  <li className="flex items-start gap-2 text-sm text-foreground/80"><span className="text-primary mt-0.5">•</span> Transparência total no investimento</li>
                  <li className="flex items-start gap-2 text-sm text-foreground/80"><span className="text-primary mt-0.5">•</span> Confiança técnica no projeto</li>
                  <li className="flex items-start gap-2 text-sm text-foreground/80"><span className="text-primary mt-0.5">•</span> Continuidade operacional garantida</li>
                  <li className="flex items-start gap-2 text-sm text-foreground/80"><span className="text-primary mt-0.5">•</span> Segurança absoluta na aquisição</li>
                </ul>
              </div>
              <div className="relative z-10">
                <div className="flex items-center gap-3 mb-6">
                  <Building className="h-6 w-6 text-primary" />
                  <h3 className="text-xl font-bold uppercase tracking-widest text-primary text-sm">Para Investidores</h3>
                </div>
                <ul className="space-y-4">
                  <li className="flex items-start gap-2 text-sm text-foreground/80"><span className="text-primary mt-0.5">•</span> Ativo documentado e chancelado</li>
                  <li className="flex items-start gap-2 text-sm text-foreground/80"><span className="text-primary mt-0.5">•</span> Maior liquidez em negociações</li>
                  <li className="flex items-start gap-2 text-sm text-foreground/80"><span className="text-primary mt-0.5">•</span> Maior percepção de valor geral</li>
                  <li className="flex items-start gap-2 text-sm text-foreground/80"><span className="text-primary mt-0.5">•</span> Diferenciação competitiva no mercado</li>
                </ul>
              </div>
            </div>
            
          </div>
        </section>

        {/* FINAL CTA */}
        <section className="py-32 bg-background text-center border-t border-border">
          <div className="max-w-3xl mx-auto px-4">
            <h2 className="text-4xl font-bold mb-6">A maioria instala tecnologia.<br/>O Método CVT certifica valor.</h2>
            <Button asChild size="lg" className="bg-primary text-primary-foreground px-8 mt-6">
              <Link to="/avaliacao-exclusiva">Solicitar Avaliação Exclusiva</Link>
            </Button>
          </div>
        </section>
      </main>
    </>
  );
}
