import React, { useState, useEffect } from 'react';
import { ShieldCheck, AlertTriangle, Newspaper, Send, Search, Image as ImageIcon, CheckCircle, ShieldAlert, FileText, Lock, Mail, Phone, ChevronRight, X, User, Menu, FileUp, Info, ChevronDown, Facebook, Twitter, Instagram, Youtube } from 'lucide-react';

const translations = {
  en: {
    home: "Home",
    about: "About Us",
    contact: "Contact",
    alerts: "Latest Fraud Alerts",
    news: "Latest News",
    report: "Report Fraud",
    admin: "Admin",
    heroTitle: "Be Aware. Be Safe. Stop Fraud.",
    heroSub: "Together for a Fraud-Free India",
    navReport: "Report Fraud Now",
    nameLabel: "Your Name",
    descLabel: "Detailed Description",
    evidenceLabel: "Upload Evidence (Max 1MB)",
    submitBtn: "Submit Report",
    readMore: "Read More",
    sendBtn: "Send Message",
    footerText: "Dedicated to protecting citizens from cyber and offline fraud.",
    langSelect: "Select Language"
  },
  hi: {
    home: "होम",
    about: "हमारे बारे में",
    contact: "संपर्क करें",
    alerts: "नवीनतम धोखाधड़ी अलर्ट",
    news: "नवीनतम समाचार",
    report: "धोखाधड़ी की रिपोर्ट करें",
    admin: "व्यवस्थापक",
    heroTitle: "जागरूक रहें। सुरक्षित रहें। धोखाधड़ी रोकें।",
    heroSub: "धोखाधड़ी मुक्त भारत के लिए एक साथ",
    navReport: "अभी धोखाधड़ी की रिपोर्ट करें",
    nameLabel: "आपका नाम",
    descLabel: "विस्तृत विवरण",
    evidenceLabel: "सबूत अपलोड करें (अधिकतम 1MB)",
    submitBtn: "रिपोर्ट जमा करें",
    readMore: "और पढ़ें",
    sendBtn: "संदेश भेजें",
    footerText: "नागरिकों को साइबर और ऑफ़लाइन धोखाधड़ी से बचाने के लिए समर्पित।",
    langSelect: "भाषा चुनें"
  },
  te: {
    home: "హోమ్",
    about: "మా గురించి",
    contact: "సంప్రదించండి",
    alerts: "తాజా మోసాల హెచ్చరికలు",
    news: "తాజా వార్తలు",
    report: "మోసాన్ని నివేదించండి",
    admin: "నిర్వాహకుడు",
    heroTitle: "జాగ్రత్తగా ఉండండి. సురక్షితంగా ఉండండి. మోసాన్ని అరికట్టండి.",
    heroSub: "మోస రహిత భారతదేశం కోసం కలిసి",
    navReport: "ఇప్పుడే మోసాన్ని నివేదించండి",
    nameLabel: "మీ పేరు",
    descLabel: "వివరణాత్మక వర్ణన",
    evidenceLabel: "ఆధారాలను అప్‌లోడ్ చేయండి",
    submitBtn: "నివేదిక సమర్పించండి",
    readMore: "ఇంకా చదవండి",
    sendBtn: "సందేశం పంపండి",
    footerText: "పౌరులను సైబర్ మరియు ఆఫ్‌లైన్ మోసాల నుండి రక్షించడానికి అంకితం చేయబడింది.",
    langSelect: "భాషను ఎంచుకోండి"
  },
  ta: {
    home: "முகப்பு",
    about: "எங்களை பற்றி",
    contact: "தொடர்பு கொள்ள",
    alerts: "சமீபத்திய மோசடி எச்சரிக்கைகள்",
    news: "சமீபத்திய செய்திகள்",
    report: "மோசடியை புகாரளி",
    admin: "நிர்வாகி",
    heroTitle: "விழிப்புடன் இருங்கள். பாதுகாப்பாக இருங்கள்.",
    heroSub: "மோசடி இல்லாத இந்தியாவுக்காக இணைந்து",
    navReport: "இப்போதே மோசடியை புகாரளி",
    nameLabel: "உங்கள் பெயர்",
    descLabel: "விரிவான விளக்கம்",
    evidenceLabel: "ஆதாரங்களை பதிவேற்றவும்",
    submitBtn: "அறிக்கையை சமர்ப்பிக்கவும்",
    readMore: "மேலும் படிக்க",
    sendBtn: "செய்தி அனுப்பவும்",
    footerText: "குடிமக்களை சைபர் மற்றும் ஆஃப்லைன் மோசடிகளிலிருந்து பாதுகாக்க அர்ப்பணிக்கப்பட்டுள்ளது.",
    langSelect: "மொழியைத் தேர்ந்தெடுக்கவும்"
  },
  kn: {
    home: "ಮುಖಪುಟ",
    about: "ನಮ್ಮ ಬಗ್ಗೆ",
    contact: "ಸಂಪರ್ಕಿಸಿ",
    alerts: "ಇತ್ತೀಚಿನ ವಂಚನೆ ಎಚ್ಚರಿಕೆಗಳು",
    news: "ಇತ್ತೀಚಿನ ಸುದ್ದಿಗಳು",
    report: "ವಂಚನೆ ವರದಿ ಮಾಡಿ",
    admin: "ನಿರ್ವಾಹಕ",
    heroTitle: "ಎಚ್ಚರದಿಂದಿರಿ. ಸುರಕ್ಷಿತವಾಗಿರಿ. ವಂಚನೆ ತಡೆಯಿರಿ.",
    heroSub: "ವಂಚನೆ ಮುಕ್ತ ಭಾರತಕ್ಕಾಗಿ ಒಟ್ಟಾಗಿ",
    navReport: "ಈಗಲೇ ವಂಚನೆ ವರದಿ ಮಾಡಿ",
    nameLabel: "ನಿಮ್ಮ ಹೆಸರು",
    descLabel: "ವಿವರವಾದ ವಿವರಣೆ",
    evidenceLabel: "ಸಾಕ್ಷ್ಯವನ್ನು ಅಪ್‌ಲೋಡ್ ಮಾಡಿ",
    submitBtn: "ವರದಿ ಸಲ್ಲಿಸಿ",
    readMore: "ಮತ್ತಷ್ಟು ಓದಿ",
    sendBtn: "ಸಂದೇಶ ಕಳುಹಿಸಿ",
    footerText: "ನಾಗರಿಕರನ್ನು ಸೈಬರ್ ಮತ್ತು ಆಫ್‌ಲೈನ್ ವಂಚನೆಗಳಿಂದ ರಕ್ಷಿಸಲು ಸಮರ್ಪಿಸಲಾಗಿದೆ.",
    langSelect: "ಭಾಷೆ ಆಯ್ಕೆಮಾಡಿ"
  }
};

export default function App() {
  const [currentView, setCurrentView] = useState('home');
  const [lang, setLang] = useState('en');
  const t = translations[lang] || translations['en'];
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);

  // Local Storage DB State
  const [posts, setPosts] = useState(() => {
    const saved = localStorage.getItem('baif_posts');
    return saved ? JSON.parse(saved) : [];
  });
  const [complaints, setComplaints] = useState(() => {
    const saved = localStorage.getItem('baif_complaints');
    return saved ? JSON.parse(saved) : [];
  });
  const [sliderImages, setSliderImages] = useState(() => {
    const saved = localStorage.getItem('baif_slider');
    return saved ? JSON.parse(saved) : [
      { id: '1', url: 'https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80', title: 'Protect Your Data' },
      { id: '2', url: 'https://images.unsplash.com/photo-1614064641913-a53b15680334?ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80', title: 'Cyber Security Awareness' },
      { id: '3', url: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80', title: 'Secure Transactions' }
    ];
  });

  // Save to local storage on change
  useEffect(() => { localStorage.setItem('baif_posts', JSON.stringify(posts)); }, [posts]);
  useEffect(() => { localStorage.setItem('baif_complaints', JSON.stringify(complaints)); }, [complaints]);
  useEffect(() => { localStorage.setItem('baif_slider', JSON.stringify(sliderImages)); }, [sliderImages]);

  // Admin Login State
  const [isAdmin, setIsAdmin] = useState(() => localStorage.getItem('baif_isAdmin') === 'true');
  const [loginId, setLoginId] = useState('');
  const [loginPassword, setLoginPassword] = useState('');
  const [loginError, setLoginError] = useState('');
  
  // Security State
  const [failedAttempts, setFailedAttempts] = useState(() => parseInt(localStorage.getItem('baif_failedAttempts') || '0', 10));
  const [lockoutUntil, setLockoutUntil] = useState(() => parseInt(localStorage.getItem('baif_lockoutUntil') || '0', 10));

  // Admin Form State
  const [newPostTitle, setNewPostTitle] = useState('');
  const [newPostContent, setNewPostContent] = useState('');
  const [newPostType, setNewPostType] = useState('alert');
  const [newPostImage, setNewPostImage] = useState('');
  const [newSliderUrl, setNewSliderUrl] = useState('');
  const [newSliderTitle, setNewSliderTitle] = useState('');

  // Complaint Form State
  const [complaintName, setComplaintName] = useState('');
  const [complaintDesc, setComplaintDesc] = useState('');
  const [complaintContact, setComplaintContact] = useState('');

  // Slider State
  const [currentSlide, setCurrentSlide] = useState(0);
  const [isSliderPaused, setIsSliderPaused] = useState(false);

  useEffect(() => {
    const handleScroll = () => { setIsScrolled(window.scrollY > 20); };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  useEffect(() => {
    // Stop the interval if paused or if there aren't enough images to slide
    if (sliderImages.length <= 1 || isSliderPaused) return;
    
    const interval = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % sliderImages.length);
    }, 15000); // Increased delay to 15 seconds for a much slower, comfortable pace
    
    return () => clearInterval(interval);
  }, [sliderImages.length, isSliderPaused]);

  const handleLogin = (e) => {
    e.preventDefault();
    const now = Date.now();

    if (lockoutUntil > now) {
      const minutesLeft = Math.ceil((lockoutUntil - now) / 60000);
      setLoginError(`Account locked. Try again in ${minutesLeft} minutes.`);
      return;
    }

    if (loginId === '9611182045' && loginPassword === 'Hardik@123') {
      setIsAdmin(true);
      localStorage.setItem('baif_isAdmin', 'true');
      setLoginError('');
      setFailedAttempts(0);
      localStorage.setItem('baif_failedAttempts', '0');
      localStorage.setItem('baif_lockoutUntil', '0');
    } else {
      const newAttempts = failedAttempts + 1;
      setFailedAttempts(newAttempts);
      localStorage.setItem('baif_failedAttempts', newAttempts.toString());
      
      if (newAttempts === 3) {
        const lockoutTime = now + (5 * 60 * 1000); // 5 mins
        setLockoutUntil(lockoutTime);
        localStorage.setItem('baif_lockoutUntil', lockoutTime.toString());
        setLoginError("Too many failed attempts. Locked out for 5 minutes.");
      } else if (newAttempts === 4) {
         const lockoutTime = now + (30 * 60 * 1000); // 30 mins
        setLockoutUntil(lockoutTime);
        localStorage.setItem('baif_lockoutUntil', lockoutTime.toString());
        setLoginError("Account locked out for 30 minutes.");
      } else if (newAttempts >= 5) {
         const lockoutTime = now + (4 * 60 * 60 * 1000); // 4 hours
        setLockoutUntil(lockoutTime);
        localStorage.setItem('baif_lockoutUntil', lockoutTime.toString());
        setLoginError("Account locked out for 4 hours.");
      } else {
        setLoginError(`Invalid ID or Password. Attempt ${newAttempts}/3 before first lockout.`);
      }
    }
  };

  const handleLogout = () => {
    setIsAdmin(false);
    localStorage.removeItem('baif_isAdmin');
  };

  const handlePostSubmit = (e) => {
    e.preventDefault();
    const newPost = {
      id: Date.now().toString(),
      title: newPostTitle,
      content: newPostContent,
      type: newPostType,
      imageUrl: newPostImage,
      date: new Date().toLocaleDateString(),
      lang: 'en' // Default post language
    };
    
    setPosts(prev => {
        const updatedPosts = [newPost, ...prev];
        // Ensure only 5 posts are kept
        if (updatedPosts.length > 5) {
            return updatedPosts.slice(0, 5);
        }
        return updatedPosts;
    });

    setNewPostTitle(''); setNewPostContent(''); setNewPostImage('');
    alert("Post Added successfully! Older posts automatically removed to keep maximum at 5.");
  };

  const handleSliderFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      if (file.size > 2 * 1024 * 1024) { // 2MB max size
        alert("Image is too large. Please select a file under 2MB to save storage space.");
        return;
      }
      const reader = new FileReader();
      reader.onloadend = () => {
        setNewSliderUrl(reader.result); // Save as Base64 string
      };
      reader.readAsDataURL(file);
    }
  };

  const handleSliderAdd = (e) => {
     e.preventDefault();
     if (!newSliderUrl) {
         alert("Please upload an image first.");
         return;
     }
     const newSlide = {
        id: Date.now().toString(),
        url: newSliderUrl,
        title: newSliderTitle
     };
     setSliderImages(prev => [...prev, newSlide]);
     setNewSliderUrl(''); setNewSliderTitle('');
  };

  const handleSliderDelete = (id) => {
      setSliderImages(prev => prev.filter(img => img.id !== id));
  };

  const handleComplaintSubmit = (e) => {
    e.preventDefault();
    const newComplaint = {
      id: Date.now().toString(),
      name: complaintName,
      description: complaintDesc,
      contact: complaintContact,
      date: new Date().toLocaleDateString()
    };
    setComplaints([newComplaint, ...complaints]);
    setComplaintName(''); setComplaintDesc(''); setComplaintContact('');
    alert("Complaint Submitted. We will review it shortly.");
  };

  const handleDeletePost = (id) => {
    setPosts(posts.filter(post => post.id !== id));
  };

  const renderAdmin = () => {
    if (!isAdmin) {
      return (
        <div className="flex items-center justify-center min-h-[60vh] bg-gray-50">
          <div className="bg-white p-8 rounded-2xl shadow-xl max-w-md w-full border border-gray-100">
            <div className="flex justify-center mb-6">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                <Lock size={32} />
              </div>
            </div>
            <h2 className="text-2xl font-bold text-center text-gray-800 mb-6">Admin Access</h2>
            {loginError && <div className="bg-red-50 text-red-600 p-3 rounded-lg mb-4 text-sm text-center border border-red-100">{loginError}</div>}
            <form onSubmit={handleLogin} className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Admin ID</label>
                <input type="text" value={loginId} onChange={(e) => setLoginId(e.target.value)} className="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" required />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
                <input type="password" value={loginPassword} onChange={(e) => setLoginPassword(e.target.value)} className="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" required />
              </div>
              <button type="submit" className="w-full bg-blue-600 text-white p-3 rounded-lg font-bold hover:bg-blue-700 transition shadow-md">Login to Dashboard</button>
            </form>
          </div>
        </div>
      );
    }

    return (
      <div className="max-w-6xl mx-auto p-4 md:p-8">
        <div className="flex justify-between items-center mb-8 bg-white p-4 rounded-xl shadow-sm border border-gray-200">
          <h2 className="text-2xl font-bold text-gray-800 flex items-center"><ShieldCheck className="mr-2 text-blue-600"/> Foundation Dashboard</h2>
          <button onClick={handleLogout} className="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg font-medium hover:bg-gray-200 transition">Logout</button>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Post Manager */}
          <div className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100">
            <h3 className="text-xl font-bold mb-4 border-b pb-2 text-gray-800">Publish News / Alert</h3>
            <p className="text-xs text-orange-600 mb-4 bg-orange-50 p-2 rounded">Note: Only the 5 most recent posts are kept active.</p>
            <form onSubmit={handlePostSubmit} className="space-y-4">
              <div className="flex space-x-4">
                 <label className="flex items-center space-x-2 cursor-pointer">
                  <input type="radio" value="alert" checked={newPostType === 'alert'} onChange={(e) => setNewPostType(e.target.value)} className="text-red-600 focus:ring-red-500" />
                  <span className="font-medium text-gray-700">Fraud Alert</span>
                </label>
                <label className="flex items-center space-x-2 cursor-pointer">
                  <input type="radio" value="news" checked={newPostType === 'news'} onChange={(e) => setNewPostType(e.target.value)} className="text-blue-600 focus:ring-blue-500" />
                  <span className="font-medium text-gray-700">Foundation News</span>
                </label>
              </div>
              <input type="text" placeholder="Post Title" value={newPostTitle} onChange={(e) => setNewPostTitle(e.target.value)} className="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-blue-500" required />
              <textarea placeholder="Detailed Content" value={newPostContent} onChange={(e) => setNewPostContent(e.target.value)} className="w-full border p-3 rounded-lg h-32 outline-none focus:ring-2 focus:ring-blue-500" required></textarea>
              <input type="url" placeholder="Image URL (Optional)" value={newPostImage} onChange={(e) => setNewPostImage(e.target.value)} className="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-blue-500" />
              <button type="submit" className="bg-blue-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-blue-700 w-full shadow-md">Publish Post</button>
            </form>
          </div>

          {/* Slider Manager */}
           <div className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100">
            <h3 className="text-xl font-bold mb-4 border-b pb-2 text-gray-800">Manage Hero Slider</h3>
            <form onSubmit={handleSliderAdd} className="space-y-4 mb-6">
                <div className="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer group">
                  <FileUp className="mx-auto text-gray-400 group-hover:text-green-500 mb-2" size={24}/>
                  <label className="block text-sm font-bold text-gray-700 cursor-pointer group-hover:text-green-600 transition-colors">
                    Upload Slide Image (Max 2MB)
                    <input type="file" accept="image/*" onChange={handleSliderFileChange} className="hidden" />
                  </label>
                </div>
                {newSliderUrl && <img src={newSliderUrl} alt="Preview" className="h-20 w-auto object-cover rounded-lg mx-auto shadow-sm" />}
                <input type="text" placeholder="Slide Title (Optional)" value={newSliderTitle} onChange={(e) => setNewSliderTitle(e.target.value)} className="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-green-500" />
                <button type="submit" disabled={!newSliderUrl} className="bg-green-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-green-700 w-full shadow-md disabled:bg-gray-400 disabled:cursor-not-allowed">Add to Slider</button>
            </form>
            
            <div className="space-y-3 max-h-64 overflow-y-auto pr-2">
                {sliderImages.map((img, idx) => (
                    <div key={img.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200">
                        <div className="flex items-center truncate">
                            <span className="font-bold text-gray-500 mr-3">#{idx + 1}</span>
                            <img src={img.url} alt="thumb" className="w-12 h-12 object-cover rounded mr-3" />
                            <span className="text-sm text-gray-700 truncate w-32">{img.title || 'No Title'}</span>
                        </div>
                        <button onClick={() => handleSliderDelete(img.id)} className="text-red-500 hover:text-red-700 p-2"><X size={16}/></button>
                    </div>
                ))}
            </div>
          </div>

          {/* Manage Existing Posts */}
          <div className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 lg:col-span-2">
            <h3 className="text-xl font-bold mb-4 border-b pb-2 text-gray-800">Recent Posts ({posts.length}/5)</h3>
            <div className="space-y-3">
              {posts.map(post => (
                <div key={post.id} className="flex justify-between items-center p-4 bg-gray-50 border border-gray-200 rounded-lg">
                  <div>
                    <span className={`text-xs font-bold px-2 py-1 rounded mr-2 ${post.type === 'alert' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'}`}>{post.type.toUpperCase()}</span>
                    <span className="font-semibold text-gray-800">{post.title}</span>
                  </div>
                  <button onClick={() => handleDeletePost(post.id)} className="text-red-500 hover:text-red-700 p-2 bg-white rounded-full shadow-sm"><X size={16}/></button>
                </div>
              ))}
              {posts.length === 0 && <p className="text-gray-500 italic">No active posts.</p>}
            </div>
          </div>

          {/* View Complaints */}
          <div className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 lg:col-span-2">
            <h3 className="text-xl font-bold mb-4 border-b pb-2 text-gray-800 flex items-center"><FileText className="mr-2"/> Received Complaints</h3>
            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse">
                <thead>
                  <tr className="bg-gray-100 text-gray-700">
                    <th className="p-3 rounded-tl-lg">Date</th>
                    <th className="p-3">Name</th>
                    <th className="p-3">Contact</th>
                    <th className="p-3 rounded-tr-lg">Description</th>
                  </tr>
                </thead>
                <tbody>
                  {complaints.map(comp => (
                    <tr key={comp.id} className="border-b border-gray-100 hover:bg-gray-50">
                      <td className="p-3 text-sm text-gray-600">{comp.date}</td>
                      <td className="p-3 font-medium">{comp.name}</td>
                      <td className="p-3 text-sm">{comp.contact}</td>
                      <td className="p-3 text-sm max-w-xs truncate" title={comp.description}>{comp.description}</td>
                    </tr>
                  ))}
                  {complaints.length === 0 && (
                    <tr><td colSpan="4" className="p-4 text-center text-gray-500">No complaints received yet.</td></tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    );
  };

  const renderHome = () => (
    <div className="space-y-10 sm:space-y-16 pb-12">
      {/* Dynamic Image Slider Hero Area */}
      <section 
        className="relative bg-black overflow-hidden h-[85vh] min-h-[500px] md:h-[600px] group"
        onMouseEnter={() => setIsSliderPaused(true)}
        onMouseLeave={() => setIsSliderPaused(false)}
      >
         {sliderImages.length > 0 ? (
             <>
                 {sliderImages.map((img, idx) => (
                    <div 
                        key={img.id}
                        className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${idx === currentSlide ? 'opacity-100' : 'opacity-0'}`}
                    >
                        <img src={img.url} alt={`Slide ${idx + 1}`} className="w-full h-full object-cover opacity-60 mix-blend-overlay" />
                        <div className="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/50 to-transparent"></div>
                    </div>
                 ))}
             </>
         ) : (
            <div className="absolute inset-0 bg-blue-900">
                 <div className="absolute inset-0 bg-gradient-to-br from-blue-900 to-indigo-900 opacity-90"></div>
            </div>
         )}
        
        <div className="relative z-10 flex flex-col items-center justify-center h-full text-center px-4 sm:px-6 max-w-5xl mx-auto pt-16 sm:pt-0">
          <div className="inline-flex items-center px-4 py-2 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white mb-6 sm:mb-8 animate-fade-in-up">
            <ShieldCheck className="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-green-400" />
            <span className="text-xs sm:text-sm font-semibold tracking-wide uppercase">Official Foundation Portal</span>
          </div>
          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white mb-4 sm:mb-6 tracking-tight drop-shadow-2xl leading-[1.1]">
            {t.heroTitle.split('.').map((part, i, arr) => (
              <React.Fragment key={i}>
                {part}{i !== arr.length -1 && '.'}
                {i === 0 && <br className="hidden md:block"/>}
              </React.Fragment>
            ))}
          </h1>
          <p className="text-lg sm:text-xl md:text-2xl text-blue-100 mb-8 sm:mb-10 font-medium max-w-2xl drop-shadow-md px-2">
            {t.heroSub}
          </p>
          <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 w-full sm:w-auto px-4 sm:px-0">
            <button onClick={() => setCurrentView('report')} className="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-red-600 to-red-500 hover:from-red-500 hover:to-red-400 text-white rounded-full font-bold text-base sm:text-lg shadow-xl shadow-red-500/30 transform hover:-translate-y-1 transition-all flex items-center justify-center">
              <AlertTriangle className="mr-2 w-5 h-5" /> {t.report}
            </button>
            <button onClick={() => { setCurrentView('donate'); }} className="w-full sm:w-auto px-8 py-4 bg-white/10 hover:bg-white/20 backdrop-blur-md border border-white/30 text-white rounded-full font-bold text-base sm:text-lg shadow-lg transform hover:-translate-y-1 transition-all flex items-center justify-center">
              Support Us
            </button>
          </div>
        </div>

        {/* Slider Indicators */}
        {sliderImages.length > 1 && (
            <div className="absolute bottom-10 sm:bottom-6 left-0 right-0 flex justify-center space-x-3 sm:space-x-2 z-20">
                {sliderImages.map((_, idx) => (
                    <button 
                        key={idx} 
                        onClick={() => setCurrentSlide(idx)}
                        className={`w-3 h-3 sm:w-2.5 sm:h-2.5 rounded-full transition-all ${idx === currentSlide ? 'bg-white scale-125' : 'bg-white/50 hover:bg-white/80'}`}
                    />
                ))}
            </div>
        )}
      </section>

      {/* 5-News Flash Carousel */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative -mt-16 sm:-mt-24 z-20">
        <div className="bg-white/95 backdrop-blur-xl rounded-3xl shadow-2xl border border-gray-100 p-5 sm:p-8">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between mb-6 sm:mb-8 border-b border-gray-100 pb-4 sm:pb-5 gap-3 sm:gap-0">
                <h2 className="text-xl sm:text-2xl font-black text-gray-800 flex items-center">
                    <span className="relative flex h-3 w-3 sm:h-4 sm:w-4 mr-3">
                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                      <span className="relative inline-flex rounded-full h-3 w-3 sm:h-4 sm:w-4 bg-red-500"></span>
                    </span>
                    Live Updates
                </h2>
                <div className="text-xs sm:text-sm font-bold text-gray-400 uppercase tracking-widest bg-gray-50 px-3 py-1.5 rounded-full inline-block w-max">Top 5 Recent</div>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {posts.length > 0 ? posts.map((post) => (
                <div key={post.id} className="group relative bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 flex flex-col h-full">
                  {post.imageUrl && (
                    <div className="h-48 sm:h-52 overflow-hidden bg-gray-100">
                      <img src={post.imageUrl} alt={post.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-in-out" />
                    </div>
                  )}
                  <div className="p-5 sm:p-6 flex-grow flex flex-col bg-gradient-to-b from-transparent to-gray-50/50">
                    <div className="flex items-center justify-between mb-3 sm:mb-4">
                      <span className={`px-3 py-1 rounded-full text-[10px] sm:text-xs font-bold uppercase tracking-wider ${post.type === 'alert' ? 'bg-red-50 text-red-600 border border-red-100' : 'bg-blue-50 text-blue-600 border border-blue-100'}`}>
                        {post.type === 'alert' ? 'Fraud Alert' : 'News'}
                      </span>
                      <span className="text-xs font-semibold text-gray-400">{post.date}</span>
                    </div>
                    <h3 className="text-lg sm:text-xl font-bold text-gray-900 mb-2 line-clamp-2 leading-snug">{post.title}</h3>
                    <p className="text-gray-600 text-sm mb-5 line-clamp-3 leading-relaxed">{post.content}</p>
                    <button className="mt-auto text-blue-600 font-bold text-sm flex items-center group-hover:text-blue-800 transition-colors w-max">
                      {t.readMore} <ChevronRight size={16} className="ml-1 group-hover:translate-x-1 transition-transform" />
                    </button>
                  </div>
                </div>
              )) : (
                <div className="col-span-full py-16 text-center text-gray-500 bg-gray-50 rounded-2xl border border-dashed border-gray-200">
                    <ShieldAlert className="w-12 h-12 sm:w-16 sm:h-16 mx-auto text-gray-300 mb-4" />
                    <p className="text-base sm:text-lg font-medium text-gray-400">No recent updates available at this time.</p>
                </div>
              )}
            </div>
        </div>
      </section>
      
      {/* Quick Info Cards */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6 pt-4 sm:pt-8">
          <div className="bg-blue-50/50 hover:bg-blue-50 rounded-2xl p-5 sm:p-6 border border-blue-100 flex items-start transition-colors">
             <div className="bg-blue-100 p-3 rounded-xl text-blue-600 mr-4 shrink-0"><Info size={24}/></div>
             <div>
                 <h3 className="font-bold text-gray-900 mb-1 sm:mb-2 text-base sm:text-lg">Free Assistance</h3>
                 <p className="text-xs sm:text-sm text-gray-600 leading-relaxed">Our services are completely free. We never ask for money to help victims.</p>
             </div>
          </div>
          <div className="bg-green-50/50 hover:bg-green-50 rounded-2xl p-5 sm:p-6 border border-green-100 flex items-start transition-colors">
             <div className="bg-green-100 p-3 rounded-xl text-green-600 mr-4 shrink-0"><ShieldCheck size={24}/></div>
             <div>
                 <h3 className="font-bold text-gray-900 mb-1 sm:mb-2 text-base sm:text-lg">Secure Reporting</h3>
                 <p className="text-xs sm:text-sm text-gray-600 leading-relaxed">Your information is handled securely and only used to assist in fraud resolution.</p>
             </div>
          </div>
           <div className="bg-orange-50/50 hover:bg-orange-50 rounded-2xl p-5 sm:p-6 border border-orange-100 flex items-start transition-colors sm:col-span-2 md:col-span-1">
             <div className="bg-orange-100 p-3 rounded-xl text-orange-600 mr-4 shrink-0"><Phone size={24}/></div>
             <div>
                 <h3 className="font-bold text-gray-900 mb-1 sm:mb-2 text-base sm:text-lg">Always Available</h3>
                 <p className="text-xs sm:text-sm text-gray-600 leading-relaxed">Contact our helpline or submit a report online anytime you face suspicious activity.</p>
             </div>
          </div>
      </section>
    </div>
  );

  const renderAbout = () => (
    <div className="max-w-4xl mx-auto p-4 md:p-8 space-y-8 animate-fade-in-up">
      <div className="text-center mb-12">
        <h2 className="text-4xl font-extrabold text-gray-900 mb-4 tracking-tight">{t.about || "About Us"}</h2>
        <div className="w-24 h-1.5 bg-gradient-to-r from-orange-400 via-white to-green-500 mx-auto rounded-full"></div>
      </div>

      <div className="bg-white p-8 rounded-3xl shadow-xl border border-gray-100 text-gray-700 leading-relaxed space-y-6 text-lg">
        <p className="font-medium text-gray-800">
          Be Aware India Foundation is a free public service initiative dedicated to helping people stay safe from any kind of online or offline fraud. 
        </p>
        
        <p>
          We assist victims by guiding them through the complaint process, supporting follow-ups, and taking action where possible, so that individuals are not alone in dealing with fraud cases. Our team provides both online and offline assistance, completely free of charge.
        </p>
        
        <div className="bg-red-50 border-l-4 border-red-500 p-4 rounded-r-lg shadow-sm">
            <p className="font-bold text-red-800 text-base">
              Important: We do not ask for money, and no one needs to pay anything in our name. 
            </p>
        </div>

        <p>
          The foundation is sustained through advertising revenue. Donations are entirely voluntary and never expected. If you would like to support our mission, you may contribute, but there is absolutely no obligation. These voluntary contributions help us maintain the website, resources, and outreach programs.
        </p>

        <div className="mt-10 bg-gradient-to-br from-blue-900 to-indigo-900 text-white p-8 rounded-2xl shadow-2xl relative overflow-hidden">
            {/* Background decorative elements */}
            <div className="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 bg-white opacity-5 rounded-full blur-3xl"></div>
            <div className="absolute bottom-0 left-0 -ml-16 -mb-16 w-48 h-48 bg-blue-400 opacity-10 rounded-full blur-2xl"></div>
            
            <div className="relative z-10">
                <h3 className="text-2xl font-black mb-4 flex items-center text-blue-100">
                    <ShieldCheck className="mr-3 text-green-400" size={32} />
                    Our Mission – Zero Fraud in India
                </h3>
                <p className="mb-4 text-blue-50 leading-relaxed">
                    At Be Aware India Foundation, our mission is to build a safer, more aware India where every individual is protected from online and offline fraud. We are committed to spreading awareness, educating people about emerging scams, and guiding victims through the right complaint process so they can take the necessary steps towards resolution. 
                </p>
                <p className="mb-4 text-blue-50 leading-relaxed">
                    We believe that no one should suffer because of a lack of information or support. Our goal is to empower every citizen with the knowledge to recognize, prevent, and respond to fraud confidently. Through awareness campaigns, educational resources, and community support, we are working towards one clear vision: <strong className="text-white">Zero Fraud in India.</strong>
                </p>
                <p className="text-lg font-bold text-green-400 mt-6 pt-4 border-t border-white/20">
                    Together, we can create a future where every citizen is informed, alert, and protected.<br/>
                    <span className="text-sm font-medium text-blue-200 block mt-2">(Team Be Aware India foundation)</span>
                </p>
            </div>
        </div>
      </div>
    </div>
  );

  const renderContact = () => (
    <div className="max-w-4xl mx-auto p-4 md:p-8 animate-fade-in-up">
      <div className="text-center mb-12">
        <h2 className="text-4xl font-extrabold text-gray-900 mb-4 tracking-tight">{t.contact}</h2>
        <div className="w-24 h-1.5 bg-blue-600 mx-auto rounded-full"></div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div className="bg-white p-8 rounded-3xl shadow-xl border border-gray-100">
          <h3 className="text-2xl font-bold mb-6 text-gray-800">Get in Touch</h3>
          <div className="space-y-6">
            <div className="flex items-start">
              <div className="bg-blue-100 p-3 rounded-full text-blue-600 mr-4">
                <Mail size={24} />
              </div>
              <div>
                <p className="font-semibold text-gray-900">Email Us</p>
                <p className="text-gray-600">support@beawareindia.com</p>
              </div>
            </div>
            <div className="flex items-start">
              <div className="bg-green-100 p-3 rounded-full text-green-600 mr-4">
                <Phone size={24} />
              </div>
              <div>
                <p className="font-semibold text-gray-900">Helpline (24/7)</p>
                <p className="text-gray-600 font-bold">+91 83 6060 5454</p>
              </div>
            </div>
            <div className="flex items-start">
              <div className="bg-orange-100 p-3 rounded-full text-orange-600 mr-4">
                <ShieldCheck size={24} />
              </div>
              <div>
                <p className="font-semibold text-gray-900">Emergency</p>
                <p className="text-gray-600">Dial 1930 for National Cyber Crime</p>
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white p-8 rounded-3xl shadow-xl border border-gray-100">
          <form className="space-y-5">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
              <input type="text" className="w-full border border-gray-300 p-3 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" placeholder="Your Full Name" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
              <input type="email" className="w-full border border-gray-300 p-3 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" placeholder="your@email.com" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Message</label>
              <textarea className="w-full border border-gray-300 p-3 rounded-xl h-32 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" placeholder="How can we help?"></textarea>
            </div>
            <button type="button" className="w-full bg-blue-600 text-white p-4 rounded-xl font-bold hover:bg-blue-700 flex justify-center items-center transition shadow-lg">
              <Send className="mr-2" /> {t.sendBtn}
            </button>
          </form>
        </div>
      </div>
    </div>
  );

  const renderDonate = () => (
    <div className="max-w-3xl mx-auto p-8 bg-white rounded-3xl shadow-2xl my-12 border border-green-100 text-center relative overflow-hidden">
      <div className="absolute -top-24 -right-24 w-48 h-48 bg-green-200 rounded-full mix-blend-multiply filter blur-3xl opacity-50"></div>
      
      <div className="w-20 h-20 bg-gradient-to-br from-green-100 to-emerald-50 text-green-600 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm border border-green-100 transform rotate-3">
        <ShieldCheck size={40} className="-rotate-3" />
      </div>
      
      <h2 className="text-3xl md:text-4xl font-extrabold text-gray-900 mb-4 tracking-tight">Support Our Mission</h2>
      <p className="text-gray-600 mb-10 text-lg px-4 max-w-2xl mx-auto leading-relaxed">
        Your voluntary contributions help us maintain our resources, servers, and continue providing absolutely free assistance to fraud victims across India. <span className="font-semibold text-gray-800">No obligation, just appreciation.</span>
      </p>
      
      <div className="bg-gradient-to-br from-gray-50 to-gray-100 p-8 rounded-3xl inline-block border border-gray-200 shadow-inner relative z-10">
         <img 
            src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=upi://pay?pa=beawareindia@upi&pn=BeAwareIndia&cu=INR" 
            alt="Donate QR Code" 
            className="mx-auto mb-6 rounded-2xl shadow-lg border-4 border-white transition-transform hover:scale-105" 
         />
         <p className="font-extrabold text-gray-800 text-xl tracking-tight">Scan to Donate via UPI</p>
         <div className="mt-3 bg-white px-5 py-2.5 rounded-full inline-flex items-center border border-gray-200 shadow-sm">
            <p className="text-sm font-mono text-gray-700 font-semibold tracking-wide">beawareindia@upi</p>
         </div>
      </div>
    </div>
  );

  const renderReport = () => (
    <div className="max-w-3xl mx-auto p-4 md:p-8 bg-white rounded-3xl shadow-2xl my-8 border border-red-100 relative overflow-hidden">
      <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-red-500 to-orange-500"></div>
      <div className="text-center mb-10 mt-4">
        <div className="w-16 h-16 bg-red-100 text-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
            <AlertTriangle size={32} />
        </div>
        <h2 className="text-3xl font-black text-gray-900 mb-2">{t.report}</h2>
        <p className="text-gray-500 font-medium">Your report helps us take action and protect others.</p>
      </div>

      <form onSubmit={handleComplaintSubmit} className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
            <label className="block text-sm font-bold text-gray-700 mb-2">{t.nameLabel}</label>
            <input type="text" value={complaintName} onChange={(e) => setComplaintName(e.target.value)} className="w-full border border-gray-300 bg-gray-50 p-3.5 rounded-xl focus:bg-white focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition-colors" required />
            </div>
            <div>
            <label className="block text-sm font-bold text-gray-700 mb-2">Contact Number</label>
            <input type="tel" value={complaintContact} onChange={(e) => setComplaintContact(e.target.value)} className="w-full border border-gray-300 bg-gray-50 p-3.5 rounded-xl focus:bg-white focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition-colors" required />
            </div>
        </div>
        
        <div>
          <label className="block text-sm font-bold text-gray-700 mb-2">{t.descLabel}</label>
          <textarea value={complaintDesc} onChange={(e) => setComplaintDesc(e.target.value)} className="w-full border border-gray-300 bg-gray-50 p-3.5 rounded-xl h-40 focus:bg-white focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition-colors" placeholder="Please provide details of the incident..." required></textarea>
        </div>
        
        <div className="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer group">
          <FileUp className="mx-auto text-gray-400 group-hover:text-red-500 mb-3" size={32}/>
          <label className="block text-sm font-bold text-gray-700 cursor-pointer group-hover:text-red-600 transition-colors">
            {t.evidenceLabel}
            <input type="file" className="hidden" accept="image/*,.pdf" />
          </label>
          <p className="text-xs text-gray-500 mt-2">Screenshots, PDFs, or images related to the fraud.</p>
        </div>

        <button type="submit" className="w-full bg-gradient-to-r from-red-600 to-red-500 text-white p-4 rounded-xl font-bold text-lg hover:from-red-700 hover:to-red-600 transition-all shadow-xl shadow-red-500/20 transform hover:-translate-y-0.5">
          {t.submitBtn}
        </button>
      </form>
    </div>
  );

  return (
    <div className="min-h-screen bg-[#f8fafc] font-sans flex flex-col selection:bg-blue-200">
      
      {/* Floating Social Media Pop-out Bar */}
      <div className="fixed right-0 top-1/2 -translate-y-1/2 z-50 flex flex-col gap-2.5">
        <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" title="Follow us on Facebook" className="bg-[#1877F2] text-white p-2.5 md:p-3 rounded-l-xl transform translate-x-2 hover:translate-x-0 transition-all duration-300 shadow-lg hover:shadow-xl group cursor-pointer flex items-center justify-center">
          <Facebook size={22} className="group-hover:scale-110 transition-transform" />
        </a>
        <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" title="Follow us on X (Twitter)" className="bg-black text-white p-2.5 md:p-3 rounded-l-xl transform translate-x-2 hover:translate-x-0 transition-all duration-300 shadow-lg hover:shadow-xl group cursor-pointer flex items-center justify-center">
          <Twitter size={22} className="group-hover:scale-110 transition-transform" />
        </a>
        <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" title="Follow us on Instagram" className="bg-gradient-to-tr from-[#F58529] via-[#DD2A7B] to-[#8134AF] text-white p-2.5 md:p-3 rounded-l-xl transform translate-x-2 hover:translate-x-0 transition-all duration-300 shadow-lg hover:shadow-xl group cursor-pointer flex items-center justify-center">
          <Instagram size={22} className="group-hover:scale-110 transition-transform" />
        </a>
        <a href="https://youtube.com" target="_blank" rel="noopener noreferrer" title="Subscribe to our YouTube Channel" className="bg-[#FF0000] text-white p-2.5 md:p-3 rounded-l-xl transform translate-x-2 hover:translate-x-0 transition-all duration-300 shadow-lg hover:shadow-xl group cursor-pointer flex items-center justify-center">
          <Youtube size={22} className="group-hover:scale-110 transition-transform" />
        </a>
      </div>

      {/* Top Tricolor Strip */}
      <div className="h-1.5 w-full flex fixed top-0 z-50">
        <div className="h-full w-1/3 bg-[#FF9933]"></div>
        <div className="h-full w-1/3 bg-white"></div>
        <div className="h-full w-1/3 bg-[#138808]"></div>
      </div>

      {/* Top Organization Heading */}
      <div className="fixed top-1.5 w-full z-50 bg-[#0A192F] text-white h-9 flex items-center justify-center shadow-md border-b border-blue-900">
        <ShieldCheck className="w-4 h-4 mr-2 text-green-400" />
        <span className="font-extrabold text-xs md:text-sm tracking-[0.2em] uppercase text-blue-50">
          Be Aware India Foundation
        </span>
      </div>

      {/* Main Navigation (Glassmorphism) */}
      <nav className={`fixed top-[42px] w-full z-40 transition-all duration-300 ${isScrolled ? 'bg-blue-50/95 backdrop-blur-lg shadow-md border-b border-blue-100' : 'bg-blue-50 shadow-sm'}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5 md:py-3">
          <div className="flex justify-between items-center gap-4">
            
            {/* Logo Area */}
            <div className="flex items-center cursor-pointer group shrink-0" onClick={() => setCurrentView('home')}>
              <img 
                src="ChatGPT Image Aug 15, 2026, 04_24_14 PM_2.png" 
                onError={(e) => {
                  e.target.onerror = null; 
                  e.target.src = "https://chatgpt.com/s/m_6a8045af68cc8191b105f0e6f18f340e"; 
                  e.target.onerror = (e2) => {
                     e2.target.style.display = 'none';
                     e2.target.nextSibling.style.display = 'flex';
                  }
                }}
                alt="Be Aware India Foundation Logo" 
                className="h-12 md:h-14 w-auto object-contain transition-transform group-hover:scale-105" 
              />
              {/* Stylish Text Fallback (Hidden by default, shows if img fails) */}
              <div className="hidden items-center ml-2 bg-white/60 backdrop-blur-md px-3.5 py-1.5 rounded-2xl border border-white/80 shadow-sm" style={{display: 'none'}}>
                  <div className="flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br from-blue-700 to-blue-900 shadow-md mr-3 border-2 border-white">
                      <ShieldCheck className="text-white w-5 h-5" />
                  </div>
                  <div className="flex flex-col justify-center">
                      <div className="flex items-baseline space-x-1.5">
                          <span className="text-xl md:text-2xl font-black tracking-tight leading-none text-blue-900">
                              Be Aware
                          </span>
                          <span className="text-xl md:text-2xl font-black tracking-tight leading-none bg-clip-text text-transparent bg-gradient-to-r from-[#FF9933] to-[#138808]">
                              India
                          </span>
                      </div>
                      <span className="text-[0.60rem] font-bold text-gray-500 tracking-[0.25em] uppercase mt-0.5 pl-0.5">
                          Foundation
                      </span>
                  </div>
              </div>
            </div>

            {/* Nav Links */}
            <div className="hidden md:flex items-center space-x-1.5 bg-white/60 p-1.5 rounded-full border border-blue-100/50 shadow-inner">
              <button onClick={() => setCurrentView('home')} className={`px-5 py-2 rounded-full font-bold text-sm transition-all ${currentView === 'home' ? 'bg-white text-blue-700 shadow-sm border border-blue-100' : 'text-blue-900 hover:text-blue-700 hover:bg-white/50'}`}>Home</button>
              <button onClick={() => setCurrentView('about')} className={`px-5 py-2 rounded-full font-bold text-sm transition-all ${currentView === 'about' ? 'bg-white text-blue-700 shadow-sm border border-blue-100' : 'text-blue-900 hover:text-blue-700 hover:bg-white/50'}`}>About Us</button>
              <button onClick={() => setCurrentView('contact')} className={`px-5 py-2 rounded-full font-bold text-sm transition-all ${currentView === 'contact' ? 'bg-white text-blue-700 shadow-sm border border-blue-100' : 'text-blue-900 hover:text-blue-700 hover:bg-white/50'}`}>{t.contact}</button>
              
              {/* Quick Links Dropdown */}
              <div className="relative group">
                <button className="px-5 py-2 rounded-full font-bold text-sm text-blue-900 hover:text-blue-700 hover:bg-white/50 transition-all flex items-center">
                  Quick Links <ChevronDown className="ml-1.5 w-4 h-4 text-blue-500 group-hover:text-blue-700 transition-colors" />
                </button>
                <div className="absolute top-full left-0 mt-2 w-48 bg-white border border-blue-50 rounded-2xl shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 overflow-hidden transform origin-top-left scale-95 group-hover:scale-100">
                  <button onClick={() => { setCurrentView('home'); setTimeout(() => window.scrollTo({top: 600, behavior: 'smooth'}), 100); }} className="block w-full text-left px-5 py-3 hover:bg-blue-50 text-gray-700 text-sm font-medium border-b border-gray-50 transition-colors">Latest Alerts</button>
                  <button onClick={() => { setCurrentView('home'); setTimeout(() => window.scrollTo({top: 600, behavior: 'smooth'}), 100); }} className="block w-full text-left px-5 py-3 hover:bg-blue-50 text-gray-700 text-sm font-medium border-b border-gray-50 transition-colors">Latest News</button>
                  <button onClick={() => setCurrentView('contact')} className="block w-full text-left px-5 py-3 hover:bg-red-50 text-red-700 text-sm font-bold transition-colors">Emergency Contact</button>
                </div>
              </div>
            </div>

            {/* Actions Area */}
            <div className="hidden md:flex items-center space-x-4 shrink-0">
              <select value={lang} onChange={(e) => setLang(e.target.value)} className="bg-transparent text-sm font-bold text-blue-900 cursor-pointer outline-none hover:text-blue-600 transition-colors appearance-none pr-2">
                <option value="en">English</option>
                <option value="hi">हिंदी</option>
                <option value="te">తెలుగు</option>
                <option value="ta">தமிழ்</option>
                <option value="kn">ಕನ್ನಡ</option>
              </select>
              <button onClick={() => setCurrentView('report')} className="px-6 py-2.5 rounded-full font-bold text-sm text-white bg-gradient-to-r from-red-600 to-red-500 hover:from-red-500 hover:to-red-400 shadow-md shadow-red-500/20 transform hover:-translate-y-0.5 transition-all flex items-center">
                <AlertTriangle className="w-4 h-4 mr-2" /> {t.navReport}
              </button>
            </div>

            {/* Mobile Menu Button */}
            <button className="md:hidden text-blue-900 p-2 hover:bg-blue-100 rounded-lg transition-colors" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
              {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>

        {/* Mobile Navigation */}
        {mobileMenuOpen && (
          <div className="md:hidden bg-blue-50 border-t border-blue-100 shadow-lg absolute w-full">
            <div className="px-4 pt-2 pb-6 space-y-2">
              <button onClick={() => {setCurrentView('home'); setMobileMenuOpen(false);}} className="block w-full text-left px-4 py-3 text-blue-900 font-bold hover:bg-blue-100 rounded-xl transition-colors">Home</button>
              <button onClick={() => {setCurrentView('about'); setMobileMenuOpen(false);}} className="block w-full text-left px-4 py-3 text-blue-900 font-bold hover:bg-blue-100 rounded-xl transition-colors">About Us</button>
              <button onClick={() => {setCurrentView('contact'); setMobileMenuOpen(false);}} className="block w-full text-left px-4 py-3 text-blue-900 font-bold hover:bg-blue-100 rounded-xl transition-colors">{t.contact}</button>
              <button onClick={() => {setCurrentView('contact'); setMobileMenuOpen(false);}} className="block w-full text-left px-4 py-3 text-red-700 font-bold hover:bg-red-100 rounded-xl transition-colors">Emergency Contact</button>
              <button onClick={() => {setCurrentView('report'); setMobileMenuOpen(false);}} className="block w-full text-left px-4 py-3 text-red-600 font-bold hover:bg-red-100 rounded-xl flex items-center transition-colors"><AlertTriangle className="w-4 h-4 mr-2" /> {t.navReport}</button>
              <select value={lang} onChange={(e) => setLang(e.target.value)} className="w-full mt-2 p-3 border border-blue-200 rounded-xl bg-white outline-none font-bold text-blue-900 shadow-sm">
                <option value="en">English</option>
                <option value="hi">हिंदी</option>
                <option value="te">తెలుగు</option>
                <option value="ta">தமிழ்</option>
                <option value="kn">ಕನ್ನಡ</option>
              </select>
            </div>
          </div>
        )}
      </nav>

      {/* Main Content Area */}
      <main className="flex-grow pt-[120px] pb-8">
        {currentView === 'home' && renderHome()}
        {currentView === 'about' && renderAbout()}
        {currentView === 'contact' && renderContact()}
        {currentView === 'donate' && renderDonate()}
        {currentView === 'report' && renderReport()}
        {currentView === 'admin' && renderAdmin()}
      </main>

      {/* Compact Minimal Footer */}
      <footer className="bg-gray-900 pt-8 pb-4 border-t border-gray-800 text-sm">
        <div className="max-w-7xl mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6 pb-6 border-b border-gray-800">
            {/* Brand Column */}
            <div className="col-span-1 md:col-span-2">
              <div className="flex items-center bg-white rounded-xl p-2 inline-flex mb-3 shadow-sm border border-gray-100">
                 <img 
                    src="https://chatgpt.com/s/m_6a8045af68cc8191b105f0e6f18f340e" 
                    onError={(e) => {
                      e.target.onerror = null; 
                      e.target.style.display = 'none';
                      e.target.nextSibling.style.display = 'flex';
                    }}
                    alt="Be Aware India" 
                    className="h-8 w-auto object-contain" 
                  />
                  <div className="hidden ml-2 items-center pr-2" style={{display: 'none'}}>
                     <ShieldCheck className="text-blue-600 w-6 h-6 mr-2" />
                     <div className="flex flex-col">
                         <span className="font-black text-gray-900 text-lg leading-none">
                             Be Aware <span className="text-blue-600">India</span>
                         </span>
                         <span className="text-[0.55rem] font-bold text-gray-500 tracking-widest uppercase mt-0.5">Foundation</span>
                     </div>
                  </div>
              </div>
              <p className="text-gray-400 text-xs leading-relaxed max-w-sm">
                Dedicated to spreading awareness and providing completely free assistance to protect citizens from cyber and offline fraud across India.
              </p>
            </div>
            
            {/* Quick Links Column */}
            <div>
               <h4 className="text-white font-bold mb-3 uppercase tracking-wider text-xs">Quick Links</h4>
               <ul className="space-y-2 text-gray-400">
                  <li><button onClick={() => setCurrentView('about')} className="hover:text-blue-400 transition-colors">About Mission</button></li>
                  <li><button onClick={() => setCurrentView('contact')} className="hover:text-red-400 transition-colors">Emergency Contact</button></li>
                  <li><button onClick={() => setCurrentView('report')} className="hover:text-red-400 transition-colors">Report Fraud</button></li>
               </ul>
            </div>

             {/* Contact Info Column */}
            <div>
               <h4 className="text-white font-bold mb-3 uppercase tracking-wider text-xs">Contact Info</h4>
               <ul className="space-y-2 text-gray-400">
                  <li className="flex items-center"><Phone size={14} className="mr-2 text-blue-400"/> +91 83 6060 5454</li>
                  <li className="flex items-center"><Mail size={14} className="mr-2 text-blue-400"/> support@beawareindia.com</li>
               </ul>
            </div>
          </div>

          {/* Bottom Bar */}
          <div className="flex flex-col md:flex-row justify-between items-center text-xs text-gray-500">
            <p>&copy; {new Date().getFullYear()} Be Aware India Foundation. All rights reserved.</p>
            <div className="mt-2 md:mt-0 flex items-center">
              <button onClick={() => setCurrentView('admin')} className="text-gray-600 hover:text-gray-300 transition-colors" title="Admin Login">
                <Lock size={12} />
              </button>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}