"use client"

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Phone } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="medium"
      background="animatedGrid"
      cardStyle="elevated-accent-light"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="outline"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Rooms", id: "rooms" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "reviews" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Now", href: "contact" }}
          brandName="Milky House"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="Milky House"
          description="Discover luxury and comfort in the heart of Niseko. Experience authentic Japanese hospitality with breathtaking mountain views and world-class amenities."
          buttons={[
            { text: "Book Your Stay", href: "contact" },
            { text: "Learn More", href: "about" }
          ]}
          layoutOrder="default"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766754942727-8fbswe9a.jpg"
          imageAlt="Niseko mountain landscape with snow-covered peaks"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <ParallaxAbout
          title="Welcome to Milky House"
          description="Nestled in the pristine Niseko valley, our boutique hotel combines traditional Japanese charm with modern comfort. We offer an intimate escape where mountain tranquility meets warm hospitality. Each season brings its own magic—world-class skiing in winter, vibrant hiking in summer, and golden foliage in autumn."
          tag="About Us"
          buttons={[
            { text: "Explore Rooms", href: "rooms" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766754943825-nsoys402.jpg"
          imageAlt="Sunset over Niseko mountains"
        />
      </div>

      <div id="rooms" data-section="rooms">
        <FeatureCardTwentyOne
          title="Our Rooms & Amenities"
          description="Each room is thoughtfully designed to provide maximum comfort while showcasing stunning views of the surrounding mountains and valleys."
          tag="Accommodations"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766243011595-xn46fxaw.jpg"
          imageAlt="Luxurious hotel room with mountain view"
          accordionItems={[
            {
              id: "1",
              title: "Cozy Mountain Suites",
              content: "Spacious suites with panoramic windows, heated floors, and traditional Japanese design elements. Perfect for families or groups seeking comfort and elegance."
            },
            {
              id: "2",
              title: "Wellness & Spa Center",
              content: "Rejuvenate in our natural hot spring bath (onsen) with views of the snowy peaks. Our spa offers traditional Japanese treatments and modern therapies."
            },
            {
              id: "3",
              title: "Fine Dining Restaurant",
              content: "Experience exquisite Japanese and international cuisine prepared by our award-winning chef, featuring local Hokkaido ingredients and sake pairings."
            },
            {
              id: "4",
              title: "Seasonal Activities",
              content: "From world-renowned skiing slopes to summer hiking trails, enjoy curated experiences throughout the year with our expert guides and instructors."
            }
          ]}
          useInvertedBackground="noInvert"
          mediaPosition="left"
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardTwo
          title="Guest Reviews"
          description="Hear from travelers who have experienced the magic of Milky House"
          tag="Testimonials"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              role: "Travel Enthusiast",
              testimonial: "The most magical stay of my life. The hospitality was impeccable, the views were breathtaking, and every detail was perfection. Already planning my return trip.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154635301-vse33sxl.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              name: "James Chen",
              role: "Ski Resort Visitor",
              testimonial: "Outstanding location for winter sports. The staff helped arrange everything perfectly. The onsen experience after a day of skiing was absolutely blissful.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageAlt: "James Chen"
            },
            {
              id: "3",
              name: "Emma Rodriguez",
              role: "Luxury Travel Blogger",
              testimonial: "Milky House represents the pinnacle of Japanese hospitality. The attention to detail, impeccable service, and serene atmosphere make it truly unforgettable.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg",
              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",
              name: "David Thompson",
              role: "Corporate Retreat Organizer",
              testimonial: "Perfect venue for our team retreat. The combination of relaxation and adventure activities kept everyone engaged and happy throughout our stay.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183842429-uezzjpov.jpg",
              imageAlt: "David Thompson"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Plan Your Visit"
          ctaDescription="Get in touch with our team to book your perfect mountain escape or answer any questions about your stay."
          ctaButton={{ text: "Contact Us", href: "mailto:reservations@milkyhouse.com" }}
          ctaIcon={Phone}
          faqs={[
            {
              id: "1",
              title: "What are the best times to visit?",
              content: "Winter (December-March) is perfect for skiing and snow activities. Summer offers excellent hiking and mountain views. Autumn showcases beautiful foliage. Spring brings blooming gardens and pleasant weather."
            },
            {
              id: "2",
              title: "Do you offer airport transfers?",
              content: "Yes, we arrange convenient transfers from New Chitose Airport (Sapporo) and Hakodate Airport. Our team can coordinate timing based on your flight schedule."
            },
            {
              id: "3",
              title: "What is included in room rates?",
              content: "Our rates include accommodation, daily breakfast featuring local ingredients, onsen access, and Wi-Fi. Some seasonal packages include activity passes and dining credits."
            },
            {
              id: "4",
              title: "Can you arrange activities and guides?",
              content: "Absolutely. Our concierge team specializes in organizing skiing, hiking, cultural tours, food experiences, and more. We partner with local experts for authentic adventures."
            },
            {
              id: "5",
              title: "Is dining available for non-guests?",
              content: "Yes, our restaurant welcomes day visitors. We serve lunch and dinner with advance reservations recommended during peak seasons."
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          accordionAnimationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Milky House"
          columns={[
            {
              title: "Hotel",
              items: [
                { label: "Rooms", href: "#rooms" },
                { label: "Amenities", href: "#rooms" },
                { label: "Dining", href: "#rooms" },
                { label: "Spa & Wellness", href: "#rooms" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#about" },
                { label: "Contact", href: "#contact" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Guest Info",
              items: [
                { label: "Booking", href: "#contact" },
                { label: "FAQ", href: "#contact" },
                { label: "House Rules", href: "#" },
                { label: "Reviews", href: "#reviews" }
              ]
            }
          ]}
          copyrightText="© 2025 Milky House. All rights reserved. Niseko, Japan."
        />
      </div>
    </ThemeProvider>
  );
}