import React from 'react';
import { Helmet } from 'react-helmet';
import { motion } from 'framer-motion';
import Header from '@/components/Header.jsx';
import Footer from '@/components/Footer.jsx';
import FeatureItem from '@/components/FeatureItem.jsx';
import WhatsAppButton from '@/components/WhatsAppButton.jsx';
import { Badge } from '@/components/ui/badge.jsx';
import { Card, CardContent } from '@/components/ui/card.jsx';
import { Home, Lightbulb, Music, Shield, Sparkles, Brain, Fingerprint, Network, Zap, Award, TrendingUp, Lock } from 'lucide-react';

export default function PlatinumPage() {
  const features = [
    { icon: Home, title: 'Automação total do imóvel', description: 'Controle completo de todos os ambientes e sistemas' },
    { icon: Lightbulb, title: 'Iluminação, climatização e segurança integradas', description: 'Sistemas trabalhando em harmonia perfeita' },
    { icon: Music, title: 'Áudio e vídeo multiambiente', description: 'Entretenimento premium em todos os cômodos' },
    { icon: Brain, title: 'Controle centralizado completo', description: 'Gestão inteligente de toda a residência' },
    { icon: Sparkles, title: 'Projetos personalizados por ambiente', description: 'Cada espaço com sua identidade tecnológica' },
    { icon: Zap, title: 'Cenários avançados e inteligência de uso', description: 'Automação que aprende seus hábitos' },
    { icon: Fingerprint, title: 'Controle de acesso com biometria', description: 'Segurança de alto padrão' },
    { icon: Network, title: 'Infraestrutura tecnológica de alto padrão', description: 'Base sólida para expansões futuras' },
    { icon: Shield, title: 'Integração total dos sistemas', description: 'Todos os componentes trabalhando como um só' }
  ];

  const benefits = [
    { icon: Award, title: 'Conforto máximo', description: 'Ambiente sempre perfeito para cada momento' },
    { icon: Lock, title: 'Segurança integrada', description: 'Proteção completa e inteligente' },
    { icon: Zap, title: 'Eficiência energética', description: 'Economia com sustentabilidade' },
    { icon: TrendingUp, title: 'Valorização patrimonial', description: 'Investimento que se paga' }
  ];

  return (
    <>
      <Helmet>
        <title>Platinum - Automação Total | LCP Valuation</title>
        <meta name="description" content="Projeto completo de automação e valorização imobiliária. O selo Platinum entrega tecnologia integrada e máximo potencial de valorização do imóvel." />
      </Helmet>

      <Header />

      <main className="pt-20">
        {/* Hero Section */}
        <section className="relative min-h-[70vh] flex items-center justify-center overflow-hidden">
          <div className="absolute inset-0 z-0">
            <img 
              src="https://horizons-cdn.hostinger.com/8c2730ea-a541-4aef-bd5f-6ef8364cf789/51848e8d9e9e45a52ed682ccc2138dd5.png" 
              alt="Casa moderna com piscina, iluminação dourada, áreas de lazer e integração com natureza"
              className="w-full h-full object-cover"
            />
            <div className="absolute inset-0 bg-gradient-to-r from-secondary/95 via-secondary/85 to-secondary/70" />
          </div>

          <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="max-w-3xl"
            >
              <Badge className="mb-6 bg-primary/20 text-primary border-primary/30">
                Plano Premium
              </Badge>
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight" style={{ letterSpacing: '-0.02em' }}>
                Platinum
              </h1>
              <p className="text-2xl md:text-3xl text-white/90 mb-8">
                Automação total do seu imóvel
              </p>
              <p className="text-xl text-white/80 mb-8">
                O máximo em tecnologia, conforto e valorização patrimonial
              </p>

              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
                <Card className="bg-white/10 backdrop-blur-sm border-white/20">
                  <CardContent className="p-4">
                    <p className="text-sm text-white/70 mb-1">Investimento</p>
                    <p className="text-lg font-bold text-white">R$ 60.000 a R$ 150.000+</p>
                  </CardContent>
                </Card>
                <Card className="bg-white/10 backdrop-blur-sm border-white/20">
                  <CardContent className="p-4">
                    <p className="text-sm text-white/70 mb-1">Valorização</p>
                    <p className="text-lg font-bold text-primary">12% a 25%</p>
                  </CardContent>
                </Card>
                <Card className="bg-white/10 backdrop-blur-sm border-white/20">
                  <CardContent className="p-4">
                    <p className="text-sm text-white/70 mb-1">Valor do imóvel:</p>
                    <p className="text-lg font-bold text-white">Acima de R$ 800 mil</p>
                  </CardContent>
                </Card>
              </div>

              <WhatsAppButton
                message="Olá! Gostaria de saber mais sobre o plano Platinum."
                size="lg"
                className="bg-primary text-primary-foreground hover:bg-primary/90"
              >
                Solicitar avaliação técnica
              </WhatsAppButton>
            </motion.div>
          </div>
        </section>

        {/* Features Section */}
        <section className="py-20">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="text-center mb-12"
            >
              <h2 className="text-3xl md:text-4xl font-bold mb-4">
                O que está incluído
              </h2>
              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
                Tecnologia de ponta para transformar completamente seu imóvel
              </p>
            </motion.div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {features.map((feature, index) => (
                <FeatureItem key={index} {...feature} index={index} />
              ))}
            </div>
          </div>
        </section>

        {/* Benefits Section */}
        <section className="py-20 bg-muted">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="text-center mb-12"
            >
              <h2 className="text-3xl md:text-4xl font-bold mb-4">
                Benefícios do plano Platinum
              </h2>
            </motion.div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {benefits.map((benefit, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  className="text-center p-6"
                >
                  <div className="w-16 h-16 rounded-xl bg-primary/10 flex items-center justify-center mx-auto mb-4">
                    <benefit.icon className="h-8 w-8 text-primary" />
                  </div>
                  <h3 className="text-lg font-semibold mb-2">{benefit.title}</h3>
                  <p className="text-sm text-muted-foreground">{benefit.description}</p>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-20 bg-secondary text-secondary-foreground">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
            >
              <h2 className="text-3xl md:text-4xl font-bold mb-6">
                Transforme seu imóvel em um patrimônio inteligente
              </h2>
              <p className="text-xl mb-8 opacity-90">
                Agende uma avaliação técnica e descubra como o plano Platinum pode valorizar seu patrimônio
              </p>
              <WhatsAppButton
                message="Olá! Gostaria de agendar uma avaliação técnica para o plano Platinum."
                size="lg"
                className="bg-primary text-primary-foreground hover:bg-primary/90 text-lg px-8 py-6 h-auto"
              >
                Solicitar avaliação técnica
              </WhatsAppButton>
            </motion.div>
          </div>
        </section>
      </main>

      <Footer />
    </>
  );
}