"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Coffee, Sun, Users, Leaf, Armchair } from "lucide-react";

export default function AboutPage() {
  const navItems = [{"name":"Home","id":"/"},{"name":"Menu","id":"/menu"},{"name":"About","id":"/about"},{"name":"Order Ahead","id":"/order"},{"name":"Shop","id":"/shop"}];
  const footerColumns = [{"items":[{"label":"Home","href":"/"},{"label":"Menu","href":"/menu"},{"label":"About","href":"/about"},{"label":"Order Ahead","href":"/order"}]},{"items":[{"label":"Hours","href":"/about"},{"label":"Instagram","href":"https://instagram.com/midnightcafe"}]}];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="noise"
      cardStyle="inset"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          navItems={navItems.map(item => ({ ...item, id: item.id }))}
          brandName="Midnight Cafe"
        />
      </div>
      
      <div id="experience" data-section="experience">
        <AboutMetric
          title="Some coffee shops wake you up. We pull you in. Midnight Cafe is where students study, creatives think, friends reconnect, and regulars feel known. Every cup is crafted with intention. Every detail designed for comfort. This is your place."
          metrics={[
            { "icon": Coffee, "label": "Crafted Cups", "value": "Daily" },
            { "icon": Sun, "label": "Natural Light", "value": "Abundant" },
            { "icon": Users, "label": "Community", "value": "Strong" }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="philosophy" data-section="philosophy">
        <FeatureHoverPattern
          title="Our Philosophy"
          description="The principles that guide every decision we make."
          features={[
            { icon: Users, title: "Community Focused", description: "A welcoming space for students, creatives, and neighbors to connect." },
            { icon: Leaf, title: "Ethically Sourced", description: "We partner with responsible growers to bring you the finest beans." },
            { icon: Armchair, title: "Designed for Comfort", description: "Every detail, from seating to lighting, is crafted for your comfort." }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="founder-quote" data-section="founder-quote">
        <TestimonialCardTwo
          title="From the Founder"
          description="A word from our founder, Jane Doe."
          testimonials={[
            { id: "founder1", name: "Jane Doe", role: "Founder, Midnight Cafe", testimonial: "We didn't just want to create a coffee shop; we wanted to build a second home for our community. A place where great coffee and great people come together.", imageSrc: "https://img.b2bpic.net/free-photo/adorable-young-female-with-dark-long-hair-dressed-striped-t-shirt-coffee-shop-drinks-fresh-juice-espresso_273609-2791.jpg", imageAlt: "Portrait of Jane Doe, Founder" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          columns={footerColumns}
          logoText="Midnight Cafe"
        />
      </div>
    </ThemeProvider>
  );
}