import React from "react";
import { motion } from "framer-motion";
import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { ProcessSection } from "../components/ProcessSection";
import { FAQSection } from "../components/FAQSection";
import { Button } from "../components/ui/button";
import { ShimmerButton } from "../components/ui/shimmer-button";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { GridPattern } from "../components/GridPattern";
import {
  ArrowRight, Users, Globe, Award, Target, Heart, Lightbulb,
  Rocket, TrendingUp, CheckCircle, Star, Coffee, Monitor,
  Calendar, Eye, Building, FileText, Settings, Trophy,
  BookOpen, MessageSquare, Briefcase, Mail
} from "lucide-react";
import { Helmet } from "react-helmet-async";
import { CarouselTestimonials } from "@/components/CarouselTestimonials";
import { useNavigate } from "react-router-dom";

// Enhanced Hero Section
const HeroWithCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>About WDI | Why Choose Us for Digital Innovation Success</title>
        <meta
          name="description"
          content="Discover what makes WDI a trusted name in digital innovation. Learn about our strengths, capabilities, and value-driven approach to tech excellence."
        />

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

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta property="og:title" content="About WDI | Why Choose Us for Digital Innovation Success" />
        <meta
          property="og:description"
          content="Discover what makes WDI a trusted name in digital innovation. Learn about our strengths, capabilities, and value-driven approach to tech excellence."
        />
        <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="About WDI | Why Choose Us for Digital Innovation Success" />
        <meta
          name="twitter:description"
          content="Discover what makes WDI a trusted name in digital innovation. Learn about our strengths, capabilities, and value-driven approach to tech excellence."
        />
        <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>
      <div className="container mx-auto px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            className="space-y-8"
          >
            {/* About WDI Label */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
            >
              <span className="text-white/70 text-sm font-medium">About WDI: Web Development Institute</span>
            </motion.div>

            {/* Main Heading - Left aligned, reduced font size */}
            <div className="space-y-6">
              <h1 className="text-4xl sm:text-5xl md:text-6xl font-semibold leading-tight text-left">
                <span className="text-white">Innovating the Future of </span>
                <span className="text-[#E5195E]">Digital Solutions</span>
              </h1>

              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                WDI is a dynamic, AI‑driven company dedicated to transforming businesses through cutting‑edge technology and exceptional digital solutions.
              </p>
            </div>

            {/* CTAs */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.3 }}
              className="flex flex-col sm:flex-row gap-4"
            >
              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigate('/services')}>
                <div className="inline-flex items-center gap-2">
                  <Briefcase className="w-4 h-4 flex-shrink-0" />
                  <span>Explore Our Services</span>
                </div>
              </ShimmerButton>
              <Button
                variant="secondary"
                size="lg"
                className="text-lg px-8 py-4 h-auto"
                onClick={() => navigate('/case-studies')}
              >
                <Eye className="w-4 h-4 flex-shrink-0" />
                <span>View Our Portfolio</span>
              </Button>
            </motion.div>
          </motion.div>

          {/* Right side with company intro */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="relative"
          >
            <div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8">
              <p className="text-xl text-gray-300 leading-relaxed mb-6">
                With a strong foundation in technological innovation and customer satisfaction, we strive to deliver solutions that not only meet today's challenges but anticipate tomorrow's opportunities.
              </p>
              <p className="text-lg text-gray-400 leading-relaxed">
                Our commitment to excellence drives us to continuously push the boundaries of what's possible in digital transformation.
              </p>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

// Why Choose WDI Section
const WhyChooseWDISection = () => {
  const strengths = [
    {
      id: "innovation",
      title: "Innovation",
      description: "Pioneering cutting-edge technology solutions since 2018.",
      icon: Lightbulb
    },
    {
      id: "expertise",
      title: "Expertise",
      description: "A team of seasoned professionals with deep industry knowledge.",
      icon: Award
    },
    {
      id: "client-focus",
      title: "Client Focus",
      description: "Committed to delivering tailored solutions and exceptional service.",
      icon: Heart
    },
    {
      id: "impact",
      title: "Impact",
      description: "Driving positive change in efficiency, sustainability, and connectivity.",
      icon: Target
    }
  ];

  return (
    <section className="py-32 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-16"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-6">
            <span className="text-white">Why Choose </span>
            <span className="text-[#E5195E]">WDI?</span>
          </h2>

          <p className="text-xl text-gray-300 leading-relaxed">
            Our AI‑driven core strengths that set us apart in the digital solutions and app development industry.          </p>
        </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 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
        >
          {strengths.map((strength, index) => {
            const IconComponent = strength.icon;

            return (
              <motion.div
                key={strength.id}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.01 }}
                viewport={{ once: true }}
                whileHover={{ y: -8, scale: 1.02 }}
                className="group cursor-pointer"
              >
                <Card className="bg-gray-900/50 backdrop-blur-md border-gray-700/50 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full overflow-hidden">
                  <CardContent className="p-8 h-full">
                    <div className="mb-6">
                      <IconComponent className="w-12 h-12 text-accent" />
                    </div>

                    <h3 className="text-xl font-semibold text-white mb-4 leading-tight">
                      {strength.title}
                    </h3>

                    <p className="text-gray-400 leading-relaxed">
                      {strength.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Our Impact in Numbers Section
const ImpactNumbersSection = () => {
  const stats = [
    { number: "2000+", label: "Projects Delivered" },
    { number: "100+", label: "Expert Professionals" },
    { number: "1000+", label: "Global Clients" },
    { number: "24+", label: "Years of Excellence" }
  ];

  return (
    <section className="py-32 bg-black">
      <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-16"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-6">
            <span className="text-white">Our Impact in </span>
            <span className="text-[#E5195E]">Numbers</span>
          </h2>

          <p className="text-xl text-gray-300 leading-relaxed">
            Measurable AI‑driven results that speak to our commitment and expertise in digital solutions and app development.
          </p>
        </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 grid-cols-2 md:grid-cols-4 gap-8"
        >
          {stats.map((stat, index) => (
            <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 }}
              className="text-center"
            >
              <div className="text-4xl lg:text-5xl font-bold text-[#E5195E] mb-4">
                {stat.number}
              </div>
              <div className="text-lg text-gray-300 leading-tight">{stat.label}</div>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
};

// Learn More About WDI Section
const LearnMoreSection = () => {
  const navigate = useNavigate();
  const sections = [
    {
      title: "Our History",
      description: "Discover our journey from founding to becoming industry leaders",
      icon: BookOpen,
      link: "/about-wdi/our-history"
    },
    {
      title: "Leadership Team",
      description: "Meet the visionary leaders guiding our company's success",
      icon: Users,
      link: "/about-wdi/leadership-team"
    },
    {
      title: "Awards & Certifications",
      description: "Recognition for our excellence and commitment to quality",
      icon: Trophy,
      link: "/about-wdi/awards-certifications"
    },
    {
      title: "Careers",
      description: "Join our innovative team and grow with us",
      icon: Briefcase,
      link: "/careers"
    },
    {
      title: "Culture & Values",
      description: "The core principles that define our company culture",
      icon: Heart,
      link: "/about-wdi/culture-values"
    },
    {
      title: "Press & Media",
      description: "Latest news, announcements, and media coverage",
      icon: FileText,
      link: "/about-wdi/press-media"
    }
  ];

  return (
    <section className="py-32 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"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
            Learn More About WDI
          </h2>
          <p className="text-lg text-gray-300 max-w-4xl leading-relaxed">
            Explore different aspects of our company and what makes us unique
          </p>
        </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"
        >
          {sections.map((section, index) => {
            const IconComponent = section.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(section.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" />
                    </div>

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

                    <div className="flex items-center gap-2 text-accent font-medium mt-auto">
                      <span>Learn More</span>
                      <ArrowRight className="w-4 h-4" />
                    </div>
                  </div>
                </div>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Client Testimonial Section
const TestimonialSection = () => {
  return (
    <section className="py-32 bg-black">
      <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-16"
        >
          {/* <h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-6">
            <span className="text-white">What Our </span>
            <span className="text-[#E5195E]">Clients Say</span>
          </h2> */}
          <CarouselTestimonials />
        </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="max-w-4xl mx-auto"
        >
          <Card className="bg-gray-900/50 backdrop-blur-md border-gray-700/50 rounded-2xl overflow-hidden">
            <CardContent className="p-12">
              <div className="flex items-start gap-4 mb-8">
                <div className="flex-shrink-0">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="w-5 h-5 text-yellow-400 fill-current inline-block" />
                  ))}
                </div>
              </div>

              <blockquote className="text-2xl text-white leading-relaxed mb-8 italic">
                "WDI has been instrumental in transforming our digital infrastructure. Their innovative approach and technical expertise exceeded our expectations."
              </blockquote>

              <div className="flex items-center gap-4">
                <div className="w-12 h-12 bg-accent/20 rounded-full flex items-center justify-center">
                  <Users className="w-6 h-6 text-accent" />
                </div>
                <div>
                  <div className="text-lg font-semibold text-white">Sarah Johnson</div>
                  <div className="text-gray-400">CTO, TechForward Solutions</div>
                </div>
              </div>
            </CardContent>
          </Card>
        </motion.div> */}
      </div>
    </section>
  );
};

// Mission Section
const MissionSection = () => {
  const principles = [
    {
      title: "Innovate",
      description: "Continuously pushing the boundaries of technology",
      icon: Lightbulb
    },
    {
      title: "Collaborate",
      description: "Building strong partnerships with our clients",
      icon: Users
    },
    {
      title: "Deliver",
      description: "Ensuring exceptional results and lasting impact",
      icon: Target
    }
  ];

  return (
    <section className="py-32 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-16"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-8">
            <span className="text-white">Our </span>
            <span className="text-[#E5195E]">Mission</span>
          </h2>

          <p className="text-xl text-gray-300 leading-relaxed max-w-4xl mb-12">
            To empower businesses worldwide with AI‑driven digital solutions that drive growth, enhance efficiency, and create lasting value. We believe in the transformative power of technology and are committed to making it accessible, reliable, and impactful for every client we serve.
          </p>
        </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-3 gap-8"
        >
          {principles.map((principle, index) => {
            const IconComponent = principle.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 }}
                className="text-center"
              >
                <div className="w-16 h-16 bg-accent/20 rounded-full flex items-center justify-center mx-auto mb-6">
                  <IconComponent className="w-8 h-8 text-accent" />
                </div>
                <h3 className="text-2xl font-semibold text-white mb-4">
                  {principle.title}
                </h3>
                <p className="text-gray-400 leading-relaxed">
                  {principle.description}
                </p>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Updated CTA Section
const InlineCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="py-20 bg-black">
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-left max-w-4xl mx-auto"
        >
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            viewport={{ once: true }}
            className="space-y-8"
          >
            {/* Ready to Transform Badge */}
            <div className="inline-block">
              <div className="bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full px-6 py-3">
                <div className="flex items-center gap-2">
                  <Rocket className="w-4 h-4 text-[#E5195E]" />
                  <span className="text-[#E5195E] text-sm font-medium">Ready to Transform Your Business?</span>
                </div>
              </div>
            </div>

            {/* Main Heading */}
            <h2 className="text-3xl lg:text-4xl font-semibold leading-tight">
              <span className="text-white">Join hundreds of successful companies who have chosen </span>
              <span className="text-[#E5195E]">WDI</span>
              <span className="text-white"> as their technology partner</span>
            </h2>

            {/* Subtitle */}
            <p className="text-xl text-gray-300 leading-relaxed max-w-2xl">
              Let's build something amazing together.
            </p>

            {/* CTA Buttons */}
            <div className="flex flex-col sm:flex-row items-start gap-4">
              <ShimmerButton
                className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
                // onClick={() => navigate('/contact')}
                onClick={() => navigate("/start-a-project")}
              >
                <div className="inline-flex items-center gap-3">
                  <Mail className="w-6 h-6 flex-shrink-0" />
                  <span>Contact Us Today</span>
                </div>
              </ShimmerButton>

              <Button
                variant="secondary"
                size="lg"
                className="text-xl px-10 py-5 rounded-2xl h-[56px]"
                onClick={() => navigate('/services')}
              >
                <Briefcase className="w-6 h-6 flex-shrink-0" />
                <span>Explore Our Services</span>
              </Button>
            </div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

// FAQ data for About WDI
const aboutWDIFAQs = [
  {
    question: "When was WDI founded?",
    answer: "WDI was founded in 1999 with a mission to transform businesses through cutting‑edge technology and exceptional digital solutions. Today, we are recognized industry leaders in AI‑powered app and web development."
  },
  {
    question: "What makes WDI different from other development companies?",
    answer: "Our unique combination of AI‑driven technical expertise, innovative product thinking, and client‑first service sets us apart. We don’t just deliver projects we build lasting partnerships and drive measurable business growth."
  },
  {
    question: "How many clients has WDI served?",
    answer: "We’ve had the privilege of serving over 50 global clients across multiple industries, delivering more than 500 successful AI‑driven web and mobile projects with a 98% client satisfaction rate."
  },
  {
    question: "What industries does WDI specialize in?",
    answer: "We specialize in fintech, healthcare, e‑commerce, education, and enterprise digital solutions. Our AI‑driven development experience allows us to customize scalable products for any industry’s unique needs."
  },
  {
    question: "Does WDI offer ongoing support after project completion?",
    answer: "Absolutely. We believe in long‑term partnerships and provide comprehensive post‑launch support, maintenance, updates, and continuous optimization so your AI‑driven solutions evolve with your business."
  }
];

export const AboutWDI = () => {
  return (
    <div className="dark min-h-screen bg-background">
      {/* {/* <Navigation /> */}
      <HeroWithCTA />
      <WhyChooseWDISection />
      <ImpactNumbersSection />
      {/* <LearnMoreSection /> */}
      <TestimonialSection />
      <MissionSection />
      <ProcessSection />
      <InlineCTA />
      <FAQSection
        title="About WDI Questions"
        subtitle="Get answers to common questions about our company, AI‑driven services, and mission."
        faqs={aboutWDIFAQs}
      />
      {/* <Footer /> */}
    </div>
  );
};