"use client";

import ReactLenis from "lenis/react";
import HeroCentered from "@/components/sections/hero/HeroCentered";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Sparkles, Plane, Compass, Instagram, Facebook, Linkedin } from "lucide-react";

export default function LuxuryTravelAgencyTemplatePage() {
    return (
        <ThemeProvider
            defaultButtonVariant="icon-arrow"
            defaultTextAnimation="entrance-slide"
            borderRadius="rounded"
            contentWidth="medium"
            sizing="medium"
            background="none"
            cardStyle="solid"
            primaryButtonStyle="shadow"
            secondaryButtonStyle="solid"
            headingFontWeight="medium"
        >
            <ReactLenis root>
                <NavbarLayoutFloatingOverlay
                    navItems={[
                        { name: "About", id: "about" },
                        { name: "Services", id: "services" },
                        { name: "Destinations", id: "destinations" },
                        { name: "Reviews", id: "reviews" },
                        { name: "Contact", id: "contact" },
                    ]}
                    brandName="PeakOcean"
                    button={{ text: "Plan Your Escape", href: "#contact" }}
                />
                <div id="hero">
                    <HeroCentered
                        title="PeakOcean Expeditions"
                        description="Cinematic 3D horizons where towering mountain peaks embrace the deep, infinite ocean."
                        background={{ variant: "canvas-reveal" }}
                        avatars={[
                            { src: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-90512.jpg", alt: "Ocean texture" },
                            { src: "http://img.b2bpic.net/free-photo/selective-focus-photography-high-rocky-mountains-covered-with-snow-fog_181624-3044.jpg", alt: "Mountain peak" },
                        ]}
                        buttons={[
                            { text: "Explore Depths", href: "#services" },
                            { text: "Ascend Peaks", href: "#destinations" },
                        ]}
                    />
                </div>
                <div id="about">
                    <InlineImageSplitTextAbout
                        className="pt-20"
                        heading={[
                            { type: "text", content: "Defining the" },
                            { type: "image", src: "http://img.b2bpic.net/free-photo/beautiful-photo-sea-waves_58702-16297.jpg", alt: "Ocean view" },
                            { type: "text", content: "edge of discovery, where the" },
                            { type: "image", src: "http://img.b2bpic.net/free-photo/landscape-with-mountains_1048-5349.jpg", alt: "Mountain view" },
                            { type: "text", content: "peaks meet the endless deep." },
                        ]}
                        buttons={[{ text: "Discover Our Philosophy", href: "#" }]}
                        useInvertedBackground={false}
                    />
                </div>
                <div id="services">
                    <FeatureCardSix
                        tag="Services"
                        tagIcon={Sparkles}
                        title="Elevation & Depth"
                        description="Premium expedition services tailored to your affinity for nature's extremes."
                        textboxLayout="default"
                        useInvertedBackground={false}
                        features={[
                            { title: "Coastal Expeditions", description: "Exclusive marine tours to pristine hidden shores.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-beach-view-koh-chang-island-seascape-trad-province-eastern-thailand-blue-sky-background_1150-10256.jpg" },
                            { title: "High Altitude Treks", description: "Private-guided ascents to iconic mountain peaks.", imageSrc: "http://img.b2bpic.net/free-photo/hiking-boot-yellow-leaf-autumn-adventure-generated-by-ai_188544-47176.jpg" },
                            { title: "Deep Sea Diving", description: "Professional-grade underwater exploration.", imageSrc: "http://img.b2bpic.net/free-photo/diver-sea-surrounded-by-archeological-building-ruins_23-2151571718.jpg" }
                        ]}
                    />
                </div>
                <div id="destinations">
                    <FeatureCardMedia
                        tag="Destinations"
                        tagIcon={Plane}
                        title="Iconic Landscapes"
                        description="Select from our curated list of ocean gems and mountain wonders."
                        textboxLayout="default"
                        useInvertedBackground={false}
                        features={[
                            { id: "1", title: "Coral Sea Atoll", description: "Pristine ocean seclusion.", tag: "Ocean", imageSrc: "http://img.b2bpic.net/free-photo/vibrant-coral-reef-underwater_23-2152006401.jpg" },
                            { id: "2", title: "Everest North Face", description: "High-altitude majesty.", tag: "Mountain", imageSrc: "http://img.b2bpic.net/free-photo/mountain-cover-with-snow_417767-169.jpg" },
                        ]}
                    />
                </div>
                <div id="reviews">
                    <TestimonialCardTwo
                        tag="Reviews"
                        title="Voices of Discovery"
                        description="Hear from those who've scaled peaks and dived deep."
                        textboxLayout="default"
                        useInvertedBackground={false}
                        animationType="depth-3d"
                        testimonials={[
                            { id: "1", name: "Alex Rivers", role: "Explorer", testimonial: "The ocean views were life-changing.", imageSrc: "http://img.b2bpic.net/free-photo/relaxation-wellbeing-concept-overjoyed-dark-skinned-woman-enjoys-perfect-lazy-weekend-keeps-eyes-shut-from-pleasure-dressed-oversized-striped-sweater-uses-headphones_273609-31053.jpg" },
                        ]}
                    />
                </div>
                <div id="contact">
                    <ContactSplitForm
                        title="Plan Your Summit"
                        description="Ready to explore the extremes? Reach out today."
                        background={{ variant: "sparkles-gradient" }}
                        useInvertedBackground={false}
                    />
                </div>
                <FooterBaseCard
                    logoText="PeakOcean"
                    columns={[
                        { title: "Company", items: [{ label: "About", href: "#about" }] },
                        { title: "Connect", items: [{ label: "Contact", href: "#contact" }] }
                    ]}
                />
            </ReactLenis>
        </ThemeProvider>
    );
}