import React, { useState, useEffect, useRef } from 'react';
import { 
  Layout, Smartphone, Globe, Server, Palette, CheckCircle, ArrowLeft, Menu, X, 
  Star, Zap, Gift, Mail, Phone, ExternalLink, ShoppingCart, Video, BookOpen, 
  MessageCircle, Search, Layers, ArrowRight, ShieldCheck, ArrowUp, Moon, Sun, 
  Languages, ChevronDown, ChevronUp, Quote, Instagram, PenTool, Image, ShoppingBag, HelpCircle 
} from 'lucide-react';

// Animation Hook
const useElementOnScreen = (options) => {
  const containerRef = useRef(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      const [entry] = entries;
      if (entry.isIntersecting) setIsVisible(true);
    }, options);
    
    if (containerRef.current) observer.observe(containerRef.current);
    
    return () => {
      if (containerRef.current) observer.disconnect();
    };
  }, [containerRef, options]);

  return [containerRef, isVisible];
};

const AnimatedSection = ({ children, className = "" }) => {
  const [ref, isVisible] = useElementOnScreen({ root: null, rootMargin: '0px', threshold: 0.1 });
  return (
    <div ref={ref} className={`transition-all duration-1000 transform ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'} ${className}`}>
      {children}
    </div>
  );
};

const LandingPage = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [showScrollTop, setShowScrollTop] = useState(false);
  const [formStatus, setFormStatus] = useState('idle');
  const [openFaq, setOpenFaq] = useState(null);
  
  // Settings State
  const [theme, setTheme] = useState('light');
  const [lang, setLang] = useState('ar');
  const [langMenuOpen, setLangMenuOpen] = useState(false);

  // Form State
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    type: 'store'
  });

  // Assets
  const faviconUrl = "https://jbilou.online/IMG_20260109_000151.png";
  const logoAr = "https://jbilou.online/IMG_20260111_154642.png";
  const logoOther = "https://jbilou.online/IMG_20260111_182159.png";
  const currentLogo = lang === 'ar' ? logoAr : logoOther;

  // SEO & Head Management
  useEffect(() => {
    const titles = {
      ar: "Moncef Jbilou | خدمات تصميم المواقع والسوشيال ميديا",
      en: "Moncef Jbilou | Web Design & Digital Services",
      fr: "Moncef Jbilou | Création Web & Services Digitaux"
    };
    document.title = titles[lang];

    let metaDescription = document.querySelector('meta[name="description"]');
    if (!metaDescription) {
      metaDescription = document.createElement('meta');
      metaDescription.name = "description";
      document.head.appendChild(metaDescription);
    }
    const descriptions = {
      ar: "تصميم مواقع احترافية، متاجر إلكترونية، خدمات سيرفرات، وتصميم هوية بصرية في المغرب. احصل على موقعك مع دومين واستضافة مجانية.",
      en: "Professional web design, e-commerce stores, server services, and visual identity design in Morocco. Get your site with free domain and hosting.",
      fr: "Création de sites web professionnels, e-commerce, services serveurs et identité visuelle au Maroc. Domaine et hébergement gratuits."
    };
    metaDescription.content = descriptions[lang];

    let link = document.querySelector("link[rel~='icon']");
    if (!link) {
      link = document.createElement('link');
      link.rel = 'icon';
      document.getElementsByTagName('head')[0].appendChild(link);
    }
    link.href = faviconUrl;

    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
      setShowScrollTop(window.scrollY > 500);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);

  }, [lang]);

  // Translations Database
  const t = {
    ar: {
      dir: 'rtl',
      font: "font-['Cairo']",
      nav: { features: 'المميزات', offer: 'العرض الخاص', social: 'السوشيال ميديا', portfolio: 'أعمالنا', testimonials: 'الآراء', contact: 'ابدأ مشروعك' },
      hero: {
        badge: 'عرض باقة البداية: لوجو + دومين + استضافة مجاناً',
        title: 'نصمم لك موقعاً',
        titleHighlight: 'احترافياً',
        subtitle: 'يعكس قوة خدماتك',
        desc: 'خبرة واسعة في تصميم المتاجر الرقمية، منصات الخدمات، ومواقع الدورات التعليمية. احصل على موقع متكامل جاهز للبيع فوراً.',
        ctaPrimary: 'اطلب موقعك الآن',
        ctaSecondary: 'شاهد أعمالنا السابقة',
        mockupBadge: 'تم التسليم',
        mockupType: 'موقع خدمات رقمية',
        mockupFull: 'موقع خدمات متكامل'
      },
      process: {
        badge: 'آلية العمل',
        title: 'أنت عليك الفكرة، وعلينا التنفيذ الكامل',
        desc: 'لا تشغل بالك بالتفاصيل التقنية المعقدة. فقط زودنا بنوع المنتج أو الخدمة التي تقدمها، واترك الباقي لفريقنا: التصميم، المحتوى، الدومين، الاستضافة، وحتى الشعار.',
        cardTitle: 'استلم مشروعك جاهزاً',
        cardDesc: 'نحن نتكفل بكل شيء من الألف إلى الياء'
      },
      offer: {
        title: 'باقة الإنطلاق المتكاملة',
        desc: 'عند طلب تصميم صفحة هبوط، تحصل على هذه الهدايا مجاناً لتبدأ مشروعك فوراً.',
        logoTitle: 'لوجو احترافي',
        logoDesc: 'تصميم شعار نصي (Logotype) حديث يناسب نشاطك التجاري.',
        domainTitle: 'دومين .com أو .net',
        domainDesc: 'نحجز لك اسم نطاق احترافي من اختيارك لمدة سنة.',
        hostTitle: 'استضافة سريعة',
        hostDesc: 'استضافة قوية وآمنة لموقعك لمدة سنة كاملة مجاناً.'
      },
      social: {
        title: 'خدمات تصميم السوشيال ميديا',
        desc: 'نعزز حضورك الرقمي بتصاميم جذابة واحترافية لمنصات التواصل الاجتماعي.',
        identityTitle: 'الهوية البصرية للصفحات',
        identityDesc: 'تصميم متكامل لصفحات فيسبوك وإنستجرام يشمل: صورة الغلاف، الصورة الشخصية، وأيقونات الهايلايت.',
        postTitle: 'تصميم منشورات المنتجات',
        postDesc: 'تصميم بوستات إعلانية تبرز جمالية منتجاتك أو خدماتك وتزيد من نسبة التفاعل والمبيعات.'
      },
      portfolio: {
        title: 'نماذج من أعمالنا',
        desc: 'نفخر بسجل حافل من المشاريع الناجحة. تصفح بعضاً من أحدث أعمالنا التي ساعدت عملاءنا في تحقيق أهدافهم الرقمية.',
        visit: 'زيارة الموقع',
        cta: 'ابدأ مشروعك الخاص الآن'
      },
      testimonials: {
        title: 'ماذا يقول عملاؤنا؟',
        desc: 'نفخر بثقة عملائنا ونجاحاتهم التي هي جزء من نجاحنا.',
        reviews: [
          { name: "محمد العمراني", role: "صاحب متجر إلكتروني", content: "خدمة فوق الممتازة! حصلت على متجر متكامل مع دومين واستضافة مجانية." },
          { name: "سارة بنشقرون", role: "مسوقة رقمية", content: "تعاملت مع العديد من المصممين، لكن الاحترافية هنا مختلفة." },
          { name: "ياسين التازي", role: "مدير شركة خدمات", content: "كنت متردداً في البداية، لكن العرض كان مغرياً جداً. الدعم الفني متواجد دائماً." },
          { name: "د. هالة الصقلي", role: "طبيبة أسنان", content: "تصميم راقي جداً يعكس مستوى عيادتي. شكراً على سعة صدركم." },
          { name: "عثمان الفاسي", role: "صاحب مطعم", content: "قائمة الطعام الرقمية سهلت علينا العمل كثيراً، والزبائن أحبوا التصميم." },
          { name: "فاطمة الزهراء", role: "مؤثرة انستجرام", content: "خدمة تصميم السوشيال ميديا نقلت حسابي لمستوى آخر. ألوان وتناسق رائع." }
        ]
      },
      faq: {
        title: 'لديك استفسار؟ لدينا الإجابة.',
        desc: 'جمعنا لك أهم الأسئلة التي يطرحها عملاؤنا.',
        cta: 'تواصل معنا الآن',
        items: [
          { q: "ما الذي يشمله العرض بالضبط؟", a: "العرض يشمل تصميم صفحة هبوط أو موقع إلكتروني احترافي، بالإضافة إلى هدايا مجانية: لوجو، دومين، واستضافة لمدة سنة." },
          { q: "كم يستغرق تسليم الموقع؟", a: "غالباً ما يتم تسليم صفحات الهبوط خلال 3-5 أيام عمل، والمتاجر الإلكترونية خلال 7-10 أيام عمل." },
          { q: "هل الموقع يدعم اللغة العربية والإنجليزية؟", a: "نعم، يمكننا تصميم مواقع متعددة اللغات (RTL و LTR) لضمان وصولك لجمهور أوسع." },
          { q: "كيف يتم الدفع؟", a: "نقبل الدفع عبر التحويل البنكي المحلي أو خدمات تحويل الأموال. يتم دفع عربون عند الاتفاق والباقي عند التسليم." },
          { q: "هل أحصل على إيميل احترافي؟", a: "نعم، نوفر لك بريداً إلكترونياً رسمياً باسم موقعك (مثلاً: contact@yourdomain.com) لتبدو أكثر احترافية." },
          { q: "ما هي تكلفة التجديد بعد السنة الأولى؟", a: "التجديد يشمل فقط سعر الدومين والاستضافة السنوي، وهو مبلغ رمزي بسيط جداً مقارنة بالسوق." },
          { q: "هل يمكنني طلب تعديلات على التصميم؟", a: "نعم، نتيح لك طلب تعديلات لضمان أن التصميم يطابق رؤيتك تماماً قبل التسليم النهائي." },
          { q: "هل يوجد ضمان لاسترجاع المال؟", a: "نضمن لك الجودة والرضا التام. إذا لم نلتزم بالمواصفات المتفق عليها، يحق لك استرجاع العربون." },
          { q: "هل تشمل خدمة السوشيال ميديا كتابة المحتوى؟", a: "نعم، باقاتنا تشمل التصميم وكتابة 'كابشن' إبداعي وجذاب للمنشورات." },
          { q: "هل الموقع آمن؟", a: "نعم، نوفر شهادة حماية SSL مجانية لضمان تشفير بيانات موقعك وزبائنك وحمايتها من الاختراق." }
        ]
      },
      features: {
        title: 'مميزات تحصل عليها',
        mobile: { title: 'متجاوبة 100%', desc: 'تصميم يعمل بامتياز على جميع الشاشات.' },
        speed: { title: 'سرعة تحميل', desc: 'أكواد نظيفة لضمان أداء عالي وسرعة تصفح.' },
        seo: { title: 'تحسين SEO', desc: 'بنية برمجية مهيأة للظهور في نتائج بحث جوجل.' },
        support: { title: 'دعم فني', desc: 'نقف بجانبك حتى تتأكد من عمل الموقع بامتياز.' }
      },
      contact: {
        title: 'تواصل معنا',
        desc: 'املأ النموذج وسنقوم بالتواصل معك لمناقشة تفاصيل مشروعك.',
        formTitle: 'اطلب عرضك الآن',
        name: 'الاسم',
        phone: 'الهاتف',
        type: 'نوع الموقع',
        types: { store: 'متجر إلكتروني', service: 'موقع خدمات', landing: 'صفحة هبوط', social: 'تصميم سوشيال ميديا', other: 'أخرى' },
        btn: 'إرسال الطلب عبر واتساب',
        loading: 'جاري التحويل...',
        success: 'تم الإرسال بنجاح!'
      },
      whatsappMessage: "مرحباً، أرغب في الاستفادة من خدماتكم.\n\n*الاسم:* {name}\n*الهاتف:* {phone}\n*النوع:* {type}",
      footer: 'جميع الحقوق محفوظة'
    },
    en: {
      dir: 'ltr',
      font: "font-['Outfit']",
      nav: { features: 'Features', offer: 'Special Offer', social: 'Social Media', portfolio: 'Portfolio', testimonials: 'Testimonials', contact: 'Start Project' },
      hero: {
        badge: 'Starter Pack: Free Logo + Domain + Hosting',
        title: 'We Design',
        titleHighlight: 'Professional',
        subtitle: 'Websites for You',
        desc: 'Extensive experience in designing digital stores, service platforms, and educational sites. Get a fully integrated website ready to sell immediately.',
        ctaPrimary: 'Order Now',
        ctaSecondary: 'View Portfolio',
        mockupBadge: 'Delivered',
        mockupType: 'Digital Service Site',
        mockupFull: 'Full Service Site'
      },
      process: {
        badge: 'Workflow',
        title: 'You Provide the Idea, We Execute',
        desc: 'Don’t worry about technical details. Just tell us your product or service type, and we handle the rest: Design, Content, Domain, Hosting, and even the Logo.',
        cardTitle: 'Get It Ready',
        cardDesc: 'We handle everything from A to Z'
      },
      offer: {
        title: 'All-In-One Starter Pack',
        desc: 'Order a landing page design and get these gifts for FREE to start immediately.',
        logoTitle: 'Professional Logo',
        logoDesc: 'Modern textual logo design suitable for your business.',
        domainTitle: 'Free Domain',
        domainDesc: 'We register a professional .com or .net domain for you for 1 year.',
        hostTitle: 'Fast Hosting',
        hostDesc: 'Secure and high-speed hosting for your site for 1 full year.'
      },
      social: {
        title: 'Social Media Design Services',
        desc: 'We boost your digital presence with attractive and professional designs for social media platforms.',
        identityTitle: 'Page Visual Identity',
        identityDesc: 'Complete design for Facebook and Instagram pages including: Cover, Profile Picture, and Highlights icons.',
        postTitle: 'Product Post Design',
        postDesc: 'Creative ad posts/stories designs that highlight the beauty of your products or services and increase engagement.'
      },
      portfolio: {
        title: 'Our Portfolio',
        desc: 'We are proud of our successful projects. Browse some of our latest work helping clients achieve their digital goals.',
        visit: 'Visit Site',
        cta: 'Start Your Project Now'
      },
      testimonials: {
        title: 'What Our Clients Say',
        desc: 'We pride ourselves on our clients trust and success.',
        reviews: [
          { name: "Mohamed Amrani", role: "Store Owner", content: "Excellent service! Got a full store quickly with free hosting." },
          { name: "Sara Benchakroun", role: "Marketer", content: "High professionalism in design and execution." },
          { name: "Yassine Tazi", role: "CEO", content: "Great support and very fast website." },
          { name: "Dr. Hala Sqalli", role: "Dentist", content: "Very elegant design reflecting my clinic's level. Thanks!" },
          { name: "Othman Fassi", role: "Restaurant Owner", content: "The digital menu made our work easier, customers loved it." },
          { name: "Fatima Zahra", role: "Influencer", content: "Social media designs took my account to the next level." }
        ]
      },
      faq: {
        title: 'Have Questions? We Have Answers.',
        desc: 'Common questions asked by our clients.',
        cta: 'Contact Us',
        items: [
          { q: "What does the offer include?", a: "Design + Logo + Domain + Hosting for 1 year." },
          { q: "How long does delivery take?", a: "3 to 7 business days depending on the project." },
          { q: "Do you support multiple languages?", a: "Yes, we support Arabic, English, and French." },
          { q: "How do I pay?", a: "Bank transfer or money transfer services. Deposit first, balance on delivery." },
          { q: "Do I get a professional email?", a: "Yes, we provide official email (e.g., contact@yourdomain.com)." },
          { q: "What is the renewal cost?", a: "Renewal only covers the domain and hosting fees, which are nominal." },
          { q: "Can I request design revisions?", a: "Yes, we allow revisions to ensure the design matches your vision perfectly before final delivery." },
          { q: "Is there a refund policy?", a: "We guarantee quality. If we don't meet specs, you can get a refund." },
          { q: "Does social media service include copywriting?", a: "Yes, our packages include design and creative captions for your posts." },
          { q: "Is the site secure?", a: "Yes, free SSL certificate is included for security." }
        ]
      },
      features: {
        title: 'Features You Get',
        mobile: { title: '100% Responsive', desc: 'Works perfectly on all screen sizes.' },
        speed: { title: 'Fast Loading', desc: 'Clean code ensuring high performance.' },
        seo: { title: 'SEO Optimized', desc: 'Structure ready for search engines.' },
        support: { title: 'Tech Support', desc: 'We stand by you to ensure stability.' }
      },
      contact: {
        title: 'Contact Us',
        desc: 'Fill the form to discuss.',
        formTitle: 'Request Offer',
        name: 'Name',
        phone: 'Phone',
        type: 'Website Type',
        types: { store: 'E-Commerce', service: 'Service Site', landing: 'Landing Page', social: 'Social Media Design', other: 'Other' },
        btn: 'Send via WhatsApp',
        loading: 'Sending...',
        success: 'Sent!'
      },
      whatsappMessage: "Hello, I am interested in your services.\n\n*Name:* {name}\n*Phone:* {phone}\n*Type:* {type}",
      footer: 'All Rights Reserved'
    },
    fr: {
      dir: 'ltr',
      font: "font-['Outfit']", // Changed Font
      nav: { features: 'Fonctionnalités', offer: 'Offre', social: 'Réseaux Sociaux', portfolio: 'Portfolio', testimonials: 'Témoignages', contact: 'Démarrer' },
      hero: {
        badge: 'Pack Démarrage : Logo + Domaine + Hébergement Gratuits',
        title: 'Sites Web',
        titleHighlight: 'Professionnels',
        subtitle: 'Pour Vous',
        desc: 'Grande expérience dans la conception de boutiques et sites vitrines.',
        ctaPrimary: 'Commander',
        ctaSecondary: 'Portfolio',
        mockupBadge: 'Livré',
        mockupFull: 'Site Complet'
      },
      process: {
        badge: 'Processus',
        title: 'Votre idée, Notre réalisation',
        desc: 'Nous gérons tout : design, domaine, hébergement.',
        cardTitle: 'Recevez Prêt',
        cardDesc: 'De A à Z'
      },
      offer: {
        title: 'Pack Tout-en-Un',
        desc: 'Cadeaux gratuits pour démarrer.',
        logoTitle: 'Logo Pro',
        logoDesc: 'Logo textuel moderne.',
        domainTitle: 'Domaine Offert',
        domainDesc: '1 an offert.',
        hostTitle: 'Hébergement',
        hostDesc: 'Rapide et sécurisé.'
      },
      social: {
        title: 'Design Réseaux Sociaux',
        desc: 'Boostez votre présence.',
        identityTitle: 'Identité Visuelle',
        identityDesc: 'Design complet page.',
        postTitle: 'Design Posts',
        postDesc: 'Posts publicitaires.'
      },
      portfolio: {
        title: 'Notre Portfolio',
        desc: 'Nos dernières réalisations.',
        visit: 'Visiter',
        cta: 'Lancer le projet'
      },
      testimonials: {
        title: 'Avis Clients',
        desc: 'La satisfaction client avant tout.',
        reviews: [
          { name: "Mohamed Amrani", role: "E-Commerçant", content: "Service excellent, site livré rapidement avec hébergement gratuit." },
          { name: "Sara Benchakroun", role: "Marketer", content: "Grand professionnalisme dans le design." },
          { name: "Yassine Tazi", role: "Directeur", content: "Support technique au top et site très rapide." },
          { name: "Dr. Hala Sqalli", role: "Dentiste", content: "Design très élégant reflétant le niveau de ma clinique." },
          { name: "Othman Fassi", role: "Restaurateur", content: "Le menu numérique a facilité notre travail, les clients adorent." },
          { name: "Fatima Zahra", role: "Influenceuse", content: "Le design social media a propulsé mon compte." }
        ]
      },
      faq: {
        title: 'Questions ?',
        desc: 'Réponses fréquentes.',
        cta: 'Contactez-nous',
        items: [
          { q: "Que comprend l'offre ?", a: "Design + Logo + Domaine + Hébergement pour 1 an." },
          { q: "Délai de livraison ?", a: "3 à 7 jours ouvrables selon le projet." },
          { q: "Supportez-vous plusieurs langues ?", a: "Oui, Arabe, Anglais et Français." },
          { q: "Moyens de paiement ?", a: "Virement bancaire ou transfert d'argent. Avance requise." },
          { q: "Ai-je droit à un email pro ?", a: "Oui, email officiel inclus (ex: contact@votre-domaine.com)." },
          { q: "Coût de renouvellement ?", a: "Uniquement les frais de domaine et hébergement, très symbolique." },
          { q: "Puis-je demander des modifications ?", a: "Oui, nous permettons des révisions pour garantir que le design correspond parfaitement à votre vision." },
          { q: "Y a-t-il une garantie ?", a: "Satisfait ou remboursé si le cahier des charges n'est pas respecté." },
          { q: "Le service inclut-il la rédaction de contenu ?", a: "Oui, nos packs incluent le design et la rédaction de légendes créatives." },
          { q: "Le site est-il sécurisé ?", a: "Oui, certificat SSL gratuit inclus." }
        ]
      },
      features: {
        title: 'Avantages',
        mobile: { title: 'Responsive', desc: 'Parfait sur mobile.' },
        speed: { title: 'Rapide', desc: 'Performance optimale.' },
        seo: { title: 'SEO', desc: 'Optimisé Google.' },
        support: { title: 'Support', desc: 'Assistance incluse.' }
      },
      contact: {
        title: 'Contactez-nous',
        desc: 'Discutons de votre projet.',
        formTitle: 'Demander Offre',
        name: 'Nom',
        phone: 'Tél',
        type: 'Type',
        types: { store: 'E-Commerce', service: 'Site Vitrine', landing: 'Landing Page', social: 'Design RS', other: 'Autre' },
        btn: 'Envoyer WhatsApp',
        loading: 'Envoi...',
        success: 'Envoyé !'
      },
      whatsappMessage: "Bonjour, je suis intéressé par vos services.\n\n*Nom:* {name}\n*Tél:* {phone}\n*Type:* {type}",
      footer: 'Tous droits réservés'
    }
  };

  const content = t[lang];

  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
  const toggleFaq = (index) => setOpenFaq(openFaq === index ? null : index);
  const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');
  
  const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });

  const handleChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value });

  const handleSubmit = (e) => {
    e.preventDefault();
    setFormStatus('submitting');
    
    const phoneNumber = "212707733701";
    let message = content.whatsappMessage
      .replace('{name}', formData.name)
      .replace('{phone}', formData.phone)
      .replace('{type}', content.contact.types[formData.type] || formData.type);

    const encodedMessage = encodeURIComponent(message);
    const whatsappUrl = `https://wa.me/${phoneNumber}?text=${encodedMessage}`;

    setTimeout(() => {
      window.open(whatsappUrl, '_blank');
      setFormStatus('success');
      setFormData({ name: '', phone: '', type: 'store' });
    }, 1000);
  };

  const scrollToSection = (id) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
      setIsMenuOpen(false);
    }
  };

  const getPortfolioItems = () => [
    { key: 'gsm', url: "https://www.gsmserver.ma", icon: <ShoppingCart />, image: "https://jbilou.online/IMG_20260111_162225.jpg", bgClass: "bg-blue-50 dark:bg-blue-900/20", textClass: "text-blue-600 dark:text-blue-400", borderClass: "group-hover:border-blue-200 dark:group-hover:border-blue-700" },
    { key: 'forensic', url: "https://forensiclab.pro/", icon: <ShieldCheck />, image: "https://jbilou.online/IMG_20260111_174613.jpg", bgClass: "bg-slate-50 dark:bg-slate-800", textClass: "text-slate-700 dark:text-slate-300", borderClass: "group-hover:border-slate-300 dark:group-hover:border-slate-600" },
    { key: 'server', url: "https://server.portably.ma", icon: <Server />, image: "https://jbilou.online/IMG_20260111_162416.jpg", bgClass: "bg-sky-50 dark:bg-sky-900/20", textClass: "text-sky-600 dark:text-sky-400", borderClass: "group-hover:border-sky-200 dark:group-hover:border-sky-700" },
    { key: 'info', url: "https://www.portably.info", icon: <MessageCircle />, image: "https://jbilou.online/IMG_20260111_162312.jpg", bgClass: "bg-green-50 dark:bg-green-900/20", textClass: "text-green-600 dark:text-green-400", borderClass: "group-hover:border-green-200 dark:group-hover:border-green-700" },
    { key: 'online', url: "https://www.portably.online", icon: <BookOpen />, image: "https://jbilou.online/IMG_20260111_162402.jpg", bgClass: "bg-yellow-50 dark:bg-yellow-900/20", textClass: "text-yellow-600 dark:text-yellow-400", borderClass: "group-hover:border-yellow-200 dark:group-hover:border-yellow-700" },
    { key: 'flash', url: "https://flashacademy.space", icon: <BookOpen />, image: "https://jbilou.online/IMG_20260111_162348.jpg", bgClass: "bg-orange-50 dark:bg-orange-900/20", textClass: "text-orange-600 dark:text-orange-400", borderClass: "group-hover:border-orange-200 dark:group-hover:border-orange-700" },
    { key: 'xtreamify', url: "https://xtreamify.com", icon: <Video />, image: "https://jbilou.online/IMG_20260111_162240.jpg", bgClass: "bg-purple-50 dark:bg-purple-900/20", textClass: "text-purple-600 dark:text-purple-400", borderClass: "group-hover:border-purple-200 dark:group-hover:border-purple-700" },
    { key: 'maxott', url: "https://www.maxott.pro", icon: <Server />, image: "https://jbilou.online/IMG_20260111_162256.jpg", bgClass: "bg-gray-100 dark:bg-gray-800", textClass: "text-gray-700 dark:text-gray-300", borderClass: "group-hover:border-gray-300 dark:group-hover:border-gray-600" },
    { key: 'netflix', url: "https://netflix.xtreamify.com", icon: <Video />, image: "https://jbilou.online/IMG_20260111_162328.jpg", bgClass: "bg-red-50 dark:bg-red-900/20", textClass: "text-red-600 dark:text-red-400", borderClass: "group-hover:border-red-200 dark:group-hover:border-red-700" }
  ];

  const portfolioContent = {
    ar: {
        gsm: { title: 'GSMSERVER. MA - المتجر الأول لمعدات الصيانة', desc: 'بيع بوكسات السوفتوير، الدونجلات، والكابلات، مع تفعيل برامج المخططات وشحن رصيد السيرفرات لجميع الفنيين.' },
        forensic: { title: 'Forensic Lab Pro - مختبر التحليل الرقمي', desc: 'خدمات احترافية في استعادة البيانات والتحقيق الرقمي الجنائي للأجهزة الإلكترونية والهواتف الذكية بأحدث التقنيات.' },
        server: { title: 'Portably Server - خدمات فتح الشبكة بالمغرب', desc: 'المنصة الرائدة لخدمات فتح الشبكة (Unlock)، تخطي الآيكلاود (iCloud Bypass)، وتفعيل البرامج والكريديت.' },
        info: { title: 'Portably Info - خدمات السيرفر عبر واتساب', desc: 'حلول برمجية فورية، استعلامات الشبكة (Check IMEI)، وخدمات الفتح المباشر مع دعم فني متواصل وسريع.' },
        online: { title: 'Portably Online - كورس أسرار السيرفرات', desc: 'الدورة الشاملة لتعلم كيفية التعامل مع سيرفرات فك الشفرة، شراء الكودات، والتعامل مع المصادر العالمية.' },
        flash: { title: 'Flash Academy - احترف سوفتوير الهواتف', desc: 'منصة تعليمية متكاملة لتعليم برمجة الهواتف الذكية، التفليش، فك الشفرة، وإصلاح مشاكل النظام من الصفر.' },
        xtreamify: { title: 'Xtreamify IPTV - السيرفر الأقوى عالمياً', desc: 'استمتع بأقوى اشتراك IPTV بجودة 4K حقيقية وبدون تقطيع. يضم أضخم مكتبة قنوات رياضية وترفيهية وأفلام محدثة يومياً.' },
        maxott: { title: 'MaxOTT Pro - لوحات توزيع للموزعين', desc: 'انضم إلى فريق الموزعين واحصل على لوحة تحكم خاصة (Reseller Panel) لبيع الاشتراكات وبدء عملك الخاص.' },
        netflix: { title: 'Xtreamify - اشتراكات نتفليكس بريميوم', desc: 'احصل على حسابات Netflix 4K UHD قانونية ومضمونة، واستمتع بأفضل المحتوى الترفيهي بأقل تكلفة.' }
    },
    en: {
        gsm: { title: 'GSMSERVER. MA - #1 Maintenance Store', desc: 'Selling software boxes, dongles, and server credits for technicians.' },
        forensic: { title: 'Forensic Lab Pro - Digital Forensics', desc: 'Professional data recovery and digital forensic investigation services.' },
        server: { title: 'Portably Server - Unlock Services', desc: 'Leading platform for network unlocking and iCloud bypass services.' },
        info: { title: 'Portably Info - WhatsApp Services', desc: 'Instant server services, IMEI checks, and fast support via WhatsApp.' },
        online: { title: 'Portably Online - Server Course', desc: 'Comprehensive course on handling unlock servers and codes.' },
        flash: { title: 'Flash Academy - Software Academy', desc: 'Educational platform for smartphone software and repair training.' },
        xtreamify: { title: 'Xtreamify IPTV - Powerful Server', desc: 'Enjoy the strongest 4K IPTV subscription with zero buffering.' },
        maxott: { title: 'MaxOTT Pro - Reseller Panels', desc: 'Join our reseller team and get your own control panel.' },
        netflix: { title: 'Xtreamify - Netflix Premium', desc: 'Legal and guaranteed Netflix 4K UHD accounts.' }
    },
    fr: {
        gsm: { title: 'GSMSERVER. MA - Boutique Maintenance', desc: 'Vente de box, dongles et crédits serveurs pour techniciens.' },
        forensic: { title: 'Forensic Lab Pro - Investigation Numérique', desc: 'Services professionnels de récupération de données et forensic.' },
        server: { title: 'Portably Server - Déblocage Réseau', desc: 'Plateforme leader de déblocage réseau et iCloud au Maroc.' },
        info: { title: 'Portably Info - Services WhatsApp', desc: 'Services serveurs instantanés et vérification IMEI via WhatsApp.' },
        online: { title: 'Portably Online - Formation Serveurs', desc: 'Cours complet sur la gestion des serveurs de déblocage.' },
        flash: { title: 'Flash Academy - Académie Software', desc: 'Plateforme éducative pour la réparation logicielle des smartphones.' },
        xtreamify: { title: 'Xtreamify IPTV - Serveur Puissant', desc: 'Le meilleur abonnement IPTV 4K sans coupure.' },
        maxott: { title: 'MaxOTT Pro - Panneaux Revendeurs', desc: 'Devenez revendeur avec votre propre panneau de contrôle.' },
        netflix: { title: 'Xtreamify - Netflix Premium', desc: 'Comptes Netflix 4K UHD légaux et garantis.' }
    }
  };

  return (
    <div dir={content.dir} className={`${content.font} ${theme === 'dark' ? 'dark bg-gray-900' : 'bg-gray-50'} min-h-screen selection:bg-blue-500 selection:text-white relative transition-colors duration-500`}>
      {/* CSS For Animations & Fonts */}
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;900&display=swap');
        
        @keyframes float {
          0% { transform: translateY(0px); }
          50% { transform: translateY(-10px); }
          100% { transform: translateY(0px); }
        }
        .animate-float { animation: float 4s ease-in-out infinite; }
        
        @keyframes pulse-glow {
          0%, 100% { box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }
          50% { box-shadow: 0 0 25px rgba(59, 130, 246, 0.8); }
        }
        .animate-pulse-glow { animation: pulse-glow 2s infinite; }
      `}</style>

      {/* Navbar */}
      <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white/90 dark:bg-gray-900/90 backdrop-blur-md shadow-lg py-3' : 'bg-transparent py-5'}`}>
        <div className="container mx-auto px-6 flex justify-between items-center">
          <div className="flex items-center gap-2 cursor-pointer h-10 md:h-12" onClick={() => scrollToSection('hero')}>
            <img 
              src={currentLogo} 
              alt="Logo" 
              className={`h-full object-contain ${theme === 'dark' ? 'brightness-0 invert' : ''} transition-all duration-300 hover:scale-105`} 
            />
          </div>

          {/* Desktop Menu */}
          <div className="hidden lg:flex items-center gap-6">
            <button onClick={() => scrollToSection('features')} className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium transition hover:-translate-y-0.5">{content.nav.features}</button>
            <button onClick={() => scrollToSection('offer')} className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium transition hover:-translate-y-0.5">{content.nav.offer}</button>
            <button onClick={() => scrollToSection('social')} className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium transition hover:-translate-y-0.5">{content.nav.social}</button>
            <button onClick={() => scrollToSection('portfolio')} className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium transition hover:-translate-y-0.5">{content.nav.portfolio}</button>
            <button onClick={() => scrollToSection('testimonials')} className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium transition hover:-translate-y-0.5">{content.nav.testimonials}</button>
            
            {/* Controls */}
            <div className={`flex items-center gap-3 ${content.dir === 'rtl' ? 'border-r pr-4 mr-2' : 'border-l pl-4 ml-2'} border-gray-200 dark:border-gray-700`}>
                <div className="relative group">
                    <button onClick={() => setLangMenuOpen(!langMenuOpen)} className="flex items-center gap-1 text-gray-600 dark:text-gray-300 hover:text-blue-600 transition">
                        <Languages size={18} />
                        <span className="uppercase text-sm font-bold">{lang}</span>
                    </button>
                    {langMenuOpen && (
                        <div className="absolute top-full mt-2 w-24 bg-white dark:bg-gray-800 shadow-xl rounded-xl overflow-hidden border border-gray-100 dark:border-gray-700 transform transition-all animate-in fade-in zoom-in-95 duration-200 z-50">
                        {['ar', 'fr', 'en'].map((l) => (
                            <button key={l} onClick={() => { setLang(l); setLangMenuOpen(false); }} className={`block w-full px-4 py-2 text-sm hover:bg-blue-50 dark:hover:bg-gray-700 ${lang === l ? 'font-bold text-blue-600 bg-blue-50 dark:bg-gray-700' : 'text-gray-700 dark:text-gray-300'}`}>
                            {l.toUpperCase()}
                            </button>
                        ))}
                        </div>
                    )}
                </div>

                <button onClick={toggleTheme} className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-300 transition transform hover:rotate-12">
                    {theme === 'light' ? <Moon size={20} /> : <Sun size={20} />}
                </button>
            </div>

            <button onClick={() => scrollToSection('contact')} className="bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 text-white px-6 py-2.5 rounded-full font-bold transition shadow-lg hover:shadow-blue-500/30 transform hover:-translate-y-1">
              {content.nav.contact}
            </button>
          </div>

          {/* Mobile Menu Button */}
          <div className="lg:hidden flex items-center gap-4">
             <button onClick={toggleTheme} className="text-gray-600 dark:text-gray-300">
              {theme === 'light' ? <Moon size={20} /> : <Sun size={20} />}
            </button>
            <button onClick={() => setLang(lang === 'ar' ? 'fr' : lang === 'fr' ? 'en' : 'ar')} className="text-gray-600 dark:text-gray-300 font-bold uppercase text-sm border border-gray-200 dark:border-gray-700 px-2 py-1 rounded">
                {lang}
            </button>
            <button onClick={toggleMenu} className="text-gray-800 dark:text-white focus:outline-none">
              {isMenuOpen ? <X size={28} /> : <Menu size={28} />}
            </button>
          </div>
        </div>

        {isMenuOpen && (
          <div className="lg:hidden bg-white/95 dark:bg-gray-900/95 backdrop-blur-md absolute top-full left-0 w-full shadow-xl border-t border-gray-100 dark:border-gray-800 py-4 px-6 flex flex-col gap-4 animate-in slide-in-from-top-5 duration-300">
            <button onClick={() => scrollToSection('features')} className={`text-${content.dir === 'rtl' ? 'right' : 'left'} text-gray-700 dark:text-gray-300 font-medium py-2`}>{content.nav.features}</button>
            <button onClick={() => scrollToSection('offer')} className={`text-${content.dir === 'rtl' ? 'right' : 'left'} text-gray-700 dark:text-gray-300 font-medium py-2`}>{content.nav.offer}</button>
            <button onClick={() => scrollToSection('social')} className={`text-${content.dir === 'rtl' ? 'right' : 'left'} text-gray-700 dark:text-gray-300 font-medium py-2`}>{content.nav.social}</button>
            <button onClick={() => scrollToSection('portfolio')} className={`text-${content.dir === 'rtl' ? 'right' : 'left'} text-gray-700 dark:text-gray-300 font-medium py-2`}>{content.nav.portfolio}</button>
            <button onClick={() => scrollToSection('testimonials')} className={`text-${content.dir === 'rtl' ? 'right' : 'left'} text-gray-700 dark:text-gray-300 font-medium py-2`}>{content.nav.testimonials}</button>
            <button onClick={() => scrollToSection('contact')} className="bg-blue-600 text-white py-3 rounded-lg font-bold w-full shadow-md">{content.nav.contact}</button>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <header id="hero" className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden dark:bg-gray-900">
        <div className="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-blue-100 dark:bg-blue-900/20 rounded-full blur-3xl opacity-50 z-0 animate-pulse"></div>
        <div className="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 bg-orange-100 dark:bg-orange-900/20 rounded-full blur-3xl opacity-50 z-0 animate-pulse delay-1000"></div>

        <div className="container mx-auto px-6 relative z-10">
          <div className="flex flex-col lg:flex-row items-center gap-12">
            <AnimatedSection className={`lg:w-1/2 text-center lg:text-${content.dir === 'rtl' ? 'right' : 'left'}`}>
              <div className="inline-flex items-center gap-2 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400 px-4 py-1 rounded-full text-sm font-bold mb-6 hover:scale-105 transition-transform cursor-default">
                <Gift size={16} />
                <span>{content.hero.badge}</span>
              </div>
              <h1 className="text-4xl lg:text-6xl font-black text-gray-900 dark:text-white leading-tight mb-6">
                {content.hero.title} <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400">{content.hero.titleHighlight}</span> {content.hero.subtitle}
              </h1>
              <p className="text-lg text-gray-600 dark:text-gray-400 mb-8 leading-relaxed max-w-2xl mx-auto lg:mx-0">
                {content.hero.desc}
              </p>
              
              <div className={`flex flex-col sm:flex-row gap-4 justify-center lg:justify-${content.dir === 'rtl' ? 'start' : 'end'}`}>
                <button onClick={() => scrollToSection('contact')} className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-xl font-bold text-lg shadow-xl hover:shadow-blue-500/40 transition transform hover:-translate-y-1 flex items-center justify-center gap-2 animate-pulse-glow">
                  {content.hero.ctaPrimary}
                  {content.dir === 'rtl' ? <ArrowLeft size={20} /> : <ArrowRight size={20} />}
                </button>
                <button onClick={() => scrollToSection('portfolio')} className="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-800 dark:text-white border-2 border-gray-200 dark:border-gray-700 px-8 py-4 rounded-xl font-bold text-lg transition flex items-center justify-center gap-2 hover:shadow-lg">
                  {content.hero.ctaSecondary}
                  <Server size={20} className="text-blue-500" />
                </button>
              </div>
            </AnimatedSection>

            <AnimatedSection className="lg:w-1/2 relative mt-16 lg:mt-0 w-full">
              <div className={`relative bg-white dark:bg-gray-800 p-2 rounded-2xl shadow-2xl transform lg:${content.dir === 'rtl' ? 'rotate-2' : '-rotate-2'} hover:rotate-0 transition duration-700 border border-gray-100 dark:border-gray-700 w-full max-w-lg mx-auto lg:max-w-none animate-float`}>
                 <div className="bg-gray-50 dark:bg-gray-900 rounded-xl overflow-hidden aspect-[4/3] flex flex-col relative">
                    <div className="bg-gray-100 dark:bg-gray-800 h-8 flex items-center px-4 gap-2 border-b dark:border-gray-700 shrink-0">
                        <div className="w-3 h-3 rounded-full bg-red-400"></div>
                        <div className="w-3 h-3 rounded-full bg-yellow-400"></div>
                        <div className="w-3 h-3 rounded-full bg-green-400"></div>
                    </div>
                    <div className="flex-1 p-4 md:p-6 flex flex-col items-center justify-center space-y-2 md:space-y-4">
                        {/* Mockup Content */}
                        <div className="w-full flex justify-between items-center mb-2 md:mb-4">
                            <div className="w-1/4 h-3 md:h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
                            <div className="flex gap-2">
                                <div className="w-8 h-3 md:h-4 bg-gray-200 dark:bg-gray-700 rounded"></div>
                                <div className="w-8 h-3 md:h-4 bg-gray-200 dark:bg-gray-700 rounded"></div>
                            </div>
                        </div>
                        <div className="w-full h-24 md:h-40 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center group cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-900/50 transition">
                            <Zap className="text-blue-400 opacity-50 group-hover:scale-110 transition duration-300" size={48} />
                        </div>
                        <div className="grid grid-cols-3 gap-2 w-full mt-2 md:mt-4">
                            <div className="h-12 md:h-20 bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 shadow-sm rounded-lg hover:-translate-y-1 transition duration-300"></div>
                            <div className="h-12 md:h-20 bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 shadow-sm rounded-lg hover:-translate-y-1 transition duration-300 delay-100"></div>
                            <div className="h-12 md:h-20 bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 shadow-sm rounded-lg hover:-translate-y-1 transition duration-300 delay-200"></div>
                        </div>
                    </div>
                    
                    {/* Floating Badge */}
                    <div className={`absolute bottom-4 ${content.dir === 'rtl' ? 'right-4' : 'left-4'} bg-white/95 dark:bg-gray-800/95 backdrop-blur shadow-xl rounded-xl p-3 flex items-center gap-3 border border-gray-100 dark:border-gray-700 max-w-[200px] animate-bounce-slow`}>
                        <div className="bg-green-100 dark:bg-green-900/30 p-2 rounded-full text-green-600 dark:text-green-400 shrink-0">
                            <CheckCircle size={20} />
                        </div>
                        <div>
                            <div className="text-[10px] text-gray-500 dark:text-gray-400">{content.hero.mockupBadge}</div>
                            <div className="font-bold text-xs text-blue-900 dark:text-blue-200">{content.hero.mockupFull}</div>
                        </div>
                    </div>
                 </div>
              </div>
            </AnimatedSection>
          </div>
        </div>
      </header>

      {/* Process Section */}
      <section className="py-12 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800">
        <div className="container mx-auto px-6">
            <AnimatedSection className="bg-blue-50 dark:bg-gray-800/50 rounded-3xl p-8 md:p-12 border border-blue-100 dark:border-gray-700 flex flex-col md:flex-row items-center justify-between gap-8 shadow-sm">
                <div className="md:w-2/3">
                    <div className="inline-block bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 px-4 py-1 rounded-full text-sm font-bold mb-4">{content.process.badge}</div>
                    <h3 className="text-2xl md:text-4xl font-black text-blue-900 dark:text-white mb-4 leading-tight">
                        {content.process.title}
                    </h3>
                    <p className="text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
                        {content.process.desc}
                    </p>
                </div>
                <div className="md:w-1/3 flex justify-center">
                    <div className="relative">
                        <div className="absolute inset-0 bg-blue-200 dark:bg-blue-900/20 rounded-full blur-xl opacity-50 animate-pulse"></div>
                        <div className="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-xl relative flex flex-col items-center text-center gap-3 border border-blue-50 dark:border-gray-700 transform hover:scale-105 transition duration-300">
                            <div className="bg-green-100 dark:bg-green-900/30 p-3 rounded-full text-green-600 dark:text-green-400">
                                <Layers size={32} />
                            </div>
                            <div className="font-bold text-gray-900 dark:text-white">{content.process.cardTitle}</div>
                            <div className="text-xs text-gray-500 dark:text-gray-400">{content.process.cardDesc}</div>
                        </div>
                    </div>
                </div>
            </AnimatedSection>
        </div>
      </section>

      {/* Offer Section */}
      <section id="offer" className="py-20 bg-blue-900 dark:bg-black text-white relative overflow-hidden">
        <div className="absolute inset-0 opacity-10 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-400 via-blue-900 to-black"></div>
        <div className="container mx-auto px-6 relative z-10">
          <AnimatedSection className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-bold mb-4">{content.offer.title}</h2>
            <p className="text-blue-200 text-xl max-w-2xl mx-auto">{content.offer.desc}</p>
          </AnimatedSection>

          <div className="grid md:grid-cols-3 gap-8">
            {[
                { icon: <Palette />, title: content.offer.logoTitle, desc: content.offer.logoDesc, color: 'orange', delay: '0' },
                { icon: <Globe />, title: content.offer.domainTitle, desc: content.offer.domainDesc, color: 'blue', delay: '100', badge: 'Free' },
                { icon: <Server />, title: content.offer.hostTitle, desc: content.offer.hostDesc, color: 'green', delay: '200' }
            ].map((item, idx) => (
                <AnimatedSection key={idx} className={`bg-white/10 dark:bg-white/5 backdrop-blur-sm border border-white/20 p-8 rounded-2xl hover:bg-white/20 transition group ${item.badge ? 'transform md:-translate-y-4 shadow-2xl relative' : ''}`}>
                    {item.badge && <div className="absolute -top-3 right-6 bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold shadow-md animate-bounce">{item.badge}</div>}
                    <div className={`w-16 h-16 bg-${item.color}-500 rounded-2xl flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 group-hover:rotate-6 transition duration-300`}>
                        {React.cloneElement(item.icon, { size: 32, className: "text-white" })}
                    </div>
                    <h3 className="text-2xl font-bold mb-2">{item.title}</h3>
                    <p className="text-blue-100 leading-relaxed text-sm">{item.desc}</p>
                </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      {/* Social Media Design Section - Moved below Portfolio */}
      <section id="social" className="py-20 bg-white dark:bg-gray-800 border-t border-gray-100 dark:border-gray-700 overflow-hidden">
        <div className="container mx-auto px-6">
          <div className="flex flex-col md:flex-row gap-12 items-center">
            <AnimatedSection className="md:w-1/2">
                <div className="inline-flex items-center gap-2 bg-pink-100 dark:bg-pink-900/30 text-pink-600 dark:text-pink-400 px-4 py-1 rounded-full text-sm font-bold mb-6">
                    <Instagram size={16} />
                    <span>Social Media</span>
                </div>
                <h2 className="text-3xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
                    {content.social.title}
                </h2>
                <p className="text-gray-600 dark:text-gray-400 text-lg mb-8 leading-relaxed">
                    {content.social.desc}
                </p>
                <div className="space-y-6">
                    <div className="flex gap-4 group cursor-default">
                        <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center text-blue-600 dark:text-blue-400 shrink-0 group-hover:scale-110 transition">
                            <PenTool size={24} />
                        </div>
                        <div>
                            <h4 className="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 transition">{content.social.identityTitle}</h4>
                            <p className="text-gray-600 dark:text-gray-400 text-sm">{content.social.identityDesc}</p>
                        </div>
                    </div>
                    <div className="flex gap-4 group cursor-default">
                        <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-xl flex items-center justify-center text-purple-600 dark:text-purple-400 shrink-0 group-hover:scale-110 transition">
                            <Image size={24} />
                        </div>
                        <div>
                            <h4 className="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-purple-600 transition">{content.social.postTitle}</h4>
                            <p className="text-gray-600 dark:text-gray-400 text-sm">{content.social.postDesc}</p>
                        </div>
                    </div>
                </div>
            </AnimatedSection>
            <AnimatedSection className="md:w-1/2 w-full">
                <div className="relative bg-gradient-to-br from-pink-500 to-orange-400 rounded-3xl p-1 shadow-2xl transform rotate-1 hover:rotate-0 transition duration-500 hover:shadow-orange-500/20">
                    <div className="bg-white dark:bg-gray-800 rounded-[22px] overflow-hidden p-6">
                        <div className="flex items-center justify-between mb-6">
                            <div className="flex items-center gap-3">
                                <div className="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
                                <div className="space-y-1">
                                    <div className="w-24 h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
                                    <div className="w-16 h-2 bg-gray-100 dark:bg-gray-600 rounded"></div>
                                </div>
                            </div>
                            <div className="flex gap-1">
                                <div className="w-1 h-1 bg-gray-300 rounded-full"></div>
                                <div className="w-1 h-1 bg-gray-300 rounded-full"></div>
                                <div className="w-1 h-1 bg-gray-300 rounded-full"></div>
                            </div>
                        </div>
                        <div className="aspect-square bg-gray-100 dark:bg-gray-700 rounded-xl mb-4 relative overflow-hidden group">
                             {/* Abstract Post Design Representation */}
                             <div className="absolute inset-0 flex items-center justify-center">
                                <div className="w-2/3 h-2/3 bg-white dark:bg-gray-600 shadow-sm rounded-lg rotate-3 group-hover:rotate-6 transition duration-300"></div>
                                <div className="w-2/3 h-2/3 bg-blue-100 dark:bg-blue-900/40 shadow-md rounded-lg absolute -rotate-2 group-hover:-rotate-4 transition duration-300 flex items-center justify-center">
                                    <ShoppingBag size={40} className="text-blue-400 dark:text-blue-300 opacity-50" />
                                </div>
                             </div>
                        </div>
                        <div className="space-y-2">
                            <div className="flex gap-4 mb-2">
                                <div className="w-6 h-6 bg-red-100 rounded-full"></div>
                                <div className="w-6 h-6 bg-gray-100 rounded-full"></div>
                                <div className="w-6 h-6 bg-gray-100 rounded-full"></div>
                            </div>
                            <div className="w-full h-3 bg-gray-100 dark:bg-gray-700 rounded"></div>
                            <div className="w-3/4 h-3 bg-gray-100 dark:bg-gray-700 rounded"></div>
                        </div>
                    </div>
                </div>
            </AnimatedSection>
          </div>
        </div>
      </section>

      {/* Portfolio Section */}
      <section id="portfolio" className="py-24 bg-gray-50 dark:bg-gray-900 transition-colors">
        <div className="container mx-auto px-6">
          <AnimatedSection className="flex flex-col items-center text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">{content.portfolio.title}</h2>
            <p className="text-gray-600 dark:text-gray-400 max-w-2xl text-lg">
                {content.portfolio.desc}
            </p>
          </AnimatedSection>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {getPortfolioItems().map((item, index) => {
              const info = portfolioContent[lang][item.key];
              return (
              <AnimatedSection key={index} className="h-full">
                <a 
                    href={item.url} 
                    target="_blank" 
                    rel="noreferrer" 
                    className={`group relative bg-white dark:bg-gray-800 rounded-3xl shadow-sm hover:shadow-2xl border border-gray-100 dark:border-gray-700 overflow-hidden transition-all duration-500 flex flex-col h-full transform hover:-translate-y-2 ${item.borderClass}`}
                >
                    <div className={`h-40 ${item.bgClass} relative overflow-hidden transition-colors duration-300`}>
                    {item.image ? (
                        <>
                            <img 
                            src={item.image} 
                            alt={info.title} 
                            className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                            />
                            <div className="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors duration-300"></div>
                        </>
                    ) : (
                        <div className="absolute inset-0 flex items-center justify-center">
                            <div className="bg-white dark:bg-gray-700 p-4 rounded-2xl shadow-md">
                                {React.cloneElement(item.icon, { size: 32, className: item.textClass })}
                            </div>
                        </div>
                    )}
                    </div>
                    
                    <div className="p-6 flex-1 flex flex-col relative">
                    <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300" dir="ltr">
                        {info.title}
                    </h3>
                    
                    <p className="text-gray-500 dark:text-gray-400 text-sm leading-relaxed mb-6 flex-1">
                        {info.desc}
                    </p>

                    <div className="flex items-center justify-between pt-4 border-t border-gray-50 dark:border-gray-700 mt-auto group/link">
                        <span className="text-sm font-bold text-gray-400 dark:text-gray-500 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{content.portfolio.visit}</span>
                        <div className="w-8 h-8 rounded-full bg-gray-50 dark:bg-gray-700 flex items-center justify-center group-hover:bg-blue-600 group-hover:text-white dark:group-hover:text-white transition-all duration-300 transform group-hover:-translate-x-1">
                            <ExternalLink size={14} />
                        </div>
                    </div>
                    </div>
                </a>
              </AnimatedSection>
            )})}
          </div>
          
          <div className="mt-16 text-center">
             <button onClick={() => scrollToSection('contact')} className="inline-flex items-center gap-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 hover:border-blue-600 px-8 py-3 rounded-full font-bold transition-all duration-300 shadow-sm hover:shadow-md group">
                <span>{content.portfolio.cta}</span>
                {content.dir === 'rtl' ? <ArrowLeft size={18} className="group-hover:-translate-x-1 transition-transform" /> : <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />}
             </button>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section id="testimonials" className="py-20 bg-gray-50 dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800">
        <div className="container mx-auto px-6">
          <AnimatedSection className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">{content.testimonials.title}</h2>
            <p className="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">{content.testimonials.desc}</p>
          </AnimatedSection>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {content.testimonials.reviews.map((item, index) => (
              <AnimatedSection key={index}>
                <div className="bg-white dark:bg-gray-800 p-8 rounded-2xl relative border border-gray-100 dark:border-gray-700 hover:shadow-xl transition-all duration-500 group transform hover:-translate-y-2 h-full">
                    <div className="absolute top-6 left-6 text-blue-200 dark:text-blue-900/50 group-hover:text-blue-400 dark:group-hover:text-blue-800 transition-colors">
                    <Quote size={40} className="transform rotate-180 opacity-50" />
                    </div>
                    <div className="flex gap-1 mb-4">
                    {[...Array(5)].map((_, i) => (
                        <Star key={i} size={18} className="fill-orange-400 text-orange-400" />
                    ))}
                    </div>
                    <p className="text-gray-700 dark:text-gray-300 leading-relaxed mb-6 relative z-10">"{item.content}"</p>
                    <div className="flex items-center gap-3">
                    <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center text-blue-600 dark:text-blue-300 font-bold text-lg">
                        {item.name.charAt(0)}
                    </div>
                    <div>
                        <h4 className="font-bold text-gray-900 dark:text-white">{item.name}</h4>
                        <p className="text-xs text-gray-500 dark:text-gray-400">{item.role}</p>
                    </div>
                    </div>
                </div>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section id="faq" className="py-20 bg-white dark:bg-gray-800/50">
        <div className="container mx-auto px-6">
          <div className="flex flex-col md:flex-row gap-12 items-start">
            <AnimatedSection className="md:w-1/3">
              <div className="sticky top-32">
                <div className="inline-block bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 px-4 py-1 rounded-full text-sm font-bold mb-4">FAQ</div>
                <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">{content.faq.title}</h2>
                <p className="text-gray-600 dark:text-gray-400 mb-8 leading-relaxed">
                  {content.faq.desc}
                </p>
                <button onClick={() => scrollToSection('contact')} className="flex items-center gap-2 text-blue-600 dark:text-blue-400 font-bold hover:text-blue-800 dark:hover:text-blue-300 transition">
                  <span>{content.faq.cta}</span>
                  {content.dir === 'rtl' ? <ArrowLeft size={20} /> : <ArrowRight size={20} />}
                </button>
              </div>
            </AnimatedSection>

            <div className="md:w-2/3 w-full">
              <div className="space-y-4">
                {content.faq.items.map((faq, index) => (
                  <AnimatedSection key={index} className="bg-gray-50 dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden transition-all duration-300">
                    <button 
                      onClick={() => toggleFaq(index)}
                      className="w-full flex justify-between items-center p-5 text-right hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors focus:outline-none"
                    >
                      <span className={`font-bold text-lg ${openFaq === index ? 'text-blue-600 dark:text-blue-400' : 'text-gray-800 dark:text-white'} text-${content.dir === 'rtl' ? 'right' : 'left'}`}>
                        {faq.q}
                      </span>
                      {openFaq === index ? <ChevronUp className="text-blue-600" /> : <ChevronDown className="text-gray-400" />}
                    </button>
                    <div 
                      className={`overflow-hidden transition-all duration-300 ease-in-out ${openFaq === index ? 'max-h-40 opacity-100' : 'max-h-0 opacity-0'}`}
                    >
                      <div className={`p-5 pt-0 text-gray-600 dark:text-gray-300 border-t border-gray-100 dark:border-gray-700 mt-2 leading-relaxed text-${content.dir === 'rtl' ? 'right' : 'left'}`}>
                        {faq.a}
                      </div>
                    </div>
                  </AnimatedSection>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-20 bg-gray-50 dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800">
        <div className="container mx-auto px-6">
          <AnimatedSection className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">{content.features.title}</h2>
            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mt-10">
              {[
                { icon: <Smartphone />, ...content.features.mobile },
                { icon: <Zap />, ...content.features.speed },
                { icon: <Search />, ...content.features.seo },
                { icon: <CheckCircle />, ...content.features.support }
              ].map((feature, index) => (
                <div key={index} className="p-6 rounded-xl border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-800 text-center hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-300 hover:-translate-y-2 hover:shadow-lg">
                  <div className="w-12 h-12 mx-auto bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center text-blue-600 dark:text-blue-400 shadow-sm mb-4">
                    {React.cloneElement(feature.icon, { size: 24 })}
                  </div>
                  <h3 className="font-bold text-gray-900 dark:text-white mb-1">{feature.title}</h3>
                  <p className="text-gray-500 dark:text-gray-400 text-sm">{feature.desc}</p>
                </div>
              ))}
            </div>
          </AnimatedSection>
        </div>
      </section>

      {/* Contact Form Section */}
      <section id="contact" className="py-20 bg-white dark:bg-gray-800">
        <div className="container mx-auto px-6">
          <AnimatedSection className="max-w-4xl mx-auto bg-gray-50 dark:bg-gray-900 rounded-3xl shadow-xl overflow-hidden flex flex-col md:flex-row border border-gray-100 dark:border-gray-700">
            
            <div className="bg-gray-900 dark:bg-black text-white p-10 md:w-2/5 flex flex-col justify-between">
              <div>
                <h3 className="text-2xl font-bold mb-6">{content.contact.title}</h3>
                <p className="text-gray-400 mb-8 leading-relaxed">{content.contact.desc}</p>
                
                <div className="space-y-6">
                  <div className="flex items-center gap-4 hover:translate-x-1 transition cursor-pointer">
                    <div className="w-10 h-10 bg-gray-800 dark:bg-gray-800 rounded-full flex items-center justify-center text-blue-400">
                        <Phone size={20} />
                    </div>
                    <span dir="ltr">+212 707 733 701</span>
                  </div>
                  <div className="flex items-center gap-4 hover:translate-x-1 transition cursor-pointer">
                    <div className="w-10 h-10 bg-gray-800 dark:bg-gray-800 rounded-full flex items-center justify-center text-blue-400">
                        <Mail size={20} />
                    </div>
                    <span dir="ltr">Contact@jbilou.online</span>
                  </div>
                </div>
              </div>
            </div>

            <div className="p-10 md:w-3/5">
              {formStatus === 'success' ? (
                <div className="h-full flex flex-col items-center justify-center text-center animate-in zoom-in">
                    <div className="w-20 h-20 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 rounded-full flex items-center justify-center mb-6">
                        <CheckCircle size={40} />
                    </div>
                    <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">{content.contact.success}</h3>
                    <button onClick={() => setFormStatus('idle')} className="mt-8 text-blue-600 dark:text-blue-400 font-bold hover:underline">إرسال طلب آخر</button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-6">
                    <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">{content.contact.formTitle}</h3>
                    <div className="grid md:grid-cols-2 gap-6">
                        <div>
                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{content.contact.name}</label>
                            <input 
                              type="text" 
                              name="name" 
                              required 
                              className="w-full px-4 py-3 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white focus:border-blue-500 outline-none transition focus:ring-2 focus:ring-blue-100" 
                              value={formData.name}
                              onChange={handleChange}
                            />
                        </div>
                        <div>
                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{content.contact.phone}</label>
                            <input 
                              type="tel" 
                              name="phone" 
                              required 
                              className="w-full px-4 py-3 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white focus:border-blue-500 outline-none transition focus:ring-2 focus:ring-blue-100" 
                              dir="ltr" 
                              value={formData.phone}
                              onChange={handleChange}
                            />
                        </div>
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{content.contact.type}</label>
                        <select 
                          name="type" 
                          className="w-full px-4 py-3 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white outline-none focus:border-blue-500 transition"
                          value={formData.type}
                          onChange={handleChange}
                        >
                            {Object.entries(content.contact.types).map(([key, label]) => (
                                <option key={key} value={key}>{label}</option>
                            ))}
                        </select>
                    </div>
                    <button disabled={formStatus === 'submitting'} type="submit" className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-xl shadow-md transition flex justify-center items-center hover:shadow-lg transform active:scale-95">
                        {formStatus === 'submitting' ? content.contact.loading : content.contact.btn}
                    </button>
                </form>
              )}
            </div>
          </AnimatedSection>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 dark:bg-black text-gray-400 py-8 border-t border-gray-800 dark:border-gray-800">
        <div className="container mx-auto px-6 text-center">
          <img 
            src={currentLogo}
            alt="Logo" 
            className="h-10 object-contain mx-auto mb-4 opacity-80 hover:opacity-100 transition brightness-0 invert" 
          />
          <p className="text-sm">{content.footer} &copy; {new Date().getFullYear()}</p>
        </div>
      </footer>

      {/* Floating Buttons */}
      
      {/* WhatsApp Button */}
      <a 
        href="https://wa.me/212707733701" 
        target="_blank" 
        rel="noreferrer"
        className={`fixed bottom-6 ${content.dir === 'rtl' ? 'right-6' : 'right-6'} z-50 bg-[#25D366] text-white p-3.5 rounded-full shadow-2xl hover:bg-[#20bd5a] transition-all duration-300 hover:scale-110 flex items-center justify-center animate-bounce-slow`}
        aria-label="WhatsApp"
      >
        <svg viewBox="0 0 24 24" width="32" height="32" fill="currentColor">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
        </svg>
      </a>

      {/* Scroll to Top Button */}
      <button 
        onClick={scrollToTop}
        className={`fixed bottom-6 ${content.dir === 'rtl' ? 'left-6' : 'left-6'} z-40 bg-blue-600 text-white p-3 rounded-full shadow-xl hover:bg-blue-700 transition-all duration-500 transform ${showScrollTop ? 'translate-y-0 opacity-100' : 'translate-y-20 opacity-0'}`}
        aria-label="Scroll Top"
      >
        <ArrowUp size={24} />
      </button>

    </div>
  );
};

export default LandingPage;