import React, { useState, useEffect, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ShieldCheck, CheckCircle, ChevronRight, Lock, UploadCloud, FileText, Clock } from 'lucide-react';
import { useAuthStore } from '../hooks/use-auth';
import { SignatureCapture } from '../features/agreements/components/SignatureCapture';
import { useNavigate } from 'react-router-dom';
import {
  getActiveLegalDocument,
  getMyAcceptances,
  uploadSignedLegalDocument,
  signLegalDocument
} from '../services/legal-api';
import { useToast } from '../hooks/use-toast';

type DocumentType = 'NDA' | 'MSA';

export const OnboardingPage: React.FC = () => {
  const { success, error: toastError } = useToast();
  const { user, checkAuth } = useAuthStore();
  const navigate = useNavigate();
  const [step, setStep] = useState(1);
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  // State for NDA
  const [ndaSignature, setNdaSignature] = useState<string | null>(null);
  const [ndaUploadUrl, setNdaUploadUrl] = useState<string | null>(null);
  const [ndaMode, setNdaMode] = useState<'draw' | 'upload'>('draw');

  // State for MSA
  const [msaSignature, setMsaSignature] = useState<string | null>(null);
  const [msaUploadUrl, setMsaUploadUrl] = useState<string | null>(null);
  const [msaMode, setMsaMode] = useState<'draw' | 'upload'>('draw');

  const fileInputRef = useRef<HTMLInputElement>(null);

  const [ndaContent, setNdaContent] = useState<string>('');
  const [ndaPdfUrl, setNdaPdfUrl] = useState<string | null>(null);
  const [msaContent, setMsaContent] = useState<string>('');
  const [msaPdfUrl, setMsaPdfUrl] = useState<string | null>(null);
  const [loadingDocs, setLoadingDocs] = useState(true);
  const [ndaSkipped, setNdaSkipped] = useState(false);
  const [msaSkipped, setMsaSkipped] = useState(false);

  useEffect(() => {
    const fetchDocs = async () => {
      try {
        const [ndaData, msaData] = await Promise.all([
          getActiveLegalDocument('NDA'),
          getActiveLegalDocument('MSA')
        ]);
        
        const ndaIsSkipped = !!ndaData.skipped;
        const msaIsSkipped = !!msaData.skipped;
        
        setNdaSkipped(ndaIsSkipped);
        setMsaSkipped(msaIsSkipped);

        if (!ndaIsSkipped) {
          setNdaContent(ndaData.content);
          setNdaPdfUrl(ndaData.pdfUrl || null);
        }
        if (!msaIsSkipped) {
          setMsaContent(msaData.content);
          setMsaPdfUrl(msaData.pdfUrl || null);
        }

        // Fetch acceptances to determine active step
        const acceptances = await getMyAcceptances();
        const ndaAcceptance = acceptances.find((a: any) => a.document.type === 'NDA');
        const msaAcceptance = acceptances.find((a: any) => a.document.type === 'MSA');
        
        if (ndaAcceptance) {
          if (ndaAcceptance.signatureBase64) {
            setNdaSignature(ndaAcceptance.signatureBase64);
            setNdaMode('draw');
          } else if (ndaAcceptance.documentUrl) {
            setNdaUploadUrl(ndaAcceptance.documentUrl);
            setNdaMode('upload');
          }
        }
        
        if (msaAcceptance) {
          if (msaAcceptance.signatureBase64) {
            setMsaSignature(msaAcceptance.signatureBase64);
            setMsaMode('draw');
          } else if (msaAcceptance.documentUrl) {
            setMsaUploadUrl(msaAcceptance.documentUrl);
            setMsaMode('upload');
          }
        }

        // Determine step based on skipped/accepted statuses
        if (ndaIsSkipped || ndaAcceptance) {
          if (msaIsSkipped || msaAcceptance) {
            setStep(3); // both done/skipped
          } else {
            setStep(2); // nda done/skipped, msa needed
          }
        } else {
          setStep(1); // nda needed
        }
      } catch (err) {
        console.error('Failed to fetch legal documents:', err);
      } finally {
        setLoadingDocs(false);
      }
    };

    if (user?.onboardingStatus === 'APPROVED') {
      navigate('/client');
    } else if (user?.onboardingStatus === 'PENDING_APPROVAL') {
      setStep(3);
      setLoadingDocs(false);
    } else {
      fetchDocs();
    }
  }, [user, navigate]);

  const handlePrint = (type: DocumentType) => {
    const content = type === 'NDA' ? ndaContent : msaContent;
    const printWindow = window.open('', '_blank');
    if (!printWindow) return;
    printWindow.document.write(`
      <html>
        <head>
          <title>Standard ${type} Agreement</title>
          <style>
            body { font-family: serif; line-height: 1.6; padding: 50px; color: #111; max-width: 800px; margin: 0 auto; }
            h1 { font-family: sans-serif; text-align: center; border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 30px; }
            .content { white-space: pre-wrap; font-size: 15px; margin-bottom: 50px; }
            .footer { border-top: 1px solid #ccc; padding-top: 20px; font-size: 12px; color: #666; text-align: center; }
          </style>
        </head>
        <body>
          <h1>Tech4Biz Standard ${type} Agreement</h1>
          <div class="content">${content}</div>
          <div class="footer">Confidential document. Tech4Biz Solutions Inc.</div>
          <script>
            window.onload = function() {
              window.print();
            }
          </script>
        </body>
      </html>
    `);
    printWindow.document.close();
  };

  const renderDocumentViewer = (type: DocumentType) => {
    const fileHost = (import.meta.env.VITE_API_URL || '/api/v1').replace('/api/v1', '');
    const pdfUrl = type === 'NDA' ? ndaPdfUrl : msaPdfUrl;

    if (pdfUrl) {
      return (
        <div className="mb-6 flex flex-col animate-fade-in">
          <div className="flex items-center justify-between mb-2">
            <span className="text-xs font-bold uppercase tracking-wider text-ink-400">Agreement Terms (PDF)</span>
            <a 
              href={`${fileHost}${pdfUrl}`}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold rounded-lg border border-ink-200 hover:bg-ink-100 text-ink-700 hover:text-ink-900 transition-colors"
            >
              <FileText className="w-3.5 h-3.5" />
              Open / Print PDF
            </a>
          </div>
          <div className="h-64 rounded-xl border border-ink-200 overflow-hidden bg-ink-50 shadow-inner">
            <iframe 
              src={`${fileHost}${pdfUrl}#toolbar=1`} 
              className="w-full h-full border-0" 
              title={`Standard ${type} Document`}
            />
          </div>
        </div>
      );
    }

    return (
      <div className="mb-6 flex flex-col">
        <div className="flex items-center justify-between mb-2">
          <span className="text-xs font-bold uppercase tracking-wider text-ink-400">Agreement Terms</span>
          <button 
            type="button" 
            onClick={() => handlePrint(type)}
            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold rounded-lg border border-ink-200 hover:bg-ink-100 text-ink-700 hover:text-ink-900 transition-colors"
          >
            <FileText className="w-3.5 h-3.5" />
            Print / Save PDF
          </button>
        </div>
        <div className="h-64 overflow-y-auto p-6 bg-ink-0 rounded-xl border border-ink-200 text-sm leading-relaxed text-ink-800 font-serif whitespace-pre-wrap tracking-wide shadow-sm scrollbar-thin scrollbar-thumb-ink-300">
          {loadingDocs ? (
            <div className="flex h-full items-center justify-center">
              <div className="w-6 h-6 border-2 border-ink-900 border-t-transparent rounded-full animate-spin"></div>
            </div>
          ) : (
            type === 'NDA' ? ndaContent : msaContent
          )}
        </div>
      </div>
    );
  };

  useEffect(() => {
    let intervalId: any;
    
    if (user?.onboardingStatus === 'PENDING_APPROVAL' || step === 3) {
      intervalId = setInterval(async () => {
        try {
          await checkAuth();
        } catch (err) {
          console.error('Failed to poll auth status:', err);
        }
      }, 5000); // Poll every 5s
    }
    
    return () => {
      if (intervalId) clearInterval(intervalId);
    };
  }, [user?.onboardingStatus, step, checkAuth]);

  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>, type: DocumentType) => {
    const file = e.target.files?.[0];
    if (!file) return;

    setIsSubmitting(true);
    try {
      const formData = new FormData();
      formData.append('file', file);
      formData.append('title', `Signed ${type} - ${user?.email}`);

      const data = await uploadSignedLegalDocument(formData);

      if (type === 'NDA') setNdaUploadUrl(data.url);
      if (type === 'MSA') setMsaUploadUrl(data.url);
      success("Document uploaded successfully", `Signed ${type} has been uploaded.`);
    } catch (err: any) {
      console.error(`Failed to upload ${type}:`, err);
      toastError("Upload failed", err.response?.data?.error || `Failed to upload signed ${type}.`);
    } finally {
      setIsSubmitting(false);
    }
  };

  const submitDocument = async (type: DocumentType) => {
    setIsSubmitting(true);
    try {
      const signatureBase64 = type === 'NDA' ? ndaSignature : msaSignature;
      const documentUrl = type === 'NDA' ? ndaUploadUrl : msaUploadUrl;

      await signLegalDocument({
        documentType: type,
        signatureBase64,
        documentUrl
      });
      
      success(`${type} Agreement signed`, `Your signature on the ${type} has been registered.`);

      if (type === 'NDA') {
        if (msaSkipped) {
          await checkAuth();
          setStep(3);
        } else {
          setStep(2);
        }
      } else {
        await checkAuth();
        setStep(3); // PENDING_APPROVAL
      }
    } catch (err: any) {
      console.error(`Failed to submit ${type}:`, err);
      toastError("Submission failed", err.response?.data?.error || `Failed to submit signed ${type}.`);
    } finally {
      setIsSubmitting(false);
    }
  };

  const renderDocumentTab = (type: DocumentType, mode: 'draw' | 'upload', setMode: any, signature: any, setSignature: any, uploadUrl: any, setUploadUrl: any) => (
    <div className="flex-1 flex flex-col mb-8">
      <div className="flex bg-ink-100 rounded-xl p-1 mb-6 max-w-sm">
        <button
          onClick={() => setMode('draw')}
          className={`flex-1 py-2 text-sm font-bold rounded-lg transition-all ${mode === 'draw' ? 'bg-ink-0 shadow text-ink-900 border border-ink-200' : 'text-ink-500 hover:text-ink-900'}`}
        >
          Draw Signature
        </button>
        <button
          onClick={() => setMode('upload')}
          className={`flex-1 py-2 text-sm font-bold rounded-lg transition-all ${mode === 'upload' ? 'bg-ink-0 shadow text-ink-900 border border-ink-200' : 'text-ink-500 hover:text-ink-900'}`}
        >
          Upload PDF
        </button>
      </div>

      {mode === 'draw' ? (
        <div className="flex-1 flex flex-col justify-center">
          <SignatureCapture onSignatureComplete={setSignature} initialSignature={signature} />
          {signature && (
            <div className="mt-6 flex items-center justify-between p-4 bg-ink-100 border border-ink-300 rounded-xl">
              <div className="flex items-center gap-3">
                <CheckCircle className="w-5 h-5 text-ink-900" />
                <span className="font-semibold text-ink-900 text-sm">Signature captured successfully</span>
              </div>
              <button onClick={() => setSignature(null)} className="text-xs font-bold text-ink-900 underline">Redraw</button>
            </div>
          )}
        </div>
      ) : (
        <div className="flex-1 flex flex-col justify-center items-center p-12 border-2 border-dashed border-ink-200 rounded-2xl bg-ink-50 transition-colors hover:bg-ink-100">
          <input 
            type="file" 
            ref={fileInputRef} 
            onChange={(e) => handleFileUpload(e, type)} 
            className="hidden" 
            accept=".pdf,.doc,.docx,.jpg,.png" 
          />
          
          {uploadUrl ? (
            <div className="text-center">
              <div className="w-16 h-16 bg-ink-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <CheckCircle className="w-8 h-8 text-ink-900" />
              </div>
              <h3 className="font-bold text-ink-900 mb-2">Document Uploaded</h3>
              <button onClick={() => setUploadUrl(null)} className="text-sm font-bold text-ink-500 hover:text-ink-900 underline">Remove & Replace</button>
            </div>
          ) : (
            <div className="text-center">
              <div className="w-16 h-16 bg-ink-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <UploadCloud className="w-8 h-8 text-ink-500" />
              </div>
              <h3 className="font-bold text-ink-900 mb-2">Upload Signed Document</h3>
              <p className="text-sm text-ink-500 mb-6">PDF, Word, or Image formats accepted.</p>
              <button 
                onClick={() => fileInputRef.current?.click()}
                disabled={isSubmitting}
                className="px-6 py-2.5 bg-ink-900 text-ink-0 font-bold rounded-xl hover:shadow-lg transition-all"
              >
                {isSubmitting ? 'Uploading...' : 'Browse Files'}
              </button>
            </div>
          )}
        </div>
      )}
    </div>
  );

  return (
    <div className="min-h-screen bg-ink-50 text-ink-900 font-sans flex items-center justify-center p-4">
      {/* Dynamic Background Accents using monochromatic themes */}
      <div className="fixed top-0 right-0 w-[600px] h-[600px] bg-ink-900/5 rounded-full blur-[150px] pointer-events-none" />
      <div className="fixed bottom-0 left-[10%] w-[500px] h-[500px] bg-ink-900/5 rounded-full blur-[120px] pointer-events-none" />

      <div className="w-full max-w-5xl bg-ink-0 rounded-[2rem] shadow-2xl border border-ink-200 overflow-hidden relative z-10 flex flex-col md:flex-row min-h-[700px]">
        
        {/* Left Side: Progress & Info */}
        <div className="w-full md:w-1/3 bg-ink-50/50 border-r border-ink-200 p-8 flex flex-col">
          <div className="flex items-center gap-3 mb-12">
            <div className="w-10 h-10 rounded-xl flex items-center justify-center bg-gradient-to-br from-ink-900 to-ink-800 shadow-lg">
              <ShieldCheck className="w-5 h-5 text-ink-0" />
            </div>
            <span className="text-xl font-extrabold tracking-tight">Tech4Biz</span>
          </div>

          <div className="space-y-8 flex-1">
            <div className="relative pl-8">
              <div className="absolute left-0 top-1 w-6 h-6 rounded-full bg-ink-900 flex items-center justify-center shadow-md">
                <CheckCircle className="w-3.5 h-3.5 text-ink-0" />
              </div>
              <div className="absolute left-3 top-7 bottom-[-20px] w-0.5 bg-ink-900/20"></div>
              <h3 className="font-bold text-ink-900">Account Created</h3>
              <p className="text-xs font-medium text-ink-500 mt-1">Credentials verified securely.</p>
            </div>

            <div className="relative pl-8">
              <div className={`absolute left-0 top-1 w-6 h-6 rounded-full flex items-center justify-center shadow-md transition-colors duration-300 ${ndaSkipped || step > 1 ? 'bg-ink-900' : step === 1 ? 'border-2 border-ink-900 bg-ink-0' : 'bg-ink-200'}`}>
                {(ndaSkipped || step > 1) ? <CheckCircle className="w-3.5 h-3.5 text-ink-0" /> : <div className="w-2 h-2 rounded-full bg-ink-900" />}
              </div>
              <div className="absolute left-3 top-7 bottom-[-20px] w-0.5 bg-ink-200">
                <div className="w-full bg-ink-900/20 transition-all duration-500" style={{ height: (ndaSkipped || step > 1) ? '100%' : '0%' }}></div>
              </div>
              <h3 className={`font-bold transition-colors ${ndaSkipped ? 'text-ink-400 line-through' : step >= 1 ? 'text-ink-900' : 'text-ink-400'}`}>
                NDA Agreement {ndaSkipped && <span className="text-[10px] text-ink-400 ml-1 font-normal">(Not Required)</span>}
              </h3>
              <p className="text-xs font-medium text-ink-500 mt-1">Non-disclosure signature.</p>
            </div>

            <div className="relative pl-8">
              <div className={`absolute left-0 top-1 w-6 h-6 rounded-full flex items-center justify-center shadow-md transition-colors duration-300 ${msaSkipped || step > 2 ? 'bg-ink-900' : step === 2 ? 'border-2 border-ink-900 bg-ink-0' : 'bg-ink-200'}`}>
                {(msaSkipped || step > 2) ? <CheckCircle className="w-3.5 h-3.5 text-ink-0" /> : step === 2 ? <div className="w-2 h-2 rounded-full bg-ink-900" /> : <div className="w-2 h-2 rounded-full bg-transparent" />}
              </div>
              <div className="absolute left-3 top-7 bottom-[-20px] w-0.5 bg-ink-200">
                <div className="w-full bg-ink-900/20 transition-all duration-500" style={{ height: (msaSkipped || step > 2) ? '100%' : '0%' }}></div>
              </div>
              <h3 className={`font-bold transition-colors ${msaSkipped ? 'text-ink-400 line-through' : step >= 2 ? 'text-ink-900' : 'text-ink-400'}`}>
                MSA Agreement {msaSkipped && <span className="text-[10px] text-ink-400 ml-1 font-normal">(Not Required)</span>}
              </h3>
              <p className="text-xs font-medium text-ink-500 mt-1">Master Services Agreement.</p>
            </div>

            <div className="relative pl-8">
              <div className={`absolute left-0 top-1 w-6 h-6 rounded-full flex items-center justify-center shadow-md transition-colors duration-300 ${step === 3 ? 'bg-ink-900 text-ink-0' : 'bg-ink-200'}`}>
                {step === 3 ? <Clock className="w-3.5 h-3.5 text-ink-0" /> : <div className="w-2 h-2 rounded-full bg-transparent" />}
              </div>
              <h3 className={`font-bold transition-colors ${step === 3 ? 'text-ink-900' : 'text-ink-400'}`}>Admin Approval</h3>
              <p className="text-xs font-medium text-ink-500 mt-1">Pending compliance review.</p>
            </div>
          </div>

          <div className="mt-8 pt-8 border-t border-ink-200">
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-full bg-ink-200 flex items-center justify-center text-xs font-bold">
                {user?.email?.charAt(0).toUpperCase()}
              </div>
              <div>
                <p className="text-xs font-bold truncate max-w-[150px]">{user?.email}</p>
                <p className="text-[10px] uppercase text-ink-500 font-bold tracking-wider">Pending Partner</p>
              </div>
            </div>
          </div>
        </div>

        {/* Right Side: Wizard Content */}
        <div className="w-full md:w-2/3 p-8 md:p-12 flex flex-col relative">
          <AnimatePresence mode="wait">
            {step === 1 && (
              <motion.div key="step1" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} className="flex flex-col h-full">
                <div className="mb-8">
                  <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-ink-900 text-ink-0 mb-4">
                    <Lock className="w-3.5 h-3.5 text-ink-0" />
                    <span className="text-[10px] font-bold text-ink-0 tracking-widest uppercase">Action Required</span>
                  </div>
                  <h2 className="text-3xl login-title font-extrabold tracking-tight mb-2">Non-Disclosure Agreement</h2>
                  <p className="text-sm login-desc text-ink-500 mt-1.5 font-medium max-w-md">
                    Please review the mutual NDA terms carefully before signing.
                  </p>
                </div>

                {renderDocumentViewer('NDA')}

                {renderDocumentTab('NDA', ndaMode, setNdaMode, ndaSignature, setNdaSignature, ndaUploadUrl, setNdaUploadUrl)}

                <div className="mt-auto pt-6 border-t border-ink-200 flex justify-end items-center">
                  <button 
                    onClick={() => submitDocument('NDA')}
                    disabled={(!ndaSignature && !ndaUploadUrl) || isSubmitting}
                    className="flex items-center gap-2 px-8 py-3.5 rounded-xl bg-ink-900 text-ink-0 font-bold hover:bg-ink-800 hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    {isSubmitting ? 'Processing...' : msaSkipped ? 'Submit' : 'Continue to MSA'}
                    <ChevronRight className="w-4 h-4" />
                  </button>
                </div>
              </motion.div>
            )}

            {step === 2 && (
              <motion.div key="step2" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} className="flex flex-col h-full">
                <div className="mb-8">
                  <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-ink-100 border border-ink-200 mb-4">
                    <FileText className="w-3.5 h-3.5 text-ink-600" />
                    <span className="text-[10px] font-bold text-ink-700 tracking-widest uppercase">Final Agreement</span>
                  </div>
                  <h2 className="text-3xl login-title font-extrabold tracking-tight mb-2">Master Services Agreement</h2>
                  <p className="text-sm login-desc text-ink-500 mt-1.5 font-medium max-w-md">
                    Please review the master services partnership terms before signing.
                  </p>
                </div>

                {renderDocumentViewer('MSA')}

                {renderDocumentTab('MSA', msaMode, setMsaMode, msaSignature, setMsaSignature, msaUploadUrl, setMsaUploadUrl)}

                <div className="mt-auto pt-6 border-t border-ink-200 flex justify-between items-center">
                  {!ndaSkipped ? (
                    <button onClick={() => setStep(1)} className="text-sm font-bold text-ink-500 hover:text-ink-900 transition-colors">
                      Back to NDA
                    </button>
                  ) : (
                    <div />
                  )}
                  <button 
                    onClick={() => submitDocument('MSA')}
                    disabled={(!msaSignature && !msaUploadUrl) || isSubmitting}
                    className="flex items-center gap-2 px-8 py-3.5 rounded-xl bg-ink-900 text-ink-0 font-bold hover:bg-ink-800 hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    {isSubmitting ? 'Processing...' : 'Submit for Approval'}
                    <ChevronRight className="w-4 h-4" />
                  </button>
                </div>
              </motion.div>
            )}

            {step === 3 && (
              <motion.div key="step3" initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} className="flex flex-col h-full items-center justify-center text-center">
                <div className="w-24 h-24 rounded-full bg-ink-100 flex items-center justify-center mb-8 relative">
                  <div className="absolute inset-0 rounded-full border-4 border-ink-900/30 animate-[spin_3s_linear_infinite]" style={{ borderStyle: 'dashed' }}></div>
                  <Clock className="w-10 h-10 text-ink-900 relative z-10" />
                </div>
                
                <h2 className="text-3xl font-extrabold tracking-tight mb-4">Pending Approval</h2>
                <p className="text-ink-500 mb-8 max-w-md mx-auto leading-relaxed">
                  Your legal agreements have been submitted securely. An administrator is currently reviewing your application. You will receive an email once your dashboard is unlocked.
                </p>
                
                <div className="p-6 bg-ink-50 rounded-2xl border border-ink-200 max-w-sm w-full">
                  <div className="flex justify-between items-center mb-3">
                    <span className="text-sm font-medium text-ink-500">NDA Status</span>
                    <span className="text-xs font-bold text-ink-900 bg-ink-100 px-2 py-1 rounded-md">
                      {ndaSkipped ? 'Not Required' : 'Signed'}
                    </span>
                  </div>
                  <div className="flex justify-between items-center mb-3">
                    <span className="text-sm font-medium text-ink-500">MSA Status</span>
                    <span className="text-xs font-bold text-ink-900 bg-ink-100 px-2 py-1 rounded-md">
                      {msaSkipped ? 'Not Required' : 'Signed'}
                    </span>
                  </div>
                  <div className="flex justify-between items-center pt-3 border-t border-ink-200">
                    <span className="text-sm font-medium text-ink-500">Account Access</span>
                    <span className="text-xs font-bold text-ink-0 bg-ink-900 px-2 py-1 rounded-md">Locked</span>
                  </div>
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </div>
    </div>
  );
};

export default OnboardingPage;
