"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import MediaAbout from "@/components/sections/about/MediaAbout";
import TeamCardOne from "@/components/sections/team/TeamCardOne";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Users, Phone } from "lucide-react";

const navItems = [
  { name: "Home", id: "/" },
  { name: "Properties", id: "/properties" },
  { name: "About", id: "/about" },
  { name: "Team", id: "/team" },
  { name: "Contact", id: "/contact" },
];

const navButton = {
  text: "Schedule Viewing",  href: "/contact"};

export default function AboutPage() {
  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={navItems}
          button={navButton}
          brandName="Luxe Estates"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Your Premier Luxury Broker"
          description="With over 25 years of experience in luxury real estate, Luxe Estates has established an unparalleled reputation for excellence. We specialize in connecting discerning buyers and sellers with exceptional properties that define sophistication and success."
          tag="About Luxe Estates"
          imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office_23-2151780697.jpg"
          imageAlt="Luxe Estates office interior"
          buttons={[{ text: "Learn Our Story", href: "#" }]}
          useInvertedBackground={false}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardOne
          title="Meet Our Expert Team"
          description="Seasoned professionals dedicated to delivering exceptional results and unmatched client experiences in luxury real estate."
          tag="Leadership"
          tagIcon={Users}
          tagAnimation="slide-up"
          members={[
            {
              id: "1",              name: "Alexandra Sterling",              role: "Senior Broker",              imageSrc: "http://img.b2bpic.net/free-photo/serious-senior-business-woman-office-desk_1262-3824.jpg",              imageAlt: "Alexandra Sterling"},
            {
              id: "2",              name: "Marcus Chen",              role: "Investment Specialist",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg?_wi=1",              imageAlt: "Marcus Chen"},
            {
              id: "3",              name: "Victoria Ashford",              role: "International Consultant",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg",              imageAlt: "Victoria Ashford"},
            {
              id: "4",              name: "James Montgomery",              role: "Portfolio Manager",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg?_wi=2",              imageAlt: "James Montgomery"},
          ]}
          textboxLayout="default"
          gridVariant="four-items-2x2-equal-grid"
          animationType="scale-rotate"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactCTA
          tag="Connect With Us"
          tagIcon={Phone}
          tagAnimation="slide-up"
          title="Discover How Luxe Estates Can Serve You"
          description="Whether you're looking to buy, sell, or invest in luxury real estate, our expert team is ready to assist. Reach out today to learn more about our services and how we can help achieve your real estate goals."
          buttons={[
            { text: "Contact Our Team", href: "/contact" },
            { text: "View Properties", href: "/properties" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "plain" }}
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Navigation",              items: [
                { label: "Home", href: "/" },
                { label: "Properties", href: "/properties" },
                { label: "About", href: "/about" },
                { label: "Team", href: "/team" },
                { label: "Contact", href: "/contact" },
              ],
            },
            {
              title: "Services",              items: [
                { label: "Buy Properties", href: "/properties" },
                { label: "Sell Properties", href: "/contact" },
                { label: "Investment Advice", href: "/contact" },
                { label: "Valuations", href: "/contact" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "/team" },
                { label: "Careers", href: "/contact" },
                { label: "Blog", href: "#" },
              ],
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Disclaimer", href: "#" },
                { label: "Contact", href: "/contact" },
              ],
            },
          ]}
          bottomLeftText="© 2025 Luxe Estates. All rights reserved."
          bottomRightText="Luxury Real Estate Specialists"
        />
      </div>
    </ThemeProvider>
  );
}