"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ArrowLeft, Bed, Bath, Square } from 'lucide-react';

export default function PropertyDetailPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarStyleCentered
            navItems={[
              { name: "Início", id: "/" },
              { name: "Imóveis", id: "/#products" },
              { name: "Contato", id: "/#contact" },
            ]}
            brandName="JR Imóveis"
          />
        </div>

        <div className="container mx-auto py-12 px-6 space-y-12">
            <div className="flex items-center gap-2 mb-4">
                <a href="/#products" className="flex items-center text-primary hover:underline">
                    <ArrowLeft className="w-4 h-4 mr-1" /> Voltar para imóveis
                </a>
            </div>

            <div className="grid md:grid-cols-2 gap-8">
                <div className="space-y-4">
                    <img src="http://img.b2bpic.net/free-photo/beautiful-modern-house-cement-view-from-garden_1127-3209.jpg" alt="Property" className="w-full rounded-2xl shadow-lg" />
                    <div className="grid grid-cols-3 gap-2">
                        <img src="http://img.b2bpic.net/free-photo/relax-house-thai-style_1150-17982.jpg" alt="Details" className="rounded-lg" />
                        <img src="http://img.b2bpic.net/free-photo/beautiful-modern-house-cement-view-from-garden_1127-3209.jpg" alt="Details" className="rounded-lg" />
                        <img src="http://img.b2bpic.net/free-photo/real-estate-agent-front-door_23-2147653339.jpg" alt="Details" className="rounded-lg" />
                    </div>
                </div>
                <div className="space-y-6">
                    <h1 className="text-4xl font-bold">Casa de Alto Padrão no Centro</h1>
                    <p className="text-2xl font-semibold text-primary">R$ 450.000</p>
                    <div className="flex gap-6">
                        <div className="flex items-center gap-2"><Bed className="w-5 h-5 text-gray-500" /> 3 Quartos</div>
                        <div className="flex items-center gap-2"><Bath className="w-5 h-5 text-gray-500" /> 2 Banheiros</div>
                        <div className="flex items-center gap-2"><Square className="w-5 h-5 text-gray-500" /> 150m²</div>
                    </div>
                    <p className="text-gray-600">Esta residência exclusiva oferece acabamentos de primeira linha, ampla iluminação natural e uma localização imbatível no coração de Estância Velha. Ideal para famílias que buscam conforto e sofisticação.</p>
                </div>
            </div>
        </div>

        <div id="contact" data-section="contact">
          <ContactSplit
            tag="Contato"
            title="Gostou deste imóvel?"
            description="Entre em contato com nossa equipe agora e agende uma visita sem compromisso."
            background={{ variant: "plain" }}
            useInvertedBackground={false}
            mediaAnimation="slide-up"
            imageSrc="http://img.b2bpic.net/free-photo/businessman-with-tablet_23-2147996523.jpg"
          />
        </div>

        <div id="footer" data-section="footer">
            <FooterLogoReveal
            logoText="JR Imóveis"
            leftLink={{ text: "Termos de Uso", href: "#" }}
            rightLink={{ text: "Privacidade", href: "#" }}
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}