"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Coffee, Sun, Users, Vegan } from "lucide-react";

export default function HomePage() {
  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="hero" data-section="hero">
        <HeroSplit
          title="Midnight Cafe"
          description="Where coffee isn’t just made. It’s mastered."
          background={{ "variant": "plain" }}
          imageSrc="https://img.b2bpic.net/free-photo/talanted-barista-is-pouring-milk-jug-latte-cappuchino-his-cafe_613910-3236.jpg"
          imageAlt="Slow motion espresso pour with natural light"
          imagePosition="right"
          buttons={[{ "text": "Order Ahead", "href": "/order" }, { "text": "View Menu", "href": "/menu" }]}
          mediaAnimation="opacity"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureHoverPattern
          title="What Makes Us Different"
          description="Our commitment to craft, comfort, and community."
          features={[
            { "icon": Coffee, "title": "Precision Roasted", "description": "Craft-level brewing. Consistent. Intentional. Elevated." },
            { "icon": Sun, "title": "Natural Light Sanctuary", "description": "Floor-to-ceiling light that makes you want to stay." },
            { "icon": Users, "title": "Neighborhood Energy", "description": "Friendly. Local. Familiar faces." },
            { "icon": Vegan, "title": "Options for Everyone", "description": "Gluten-free. Vegan. Classic. Elevated." }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="menu-preview" data-section="menu-preview">
        <ProductCardOne
          title="Menu Preview"
          description="A taste of what awaits."
          products={[
            { "id": "1", "name": "Signature Espresso", "price": "Velvety lattes.", "imageSrc": "https://img.b2bpic.net/free-photo/hot-cup-hot-chocolate_140725-7519.jpg", "imageAlt": "signature espresso drinks" },
            { "id": "2", "name": "Elevated Chai & Matcha", "price": "Bold dirt chai.", "imageSrc": "https://img.b2bpic.net/free-photo/matcha-latte-cup_417767-46.jpg", "imageAlt": "unique tea drinks cafe" },
            { "id": "3", "name": "Artisan Pastries", "price": "Gluten-free muffins.", "imageSrc": "https://img.b2bpic.net/free-photo/tasty-croissant-muffins-with-coffee_23-2147693692.jpg", "imageAlt": "artisan bakery display" }
          ]}
          carouselMode="auto"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground={false}
          buttons={[{ "text": "View Full Menu", "href": "/menu" }]}
          textboxLayout="default"
        />
      </div>
      
      <div id="social-proof" data-section="social-proof">
        <TestimonialCardTwo
          title="What Our Customers Say"
          description="Hear from our beloved patrons."
          testimonials={[
            { "id": "1", "name": "Lisa", "role": "Local Customer", "testimonial": "“I can’t even go into another shop — I plan my day around Midnight.”", "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" },
            { "id": "2", "name": "Alex M.", "role": "Student", "testimonial": "“Best coffee I’ve ever had.”", "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" },
            { "id": "3", "name": "Dr. Chen", "role": "Professor", "testimonial": "“Perfect and consistent every time.”", "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" },
            { "id": "4", "name": "Sarah K.", "role": "Creative", "testimonial": "“The atmosphere is incredible.”", "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" },
            { "id": "5", "name": "David R.", "role": "Regular", "testimonial": "“Natural light makes it my go-to study spot.”", "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" }
          ]}
          animationType="slide-up"
          useInvertedBackground={false}
          textboxLayout="default"
        />
      </div>

      <div id="community" data-section="community">
        <SocialProofOne
          title="The Community"
          description="Built for Iowa City. Loved by students. Chosen by locals. Worth the stop. We’re not trying to be the cheapest. We’re committed to being the best."
          names={["University of Iowa", "Local Businesses", "Student Organizations", "Community Partners", "Iowa City Residents", "Creative Collective", "Tech Startups"]}
          speed={25}
          showCard={true}
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

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