"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Sparkles, Zap, Palette, TrendingUp, BarChart3, Users, Star, Award, Mail, Quote } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="medium"
      sizing="large"
      background="blurBottom"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Emphera"
          navItems={[
            { name: "Product", id: "features" },
            { name: "Creators", id: "showcase" },
            { name: "Studios", id: "social-proof" },
            { name: "Pricing", id: "pricing" },
            { name: "Docs", id: "contact" },
          ]}
          bottomLeftText="Invite-Only Marketplace"
          bottomRightText="hello@emphera.io"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Where Elite Creators and Visionary Brands Meet"
          description="An invite-only marketplace curated for creative professionals. Showcase your work, measure your impact with advanced scoring, and connect with studios and brands who value craft at the highest level."
          tag="Premium Creative Network"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          imageSrc="http://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page_52683-69728.jpg"
          imageAlt="Emphera creative dashboard with portfolio showcase"
          buttons={[
            { text: "Explore Creators", href: "features" },
            { text: "View Demo", href: "#" },
          ]}
          buttonAnimation="slide-up"
          className="relative z-10"
          containerClassName="relative min-h-screen flex items-center justify-center overflow-hidden"
          textBoxClassName="max-w-2xl z-20 relative"
          titleClassName="text-5xl md:text-7xl font-bold text-foreground mb-6 leading-tight"
          descriptionClassName="text-lg md:text-xl text-gray-300 mb-8 max-w-xl"
          tagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-accent/30 bg-accent/5 mb-6"
          cardWrapperClassName="absolute inset-0 -z-10 opacity-40"
          cardInnerClassName="perspective-1000"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyFive
          title="The Emphera Advantage"
          description="Powerful tools built for the next generation of creative talent and discerning brands."
          tag="Core Features"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              title: "Creator Portfolios",              description: "Showcase your finest work with cinematic presentation tools designed for the modern creative economy.",              icon: Palette,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-vector/webtemplate-landing-page-simple-page_52683-30912.jpg", imageAlt: "Creator portfolio showcase" },
                { imageSrc: "http://img.b2bpic.net/free-photo/group-people-working-website-template_53876-30729.jpg", imageAlt: "Featured creative work" },
              ],
            },
            {
              title: "EVA Scoring System",              description: "Get evaluated by our proprietary algorithm that measures creative excellence, market relevance, and professional impact.",              icon: TrendingUp,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg", imageAlt: "EVA scoring dashboard" },
                { imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimal-business-card_23-2149277811.jpg", imageAlt: "Metrics visualization" },
              ],
            },
            {
              title: "CPI Insights",              description: "Detailed performance metrics that track engagement, reputation, and commercial viability in real-time.",              icon: BarChart3,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/technician-employs-ai-chatbot-pc-monitor-executing-programming-code_482257-120774.jpg", imageAlt: "CPI analytics overview" },
                { imageSrc: "http://img.b2bpic.net/free-photo/group-people-working-website-template_53876-30729.jpg", imageAlt: "Detailed performance data" },
              ],
            },
            {
              title: "Studios & Brand Collaboration",              description: "Direct access to vetted creative studios and world-class brands actively seeking top-tier talent for premium projects.",              icon: Users,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimal-business-card_23-2149277811.jpg", imageAlt: "Studio collaboration interface" },
                { imageSrc: "http://img.b2bpic.net/free-photo/technician-employs-ai-chatbot-pc-monitor-executing-programming-code_482257-120774.jpg", imageAlt: "Brand partnership opportunities" },
              ],
            },
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          containerClassName="py-24 px-6 md:px-12 relative z-10"
          gridClassName="grid grid-cols-1 md:grid-cols-2 gap-8 mt-16"
        />
      </div>

      <div id="showcase" data-section="showcase">
        <ProductCardThree
          title="Featured Creator Works"
          description="Curated selections from Emphera's most celebrated creative professionals. Experience the caliber of talent on the platform."
          tag="Showcase"
          tagIcon={Star}
          tagAnimation="slide-up"
          products={[
            {
              id: "proj-1",              name: "Identity Design System",              price: "Featured",              imageSrc: "http://img.b2bpic.net/free-photo/group-people-working-website-template_53876-30729.jpg",              imageAlt: "Comprehensive brand identity system",              initialQuantity: 1,
            },
            {
              id: "proj-2",              name: "Motion Graphics Campaign",              price: "Featured",              imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimal-business-card_23-2149277811.jpg",              imageAlt: "Dynamic motion graphics work",              initialQuantity: 1,
            },
            {
              id: "proj-3",              name: "Digital Experience Design",              price: "Featured",              imageSrc: "http://img.b2bpic.net/free-photo/technician-employs-ai-chatbot-pc-monitor-executing-programming-code_482257-120774.jpg",              imageAlt: "Innovative user experience design",              initialQuantity: 1,
            },
          ]}
          animationType="scale-rotate"
          gridVariant="three-columns-all-equal-width"
          textboxLayout="default"
          useInvertedBackground={true}
          containerClassName="py-24 px-6 md:px-12 relative z-10"
          cardClassName="group relative rounded-2xl overflow-hidden border border-accent/20 bg-card/50 backdrop-blur-md hover:border-accent/60 transition-all duration-300"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by Industry Pioneers"
          description="Leading creative studios and visionary brands partner with Emphera to discover and collaborate with the world's finest creative talent."
          tag="Our Partners"
          tagIcon={Award}
          tagAnimation="slide-up"
          names={[
            "Adobe Creative Suite",            "Figma Design Collective",            "Notion Workspace",            "Dribbble Community",            "Behance Global Network",            "Instagram Creative",            "Stripe Payment",            "Exceptional Studio"]}
          logos={[
            "http://img.b2bpic.net/free-vector/gradient-blue-violet-code-logo_52683-55261.jpg",            "http://img.b2bpic.net/free-vector/flat-design-science-landing-page_23-2149180328.jpg",            "http://img.b2bpic.net/free-vector/creative-computer-logo-template_23-2149217522.jpg",            "http://img.b2bpic.net/free-vector/hand-drawn-retro-landing-page_23-2149902050.jpg",            "http://img.b2bpic.net/free-psd/minimalist-landing-page-template_23-2148813648.jpg",            "http://img.b2bpic.net/free-vector/social-media-logo-collection_23-2148125840.jpg",            "http://img.b2bpic.net/free-vector/cyber-monday-shop_24908-58241.jpg"]}
          textboxLayout="default"
          useInvertedBackground={false}
          showCard={true}
          speed={35}
          containerClassName="py-24 px-6 md:px-12 relative z-10"
          contentClassName="mt-16 flex justify-center items-center gap-8 md:gap-12"
          logoCardClassName="group relative h-20 md:h-24 flex items-center justify-center rounded-xl border border-accent/20 bg-card/30 backdrop-blur-sm hover:border-accent/50 hover:bg-card/50 transition-all duration-300 px-6"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardNine
          title="Join the Circle"
          description="Select the Emphera tier that fits your creative ambitions. Scale your reach, grow your reputation, and unlock premium collaboration opportunities."
          tag="Pricing Plans"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          plans={[
            {
              id: "creator-base",              title: "Creator",              price: "Free",              period: "forever",              imageSrc: "http://img.b2bpic.net/free-vector/webtemplate-landing-page-simple-page_52683-30912.jpg",              imageAlt: "Creator tier benefits",              button: { text: "Get Started", href: "contact" },
              features: [
                "Portfolio showcase with EVA scoring",                "Basic analytics & insights",                "Community access",                "Invite-only marketplace browsing"],
            },
            {
              id: "creator-pro",              title: "Creator Pro",              price: "$29",              period: "/month",              imageSrc: "http://img.b2bpic.net/free-photo/group-people-working-website-template_53876-30729.jpg",              imageAlt: "Creator Pro advantages",              button: { text: "Upgrade Now", href: "contact" },
              features: [
                "All Creator features",                "Advanced CPI analytics",                "Priority in job matching",                "Direct studio partnerships",                "Premium collaboration tools"],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          containerClassName="py-24 px-6 md:px-12 relative z-10"
          cardClassName="group relative rounded-2xl overflow-hidden border border-accent/20 bg-gradient-to-br from-card/40 to-card/20 backdrop-blur-xl hover:border-accent/60 transition-all duration-500 hover:shadow-xl hover:shadow-accent/10"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="Stories From Our Community"
          description="Hear directly from the creators and studios who are redefining what's possible in the creative economy."
          tag="Testimonials"
          tagIcon={Quote}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "Maya Chen",              role: "Creative Director",              company: "Stellar Studios",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/dark-blonde-bearded-man-crosses-his-hands-chest-posing-black-shirt_8353-1116.jpg",              imageAlt: "Maya Chen"},
            {
              id: "2",              name: "Aarav Patel",              role: "Founder & Designer",              company: "Nexus Design Collective",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-bald-senior-dressed-stylish-suit-posing-against-dark-background_613910-17578.jpg",              imageAlt: "Aarav Patel"},
            {
              id: "3",              name: "Sofia Rodriguez",              role: "Chief Creative Officer",              company: "Aurora Brands",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705918.jpg",              imageAlt: "Sofia Rodriguez"},
            {
              id: "4",              name: "James Chen",              role: "Partner",              company: "Lumina Creative",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/dark-blonde-bearded-man-crosses-his-hands-chest-posing-black-shirt_8353-1116.jpg",              imageAlt: "James Chen"},
          ]}
          kpiItems={[
            { value: "5000+", label: "Active Creators" },
            { value: "1200+", label: "Successful Collaborations" },
            { value: "$50M+", label: "Total Project Value" },
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
          uniformGridCustomHeightClasses="min-h-96 2xl:min-h-full"
          containerClassName="py-24 px-6 md:px-12 relative z-10"
          cardClassName="group relative rounded-2xl overflow-hidden border border-accent/20 hover:border-accent/60 transition-all duration-300"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          title="Stay Connected to the Emphera Circle"
          description="Get exclusive updates on new opportunities, platform features, and success stories from our most celebrated creators. Your privacy matters—we never share your information."
          tagIcon={Mail}
          tagAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          inputPlaceholder="your@creative.email"
          buttonText="Join"
          termsText="We respect your privacy. Unsubscribe anytime. See our Privacy Policy."
          containerClassName="py-24 px-6 md:px-12 relative z-10"
          contentClassName="max-w-2xl mx-auto text-center"
          titleClassName="text-4xl md:text-5xl font-bold text-foreground mb-6"
          descriptionClassName="text-gray-400 text-lg mb-8 max-w-xl mx-auto"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "features" },
                { label: "Showcase", href: "showcase" },
                { label: "Pricing", href: "pricing" },
                { label: "Creators", href: "showcase" },
              ],
            },
            {
              title: "Community",              items: [
                { label: "Discord", href: "https://discord.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Success Stories", href: "testimonials" },
              ],
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Creator Agreement", href: "#" },
                { label: "Contact", href: "contact" },
              ],
            },
          ]}
          copyrightText="© 2025 Emphera. All rights reserved. Curated with precision for the creative elite."
          footerClassName="relative border-t border-accent/20 bg-gradient-to-b from-background to-background/80 backdrop-blur-sm"
          columnsClassName="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12"
          columnTitleClassName="text-sm font-semibold text-foreground uppercase tracking-wide mb-6"
          columnItemClassName="text-gray-400 hover:text-accent transition-colors duration-200"
        />
      </div>
    </ThemeProvider>
  );
}
