"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Award, Trophy } from 'lucide-react';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="LuxeStay"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Rooms", id: "/rooms" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Book Now",
            href: "/contact"
          }}
        />
      </div>

      <div id="story" data-section="story">
        <FeatureProcessSteps
          tag="Our Heritage"
          tagIcon={Award}
          title="A Legacy of Excellence in Hospitality"
          description="For over two decades, LuxeStay has been at the forefront of luxury hospitality, combining timeless elegance with modern innovation to create extraordinary experiences for discerning travelers from around the world."
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Explore Our Story", href: "/contact" },
            { text: "View Gallery", href: "/rooms" }
          ]}
          steps={[
            {
              number: "01",
              title: "Founded on Excellence",
              tag: "1998",
              description: "Established with a vision to redefine luxury hospitality, combining traditional elegance with contemporary comfort."
            },
            {
              number: "02",
              title: "Award-Winning Service",
              tag: "2010-Present",
              description: "Recognized globally for exceptional service standards, earning prestigious hospitality awards and guest acclaim."
            },
            {
              number: "03",
              title: "Sustainable Innovation",
              tag: "2020+",
              description: "Leading the industry in sustainable luxury practices while maintaining our commitment to unparalleled guest experiences."
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="LuxeStay represents everything exceptional about luxury hospitality. The attention to detail, personalized service, and commitment to guest satisfaction creates an atmosphere where memories are made and cherished forever."
          rating={5}
          author="Michael Thompson, Luxury Travel Curator"
          useInvertedBackground="invertDefault"
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",
              alt: "Michael Thompson"
            },
            {
              src: "https://img.b2bpic.net/free-photo/front-view-professional-business-woman-suit_23-2148603020.jpg",
              alt: "Guest testimonial"
            },
            {
              src: "https://img.b2bpic.net/free-photo/portrait-elegant-professional-businesswoman_23-2150917266.jpg",
              alt: "Guest testimonial"
            },
            {
              src: "https://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg",
              alt: "Guest testimonial"
            },
            {
              src: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",
              alt: "Guest testimonial"
            },
            {
              src: "https://img.b2bpic.net/free-photo/young-beautiful-woman-smiling-posing-purple-wall_176420-2852.jpg",
              alt: "Guest testimonial"
            }
          ]}
        />
      </div>

      <div id="achievements" data-section="achievements">
        <MetricCardTwo
          title="Celebrating Our Achievements"
          description="Our dedication to excellence is reflected in the recognition we've received from industry leaders and the thousands of guests who choose LuxeStay for their most important moments."
          tag="Award Winning"
          tagIcon={Trophy}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",
              value: "25+",
              description: "Years of Excellence"
            },
            {
              id: "2",
              value: "150+",
              description: "Industry Awards"
            },
            {
              id: "3",
              value: "500K+",
              description: "Satisfied Guests"
            },
            {
              id: "4",
              value: "99%",
              description: "Recommendation Rate"
            }
          ]}
        />
      </div>

      <FooterBaseReveal
        columns={[
          {
            title: "About",
            items: [
              { label: "Our Story", href: "/about" },
              { label: "Careers", href: "/about" },
              { label: "Press", href: "/about" },
              { label: "Blog", href: "/about" }
            ]
          },
          {
            title: "Services",
            items: [
              { label: "Rooms & Suites", href: "/rooms" },
              { label: "Dining", href: "/rooms" },
              { label: "Spa & Wellness", href: "/rooms" },
              { label: "Events", href: "/rooms" }
            ]
          },
          {
            title: "Contact",
            items: [
              { label: "Reservations: +1 (555) 123-4567", href: "tel:+15551234567" },
              { label: "Email: hello@luxestay.com", href: "mailto:hello@luxestay.com" },
              { label: "Address: 123 Luxury Boulevard", href: "/contact" },
              { label: "24/7 Concierge Service", href: "/contact" }
            ]
          }
        ]}
        copyrightText="© 2025 LuxeStay Resort. All rights reserved."
      />
    </ThemeProvider>
  );
}