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>
          </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 customised solutions? From
            bespoke app development to AI-enabled platforms, and scalable system
            upgrades, our experts can turn ideas into premium digital products.
            Let's connect and create scalable and thriving 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 to join
            our growing team. If you're ready to work on innovative projects and
            make a real impact, we'd love to hear from you.
          </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>
  );
};