"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Sparkles, CheckCircle, TrendingUp, Star, HelpCircle, ArrowRight, Home, CheckSquare, Calendar, Settings, Clock, Music, Palette, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="noise"
      cardStyle="subtle-shadow"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Energy"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Use Cases", id: "metrics" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" },
          ]}
          button={{ text: "Get Started", href: "#contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Your Creative Workflow, Perfectly Organized"
          description="Energy combines task management and calendar scheduling in one intuitive platform built for artists, designers, musicians, and content creators."
          tag="Creative Productivity"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Start Free Trial", href: "#contact" },
            { text: "View Demo", href: "#features" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "noise" }}
          dashboard={{
            title: "Energy Dashboard",            logoIcon: Zap,
            imageSrc: "http://img.b2bpic.net/free-vector/fitness-mobile-app-infographic-template-flat-style_23-2148219822.jpg",            searchPlaceholder: "Search tasks & events",            buttons: [
              { text: "Dashboard", href: "#" },
              { text: "Export", href: "#" },
            ],
            sidebarItems: [
              { icon: Home, active: true },
              { icon: CheckSquare, active: false },
              { icon: Calendar, active: false },
              { icon: Settings, active: false },
            ],
            stats: [
              {
                title: "Active Tasks",                values: [24, 32, 28],
                description: "This week"},
              {
                title: "Completed",                values: [156, 189, 212],
                valuePrefix: "",                valueSuffix: "%",                description: "This month"},
              {
                title: "Projects",                values: [8, 12, 10],
                description: "In progress"},
            ],
            chartTitle: "Task Completion Trend",            chartData: [
              { value: 45 },
              { value: 65 },
              { value: 50 },
              { value: 75 },
              { value: 85 },
            ],
            listTitle: "Upcoming Deadlines",            listItems: [
              {
                icon: Clock,
                title: "Design Sprint Review",                status: "Due Tomorrow"},
              {
                icon: Music,
                title: "Album Artwork Finalization",                status: "Due in 2 days"},
              {
                icon: Palette,
                title: "Client Presentation",                status: "Due in 1 week"},
            ],
          }}
          ariaLabel="Energy creative productivity dashboard hero"
          containerClassName="w-full"
          titleClassName="text-4xl md:text-5xl font-bold"
          descriptionClassName="text-lg text-foreground opacity-90"
          dashboardClassName="mt-12 w-full"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSixteen
          title="Energy vs Traditional Todo Apps"
          description="See how Energy revolutionizes creative task management with integrated scheduling and collaboration features."
          tag="Why Choose Energy"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          negativeCard={{
            items: [
              "Fragmented workflow across multiple apps",              "No calendar integration for deadline planning",              "Limited collaboration features",              "Generic templates not suited for creatives",              "Manual task updates required"],
          }}
          positiveCard={{
            items: [
              "Unified dashboard for tasks and calendar",              "Smart deadline visualization and planning",              "Built-in team collaboration tools",              "Creative-focused templates and workflows",              "Real-time synchronization across devices"],
          }}
          ariaLabel="Feature comparison section"
          containerClassName="w-full"
          titleClassName="text-3xl md:text-4xl font-bold"
          descriptionClassName="text-foreground opacity-80"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Energy by the Numbers"
          description="Join thousands of creative professionals already using Energy to transform their workflow."
          tag="Impact"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "50K+",              title: "Active Creators",              description: "Using Energy daily",              imageSrc: "http://img.b2bpic.net/free-photo/schedule-activity-calendar-appointment-concept_53876-122362.jpg",              imageAlt: "calendar planning schedule organization"},
            {
              id: "2",              value: "2.5M",              title: "Tasks Completed",              description: "This month alone",              imageSrc: "http://img.b2bpic.net/free-photo/list-notepad-urgent-sticky-note-checkered-notebook-with-smartphone-paperclip_23-2147923283.jpg",              imageAlt: "task checklist todo management"},
            {
              id: "3",              value: "98%",              title: "User Satisfaction",              description: "From active users",              imageSrc: "http://img.b2bpic.net/free-vector/startup-with-laptops_23-2147503513.jpg",              imageAlt: "integration tools workflow sync"},
          ]}
          ariaLabel="Metrics section"
          containerClassName="w-full"
          titleClassName="text-3xl md:text-4xl font-bold"
          descriptionClassName="text-foreground opacity-80"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Loved by Creative Professionals"
          description="Hear from designers, musicians, and content creators who've transformed their workflow with Energy."
          tag="Testimonials"
          tagIcon={Star}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              title: "Finally, a tool built for creators",              quote: "Energy has completely changed how I manage my design projects. The calendar integration means I never miss a deadline, and the task management is intuitive enough that I spend less time organizing and more time creating.",              name: "Sarah Chen",              role: "Graphic Designer & Art Director",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "professional headshot portrait avatar"},
            {
              id: "2",              title: "The collaboration features are game-changing",              quote: "As a music producer working with multiple artists and engineers, Energy's team features keep everyone aligned. The shared calendar view prevents scheduling conflicts, and comment threads keep feedback organized.",              name: "Marcus Williams",              role: "Music Producer",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-bearded-male-eyeglasses-dressed-elegant-wool-suit-grey-background_613910-15599.jpg?_wi=1",              imageAlt: "creative professional portrait headshot"},
            {
              id: "3",              title: "Reduced workflow friction by 70%",              quote: "I was juggling three different apps before Energy. Now everything is in one place, and the interface is so clean that my team adopted it without resistance. This is how creative tool design should be done.",              name: "Elena Rodriguez",              role: "Creative Director",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705918.jpg?_wi=1",              imageAlt: "designer portrait professional avatar"},
            {
              id: "4",              title: "Simple, powerful, and beautiful",              quote: "Energy respects my time and attention. It's not bloated with unnecessary features, but it has everything I need. The design itself is inspiring—using the app feels like a creative act.",              name: "James Liu",              role: "Illustration & Animation",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705918.jpg?_wi=2",              imageAlt: "artist headshot portrait professional"},
            {
              id: "5",              title: "The best investment for my creative business",              quote: "Energy has helped me take on more clients without feeling overwhelmed. The automation and templates save me hours every week, and I can focus on the actual creative work.",              name: "Amelia Foster",              role: "Freelance Illustrator",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-bearded-male-eyeglasses-dressed-elegant-wool-suit-grey-background_613910-15599.jpg?_wi=2",              imageAlt: "creative portrait professional headshot"},
            {
              id: "6",              title: "A breath of fresh air",              quote: "Most productivity tools feel corporate and generic. Energy gets it—it's designed by people who understand the creative process and the specific challenges we face. Every detail shows that care.",              name: "David Park",              role: "Content Creator & Filmmaker",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-bearded-male-eyeglasses-dressed-elegant-wool-suit-grey-background_613910-15599.jpg?_wi=3",              imageAlt: "professional portrait creative headshot"},
          ]}
          ariaLabel="Testimonials section"
          containerClassName="w-full"
          titleClassName="text-3xl md:text-4xl font-bold"
          descriptionClassName="text-foreground opacity-80"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Everything you need to know about Energy and how it can streamline your creative workflow."
          tag="Help"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          faqsAnimation="slide-up"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How does Energy integrate with my existing tools?",              content: "Energy seamlessly connects with popular creative tools like Figma, Adobe Suite, Slack, and Google Workspace. You can sync calendar events, receive notifications, and export data in multiple formats. We're constantly adding new integrations based on user feedback."},
            {
              id: "2",              title: "Can I collaborate with my team on Energy?",              content: "Yes, Energy has built-in collaboration features. You can share projects, assign tasks to team members, set permissions, and communicate through integrated comment threads. Real-time updates ensure everyone stays in sync regardless of timezone."},
            {
              id: "3",              title: "Is my data secure on Energy?",              content: "Security is our top priority. All data is encrypted in transit and at rest using industry-standard protocols. We comply with GDPR, CCPA, and SOC 2 standards. You have full control over your data and can export or delete it anytime."},
            {
              id: "4",              title: "What's included in the free plan?",              content: "The free plan includes task management for up to 10 projects, calendar sync, basic templates, and individual use. This is perfect for freelancers and solo creatives getting started. Upgrade anytime for team features and advanced analytics."},
            {
              id: "5",              title: "Can I customize Energy for my workflow?",              content: "Absolutely. Energy offers extensive customization including custom project templates, workflow automation, custom fields, and color coding. You can tailor the interface to match how you actually work, not force yourself into a predetermined system."},
            {
              id: "6",              title: "What if I need help getting started?",              content: "We offer comprehensive onboarding including video tutorials, interactive guides, and live chat support. Our community forums are active with tips and best practices from other creators. Premium plans include priority email support and monthly strategy calls."},
          ]}
          ariaLabel="FAQ section"
          containerClassName="w-full"
          titleClassName="text-3xl md:text-4xl font-bold"
          descriptionClassName="text-foreground opacity-80"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Transform Your Workflow?"
          tagIcon={ArrowRight}
          tagAnimation="slide-up"
          title="Start Your Energy Journey Today"
          description="Join thousands of creative professionals who've already transformed their productivity. Get started free, no credit card required."
          buttons={[
            { text: "Start Free Trial", href: "https://energy-app.com/signup" },
            { text: "Schedule Demo", href: "#" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          ariaLabel="Contact and call-to-action section"
          containerClassName="w-full"
          titleClassName="text-3xl md:text-4xl font-bold"
          descriptionClassName="text-foreground opacity-80"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#" },
                { label: "Security", href: "#" },
                { label: "Roadmap", href: "#" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" },
              ],
            },
            {
              title: "Resources",              items: [
                { label: "Help Center", href: "#" },
                { label: "Documentation", href: "#" },
                { label: "API Reference", href: "#" },
                { label: "Community", href: "#" },
              ],
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
              ],
            },
          ]}
          bottomLeftText="© 2025 Energy. All rights reserved."
          bottomRightText="Built for creatives, by creatives."
          ariaLabel="Site footer"
          containerClassName="w-full"
          bottomLeftTextClassName="text-sm text-foreground opacity-60"
          bottomRightTextClassName="text-sm text-foreground opacity-60"
        />
      </div>
    </ThemeProvider>
  );
}
