"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Link from "next/link";
import { Sparkles, MessageSquare } from "lucide-react";

export default function PropertiesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Properties", id: "properties" },
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Team", id: "team" },
            { name: "Contact", id: "contact" },
          ]}
          button={{ text: "Schedule Tour", href: "/contact" }}
          brandName="Luxury Estates"
        />
      </div>

      <div id="properties" data-section="properties">
        <ProductCardFour
          title="Complete Luxury Property Portfolio"
          description="Explore our comprehensive collection of exceptional luxury properties. Each residence has been carefully curated to represent the finest in architectural design and premium living."
          tag="All Available Properties"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            {
              id: "1",
              name: "Modern Metropolitan Penthouse",
              price: "$4,850,000",
              variant: "Luxury Penthouse  2 BR  2 BA",
              imageSrc: "http://img.b2bpic.net/free-photo/attractive-woman-reading-magazine-near-panoramic-window_7502-9287.jpg?_wi=4",
              imageAlt: "Modern Penthouse",
            },
            {
              id: "2",
              name: "Waterfront Mediterranean Villa",
              price: "$7,200,000",
              variant: "Estate Villa  5 BR  5 BA",
              imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-summer-holidays_23-2151982712.jpg?_wi=3",
              imageAlt: "Mediterranean Villa",
            },
            {
              id: "3",
              name: "Architect-Designed Contemporary Estate",
              price: "$5,650,000",
              variant: "Contemporary Home  4 BR  4 BA",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-rich-woman-outdoors-with-stylish-dress-sunglasses_23-2149548580.jpg?_wi=3",
              imageAlt: "Contemporary Estate",
            },
            {
              id: "4",
              name: "Exclusive Riverside Manor",
              price: "$6,500,000",
              variant: "Grand Estate  6 BR  6 BA",
              imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-resting-home-with-good-mood_651396-28.jpg?_wi=2",
              imageAlt: "Riverside Manor",
            },
            {
              id: "5",
              name: "Private Island Resort Home",
              price: "$8,950,000",
              variant: "Ultra-Luxury Retreat  8 BR  8 BA",
              imageSrc: "http://img.b2bpic.net/free-photo/swimming-pool-beach-luxury-hotel-type-entertainment-complex-amara-dolce-vita-luxury-hotel-resort-tekirova-kemer-turkey_146671-18719.jpg?_wi=2",
              imageAlt: "Island Resort",
            },
            {
              id: "6",
              name: "Urban Skyline Tower Residence",
              price: "$3,900,000",
              variant: "Premium Condo  3 BR  3 BA",
              imageSrc: "http://img.b2bpic.net/free-photo/slim-woman-elegant-brown-hat-eating-juicy-fruits-resort-cafe-graceful-european-woman-white-shirt-relaxing-with-cocktail-food-pool_197531-20844.jpg?_wi=2",
              imageAlt: "Tower Residence",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          buttons={[{ text: "Back to Home", href: "/" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="contact-cta" data-section="contact-cta">
        <ContactCTA
          tag="Ready to Explore?"
          tagIcon={MessageSquare}
          tagAnimation="slide-up"
          title="Schedule Your Private Property Tour"
          description="Experience these luxury residences firsthand. Our specialists will arrange exclusive viewings tailored to your preferences and availability."
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Book a Tour", href: "/contact" },
            { text: "Request Information", href: "/contact" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Navigate",
              items: [
                { label: "Home", href: "/" },
                { label: "Properties", href: "/properties" },
                { label: "About", href: "/about" },
                { label: "Contact", href: "/contact" },
              ],
            },
            {
              title: "Services",
              items: [
                { label: "Property Search", href: "/" },
                { label: "Investment Analysis", href: "/" },
                { label: "Concierge Services", href: "/" },
                { label: "Market Reports", href: "/" },
              ],
            },
            {
              title: "Company",
              items: [
                { label: "Our Team", href: "/about" },
                { label: "Testimonials", href: "/" },
                { label: "Careers", href: "#" },
                { label: "Press", href: "#" },
              ],
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Disclosure", href: "#" },
                { label: "Contact", href: "/contact" },
              ],
            },
          ]}
          bottomLeftText="© 2025 Luxury Estates. All rights reserved."
          bottomRightText="Redefining Luxury Real Estate Worldwide"
        />
      </div>
    </ThemeProvider>
  );
}