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

export default function AboutPage() {
  const navItems = [
    { href: "/", label: "Home" },
    { href: "/menu", label: "Menu" },
    { href: "/about", label: "About Us" },
    { href: "/gallery", label: "Gallery" },
    { href: "/reviews", label: "Reviews" },
    { href: "/contact", label: "Contact" },
    { href: "/reservations", label: "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-us-full" data-section="about-us-full">
        <TextSplitAbout
          title="Our Journey: Crafting Moments, Brewing Memories"
          description={["Moonlight Café began with a simple dream: to create a space where people could connect over exceptional food and coffee. Our founders, avid travelers and culinary enthusiasts, envisioned a place that combined the elegance of European cafés with the warmth of local hospitality. Over a decade ago, that dream became a reality.", "Today, we stand by our commitment to quality, sustainability, and community. We source our coffee beans from ethical farms, partner with local producers for fresh ingredients, and continuously strive to reduce our environmental footprint. Every smile, every conversation, and every satisfied customer fuels our passion to serve you better."]}
          buttons={[
            { text: "See Our Commitments", href: "#" }
          ]}
          useInvertedBackground={false}
          buttonAnimation="entrance-slide"
        />
      </div>
      <div id="team" data-section="team">
        <TeamCardOne
          title="Meet Our Dedicated Team"
          description="Behind every perfect cup and exquisite dish is a team of passionate individuals dedicated to making your experience at Moonlight Café truly special."
          members={[
            { id: "member-1", name: "Anya Sharma", role: "Head Barista", imageSrc: "http://img.b2bpic.net/free-photo/happy-smiling-bartender-barista-using-coffee-machine-prepare-order-making-cappuccino-latte-wearin_1258-134056.jpg", imageAlt: "Anya Sharma, Head Barista" },
            { id: "member-2", name: "Marco Rossi", role: "Executive Chef", imageSrc: "http://img.b2bpic.net/free-photo/culinary-arts-meet-precision-as-chef-sprinkles-parsley-gourmet-dish_482257-127687.jpg", imageAlt: "Marco Rossi, Executive Chef" },
            { id: "member-3", name: "Elena Petrova", role: "Café Manager", imageSrc: "http://img.b2bpic.net/free-photo/portrait-waitress-holding-plate-juices_1170-669.jpg", imageAlt: "Elena Petrova, Café Manager" }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          tag="Our Culinary Family"
        />
      </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"
          useInvertedBackground={true}
        />
      </div>
    </ThemeProvider>
  );
}