"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Zap, Target, Headphones, Lightbulb, Rocket, Twitter, Linkedin, Github, Mail } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="noise"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Hali"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Work", id: "work" },
            { name: "About", id: "about" },
            { name: "Insights", id: "insights" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Start Project", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          background={{ variant: "sparkles-gradient" }}
          title="AI-Powered Web Solutions for Modern Agencies"
          description="Transform your digital presence with cutting-edge web services. Hali combines artificial intelligence with expert design to create websites that convert, engage, and inspire."
          avatars={[
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ5aELL5CYzzp6dNRdiZW3Mqjk/professional-headshot-of-a-confident-bus-1772512109734-1081ad26.png",              alt: "Professional headshot of a confident business professional in modern office setting. Warm lighting, "
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ5aELL5CYzzp6dNRdiZW3Mqjk/diverse-professional-headshot-of-a-creat-1772512108691-02ecb883.png",              alt: "Diverse professional headshot of a creative tech worker smiling at camera. Modern office environment"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ5aELL5CYzzp6dNRdiZW3Mqjk/professional-photo-of-a-female-entrepren-1772512108957-d4fbb699.png",              alt: "Professional photo of a female entrepreneur in modern workspace. Natural lighting, confident pose, c"
            }
          ]}
          avatarText="Trusted by 200+ agencies worldwide"
          buttons={[
            { text: "Explore Our Services", href: "services" },
            { text: "View Case Studies", href: "work" }
          ]}
          buttonAnimation="slide-up"
          marqueeItems={[
            { type: "text-icon", text: "AI-Powered Design", icon: Sparkles },
            { type: "text-icon", text: "Lightning Fast Performance", icon: Zap },
            { type: "text-icon", text: "Conversion Optimized", icon: Target },
            { type: "text-icon", text: "24/7 Support", icon: Headphones }
          ]}
          marqueeSpeed={35}
          showMarqueeCard={true}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentySeven
          tag="Our Expertise"
          tagAnimation="slide-up"
          title="Comprehensive Web Services"
          description="From concept to deployment, we deliver end-to-end web solutions powered by AI-driven insights and human creativity."
          features={[
            {
              id: "web-design",              title: "AI-Enhanced Design",              description: "Intelligent design systems that adapt to your audience. We use advanced algorithms to optimize every pixel for maximum impact and user engagement.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ5aELL5CYzzp6dNRdiZW3Mqjk/modern-ai-powered-design-interface-with--1772512111982-1c0fd426.png",              imageAlt: "AI-Enhanced Design Service"
            },
            {
              id: "development",              title: "Performance Engineering",              description: "Lightning-fast websites built with cutting-edge technology. Our AI-optimized code ensures sub-second load times and seamless user experiences.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ5aELL5CYzzp6dNRdiZW3Mqjk/high-tech-development-dashboard-with-cle-1772512109773-26e1db42.png",              imageAlt: "Performance Engineering Service"
            },
            {
              id: "strategy",              title: "Data-Driven Strategy",              description: "Strategic insights powered by artificial intelligence. We analyze user behavior to create websites that convert and retain customers effectively.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ5aELL5CYzzp6dNRdiZW3Mqjk/ai-driven-analytics-dashboard-showing-gr-1772512110229-b11b2091.png",              imageAlt: "Data-Driven Strategy Service"
            },
            {
              id: "optimization",              title: "Conversion Optimization",              description: "AI-powered A/B testing and personalization. Continuously improve your website's performance with machine learning-driven recommendations.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ5aELL5CYzzp6dNRdiZW3Mqjk/website-performance-optimization-interfa-1772512108992-de3afcb4.png",              imageAlt: "Conversion Optimization Service"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="uniform-4-items"
          animationType="slide-up"
        />
      </div>

      <div id="work" data-section="work">
        <TestimonialCardSixteen
          tag="Case Studies"
          tagAnimation="slide-up"
          title="Client Success Stories"
          description="See how Hali has transformed digital experiences for leading brands. Real results, real impact."
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              role: "Creative Director",              company: "Creative Studio Co",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ5aELL5CYzzp6dNRdiZW3Mqjk/professional-female-portrait-with-confid-1772512110167-c9990f8f.png",              imageAlt: "Professional female portrait with confident expression in modern office setting. Warm natural lighti"
            },
            {
              id: "2",              name: "Marcus Johnson",              role: "CEO",              company: "TechFlow Solutions",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ5aELL5CYzzp6dNRdiZW3Mqjk/professional-male-portrait-with-warm-smi-1772512108905-6936b61c.png",              imageAlt: "Professional male portrait with warm smile in tech workspace environment. Natural lighting, modern t"
            },
            {
              id: "3",              name: "Elena Rodriguez",              role: "Marketing Lead",              company: "Innovation Labs",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ5aELL5CYzzp6dNRdiZW3Mqjk/professional-female-marketing-specialist-1772512108833-b315af43.png",              imageAlt: "Professional female marketing specialist portrait with energetic expression in creative workspace. M"
            },
            {
              id: "4",              name: "David Kim",              role: "Product Manager",              company: "Digital Ventures",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ5aELL5CYzzp6dNRdiZW3Mqjk/professional-male-product-manager-portra-1772512108929-54e86905.png",              imageAlt: "Professional male product manager portrait with focused expression in tech environment. Modern works"
            }
          ]}
          kpiItems={[
            { value: "340%", label: "Average Conversion Increase" },
            { value: "98%", label: "Client Satisfaction Rate" },
            { value: "50+", label: "Projects Completed" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "View Full Case Study", href: "#contact" }]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          tag="Why Choose Hali"
          tagAnimation="slide-up"
          title="Proven Impact"
          description="Our AI-powered approach delivers measurable results that drive business growth."
          metrics={[
            {
              id: "1",              value: "3.5x",              title: "Faster Development Timeline",              items: ["AI-accelerated design", "Automated optimization", "Rapid iterations"]
            },
            {
              id: "2",              value: "85%",              title: "Cost Reduction vs Traditional",              items: ["Intelligent automation", "Reduced manual work", "Efficient workflows"]
            },
            {
              id: "3",              value: "99.9%",              title: "Website Uptime Guarantee",              items: ["Enterprise infrastructure", "24/7 monitoring", "Instant support"]
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="Our Mission"
          title="Revolutionizing Web Services with AI"
          description="Hali Team"
          subdescription="Founded in 2024 by design and tech pioneers"
          icon={Lightbulb}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ5aELL5CYzzp6dNRdiZW3Mqjk/collaborative-team-of-diverse-tech-profe-1772512109013-71db1f62.png"
          imageAlt="Hali Team Collaboration"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="partners" data-section="partners">
        <SocialProofOne
          title="Trusted by Industry Leaders"
          description="Join forward-thinking agencies that rely on Hali for their web solutions."
          tag="Partners"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          names={["Google Cloud", "Figma", "Stripe", "Vercel", "Notion", "Slack", "Zapier", "Webflow"]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Elevate Your Web Presence?"
          ctaDescription="Let's discuss how AI-powered web solutions can transform your digital strategy. Book a consultation with our team today."
          ctaButton={{ text: "Schedule Consultation", href: "https://calendly.com" }}
          ctaIcon={Rocket}
          faqs={[
            {
              id: "1",              title: "How does AI enhance web design?",              content: "Our AI algorithms analyze user behavior patterns and design trends to create interfaces that are not just beautiful, but highly optimized for conversions. We use machine learning to continuously improve design elements based on real user interactions."
            },
            {
              id: "2",              title: "What's your typical project timeline?",              content: "Most projects are completed in 4-8 weeks depending on complexity. Our AI-powered development tools accelerate the process significantly, allowing us to deliver faster without compromising quality."
            },
            {
              id: "3",              title: "Do you provide ongoing support?",              content: "Absolutely. We offer comprehensive maintenance packages including AI-powered performance monitoring, security updates, and continuous optimization recommendations based on your website analytics."
            },
            {
              id: "4",              title: "How much does a typical project cost?",              content: "Our pricing is transparent and scalable. Basic websites start at $5,000, while enterprise solutions can range from $25,000 to $100,000+. We'll provide a detailed quote after understanding your specific needs."
            },
            {
              id: "5",              title: "Can you integrate with existing systems?",              content: "Yes, we specialize in seamless integrations. Whether you're using CRM, ERP, or marketing automation platforms, our AI solutions can connect and optimize all your existing tools."
            },
            {
              id: "6",              title: "What technologies do you use?",              content: "We leverage cutting-edge tech including Next.js, React, AI APIs, machine learning frameworks, and cloud platforms. Our stack is constantly evolving to utilize the latest advancements."
            }
          ]}
          useInvertedBackground={false}
          animationType="slide-up"
          accordionAnimationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Hali"
          copyrightText="© 2025 Hali. All rights reserved. Crafted with AI-inspired creativity."
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com/haliagency", ariaLabel: "Hali on Twitter" },
            { icon: Linkedin, href: "https://linkedin.com/company/haliagency", ariaLabel: "Hali on LinkedIn" },
            { icon: Github, href: "https://github.com/haliagency", ariaLabel: "Hali on GitHub" },
            { icon: Mail, href: "mailto:hello@hali.agency", ariaLabel: "Email Hali" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
