"use client";

import Link from 'next/link';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Award, CheckCircle, TrendingUp } from "lucide-react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="small"
      sizing="mediumLargeSizeLargeTitles"
      background="none"
      cardStyle="subtle-shadow"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Properties", id: "/properties" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          brandName="Luxe Properties"
          bottomLeftText="Dubai, United Arab Emirates"
          bottomRightText="hello@luxeproperties.ae"
        />
      </div>

      <div id="company-story" data-section="company-story">
        <MetricSplitMediaAbout
          title="Two Decades of Excellence in Dubai Real Estate"
          description="Founded in 2004, Luxe Properties has grown from a boutique agency to Dubai's premier luxury real estate consultancy. Our journey began with a simple mission: to redefine the property buying experience through unparalleled expertise, personalized service, and access to the city's most coveted addresses. Today, we proudly represent the pinnacle of luxury living in the UAE."
          tag="Our Story"
          tagIcon={Award}
          imageSrc="https://img.b2bpic.net/free-photo/fiance-with-friends-drining-wedding-day-indoors_8353-12087.jpg"
          imageAlt="Luxe Properties Executive Team"
          metrics={[
            {
              value: "20+",
              title: "Years of Excellence"
            },
            {
              value: "95%",
              title: "Client Retention Rate"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="company-values" data-section="company-values">
        <FeatureCardTwentyOne
          title="Our Commitment to Excellence"
          description="Built on a foundation of trust, expertise, and unwavering dedication to client success"
          tag="Company Values"
          tagIcon={CheckCircle}
          imageSrc="https://img.b2bpic.net/free-photo/house-model-compass-plan-background-real-estate-concept_1423-179.jpg"
          imageAlt="Professional Real Estate Services"
          useInvertedBackground="invertDefault"
          mediaPosition="left"
          accordionItems={[
            {
              id: "1",
              title: "Integrity & Transparency",
              content: "Every transaction is conducted with complete honesty and transparency. We believe in clear communication, detailed market analysis, and ethical practices that build lasting trust with our clients."
            },
            {
              id: "2",
              title: "Market Leadership",
              content: "As industry pioneers, we stay ahead of market trends, regulatory changes, and emerging opportunities. Our team continuously invests in market research and professional development to maintain our competitive edge."
            },
            {
              id: "3",
              title: "Personalized Service",
              content: "We understand that every client has unique needs and preferences. Our boutique approach ensures dedicated attention, customized solutions, and a service experience that exceeds expectations at every touchpoint."
            }
          ]}
        />
      </div>

      <div id="company-achievements" data-section="company-achievements">
        <MetricCardEleven
          title="Industry Recognition"
          description="Our achievements reflect our commitment to excellence and client satisfaction in Dubai's competitive real estate market"
          tag="Awards & Milestones"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",
              value: "#1",
              title: "Luxury Agency Ranking",
              description: "Ranked as Dubai's top luxury real estate agency for three consecutive years",
              imageSrc: "https://img.b2bpic.net/free-photo/real-estate-mortgage-loan-concept_53876-125138.jpg",
              imageAlt: "Industry Leadership"
            },
            {
              id: "2",
              value: "50+",
              title: "Industry Awards",
              description: "Recognition for excellence in service, innovation, and market expertise",
              imageSrc: "https://img.b2bpic.net/free-photo/hand-tapping-tablet-with-map_23-2147732953.jpg",
              imageAlt: "Award Recognition"
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Luxe Properties"
          columns={[
            {
              items: [
                { label: "About", href: "/about" },
                { label: "Properties", href: "/properties" },
                { label: "Contact", href: "/contact" }
              ]
            },
            {
              items: [
                { label: "How We Work", href: "#" },
                { label: "Market Insights", href: "#" },
                { label: "Investment Guide", href: "#" }
              ]
            },
            {
              items: [
                { label: "Schedule Viewing", href: "/contact" },
                { label: "Support", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms & Conditions", href: "#" },
                { label: "Legal", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}