"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Zap, Award, Twitter, Github, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="grid"
      cardStyle="glass-elevated"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Project Paradigm"
          navItems={[
            { name: "Home", id: "#home" },
            { name: "Features", id: "#features" },
            { name: "Customization", id: "#customization" },
            { name: "Monetization", id: "#monetization" },
            { name: "Testimonials", id: "#testimonials" },
            { name: "Team", id: "#team" },
            { name: "FAQ", id: "#faq" },
            { name: "Contact", id: "#contact" }
          ]}
          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kar4pn"
          logoAlt="abstract social network logo dark"
          button={{
            text: "Join Paradigm",            href: "#contact"
          }}
        />
      </div>
      <div id="home" data-section="home">
        <HeroSplit
          title="Project Paradigm: Reclaim Your Digital Self."
          description="Experience social media reborn. Unrivaled customization, military-grade privacy, and a vibrant community. This is your digital home, secured and expressed by you."
          background={{
            variant: "animated-grid"
          }}
          buttons={[
            { text: "Join the Paradigm Shift", href: "#contact" },
            { text: "Explore Features", href: "#features" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/medium-shot-woman-posing-with-smartphone_23-2149424938.jpg"
          imageAlt="futuristic social media profile custom UI"
          mediaAnimation="slide-up"
          imagePosition="right"
          fixedMediaHeight={true}
          useInvertedBackground={false}
        />
      </div>
      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "A New Era of Social Connection." }
          ]}
          buttons={[
            { text: "Our Vision", href: "#" },
            { text: "Privacy First", href: "#" }
          ]}
          useInvertedBackground={true}
        />
      </div>
      <div id="features" data-section="features">
        <FeatureCardNine
          features={[
            {
              title: "Multimedia & Live Engine",              description: "High-res feeds, viral Reels, and low-latency live streaming. Share your world, uncensored, uncompressed, with interactive features and real-time chat.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/woman-clicking-photo-croissant-from-mobile-phone_1170-738.jpg",                imageAlt: "social media feed mobile app"
              },
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/man-firing-range-training-with-rifle-wearing-earmuffs-protect-hearing_482257-118591.jpg",                imageAlt: "live streaming app interface chat"
              }
            },
            {
              title: "Fortified Privacy & The Vault",              description: "Zero-knowledge E2EE messaging, anti-interference architecture, and The Vault for anonymous, encrypted file storage. Your data, your rules, always.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/content-specialist-selects-best-pictures-social-media-while-listening-music_482257-121868.jpg",                imageAlt: "virtual meeting room social app"
              },
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/cropped-hands-scanning-fingerprint-smartphone_1098-18942.jpg",                imageAlt: "encrypted private chat app UI"
              }
            },
            {
              title: "MySpace Evolved Customization",              description: "Unleash your creativity with custom HTML/CSS profiles, background music, secret easter eggs, and interactive guestbooks. Your profile, your digital sanctuary.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-psd/modern-web-talks-instagram-stories-template_23-2148782680.jpg",                imageAlt: "customizable social media profile code"
              },
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-data-protection-concept_23-2152004114.jpg",                imageAlt: "encrypted private file storage app"
              }
            }
          ]}
          showStepNumbers={true}
          title="Unleash Your Digital Identity with Paradigm"
          description="Beyond the superficial, Project Paradigm offers a suite of tools for deep expression, secure communication, and absolute creative freedom."
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="customization" data-section="customization">
        <ProductCardFour
          products={[
            {
              id: "1",              name: "Animated Profile Themes",              price: "Free / Premium",              variant: "Visual Identity",              imageSrc: "http://img.b2bpic.net/free-photo/ai-generated-concept-human_23-2150688377.jpg",              imageAlt: "cyberpunk profile theme social media"
            },
            {
              id: "2",              name: "Interactive Guestbooks",              price: "Free",              variant: "Social Engagement",              imageSrc: "http://img.b2bpic.net/free-photo/social-media-concept-with-elements_23-2149019257.jpg",              imageAlt: "digital stickers social app guestbook"
            },
            {
              id: "3",              name: "Hidden Profile Secrets",              price: "Free",              variant: "Discovery & Fun",              imageSrc: "http://img.b2bpic.net/free-photo/3d-character-emerging-from-smartphone_23-2151336707.jpg",              imageAlt: "hidden profile secrets social media"
            },
            {
              id: "4",              name: "Custom Profile Music",              price: "Free",              variant: "Ambiance Control",              imageSrc: "http://img.b2bpic.net/free-photo/listen-music-entertain-melody-harmony_53876-21338.jpg",              imageAlt: "custom profile music social media"
            },
            {
              id: "5",              name: "Personalized Mouse Cursors",              price: "Free / Premium",              variant: "Micro-Customization",              imageSrc: "http://img.b2bpic.net/free-photo/skull-bones-from-sugar-cup-coffee-black-background-flat-lay_169016-24653.jpg",              imageAlt: "custom mouse cursors social media"
            },
            {
              id: "6",              name: "Dynamic Virtual Stage Backdrops",              price: "Free / Premium",              variant: "Live Experience",              imageSrc: "http://img.b2bpic.net/free-photo/computer-with-modern-hardware-monitor-virtual-reality-glasses_482257-112446.jpg",              imageAlt: "customizable virtual stage background"
            }
          ]}
          carouselMode="buttons"
          gridVariant="bento-grid"
          animationType="slide-up"
          title="Deep Customization: Your Digital Canvas"
          description="Go beyond basic profiles. Project Paradigm gives you the power to craft a truly unique digital identity with tools reminiscent of MySpace, but with modern power."
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="monetization" data-section="monetization">
        <PricingCardFive
          plans={[
            {
              id: "free",              tag: "Standard",              tagIcon: Sparkles,
              price: "$0",              period: "Forever",              description: "Full access to core features: E2EE messaging, customizable profiles, feeds, Reels, and The Vault. No ads, no data-mining.",              button: { text: "Start Free", href: "#" },
              featuresTitle: "Includes:",              features: [
                "Zero-Knowledge E2EE",                "Unlimited Media Sharing",                "Custom HTML/CSS Profiles",                "Interactive Guestbooks",                "The Vault Basic Storage",                "Access to Guilds & Groups"
              ]
            },
            {
              id: "premium",              tag: "Paradigm Pro",              tagIcon: Zap,
              price: "$9.99",              period: "/month",              description: "Unlock enhanced customization, premium assets, advanced live streaming tools, and expanded Vault storage.",              button: { text: "Go Pro", href: "#" },
              featuresTitle: "All Standard Features, Plus:",              features: [
                "Exclusive Profile Themes & Cursors",                "Advanced Live Stream Overlays",                "Expanded Vault Storage (1TB)",                "Premium Emotes & Stickers",                "Enhanced Co-Hosting for Rooms",                "Priority Support"
              ]
            },
            {
              id: "creator",              tag: "Creator Elite",              tagIcon: Award,
              price: "$19.99",              period: "/month",              description: "Designed for power users and content creators seeking maximum control, monetization, and advanced features.",              button: { text: "Become Elite", href: "#" },
              featuresTitle: "All Pro Features, Plus:",              features: [
                "Dedicated Live Stream Channels",                "Direct Tipping & Monetization Tools",                "Collaborative Profile Assets Studio",                "Advanced Analytics for Content",                "Priority Feature Access",                "Personalized Onboarding"
              ]
            }
          ]}
          animationType="slide-up"
          title="Monetization: Fueling Freedom, Not Data Mining"
          description="Our revenue comes from premium features and direct support, never from selling your data or serving targeted ads. Your privacy is our priority."
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="\"Project Paradigm isn't just a social network; it's a statement. Finally, a platform that puts users first, with privacy that actually means something. The customization tools are insane, I feel like I'm building my own digital universe again!\""
          rating={5}
          author="CypherPunk_Advocate"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/user-sign-icon-front-side_187299-47522.jpg", alt: "futuristic digital avatar portrait" },
            { src: "http://img.b2bpic.net/free-photo/register-sign-up-membership-concept_53876-121221.jpg", alt: "professional tech avatar trust" },
            { src: "http://img.b2bpic.net/free-photo/portrait-person-with-nature-elements_23-2150165626.jpg", alt: "creative digital artist avatar" },
            { src: "http://img.b2bpic.net/free-vector/programmers-concept-with-flat-design_23-2147856745.jpg", alt: "tech developer avatar coding" }
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>
      <div id="team" data-section="team">
        <TeamCardOne
          members={[
            {
              id: "1",              name: "Dr. Nova Thorne",              role: "Visionary & Lead Architect",              imageSrc: "http://img.b2bpic.net/free-photo/blond-man-with-virtual-glasses-surprised-expression_1194-2917.jpg",              imageAlt: "cypherpunk founder portrait leader"
            },
            {
              id: "2",              name: "Jax 'Cypher' Kael",              role: "Chief Cryptography Officer",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-festive-plump-male-eyeglasses-bow-tie-dark-grey-background_613910-13747.jpg",              imageAlt: "lead cryptographer portrait security expert"
            },
            {
              id: "3",              name: "Elara 'Pixel' Vain",              role: "Head of UI/UX & Customization",              imageSrc: "http://img.b2bpic.net/free-photo/black-creative-person-holding-smartphone-pictures-art-drawing-studio-space-home-african-american-young-artist-using-digital-technology-modern-masterpiece-project_482257-28633.jpg",              imageAlt: "UI UX designer portrait creative"
            },
            {
              id: "4",              name: "Kaito 'Solid' Ren",              role: "Lead Backend Engineer",              imageSrc: "http://img.b2bpic.net/free-photo/server-farm-it-professional-looks-data-analysis-graph_482257-125094.jpg",              imageAlt: "backend engineer portrait reliable"
            },
            {
              id: "5",              name: "Zara 'Connect' Khan",              role: "Community & Engagement Lead",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-call-center-manager-providing-guidance-intern-addressing-questions_482257-125804.jpg",              imageAlt: "community manager portrait engaging"
            },
            {
              id: "6",              name: "Anya 'Shield' Volkov",              role: "Legal & Privacy Advisor",              imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-businessman-feeling-sad-while-looking-photo-picture-frame-work_637285-1036.jpg",              imageAlt: "privacy legal advisor data protection"
            }
          ]}
          carouselMode="buttons"
          gridVariant="uniform-all-items-equal"
          animationType="depth-3d"
          title="The Architects of Paradigm"
          description="A collective of cypherpunk rebels, privacy advocates, and visionary designers united by a mission to redefine social media."
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="faq" data-section="faq">
        <FaqBase
          faqs={[
            {
              id: "1",              title: "What makes Project Paradigm truly secure?",              content: "Project Paradigm utilizes a multi-layered security architecture, including end-to-end encryption (E2EE) for all private communications and files, zero-knowledge protocols, robust metadata scrubbing, and optional decentralized storage. We are built to be immune to state-sponsored spying and third-party data harvesting."
            },
            {
              id: "2",              title: "How does customization work with HTML/CSS injection?",              content: "Our platform features a sandboxed HTML/CSS engine, allowing users to inject custom code directly onto their profiles safely. This environment prevents Cross-Site Scripting (XSS) attacks while offering unprecedented creative freedom. You can design your profile exactly as you imagine it, with custom themes, music, and interactive elements."
            },
            {
              id: "3",              title: "Is my data truly private and not sold?",              content: "Absolutely. Our core philosophy is anti-corporate. We explicitly state that we do not engage in data-mining, sell user data, or rely on targeted advertising. Our monetization strategy is transparent, focusing on premium customization assets, a marketplace for user-created themes, and micro-transactions like tipping, ensuring your data remains yours."
            },
            {
              id: "4",              title: "What is 'The Vault'?",              content: "'The Vault' is a built-in, completely private media and file downloader. It allows users to download and store any type of media (videos, audio, large zip files) directly into an encrypted, password/biometric-protected folder within the app. Files stored in The Vault are invisible to your device's native OS file manager."
            },
            {
              id: "5",              title: "Can I hide secrets on my profile?",              content: "Yes! We encourage users to treat their profile as a digital home. You can embed hidden clickable elements, password-protected profile tabs, Easter egg animations, or secret messages for specific friends. This fosters deep exploration and interaction, making your profile a unique journey for visitors."
            }
          ]}
          title="Your Questions, Answered."
          description="Dive deeper into Project Paradigm's core principles and functionalities. Transparency is key to trust."
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Connect"
          title="Join the Paradigm Shift."
          description="Be part of a social media revolution. Secure your spot and receive updates on Project Paradigm's launch and exclusive features."
          background={{
            variant: "downward-rays-animated-grid"
          }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/teamworking-it-experts-adjusting-server-room-configurations-with-mockup-laptop_482257-120111.jpg"
          imageAlt="secure digital communication hub"
          mediaAnimation="slide-up"
          mediaPosition="left"
          inputPlaceholder="Enter your encrypted email"
          buttonText="Secure Your Invite"
          termsText="By clicking 'Secure Your Invite' you're confirming that you agree with our Terms of Service and Privacy Policy."
          onSubmit={(email) => console.log(email)}
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterCard
          logoSrc="http://img.b2bpic.net/free-photo/layers-circular-black-background_23-2148629490.jpg"
          logoAlt="abstract social media logo dark minimal"
          logoText="Project Paradigm"
          copyrightText="© 2024 Project Paradigm. All rights reserved."
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
            { icon: Mail, href: "mailto:info@projectparadigm.com", ariaLabel: "Email" }
          ]}
          useInvertedBackground={true}
        />
      </div>
    </ThemeProvider>
  );
}
