"use client";

import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import Link from "next/link";
import { useRouter } from "next/navigation";
import {
  User, Mail, Lock, Phone, Building2, ArrowRight, Eye, EyeOff,
  CheckCircle, Briefcase, Users, Camera, Zap, ShieldCheck, TrendingUp
} from "lucide-react";
import Header from "../components/Header";
import Footer from "../components/Footer";
import { useRegisterMutation, useSendRegistrationOtpMutation, useVerifyRegistrationOtpMutation } from "@/redux/apis/authApi";
import { useDispatch, useSelector } from "react-redux";
import { setCredentials, selectIsAuthenticated } from "@/redux/slices/authSlice";

export default function RegisterPage() {
  const router = useRouter();
  const dispatch = useDispatch();
  const isAuthenticated = useSelector(selectIsAuthenticated);
  const [register, { isLoading, error }] = useRegisterMutation();

  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
    mobileNumber: "",
    companyName: "",
    farmType: "",
    joinAsA: "",
    profileImage: null as File | null,
  });

  // Verification states
  const [otp, setOtp] = useState("");
  const [isOtpSent, setIsOtpSent] = useState(false);
  const [isEmailVerified, setIsEmailVerified] = useState(false);
  const [isSendingOtp, setIsSendingOtp] = useState(false);
  const [isVerifyingOtp, setIsVerifyingOtp] = useState(false);

  const [sendRegistrationOtp] = useSendRegistrationOtpMutation();
  const [verifyRegistrationOtp] = useVerifyRegistrationOtpMutation();

  // Ensure form is cleared on mount
  useEffect(() => {
    setFormData({
      name: "",
      email: "",
      password: "",
      confirmPassword: "",
      mobileNumber: "",
      companyName: "",
      farmType: "",
      joinAsA: "",
      profileImage: null,
    });
  }, []);

  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
    // Clear error for field when modified
    if (errors[name]) {
      setErrors(prev => {
        const newErrors = { ...prev };
        delete newErrors[name];
        return newErrors;
      });
    }
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      setFormData({
        ...formData,
        profileImage: e.target.files[0],
      });
    }
  };

  const handleSendOtp = async () => {
    if (!formData.email.trim()) {
      setErrors({ ...errors, email: "Email is required to send OTP" });
      return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      setErrors({ ...errors, email: "Invalid email format" });
      return;
    }

    try {
      setIsSendingOtp(true);
      await sendRegistrationOtp({ email: formData.email }).unwrap();
      setIsOtpSent(true);
    } catch (err: any) {
      console.error("Failed to send OTP:", err);
      alert(err.data?.message || "Failed to send OTP. Please try again.");
    } finally {
      setIsSendingOtp(false);
    }
  };

  const handleVerifyOtp = async () => {
    if (!otp.trim()) {
      alert("Please enter the OTP");
      return;
    }

    try {
      setIsVerifyingOtp(true);
      await verifyRegistrationOtp({ email: formData.email, otp: otp }).unwrap();
      setIsEmailVerified(true);
    } catch (err: any) {
      console.error("Failed to verify OTP:", err);
      alert(err.data?.message || "Invalid OTP. Please try again.");
    } finally {
      setIsVerifyingOtp(false);
    }
  };

  const validateForm = () => {
    const newErrors: Record<string, string> = {};

    if (!formData.name.trim()) newErrors.name = "Name is required";

    if (!formData.email.trim()) {
      newErrors.email = "Email is required";
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      newErrors.email = "Invalid email format";
    }

    if (!formData.mobileNumber.trim()) {
      newErrors.mobileNumber = "Mobile number is required";
    } else if (!/^[0-9]{10}$/.test(formData.mobileNumber)) {
      newErrors.mobileNumber = "Mobile number must be 10 digits";
    }

    if (!formData.password) {
      newErrors.password = "Password is required";
    } else if (formData.password.length < 8) {
      newErrors.password = "Min 8 characters required";
    }

    if (!formData.confirmPassword) {
      newErrors.confirmPassword = "Confirmation required";
    } else if (formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = "Passwords mismatch";
    }

    if (!formData.farmType) newErrors.farmType = "Required";
    if (!formData.joinAsA) newErrors.joinAsA = "Required";

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

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

    if (!validateForm()) return;

    if (!isEmailVerified) {
      // If OTP hasn't been sent/verified, trigger it or alert
      alert("Please verify your email address first.");
      return;
    }

    try {
      const submitData = new FormData();
      submitData.append("name", formData.name.trim());
      submitData.append("email", formData.email.trim().toLowerCase());
      submitData.append("password", formData.password);
      submitData.append("confirmPassword", formData.confirmPassword);
      submitData.append("mobileNumber", formData.mobileNumber.trim());
      if (formData.companyName.trim()) submitData.append("companyName", formData.companyName.trim());
      submitData.append("farmType", formData.farmType);
      submitData.append("joinAsA", formData.joinAsA);

      if (formData.profileImage) {
        submitData.append("profileImage", formData.profileImage);
      }

      const result = await register(submitData).unwrap();

      // Save credentials to Redux store
      dispatch(setCredentials({
        user: result.user,
        token: result.token,
      }));

      router.push("/");
    } catch (err: any) {
      console.error("Registration error:", err);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col font-sans text-gray-900 selection:bg-green-100 selection:text-green-700">
      <Header />

      <main className="flex-grow pt-28 pb-16 px-4 sm:px-6 lg:px-8">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="bg-white rounded-[2.5rem] shadow-2xl overflow-hidden flex flex-col lg:flex-row min-h-[800px]"
          >
            {/* Left Side - Visual Branding */}
            <div className="hidden lg:flex lg:w-2/5 bg-gradient-to-br from-green-600 via-emerald-600 to-teal-700 p-12 text-white flex-col justify-between relative overflow-hidden">
              {/* Decorative Background Elements */}
              <div className="absolute top-0 right-0 w-80 h-80 bg-white/10 rounded-full blur-3xl translate-x-1/2 -translate-y-1/2" />
              <div className="absolute bottom-0 left-0 w-64 h-64 bg-green-400/20 rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />

              <div className="relative z-10">
                <div className="w-12 h-12 bg-white/20 backdrop-blur-md rounded-2xl flex items-center justify-center mb-8 border border-white/30">
                  <Zap className="w-6 h-6 text-white" />
                </div>

                <h2 className="text-4xl font-bold leading-tight mb-6">
                  Empowering <br />
                  <span className="text-green-200">Solar Business</span> <br />
                  Together.
                </h2>

                <p className="text-green-100 text-lg mb-10 max-w-sm">
                  Join Maharashtra's premier network of solar professionals. verified tenders, trusted partners, and limitless growth.
                </p>

                <div className="space-y-6">
                  {[
                    { icon: ShieldCheck, text: "Verified Government Tenders" },
                    { icon: Users, text: "Exclusive Partner Network" },
                    { icon: TrendingUp, text: "Market Insights & Analytics" }
                  ].map((item, idx) => (
                    <motion.div
                      key={idx}
                      initial={{ opacity: 0, x: -20 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: 0.4 + (idx * 0.1) }}
                      className="flex items-center gap-4 group"
                    >
                      <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-green-400 group-hover:text-green-900 transition-colors duration-300">
                        <item.icon className="w-5 h-5" />
                      </div>
                      <span className="font-medium">{item.text}</span>
                    </motion.div>
                  ))}
                </div>
              </div>

              <div className="relative z-10 mt-12 pt-12 border-t border-white/20">
                <p className="text-sm text-green-200">
                  © 2024 Maharashtra Solar Business Syndicate. <br />All rights reserved.
                </p>
              </div>
            </div>

            {/* Right Side - Registration Form */}
            <div className="w-full lg:w-3/5 p-6 md:p-12 lg:p-16 bg-white overflow-y-auto relative">

              {/* Mobile Logo */}
              <div className="lg:hidden flex justify-center mb-8">
                <div className="w-16 h-16 bg-green-50 rounded-2xl flex items-center justify-center p-3">
                  <Zap className="w-8 h-8 text-green-600" />
                </div>
              </div>

              <div className="max-w-lg mx-auto">
                <div className="mb-8 lg:mb-10 text-center lg:text-left">
                  <h1 className="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-2 tracking-tight">Create Account</h1>
                  <p className="text-sm lg:text-base text-gray-500 font-medium">
                    Join us today! Please fill in your details below.
                  </p>
                </div>

                <form onSubmit={handleSubmit} className="space-y-5" autoComplete="off">
                  {/* Name & Mobile Grid */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div className="space-y-2">
                      <label className="text-xs sm:text-sm font-bold text-gray-700 ml-1">Full Name <span className="text-red-500">*</span></label>
                      <div className="relative group">
                        <User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 group-focus-within:text-green-600 transition-colors" />
                        <input
                          type="text"
                          name="name"
                          value={formData.name}
                          onChange={handleChange}
                          className={`w-full pl-10 pr-4 py-3 rounded-xl border ${errors.name ? 'border-red-300 bg-red-50' : 'border-gray-200 bg-white'} focus:bg-white focus:border-green-500 focus:ring-4 focus:ring-green-500/10 transition-all outline-none font-medium shadow-sm group-hover:border-gray-300`}
                          placeholder="John Doe"
                        />
                      </div>
                      {errors.name && <p className="text-xs text-red-500 font-medium ml-1">{errors.name}</p>}
                    </div>

                    <div className="space-y-2">
                      <label className="text-xs sm:text-sm font-bold text-gray-700 ml-1">Mobile Number <span className="text-red-500">*</span></label>
                      <div className="relative group">
                        <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 group-focus-within:text-green-600 transition-colors" />
                        <input
                          type="tel"
                          name="mobileNumber"
                          value={formData.mobileNumber}
                          onChange={handleChange}
                          maxLength={10}
                          className={`w-full pl-10 pr-4 py-3 rounded-xl border ${errors.mobileNumber ? 'border-red-300 bg-red-50' : 'border-gray-200 bg-white'} focus:bg-white focus:border-green-500 focus:ring-4 focus:ring-green-500/10 transition-all outline-none font-medium shadow-sm group-hover:border-gray-300`}
                          placeholder="9876543210"
                        />
                      </div>
                      {errors.mobileNumber && <p className="text-xs text-red-500 font-medium ml-1">{errors.mobileNumber}</p>}
                    </div>
                  </div>

                  {/* Email & OTP Section */}
                  <div className="space-y-2">
                    <label className="text-xs sm:text-sm font-bold text-gray-700 ml-1">Email Address <span className="text-red-500">*</span></label>
                    <div className="flex gap-3">
                      <div className="relative flex-grow group">
                        <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 group-focus-within:text-green-600 transition-colors" />
                        <input
                          type="email"
                          name="email"
                          value={formData.email}
                          onChange={handleChange}
                          disabled={isEmailVerified}
                          className={`w-full pl-10 pr-4 py-3 rounded-xl border ${errors.email ? 'border-red-300 bg-red-50' : 'border-gray-200 bg-white'} focus:bg-white focus:border-green-500 focus:ring-4 focus:ring-green-500/10 transition-all outline-none disabled:opacity-70 font-medium shadow-sm group-hover:border-gray-300`}
                          placeholder="john@example.com"
                        />
                        {isEmailVerified && <CheckCircle className="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-green-500" />}
                      </div>
                      {!isEmailVerified && !isOtpSent && (
                        <button
                          type="button"
                          onClick={handleSendOtp}
                          disabled={isSendingOtp}
                          className="px-5 py-2.5 bg-gray-900 text-white rounded-xl text-sm font-bold hover:bg-gray-800 disabled:opacity-50 transition-colors whitespace-nowrap shadow-md hover:shadow-lg"
                        >
                          {isSendingOtp ? "Sending..." : "Send OTP"}
                        </button>
                      )}
                    </div>
                    {errors.email && <p className="text-xs text-red-500 font-medium ml-1">{errors.email}</p>}
                  </div>

                  {/* OTP Input Field (Animated) */}
                  <AnimatePresence>
                    {isOtpSent && !isEmailVerified && (
                      <motion.div
                        initial={{ opacity: 0, height: 0, marginTop: 0 }}
                        animate={{ opacity: 1, height: "auto", marginTop: 12 }}
                        exit={{ opacity: 0, height: 0, marginTop: 0 }}
                        className="bg-green-50 border border-green-100 rounded-xl p-4 overflow-hidden"
                      >
                        <div className="flex items-end gap-3">
                          <div className="flex-grow space-y-1.5">
                            <label className="text-xs font-semibold text-green-800 uppercase tracking-wider">Verification Code</label>
                            <input
                              type="text"
                              value={otp}
                              onChange={(e) => setOtp(e.target.value)}
                              placeholder="Enter 6-digit code"
                              maxLength={6}
                              className="w-full bg-white border border-green-200 rounded-lg px-4 py-2 focus:ring-2 focus:ring-green-500 focus:border-green-500 outline-none text-lg tracking-widest text-center shadow-sm"
                            />
                          </div>
                          <button
                            type="button"
                            onClick={handleVerifyOtp}
                            disabled={isVerifyingOtp || otp.length < 6}
                            className="h-[46px] px-6 bg-green-600 text-white rounded-lg font-bold hover:bg-green-700 disabled:opacity-50 transition-colors shadow-md"
                          >
                            {isVerifyingOtp ? "..." : "Verify"}
                          </button>
                        </div>
                        <p className="text-xs text-green-600 mt-2 flex items-center gap-1 font-medium">
                          <Mail className="w-3 h-3" /> Code sent to {formData.email}
                        </p>
                      </motion.div>
                    )}
                  </AnimatePresence>

                  {/* Company & Role Grid */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div className="space-y-2">
                      <label className="text-xs sm:text-sm font-bold text-gray-700 ml-1">Company Name</label>
                      <div className="relative group">
                        <Building2 className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 group-focus-within:text-green-600 transition-colors" />
                        <input
                          type="text"
                          name="companyName"
                          value={formData.companyName}
                          onChange={handleChange}
                          className="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-200 bg-white focus:bg-white focus:border-green-500 focus:ring-4 focus:ring-green-500/10 transition-all outline-none font-medium shadow-sm group-hover:border-gray-300"
                          placeholder="Optional"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <label className="text-xs sm:text-sm font-bold text-gray-700 ml-1">Join As <span className="text-red-500">*</span></label>
                      <div className="relative group">
                        <Users className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 group-focus-within:text-green-600 transition-colors" />
                        <select
                          name="joinAsA"
                          value={formData.joinAsA}
                          onChange={handleChange}
                          className={`w-full pl-10 pr-8 py-3 rounded-xl border ${errors.joinAsA ? 'border-red-300 bg-red-50' : 'border-gray-200 bg-white'} focus:bg-white focus:border-green-500 focus:ring-4 focus:ring-green-500/10 transition-all outline-none appearance-none cursor-pointer font-medium shadow-sm group-hover:border-gray-300`}
                        >
                          <option value="">Select Role</option>
                          <option value="Franchise Partner">Franchise Partner</option>
                          <option value="Distributers">Distributers</option>
                          <option value="Dealer">Dealer</option>
                          <option value="EPC Wender">EPC Vendor</option>
                          <option value="Stockist">Stockist</option>
                          <option value="Treaders">Traders</option>
                          <option value="Manpower Suppliers">Manpower Suppliers</option>
                          <option value="Machinery Suppliers">Machinery Suppliers</option>
                          <option value="JV Partners">JV Partners</option>
                          <option value="Finances Partners">Finances Partners</option>
                          <option value="Sub-Vendor">Sub-Vendor</option>
                        </select>
                        {errors.joinAsA && <p className="text-xs text-red-500 font-medium ml-1">{errors.joinAsA}</p>}
                      </div>
                    </div>
                  </div>

                  {/* Farm Type & Profile Image Grid */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div className="space-y-2">
                      <label className="text-xs sm:text-sm font-bold text-gray-700 ml-1">Farm Type <span className="text-red-500">*</span></label>
                      <div className="relative group">
                        <Briefcase className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 group-focus-within:text-green-600 transition-colors" />
                        <select
                          name="farmType"
                          value={formData.farmType}
                          onChange={handleChange}
                          className={`w-full pl-10 pr-8 py-3 rounded-xl border ${errors.farmType ? 'border-red-300 bg-red-50' : 'border-gray-200 bg-white'} focus:bg-white focus:border-green-500 focus:ring-4 focus:ring-green-500/10 transition-all outline-none appearance-none cursor-pointer font-medium shadow-sm group-hover:border-gray-300`}
                        >
                          <option value="">Select Type</option>
                          <option value="Pro Parity">Pro Parity</option>
                          <option value="Partnership">Partnership</option>
                          <option value="Private Limited">Private Limited</option>
                          <option value="LLP">LLP</option>
                          <option value="OPC">OPC</option>
                        </select>
                        {errors.farmType && <p className="text-xs text-red-500 font-medium ml-1">{errors.farmType}</p>}
                      </div>
                    </div>

                    <div className="space-y-2">
                      <label className="text-xs sm:text-sm font-bold text-gray-700 ml-1">Profile Photo <span className="text-xs text-gray-400 font-normal">(Passport)</span></label>
                      <div className="relative group">
                        <Camera className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 group-focus-within:text-green-600 transition-colors" />
                        <input
                          type="file"
                          accept="image/*"
                          onChange={handleFileChange}
                          className="w-full pl-10 pr-2 py-2.5 rounded-xl border border-gray-200 bg-white file:mr-4 file:py-1 file:px-3 file:rounded-full file:border-0 file:text-xs file:font-semibold file:bg-green-50 file:text-green-700 hover:file:bg-green-100 text-sm text-gray-500 shadow-sm cursor-pointer group-hover:border-gray-300"
                        />
                      </div>
                    </div>
                  </div>

                  {/* Passwords */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div className="space-y-2">
                      <label className="text-xs sm:text-sm font-bold text-gray-700 ml-1">Password <span className="text-red-500">*</span></label>
                      <div className="relative group">
                        <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 group-focus-within:text-green-600 transition-colors" />
                        <input
                          type={showPassword ? "text" : "password"}
                          name="password"
                          value={formData.password}
                          onChange={handleChange}
                          className={`w-full pl-10 pr-10 py-3 rounded-xl border ${errors.password ? 'border-red-300 bg-red-50' : 'border-gray-200 bg-white'} focus:bg-white focus:border-green-500 focus:ring-4 focus:ring-green-500/10 transition-all outline-none font-medium shadow-sm group-hover:border-gray-300`}
                          placeholder="Min 8 chars"
                        />
                        <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                          {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                        </button>
                      </div>
                      {errors.password && <p className="text-xs text-red-500 font-medium ml-1">{errors.password}</p>}
                    </div>

                    <div className="space-y-2">
                      <label className="text-xs sm:text-sm font-bold text-gray-700 ml-1">Confirm <span className="text-red-500">*</span></label>
                      <div className="relative group">
                        <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 group-focus-within:text-green-600 transition-colors" />
                        <input
                          type={showConfirmPassword ? "text" : "password"}
                          name="confirmPassword"
                          value={formData.confirmPassword}
                          onChange={handleChange}
                          className={`w-full pl-10 pr-10 py-3 rounded-xl border ${errors.confirmPassword ? 'border-red-300 bg-red-50' : 'border-gray-200 bg-white'} focus:bg-white focus:border-green-500 focus:ring-4 focus:ring-green-500/10 transition-all outline-none font-medium shadow-sm group-hover:border-gray-300`}
                          placeholder="Repeat password"
                        />
                        <button type="button" onClick={() => setShowConfirmPassword(!showConfirmPassword)} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                          {showConfirmPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                        </button>
                      </div>
                      {errors.confirmPassword && <p className="text-xs text-red-500 font-medium ml-1">{errors.confirmPassword}</p>}
                    </div>
                  </div>

                  {/* Error Alert */}
                  {error && (
                    <div className="p-4 bg-red-50 border border-red-200 rounded-xl flex items-start gap-3 animate-pulse">
                      <div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center shrink-0 mt-0.5">
                        <span className="text-red-600 font-bold text-xs">!</span>
                      </div>
                      <p className="text-sm text-red-600 font-medium">
                        {("data" in error && (error.data as any)?.message) || "Registration failed. Please try again."}
                      </p>
                    </div>
                  )}

                  <div className="pt-4">
                    <button
                      type="submit"
                      disabled={isLoading || !isEmailVerified}
                      className="w-full py-4 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-xl font-bold shadow-lg shadow-green-500/30 hover:shadow-xl hover:shadow-green-500/40 hover:-translate-y-0.5 disabled:opacity-50 disabled:shadow-none disabled:translate-y-0 transition-all duration-300 flex items-center justify-center gap-2 text-base tracking-wide"
                    >
                      {isLoading ? (
                        <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                      ) : (
                        <>Create Account <ArrowRight className="w-5 h-5" /></>
                      )}
                    </button>
                  </div>
                </form>

                {/* Login Link */}
                <div className="mt-8 pt-6 border-t border-gray-100 text-center pb-4">
                  <p className="text-gray-500 text-sm font-medium">
                    Already a member?
                    <Link href="/login" className="ml-2 text-green-700 font-bold hover:text-green-800 hover:underline transition-all">
                      Log in here
                    </Link>
                  </p>
                </div>

              </div>
            </div>
          </motion.div>
        </div>
      </main>

      <Footer />
    </div>
  );
}