"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import TextAnimation from '@/components/text/TextAnimation';
import { Users, TrendingUp, Zap, Award, Sparkles } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLarge"
      background="noiseGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="outline"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="TechVision"
          navItems={[
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Pricing", id: "pricing" },
            { name: "Team", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          title="Welcome to our company"
          description="Delivering excellence in IT solutions since 2015, serving over 300 enterprise clients worldwide"
          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766739283383-4enee5x3.jpg"
          logoAlt="TechVision Logo"
          buttons={[
            { text: "Get Started", href: "#contact" },
            { text: "Learn More", href: "#about" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Delivering excellence in IT solutions since 2015, serving over 300 enterprise clients worldwide"
          useInvertedBackground="noInvert"
          metrics={[
            { icon: Users, label: "Happy Clients", value: "300+" },
            { icon: TrendingUp, label: "Projects Completed", value: "1,200+" },
            { icon: Zap, label: "Years Experience", value: "9" },
            { icon: Award, label: "Industry Awards", value: "25+" }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwelve
          title="Our Core Services"
          description="Comprehensive IT solutions designed for enterprise growth"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "software-development",
              label: "Development",
              title: "Custom Software Solutions",
              items: [
                "Web and mobile application development",
                "Cloud-native architecture design",
                "API integration and microservices",
                "Legacy system modernization"
              ],
              buttons: [{ text: "Learn More", href: "contact" }]
            },
            {
              id: "cloud-infrastructure",
              label: "Cloud",
              title: "Infrastructure & DevOps",
              items: [
                "AWS, Azure, and GCP expertise",
                "Infrastructure automation",
                "Containerization and Kubernetes",
                "24/7 managed cloud services"
              ],
              buttons: [{ text: "Learn More", href: "contact" }]
            },
            {
              id: "security-consulting",
              label: "Security",
              title: "Cybersecurity & Compliance",
              items: [
                "Security audits and assessments",
                "Threat detection and response",
                "Compliance management",
                "Data protection solutions"
              ],
              buttons: [{ text: "Learn More", href: "contact" }]
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Flexible Pricing Plans"
          description="Choose the right partnership model for your organization"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "startup",
              price: "Custom",
              name: "Startup Package",
              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Contact Sales", href: "contact" }
              ],
              features: [
                "Dedicated development team",
                "Up to 40 hours per week",
                "Quarterly strategy reviews",
                "Technology consultation"
              ]
            },
            {
              id: "enterprise",
              badge: "Most Popular",
              badgeIcon: Sparkles,
              price: "Custom",
              name: "Enterprise Solution",
              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Contact Sales", href: "contact" }
              ],
              features: [
                "Full-time dedicated team",
                "End-to-end project management",
                "Monthly business reviews",
                "Strategic technology roadmap"
              ]
            },
            {
              id: "consulting",
              price: "Custom",
              name: "Consulting Only",
              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Contact Sales", href: "contact" }
              ],
              features: [
                "Expert technical guidance",
                "Architecture design",
                "Team augmentation support",
                "On-demand expertise"
              ]
            }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardEleven
          title="Meet Our Leadership"
          description="Experienced professionals dedicated to your success"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          groups={[
            {
              id: "executive",
              groupTitle: "Executive Team",
              members: [
                {
                  id: "1",
                  title: "Sarah Johnson",
                  subtitle: "CEO & Co-Founder",
                  detail: "sarah@techvision.com",
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766739289686-46zppqua.jpg"
                },
                {
                  id: "2",
                  title: "Michael Chen",
                  subtitle: "CTO & Co-Founder",
                  detail: "michael@techvision.com",
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766739290811-3l4omjjj.jpg"
                }
              ]
            },
            {
              id: "leadership",
              groupTitle: "Department Heads",
              members: [
                {
                  id: "3",
                  title: "Emily Rodriguez",
                  subtitle: "VP of Services",
                  detail: "emily@techvision.com",
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766739291871-w7115s5w.jpg"
                },
                {
                  id: "4",
                  title: "David Kim",
                  subtitle: "VP of Delivery",
                  detail: "david@techvision.com",
                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766739292964-5ffln4fm.jpg"
                }
              ]
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Get answers to common questions about our services"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "What is your typical project timeline?",
              content: "Project timelines vary based on scope and complexity. Typically, software development projects range from 2-6 months. We provide detailed timelines and milestones during the initial consultation phase."
            },
            {
              id: "2",
              title: "Do you offer dedicated team models?",
              content: "Yes, we offer both dedicated team augmentation and project-based engagement models. Our dedicated teams work exclusively on your projects and integrate seamlessly with your internal teams."
            },
            {
              id: "3",
              title: "What technologies do you specialize in?",
              content: "We specialize in modern tech stacks including React, Node.js, Python, AWS, Azure, Kubernetes, and more. Our team continuously updates skills with emerging technologies."
            },
            {
              id: "4",
              title: "How do you ensure code quality?",
              content: "We implement rigorous quality assurance processes including code reviews, automated testing, continuous integration, and security audits. Our development teams follow industry best practices and coding standards."
            },
            {
              id: "5",
              title: "What is your support after project completion?",
              content: "We offer comprehensive post-launch support including maintenance, bug fixes, performance optimization, and infrastructure monitoring. Custom support packages are available based on your needs."
            },
            {
              id: "6",
              title: "Do you have experience with legacy systems?",
              content: "Yes, we have extensive experience modernizing legacy systems. We help migrate outdated applications to cloud platforms, refactor code, and improve overall system performance and maintainability."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Start Your Digital Transformation"
          description="Connect with our team to discuss how we can help your organization achieve its technology goals"
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766739285628-uwsyz2el.jpg"
          imageAlt="Professional team consultation"
          mediaPosition="right"
          inputs={[
            { name: "company", type: "text", placeholder: "Company Name", required: true },
            { name: "email", type: "email", placeholder: "Email Address", required: true },
            { name: "phone", type: "tel", placeholder: "Phone Number", required: false },
            { name: "service", type: "text", placeholder: "Service Interest", required: true }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your project and requirements",
            rows: 5,
            required: true
          }}
          buttonText="Schedule Consultation"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="TechVision"
          copyrightText="© 2025 TechVision. All rights reserved."
          columns={[
            {
              title: "Services",
              items: [
                { label: "Software Development", href: "#services" },
                { label: "Cloud Infrastructure", href: "#services" },
                { label: "Cybersecurity", href: "#services" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#about" },
                { label: "Team", href: "#team" },
                { label: "Careers", href: "#contact" }
              ]
            },
            {
              title: "Resources",
              items: [
                { label: "Blog", href: "#blog" },
                { label: "Case Studies", href: "#contact" },
                { label: "Documentation", href: "#contact" }
              ]
            },
            {
              title: "Contact",
              items: [
                { label: "Email Us", href: "mailto:hello@techvision.com" },
                { label: "Call Us", href: "tel:+1234567890" },
                { label: "Get Support", href: "#contact" }
              ]
            }
          ]}
        />
      </div>

      <div className="flex justify-center my-8">
        <TextAnimation
          type="entrance-slide"
          title="Welcome to our company"
          variant="trigger"
        />
      </div>
    </ThemeProvider>
  );
}