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 { Network, Lightbulb, Mic, Tv, Wifi, Settings, Award, TrendingUp, Lock, Zap } from 'lucide-react';

export default function SilverPage() {
  const features = [
    { icon: Network, title: 'Infraestrutura básica de automação', description: 'Base sólida para começar sua jornada' },
    { icon: Lightbulb, title: 'Controle de iluminação', description: 'Iluminação inteligente nos principais ambientes' },
    { icon: Mic, title: 'Integração com assistente de voz', description: 'Comandos por voz para maior praticidade' },
    { icon: Tv, title: 'Automação de TV e entretenimento', description: 'Controle centralizado de mídia' },
    { icon: Wifi, title: 'Configuração inicial de conectividade', description: 'Rede preparada para automação' },
    { icon: Settings, title: 'Organização técnica dos sistemas', description: 'Instalação profissional e organizada' }
  ];

  const benefits = [
    { icon: Award, title: 'Entrada acessível', description: 'Comece com investimento inteligente' },
    { icon: Lock, title: 'Base para expansão', description: 'Pronto para crescer' },
    { icon: Zap, title: 'Economia de energia', description: 'Redução no consumo' },
    { icon: TrendingUp, title: 'Valorização de 3-6%', description: 'Retorno garantido' }
  ];

  return (
    <>
      <Helmet>
        <title>Silver - Entrada para Automação | LCP Valuation</title>
        <meta name="description" content="Entrada estratégica em automação residencial. O selo Silver melhora conforto, tecnologia e inicia a valorização do seu 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/81dedb710007252a0f1e20d2003a6623.png" 
              alt="Quarto moderno com automação inteligente, painel de controle digital, iluminação ambiente e design premium"
              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 Inicial
              </Badge>
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight" style={{ letterSpacing: '-0.02em' }}>
                Silver
              </h1>
              <p className="text-2xl md:text-3xl text-white/90 mb-8">
                Sua entrada para a automação residencial
              </p>
              <p className="text-xl text-white/80 mb-8">
                Tecnologia inteligente acessível e eficaz
              </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$ 12.000 a R$ 25.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">3% a 6%</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">A partir de R$ 400 mil</p>
                  </CardContent>
                </Card>
              </div>

              <WhatsAppButton
                message="Olá! Gostaria de saber mais sobre o plano Silver."
                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">
                Fundação sólida para sua automação residencial
              </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 Silver
              </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">
                Comece sua jornada na automação
              </h2>
              <p className="text-xl mb-8 opacity-90">
                Agende uma avaliação técnica e descubra como o plano Silver pode valorizar seu imóvel
              </p>
              <WhatsAppButton
                message="Olá! Gostaria de agendar uma avaliação técnica para o plano Silver."
                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 />
    </>
  );
}