"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Facebook, Instagram } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSmallSizeMediumTitles"
        background="noise"
        cardStyle="subtle-shadow"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="solid"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "หน้าหลัก",          id: "#hero"},
        {
          name: "เกี่ยวกับเรา",          id: "#about"},
        {
          name: "เมนู",          id: "#menu"},
        {
          name: "รีวิว",          id: "#testimonials"},
        {
          name: "ติดต่อ",          id: "#contact"},
      ]}
      brandName="ร้านปุยฝ้าย"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCarouselLogo
      logoText="ร้านปุยฝ้าย"
      description="สัมผัสรสชาติอาหารตามสั่งสไตล์ไทยแท้ ด้วยวัตถุดิบสดใหม่ ปรุงอย่างพิถีพิถันทุกจาน พร้อมเสิร์ฟความอร่อยจากใจถึงมือคุณ"
      buttons={[
        {
          text: "ดูเมนู",          href: "#menu"},
        {
          text: "สั่งอาหาร",          href: "#contact"},
      ]}
      slides={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/fried-noodle-with-pork-soy-sauce-vegetable_1150-27390.jpg",          imageAlt: "ผัดกะเพราไก่ไข่ดาว"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/milk-tea-shaved-ice_1339-4766.jpg",          imageAlt: "แกงเขียวหวานไก่"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/tom-yum-kung-thai-hot-spicy-soup-shrimp-with-lemon-grass-lemon-galangal-chilli-wooden-table-thailand-food_1150-21081.jpg",          imageAlt: "ต้มยำกุ้ง"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/elevated-view-thai-udon-noodle-with-chopsticks-soya-sauce-wooden-table_23-2148093130.jpg",          imageAlt: "ผัดซีอิ๊ว"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/delicious-veggie-dish-still-life_23-2151190765.jpg",          imageAlt: "แกงมัสมั่นเนื้อ"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/coconut-milk-stewed-pumpkin-white-bowl_1150-27854.jpg",          imageAlt: "ข้าวเหนียวมะม่วง"},
      ]}
      autoplayDelay={4000}
      showDimOverlay={true}
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={false}
      heading={[
        {
          type: "text",          content: "เรื่องราวของ "},
        {
          type: "text",          content: "ร้านปุยฝ้าย"},
      ]}
      buttons={[
        {
          text: "เรียนรู้เพิ่มเติม",          href: "#contact"},
      ]}
    />
  </div>

  <div id="menu" data-section="menu">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",          name: "ผัดกะเพราไก่",          price: "฿70",          imageSrc: "http://img.b2bpic.net/free-photo/rice-topped-with-stir-fried-minced-pork-basil_1339-7557.jpg",          imageAlt: "ผัดกะเพราไก่ไข่ดาว"},
        {
          id: "p2",          name: "ผัดซีอิ๊ว",          price: "฿80",          imageSrc: "http://img.b2bpic.net/free-photo/pad-thai-noodles-with-shrimp-prawn-top_1203-9935.jpg",          imageAlt: "ผัดซีอิ๊ว"},
        {
          id: "p3",          name: "แกงเขียวหวานไก่",          price: "฿90",          imageSrc: "http://img.b2bpic.net/free-photo/pork-green-curry-white-bowl-with-spices-black-cement-background_1150-35196.jpg",          imageAlt: "แกงเขียวหวานไก่"},
        {
          id: "p4",          name: "ต้มยำกุ้ง",          price: "฿120",          imageSrc: "http://img.b2bpic.net/free-photo/tom-yum-kung-thai-hot-spicy-soup-shrimp-with-lemon-grass-lemon-galangal-chilli-wooden-table-thailand-food_1150-21063.jpg",          imageAlt: "ต้มยำกุ้ง"},
        {
          id: "p5",          name: "ข้าวผัดกุ้ง",          price: "฿85",          imageSrc: "http://img.b2bpic.net/free-photo/mixed-rice-with-vegetables-oysters_140725-4408.jpg",          imageAlt: "ข้าวผัดกุ้ง"},
        {
          id: "p6",          name: "ข้าวอบสับปะรด",          price: "฿110",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-half-pineapple-with-shrimps_23-2148494709.jpg",          imageAlt: "ข้าวอบสับปะรด"},
      ]}
      title="เมนูแนะนำของเรา"
      description="ลิ้มลองเมนูยอดนิยมที่ลูกค้าทุกคนชื่นชอบ คัดสรรมาเพื่อประสบการณ์การกินที่ไม่อาจลืม"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "10+",          title: "ปีแห่งประสบการณ์",          items: [
            "ส่งมอบความอร่อยอย่างต่อเนื่อง",            "เข้าใจในรสชาติที่ลูกค้าต้องการ"],
        },
        {
          id: "m2",          value: "5,000+",          title: "ลูกค้าพึงพอใจ",          items: [
            "การันตีด้วยรอยยิ้มและความสุข",            "กลับมาอุดหนุนซ้ำอย่างต่อเนื่อง"],
        },
        {
          id: "m3",          value: "100+",          title: "เมนูหลากหลาย",          items: [
            "คัดสรรวัตถุดิบสดใหม่ทุกวัน",            "ปรับเปลี่ยนตามฤดูกาล"],
        },
      ]}
      title="ความสำเร็จของเรา"
      description="เราภูมิใจในทุกก้าวที่ผ่านมา และพร้อมสร้างสรรค์ประสบการณ์ที่ดีที่สุดให้กับลูกค้า"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",          name: "คุณศิริพร",          role: "พนักงานออฟฟิศ",          company: "บริษัท เอสเอ็มอี",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-eating-noodles_23-2149706704.jpg"},
        {
          id: "t2",          name: "คุณมานะ",          role: "นักศึกษา",          company: "มหาวิทยาลัยชื่อดัง",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/people-having-seaweed-meals-home_52683-110580.jpg"},
        {
          id: "t3",          name: "คุณสมหญิง",          role: "แม่บ้าน",          company: "ลูกค้าประจำ",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-with-delicious-food_23-2149250117.jpg"},
        {
          id: "t4",          name: "คุณชัยชนะ",          role: "ผู้ประกอบการ",          company: "ธุรกิจส่วนตัว",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/couple-enjoying-food-restaurant_23-2149269179.jpg"},
        {
          id: "t5",          name: "คุณวิภาวรรณ",          role: "ครู",          company: "โรงเรียนประถม",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/people-having-seaweed-meals-home_52683-110583.jpg"},
      ]}
      title="เสียงจากลูกค้าของเรา"
      description="ความสุขของลูกค้าคือแรงบันดาลใจของเรา มาฟังสิ่งที่พวกเขาพูดถึงร้านปุยฝ้ายกัน"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq1",          title: "ร้านเปิดทำการกี่โมงถึงกี่โมง?",          content: "ร้านปุยฝ้ายเปิดให้บริการทุกวัน ตั้งแต่เวลา 10:00 น. ถึง 21:00 น."},
        {
          id: "faq2",          title: "มีบริการจัดส่งอาหารหรือไม่?",          content: "เรามีบริการจัดส่งอาหารผ่านแอปพลิเคชันเดลิเวอรี่ชั้นนำ เช่น GrabFood, Foodpanda และ Lineman."},
        {
          id: "faq3",          title: "สามารถจองโต๊ะล่วงหน้าได้หรือไม่?",          content: "ท่านสามารถโทรศัพท์เพื่อจองโต๊ะล่วงหน้าได้ที่เบอร์โทรศัพท์ที่ให้ไว้ในส่วนติดต่อของเรา."},
        {
          id: "faq4",          title: "มีที่จอดรถสำหรับลูกค้าหรือไม่?",          content: "มีที่จอดรถให้บริการสำหรับลูกค้าที่บริเวณหน้าร้านและลานจอดใกล้เคียง."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/young-happy-waiter-taking-order-from-his-guests-cafe_637285-7842.jpg"
      imageAlt="พนักงานร้านอาหารพร้อมให้บริการ"
      mediaAnimation="opacity"
      title="คำถามที่พบบ่อย"
      description="มีข้อสงสัยเกี่ยวกับการบริการของเราหรือไม่? ลองดูคำตอบที่นี่"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      tag="ติดต่อเรา"
      title="พร้อมเสิร์ฟความอร่อยให้คุณ"
      description="ไม่ว่าจะเป็นมื้อกลางวัน มื้อเย็น หรือการสั่งอาหารไปทานที่บ้าน ร้านปุยฝ้ายพร้อมให้บริการ ติดต่อเราได้เลย!"
      buttons={[
        {
          text: "โทรหาเรา",          href: "tel:+6612345678"},
        {
          text: "แผนที่ร้าน",          href: "https://maps.app.goo.gl/YourRestaurantLocation"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="ร้านปุยฝ้าย"
      copyrightText="© 2024 ร้านปุยฝ้าย. สงวนลิขสิทธิ์ทุกประการ."
      socialLinks={[
        {
          icon: Facebook,
          href: "https://www.facebook.com/PuiFaiRestaurant",          ariaLabel: "Facebook"},
        {
          icon: Instagram,
          href: "https://www.instagram.com/PuiFaiRestaurant",          ariaLabel: "Instagram"},
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
