"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBase from '@/components/sections/footer/FooterBase';
import { FileText, Search, Users, Settings, Sparkles, TrendingUp, Star, Hexagon, House, MessageSquareText, CircleDollarSign, ArrowLeftRight, Send } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="aurora"
      cardStyle="soft-shadow"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          navItems={[
            { name: "Hero", id: "hero-section" },
            { name: "Features", id: "features-section" },
            { name: "Features", id: "features-section-2" },
            { name: "Features", id: "features-section-3" },
            { name: "Metrics", id: "metrics-section" },
            { name: "Testimonials", id: "testimonials-section" },
            { name: "Pricing", id: "pricing-section" },
            { name: "Contact", id: "contact-section" }
          ]}
          brandName="Webild"
        />
      </div>

      <div id="hero-section" data-section="hero-section">
        <HeroBillboardDashboard
          background={{ variant: "radial-gradient" }}
          tag="Trusted by 10,000+ Professionals"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          title="Transform Your Workflow with AI-Powered Note-Taking"
          description="Intelligent organization, seamless collaboration, and powerful insights—all in one clean, intuitive platform designed for the modern professional."
          buttons={[
            { text: "Start Free Trial", href: "#pricing-section" },
            { text: "Watch Demo", href: "#features-section" }
          ]}
          buttonAnimation="slide-up"
          dashboard={{
            title: "Smart Notes at Your Fingertips",            stats: [
              { title: "Notes Created", values: [2300000, 2400000, 2500000], valuePrefix: "", valueSuffix: "+", description: "Total notes" },
              { title: "AI Insights", values: [10000000, 10500000, 11000000], valuePrefix: "", valueSuffix: "+", description: "Generated insights" },
              { title: "Team Members", values: [50000, 52000, 54000], valuePrefix: "", valueSuffix: "+", description: "Active users" }
            ],
            logoIcon: Sparkles,
            sidebarItems: [
              { icon: FileText, active: true },
              { icon: Search },
              { icon: Users },
              { icon: Settings }
            ],
            buttons: [{ text: "New Note", href: "#" }],
            listItems: [
              { icon: CircleDollarSign, title: "Project Brainstorming", status: "Today" },
              { icon: ArrowLeftRight, title: "Client Meeting Notes", status: "Yesterday" },
              { icon: Send, title: "Research Summary", status: "2 days ago" }
            ],
            imageSrc: "https://img.b2bpic.net/free-photo/female-african-american-young-entrepreneur-looking-revenue-statistics-data-laptop-screen-accountant-analyzing-diagrams-computer-home-office-remote-bookkeeping-service_482257-48386.jpg",            searchPlaceholder: "Search your notes...",            chartTitle: "Weekly Activity",            chartData: [
              { value: 40 },
              { value: 30 },
              { value: 50 },
              { value: 60 },
              { value: 70 }
            ],
            listTitle: "Recent Notes",            imageAlt: "Dashboard preview showing organized notes and AI insights"
          }}
        />
      </div>

      <div id="features-section" data-section="features-section">
        <FeatureCardTwentyOne
          title="Smart Note-Taking Powered by AI"
          description="Transform your workflow with intelligent note organization, automatic summarization, and seamless cross-platform sync. Our AI-powered tools help you capture, categorize, and retrieve information faster than ever before."
          tag="AI Enhanced"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "See Demo", href: "#features-section-2" },
            { text: "Learn More", href: "#pricing-section" }
          ]}
          buttonAnimation="slide-up"
          accordionItems={[
            {
              id: "feature-1",              title: "Intelligent Organization",              content: "Our AI automatically categorizes and tags your notes based on content, helping you find what you need instantly without manual sorting."
            },
            {
              id: "feature-2",              title: "Real-Time Collaboration",              content: "Work seamlessly with your team in real-time, with smart suggestions and automated conflict resolution ensuring everyone stays aligned."
            },
            {
              id: "feature-3",              title: "Cross-Platform Sync",              content: "Access your notes anywhere with instant synchronization across all devices, keeping your information always up-to-date and secure."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/empty-startup-office-with-pc-desk-be-used-by-programmers_482257-125560.jpg"
          imageAlt="Dashboard showing AI-powered note organization interface"
          mediaAnimation="slide-up"
          useInvertedBackground={true}
          mediaPosition="left"
        />
      </div>

      <div id="features-section-2" data-section="features-section-2">
        <FeatureCardSixteen
          negativeCard={{
            items: [
              "Manual note organization",              "Time-consuming search processes",              "Fragmented information storage",              "Overcomplicated workflows"
            ]
          }}
          positiveCard={{
            items: [
              "AI-powered smart categorization",              "Instant search across all notes",              "Seamless cross-device sync",              "Intuitive drag-and-drop interface"
            ]
          }}
          animationType="slide-up"
          title="Revolutionize Your Note-Taking Workflow"
          description="Experience the future of productivity with our AI-enhanced note-taking platform designed specifically for professionals who demand efficiency and clarity."
          textboxLayout="split-description"
          useInvertedBackground={false}
          tag="AI-Powered"
          tagIcon={Sparkles}
          tagAnimation="blur-reveal"
          buttons={[
            { text: "Start Free Trial", href: "#pricing-section" },
            { text: "View Demo", href: "#hero-section" }
          ]}
          buttonAnimation="opacity"
        />
      </div>

      <div id="features-section-3" data-section="features-section-3">
        <FeatureCardTwentyThree
          features={[
            {
              id: "feature-1",              title: "Smart Note Organization",              tags: ["AI-Powered", "Auto-Categorization"],
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-person-working-alternative-energy_23-2149311496.jpg",              imageAlt: "AI-powered note organization interface"
            },
            {
              id: "feature-2",              title: "Real-Time Collaboration",              tags: ["Team Sync", "Instant Updates"],
              imageSrc: "https://img.b2bpic.net/free-photo/index-finger-pressing-shiny-button_1232-200.jpg",              imageAlt: "Collaborative workspace with multiple users"
            },
            {
              id: "feature-3",              title: "Voice-to-Text Transcription",              tags: ["Speech Recognition", "Hands-Free Input"],
              imageSrc: "https://img.b2bpic.net/free-photo/successful-business-people-city_53876-25179.jpg",              imageAlt: "Voice input interface converting speech to text"
            }
          ]}
          animationType="slide-up"
          title="Powerful Features for Modern Professionals"
          description="Our AI-driven note-taking platform combines intelligent automation with intuitive design to help you capture, organize, and retrieve information faster than ever before."
          textboxLayout="split"
          useInvertedBackground={false}
          tag="INTELLIGENT PRODUCTIVITY"
          tagIcon={Sparkles}
          tagAnimation="blur-reveal"
          buttons={[
            { text: "Explore Features", href: "#features-section-2" },
            { text: "See Demo", href: "#hero-section" }
          ]}
          buttonAnimation="opacity"
          carouselMode="buttons"
        />
      </div>

      <div id="metrics-section" data-section="metrics-section">
        <MetricCardTen
          title="Trusted by Professionals Worldwide"
          description="See how our AI-powered note-taking solution transforms productivity across industries."
          tag="Productivity Metrics"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "metric-1",              title: "Time Saved",              subtitle: "Per week",              category: "Efficiency",              value: "4.2 hrs"
            },
            {
              id: "metric-2",              title: "Notes Organized",              subtitle: "Monthly average",              category: "Organization",              value: "1,842"
            },
            {
              id: "metric-3",              title: "Accuracy Rate",              subtitle: "AI-powered insights",              category: "Intelligence",              value: "97%"
            },
            {
              id: "metric-4",              title: "User Satisfaction",              subtitle: "Based on reviews",              category: "Experience",              value: "4.9/5"
            }
          ]}
          carouselMode="buttons"
          animationType="slide-up"
          textboxLayout="centered"
          useInvertedBackground={true}
          buttons={[
            { text: "View Case Studies", href: "#testimonials-section" }
          ]}
          buttonAnimation="opacity"
        />
      </div>

      <div id="testimonials-section" data-section="testimonials-section">
        <TestimonialCardSixteen
          testimonials={[
            {
              id: "testimonial-1",              name: "Sarah Chen",              role: "Product Manager",              company: "TechFlow Inc.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-happy-businessman-with-tablet-pc_1262-1044.jpg",              imageAlt: "Sarah Chen, Product Manager at TechFlow Inc."
            },
            {
              id: "testimonial-2",              name: "Michael Rodriguez",              role: "Data Analyst",              company: "Insight Analytics",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-person-working-alternative-energy_23-2149311496.jpg",              imageAlt: "Michael Rodriguez, Data Analyst at Insight Analytics"
            },
            {
              id: "testimonial-3",              name: "Elena Petrov",              role: "Marketing Director",              company: "BrandVision Ltd.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/girl-sits-front-computer-with-notepads-books-top-view_169016-49314.jpg",              imageAlt: "Elena Petrov, Marketing Director at BrandVision Ltd."
            }
          ]}
          kpiItems={[
            { value: "85%", label: "Increase in productivity" },
            { value: "99%", label: "Accuracy rate" },
            { value: "2x", label: "Faster note organization" }
          ]}
          animationType="slide-up"
          title="Trusted by Industry Leaders"
          description="Join thousands of professionals who have transformed their workflow with our AI-powered note-taking solution. Experience seamless integration and intelligent insights that elevate your productivity."
          tag="Trusted by 10,000+ professionals"
          tagIcon={Sparkles}
          tagAnimation="blur-reveal"
          buttons={[
            { text: "See how it works", href: "#features-section" }
          ]}
          buttonAnimation="opacity"
          textboxLayout="default"
          useInvertedBackground={true}
          carouselMode="buttons"
          uniformGridCustomHeightClasses="min-h-95 2xl:min-h-105"
        />
      </div>

      <div id="pricing-section" data-section="pricing-section">
        <PricingCardThree
          title="Simple, transparent pricing"
          description="Choose the plan that fits your team's needs. All plans include our core AI-powered note-taking features."
          tag="Most popular"
          tagIcon={Star}
          tagAnimation="slide-up"
          textboxLayout="inline-image"
          animationType="slide-up"
          useInvertedBackground={false}
          plans={[
            {
              id: "starter",              name: "Starter",              price: "$9",              features: [
                "Up to 5 users",                "Basic AI note suggestions",                "10GB storage",                "Email support"
              ],
              buttons: [
                { text: "Get Started", href: "#" }
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Star,
              name: "Professional",              price: "$29",              features: [
                "Up to 20 users",                "Advanced AI note generation",                "100GB storage",                "Priority support",                "Team collaboration tools"
              ],
              buttons: [
                { text: "Start Free Trial", href: "#" }
              ]
            },
            {
              id: "enterprise",              name: "Enterprise",              price: "$99",              features: [
                "Unlimited users",                "Custom AI models",                "1TB storage",                "24/7 dedicated support",                "Single sign-on (SSO)",                "Advanced analytics"
              ],
              buttons: [
                { text: "Contact Sales", href: "#contact-section" }
              ]
            }
          ]
        />
      </div>

      <div id="contact-section" data-section="contact-section">
        <ContactSplitForm
          title="Get Started with AI-Powered Note-Taking"
          description="Ready to transform your workflow? Our team is here to help you integrate powerful AI tools into your daily routine. Fill out the form and we'll get back to you within 24 hours."
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Full Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "Business Email",              required: true
            },
            {
              name: "company",              type: "text",              placeholder: "Company Name",              required: false
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your productivity goals...",            rows: 4,
            required: true
          }}
          useInvertedBackground={false}
          imageSrc="https://img.b2bpic.net/free-vector/web-contact-form-template_23-2147608998.jpg"
          imageAlt="Professional team collaborating on digital devices"
          mediaAnimation="slide-up"
          mediaPosition="left"
          buttonText="Start Your Free Trial"
        />
      </div>

      <div id="footer-section" data-section="footer-section">
        <FooterBase
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features-section" },
                { label: "Pricing", href: "#pricing-section" },
                { label: "Integrations", href: "#features-section-2" },
                { label: "Roadmap", href: "#features-section-3" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#hero-section" },
                { label: "Blog", href: "#testimonials-section" },
                { label: "Support", href: "#contact-section" },
                { label: "API Status", href: "#metrics-section" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#hero-section" },
                { label: "Careers", href: "#features-section-3" },
                { label: "Contact", href: "#contact-section" },
                { label: "Partners", href: "#testimonials-section" }
              ]
            }
          ]}
          logoText="NoteAI Pro"
          copyrightText="© 2025 NoteAI Pro. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}