"use client";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Award, Users, Star, Globe } from 'lucide-react';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="large"
      background="none"
      cardStyle="layered-gradient"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal 
          brandName="Luxe Haven"
          button={{
            text: "Book Now",
            href: "/contact"
          }}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout 
          title="Luxury Redefined"
          description={[
            "Luxe Haven represents the pinnacle of hospitality excellence, combining timeless elegance with modern innovation. Since our opening, we have been committed to creating unforgettable experiences for every guest.",
            "Our team of dedicated professionals is passionate about exceeding expectations and providing personalized service that transforms ordinary stays into extraordinary memories. We believe that true luxury is about thoughtful details and genuine hospitality.",
            "Located in the heart of the city with easy access to major attractions, our property serves as the perfect base for both leisure and business travelers seeking the finest accommodations and services."
          ]}
          buttons={[
            { text: "Learn More About Us", href: "/contact" }
          ]}
          useInvertedBackground="noInvert"
          showBorder={false}
        />
      </div>

      <div id="about-metrics" data-section="about-metrics">
        <MetricCardThree 
          title="Our Excellence in Numbers"
          description="Discover the achievements and milestones that define our commitment to exceptional hospitality and guest satisfaction."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          metrics={[
            {
              id: "1",
              icon: Award,
              title: "Awards Won",
              value: "27+"
            },
            {
              id: "2",
              icon: Users,
              title: "Happy Guests",
              value: "50K+"
            },
            {
              id: "3",
              icon: Star,
              title: "Average Rating",
              value: "4.9/5"
            }
          ]}
        />
      </div>

      <div id="heritage" data-section="heritage">
        <TextSplitAbout 
          title="Our Heritage"
          description={[
            "Founded with a vision to redefine luxury hospitality, Luxe Haven has continuously evolved while maintaining our core values of excellence and authentic service.",
            "Every corner of our establishment tells a story of craftsmanship, from the carefully curated artwork to the meticulously designed spaces that balance comfort with sophistication."
          ]}
          useInvertedBackground="noInvert"
          showBorder={true}
        />
      </div>

      <FooterBaseReveal 
        columns={[
          {
            title: "Explore",
            items: [
              { label: "Rooms & Suites", href: "/rooms" },
              { label: "Amenities", href: "/amenities" },
              { label: "Special Offers", href: "/offers" },
              { label: "Dining", href: "/dining" }
            ]
          },
          {
            title: "Guest Info",
            items: [
              { label: "Booking Policy", href: "#" },
              { label: "Cancellation", href: "#" },
              { label: "Check-in Details", href: "#" },
              { label: "Group Bookings", href: "/contact" }
            ]
          },
          {
            title: "Connect",
            items: [
              { label: "Contact Us", href: "/contact" },
              { label: "Phone", href: "#" },
              { label: "Email", href: "#" },
              { label: "Social Media", href: "#" }
            ]
          }
        ]}
        copyrightText="© 2025 Luxe Haven. All rights reserved. | Luxury hospitality redefined"
      />
    </ThemeProvider>
  );
}