"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Award, Zap } from 'lucide-react';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="medium"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Luxe Haven"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Rooms", id: "/rooms" },
            { name: "Amenities", id: "/amenities" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Book Now", href: "/contact" }}
        />
      </div>

      <div id="about-detail" data-section="about-detail">
        <MetricSplitMediaAbout
          tag="Our Heritage"
          tagIcon={Award}
          title="A Legacy of Excellence in Luxury Hospitality"
          description="Founded in 1995 by visionary hotelier Alexandra Luxe, Luxe Haven Hotel began as a dream to create an extraordinary sanctuary where luxury meets authenticity. From our humble beginnings as a boutique property with 50 rooms, we have grown into a renowned destination featuring 500 luxury rooms and suites. Our journey has been marked by numerous accolades, including the prestigious Five-Star Diamond Award and recognition as the World's Leading Luxury Hotel three years running. Every detail reflects our unwavering commitment to excellence, from our handcrafted furnishings sourced from European artisans to our personalized service that anticipates every guest's need."
          metrics={[
            { value: "28", title: "International Awards Won" },
            { value: "98%", title: "Guest Satisfaction Rate" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/side-view-woman-looking-out-window_23-2149622868.jpg"
          imageAlt="Historic view of Luxe Haven Hotel's elegant architecture"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="values" data-section="values">
        <MetricCardTwo
          title="Our Core Values"
          description="The principles that guide every aspect of our service and define the Luxe Haven experience."
          tag="Values"
          tagIcon={Zap}
          metrics={[
            { id: "1", value: "Excellence", description: "Uncompromising quality in every detail" },
            { id: "2", value: "Authenticity", description: "Genuine warmth and personalized care" },
            { id: "3", value: "Innovation", description: "Embracing modern luxury while honoring tradition" },
            { id: "4", value: "Sustainability", description: "Responsible luxury for future generations" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact-cta" data-section="contact-cta">
        <ContactText
          text="Discover the story behind our exceptional service. Experience the Luxe Haven difference and become part of our legacy of excellence."
          animationType="entrance-slide"
          buttons={[
            { text: "Book Your Stay", href: "/contact" },
            { text: "Learn More", href: "/rooms" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Explore",              items: [
                { label: "Rooms & Suites", href: "/rooms" },
                { label: "Amenities", href: "/amenities" },
                { label: "Dining", href: "/about" },
                { label: "Spa & Wellness", href: "/about" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "/about" },
                { label: "Careers", href: "/contact" },
                { label: "Blog", href: "/contact" },
                { label: "Press", href: "/contact" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "Reservations", href: "/contact" },
                { label: "Phone: +1 (555) 123-4567", href: "tel:+15551234567" },
                { label: "Email: info@luxehaven.com", href: "mailto:info@luxehaven.com" },
                { label: "Address: 123 Luxury Ave, City, State 12345", href: "/contact" }
              ]
            }
          ]}
          copyrightText="© 2025 Luxe Haven Hotel. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}