"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Building2, Users, TrendingUp, Award, Facebook, Instagram, Linkedin, Twitter } from 'lucide-react';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Prestige Realty Dubai"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Properties", id: "/properties" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Schedule Viewing",
            href: "/contact"
          }}
          className="bg-white/80 backdrop-blur-md"
          navItemClassName="text-foreground font-semibold hover:text-primary-cta transition-colors"
          buttonClassName="bg-primary-cta hover:bg-primary-cta/90 text-white"
          buttonTextClassName="font-semibold"
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Why Prestige Realty"
          description={[
            "With over 15 years of expertise in Dubai's real estate market, Prestige Realty Dubai specializes in connecting discerning clients with exceptional properties. Our team of certified agents brings deep market knowledge and personalized service to every transaction.",
            "We pride ourselves on understanding the unique needs of international investors and local buyers alike. From initial consultation to final closing, we ensure a seamless, transparent process with complete professional support.",
            "Our commitment to excellence, combined with extensive market networks and exclusive property listings, makes us the preferred choice for luxury real estate in Dubai."
          ]}
          buttons={[
            { text: "Learn More About Us", href: "/contact" },
            { text: "Meet Our Team", href: "/contact" }
          ]}
          showBorder={true}
          useInvertedBackground="noInvert"
          className="w-full"
          containerClassName="py-20 px-6"
          titleClassName="text-4xl md:text-5xl font-extrabold text-foreground"
          descriptionClassName="text-base text-foreground/75 leading-relaxed"
          buttonClassName="rounded-lg"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyOne
          title="What Sets Us Apart"
          description="Experience premium service through our comprehensive property solutions and market expertise."
          tag="Our Advantages"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/cheerful-business-team-watching-presentation-laptop-sitting-workplace-staring-display-smiling-copy-space-business-meeting-concept_74855-11583.jpg"
          imageAlt="Prestige Realty professional team in modern office"
          mediaPosition="left"
          accordionItems={[
            {
              id: "1",
              title: "Exclusive Property Access",
              content: "Gain access to off-market listings and exclusive properties not available to the general public. Our extensive network of developers and private sellers ensures you discover the finest opportunities first."
            },
            {
              id: "2",
              title: "Expert Market Knowledge",
              content: "Our agents possess in-depth knowledge of Dubai's neighborhoods, investment trends, and property valuations. We provide comprehensive market analysis to inform every decision."
            },
            {
              id: "3",
              title: "Personalized Consultation",
              content: "Whether you're buying, selling, or investing, we tailor our approach to your unique goals. Our consultants work closely with you to ensure complete satisfaction."
            },
            {
              id: "4",
              title: "Seamless Transaction Process",
              content: "From property viewing to legal documentation, we manage every detail. Our streamlined process ensures quick, transparent, and secure transactions with full compliance."
            }
          ]}
          buttons={[
            { text: "Schedule Consultation", href: "/contact" }
          ]}
          useInvertedBackground="invertDefault"
          className="w-full"
          containerClassName="py-20 px-6"
          titleClassName="text-4xl md:text-5xl font-extrabold text-foreground"
          descriptionClassName="text-base text-foreground/75"
          accordionTitleClassName="text-lg font-bold text-foreground"
          accordionContentClassName="text-foreground/80 text-sm leading-relaxed"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Market Leadership"
          description="Our impressive track record demonstrates our commitment to excellence in Dubai's luxury real estate sector."
          textboxLayout="default"
          metrics={[
            { id: "metric-1", icon: Building2, title: "Properties Sold", value: "2,847" },
            { id: "metric-2", icon: Users, title: "Happy Clients", value: "5,200+" },
            { id: "metric-3", icon: TrendingUp, title: "Market Growth", value: "340%" },
            { id: "metric-4", icon: Award, title: "Industry Awards", value: "47" }
          ]}
          animationType="slide-up"
          useInvertedBackground="noInvert"
          className="w-full"
          containerClassName="py-20 px-6"
          textBoxTitleClassName="text-4xl md:text-5xl font-extrabold text-foreground"
          textBoxDescriptionClassName="text-base text-foreground/75"
        />
      </div>

      <FooterCard
        logoText="Prestige Realty Dubai"
        copyrightText="© 2025 Prestige Realty Dubai. All rights reserved. | Premium Real Estate Solutions"
        socialLinks={[
          { icon: Facebook, href: "https://facebook.com/prestigerealtydubai", ariaLabel: "Visit our Facebook page" },
          { icon: Instagram, href: "https://instagram.com/prestigerealtydubai", ariaLabel: "Follow us on Instagram" },
          { icon: Linkedin, href: "https://linkedin.com/company/prestigerealtydubai", ariaLabel: "Connect with us on LinkedIn" },
          { icon: Twitter, href: "https://twitter.com/prestigedubai", ariaLabel: "Follow us on Twitter" }
        ]}
        className="w-full"
        containerClassName="py-12 px-6"
        cardClassName="rounded-2xl"
        logoClassName="text-2xl font-extrabold text-foreground"
        copyrightTextClassName="text-foreground/70 text-sm"
      />
    </ThemeProvider>
  );
}