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 { Lightbulb, Thermometer, Music, Smartphone, Sparkles, Fingerprint, Network, Home, Award, TrendingUp, Lock, Zap } from 'lucide-react';

export default function GoldPage() {
  const features = [
    { icon: Lightbulb, title: 'Automação completa de iluminação', description: 'Controle total da iluminação em todos os ambientes' },
    { icon: Thermometer, title: 'Controle de climatização', description: 'Temperatura perfeita em cada cômodo' },
    { icon: Music, title: 'Integração de áudio e vídeo', description: 'Entretenimento integrado e sincronizado' },
    { icon: Smartphone, title: 'Controle por aplicativo e voz', description: 'Comandos intuitivos e práticos' },
    { icon: Sparkles, title: 'Cenários inteligentes', description: 'Ambientes que se adaptam ao seu dia' },
    { icon: Fingerprint, title: 'Controle de acesso com biometria', description: 'Segurança avançada' },
    { icon: Network, title: 'Infraestrutura de rede estruturada', description: 'Base sólida para toda a automação' },
    { icon: Home, title: 'Integração entre ambientes', description: 'Todos os espaços trabalhando em harmonia' }
  ];

  const benefits = [
    { icon: Award, title: 'Conforto inteligente', description: 'Ambiente sempre ideal' },
    { icon: Lock, title: 'Segurança avançada', description: 'Proteção integrada' },
    { icon: Zap, title: 'Eficiência energética', description: 'Economia inteligente' },
    { icon: TrendingUp, title: 'Valorização de 6-12%', description: 'Investimento que retorna' }
  ];

  return (
    <>
      <Helmet>
        <title>Gold - Automação Inteligente | LCP Valuation</title>
        <meta name="description" content="Automação inteligente para elevar o padrão do seu imóvel. O selo Gold oferece equilíbrio entre investimento, conforto e valorização tecnológica." />
      </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/f1d74ef884c51f95e368d884dd3ce413.png" 
              alt="Cozinha moderna com design minimalista, iluminação integrada, acabamentos premium e integração tecnológica"
              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 Avançado
              </Badge>
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight" style={{ letterSpacing: '-0.02em' }}>
                Gold
              </h1>
              <p className="text-2xl md:text-3xl text-white/90 mb-8">
                Automação inteligente e integrada
              </p>
              <p className="text-xl text-white/80 mb-8">
                Tecnologia avançada para imóveis de alto padrão
              </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$ 25.000 a R$ 60.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">6% a 12%</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">R$ 600-800 mil</p>
                  </CardContent>
                </Card>
              </div>

              <WhatsAppButton
                message="Olá! Gostaria de saber mais sobre o plano Gold."
                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">
                Automação completa com integração inteligente
              </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 Gold
              </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">
                Eleve seu imóvel a outro patamar
              </h2>
              <p className="text-xl mb-8 opacity-90">
                Agende uma avaliação técnica e descubra como o plano Gold pode transformar seu patrimônio
              </p>
              <WhatsAppButton
                message="Olá! Gostaria de agendar uma avaliação técnica para o plano Gold."
                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 />
    </>
  );
}