`components/UserAgreementModal.tsx`

125 lines
'use client';

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

interface UserAgreementModalProps {
  onAccept: () => void;
  onDecline: () => void;
}

export default function UserAgreementModal({ onAccept, onDecline }: UserAgreementModalProps) {
  const [hasRead, setHasRead] = useState(false);
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    // Check if mobile device
    const checkMobile = () => {
      setIsMobile(window.innerWidth <= 768);
    };
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
      <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[80vh] overflow-hidden">
        <div className="p-4 md:p-6 border-b">
          <h2 className="text-xl md:text-2xl font-bold text-gray-900">User Agreement</h2>
          <p className="text-sm md:text-base text-gray-600 mt-2">
            Please accept our User Agreement to continue
          </p>
        </div>
        
        <div className="p-4 md:p-6 overflow-y-auto max-h-[50vh]">
          <div className="bg-gray-50 rounded p-3 md:p-4 mb-4">
            <h3 className="font-semibold mb-2 text-sm md:text-base">Key Points:</h3>
            <ul className="list-disc ml-5 md:ml-6 space-y-1 md:space-y-2 text-xs md:text-sm">
              <li>Your conversations help improve our service</li>
              <li>Use "Shush Mode" for private sessions</li>
              <li>Bubbe.ai is for entertainment only</li>
              <li>Not professional advice</li>
              <li>You can stop anytime</li>
            </ul>
          </div>

          <div className="mb-4">
            <Link 
              href="/user-agreement" 
              target="_blank"
              className="text-blue-600 hover:text-blue-800 underline font-medium text-sm md:text-base"
            >
              Read full agreement →
            </Link>
          </div>

          {/* Desktop checkbox version */}
          {!isMobile && (
            <div className="flex items-start mb-4">
              <input
                type="checkbox"
                id="hasRead"
                className="mt-1 mr-3 w-4 h-4"
                checked={hasRead}
                onChange={(e) => setHasRead(e.target.checked)}
              />
              <label htmlFor="hasRead" className="text-sm text-gray-700">
                I have read, understood, and agree to be bound by the User Agreement, 
                including the data usage and liability terms.
              </label>
            </div>
          )}

          {/* Mobile simplified text */}
          {isMobile && (
            <div className="text-xs text-gray-600 mb-4 p-3 bg-yellow-50 rounded">
              By clicking "Yes, I Agree" you accept our User Agreement and data usage terms.
            </div>
          )}
        </div>

        <div className="p-4 md:p-6 border-t bg-gray-50">
          {/* Mobile simplified buttons */}
          {isMobile ? (
            <div className="flex gap-3">
              <button
                onClick={onDecline}
                className="flex-1 px-4 py-3 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors text-base font-medium"
              >
                No Thanks
              </button>
              <button
                onClick={onAccept}
                className="flex-1 px-4 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-base font-medium"
              >
                Yes, I Agree
              </button>
            </div>
          ) : (
            /* Desktop version with checkbox requirement */
            <div className="flex justify-between">
              <button
                onClick={onDecline}
                className="px-6 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors"
              >
                Decline
              </button>
              <button
                onClick={onAccept}
                disabled={!hasRead}
                className={`px-6 py-2 rounded-lg transition-colors ${
                  hasRead 
                    ? 'bg-purple-600 text-white hover:bg-purple-700' 
                    : 'bg-gray-200 text-gray-400 cursor-not-allowed'
                }`}
              >
                Accept & Continue
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}