"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import { Cloud, Crown, Diamond, Download, Folder, Gauge, Image, Layers, ShieldCheck, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="largeSmall"
        background="floatingGradient"
        cardStyle="soft-shadow"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "#home",
        },
        {
          name: "Features",
          id: "#features",
        },
        {
          name: "Gallery",
          id: "#gallery",
        },
        {
          name: "Pricing",
          id: "#pricing",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      button={{
        text: "Sign in with Google",
        href: "/api/auth/google",
      }}
      topBarButton={{
        text: "Language",
        onClick: "() => console.log('Open language switcher')",
      }}
      logoSrc="http://img.b2bpic.net/free-photo/half-charged-battery-left-side-with-white-background_187299-40056.jpg"
      logoAlt="Virtual Gallery logo"
      brandName="Virtual Gallery"
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboardScroll
      background={{
        variant: "animated-grid",
      }}
      title="Virtual Gallery: Your Memories, Forever Safe in the Cloud"
      description="Upload, organize, and download your photos and videos anytime. Free up device space and keep your most precious memories securely stored in our neon-themed digital haven."
      tag="Cloud Media Storage"
      tagIcon={Cloud}
      tagAnimation="slide-up"
      buttons={[
        {
          text: "Start Free Trial",
          href: "/signup",
        },
        {
          text: "Learn More",
          href: "#features",
        },
      ]}
      buttonAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/low-angle-shot-glass-window-building-middle-city_181624-6655.jpg"
      imageAlt="Virtual Gallery dashboard screenshot"
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={false}
      tag="About Us"
      title="Secure Your Digital Legacy"
      description="Virtual Gallery offers an intuitive and highly secure platform designed to safeguard your most cherished photos and videos. Experience peace of mind with encrypted storage and reliable access."
      subdescription="Our robust infrastructure ensures your data is protected against loss and unauthorized access, keeping your memories safe for years to come."
      icon={ShieldCheck}
      imageSrc="http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637770.jpg"
      imageAlt="Cloud data security illustration"
      mediaAnimation="opacity"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Effortless Uploads",
          description: "Quickly upload photos and videos of any size. Supports JPG, PNG, WEBP, GIF, MP4, MOV, AVI.",
          bentoComponent: "reveal-icon",
          icon: Cloud,
          imageSrc: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301599.jpg",
          imageAlt: "cloud upload neon icon",
        },
        {
          title: "Smart Organization",
          description: "Create custom albums and folders, rename files, and easily sort your media by date or name.",
          bentoComponent: "reveal-icon",
          icon: Folder,
          imageSrc: "http://img.b2bpic.net/free-photo/half-charged-battery-left-side-with-white-background_187299-40056.jpg",
          imageAlt: "cloud upload neon icon",
        },
        {
          title: "Instant Previews",
          description: "View images and play videos directly in your browser without downloading, saving time and bandwidth.",
          bentoComponent: "media-stack",
          items: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-glass-window-building-middle-city_181624-6655.jpg",
              imageAlt: "Upload icon",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150063081.jpg",
              imageAlt: "Organize icon",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151205027.jpg",
              imageAlt: "Download icon",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637770.jpg",
          imageAlt: "cloud upload neon icon",
        },
        {
          title: "Secure Downloads",
          description: "Download individual files or entire albums as ZIP archives, ensuring your data is always accessible.",
          bentoComponent: "reveal-icon",
          icon: Download,
          imageSrc: "http://img.b2bpic.net/free-photo/new-york-city-midtown-skyline-with-skyscrapers-urban-cityscape-night_649448-2529.jpg",
          imageAlt: "cloud upload neon icon",
        },
      ]}
      title="Unlock Powerful Media Management"
      description="From seamless uploads to intelligent organization, Virtual Gallery provides all the tools you need to manage your digital media with ease and style."
      tag="Core Features"
    />
  </div>

  <div id="gallery" data-section="gallery">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "media-1",
          name: "Neon Cityscape",
          price: "JPG, 5MB",
          imageSrc: "http://img.b2bpic.net/free-photo/new-york-city-midtown-skyline-with-skyscrapers-urban-cityscape-night_649448-2529.jpg",
          imageAlt: "Neon Cityscape",
        },
        {
          id: "media-2",
          name: "Futuristic Portrait",
          price: "PNG, 3MB",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-colorful-fluorescent-make-up_23-2148410096.jpg",
          imageAlt: "Futuristic Portrait",
        },
        {
          id: "media-3",
          name: "Abstract Glow",
          price: "GIF, 2MB",
          imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_23-2149627848.jpg",
          imageAlt: "Abstract Glow",
        },
        {
          id: "media-4",
          name: "Circuit Traces",
          price: "JPG, 4MB",
          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-red-themed-circuit-board-with-chip_23-2148284291.jpg",
          imageAlt: "Circuit Traces",
        },
        {
          id: "media-5",
          name: "Dusk Landscape",
          price: "MP4, 15MB",
          imageSrc: "http://img.b2bpic.net/free-photo/purple-background-apocalyptic-night_23-2148282500.jpg",
          imageAlt: "Dusk Landscape",
        },
        {
          id: "media-6",
          name: "Data Flow",
          price: "AVI, 20MB",
          imageSrc: "http://img.b2bpic.net/free-photo/paper-craft-art-uploading-cloud_53876-75079.jpg",
          imageAlt: "Data Flow",
        },
        {
          id: "media-7",
          name: "Cyber City",
          price: "PNG, 7MB",
          imageSrc: "http://img.b2bpic.net/free-photo/glowing-skyscrapers-illuminate-modern-city-skyline-dusk-generative-ai_188544-40708.jpg",
          imageAlt: "Cyber City",
        },
      ]}
      title="Your Personal Media Gallery"
      description="Explore your beautifully organized collection of photos and videos. Easily manage, preview, and download your cherished memories."
      tag="My Gallery"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "storage",
          value: "85%",
          title: "Storage Used",
          description: "View your current storage consumption and plan for upgrades.",
          icon: Gauge,
        },
        {
          id: "files",
          value: "1,245",
          title: "Total Files",
          description: "Keep track of all the precious memories you've uploaded.",
          icon: Layers,
        },
        {
          id: "albums",
          value: "42",
          title: "Organized Albums",
          description: "Neatly categorized albums for quick access and sharing.",
          icon: Image,
        },
      ]}
      title="Storage at a Glance"
      description="Monitor your Virtual Gallery usage with intuitive metrics and insights."
      tag="Your Dashboard"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "free",
          badge: "Starter",
          badgeIcon: Sparkles,
          price: "Free",
          subtitle: "Perfect for trying out the platform.",
          buttons: [
            {
              text: "Get Started",
              href: "/signup",
            },
          ],
          features: [
            "10 GB Storage",
            "Basic File Management",
            "Standard Support",
          ],
        },
        {
          id: "pro",
          badge: "Most Popular",
          badgeIcon: Crown,
          price: "$9.99/month",
          subtitle: "For avid photographers and videographers.",
          buttons: [
            {
              text: "Upgrade to Pro",
              href: "/upgrade-pro",
            },
          ],
          features: [
            "1 TB Storage",
            "Advanced File Management",
            "Priority Support",
            "Bulk Downloads",
            "Private Albums",
          ],
        },
        {
          id: "premium",
          badge: "Power User",
          badgeIcon: Diamond,
          price: "$19.99/month",
          subtitle: "Ultimate storage for your entire digital life.",
          buttons: [
            {
              text: "Go Premium",
              href: "/upgrade-premium",
            },
          ],
          features: [
            "5 TB Storage",
            "All Pro Features",
            "Dedicated Account Manager",
            "AI-Powered Tagging",
            "Family Sharing",
          ],
        },
      ]}
      title="Flexible Storage Plans"
      description="Choose the perfect plan to expand your digital canvas and keep more memories safe with Virtual Gallery."
      tag="Pricing"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Anya Sharma",
          date: "Jan 23, 2024",
          title: "A Digital Sanctuary!",
          quote: "Virtual Gallery transformed how I manage my photos. The neon UI is stunning and the organization tools are a lifesaver. My memories feel truly safe and accessible. Highly recommend for anyone serious about digital storage!",
          tag: "Photography Enthusiast",
          avatarSrc: "http://img.b2bpic.net/free-photo/cyberpunk-warrior-woman-portrait_23-2150712478.jpg",
          avatarAlt: "Anya Sharma avatar",
          imageSrc: "http://img.b2bpic.net/free-photo/wc-sign-city_23-2150039833.jpg",
          imageAlt: "Virtual Gallery interface screenshot",
        },
        {
          id: "2",
          name: "Ben Carter",
          date: "Feb 15, 2024",
          title: "Sleek and Functional",
          quote: "Finally, a media platform that combines incredible design with robust functionality. The video previews are seamless, and downloading entire albums is a breeze. The neon aesthetic really sets it apart!",
          tag: "Videographer",
          avatarSrc: "http://img.b2bpic.net/free-photo/people-wearing-futuristic-high-tech-virtual-reality-glasses_23-2151141652.jpg",
          avatarAlt: "Ben Carter avatar",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-showcasing-their-home_23-2151624948.jpg",
          imageAlt: "Virtual Gallery video player screenshot",
        },
        {
          id: "3",
          name: "Chloe Wong",
          date: "Mar 01, 2024",
          title: "Unmatched Convenience",
          quote: "Saving device space while having all my media instantly available is a game-changer. The security features give me immense peace of mind. Plus, the glowing buttons are just cool!",
          tag: "Digital Creator",
          avatarSrc: "http://img.b2bpic.net/free-photo/girl-posing-with-copy-space-front-view_23-2149596279.jpg",
          avatarAlt: "Chloe Wong avatar",
          imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039367.jpg",
          imageAlt: "Virtual Gallery bulk download screenshot",
        },
        {
          id: "4",
          name: "David Lee",
          date: "Mar 28, 2024",
          title: "Future of Media Storage",
          quote: "Virtual Gallery feels like it's from the future. The interface is incredibly responsive, and finding old files is now effortless thanks to the powerful search. A truly next-gen experience!",
          tag: "Tech Innovator",
          avatarSrc: "http://img.b2bpic.net/free-photo/data-profession-money-symbol-lens-flare_1134-1414.jpg",
          avatarAlt: "David Lee avatar",
          imageSrc: "http://img.b2bpic.net/free-photo/digital-art-inmersive-exhibition_23-2151428500.jpg",
          imageAlt: "Virtual Gallery search feature screenshot",
        },
        {
          id: "5",
          name: "Eve Rodriguez",
          date: "Apr 10, 2024",
          title: "Simply Brilliant!",
          quote: "I've tried many storage solutions, but Virtual Gallery stands out with its unique visual flair and user-friendly design. It's a joy to use, and my media collection has never looked better. Fantastic support too!",
          tag: "Content Producer",
          avatarSrc: "http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419483.jpg",
          avatarAlt: "Eve Rodriguez avatar",
          imageSrc: "http://img.b2bpic.net/free-photo/led-screen-with-flags-world-countries_140725-8327.jpg",
          imageAlt: "Virtual Gallery storage usage screenshot",
        },
      ]}
      title="Loved by Our Users"
      description="Hear what people are saying about their experience with Virtual Gallery and how it's revolutionizing their media management."
      tag="Testimonials"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq-1",
          title: "What types of media can I upload?",
          content: "Virtual Gallery supports common image formats like JPG, PNG, WEBP, GIF, and video formats such as MP4, MOV, and AVI. We are constantly working to expand our compatibility.",
        },
        {
          id: "faq-2",
          title: "How secure are my files in Virtual Gallery?",
          content: "Your security is our top priority. We use industry-standard encryption protocols for data in transit and at rest, coupled with robust access controls and regular security audits to protect your privacy.",
        },
        {
          id: "faq-3",
          title: "Can I access my files from any device?",
          content: "Yes, Virtual Gallery is a cloud-based platform, meaning you can access, upload, and download your media from any device with an internet connection, including desktops, laptops, tablets, and smartphones.",
        },
        {
          id: "faq-4",
          title: "Is there a limit to how many files I can store?",
          content: "The storage limit depends on your chosen plan. Our free tier offers 10 GB. Paid plans provide significantly more storage, up to 5 TB, to accommodate even the largest media collections.",
        },
        {
          id: "faq-5",
          title: "How does the language switcher work?",
          content: "Our language switcher, located in the top-right corner, allows you to change the entire site's UI to one of ten popular languages. Your selection is saved to your browser and persists across sessions.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Find quick answers to common questions about Virtual Gallery's features, security, and functionality."
      tag="Support"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      text="Have more questions or need assistance? Our support team is here to help you make the most of your Virtual Gallery experience."
      buttons={[
        {
          text: "Contact Support",
          href: "/support",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoSrc="http://img.b2bpic.net/free-photo/half-charged-battery-left-side-with-white-background_187299-40056.jpg"
      logoAlt="Virtual Gallery logo"
      logoText="Virtual Gallery"
      columns={[
        {
          title: "Product",
          items: [
            {
              label: "Features",
              href: "#features",
            },
            {
              label: "Gallery",
              href: "#gallery",
            },
            {
              label: "Pricing",
              href: "#pricing",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Careers",
              href: "/careers",
            },
            {
              label: "Blog",
              href: "/blog",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Contact Us",
              href: "#contact",
            },
            {
              label: "Help Center",
              href: "/help",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy Policy",
              href: "/privacy",
            },
            {
              label: "Terms of Service",
              href: "/terms",
            },
          ],
        },
      ]}
      copyrightText="© 2024 Virtual Gallery. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
