components/AboutModal.tsx

import React from 'react';
import { X, Camera, Heart, MapPin, Award } from 'lucide-react';
import { Language, AdminConfig } from '../types';
import { TRANSLATIONS } from '../constants/translations';

interface AboutModalProps {
  isVisible: boolean;
  onClose: () => void;
  language: Language;
  config?: AdminConfig; // Optional to handle undefined initially
}

export const AboutModal: React.FC<AboutModalProps> = ({ isVisible, onClose, language, config }) => {
  const t = TRANSLATIONS[language];

  if (!isVisible) return null;

  // Prefer dynamic config content, fallback to translation file
  const story = config?.aboutStory || t.aboutStoryContent;
  const philosophy = config?.aboutPhilosophy || t.aboutPhilosophyContent;
  const location = config?.aboutLocation || t.aboutLocationContent;
  const address = config?.footerAddress || t.footerAddress;

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl overflow-hidden relative flex flex-col max-h-[90vh]">
        {/* Header with Image Background */}
        <div className="relative h-48 bg-gray-900 flex items-center justify-center overflow-hidden shrink-0">
           <div className="absolute inset-0 bg-gradient-to-r from-rose-900 to-gray-900 opacity-90"></div>
           {/* Decorative patterns */}
           <div className="absolute top-0 left-0 w-full h-full opacity-20" style={{backgroundImage: 'radial-gradient(circle at 20% 50%, white 1px, transparent 1px)', backgroundSize: '20px 20px'}}></div>
           
           <button 
             onClick={onClose}
             className="absolute top-4 right-4 p-2 bg-black/30 text-white rounded-full hover:bg-black/50 transition-colors z-20"
           >
             <X className="w-5 h-5" />
           </button>

           <div className="relative z-10 text-center px-6">
              <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center text-rose-600 mx-auto mb-3 shadow-lg">
                 <Camera className="w-8 h-8" />
              </div>
              <h2 className="text-3xl font-serif font-bold text-white tracking-wide">{t.aboutTitle}</h2>
              <p className="text-rose-200 text-sm mt-1 uppercase tracking-widest">{t.subtitle}</p>
           </div>
        </div>

        {/* Content */}
        <div className="p-6 sm:p-8 overflow-y-auto space-y-8 bg-gray-50/50">
           {/* Brand Story */}
           <div className="flex gap-4">
              <div className="w-10 h-10 rounded-full bg-rose-100 flex items-center justify-center text-rose-600 shrink-0 mt-1">
                 <Award className="w-5 h-5" />
              </div>
              <div>
                 <h3 className="text-lg font-bold text-gray-900 mb-2">{t.aboutStory}</h3>
                 <p className="text-gray-600 leading-relaxed text-sm text-justify whitespace-pre-wrap">
                    {story}
                 </p>
              </div>
           </div>

           {/* Philosophy */}
           <div className="flex gap-4">
              <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 shrink-0 mt-1">
                 <Heart className="w-5 h-5" />
              </div>
              <div>
                 <h3 className="text-lg font-bold text-gray-900 mb-2">{t.aboutPhilosophy}</h3>
                 <p className="text-gray-600 leading-relaxed text-sm text-justify whitespace-pre-wrap">
                    {philosophy}
                 </p>
              </div>
           </div>

           {/* Location */}
           <div className="flex gap-4">
              <div className="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 shrink-0 mt-1">
                 <MapPin className="w-5 h-5" />
              </div>
              <div>
                 <h3 className="text-lg font-bold text-gray-900 mb-2">{t.aboutLocation}</h3>
                 <p className="text-gray-600 leading-relaxed text-sm text-justify whitespace-pre-wrap">
                    {location}
                 </p>
                 <div className="mt-3 p-3 bg-white rounded-lg border border-gray-200 text-xs text-gray-500 font-mono flex items-center gap-2">
                    <MapPin className="w-3 h-3 text-rose-500" />
                    {address}
                 </div>
              </div>
           </div>
        </div>
        
        {/* Footer */}
        <div className="p-4 bg-white border-t border-gray-100 text-center">
           <p className="text-xs text-gray-400">{t.footerRights}</p>
        </div>
      </div>
    </div>
  );
};