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 WhatsAppButton from '@/components/WhatsAppButton.jsx';
import { Badge } from '@/components/ui/badge.jsx';
import { Card, CardContent } from '@/components/ui/card.jsx';
import { Sparkles, Palette, Brain, Home, Zap, Award } from 'lucide-react';

export default function SignaturePage() {
  const features = [
    { icon: Palette, title: 'Projeto 100% personalizado', description: 'Cada detalhe pensado exclusivamente para você' },
    { icon: Brain, title: 'Arquitetura tecnológica exclusiva', description: 'Soluções únicas para necessidades únicas' },
    { icon: Zap, title: 'Automação avançada sob demanda', description: 'Tecnologia que vai além do convencional' },
    { icon: Home, title: 'Integração com projetos arquitetônicos', description: 'Harmonia perfeita entre design e tecnologia' },
    { icon: Sparkles, title: 'Soluções específicas para o imóvel', description: 'Cada espaço com sua identidade tecnológica' },
    { icon: Award, title: 'Definição técnica sob medida', description: 'Especificações criadas para seu projeto' }
  ];

  return (
    <>
      <Helmet>
        <title>Signature - Solução Personalizada | LCP Valuation</title>
        <meta name="description" content="Projetos tecnológicos exclusivos e personalizados. O selo Signature é desenvolvido sob medida para imóveis de alto padrão e demandas específicas." />
      </Helmet>

      <Header />

      <main className="pt-20">
        {/* Hero Section */}
        <section className="relative min-h-[70vh] flex items-center justify-center overflow-hidden bg-gradient-to-br from-secondary via-primary/20 to-secondary">
          <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 mx-auto text-center"
            >
              <Badge className="mb-6 bg-primary/20 text-primary border-primary/30">
                Plano Exclusivo
              </Badge>
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-[#1E40AF] mb-6 leading-tight" style={{ letterSpacing: '-0.02em' }}>
                Signature
              </h1>
              <p className="text-2xl md:text-3xl text-[#1E40AF]/90 mb-8">
                Solução 100% personalizada
              </p>
              <p className="text-xl text-[#1E40AF]/80 mb-8">
                Arquitetura tecnológica exclusiva para projetos especiais
              </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-[#1E40AF]/70 mb-1">Investimento</p>
                    <p className="text-lg font-bold text-[#1E40AF]">Sob análise técnica</p>
                  </CardContent>
                </Card>
                <Card className="bg-white/10 backdrop-blur-sm border-white/20">
                  <CardContent className="p-4">
                    <p className="text-sm text-[#1E40AF]/70 mb-1">Valorização</p>
                    <p className="text-lg font-bold text-primary">Variável (acima de 15%)</p>
                  </CardContent>
                </Card>
                <Card className="bg-white/10 backdrop-blur-sm border-white/20">
                  <CardContent className="p-4">
                    <p className="text-sm text-[#1E40AF]/70 mb-1">Recomendado</p>
                    <p className="text-lg font-bold text-[#1E40AF]">Projetos especiais</p>
                  </CardContent>
                </Card>
              </div>

              <WhatsAppButton
                message="Olá! Gostaria de saber mais sobre o plano Signature."
                size="lg"
                className="bg-primary text-[#1E40AF] hover:bg-primary/90"
              >
                Agendar análise 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">
                Como funciona o Signature
              </h2>
              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
                Cada projeto é único e merece uma solução exclusiva
              </p>
            </motion.div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {features.map((feature, 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="p-6 rounded-xl bg-card border border-border hover:shadow-lg transition-all duration-300"
                >
                  <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
                    <feature.icon className="h-6 w-6 text-primary" />
                  </div>
                  <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
                  <p className="text-sm text-muted-foreground">{feature.description}</p>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* Unique Message Section */}
        <section className="py-20 bg-muted">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="text-center p-12 rounded-2xl bg-gradient-to-br from-primary/10 to-primary/5 border border-primary/20"
            >
              <Sparkles className="h-16 w-16 text-primary mx-auto mb-6" />
              <h2 className="text-3xl md:text-4xl font-bold mb-4">
                Seu projeto é único
              </h2>
              <p className="text-xl text-muted-foreground mb-6">
                Sua solução também deve ser
              </p>
              <p className="text-base text-muted-foreground max-w-2xl mx-auto">
                O plano Signature é desenvolvido especificamente para projetos que exigem soluções tecnológicas exclusivas. Cada detalhe é pensado para atender às necessidades únicas do seu imóvel, integrando-se perfeitamente com o projeto arquitetônico e superando expectativas.
              </p>
            </motion.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">
                Vamos criar algo extraordinário juntos
              </h2>
              <p className="text-xl mb-8 opacity-90">
                Agende uma análise técnica e descubra como podemos transformar seu projeto em realidade
              </p>
              <WhatsAppButton
                message="Olá! Gostaria de agendar uma análise técnica para o plano Signature."
                size="lg"
                className="bg-primary text-primary-foreground hover:bg-primary/90 text-lg px-8 py-6 h-auto"
              >
                Agendar análise técnica
              </WhatsAppButton>
            </motion.div>
          </div>
        </section>
      </main>

      <Footer />
    </>
  );
}