const [formData, setFormData] = useState({});
  const [currentStep, setCurrentStep] = useState(1);
  const [isMounted, setIsMounted] = useState(false);

  // Load initial data from localStorage after the component has mounted
  useEffect(() => {
    if (typeof window !== "undefined") {
      const savedData = localStorage.getItem("formData");
      const savedStep = localStorage.getItem("currentStep");

      if (savedData) setFormData(JSON.parse(savedData));
      if (savedStep) setCurrentStep(parseInt(savedStep, 10));

      // Indicate the component has mounted to prevent hydration issues
      setIsMounted(true);
    }
  }, []);

  // Save formData to localStorage whenever it updates
  useEffect(() => {
    if (isMounted) {
      localStorage.setItem("formData", JSON.stringify(formData));
    }
  }, [formData, isMounted]);

  // Save currentStep to localStorage whenever it updates
  useEffect(() => {
    if (isMounted) {
      localStorage.setItem("currentStep", currentStep);
    }
  }, [currentStep, isMounted]);

const handleInputChange = (e) => {
    let name, value;
    if (e.target) {
      // If it's an event object
      ({ name, value } = e.target);
    } else {
      // If it's a direct update
      ({ name, value } = e);
    }
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  if (!isMounted) return null;

  const nextStep = () => setCurrentStep(currentStep + 1);
  const prevStep = () => setCurrentStep(currentStep - 1);

import Header from "./header";
import Demo from "./components/demo";

export default function Home() {
  return (
    <div>
      <Header />
      <Demo />
      <Footer /> 
    </div>
  );
}