"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import Link from 'next/link';

export default function AboutPage() {
  const navItems = [
    { id: "/", name: "Home" },
    { id: "/menu", name: "Menu" },
    { id: "/about", name: "About Us" },
    { id: "/gallery", name: "Gallery" },
    { id: "/reviews", name: "Reviews" },
    { id: "/contact", name: "Contact" },
    { id: "/reservations", name: "Reserve" }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSizeMediumTitles"
      background="noise"
      cardStyle="inset"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Moonlight Café"
          navItems={navItems}
          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w5b2ln"
          logoAlt="Moonlight Café Logo"
          bottomLeftText="A Taste of Elegance"
          bottomRightText="Reserve Your Table"
        />
      </div>
      <div id="about-content" data-section="about-content">
        <TextSplitAbout
          title="Our Story: A Journey of Flavor"
          description={["Moonlight Café began with a simple dream: to create a cozy corner where quality coffee meets delectable cuisine. What started as a small venture quickly grew into a beloved community spot, thanks to our commitment to fresh ingredients, innovative recipes, and a warm, inviting atmosphere.", "Every bean is carefully selected, every dish meticulously prepared, and every guest welcomed like family. We believe in the power of good food and great company to create lasting memories. Join us and become a part of our story!"]}
          buttons={[
            { text: "Meet Our Team", href: "/team" }
          ]}
          useInvertedBackground={true}
          buttonAnimation="text-stagger"
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Moonlight Café"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w5b2ln"
          logoAlt="Moonlight Café Logo"
        />
      </div>
    </ThemeProvider>
  );
}