'use client';

import { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';

const BrochureModal = dynamic(() => import('./BrochureModal'), { ssr: false });

export default function AutoBrochureModal() {
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    // Check if user has already seen or interacted with the modal
    const hasSeenModal = localStorage.getItem('klz_brochure_modal_seen');

    if (!hasSeenModal) {
      // Auto-open after 5 seconds to not interrupt immediate page load
      const timer = setTimeout(() => {
        setIsOpen(true);
        // Mark as seen so it doesn't bother them again on next page load
        localStorage.setItem('klz_brochure_modal_seen', 'true');
      }, 5000);

      return () => clearTimeout(timer);
    }
  }, []);

  return <BrochureModal isOpen={isOpen} onClose={() => setIsOpen(false)} />;
}