
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 { Compass, ShieldCheck, RefreshCw, Lightbulb, Building } from 'lucide-react';

export default function SobrePage() {
  return (
    <>
      <Helmet>
        <title>Sobre Nós | LCP Valuation</title>
        <meta name="description" content="Transformando tecnologia em patrimônio desde 2006." />
      </Helmet>

      <main className="min-h-screen pt-24 bg-background">
        <section className="py-24 text-center px-4 max-w-5xl mx-auto border-b border-border">
          <h1 className="text-5xl md:text-7xl font-bold mb-6 text-balance">Transformando tecnologia em patrimônio.</h1>
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/30 bg-primary/10 text-primary font-semibold mt-4">
            Desde 2006
          </div>
        </section>

        <section className="py-24 bg-secondary">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid md:grid-cols-2 gap-16 items-center">
              <div>
                <h2 className="text-3xl md:text-4xl font-bold mb-6 text-secondary-foreground">Nossa Origem</h2>
                <div className="prose prose-lg dark:prose-invert text-secondary-foreground/80 leading-relaxed">
                  <p>
                    Nascemos da engenharia pura. Por quase duas décadas, estivemos nos bastidores das maiores implementações tecnológicas do sul do país. No entanto, ao monitorar o ciclo de vida dessas residências luxuosas, observamos uma falha estrutural gravíssima no mercado de automação.
                  </p>
                  <p>
                    A tecnologia envelhecia, perdia documentação na troca de proprietários e, invariavelmente, destruía o valor investido porque era tratada como "acessório eletrônico" e não como <em>patrimônio estrutural</em>. Um valor enorme, completamente desestruturado.
                  </p>
                </div>
              </div>
              <div className="relative">
                 <img src="https://images.unsplash.com/photo-1694807308928-b848e1ae121f" alt="Fachada Premium" className="rounded-2xl object-cover h-[450px] w-full shadow-2xl" />
              </div>
            </div>
          </div>
        </section>

        <section className="py-24 bg-background">
          <div className="max-w-4xl mx-auto px-4 text-center">
            <div className="mb-20">
              <h2 className="text-3xl md:text-4xl font-bold mb-6">Muito Além da Automação</h2>
              <p className="text-lg text-foreground/80 leading-relaxed text-balance">
                A LCP Valuation não é uma loja de equipamentos. Não somos integradores tradicionais interessados em vender mais hardware. Nós somos uma empresa de valoração estrutural focada em tecnologia de alto padrão.
              </p>
            </div>

            <div className="grid md:grid-cols-2 gap-8 text-left">
              <Card className="bg-secondary border-border hover:border-primary/40 transition-colors">
                <CardContent className="p-10">
                   <h3 className="font-bold text-2xl text-primary mb-4">Propósito</h3>
                   <p className="text-secondary-foreground/80 text-lg leading-relaxed">Criar uma nova cultura de valorização patrimonial tecnológica no mercado imobiliário.</p>
                </CardContent>
              </Card>
              <Card className="bg-secondary border-border hover:border-primary/40 transition-colors">
                <CardContent className="p-10">
                   <h3 className="font-bold text-2xl text-primary mb-4">Visão</h3>
                   <p className="text-secondary-foreground/80 text-lg leading-relaxed">Ser a maior referência nacional em Patrimônio Tecnológico Certificado™ para o alto padrão.</p>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

        <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">Nossos Pilares</h2>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
               <Card className="bg-card border-border hover:border-primary/40 transition-colors">
                 <CardContent className="p-8 text-center flex flex-col items-center">
                    <Compass className="h-10 w-10 text-primary mb-4" />
                    <h3 className="font-bold text-lg">Metodologia</h3>
                 </CardContent>
               </Card>
               <Card className="bg-card border-border hover:border-primary/40 transition-colors">
                 <CardContent className="p-8 text-center flex flex-col items-center">
                    <ShieldCheck className="h-10 w-10 text-primary mb-4" />
                    <h3 className="font-bold text-lg">Certificação</h3>
                 </CardContent>
               </Card>
               <Card className="bg-card border-border hover:border-primary/40 transition-colors">
                 <CardContent className="p-8 text-center flex flex-col items-center">
                    <RefreshCw className="h-10 w-10 text-primary mb-4" />
                    <h3 className="font-bold text-lg">Continuidade</h3>
                 </CardContent>
               </Card>
               <Card className="bg-card border-border hover:border-primary/40 transition-colors">
                 <CardContent className="p-8 text-center flex flex-col items-center">
                    <Lightbulb className="h-10 w-10 text-primary mb-4" />
                    <h3 className="font-bold text-lg">Inovação</h3>
                 </CardContent>
               </Card>
               <Card className="bg-card border-border hover:border-primary/40 transition-colors">
                 <CardContent className="p-8 text-center flex flex-col items-center">
                    <Building className="h-10 w-10 text-primary mb-4" />
                    <h3 className="font-bold text-lg">Patrimônio</h3>
                 </CardContent>
               </Card>
            </div>
          </div>
        </section>

        <section className="py-24 bg-background">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="relative rounded-[2.5rem] overflow-hidden">
                <div className="absolute inset-0 bg-background/50 z-10" />
                <img src="https://images.unsplash.com/photo-1688374694631-981d48c75ca6" alt="Lifestyle Premium" className="w-full h-[500px] object-cover" />
                <div className="absolute inset-0 z-20 flex flex-col items-center justify-center text-center p-8">
                   <h2 className="text-4xl md:text-6xl font-bold mb-8 text-white max-w-3xl text-balance">
                     Garantimos que a tecnologia do seu imóvel valha amanhã mais do que vale hoje.
                   </h2>
                   <Button asChild size="lg" className="bg-primary text-primary-foreground px-10 h-14 text-lg">
                      <Link to="/metodo-cvt">Conheça o Método CVT™</Link>
                    </Button>
                </div>
             </div>
          </div>
        </section>
      </main>
    </>
  );
}
