"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import { Award, Clock, Coffee, Flame, ShieldCheck, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="small"
        sizing="largeSmall"
        background="circleGradient"
        cardStyle="inset"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "Menu",
          id: "menu",
        },
        {
          name: "Story",
          id: "about",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="1Malaysia Superman Mamak"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "gradient-bars",
      }}
      title="Taste the 1Malaysia Spirit at Superman Mamak"
      description="Authentic flavors, friendly vibes, and the best Mamak experience in town. Join us for a meal that feels like home."
      buttons={[
        {
          text: "See Menu",
          href: "#menu",
        },
      ]}
      carouselItems={[
        {
          id: "1",
          imageSrc: "http://img.b2bpic.net/free-photo/asian-people-having-dinner-party_23-2149552629.jpg",
          imageAlt: "Authentic Mamak Stall",
        },
        {
          id: "2",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-cook-cuts-edge-kutaba-with-herbs-cheese-board_141793-4323.jpg",
          imageAlt: "Fresh Food Preparation",
        },
        {
          id: "3",
          imageSrc: "http://img.b2bpic.net/free-photo/brazilian-family-enjoying-meal-together_23-2151156211.jpg",
          imageAlt: "Lively Atmosphere",
        },
        {
          id: "4",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-chef-cooking-restaurant-kitchen_329181-16151.jpg",
          imageAlt: "Fresh Ingredients",
        },
        {
          id: "5",
          imageSrc: "http://img.b2bpic.net/free-photo/motion-dodgems-attraction-with-colorful-lamps_23-2148328053.jpg",
          imageAlt: "Night Food Vibe",
        },
        {
          id: "6",
          imageSrc: "http://img.b2bpic.net/free-photo/indian-food-arrangement-top-view_23-2148734740.jpg",
          imageAlt: "Street Food Variety",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="Why Superman Mamak?"
      metrics={[
        {
          icon: Award,
          label: "Years Served",
          value: "15+",
        },
        {
          icon: Users,
          label: "Happy Guests",
          value: "1M+",
        },
        {
          icon: Coffee,
          label: "Teh Tarik Cups",
          value: "5M+",
        },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="menu" data-section="menu">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "m1",
          name: "Roti Canai",
          price: "RM 2.50",
          imageSrc: "http://img.b2bpic.net/free-photo/people-celebrating-4th-july-top-view_23-2149383112.jpg",
        },
        {
          id: "m2",
          name: "Nasi Goreng Kampung",
          price: "RM 9.50",
          imageSrc: "http://img.b2bpic.net/free-photo/american-fried-rice_1339-4123.jpg",
        },
        {
          id: "m3",
          name: "Teh Tarik",
          price: "RM 2.00",
          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-american-food-with-copy-space_23-2148454937.jpg",
        },
        {
          id: "m4",
          name: "Mee Goreng Mamak",
          price: "RM 8.00",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-circular-frame-with-fast-food-peppers_23-2148308861.jpg",
        },
        {
          id: "m5",
          name: "Chicken Curry",
          price: "RM 7.50",
          imageSrc: "http://img.b2bpic.net/free-photo/hot-spicy-grilled-pork-salad-with-berry-rice_1339-6327.jpg",
        },
        {
          id: "m6",
          name: "Maggi Goreng",
          price: "RM 7.00",
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-shot-pan-filled-with-delicious-noodles-vegetables-kitchen_181624-28291.jpg",
        },
      ]}
      title="Signature Flavors"
      description="From classic Roti Canai to our legendary Nasi Goreng, discover your new favorite."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "c1",
          value: "50+",
          title: "Staff Members",
          description: "Dedicated and friendly.",
          icon: Flame,
        },
        {
          id: "c2",
          value: "100%",
          title: "Halal Certified",
          description: "Quality you can trust.",
          icon: ShieldCheck,
        },
        {
          id: "c3",
          value: "24/7",
          title: "Serving You",
          description: "Always open for you.",
          icon: Clock,
        },
      ]}
      title="Our Community Impact"
      description="Building bridges through delicious food one plate at a time."
    />
  </div>

  <div id="socialProof" data-section="socialProof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Local Charity",
        "Cultural Center",
        "City Council",
        "Mamak Association",
        "Foodie Hub",
        "Youth Group",
        "Community Radio",
      ]}
      title="Community Partners"
      description="Proudly supporting local events and our wonderful neighbors."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "Are you Halal certified?",
          content: "Yes, we are 100% Halal certified and committed to high standards.",
        },
        {
          id: "f2",
          title: "Do you offer delivery?",
          content: "Yes, find us on all major food delivery platforms.",
        },
        {
          id: "f3",
          title: "Can I book a table?",
          content: "We are a walk-in friendly spot, but for large groups, call us ahead.",
        },
      ]}
      title="Frequently Asked"
      description="Got questions about our ingredients or opening hours?"
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardSix
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      members={[
        {
          id: "t1",
          name: "Chef Ali",
          role: "Head Cook",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-restaurant-waiter-wearing-professional-uniform-apron_482257-95100.jpg",
        },
        {
          id: "t2",
          name: "Sarah",
          role: "Head Waitress",
          imageSrc: "http://img.b2bpic.net/free-photo/two-blonde-female-office-workers-posing-with-peace-sign-while-fooling-around-with-foreign-colleagues_197531-4992.jpg",
        },
        {
          id: "t3",
          name: "Bob",
          role: "Junior Cook",
          imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-people-learning-make-sushi_23-2149865328.jpg",
        },
        {
          id: "t4",
          name: "Laila",
          role: "Manager",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-standing-with-arms-crossed-kitchen_107420-12356.jpg",
        },
      ]}
      title="Meet Our Legends"
      description="The friendly faces that keep Superman Mamak buzzing day and night."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Get in Touch"
      title="Visit Us Today"
      description="Come join us for a meal or share your feedback. We love hearing from our community."
      imageSrc="http://img.b2bpic.net/free-photo/table-set-dinning-table_1339-3436.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Menu",
              href: "#menu",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
        {
          items: [
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms",
              href: "#",
            },
          ],
        },
      ]}
      logoText="1Malaysia Superman Mamak"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
