Wdipl-react/pages/StartAProject.tsx

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 { navigateTo } from "@/App";
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";



// 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>
  );
};

// Project Form Section
const ProjectFormSection = () => {

  const [isRecaptchaVerified, setIsRecaptchaVerified] = useState(false);

  // Validation Schema
  const validationSchema = Yup.object().shape({
    name: Yup.string()
      .required("Name is required")
      .min(2, "Name must be at least 2 characters")
      .max(50, "Name must not exceed 50 characters"),
    email: Yup.string()
      .required("Email is required")
      .email("Invalid email address"),
    country: Yup.string().required("Country is required"),
    phone: Yup.string()
      .required("Phone number is required")
      .matches(/^[\d\s+\-().]{10,}$/, "Please enter a valid phone number"),
    services: Yup.string().required("Service selection is required"),
    budget: Yup.string().required("Budget range is required"),
    projectDescription: Yup.string()
      .required("Project description is required")
      .min(50, "Description should be at least 50 characters")
      .max(2000, "Description must not exceed 2000 characters"),
    developmentStage: Yup.string().required("Development stage is required"),
    timeline: Yup.string().required("Timeline is required"),
    ndaRequired: Yup.boolean(),
    agreeTerms: Yup.boolean()
      .oneOf([true], "You must agree to the terms and conditions")
      .required("You must agree to the terms and conditions"),
    recaptcha: Yup.string()
      .required("Please complete the reCAPTCHA verification")
      .test('recaptcha', 'reCAPTCHA is required', () => {
        return isRecaptchaVerified; // This will validate against your state
      }),
  });

  const [formData, setFormData] = useState({
    name: "",
    email: "",
    country: "",
    phone: "",
    services: "",
    budget: "",
    projectDescription: "",
    developmentStage: "",
    timeline: "",
    ndaRequired: false,
    agreeTerms: false,
  });

  const [errors, setErrors] = useState<Record<string, string>>({});
  const [touched, setTouched] = useState<Record<string, boolean>>({});
  const [attachedFiles, setAttachedFiles] = useState<File[]>([]);
  const [recaptchaToken, setRecaptchaToken] = useState<string>("");
  const recaptchaRef = useRef<ReCaptchaRef>(null);
  const [submitContactForm, { isLoading }] = useStoreContactUsMutation();

  const handleBlur = (field: string) => {
    setTouched({ ...touched, [field]: true });
    validateField(field);
  };

  const validateField = async (field: string, dataToValidate = formData) => {
    try {
      await validationSchema.validateAt(field, dataToValidate);
      setErrors((prev) => ({ ...prev, [field]: "" }));
    } catch (err) {
      if (err instanceof Yup.ValidationError) {
        setErrors((prev) => ({ ...prev, [field]: err.message }));
      }
    }
  };

  const validateForm = async () => {
    try {
      await validationSchema.validate(formData, { abortEarly: false });
      setErrors({});
      return true;
    } catch (err) {
      if (err instanceof Yup.ValidationError) {
        const newErrors: Record<string, string> = {};
        err.inner.forEach((error) => {
          if (error.path) {
            newErrors[error.path] = error.message;
          }
        });
        setErrors(newErrors);

        // Scroll to first error
        const firstError = err.inner[0];
        if (firstError?.path) {
          const element = document.getElementById(firstError.path);
          if (element) {
            element.scrollIntoView({ behavior: "smooth", block: "center" });
          }
        }
      }
      return false;
    }
  };

  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (files) {
      const validFiles = Array.from(files).filter(
        (file) => file.size <= 10 * 1024 * 1024
      );
      setAttachedFiles((prev) => [...prev, ...validFiles]);
    }
  };

  const removeFile = (index: number) => {
    setAttachedFiles((prev) => prev.filter((_, i) => i !== index));
  };

  const handleRecaptchaVerify = (token: string) => {
    setRecaptchaToken(token);
    setIsRecaptchaVerified(true);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!isRecaptchaVerified) {
      setErrors(prev => ({
        ...prev,
        recaptcha: "Please complete the reCAPTCHA verification"
      }));
      return;
    }

    const isValid = await validateForm();
    if (!isValid) return;

    try {
      const formDataToSend = new FormData();
      formDataToSend.append("t_id", "xyz123");
      formDataToSend.append("name", formData.name);
      formDataToSend.append("email", formData.email);
      formDataToSend.append("country", formData.country);
      formDataToSend.append("phone_number", formData.phone);
      formDataToSend.append("service", formData.services);
      formDataToSend.append("budget", formData.budget);
      formDataToSend.append("message", formData.projectDescription);
      formDataToSend.append("development_stage", formData.developmentStage);
      formDataToSend.append("startTime", formData.timeline);
      formDataToSend.append("nda_signing", formData.ndaRequired ? "1" : "0");
      formDataToSend.append("from_page", "contact-us");

      if (attachedFiles.length > 0) {
        attachedFiles.forEach((file) => {
          formDataToSend.append("contact_us_attachment", file);
        });
      }

      formDataToSend.append("ip", "192.168.1.10");
      formDataToSend.append("user_agent", navigator.userAgent);

      await submitContactForm(formDataToSend).unwrap();

      // Reset form
      setFormData({
        name: "",
        email: "",
        country: "",
        phone: "",
        services: "",
        budget: "",
        projectDescription: "",
        developmentStage: "",
        timeline: "",
        ndaRequired: false,
        agreeTerms: false,
      });
      setAttachedFiles([]);

      if (recaptchaRef.current) {
        recaptchaRef.current.reset();
      }
      setIsRecaptchaVerified(false);
      setRecaptchaToken("");

      navigateTo("/thank-you");
    } catch (error) {
      console.error("Form submission error:", error);
      alert("Failed to submit the form. Please try again.");
    }
  };

  // Helper components for form fields
  const renderInputField = (
    field: keyof typeof formData,
    label: string,
    placeholder: string,
    type = "text"
  ) => (
    <div className="space-y-3" id={field}>
      <label className="block text-sm font-medium text-white">{label} *</label>
      <Input
        type={type}
        placeholder={placeholder}
        className={`bg-gray-800/30 border-gray-600/50 text-white h-12 text-base ${errors[field] ? "border-red-500" : ""
          }`}
        value={formData[field] as string}
        onChange={(e) => setFormData({ ...formData, [field]: e.target.value })}
        onBlur={() => handleBlur(field)}
      />
      {errors[field] && (
        <p className="text-red-400 text-sm mt-1">{errors[field]}</p>
      )}
    </div>
  );

  const renderSelectField = (
    field: keyof typeof formData,
    label: string,
    placeholder: string,
    options: { value: string; label: string }[],
    onValueChange?: (value: string) => void
  ) => (
    <div className="space-y-3" id={field}>
      <label className="block text-sm font-medium text-white">{label} *</label>
      <Select
        value={formData[field] as string}
        onValueChange={(value) => {
          const updated = { ...formData, [field]: value };
          setFormData(updated);
          setTouched({ ...touched, [field]: true });
          validateField(field, updated);
          if (onValueChange) {
            onValueChange(value);
          }
        }}
      >
        <SelectTrigger
          className={`bg-gray-800/30 border-gray-600/50 text-white h-12 min-h-12 ${errors[field] ? "border-red-500" : ""
            }`}
        >
          <SelectValue placeholder={placeholder} />
        </SelectTrigger>
        <SelectContent>
          {options.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      {errors[field] && (
        <p className="text-red-400 text-sm mt-1">{errors[field]}</p>
      )}
    </div>
  );

  // Add this near the top of your file with other constants
  const COUNTRY_CODES: Record<string, string> = {
    us: "+1",
    uk: "+44",
    ca: "+1",
    au: "+61",
    in: "+91",
    de: "+49",
    fr: "+33",
    other: "+",
  };

  const renderTextarea = (
    field: keyof typeof formData,
    label: string,
    placeholder: string,
    rows = 6
  ) => (
    <div className="space-y-3" id={field}>
      <div className="flex justify-between">
        <label className="block text-sm font-medium text-white">
          {label} *
        </label>
        <span className="text-sm text-gray-400">
          {formData[field]?.toString().length || 0}/2000
        </span>
      </div>
      <Textarea
        placeholder={placeholder}
        rows={rows}
        className={`bg-gray-800/30 border-gray-600/50 text-white text-base resize-none ${errors[field] ? "border-red-500" : ""
          }`}
        value={formData[field] as string}
        onChange={(e) => setFormData({ ...formData, [field]: e.target.value })}
        onBlur={() => handleBlur(field)}
      />
      {errors[field] && (
        <p className="text-red-400 text-sm mt-1">{errors[field]}</p>
      )}
    </div>
  );

  const renderRadioGroup = (
    field: keyof typeof formData,
    label: string,
    options: { value: string; label: string }[],
    cols: string
  ) => (
    <div className="space-y-4" id={field}>
      <label className="block text-sm font-medium text-white">{label} *</label>
      {errors[field] && (
        <p className="text-red-400 text-sm mb-2">{errors[field]}</p>
      )}
      <RadioGroup
        value={formData[field] as string}
        onValueChange={(value) => {
          const updated = { ...formData, [field]: value };
          setFormData(updated);
          setTouched({ ...touched, [field]: true });
          validateField(field, updated);
        }}
        className={`grid ${cols} gap-4`}
      >
        {options.map((option) => (
          <div
            key={option.value}
            className="flex items-center space-x-3 p-4 bg-gray-800/20 rounded-lg border border-gray-700/30"
          >
            <RadioGroupItem
              value={option.value}
              id={`${field}-${option.value}`}
              className="border-gray-600"
            />
            <Label
              htmlFor={`${field}-${option.value}`}
              className="text-white cursor-pointer"
            >
              {option.label}
            </Label>
          </div>
        ))}
      </RadioGroup>
    </div>
  );

  const renderCheckbox = (
    field: keyof typeof formData,
    label: React.ReactNode,
    required = false
  ) => (
    <div className="space-y-2">
      <div className="flex items-start space-x-4 p-4 bg-gray-800/20 rounded-lg border border-gray-700/30">
        <Checkbox
          id={field}
          checked={formData[field] as boolean}
          onCheckedChange={(checked) => {
            const updated = { ...formData, [field]: checked };
            setFormData(updated);
            setTouched({ ...touched, [field]: true });
            validateField(field, updated);
          }}
          className="mt-1"
        />
        <label
          htmlFor={field}
          className="text-gray-300 leading-relaxed cursor-pointer"
        >
          {label}
        </label>
      </div>
      {errors[field] && (
        <p className="text-red-400 text-sm mt-1">{errors[field]}</p>
      )}
    </div>
  );

  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-6">
            <span className="text-white">Tell Us About Your </span>
            <span className="text-[#E5195E]">Project</span>
          </h2>
          <p className="text-lg text-gray-300 leading-relaxed max-w-2xl mx-auto">
            Fill out the form below and our experts will get back to you within
            24 hours
          </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="max-w-4xl mx-auto"
        >
          <Card className="bg-gray-900/30 backdrop-blur-md border-gray-700/30 rounded-3xl overflow-hidden shadow-2xl">
            <CardContent className="p-12">
              <form onSubmit={handleSubmit} className="space-y-10">
                {/* Personal Information Section */}
                <div className="space-y-8">
                  <h3 className="text-xl font-semibold text-white border-b border-gray-700 pb-4">
                    Personal Information
                  </h3>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    {renderInputField(
                      "name",
                      "Your Name",
                      "Enter your full name"
                    )}
                    {renderInputField(
                      "email",
                      "Email Address",
                      "your.email@company.com",
                      "email"
                    )}
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    {renderSelectField(
                      "country",
                      "Country",
                      "Select your country",
                      [
                        { value: "us", label: "United States" },
                        { value: "uk", label: "United Kingdom" },
                        { value: "ca", label: "Canada" },
                        { value: "au", label: "Australia" },
                        { value: "in", label: "India" },
                        { value: "de", label: "Germany" },
                        { value: "fr", label: "France" },
                        { value: "other", label: "Other" },
                      ],
                      (value) => {
                        // When country changes, update the phone field if it's empty or starts with a +
                        const updated = { ...formData, country: value };
                        if (!formData.phone || formData.phone.startsWith("+")) {
                          updated.phone = COUNTRY_CODES[value] || "";
                        }
                        setFormData(updated);
                        setTouched({ ...touched, country: true });
                        validateField("country", updated);
                      }
                    )}
                    {renderInputField(
                      "phone",
                      "Contact Number",
                      formData.country ? `${COUNTRY_CODES[formData.country] || "+"} (XXX) XXX-XXXX` : "+XX (XXX) XXX-XXXX"
                    )}
                  </div>
                </div>

                {/* Project Information Section */}
                <div className="space-y-8">
                  <h3 className="text-xl font-semibold text-white border-b border-gray-700 pb-4">
                    Project Information
                  </h3>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    {renderSelectField(
                      "services",
                      "Select Services",
                      "Choose primary service",
                      [
                        {
                          value: "mobile-app",
                          label: "Mobile App Development",
                        },
                        { value: "web-development", label: "Web Development" },
                        { value: "ai-ml", label: "AI & Machine Learning" },
                        { value: "ui-ux", label: "UI/UX Design" },
                        { value: "enterprise", label: "Enterprise Solutions" },
                        { value: "consultation", label: "Consultation" },
                      ]
                    )}
                    {renderSelectField(
                      "budget",
                      "Budget Range",
                      "Select budget range",
                      [
                        { value: "under-25k", label: "Under $25,000" },
                        { value: "25k-50k", label: "$25,000 - $50,000" },
                        { value: "50k-100k", label: "$50,000 - $100,000" },
                        { value: "100k-250k", label: "$100,000 - $250,000" },
                        { value: "250k-500k", label: "$250,000 - $500,000" },
                        { value: "500k-plus", label: "$500,000+" },
                      ]
                    )}
                  </div>

                  {renderTextarea(
                    "projectDescription",
                    "Project Description",
                    "Tell us about your project vision, goals, and key requirements..."
                  )}

                  {renderRadioGroup(
                    "developmentStage",
                    "Current Development Stage",
                    [
                      { value: "idea", label: "Idea" },
                      { value: "designed", label: "Designed Solution" },
                      { value: "prototype", label: "Prototype/Spec" },
                      { value: "mvp", label: "MVP" },
                    ],
                    "grid-cols-2 md:grid-cols-4"
                  )}
                </div>

                {/* Additional Details Section */}
                <div className="space-y-8">
                  <h3 className="text-xl font-semibold text-white border-b border-gray-700 pb-4">
                    Additional Details
                  </h3>

                  <div className="space-y-4">
                    <label className="block text-sm font-medium text-white">
                      Project Attachments
                    </label>
                    <div className="border-2 border-dashed border-gray-600/50 rounded-xl p-8 text-center bg-gray-800/10">
                      <Upload className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                      <p className="text-gray-300 mb-2 font-medium">
                        Upload Additional Files
                      </p>
                      <p className="text-sm text-gray-500 mb-6">
                        Attach wireframes, designs, or requirements. Max file
                        size: 10MB
                      </p>
                      <input
                        type="file"
                        multiple
                        accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.fig"
                        onChange={handleFileUpload}
                        className="hidden"
                        id="file-upload"
                      />
                      <Button
                        type="button"
                        variant="outline"
                        onClick={() =>
                          document.getElementById("file-upload")?.click()
                        }
                        className="border-gray-600 text-white hover:bg-gray-800 h-12"
                      >
                        <Upload className="w-4 h-4 mr-2" />
                        Choose Files
                      </Button>
                    </div>

                    {attachedFiles.length > 0 && (
                      <div className="space-y-3">
                        {attachedFiles.map((file, index) => (
                          <div
                            key={index}
                            className="flex items-center justify-between bg-gray-800/30 p-4 rounded-lg border border-gray-700/30"
                          >
                            <div className="flex items-center space-x-3">
                              <FileText className="w-5 h-5 text-[#E5195E]" />
                              <span className="text-white font-medium">
                                {file.name}
                              </span>
                              <span className="text-gray-400 text-sm">
                                ({(file.size / 1024 / 1024).toFixed(1)} MB)
                              </span>
                            </div>
                            <Button
                              type="button"
                              variant="ghost"
                              size="sm"
                              onClick={() => removeFile(index)}
                              className="text-red-400 hover:text-red-300 hover:bg-red-900/20"
                            >
                              Remove
                            </Button>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>

                  {renderRadioGroup(
                    "timeline",
                    "Expected Start Timeline",
                    [
                      { value: "1-month", label: "1 Month" },
                      { value: "6-month", label: "6 Months" },
                      { value: "1-year", label: "1 Year" },
                      { value: "1.5-year", label: "1.5 Years" },
                      { value: "2-plus-year", label: "2+ Years" },
                    ],
                    "grid-cols-2 md:grid-cols-5"
                  )}
                </div>

                {/* Legal & Agreements */}
                <div className="space-y-6">
                  {renderCheckbox(
                    "ndaRequired",
                    "I want to protect my data by signing an NDA (Non-Disclosure Agreement)"
                  )}
                  {renderCheckbox(
                    "agreeTerms",
                    <>
                      I agree to the{" "}
                      <span className="text-[#E5195E] underline">
                        terms & conditions
                      </span>{" "}
                      and{" "}
                      <span className="text-[#E5195E] underline">
                        privacy policy
                      </span>{" "}
                      *
                    </>,
                    true
                  )}
                </div>

                {/* Security Verification Section */}
                <div className="space-y-6">
                  <h3 className="text-xl font-semibold text-white border-b border-gray-700 pb-4 flex items-center gap-3">
                    <Shield className="w-5 h-5 text-[#E5195E]" />
                    Security Verification
                  </h3>

                  <div className="space-y-4">
                    <label className="block text-sm font-medium text-white text-center">
                      Please verify that you're not a robot *
                    </label>

                    <CustomReCaptcha
                      ref={recaptchaRef}
                      siteKey="6LfLmWcqAAAAAI5si2QlIliue1K8fhNpMcOs-poL"
                      onVerify={handleRecaptchaVerify}
                      onExpired={() => setIsRecaptchaVerified(false)}
                      onError={() => setIsRecaptchaVerified(false)}
                      className="w-full"
                    />

                    {isRecaptchaVerified && (
                      <div className="flex items-center justify-center gap-2 text-green-400 text-sm">
                        <CheckCircle className="w-4 h-4" />
                        <span>Verification successful</span>
                      </div>
                    )}
                  </div>
                </div>

                {/* Submit Button */}
                <div className="pt-8">
                  <ShimmerButton
                    type="submit"
                    className="w-full py-6 text-xl rounded-2xl shadow-lg hover:shadow-xl"
                    disabled={!formData.agreeTerms || isRecaptchaVerified || isLoading}
                  >
                    <div className="inline-flex items-center justify-center gap-3">
                      {isLoading ? (
                        <span>Submitting...</span>
                      ) : (
                        <>
                          <Rocket className="w-6 h-6 flex-shrink-0" />
                          <span>Submit Project Request</span>
                          <ArrowRight className="w-5 h-5" />
                        </>
                      )}
                    </div>
                  </ShimmerButton>

                  {errors.recaptcha && (
                    <p className="text-red-400 text-sm text-center mt-3">
                      {errors.recaptcha}
                    </p>
                  )}

                  {(!formData.agreeTerms || !isRecaptchaVerified) && (
                    <p className="text-center text-sm text-gray-400 mt-3">
                      {!formData.agreeTerms && !isRecaptchaVerified
                        ? "Please agree to terms and complete verification to submit"
                        : !formData.agreeTerms
                          ? "Please agree to terms and conditions to submit"
                          : "Please complete the security verification to submit"}
                    </p>
                  )}
                </div>
              </form>
            </CardContent>
          </Card>
        </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={() => navigateTo("/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 navigate = useNavigate();
  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.1 }}
                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={() => navigateTo("/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.1 }}
                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={() => navigateTo("/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={() => navigateTo("/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.1 }}
                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: () => navigateTo("/company/office-locations"),
    },
    {
      icon: Clock,
      title: "Business Hours",
      description: "We're available",
      contact: "Mon-Fri 11AM-8PM",
      action: () => navigateTo("/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.1 }}
                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={() => navigateTo("/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 />
      <ProjectFormSection />
      <VisionSection />
      <ProcessStepsSection />
      <WhyPartnerSection />
      <JoinWDISection />
      <ContactInfoSection />
      <Footer />
    </div>
  );
};