import { CarouselTestimonials } from "@/components/CarouselTestimonials";
import { CaseStudyHighlight } from "@/components/CaseStudyHighlight";
import { Footer } from "@/components/Footer";
import { HorizontalTagScroller } from "@/components/HorizontalTagScroller";
import { InlineCTA } from "@/components/InlineCTA";
import { ProcessSection } from "@/components/ProcessSection";
import { ResourceCards } from "@/components/ResourceCards";
import { SplitCallToAction } from "@/components/SplitCallToAction";
import { WhyChooseWDI } from "@/components/WhyChooseWDI";
import { ChevronRight } from "lucide-react";
import { motion } from "framer-motion";
import { Helmet } from "react-helmet-async";
import { Navigation } from "@/components/Navigation";
import { HeroSection } from "@/components/HeroSection";
import { ClientLogos } from "@/components/ClientLogos";
import { useNavigate } from "react-router-dom";


const services = [
    {
        title: "Mobile App Development",
        icon: (
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
            />
        ),
        description: "Native & cross-platform apps with pixel-perfect UIs and seamless user experiences.",
        link: "/services/mobile-app-development"
    },
    {
        title: "Web Platforms & SaaS",
        icon: (
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
            />
        ),
        description: "Scalable, secure, and SEO-optimized web applications built for performance.",
        link: "/web-cloud"
    },
    {
        title: "AI & ML Solutions",
        icon: (
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
            />
        ),
        description: "Intelligent features powered by cutting-edge algorithms and machine learning.",
        link: "/artificial-intelligence"
    },
    {
        title: "DevOps & Cloud",
        icon: (
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
            />
        ),
        description: "CI/CD pipelines and managed cloud infrastructure for seamless deployment.",
        link: "/services/system-architecture-devops"
    },
    {
        title: "Product Design & UX",
        icon: (
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z"
            />
        ),
        description: "Human-centered UX with delightful micro-interactions and intuitive interfaces.",
        link: "/design-experience"
    },
    {
        title: "Security & Compliance",
        icon: (
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
            />
        ),
        description: "Pen-testing, auditing, and regulatory alignment for enterprise-grade security.",
        link: "/solutions/compliance-ready-systems"
    }
];

export const Homepage = () => {

    const navigate = useNavigate();

    return (
        <div className="dark min-h-screen bg-background">
            <Helmet>
                {/* Page Title and Meta Description */}
                <title>Mobile App Development Services | WDI - iOS & Android App Development</title>
                <meta
                    name="description"
                    content="Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available."
                />

                {/* Canonical Link */}
                <link rel="canonical" href="https://www.wdipl.com/" />

                {/* Open Graph Tags (for Facebook, LinkedIn) */}
                <meta property="og:title" content="Mobile App Development Services | WDI - iOS & Android App Development" />
                <meta
                    property="og:description"
                    content="Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available."
                />
                <meta property="og:url" content="https://www.wdipl.com/services" />
                <meta property="og:type" content="website" />
                <meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />

                {/* Twitter Card Tags */}
                <meta name="twitter:card" content="summary_large_image" />
                <meta name="twitter:title" content="Mobile App Development Services | WDI - iOS & Android App Development" />
                <meta
                    name="twitter:description"
                    content="Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available."
                />
                <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />

                {/* Social Profiles (using JSON-LD Schema) */}
                <script type="application/ld+json">
                    {`
                  {
                    "@context": "https://schema.org",
                    "@type": "Organization",
                    "name": "WDI",
                    "url": "https://www.wdipl.com",
                    "sameAs": [
                      "https://www.facebook.com/wdideas",
                      "https://www.linkedin.com/in/website-developers-india/",
                      "https://www.instagram.com/wdipl/"
                    ]
                  }
                `}
                </script>
            </Helmet>
            {/* <Navigation /> */}

            {/* Hero Section - Dark background */}
            <section className="bg-background">
                <HeroSection />
            </section>

            {/* Client Logos - Dark background */}
            <section className="bg-background">
                <ClientLogos />
            </section>

            {/* Services Grid - Dark background */}
            {/* <section className="bg-background">
      <ServicesSection />
    </section> */}
            <section className="py-20 bg-background">
                <div className="container mx-auto px-6 lg:px-8">
                    <motion.div
                        initial={{ opacity: 0, y: 30 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.8 }}
                        viewport={{ once: true }}
                        className="text-left mb-20"
                    >
                        <div className="text-center">
                            <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-white">What We Do</h2>
                            <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
                                End-to-end solutions for every stage of your product lifecycle.
                            </p>
                        </div>
                    </motion.div>

                    <motion.div
                        initial={{ opacity: 0, y: 40 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.8, delay: 0.2 }}
                        viewport={{ once: true }}
                        className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
                    >
                        {services.map((service, index) => {
                            const IconComponent = service.icon;
                            return (
                                <motion.div
                                    key={index}
                                    initial={{ opacity: 0, y: 20 }}
                                    whileInView={{ opacity: 1, y: 0 }}
                                    transition={{ duration: 0.5, delay: index * 0.01 }}
                                    viewport={{ once: true }}
                                    whileHover={{ y: -5 }}
                                    className="group cursor-pointer"
                                    onClick={() => navigate(service.link)}
                                >
                                    <div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
                                        <div className="flex flex-col items-start space-y-6">
                                            <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
                                                {/* <IconComponent className="w-6 h-6 text-accent" /> */}
                                                <svg
                                                    className="w-6 h-6 text-accent"
                                                    fill="none"
                                                    stroke="currentColor"
                                                    viewBox="0 0 24 24"
                                                >
                                                    {service.icon}
                                                </svg>
                                            </div>

                                            <div>
                                                <h3 className="text-xl font-semibold text-white mb-4">
                                                    {service.title}
                                                </h3>
                                                <p className="text-gray-400 leading-relaxed">
                                                    {service.description}
                                                </p>
                                            </div>

                                            <div className="flex items-center gap-2 text-accent font-medium">
                                                <span>Explore Services</span>
                                                <ChevronRight className="w-4 h-4" />
                                            </div>
                                        </div>
                                    </div>
                                </motion.div>
                            );
                        })}
                    </motion.div>
                </div>
            </section>

            {/* Why Choose WDI - Dark background */}
            <section className="bg-background">
                <WhyChooseWDI />
            </section>

            {/* Industry Solutions - Dark background */}
            <section className="bg-background">
                <HorizontalTagScroller />
            </section>

            {/* Case Studies - Dark background */}
            <section className="bg-background">
                <CaseStudyHighlight />
            </section>

            {/* Inline CTA - Dark background */}
            <section className="bg-background">
                <InlineCTA />
            </section>

            {/* Process Steps - Dark background */}
            <section className="bg-background">
                <ProcessSection />
            </section>

            {/* Testimonials - Dark background */}
            <section className="bg-background">
                <CarouselTestimonials />
            </section>

            {/* Resources - Dark background */}
            <section className="bg-background">
                <ResourceCards />
            </section>

            {/* Final CTA - Dark background */}
            <section className="bg-background">
                <SplitCallToAction />
            </section>

            {/* Footer - Dark background */}
            <section className="bg-background">
                {/* <Footer /> */}
            </section>
        </div>
    );
};