import React, { useState, useEffect } from 'react';
import { Lock, Brain, Wrench, Target, Video, Zap, User, Mail, KeyRound, CalendarDays, MapPin, ChevronDown, Eye, EyeOff, Twitter, Facebook, Youtube, Send, Phone } from 'lucide-react'; // Added Phone icon

// Logo URL for general use (hero text section) - user-uploaded one
const LOGO_URL = 'mobilsociallogo4.webp'; // This assumes the file is in the public folder

// Specific Logo URL for the top navigation bar AND FOOTER
const WHITE_LOGO_URL = 'https://www.mobilsocial.com/images/mobilsociallogowhite.png';

// Specific Logo URL for the form (can be the same as white logo or different)
const FORM_LOGO_URL = 'https://www.mobilsocial.com/images/mobilsociallogowhite.png';

// Helper component for social media icons (simplified)
const TikTokIcon = () => ( // Simple SVG placeholder for TikTok
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
    <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 0 .17.01.23.05.27.15.42.38.5.63.03.11.04.24.04.37.01 1.09.01 2.18.01 3.27 0 .09-.01.18-.04.27-.15.42-.41.71-.78.86a.99.99 0 01-.2.07c-.24.04-.48.05-.73.05h-1.99v8.84c0 .74-.01 1.48-.01 2.22 0 .13-.01.25-.04.37-.21.53-.57.93-1.04 1.18-.2.11-.42.18-.64.21-.31.04-.62.05-.94.05-.74 0-1.48-.01-2.22-.01H7.48c-.34 0-.66-.03-.97-.07-.41-.06-.78-.24-1.08-.52-.24-.23-.4-.5-.52-.81-.03-.08-.04-.17-.04-.26v-2.9c0-.09.02-.18.04-.27.19-.51.56-.9.99-1.14.23-.12.48-.2.74-.23.31-.04.62-.05.94-.05.63 0 1.27-.01 1.9-.01v-5.54H8.99c-.28 0-.55-.02-.81-.07-.42-.08-.79-.26-1.09-.56-.23-.23-.4-.51-.51-.82-.03-.08-.04-.17-.04-.26V3.76c0-.09.02-.18.04-.27.22-.53.59-.93 1.06-1.18.22-.11.45-.18.69-.21.31-.04.61-.05.92-.05 2.18 0 4.36-.01 6.55-.01Z"/>
  </svg>
);

// Background image URL
const HERO_BACKGROUND_IMAGE_URL = 'https://www.mobilsocial.com/images/mobilsocialbackground.webp';


const App = () => {
  // Page Title
  useEffect(() => {
    document.title = "What happening in miami | Mobilsocial Social Network";
  }, []);

  // --- State for Sign Up Form ---
  const [formData, setFormData] = useState({
    fullName: '',
    email: '',
    phoneNumber: '', 
    username: '',
    password: '',
    confirmPassword: '',
    dob: '',
    miamiArea: '',
  });

  const [errors, setErrors] = useState({});
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

  const miamiAreas = [
    "Select your area",
    "Downtown Miami",
    "South Beach",
    "Wynwood",
    "Brickell",
    "Coconut Grove",
    "Little Havana",
    "Coral Gables",
    "Miami Beach",
    "Key Biscayne",
    "Aventura",
    "Sunny Isles Beach",
    "Other",
  ];

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData({
      ...formData,
      [name]: type === 'checkbox' ? checked : value
    });
    if (errors[name]) {
      setErrors({ ...errors, [name]: null });
    }
  };

  const validateForm = () => {
    const newErrors = {};
    if (!formData.fullName.trim()) newErrors.fullName = 'Full name is required.';
    if (!formData.email.trim()) {
      newErrors.email = 'Email is required.';
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = 'Email is invalid.';
    }

    if (!formData.phoneNumber.trim()) {
        newErrors.phoneNumber = 'Phone number is required.';
    } else if (!/^\+?(\d[\d-. ]+)?(\([\d-. ]+\))?[\d-. ]+\d$/.test(formData.phoneNumber)) { 
        newErrors.phoneNumber = 'Phone number is invalid.';
    } else if (formData.phoneNumber.replace(/\D/g, '').length < 7) { 
        newErrors.phoneNumber = 'Phone number seems too short.';
    }


    if (!formData.username.trim()) newErrors.username = 'Username is required.';
    else if (formData.username.length < 3) newErrors.username = 'Username must be at least 3 characters.';

    if (!formData.password) {
      newErrors.password = 'Password is required.';
    } else if (formData.password.length < 8) {
      newErrors.password = 'Password must be at least 8 characters.';
    }
    if (formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = 'Passwords do not match.';
    }
    if (!formData.dob) newErrors.dob = 'Date of birth is required.';
    
    if (!formData.miamiArea || formData.miamiArea === "Select your area") {
      newErrors.miamiArea = 'Please select your area in Miami.';
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validateForm()) {
      console.log('Form Data:', formData);
      window.location.href = 'https://www.mobilsocial.com/signup';
      console.log('Sign up successful! Redirecting to mobilsocial.com/signup');
    } else {
      console.log('Validation Errors:', errors);
    }
  };

  // --- Feature Data ---
  const features = [
    {
      icon: <Lock size={32} className="text-sky-500" />,
      title: 'Privacy and Data Control',
      description: 'End-to-end encryption, minimal tracking, and full control over who sees your content. We prioritize your data security.',
    },
    {
      icon: <Brain size={32} className="text-sky-500" />,
      title: 'Authentic, Real Connections',
      description: 'Move away from toxic platforms. Join genuine, smaller communities for real conversations and emotional safety.',
    },
    {
      icon: <Wrench size={32} className="text-sky-500" />,
      title: 'Useful Tools for Creators & Users',
      description: 'Built-in monetization (tipping, subs), robust content creation tools (editing, scheduling, analytics) to empower your creativity.',
    },
    {
      icon: <Target size={32} className="text-sky-500" />,
      title: 'Personalized & Ethical Algorithms',
      description: 'Smart recommendations with transparency and control. Algorithms that enhance, not manipulate, your experience. Chronological feed option available.',
    },
    {
      icon: <Video size={32} className="text-sky-500" />,
      title: 'Video-First & Visually Dynamic',
      description: 'Embrace short-form video, immersive visuals, and TikTok-style storytelling. We support fast, engaging content formats natively.',
    },
    {
      icon: <Zap size={32} className="text-sky-500" />,
      title: 'AI-Enhanced Experiences',
      description: 'AI-powered tools to suggest content, auto-edit videos, moderate comments, match users, and power smarter chat support.',
    },
  ];

  // --- News Data (Placeholder) ---
  const newsItems = [
    { id: 1, title: "Miami Art Basel 2025 Dates Announced", snippet: "Get ready for the biggest art event in Miami...", image: "https://placehold.co/600x400/FF6347/FFFFFF?text=Art+Basel+News" },
    { id: 2, title: "New Tech Hub Opens in Wynwood", snippet: "Fostering innovation and startups in the heart of Miami...", image: "https://placehold.co/600x400/4682B4/FFFFFF?text=Tech+Hub" },
    { id: 3, title: "Weekend Food Truck Rally at Bayfront Park", snippet: "Discover diverse culinary delights this weekend...", image: "https://placehold.co/600x400/32CD32/FFFFFF?text=Food+Trucks" },
  ];


  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-sky-900 to-slate-900 text-gray-100 font-sans">
      {/* --- Navbar --- */}
      <nav className="bg-slate-900/80 backdrop-blur-md shadow-lg sticky top-0 z-50">
        <div className="container mx-auto px-6 py-3 flex justify-between items-center">
          <a href="#" className="flex items-center space-x-2">
            <img 
              src={WHITE_LOGO_URL} // Changed from NAVBAR_LOGO_URL to WHITE_LOGO_URL for consistency
              alt="MobilSocial Logo" 
              className="h-10 w-auto"
              onError={(e) => { 
                e.target.style.display='none'; 
                const fallbackText = e.target.parentElement.querySelector('.navbar-logo-fallback');
                if (fallbackText) fallbackText.style.display = 'inline';
              }} 
            />
            <span 
              className="navbar-logo-fallback text-2xl font-bold text-sky-400 hidden"
              style={{display: 'none'}}
            >
              MobilSocial
            </span>
          </a>
          <div className="space-x-4">
            <a href="#features" className="text-gray-300 hover:text-sky-400 transition duration-300">Features</a>
            <a href="#news" className="text-gray-300 hover:text-sky-400 transition duration-300">News</a>
            <a href="#" className="text-gray-300 hover:text-sky-400 transition duration-300">Sign In</a>
          </div>
        </div>
      </nav>

      {/* --- Hero Section --- */}
      <header className="relative py-16 md:py-24 lg:py-32 overflow-hidden">
        <div 
          className="absolute inset-0 bg-cover bg-center z-0" 
          style={{ 
            backgroundImage: `url('${HERO_BACKGROUND_IMAGE_URL}')`, 
            filter: 'brightness(0.7)'
          }} 
        ></div>
        <div className="absolute inset-0 bg-black/30 z-0"></div>

        <div className="container mx-auto px-6 relative z-10">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Left Content - Text Description */}
            <div className="text-center lg:text-left">
              <img src={LOGO_URL} alt="MobilSocial Logo" className="h-16 mx-auto lg:mx-0 mb-4 filter brightness-0 invert" onError={(e) => { e.target.style.display='none'; }}/>
              <h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-4 leading-tight">
                <span className="text-white">MobilSocial</span><span className="text-sky-400"> Network</span>
              </h1>
              <p className="text-2xl sm:text-3xl text-sky-300 mb-6 font-medium">
                What's happening in Miami?
              </p>
              <p className="text-lg text-gray-300 mb-8 leading-relaxed">
                Connect with your local Miami community like never before. Share your moments, discover exclusive events, and build authentic connections on a secure and private platform designed for Miamians, by Miamians.
              </p>
              <a href="#features" className="bg-sky-500 hover:bg-sky-600 text-white font-semibold py-3 px-8 rounded-lg text-lg transition duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 inline-block">
                Discover Features
              </a>
            </div>

            {/* Right Content - Sign Up Form */}
            <div className="bg-slate-800/80 backdrop-blur-md p-6 sm:p-8 rounded-xl shadow-2xl">
              <img 
                src={FORM_LOGO_URL} 
                alt="MobilSocial" 
                className="h-20 w-auto mb-6" 
                onError={(e) => {
                  e.target.style.display = 'none';
                  const fallbackText = document.createElement('p');
                  fallbackText.textContent = 'MobilSocial';
                  fallbackText.className = 'text-sky-400 text-xl font-semibold text-left mb-6'; 
                  e.target.parentNode.insertBefore(fallbackText, e.target.nextSibling);
                }}
              />
              <h2 className="text-3xl sm:text-4xl font-bold text-left mb-6 text-sky-300">Join MobilSocial Miami!</h2>
              <form onSubmit={handleSubmit} className="space-y-4">
                {/* Full Name */}
                <div>
                  <label htmlFor="fullName" className="block text-sm font-medium text-gray-300 mb-1">Full Name</label>
                  <div className="relative">
                    <User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
                    <input type="text" name="fullName" id="fullName" placeholder="Jane Doe"
                           className={`w-full pl-10 pr-3 py-2.5 bg-slate-700 border ${errors.fullName ? 'border-red-500' : 'border-slate-600'} rounded-lg text-gray-200 focus:ring-sky-500 focus:border-sky-500 placeholder-gray-500`}
                           value={formData.fullName} onChange={handleChange} />
                  </div>
                  {errors.fullName && <p className="text-red-400 text-xs mt-1">{errors.fullName}</p>}
                </div>

                {/* Email */}
                <div>
                  <label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-1">Email Address</label>
                   <div className="relative">
                    <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
                    <input type="email" name="email" id="email" placeholder="you@example.com"
                           className={`w-full pl-10 pr-3 py-2.5 bg-slate-700 border ${errors.email ? 'border-red-500' : 'border-slate-600'} rounded-lg text-gray-200 focus:ring-sky-500 focus:border-sky-500 placeholder-gray-500`}
                           value={formData.email} onChange={handleChange} />
                  </div>
                  {errors.email && <p className="text-red-400 text-xs mt-1">{errors.email}</p>}
                </div>

                {/* Phone Number */}
                <div>
                  <label htmlFor="phoneNumber" className="block text-sm font-medium text-gray-300 mb-1">Phone Number</label>
                  <div className="relative">
                    <Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
                    <input type="tel" name="phoneNumber" id="phoneNumber" placeholder="(555) 123-4567"
                           className={`w-full pl-10 pr-3 py-2.5 bg-slate-700 border ${errors.phoneNumber ? 'border-red-500' : 'border-slate-600'} rounded-lg text-gray-200 focus:ring-sky-500 focus:border-sky-500 placeholder-gray-500`}
                           value={formData.phoneNumber} onChange={handleChange} />
                  </div>
                  {errors.phoneNumber && <p className="text-red-400 text-xs mt-1">{errors.phoneNumber}</p>}
                </div>
                
                {/* Username */}
                <div>
                  <label htmlFor="username" className="block text-sm font-medium text-gray-300 mb-1">Username</label>
                  <div className="relative">
                     <User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
                    <input type="text" name="username" id="username" placeholder="miami_user"
                           className={`w-full pl-10 pr-3 py-2.5 bg-slate-700 border ${errors.username ? 'border-red-500' : 'border-slate-600'} rounded-lg text-gray-200 focus:ring-sky-500 focus:border-sky-500 placeholder-gray-500`}
                           value={formData.username} onChange={handleChange} />
                  </div>
                  {errors.username && <p className="text-red-400 text-xs mt-1">{errors.username}</p>}
                </div>

                {/* Password */}
                <div>
                  <label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-1">Password</label>
                  <div className="relative">
                    <KeyRound className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
                    <input type={showPassword ? "text" : "password"} name="password" id="password" placeholder="••••••••"
                           className={`w-full pl-10 pr-10 py-2.5 bg-slate-700 border ${errors.password ? 'border-red-500' : 'border-slate-600'} rounded-lg text-gray-200 focus:ring-sky-500 focus:border-sky-500 placeholder-gray-500`}
                           value={formData.password} onChange={handleChange} />
                    <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-200">
                      {showPassword ? <EyeOff size={20}/> : <Eye size={20}/>}
                    </button>
                  </div>
                  {errors.password && <p className="text-red-400 text-xs mt-1">{errors.password}</p>}
                </div>

                {/* Confirm Password */}
                <div>
                  <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-300 mb-1">Confirm Password</label>
                  <div className="relative">
                    <KeyRound className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
                    <input type={showConfirmPassword ? "text" : "password"} name="confirmPassword" id="confirmPassword" placeholder="••••••••"
                           className={`w-full pl-10 pr-10 py-2.5 bg-slate-700 border ${errors.confirmPassword ? 'border-red-500' : 'border-slate-600'} rounded-lg text-gray-200 focus:ring-sky-500 focus:border-sky-500 placeholder-gray-500`}
                           value={formData.confirmPassword} onChange={handleChange} />
                     <button type="button" onClick={() => setShowConfirmPassword(!showConfirmPassword)} className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-200">
                      {showConfirmPassword ? <EyeOff size={20}/> : <Eye size={20}/>}
                    </button>
                  </div>
                  {errors.confirmPassword && <p className="text-red-400 text-xs mt-1">{errors.confirmPassword}</p>}
                </div>

                {/* Date of Birth */}
                <div>
                  <label htmlFor="dob" className="block text-sm font-medium text-gray-300 mb-1">Date of Birth</label>
                  <div className="relative">
                    <CalendarDays className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
                    <input type="date" name="dob" id="dob"
                           className={`w-full pl-10 pr-3 py-2.5 bg-slate-700 border ${errors.dob ? 'border-red-500' : 'border-slate-600'} rounded-lg text-gray-200 focus:ring-sky-500 focus:border-sky-500 placeholder-gray-500 appearance-none`}
                           value={formData.dob} onChange={handleChange} />
                  </div>
                  {errors.dob && <p className="text-red-400 text-xs mt-1">{errors.dob}</p>}
                </div>
                
                {/* Miami Area Dropdown */}
                <div>
                  <label htmlFor="miamiArea" className="block text-sm font-medium text-gray-300 mb-1">Your Area in Miami</label>
                  <div className="relative">
                    <MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
                    <select name="miamiArea" id="miamiArea"
                            className={`w-full pl-10 pr-10 py-2.5 bg-slate-700 border ${errors.miamiArea ? 'border-red-500' : 'border-slate-600'} rounded-lg text-gray-200 focus:ring-sky-500 focus:border-sky-500 appearance-none`}
                            value={formData.miamiArea} onChange={handleChange}>
                      {miamiAreas.map(area => <option key={area} value={area} disabled={area === "Select your area"} className={area === "Select your area" ? "text-gray-500" : "text-gray-200 bg-slate-700"}>{area}</option>)}
                    </select>
                    <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
                  </div>
                  {errors.miamiArea && <p className="text-red-400 text-xs mt-1">{errors.miamiArea}</p>}
                </div>

                <button type="submit"
                        className="w-full bg-sky-500 hover:bg-sky-600 text-white font-semibold py-3 px-4 rounded-lg transition duration-300 shadow-md hover:shadow-lg transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-opacity-75 flex items-center justify-center space-x-2">
                  <Send size={20} />
                  <span>Create Account & Join Miami</span>
                </button>

                <div className="flex items-center my-6">
                  <hr className="flex-grow border-slate-600"/>
                  <span className="mx-4 text-sm text-gray-400">Or sign up with</span>
                  <hr className="flex-grow border-slate-600"/>
                </div>

                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
                  <button type="button" className="flex items-center justify-center space-x-2 bg-red-600 hover:bg-red-700 text-white py-2.5 px-3 rounded-lg transition duration-300 text-sm shadow hover:shadow-md">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"><path d="M15.545 6.558a9.4 9.4 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.7 7.7 0 0 1 5.352 2.082l-2.284 2.284A4.35 4.35 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.8 4.8 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.7 3.7 0 0 0 1.599-2.431H8v-3.08z"/></svg>
                    <span>Google</span>
                  </button>
                  <button type="button" className="flex items-center justify-center space-x-2 bg-blue-700 hover:bg-blue-800 text-white py-2.5 px-3 rounded-lg transition duration-300 text-sm shadow hover:shadow-md">
                    <Facebook size={20} />
                    <span>Facebook</span>
                  </button>
                  <button type="button" className="flex items-center justify-center space-x-2 bg-sky-500 hover:bg-sky-600 text-white py-2.5 px-3 rounded-lg transition duration-300 text-sm shadow hover:shadow-md">
                    <Twitter size={20} />
                    <span>Twitter</span>
                  </button>
                  <button type="button" className="flex items-center justify-center space-x-2 bg-black hover:bg-gray-800 text-white py-2.5 px-3 rounded-lg transition duration-300 text-sm shadow hover:shadow-md">
                    <TikTokIcon />
                    <span>TikTok</span>
                  </button>
                </div>

                <div className="text-center text-sm mt-6 space-x-3">
                  <a href="#" className="text-sky-400 hover:text-sky-300 transition duration-300">Forgot password?</a>
                  <span className="text-gray-500">|</span>
                  <a href="#" className="text-sky-400 hover:text-sky-300 transition duration-300">Sign In</a>
                   <span className="text-gray-500">|</span>
                  <a href="#" className="text-sky-400 hover:text-sky-300 transition duration-300">Dashboard</a>
                </div>
                <p className="text-xs text-gray-500 text-center mt-4">
                  By signing up, you agree to our <a href="#" className="text-sky-500 hover:underline">Terms of Service</a> and <a href="#" className="text-sky-500 hover:underline">Privacy Policy</a>.
                </p>
              </form>
            </div>
          </div>
        </div>
      </header>

      {/* --- Features Section --- */}
      <section id="features" className="py-16 md:py-24 bg-slate-800/50">
        <div className="container mx-auto px-6">
          <div className="text-center mb-12">
            <h2 className="text-3xl sm:text-4xl font-bold text-sky-400 mb-3">Why MobilSocial?</h2>
            <p className="text-lg text-gray-300 max-w-2xl mx-auto">
              Experience a social network built for authentic connections, creativity, and the vibrant Miami lifestyle.
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <div key={index} className="bg-slate-700/70 p-6 rounded-xl shadow-lg hover:shadow-sky-500/30 transition-shadow duration-300 transform hover:-translate-y-1 flex flex-col items-center text-center">
                <div className="p-3 bg-slate-800 rounded-full mb-4 inline-block">
                  {feature.icon}
                </div>
                <h3 className="text-xl font-semibold text-sky-300 mb-2">{feature.title}</h3>
                <p className="text-gray-400 text-sm leading-relaxed">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* --- News Area Section --- */}
      <section id="news" className="py-16 md:py-24">
        <div className="container mx-auto px-6">
          <div className="text-center mb-12">
            <h2 className="text-3xl sm:text-4xl font-bold text-sky-400 mb-3">Miami Pulse: News & Happenings</h2>
            <p className="text-lg text-gray-300 max-w-2xl mx-auto">
              Stay updated with the latest buzz and events in the Magic City.
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {newsItems.map(item => (
              <div key={item.id} className="bg-slate-800 rounded-xl shadow-lg overflow-hidden group">
                <img src={item.image} alt={item.title} className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" onError={(e) => { e.target.src = 'https://placehold.co/600x400/CCCCCC/FFFFFF?text=Image+Not+Found'; }}/>
                <div className="p-6">
                  <h3 className="text-xl font-semibold text-sky-300 mb-2">{item.title}</h3>
                  <p className="text-gray-400 text-sm mb-4">{item.snippet}</p>
                  <a href="#" className="text-sky-500 hover:text-sky-400 font-medium transition duration-300">Read More &rarr;</a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* --- Footer --- */}
      <footer className="bg-slate-900 border-t border-slate-700 py-8 text-center">
        <div className="container mx-auto px-6">
          {/* Updated Footer Logo to use WHITE_LOGO_URL and removed invert filter */}
          <img 
            src={WHITE_LOGO_URL} 
            alt="MobilSocial Logo" 
            className="h-12 w-auto mx-auto mb-4" // Removed filter brightness-0 invert
            onError={(e) => { 
                // Fallback if white logo fails: show original inverted logo or text
                e.target.onerror = null; // prevent infinite loop if LOGO_URL also fails
                e.target.src = LOGO_URL; // Try original logo
                e.target.className = "h-12 w-auto mx-auto mb-4 filter brightness-0 invert"; // Apply filter to original
                // If LOGO_URL also fails, this inner onError could hide it or show text
                e.target.onerror = () => { e.target.style.display='none'; }; 
            }}
          />
          <p className="text-gray-400 text-sm">
            &copy; {new Date().getFullYear()} MobilSocial Network. All rights reserved.
          </p>
          <p className="text-gray-500 text-xs mt-1">
            Connecting Miami, one post at a time.
          </p>
          <div className="mt-4 space-x-4">
            <a href="#" className="text-gray-400 hover:text-sky-400"><Twitter size={20}/></a>
            <a href="#" className="text-gray-400 hover:text-sky-400"><Facebook size={20}/></a>
            <a href="#" className="text-gray-400 hover:text-sky-400"><TikTokIcon /></a>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;