"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import TextAbout from '@/components/sections/about/TextAbout';
import { Clock, ThumbsUp, Utensils } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="mediumLargeSizeLargeTitles"
        background="fluid"
        cardStyle="layered-gradient"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        { name: "Home", id: "hero" },
        { name: "Concept", id: "about" },
        { name: "Menu", id: "menu" },
        { name: "Experiences", id: "features" },
        { name: "Reservations", id: "contact" },
      ]}
      brandName="Galerie"
      button={{ text: "ご予約", href: "#contact" }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{ variant: "rotated-rays-static-grid" }}
      title="ガルリ - 料理で選ばれる大人のレストラン＆バー"
      description="洗練された空間と、旬の食材が織りなす極上の逸品。特別な夜を彩る、大人のための隠れ家へようこそ。"
      buttons={[{ text: "ご予約はこちら", href: "#contact" }]}
      imageSrc="http://img.b2bpic.net/free-photo/grey-painted-fancy-restaurant-with-empty-dinner-table_140725-8730.jpg"
      imageAlt="Galerie restaurant interior"
      mediaAnimation="opacity"
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/high-angle-shot-table-with-elegant-setting-restaurant-hall-evening_181624-24706.jpg", alt: "High angle shot of a table with an elegant setting in the restaurant hall in the evening" },
        { src: "http://img.b2bpic.net/free-photo/restaurant-hall-with-round-table-some-chairs-fireplace-plants_140725-8034.jpg", alt: "Restaurant hall with round table some chairs fireplace and plants" },
        { src: "http://img.b2bpic.net/free-photo/close-up-restaurant-table-with-pink-velvet-chairs-grey-painted-hall-with-classic-paintings_140725-8705.jpg", alt: "Close up of restaurant table with pink velvet chairs in grey painted hall with classic paintings" },
        { src: "http://img.b2bpic.net/free-photo/life-style_1122-1851.jpg", alt: "life style" },
        { src: "http://img.b2bpic.net/free-photo/positive-young-caucasian-brunette-lady-wears-black-top-pants-hoodie-top-smiling-camera-cafe_197531-33294.jpg", alt: "Positive young caucasian brunette lady wears black top pants and hoodie on top smiling at camera in cafe" }
      ]}
      avatarText="多くのお客様に愛されて10年"
      marqueeItems={[
        { type: "text", text: "季節の旬を愉しむ" },
        { type: "text", text: "隠れ家空間" },
        { type: "text", text: "こだわりのバー体験" },
        { type: "text", text: "厳選ワイン" },
        { type: "text", text: "至高のデザート" }
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={false}
      title="五感を満たす、至高のひととき"
      buttons={[{ text: "詳しく見る", href: "#features" }]}
      className="bg-[url('https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DOTNQEdrOreEVMkbEvCfUCUnLF/uploaded-1778155687664-gjwsudv0.jpg')] bg-cover bg-center"
    />
  </div>

  <div id="menu" data-section="menu">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={false}
      products={[
        { id: "1", name: "旬魚のカルパッチョ", price: "¥2,200", imageSrc: "http://img.b2bpic.net/free-photo/seafood-salad-with-crabsters-cherry-tomatoes_114579-1718.jpg" },
        { id: "2", name: "ガルリ特製カクテル", price: "¥1,500", imageSrc: "http://img.b2bpic.net/free-photo/delicious-cocktail-with-mint-table_23-2149418266.jpg" },
        { id: "3", name: "季節のデザートプレート", price: "¥1,200", imageSrc: "http://img.b2bpic.net/free-photo/cake-restaurant-table_7939-1986.jpg" },
        { id: "4", name: "和牛のグリル", price: "¥3,800", imageSrc: "http://img.b2bpic.net/free-psd/banner-sushi-restaurant-template_23-2148645805.jpg" },
        { id: "5", name: "厳選ワインペアリング", price: "¥5,000", imageSrc: "http://img.b2bpic.net/free-photo/dessert-glass-cup-served-with-tea_140725-8402.jpg" },
        { id: "6", name: "一口のお楽しみ", price: "¥800", imageSrc: "http://img.b2bpic.net/free-photo/white-plate-delicious-frosted-cupcakes-stone_114579-42549.jpg" }
      ]}
      title="季節のシグネチャーメニュー"
      description="職人の技が光る、ガルリ自慢のメニューをご覧ください。"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardEight
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        { title: "プライベート空間", description: "大切な方との特別なひとときにふさわしい個室をご用意しております。", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DOTNQEdrOreEVMkbEvCfUCUnLF/uploaded-1778155687665-gd8dmxiy.jpg" },
        { title: "こだわりのバーテンダー", description: "お客様のその日の気分に合わせて、最適な一杯をご提供。", imageSrc: "http://img.b2bpic.net/free-photo/close-up-bartender-cocktail-shaker_23-2149132184.jpg" },
        { title: "季節の食材", description: "旬の恵みを一番美味しい形で。全国から厳選した食材を使用。", imageSrc: "http://img.b2bpic.net/free-photo/elegant-healthy-food-composition-with-fish_23-2147992823.jpg" }
      ]}
      title="大人の社交場としてのこだわり"
      description="お客様の心に残る、特別な空間づくり。"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        { id: "1", name: "佐藤様", role: "常連のお客様", testimonial: "料理もカクテルも最高です。まさに隠れ家。", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DOTNQEdrOreEVMkbEvCfUCUnLF/uploaded-1778155687665-q6l9rb5r.jpg" },
        { id: "2", name: "田中様", role: "記念日利用", testimonial: "スタッフの対応が素晴らしく、素敵な時間を過ごせました。", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-restaurant_23-2148395381.jpg" },
        { id: "3", name: "鈴木様", role: "ビジネス会食", testimonial: "静かで落ち着いた空間は、会食に最適です。", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-friends-shaking-hands_23-2148395404.jpg" },
        { id: "4", name: "高橋様", role: "一人飲み", testimonial: "カウンターでバーテンダーとの会話を楽しみました。", imageSrc: "http://img.b2bpic.net/free-photo/person-indian-origin-having-fun_23-2150285278.jpg" },
        { id: "5", name: "渡辺様", role: "季節の利用", testimonial: "旬の食材を使った料理の数々に感動しました。", imageSrc: "http://img.b2bpic.net/free-photo/couple-having-date-together-luxurious-restaurant_23-2150517424.jpg" }
      ]}
      title="お客様の声"
      description="ガルリをお選びいただいたお客様からの心温まるメッセージ。"
      imageClassName="rounded-full border-4 border-white shadow-lg"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        { id: "m1", value: "10年", title: "感謝の歴史", description: "多くのお客様に愛されて", icon: Clock },
        { id: "m2", value: "500+", title: "季節の逸品", description: "これまで提供した創作料理", icon: Utensils },
        { id: "m3", value: "95%", title: "リピート率", description: "また来たいというお声", icon: ThumbsUp }
      ]}
      title="私たちの実績"
      description="ガルリが大切にしている数字の記録。"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        { id: "q1", title: "貸切利用は可能ですか？", content: "はい、ご予算や人数に合わせて承ります。" },
        { id: "q2", title: "ドレスコードはありますか？", content: "スマートカジュアルでのご来店をおすすめしております。" },
        { id: "q3", title: "子供は入店できますか？", content: "大人向けの空間のため、中学生以上のご案内となります。" }
      ]}
      title="よくあるご質問"
      faqsAnimation="slide-up"
      description="ご来店前に気になるポイントをまとめました。"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{ variant: "sparkles-gradient" }}
      text="ガルリで特別なひとときを。ご予約・お問い合わせはお気軽に。"
      buttons={[{ text: "予約サイトへ", href: "#" }]}
      className="bg-[url('https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DOTNQEdrOreEVMkbEvCfUCUnLF/uploaded-1778155687665-z1y5a2b3.jpg')] bg-cover bg-center"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Galerie"
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DOTNQEdrOreEVMkbEvCfUCUnLF/uploaded-1778155687666-x9j4k2m1.jpg"
      columns={[
        { title: "Links", items: [{ label: "Top", href: "#hero" }, { label: "Concept", href: "#about" }] },
        { title: "Support", items: [{ label: "Reserve", href: "#contact" }, { label: "Privacy", href: "#" }] }
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}