src/app/LayoutContent.tsx

'use client';

import { useEffect } from 'react';
import { usePathname } from 'next/navigation';
import { Header, LoadingOverlay, ErrorMessage } from '../components/layout/Common';
import { useDiagnosis } from './contexts/DiagnosisContext';

export default function LayoutContent({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const { currentIndex, surveyItems, loading, error, setError } = useDiagnosis();

  // Capture Referrer and UTM tags on initial landing
  useEffect(() => {
    if (typeof window !== 'undefined') {
      const urlParams = new URLSearchParams(window.location.search);
      const utmSource = urlParams.get('utm_source');
      const utmMedium = urlParams.get('utm_medium');
      const utmCampaign = urlParams.get('utm_campaign');

      // Store Referrer only once per session
      if (!sessionStorage.getItem('original_referrer')) {
        sessionStorage.setItem('original_referrer', document.referrer || 'direct');
      }

      // Store UTMs if present in the URL
      if (utmSource) sessionStorage.setItem('utm_source', utmSource);
      if (utmMedium) sessionStorage.setItem('utm_medium', utmMedium);
      if (utmCampaign) sessionStorage.setItem('utm_campaign', utmCampaign);
    }
  }, []);

  const isSurvey = pathname?.startsWith('/survey');
  const isSearch = pathname?.startsWith('/search');
  const isResult = pathname?.startsWith('/result');

  return (
    <div className="min-h-screen flex flex-col bg-slate-50 font-sans text-slate-900 selection:bg-cyan-100 selection:text-cyan-900">
      {loading && <LoadingOverlay />}

      {isResult ? null : (
        <>
          <Header />
          {isSurvey && (
            <div className="sticky top-[64px] z-40 w-full h-1 bg-slate-100 overflow-hidden">
              <div
                className="h-full bg-cyan-500 transition-all duration-500 ease-out"
                style={{ width: `${((currentIndex + 1) / (surveyItems.length || 10)) * 100}%` }}
              />
            </div>
          )}
        </>
      )}

      <main className={`relative flex-grow bg-slate-50 ${(isSurvey || isSearch) ? 'pt-0 pb-6 sm:pt-4 sm:pb-8 px-0 sm:px-4' : 'px-3 sm:px-4 py-6 sm:py-8'}`}>
        {error ? (
          <div className="max-w-xl mx-auto mt-20">
            <ErrorMessage
              message={error}
              onRetry={() => {
                setError(null);
                window.location.reload();
              }}
            />
          </div>
        ) : (
          children
        )}
      </main>

      <footer className="min-h-20 border-t border-slate-100 bg-white flex items-center justify-center shrink-0 px-4 py-4">
        <p className="text-center text-xs sm:text-sm font-medium text-slate-500">
          © 2026 시앤피컨설팅 주식회사. All rights reserved.
        </p>
      </footer>
    </div>
  );
}