"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import { Calendar, Compass, MapPin, Smartphone, Sun, FileText, CheckCircle, ArrowRight } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="largeSmallSizeMediumTitles"
        background="blurBottom"
        cardStyle="soft-shadow"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        { name: "Home", id: "hero" },
        { name: "Explore", id: "features" },
        { name: "Activities", id: "activities" },
        { name: "Plans", id: "pricing" },
        { name: "Support", id: "faq" },
        { name: "Contact", id: "contact" }
      ]}
      brandName="La Tehtaar"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardGallery
      background={{ variant: "gradient-bars" }}
      title="Don't Hesitate, Plan Your Jordan Adventure"
      description="La Tehtaar is your ultimate AI-powered partner for crafting the perfect outing in Jordan. We turn complex planning into simple, enjoyable experiences."
      buttons={[{ text: "Plan My Trip", href: "#features" }]}
      mediaItems={[
        { imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-monument-valley-oljato-monument-usa_181624-28528.jpg?_wi=1", imageAlt: "Jordan desert" },
        { imageSrc: "http://img.b2bpic.net/free-photo/adventure-seeker-stands-mountain-peak-isolated-chroma-key_482257-119657.jpg", imageAlt: "Hiking in Jordan" },
        { imageSrc: "http://img.b2bpic.net/free-photo/majestic-sandstone-mountain-range-tranquil-sunset-sky-generative-ai_188544-46225.jpg", imageAlt: "Jordan sunset" }
      ]}
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      title="La Tehtaar: Detailed Action Plan"
      description="Our structured approach ensures you get the most out of your Jordan trip with zero stress."
      features={[
        { icon: Sun, title: "Step 1: Preference Discovery", description: "Select your interests, budget, and group size to help our AI build your profile." },
        { icon: MapPin, title: "Step 2: Smart Routing", description: "Our engine calculates the most efficient paths between your chosen activities." },
        { icon: Smartphone, title: "Step 3: Real-Time Updates", description: "Receive live weather, traffic, and local event alerts directly on your device." },
        { icon: Calendar, title: "Step 4: Seamless Scheduling", description: "Manage your day with a clear, optimized itinerary that leaves room for spontaneous discovery." },
        { icon: CheckCircle, title: "Step 5: Effortless Enjoyment", description: "Go on your adventure knowing every detail is handled by La Tehtaar." }
      ]}
    />
  </div>

  <div id="activities" data-section="activities">
      <ProductCardTwo
      animationType="slide-up"
      gridVariant="uniform-all-items-equal"
      textboxLayout="default"
      useInvertedBackground={false}
      title="Top Activity Spots"
      description="Explore the most trending destinations across Jordan."
      products={[
        { id: "1", brand: "Nature", name: "Hiking in Ajloun", price: "15 JOD", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-with-live-abstract-wallpaper-coming-out-screen_23-2151033592.jpg" },
        { id: "2", brand: "Dining", name: "Traditional Amman Cafe", price: "10 JOD", rating: 4, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-with-live-abstract-wallpaper-coming-out-screen_23-2151033588.jpg" },
        { id: "3", brand: "History", name: "Jerash Ruins", price: "5 JOD", rating: 5, reviewCount: "200", imageSrc: "http://img.b2bpic.net/free-photo/natural-rock-formations-landscape_23-2151723097.jpg" }
      ]}
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardThree
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      title="Plan Your Growth"
      description="Flexible options for users and business partners in the Jordanian tourism sector."
      plans={[
        { id: "free", name: "Explorer", price: "Free", features: ["Custom itinerary", "Basic search", "Seasonal filters"], buttons: [{ text: "Get Started" }] },
        { id: "pro", name: "Premium", price: "29 JOD", features: ["Priority support", "Advanced analytics", "Custom route optimization"], buttons: [{ text: "Upgrade" }] }
      ]}
    />
  </div>

  <div id="social" data-section="social">
      <SocialProofOne
      names={["Jordan Tourism", "Amman Eats", "Wadi Rum Adventures", "Petra Heritage"]}
      title="Trusted by Industry Leaders"
      description="We collaborate with Jordan's most prominent travel and tourism entities."
      useInvertedBackground={false}
      textboxLayout="default"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      faqsAnimation="blur-reveal"
      textboxLayout="split"
      useInvertedBackground={false}
      title="Common Questions"
      description="Get answers about how our AI planning technology works."
      faqs={[
        { id: "q1", title: "How is the plan generated?", content: "Our AI uses proprietary algorithms combined with local Jordanian data." },
        { id: "q2", title: "Can I modify the plan?", content: "Yes, you can edit your itinerary at any time before or during your trip." }
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/keyboard-headphones-desktop_23-2147830011.jpg"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      title="Start Your Mobile App Journey"
      description="Send us your website link and we'll help you convert it into a mobile app."
      inputs={[
        { name: "name", type: "text", placeholder: "Your Name", required: true },
        { name: "email", type: "email", placeholder: "Email Address", required: true },
        { name: "link", type: "url", placeholder: "Your Website Link", required: true }
      ]}
      textarea={{ name: "message", placeholder: "Tell us more about your project" }}
      useInvertedBackground={false}
      buttonText="Submit Project"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/thrilled-traveler-enjoying-panoramic-beauty-with-green-screen-device_482257-120692.jpg"
      logoText="La Tehtaar"
      columns={[
        { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Plans", href: "#pricing" }] },
        { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
