"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroSplitAvatars from '@/components/sections/hero/HeroSplitAvatars';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardThirteen from '@/components/sections/feature/FeatureCardThirteen';
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Anchor } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="smallSizeLargeTitles"
      background="none"
      cardStyle="solid-bordered"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="minimal"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766441289811-b8tnn93n.jpg"
          logoAlt="Yacht Charter Co Logo"
          brandName="Voyage Charter"
          button={{
            text: "Book Now",
            href: "contact"
          }}
          buttonClassName="text-primary-cta hover:opacity-80"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitAvatars
          title="Explore the World's Most Exclusive Yachts"
          description="Charter luxury yachts for unforgettable adventures across pristine waters. Professional crew, world-class amenities, and unforgettable experiences await."
          tag="Luxury Marine Charters"
          tagIcon={Anchor}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766441289811-b8tnn93n.jpg"
          imageAlt="Luxury sailing yacht at sunset"
          imagePosition="right"
          avatars={[
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184707769-zzdny5qa.jpg",
              alt: "Captain Marcus"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184199984-xnv4032m.jpg",
              alt: "Crew Member"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg",
              alt: "Coordinator"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766441295272-eui1jqgn.jpg",
              alt: "Guest Relations"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766441296285-xfz0lndf.jpg",
              alt: "Marine Guide"
            }
          ]}
          avatarText="Trusted by 500+ satisfied charter guests"
          buttons={[
            {
              text: "Browse Fleet",
              href: "products"
            },
            {
              text: "Get Quote",
              href: "contact"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Experience Maritime Excellence"
          description="With over 20 years in luxury yacht chartering, we specialize in curating unforgettable ocean experiences. Our fleet of premium vessels and expert crew ensure every voyage exceeds expectations."
          tag="About Our Company"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766441291327-th9rjqxb.jpg"
          imageAlt="Our diverse fleet of luxury yachts"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "View Our Fleet",
              href: "products"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardThirteen
          title="Booking Process"
          description="Simple, transparent steps to reserve your perfect yacht charter"
          tag="How It Works"
          features={[
            {
              id: "01",
              title: "Select Your Yacht",
              description: "Browse our curated fleet of luxury vessels and choose the perfect yacht for your adventure based on size, amenities, and destination."
            },
            {
              id: "02",
              title: "Customize Your Trip",
              description: "Work with our specialists to plan your itinerary, crew arrangements, and any special requests for your voyage."
            },
            {
              id: "03",
              title: "Confirm Booking",
              description: "Finalize details, receive documentation, and prepare for an unforgettable maritime experience with our professional team."
            },
            {
              id: "04",
              title: "Set Sail",
              description: "Embark on your chartered yacht adventure with expert captains, full provisioning, and 24/7 support throughout your journey."
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          containerStyle="default"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardSeven
          title="Our Fleet"
          description="Hand-selected luxury yachts ready for your next adventure"
          tag="Yacht Selection"
          products={[
            {
              id: "1",
              name: "Serenity Classic",
              price: "From $4,500/day",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766441292351-fhk2chjx.jpg",
              imageAlt: "Serenity Classic sailing yacht"
            },
            {
              id: "2",
              name: "Horizon Prestige",
              price: "From $7,200/day",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766441293176-amar8v5i.jpg",
              imageAlt: "Horizon Prestige motor yacht"
            },
            {
              id: "3",
              name: "Paradise Twin",
              price: "From $5,800/day",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766441293957-mm99l1vj.jpg",
              imageAlt: "Paradise Twin catamaran"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          containerStyle="default"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Guests Say"
          description="Real experiences from unforgettable yacht charter adventures"
          tag="Guest Reviews"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              role: "CEO",
              company: "Luxury Travel Group",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageAlt: "Sarah Mitchell portrait"
            },
            {
              id: "2",
              name: "James Richardson",
              role: "Travel Coordinator",
              company: "Elite Escapes",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg",
              imageAlt: "James Richardson portrait"
            },
            {
              id: "3",
              name: "Victoria Chen",
              role: "Wedding Planner",
              company: "Destination Weddings Inc",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183843211-zal0n8gj.jpg",
              imageAlt: "Victoria Chen portrait"
            },
            {
              id: "4",
              name: "Michael Thompson",
              role: "Owner",
              company: "Adventure Tours Ltd",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184200876-idjoemdc.jpg",
              imageAlt: "Michael Thompson portrait"
            },
            {
              id: "5",
              name: "Emma Patterson",
              role: "Event Manager",
              company: "Corporate Events Pro",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg",
              imageAlt: "Emma Patterson portrait"
            },
            {
              id: "6",
              name: "David Anderson",
              role: "Hospitality Director",
              company: "Resort Management Co",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183844045-gbini56u.jpg",
              imageAlt: "David Anderson portrait"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          containerStyle="default"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Plan Your Charter"
          description="Get in touch with our yacht specialists to discuss your dream voyage and receive a personalized quote."
          useInvertedBackground="noInvert"
          inputs={[
            {
              name: "fullName",
              type: "text",
              placeholder: "Full Name",
              required: true
            },
            {
              name: "email",
              type: "email",
              placeholder: "Email Address",
              required: true
            },
            {
              name: "phone",
              type: "tel",
              placeholder: "Phone Number",
              required: true
            },
            {
              name: "destination",
              type: "text",
              placeholder: "Preferred Destination",
              required: true
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your ideal yacht charter experience...",
            rows: 5,
            required: true
          }}
          buttonText="Request Quote"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Voyage Charter"
          columns={[
            {
              items: [
                {
                  label: "Browse Fleet",
                  href: "products"
                },
                {
                  label: "How It Works",
                  href: "features"
                },
                {
                  label: "About Us",
                  href: "about"
                }
              ]
            },
            {
              items: [
                {
                  label: "Contact Us",
                  href: "contact"
                },
                {
                  label: "FAQ",
                  href: "#"
                },
                {
                  label: "Book Now",
                  href: "contact"
                }
              ]
            },
            {
              items: [
                {
                  label: "Terms & Conditions",
                  href: "#"
                },
                {
                  label: "Privacy Policy",
                  href: "#"
                },
                {
                  label: "Safety Guidelines",
                  href: "#"
                }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}