components/AgeGate.tsx

import React from 'react';
import { ShieldCheck, Ban } from 'lucide-react';

interface AgeGateProps {
  onVerify: (verified: boolean) => void;
}

const AgeGate: React.FC<AgeGateProps> = ({ onVerify }) => {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/95 backdrop-blur-md">
      <div className="bg-gray-800 border border-emerald-700/50 rounded-2xl shadow-2xl max-w-md w-full p-8 text-center relative overflow-hidden">
        {/* Decorative background glow */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-32 bg-emerald-500/20 rounded-full blur-3xl -z-10"></div>

        <div className="mx-auto w-16 h-16 bg-emerald-900/50 rounded-full flex items-center justify-center mb-6 border border-emerald-500/30">
          <ShieldCheck className="w-8 h-8 text-emerald-400" />
        </div>

        <h2 className="text-3xl font-bold text-white mb-2">Age Verification</h2>
        <p className="text-gray-400 mb-8">
          You must be 21 years or older to access this cannabis educational assistant.
        </p>

        <div className="flex flex-col gap-3">
          <button
            onClick={() => onVerify(true)}
            className="w-full py-3.5 px-6 bg-emerald-600 hover:bg-emerald-500 text-white font-semibold rounded-xl transition-all duration-200 transform hover:scale-[1.02] shadow-lg shadow-emerald-900/50"
          >
            Yes, I am 21+
          </button>
          
          <button
            onClick={() => onVerify(false)}
            className="w-full py-3.5 px-6 bg-gray-700 hover:bg-gray-600 text-gray-300 font-semibold rounded-xl transition-colors flex items-center justify-center gap-2"
          >
            <Ban className="w-4 h-4" />
            No, I am not
          </button>
        </div>
        
        <p className="mt-6 text-xs text-gray-500">
          By entering, you agree to view educational content regarding cannabis strains and products.
        </p>
      </div>
    </div>
  );
};

export default AgeGate;