"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Award } from "lucide-react";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="largeSmallSizeLargeTitles"
      background="plain"
      cardStyle="gradient-mesh"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Local Brewery"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Our Beers", id: "/products" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Visit Us",
            href: "/contact"
          }}
        />
      </div>

      <div id="about" data-section="about" className="mx-auto px-4 md:px-6">
        <TextSplitAbout
          title="Our Story"
          description={[
            "Founded in 2019, our local brewery began with a passion for crafting exceptional beer. We started in a small warehouse with dreams of bringing quality craft beer to our community.",
            "Today, we're proud to serve thousands of beer enthusiasts with our diverse selection of signature brews. Each beer is carefully crafted using locally-sourced ingredients and traditional brewing methods that honor our craft heritage.",
            "We believe in supporting our community and local suppliers. Every batch we brew is a testament to our commitment to quality, sustainability, and the craft of brewing."
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn More", href: "/about" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics" className="mx-auto px-4 md:px-6">
        <MetricCardSeven
          title="By The Numbers"
          description="Our impact on the local community through quality craft beer and sustainable brewing practices."
          tag="Our Achievement"
          tagIcon={Award}
          metrics={[
            {
              id: "1",
              value: "15+",
              title: "Signature Beer Styles",
              items: [
                "Seasonal limited editions",
                "Experimental small batches",
                "Classic favorites"
              ]
            },
            {
              id: "2",
              value: "10k+",
              title: "Community Members",
              items: [
                "Local brewery supporters",
                "Monthly tasting events",
                "Brewery tour participants"
              ]
            },
            {
              id: "3",
              value: "100%",
              title: "Local Sourcing",
              items: [
                "Regional grain suppliers",
                "Local hop farms",
                "Community partnerships"
              ]
            },
            {
              id: "4",
              value: "5k+",
              title: "Gallons Brewed Monthly",
              items: [
                "Sustainable production",
                "Zero-waste brewing",
                "Quality assured batches"
              ]
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <FooterBase
        logoText="Local Brewery"
        copyrightText="© 2025 Local Brewery. All rights reserved."
        columns={[
          {
            title: "Product",
            items: [
              { label: "Our Beers", href: "/products" },
              { label: "Seasonal Releases", href: "/products" },
              { label: "Gift Sets", href: "/products" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Our Story", href: "/about" },
              { label: "Sustainability", href: "/about" },
              { label: "Careers", href: "/about" }
            ]
          },
          {
            title: "Support",
            items: [
              { label: "Contact Us", href: "/contact" },
              { label: "Brewery Tours", href: "/contact" },
              { label: "Events", href: "/contact" },
              { label: "FAQ", href: "/faq" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}