"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactText from '@/components/sections/contact/ContactText';
import FooterMedia from '@/components/sections/footer/FooterMedia';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="compact"
      sizing="medium"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="NeuroFlow"
          navItems={[
            { name: "Features", id: "features" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{ text: "Get Started", href: "#contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="The Future of Intelligence is Here"
          description="NeuroFlow brings artificial intelligence to your business. Automate complex workflows, gain real-time insights, and scale faster than ever before."
          avatars={[
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQzdMtWFmn601aAgylaTaNjIAw/a-professional-portrait-photo-of-a-confi-1772539736556-ea98a39c.png", alt: "Team member 1" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQzdMtWFmn601aAgylaTaNjIAw/a-professional-portrait-photo-of-a-tech--1772539736862-5da2a191.png", alt: "Team member 2" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQzdMtWFmn601aAgylaTaNjIAw/a-professional-portrait-photo-of-a-busin-1772539739713-8e4124ea.png", alt: "Team member 3" }
          ]}
          avatarText="Trusted by 500+ companies worldwide"
          buttons={[
            { text: "Start Free Trial", href: "#contact" },
            { text: "Watch Demo", href: "https://www.youtube.com" }
          ]}
          background={{ variant: "plain" }}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSixteen
          title="Why Choose NeuroFlow"
          description="See how we outperform traditional automation platforms"
          tag="Competitive Advantage"
          negativeCard={{ items: ["Manual data processing", "Limited scalability", "High operational costs", "Slow decision-making", "Complex integrations"] }}
          positiveCard={{ items: ["Intelligent automation", "Unlimited scalability", "Cost-efficient operations", "Real-time insights", "Seamless integration"] }}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Our Mission"
          title="Empowering Businesses with Intelligent AI"
          description="NeuroFlow was built to simplify AI implementation for businesses of all sizes. We believe that advanced technology should be accessible, affordable, and easy to use. Our platform combines cutting-edge machine learning with an intuitive interface to deliver results from day one."
          metrics={[
            { value: "10x", title: "Faster Processing" },
            { value: "99.9%", title: "Uptime Guarantee" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQzdMtWFmn601aAgylaTaNjIAw/a-sophisticated-illustration-showing-inn-1772539737633-d4aaf2fe.png"
          imageAlt="Innovation and AI advancement"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="product" data-section="product">
        <ProductCardFour
          title="Core Features"
          description="Everything you need to transform your business with AI"
          tag="Powerful Tools"
          products={[
            {
              id: "1",              name: "Intelligent Automation",              price: "From $299/mo",              variant: "Automate any workflow",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQzdMtWFmn601aAgylaTaNjIAw/an-illustration-showing-automated-workfl-1772539737075-49b96368.png",              imageAlt: "Automation workflow"
            },
            {
              id: "2",              name: "Advanced Analytics",              price: "From $499/mo",              variant: "Real-time insights",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQzdMtWFmn601aAgylaTaNjIAw/a-modern-data-analytics-visualization-sh-1772539737563-208832ac.png",              imageAlt: "Data analytics dashboard"
            },
            {
              id: "3",              name: "Seamless Integration",              price: "From $199/mo",              variant: "Connect any system",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQzdMtWFmn601aAgylaTaNjIAw/an-illustration-of-seamless-integration--1772539737108-3e190718.png",              imageAlt: "System integration"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Customers Say"
          description="Real stories from real businesses using NeuroFlow"
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              role: "VP of Operations",              company: "TechVision Inc",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQzdMtWFmn601aAgylaTaNjIAw/a-professional-portrait-photo-of-a-confi-1772539736556-ea98a39c.png",              imageAlt: "Sarah Chen"
            },
            {
              id: "2",              name: "Marcus Johnson",              role: "CEO",              company: "DataFlow Systems",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQzdMtWFmn601aAgylaTaNjIAw/a-professional-portrait-photo-of-a-tech--1772539736862-5da2a191.png",              imageAlt: "Marcus Johnson"
            },
            {
              id: "3",              name: "Elena Rodriguez",              role: "Product Lead",              company: "CloudInnovate",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQzdMtWFmn601aAgylaTaNjIAw/a-professional-portrait-photo-of-a-busin-1772539739713-8e4124ea.png",              imageAlt: "Elena Rodriguez"
            },
            {
              id: "4",              name: "David Liu",              role: "Founder",              company: "Future Analytics",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQzdMtWFmn601aAgylaTaNjIAw/a-professional-portrait-photo-of-an-inno-1772539736907-6e2e287f.png",              imageAlt: "David Liu"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Everything you need to know about NeuroFlow"
          tag="Help & Support"
          faqs={[
            {
              id: "1",              title: "How does NeuroFlow integrate with my existing systems?",              content: "NeuroFlow offers seamless integration with 500+ popular business applications including Salesforce, HubSpot, Zapier, and custom APIs. Our integration team can set up your connections in minutes, with full documentation and support."
            },
            {
              id: "2",              title: "What is the typical implementation timeline?",              content: "Most businesses are up and running within 24-48 hours. Our onboarding process is streamlined and includes dedicated support. For enterprise deployments, we offer customized timelines based on your specific requirements."
            },
            {
              id: "3",              title: "Is my data secure with NeuroFlow?",              content: "Absolutely. We use enterprise-grade encryption, regular security audits, and comply with SOC 2 Type II, GDPR, and HIPAA standards. Your data is always encrypted in transit and at rest."
            },
            {
              id: "4",              title: "Can I scale NeuroFlow as my business grows?",              content: "Yes, NeuroFlow is built to scale. From startups to enterprises, our infrastructure handles unlimited workflows and data volumes without performance degradation."
            },
            {
              id: "5",              title: "What kind of support do you offer?",              content: "We provide 24/7 email support, live chat, and phone support for premium plans. We also offer dedicated account managers for enterprise customers and comprehensive documentation."
            },
            {
              id: "6",              title: "Do you offer a free trial?",              content: "Yes! We offer a 14-day free trial with full access to all features. No credit card required. You can test NeuroFlow with your own workflows and data."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to Transform Your Business? Join hundreds of companies using NeuroFlow to automate, optimize, and innovate faster than ever before."
          animationType="entrance-slide"
          buttons={[
            { text: "Start Your Journey", href: "#" },
            { text: "Schedule a Demo", href: "#" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQzdMtWFmn601aAgylaTaNjIAw/a-minimalist-inspirational-graphic-about-1772539736893-a168629d.png"
          imageAlt="NeuroFlow innovation"
          logoText="NeuroFlow"
          copyrightText="© 2025 NeuroFlow. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#" },
                { label: "Security", href: "#" },
                { label: "Roadmap", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Status", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}