"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="compact"
        sizing="large"
        background="grid"
        cardStyle="outline"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",          id: "/"},
        {
          name: "About Us",          id: "/about"},
        {
          name: "Menu",          id: "/menu"},
        {
          name: "Access",          id: "/access"},
        {
          name: "Reserve",          id: "/reserve"},
        {
          name: "JP/EN",          id: "#language-switcher"},
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/hand-drawn-cherry-blossom-wreath-background_23-2148070230.jpg"
      logoAlt="Sakura Coffee Tokyo Logo"
      brandName="Sakura Coffee Tokyo"
      button={{
        text: "Reserve a Table",        href: "/reserve"}}
    />
  </div>

  <div id="reservation-form-desc" data-section="reservation-form-desc">
      <ContactText
      useInvertedBackground={true}
      background={{
        variant: "plain"}}
      text="ご予約フォーム\n\nReservation Form\n\n桜珈琲東京での素敵なひとときをご予約いただけます。以下のフォームにご記入の上、送信してください。\n\n[お名前: テキスト入力]\n[メールアドレス: テキスト入力]\n[電話番号: テキスト入力]\n[人数: 数字入力]\n[ご希望日: 日付選択]\n[ご希望時間: 時間選択]\n[メッセージ: テキストエリア]\n\nご予約ありがとうございます。担当者より確認のメールを送信いたします。\n\nYou can reserve a wonderful time at Sakura Coffee Tokyo. Please fill out the form below and submit it.\n\n[Name: Text Input]\n[Email: Text Input]\n[Phone Number: Text Input]\n[Number of Guests: Numeric Input]\n[Date: Date Picker]\n[Time: Time Picker]\n[Message: Text Area]\n\nThank you for your reservation. We will send a confirmation email shortly."
      buttons={[
        {
          text: "送信する\nSubmit Reservation",          onClick: () => console.log('Reservation Submitted'),
        },
      ]}
    />
  </div>

  <div id="reservation-faq" data-section="reservation-faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq-reserve-1",          title: "予約の変更・キャンセルはできますか？\n\nCan I change or cancel my reservation?",          content: "はい、可能です。ご予約確認メールに記載のリンクよりお手続きください。または、お電話にてお問い合わせください。\n\nYes, it is possible. Please use the link provided in your reservation confirmation email, or contact us by phone."},
        {
          id: "faq-reserve-2",          title: "何日前から予約できますか？\n\nHow far in advance can I make a reservation?",          content: "ご来店希望日の2ヶ月前からご予約を承っております。\n\nYou can make a reservation starting from two months prior to your desired visit date."},
        {
          id: "faq-reserve-3",          title: "個室はありますか？\n\nAre there private rooms?",          content: "申し訳ございませんが、個室はございません。オープンスペースでのご案内となります。\n\nUnfortunately, we do not have private rooms. Seating is available in our open space."},
      ]}
      title="よくある質問 (ご予約)\n\nFrequently Asked Questions (Reservations)"
      description="ご予約に関するご質問にお答えします。\n\nAnswers to common questions about making a reservation."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoSrc="http://img.b2bpic.net/free-photo/flat-lay-chinese-ink-elements-composition_23-2148826150.jpg"
      logoAlt="Sakura Coffee Tokyo Logo"
      logoText="桜珈琲東京\n\nSakura Coffee Tokyo"
      leftLink={{
        text: "プライバシーポリシー\n\nPrivacy Policy",        href: "#"}}
      rightLink={{
        text: "利用規約\n\nTerms of Service",        href: "#"}}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
