'use client';

import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Facebook } from 'lucide-react';

const navItems = [
  { name: 'Home', id: '/' },
  { name: 'About', id: '/about' },
  { name: 'Contact', id: '/contact' }
];

export default function AboutPage() {
  return (
    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen navItems={navItems} brandName="Webild" />
      </div>
      <div id="about" data-section="about">
        <TextSplitAbout
          title="Our Mission"
          description={["To provide sustainably sourced coffee.", "To foster community connections."]}
          useInvertedBackground={true}
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Webild"
          socialLinks={[{ icon: Instagram, href: "#", ariaLabel: "Instagram" }, { icon: Facebook, href: "#", ariaLabel: "Facebook" }]}
        />
      </div>
    </ThemeProvider>
  );
}