import React, { useState, useRef } from "react";
import { motion } from "framer-motion";
import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
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 { Input } from "../components/ui/input";
import { Textarea } from "../components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../components/ui/select";
import { Checkbox } from "../components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "../components/ui/radio-group";
import { Label } from "../components/ui/label";
import { GridPattern } from "../components/GridPattern";
import CustomReCaptcha, { ReCaptchaRef } from "../components/CustomReCaptcha";
import { useStoreContactUsMutation } from "@/src/services/storeContactUs";
import { useNavigate } from "react-router-dom";
import * as Yup from "yup";
import {
  Rocket,
  Users,
  Target,
  Heart,
  Mail,
  Phone,
  Calendar,
  Upload,
  FileText,
  CheckCircle,
  ArrowRight,
  Briefcase,
  Settings,
  Eye,
  Trophy,
  Star,
  Lightbulb,
  Monitor,
  Building,
  Globe,
  MapPin,
  Clock,
  Headphones,
  Shield,
} from "lucide-react";
import GlobalOffices from "@/components/GlobalOffices";
import { AboutYourProject } from "@/components/AboutYourProject";



// Hero Section
const HeroSection = () => {
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="text-center max-w-4xl mx-auto"
        >
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="mb-6"
          >
            <Badge
              variant="outline"
              className="border-[#E5195E]/20 text-[#E5195E] mb-6"
            >
              Start Your Project
            </Badge>
          </motion.div>

          <div className="space-y-6 mb-12">
            <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-semibold leading-tight">
              <span className="text-white">Turn Your Next Big Idea into </span>
              <span className="text-[#E5195E]">Reality</span>
            </h1>
            <p className="text-xl text-gray-300 leading-relaxed max-w-3xl mx-auto">
              Connect with Mobile App and AI Development Experts Today
              <p className="text-xl text-gray-300 leading-relaxed max-w-3xl mx-auto">

                Transform your concept into a fully functional mobile and AI‑driven solution with our expert development team.
              </p>
            </p>
          </div>
        </motion.div>
      </div>
    </section>
  );
};

// Make Your Vision Come to Life Section
const VisionSection = () => {
  const navigate = useNavigate();
  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-center mb-16"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-8">
            <span className="text-white">
              Make Your Vision Come to Life with{" "}
            </span>
            <span className="text-[#E5195E]">
              Best-in-Class App Development
            </span>
          </h2>

          <p className="text-xl text-gray-300 leading-relaxed max-w-4xl mx-auto mb-8">
            Have a big idea and are looking for customized mobile and AI solutions? From bespoke app development to AI‑enabled platforms and scalable system upgrades, our experts can turn your ideas into premium digital products.</p>
          <p className="text-xl text-gray-300 leading-relaxed max-w-4xl mx-auto mb-8">

            Whether you need an AI‑driven mobile app, intelligent backend systems, or integration of AI features into existing platforms, we help you build scalable, future‑ready solutions.
          </p>

          <Button
            size="lg"
            className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white text-lg px-8 py-4"
            onClick={() => navigate("/contact/schedule-a-discovery-call")}
          >
            <Calendar className="w-5 h-5 mr-2" />
            Book Appointment
            <ArrowRight className="w-4 h-4 ml-2" />
          </Button>
        </motion.div>
      </div>
    </section>
  );
};

// We'd love to talk to you Section
const ProcessStepsSection = () => {
  const steps = [
    {
      step: "1",
      title: "Enter Details",
      description:
        "Fill in the required information correctly to initiate the process. This will ensure that your request is handled efficiently and smoothly.",
      icon: FileText,
    },
    {
      step: "2",
      title: "Submit Details",
      description:
        "Carefully review your entries and submit them to ensure smooth processing. It is a simple step for confirmation of your request.",
      icon: CheckCircle,
    },
    {
      step: "3",
      title: "Book Appointment",
      description:
        "Select your convenient time slot, so that planning is made easier and on-time support can be received from our consultancy expertise.",
      icon: Calendar,
    },
  ];

  return (
    <section className="py-32 bg-wdi-grey">
      <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-center mb-16"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-8">
            <span className="text-white">We'd love to </span>
            <span className="text-[#E5195E]">talk to you</span>
          </h2>

          <p className="text-xl text-gray-300 leading-relaxed max-w-4xl mx-auto mb-12">
            Need guidance or a development partner for next-generation
            application development? WDI will be your trusted partner for
            secure, scalable, cutting-edge solutions. Start here and fill out
            the following form to begin bringing your vision to life into
            something truly remarkable.
          </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 mb-12"
        >
          {steps.map((step, index) => {
            const IconComponent = step.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 relative">
                  <IconComponent className="w-8 h-8 text-accent" />
                  <div className="absolute -top-2 -right-2 w-8 h-8 bg-[#E5195E] rounded-full flex items-center justify-center">
                    <span className="text-white text-sm font-bold">
                      {step.step}
                    </span>
                  </div>
                </div>
                <h3 className="text-xl font-semibold text-white mb-4">
                  {step.title}
                </h3>
                <p className="text-gray-400 leading-relaxed">
                  {step.description}
                </p>
              </motion.div>
            );
          })}
        </motion.div>

        {/* <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          viewport={{ once: true }}
          className="text-center"
        >
          <Button
            size="lg"
            className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white text-lg px-8 py-4"
            onClick={() => navigate("/contact")}
          >
            <Mail className="w-5 h-5 mr-2" />
            Tell Us More
            <ArrowRight className="w-4 h-4 ml-2" />
          </Button>
        </motion.div> */}
      </div>
    </section>
  );
};

// Join WDI Section
const JoinWDISection = () => {
  const navigate = useNavigate();
  const benefits = [
    {
      icon: Rocket,
      title: "Innovative Projects",
      description:
        "Work on cutting-edge technology projects with global impact",
    },
    {
      icon: Users,
      title: "Collaborative Culture",
      description:
        "Be part of a supportive team that values diversity and inclusion",
    },
    {
      icon: Target,
      title: "Growth Opportunities",
      description:
        "Continuous learning, training, and career advancement opportunities",
    },
    {
      icon: Heart,
      title: "Work-Life Balance",
      description: "Flexible working arrangements and comprehensive benefits",
    },
  ];

  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-center mb-16"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-8">
            <span className="text-white">
              Join the WDI Family & Shape the Future of{" "}
            </span>
            <span className="text-[#E5195E]">Technology</span>
          </h2>

          <p className="text-xl text-gray-300 leading-relaxed max-w-4xl mx-auto mb-12">
            We’re always looking for passionate, talented individuals…developers, designers, AI specialists, and product minds, to join our growing team. If you’re ready to work on innovative AI‑driven and mobile-first projects and make a real impact, we’d love to hear from you.</p>
          <p className="text-xl text-gray-300 leading-relaxed max-w-4xl mx-auto mb-12">

            Whether you specialize in AI mobile app development, full‑stack engineering, DevOps, or product strategy, the WDI family offers opportunities to grow, collaborate, and help shape the future of technology.
          </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-4 gap-8 mb-12"
        >
          {benefits.map((benefit, index) => {
            const IconComponent = benefit.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-[#E5195E]/20 rounded-full flex items-center justify-center mx-auto mb-6">
                  <IconComponent className="w-8 h-8 text-[#E5195E]" />
                </div>
                <h3 className="text-xl font-semibold text-white mb-4">
                  {benefit.title}
                </h3>
                <p className="text-gray-400 leading-relaxed">
                  {benefit.description}
                </p>
              </motion.div>
            );
          })}
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          viewport={{ once: true }}
          className="text-center space-y-6"
        >
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              size="lg"
              className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white text-lg px-8 py-4"
              onClick={() => navigate("/careers")}
            >
              <Briefcase className="w-5 h-5 mr-2" />
              View Open Positions
              <ArrowRight className="w-4 h-4 ml-2" />
            </Button>

            {/* <Button
              size="lg"
              variant="outline"
              className="border-gray-600 text-white hover:bg-gray-800 text-lg px-8 py-4"
              onClick={() => navigate("/careers/send-your-cv")}
            >
              <Upload className="w-5 h-5 mr-2" />
              Send Your CV
            </Button> */}
          </div>

          <p className="text-gray-400 text-sm">
            Ready to build the future with us? Let's create something amazing
            together.
          </p>
        </motion.div>
      </div>
    </section>
  );
};

// Why Partner with WDI Section
const WhyPartnerSection = () => {
  const features = [
    {
      icon: Trophy,
      title: "Award-Winning Team",
      description:
        "Recognized expertise in mobile app development and AI solutions",
    },
    {
      icon: Star,
      title: "5-Star Client Satisfaction",
      description:
        "Consistently rated 4.9/5 on Clutch with 47+ verified reviews",
    },
    {
      icon: Lightbulb,
      title: "Innovation-First Approach",
      description:
        "Cutting-edge solutions using the latest technologies and methodologies",
    },
    {
      icon: Monitor,
      title: "End-to-End Solutions",
      description:
        "From concept to deployment, we handle every aspect of your project",
    },
    {
      icon: Building,
      title: "Enterprise-Grade Security",
      description:
        "Robust security measures and compliance with industry standards",
    },
    {
      icon: Globe,
      title: "Global Reach",
      description:
        "Serving clients worldwide with 24/7 support and communication",
    },
  ];

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

          <p className="text-xl text-gray-300 leading-relaxed max-w-4xl mx-auto">
            Choose WDI for your next project and experience the difference of
            working with a team that's committed to your success.
          </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"
        >
          {features.map((feature, index) => {
            const IconComponent = feature.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="bg-gray-900/30 backdrop-blur-sm border border-gray-700/30 rounded-2xl p-8 text-center hover:border-[#E5195E]/30 transition-all duration-300"
              >
                <div className="w-16 h-16 bg-[#E5195E]/20 rounded-full flex items-center justify-center mx-auto mb-6">
                  <IconComponent className="w-8 h-8 text-[#E5195E]" />
                </div>
                <h3 className="text-xl font-semibold text-white mb-4">
                  {feature.title}
                </h3>
                <p className="text-gray-400 leading-relaxed">
                  {feature.description}
                </p>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Contact Information Section
const ContactInfoSection = () => {
  const navigate = useNavigate();
  const contactMethods = [
    {
      icon: Mail,
      title: "Email Us",
      description: "Get in touch via email",
      contact: "ideas@wdipl.com",
      action: "mailto:ideas@wdipl.com",
    },
    {
      icon: Phone,
      title: "Call Us",
      description: "Speak with our team",
      contact: "+91 7700900039",
      action: "tel:+91 7700900039",
    },
    {
      icon: MapPin,
      title: "Visit Us",
      description: "Our office locations",
      contact: "614, 6th floor Palm spring centre, Malad west, Mumbai Maharshatra",
      action: () => navigate("/company/office-locations"),
    },
    {
      icon: Clock,
      title: "Business Hours",
      description: "We're available",
      contact: "Mon-Fri 11AM-8PM",
      action: () => navigate("/contact/schedule-a-discovery-call"),
    },
  ];

  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-center mb-16"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-8">
            <span className="text-white">Get in Touch with </span>
            <span className="text-[#E5195E]">Our Experts</span>
          </h2>

          <p className="text-xl text-gray-300 leading-relaxed max-w-4xl mx-auto">
            Ready to discuss your project? Our team is here to help you every
            step of the way.
          </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-4 gap-8 mb-12"
        >
          {contactMethods.map((method, index) => {
            const IconComponent = method.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="bg-gray-900/30 backdrop-blur-sm border border-gray-700/30 rounded-2xl p-8 text-center hover:border-[#E5195E]/30 transition-all duration-300 cursor-pointer"
                onClick={() => {
                  if (typeof method.action === "string") {
                    window.open(method.action, "_blank");
                  } else {
                    method.action();
                  }
                }}
              >
                <div className="w-16 h-16 bg-[#E5195E]/20 rounded-full flex items-center justify-center mx-auto mb-6">
                  <IconComponent className="w-8 h-8 text-[#E5195E]" />
                </div>
                <h3 className="text-xl font-semibold text-white mb-2">
                  {method.title}
                </h3>
                <p className="text-gray-400 text-sm mb-4">
                  {method.description}
                </p>
                <p className="text-[#E5195E] font-medium">{method.contact}</p>
              </motion.div>
            );
          })}
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          viewport={{ once: true }}
          className="text-center"
        >
          <Button
            size="lg"
            className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white text-lg px-8 py-4"
            onClick={() => navigate("/contact/schedule-a-discovery-call")}
          >
            <Headphones className="w-5 h-5 mr-2" />
            Schedule a Call
            <ArrowRight className="w-4 h-4 ml-2" />
          </Button>
        </motion.div>
      </div>
    </section>
  );
};

// Main component
export const StartAProject = () => {
  return (
    <div className="dark min-h-screen bg-background">
      {/* <Navigation /> */}
      <HeroSection />
      <AboutYourProject />
      <VisionSection />
      <ProcessStepsSection />
      <WhyPartnerSection />
      <JoinWDISection />
      <ContactInfoSection />
      {/* <Footer /> */}
    </div>
  );
};