f7ce4ab2-b6b4-4e7a-8698-7725db7cfef1/src/app/page.tsx

"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardFour from '@/components/sections/product/ProductCardFour';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="largeSizeMediumTitles"
        background="floatingGradient"
        cardStyle="solid"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={[
              { name: "Dashboard", id: "hero" },
              { name: "Tours", id: "products" },
              { name: "Clients", id: "features" },
              { name: "Support", id: "faq" },
            ]}
            brandName="TourFlow"
            button={{ text: "Get Started", href: "#contact" }}
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroBillboardRotatedCarousel
            title="Streamline Your Tour Business"
            description="The all-in-one management platform for booking, scheduling, and resource allocation. Professional tools for modern tour operators."
            background={{ variant: "plain" }}
            carouselItems={[
              { id: "c1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BV5PeY5My8y8u2VS5LEqM4w9hO/a-wide-angle-high-tech-digital-platform--1774561412317-181bbcce.png", imageAlt: "Dashboard Preview" },
              { id: "c2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BV5PeY5My8y8u2VS5LEqM4w9hO/a-wide-angle-high-tech-digital-platform--1774561412317-181bbcce.png", imageAlt: "Scheduling View" },
              { id: "c3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BV5PeY5My8y8u2VS5LEqM4w9hO/a-wide-angle-high-tech-digital-platform--1774561412317-181bbcce.png", imageAlt: "Client Portal" },
              { id: "c4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BV5PeY5My8y8u2VS5LEqM4w9hO/a-wide-angle-high-tech-digital-platform--1774561412317-181bbcce.png", imageAlt: "Reports UI" },
              { id: "c5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BV5PeY5My8y8u2VS5LEqM4w9hO/a-wide-angle-high-tech-digital-platform--1774561412317-181bbcce.png", imageAlt: "Team View" },
              { id: "c6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BV5PeY5My8y8u2VS5LEqM4w9hO/a-wide-angle-high-tech-digital-platform--1774561412317-181bbcce.png", imageAlt: "Booking System" },
            ]}
            buttons={[{ text: "Get Started", href: "#contact" }]}
          />
        </div>

        <div id="features" data-section="features">
          <FeatureCardTwentyOne
            title="Comprehensive Management Suite"
            description="Everything you need to automate your operations and grow your bookings."
            accordionItems={[
              { id: "f1", title: "Automated Service Orders", content: "Instant generation of professional service orders in PDF and Excel formats." },
              { id: "f2", title: "Resource Scheduling", content: "Assign guides, vehicles, and resources with intuitive daily planning views." },
              { id: "f3", title: "Client Lifecycle Management", content: "Track booking history, communication, and preferences for every customer." },
            ]}
            useInvertedBackground={false}
            mediaAnimation="slide-up"
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BV5PeY5My8y8u2VS5LEqM4w9hO/clean-data-visualization-dashboard-showi-1774561411634-ba1b66a1.png"
          />
        </div>

        <div id="products" data-section="products">
          <ProductCardFour
            title="Featured Tours"
            description="Define and manage your service offerings with full capacity controls."
            gridVariant="three-columns-all-equal-width"
            animationType="slide-up"
            textboxLayout="split"
            useInvertedBackground={false}
            products={[
              { id: "p1", name: "Mountain Trekking", price: "$120", variant: "Full Day", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BV5PeY5My8y8u2VS5LEqM4w9hO/an-adventurous-outdoor-mountain-tour-set-1774561411601-53e67d85.png" },
              { id: "p2", name: "Coastal Paradise", price: "$85", variant: "Half Day", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BV5PeY5My8y8u2VS5LEqM4w9hO/an-iconic-tropical-beach-tour-scene-with-1774561412791-b6b03a9b.png" },
              { id: "p3", name: "Historic City Tour", price: "$50", variant: "Group", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BV5PeY5My8y8u2VS5LEqM4w9hO/historical-city-walking-tour-authentic-a-1774561412648-99c96c02.png" },
            ]}
          />
        </div>

        <div id="metrics" data-section="metrics">
          <MetricCardTen
            title="Performance Tracking"
            description="Monitor your business health in real-time."
            animationType="blur-reveal"
            textboxLayout="default"
            useInvertedBackground={false}
            metrics={[
              { id: "m1", title: "Confirmed Bookings", subtitle: "Current Month", category: "Growth", value: "245" },
              { id: "m2", title: "Pending Requests", subtitle: "Urgent Action", category: "Workflow", value: "12" },
              { id: "m3", title: "Available Capacity", subtitle: "Remaining Slots", category: "Resource", value: "89%" },
            ]}
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqBase
            title="System Support"
            description="Common questions about managing your tour operations."
            faqsAnimation="blur-reveal"
            textboxLayout="split"
            useInvertedBackground={false}
            faqs={[
              { id: "q1", title: "How is the Order of Service generated?", content: "It generates automatically upon booking creation, populated with client and tour data." },
              { id: "q2", title: "Can I export data?", content: "Yes, PDF and Excel formats are supported via integrated export tools." },
              { id: "q3", title: "How are guide assignments handled?", content: "Guides can be assigned directly to specific tours in the booking scheduler." },
            ]}
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplit
            tag="Contact"
            title="Ready to get started?"
            description="Talk to our team about integrating this management system for your agency."
            background={{ variant: "plain" }}
            useInvertedBackground={false}
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BV5PeY5My8y8u2VS5LEqM4w9hO/professional-support-team-interface-with-1774561411511-fe0ad7c3.png"
            mediaAnimation="blur-reveal"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoReveal
            logoText="TourFlow"
            leftLink={{ text: "Terms of Service", href: "#" }}
            rightLink={{ text: "Privacy Policy", href: "#" }}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}