
import React from 'react';
import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button.jsx';
import { Card, CardContent } from '@/components/ui/card.jsx';
import { Lightbulb, Wind, PlaySquare, Lock, Clock } from 'lucide-react';

export default function ExperienciasPage() {
  return (
    <>
      <Helmet>
        <title>Experiências™ | LCP Valuation</title>
        <meta name="description" content="O verdadeiro luxo é viver sem fricção. Conheça as experiências certificadas LCP." />
      </Helmet>

      <main className="min-h-screen pt-24 bg-background">
        <section className="py-24 text-center px-4 max-w-4xl mx-auto">
          <h1 className="text-5xl md:text-7xl font-bold mb-6 text-balance">O verdadeiro luxo é viver sem fricção.</h1>
          <p className="text-xl text-foreground/70 mb-10">Quando a tecnologia atinge seu ápice, ela desaparece.</p>
          <Button asChild size="lg" className="bg-primary text-primary-foreground">
            <Link to="/avaliacao-exclusiva">Solicitar Avaliação Exclusiva</Link>
          </Button>
        </section>

        {/* OS PILARES DA EXPERIENCIA PREMIUM */}
        <section className="py-24 bg-secondary border-y 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">Os Pilares da Experiência Premium</h2>
              <p className="text-lg text-secondary-foreground/70 max-w-2xl mx-auto">A tecnologia não deve ser percebida. A experiência sim.</p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6">
               <Card className="bg-card border-border hover:border-primary/40 transition-colors lg:col-span-2">
                 <CardContent className="p-8">
                    <Lightbulb className="h-8 w-8 text-primary mb-4" />
                    <h3 className="font-bold text-xl mb-3">Iluminação Inteligente</h3>
                    <p className="text-card-foreground/70 text-sm leading-relaxed">Luzes que acompanham o ritmo circadiano, criando a atmosfera ideal para cada momento sem exigir comandos complexos.</p>
                 </CardContent>
               </Card>
               <Card className="bg-card border-border hover:border-primary/40 transition-colors lg:col-span-2">
                 <CardContent className="p-8">
                    <Wind className="h-8 w-8 text-primary mb-4" />
                    <h3 className="font-bold text-xl mb-3">Conforto Ambiental</h3>
                    <p className="text-card-foreground/70 text-sm leading-relaxed">Climatização, cortinas e qualidade do ar ajustadas preditivamente. Automação invisível a favor do seu bem-estar.</p>
                 </CardContent>
               </Card>
               <Card className="bg-card border-border hover:border-primary/40 transition-colors lg:col-span-2">
                 <CardContent className="p-8">
                    <PlaySquare className="h-8 w-8 text-primary mb-4" />
                    <h3 className="font-bold text-xl mb-3">Entretenimento Integrado</h3>
                    <p className="text-card-foreground/70 text-sm leading-relaxed">Som premium, imagem de cinema e acústica refinada distribuídas pela casa e controladas a partir de um único toque.</p>
                 </CardContent>
               </Card>
               <Card className="bg-card border-border hover:border-primary/40 transition-colors lg:col-span-3">
                 <CardContent className="p-8">
                    <Lock className="h-8 w-8 text-primary mb-4" />
                    <h3 className="font-bold text-xl mb-3">Segurança Conectada</h3>
                    <p className="text-card-foreground/70 text-sm leading-relaxed">Acesso biométrico, monitoramento inteligente e alertas proativos. Proteção integrada de forma orgânica à experiência da casa.</p>
                 </CardContent>
               </Card>
               <Card className="bg-card border-border hover:border-primary/40 transition-colors lg:col-span-3">
                 <CardContent className="p-8">
                    <Clock className="h-8 w-8 text-primary mb-4" />
                    <h3 className="font-bold text-xl mb-3">Rotinas Inteligentes</h3>
                    <p className="text-card-foreground/70 text-sm leading-relaxed">Ambientes que aprendem e respondem naturalmente aos hábitos dos moradores, reduzindo a fricção das tarefas diárias.</p>
                 </CardContent>
               </Card>
            </div>
          </div>
        </section>

        <section className="py-12 bg-background">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
              <div className="group rounded-2xl overflow-hidden bg-card border border-border h-[400px]">
                <img src="https://images.unsplash.com/photo-1642541070065-3912f347e7c6" alt="Suíte Sofisticada" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
              </div>
              <div className="group rounded-2xl overflow-hidden bg-card border border-border h-[400px]">
                <img src="https://images.unsplash.com/photo-1617228069096-4638a7ffc906" alt="Cozinha Premium" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
              </div>
            </div>
          </div>
        </section>

        <section className="py-24 bg-background">
          <div className="max-w-4xl mx-auto px-4 text-center">
            <h2 className="text-3xl md:text-4xl font-bold mb-8 text-foreground">Design e Silêncio</h2>
            <p className="text-lg text-foreground/80 leading-relaxed mb-8">
              Nossa filosofia é clara: a arquitetura é a estrela. Nossos painéis de controle, caixas de som e sensores são desenhados para se mesclar perfeitamente com pedras nobres, madeiras e acabamentos premium. O que fica é apenas a experiência certificada e a valorização estética.
            </p>
          </div>
        </section>
      </main>
    </>
  );
}
