import React, { useMemo, useState } from 'react';
import { Search, ShoppingCart, Globe, BookOpen, Users, CalendarDays, Truck, Printer, MessageCircle, Send, Facebook, Instagram, Youtube, Mail, Phone, MapPin, ArrowRight, Star, Package, CreditCard, FileText, ChevronRight } from 'lucide-react';

const translations = {
  ar: {
    dir: 'rtl',
    brand: 'دار المرتضى',
    brandSub: 'للطباعة والنشر والتوزيع',
    nav: {
      home: 'الرئيسية',
      books: 'الكتب',
      authors: 'المؤلفون',
      distributors: 'الموزعون',
      fairs: 'المعارض',
      services: 'الخدمات الطباعية',
      news: 'الأخبار',
      faq: 'الأسئلة الشائعة',
      contact: 'التواصل',
    },
    heroEyebrow: 'دار نشر عربية برؤية حديثة',
    heroTitle: 'منصة ثنائية اللغة لدار نشر دينية وثقافية إسلامية',
    heroText:
      'واجهة رقمية احترافية لعرض أكثر من 400 عنوان بين الكتب الورقية والإلكترونية، مع تصنيفات واضحة، صفحات مؤلفين، معلومات الطلب والشحن، وقنوات تواصل مباشرة.',
    heroPrimary: 'تصفح الإصدارات الجديدة',
    heroSecondary: 'استكشف التصنيفات',
    statsTitles: 'عنوان منشور',
    statsAuthors: 'مؤلفاً ومحققاً',
    statsCountries: 'دول شحن وتوزيع',
    statsYears: 'سنة خبرة تقديرية',
    newReleases: 'الإصدارات الجديدة',
    featuredBanner: 'بنر الإصدارات الجديدة',
    featuredBannerText: 'كتب محققة، دراسات إسلامية، سير وتراجم، وإصدارات أدبية مختارة.',
    browseByCategory: 'تصفح حسب التصنيف',
    all: 'الكل',
    quran: 'المصحف الشريف',
    tafsir: 'تفسير القرآن الكريم',
    sirah: 'سير وتراجم',
    studies: 'دراسات إسلامية',
    literature: 'أدب',
    general: 'كتب منوعة',
    searchPlaceholder: 'ابحث بعنوان الكتاب أو اسم المؤلف أو التصنيف...',
    readMore: 'قراءة موجز',
    paper: 'ورقي',
    ebook: 'إلكتروني',
    addToCart: 'إضافة إلى السلة',
    orderNow: 'اطلب الآن',
    priceFrom: 'يبدأ من',
    currency: 'دولار',
    viewAllBooks: 'عرض قائمة المنشورات',
    authorsTitle: 'المؤلفون',
    authorsText: 'تعرف على كتّاب الدار والمحققين والمترجمين والباحثين.',
    distributorsTitle: 'الموزعون',
    distributorsText: 'شبكة توزيع للمكتبات، الجامعات، المعارض، ووكلاء البيع داخل المنطقة وخارجها.',
    fairsTitle: 'المعارض',
    fairsText: 'متابعة المشاركات في معارض الكتب والفعاليات الثقافية.',
    servicesTitle: 'الخدمات الطباعية',
    servicesText: 'حلول للطباعة، الإخراج، تجهيز الملفات، والطباعة حسب الطلب للمؤسسات والأفراد.',
    newsTitle: 'النشرة والأخبار',
    newsText: 'آخر الإعلانات، التخفيضات، التواقيع، والإصدارات القادمة.',
    faqTitle: 'الأسئلة الشائعة',
    faqText: 'إجابات مختصرة حول الطلب، الدفع، الشحن، النسخ الإلكترونية، وسياسة الاسترجاع.',
    aboutTitle: 'تاريخ الدار',
    aboutText:
      'تتخصص دار المرتضى في نشر الكتب الدينية والثقافية الإسلامية بلغة تحريرية رصينة وإخراج طباعي محترف، مع عناية خاصة بالمحتوى المحقق، الطبعات المرجعية، والتوزيع الحديث عبر المتجر الإلكتروني وشبكات الوكلاء.',
    paymentTitle: 'الطلب والدفع والشحن',
    paymentText:
      'يمكن طلب الكتاب ورقياً أو إلكترونياً، مع احتساب قيمة المنشورات، رسوم الشحن بحسب البلد، ووسائل دفع متعددة تشمل البطاقات، التحويل، والطلبات الخاصة للمكتبات والمؤسسات.',
    contactTitle: 'التواصل والروابط',
    contactText: 'واتساب، تيليجرام، فيسبوك، إنستغرام، يوتيوب، وبريد الدار.',
    booksSectionTitle: 'قائمة المنشورات',
    booksSectionText: 'عرض أغلفة الكتب مع موجز مختصر، السعر، ونوع الإتاحة.',
    requestFormats: 'خيارات الطلب',
    shippingInfo: 'معلومات الشحن',
    paymentInfo: 'معلومات الدفع',
    bookSummary: 'نبذة',
    distributors: [
      'مكتبات العراق',
      'وكلاء الخليج',
      'موزعو أوروبا',
      'معارض الكتاب العربية',
    ],
    fairs: [
      'معرض بغداد الدولي للكتاب',
      'معرض القاهرة الدولي للكتاب',
      'معرض الشارقة الدولي للكتاب',
      'معرض بيروت العربي الدولي للكتاب',
    ],
    services: [
      'طباعة أوفست ورقمية',
      'إخراج داخلي وتجهيز ملفات الطباعة',
      'تصميم أغلفة وسلاسل نشر',
      'طباعة حسب الطلب للمؤسسات',
    ],
    newsItems: [
      'إطلاق سلسلة جديدة في التفسير والدراسات القرآنية',
      'خصومات موسمية على العناوين المرجعية',
      'فتح باب التعاون مع موزعين جدد',
    ],
    faq: [
      {
        q: 'هل يمكن طلب الكتب خارج البلد؟',
        a: 'نعم، مع احتساب الشحن وفق الوجهة والوزن وطريقة الإرسال.',
      },
      {
        q: 'هل جميع العناوين متاحة ككتب إلكترونية؟',
        a: 'بعض العناوين فقط تتوفر بصيغة إلكترونية، ويُذكر ذلك في صفحة كل كتاب.',
      },
      {
        q: 'هل توجد أسعار خاصة للمكتبات والمؤسسات؟',
        a: 'نعم، تتوفر أسعار جملة وشروط خاصة للطلبات المؤسسية.',
      },
      {
        q: 'كيف أتابع جديد الدار؟',
        a: 'من خلال النشرة البريدية وروابط التواصل الاجتماعي في الموقع.',
      },
    ],
    contact: {
      phone: '+964 770 000 0000',
      whatsapp: 'واتساب مباشر',
      telegram: 'قناة تيليجرام',
      email: 'info@almurtada-books.com',
      address: 'بغداد – فرع المبيعات والتوزيع',
    },
    ctaTitle: 'جاهز لتحويله إلى موقع فعلي؟',
    ctaText:
      'يمكن ربط هذا النموذج بقاعدة بيانات المنتجات، سلة شراء حقيقية، حسابات العملاء، الشحن، والدفع الإلكتروني.',
    ctaButton: 'ابدأ التنفيذ',
    footer: 'جميع الحقوق محفوظة © دار المرتضى للطباعة والنشر والتوزيع',
  },
  en: {
    dir: 'ltr',
    brand: 'Al-Murtada',
    brandSub: 'Printing, Publishing & Distribution',
    nav: {
      home: 'Home',
      books: 'Books',
      authors: 'Authors',
      distributors: 'Distributors',
      fairs: 'Fairs',
      services: 'Printing Services',
      news: 'News',
      faq: 'FAQ',
      contact: 'Contact',
    },
    heroEyebrow: 'A modern bilingual publishing house',
    heroTitle: 'Arabic-English website for an Islamic cultural publisher',
    heroText:
      'A professional storefront for 400+ titles with clear categories, author pages, ordering and shipping details, and direct communication channels.',
    heroPrimary: 'Browse New Releases',
    heroSecondary: 'Explore Categories',
    statsTitles: 'Published Titles',
    statsAuthors: 'Authors & Editors',
    statsCountries: 'Shipping Destinations',
    statsYears: 'Years of Presence',
    newReleases: 'New Releases',
    featuredBanner: 'Featured New Releases',
    featuredBannerText: 'Scholarly editions, Qur’anic studies, biographies, and selected literary works.',
    browseByCategory: 'Browse by Category',
    all: 'All',
    quran: 'Holy Qur’an',
    tafsir: 'Qur’an Exegesis',
    sirah: 'Biography & Lives',
    studies: 'Islamic Studies',
    literature: 'Literature',
    general: 'General Books',
    searchPlaceholder: 'Search by title, author, or category...',
    readMore: 'Read Summary',
    paper: 'Print',
    ebook: 'eBook',
    addToCart: 'Add to Cart',
    orderNow: 'Order Now',
    priceFrom: 'From',
    currency: 'USD',
    viewAllBooks: 'View Full Catalogue',
    authorsTitle: 'Authors',
    authorsText: 'Meet the house authors, editors, translators, and researchers.',
    distributorsTitle: 'Distributors',
    distributorsText: 'Distribution network for bookstores, universities, fairs, and regional agents.',
    fairsTitle: 'Book Fairs',
    fairsText: 'Track participation in fairs and cultural events.',
    servicesTitle: 'Printing Services',
    servicesText: 'Printing, production, file preparation, and print-on-demand solutions.',
    newsTitle: 'News & Newsletter',
    newsText: 'Announcements, promotions, launches, and forthcoming titles.',
    faqTitle: 'Frequently Asked Questions',
    faqText: 'Quick answers on ordering, payment, shipping, eBooks, and returns.',
    aboutTitle: 'About the Press',
    aboutText:
      'Al-Murtada specializes in Islamic religious and cultural publishing with careful editorial standards, refined design, authoritative editions, and modern distribution through e-commerce and trade partners.',
    paymentTitle: 'Ordering, Payment & Shipping',
    paymentText:
      'Readers can order print or digital editions with publication value, shipping charges by destination, and multiple payment methods including cards, transfer, and institutional orders.',
    contactTitle: 'Contact & Social Links',
    contactText: 'WhatsApp, Telegram, Facebook, Instagram, YouTube, and email.',
    booksSectionTitle: 'Catalogue',
    booksSectionText: 'Browse cover images, short summaries, prices, and format availability.',
    requestFormats: 'Available Formats',
    shippingInfo: 'Shipping Details',
    paymentInfo: 'Payment Details',
    bookSummary: 'Summary',
    distributors: ['Iraq Bookstores', 'Gulf Agents', 'Europe Distributors', 'Arab Book Fairs'],
    fairs: ['Baghdad Book Fair', 'Cairo International Book Fair', 'Sharjah Book Fair', 'Beirut Arab Book Fair'],
    services: ['Offset & digital printing', 'Typesetting & prepress', 'Cover and series design', 'Institutional print-on-demand'],
    newsItems: [
      'Launch of a new Qur’anic studies series',
      'Seasonal offers on reference titles',
      'Opening collaborations with new distributors',
    ],
    faq: [
      {
        q: 'Do you ship internationally?',
        a: 'Yes. Shipping is calculated according to destination, weight, and service level.',
      },
      {
        q: 'Are all titles available as eBooks?',
        a: 'Only selected titles are available digitally, and this is shown on each book card.',
      },
      {
        q: 'Do you offer trade pricing?',
        a: 'Yes. Special terms are available for bookstores and institutions.',
      },
      {
        q: 'How can I follow new releases?',
        a: 'Through the newsletter and social media links on the website.',
      },
    ],
    contact: {
      phone: '+964 770 000 0000',
      whatsapp: 'WhatsApp',
      telegram: 'Telegram Channel',
      email: 'info@almurtada-books.com',
      address: 'Baghdad – Sales & Distribution Office',
    },
    ctaTitle: 'Ready to turn this into a production website?',
    ctaText:
      'This prototype can be connected to a real catalogue database, cart, customer accounts, shipping logic, and online payment.',
    ctaButton: 'Start Build',
    footer: 'All rights reserved © Al-Murtada Printing, Publishing & Distribution',
  },
};

const categories = ['all', 'quran', 'tafsir', 'sirah', 'studies', 'literature', 'general'];

const books = [
  {
    id: 1,
    category: 'quran',
    titleAr: 'المصحف الشريف – طبعة فاخرة',
    titleEn: 'The Holy Qur’an – Deluxe Edition',
    authorAr: 'لجنة علمية',
    authorEn: 'Editorial Committee',
    summaryAr: 'طبعة فاخرة بإخراج واضح، ورق عالي الجودة، وتجليد مناسب للهدايا والمكتبات المرجعية.',
    summaryEn: 'A premium Qur’an edition with clear typesetting, quality paper, and refined binding.',
    pricePrint: 24,
    priceEbook: null,
    cover: 'https://images.unsplash.com/photo-1512820790803-83ca734da794?q=80&w=900&auto=format&fit=crop',
    badgeAr: 'الأكثر طلباً',
    badgeEn: 'Best Seller',
  },
  {
    id: 2,
    category: 'tafsir',
    titleAr: 'مدخل إلى تفسير القرآن الكريم',
    titleEn: 'Introduction to Qur’anic Exegesis',
    authorAr: 'د. حسن الكرخي',
    authorEn: 'Dr. Hasan Al-Karkhi',
    summaryAr: 'موجز أكاديمي يعرّف بأصول التفسير واتجاهاته ومدارسه ومناهج القراءة المعاصرة.',
    summaryEn: 'A concise academic guide to tafsir principles, schools, and interpretive approaches.',
    pricePrint: 18,
    priceEbook: 9,
    cover: 'https://images.unsplash.com/photo-1521587760476-6c12a4b040da?q=80&w=900&auto=format&fit=crop',
    badgeAr: 'جديد',
    badgeEn: 'New',
  },
  {
    id: 3,
    category: 'sirah',
    titleAr: 'أئمتُنا',
    titleEn: 'Our Imams',
    authorAr: 'علي محمد علي دخيل',
    authorEn: 'Ali Muhammad Ali Dakhil',
    summaryAr: 'سيرة الأئمة الإثني عشر عليهم السلام في عرض منظم يجمع بين السرد والتوثيق.',
    summaryEn: 'A structured biography of the Twelve Imams combining narrative and documentation.',
    pricePrint: 22,
    priceEbook: 11,
    cover: 'https://images.unsplash.com/photo-1541963463532-d68292c34b19?q=80&w=900&auto=format&fit=crop',
    badgeAr: 'إصدار جديد',
    badgeEn: 'New Release',
  },
  {
    id: 4,
    category: 'studies',
    titleAr: 'دراسات في الفكر الإسلامي',
    titleEn: 'Studies in Islamic Thought',
    authorAr: 'مجموعة باحثين',
    authorEn: 'Collected Scholars',
    summaryAr: 'أبحاث منتقاة في قضايا العقيدة والفقه والتاريخ الثقافي الإسلامي.',
    summaryEn: 'Selected studies in creed, jurisprudence, and Islamic cultural history.',
    pricePrint: 20,
    priceEbook: 10,
    cover: 'https://images.unsplash.com/photo-1516979187457-637abb4f9353?q=80&w=900&auto=format&fit=crop',
    badgeAr: 'مرجعي',
    badgeEn: 'Reference',
  },
  {
    id: 5,
    category: 'literature',
    titleAr: 'مختارات أدبية من التراث العربي',
    titleEn: 'Literary Selections from Arabic Heritage',
    authorAr: 'تحرير الدار',
    authorEn: 'House Editors',
    summaryAr: 'نصوص أدبية مشروحة بعناية تجمع بين البلاغة والقراءة الميسرة للقارئ المعاصر.',
    summaryEn: 'Carefully edited literary texts balancing classical eloquence and accessibility.',
    pricePrint: 16,
    priceEbook: 8,
    cover: 'https://images.unsplash.com/photo-1507842217343-583bb7270b66?q=80&w=900&auto=format&fit=crop',
    badgeAr: 'أدب',
    badgeEn: 'Literature',
  },
  {
    id: 6,
    category: 'general',
    titleAr: 'دليل القارئ إلى المخطوطات العربية',
    titleEn: 'A Reader’s Guide to Arabic Manuscripts',
    authorAr: 'د. سامر الموسوي',
    authorEn: 'Dr. Samer Al-Moussawi',
    summaryAr: 'كتاب منوع يخدم الباحثين والمهتمين بتاريخ الكتاب العربي وتحقيق النصوص.',
    summaryEn: 'A practical guide for readers and researchers of Arabic manuscripts and text editing.',
    pricePrint: 19,
    priceEbook: 10,
    cover: 'https://images.unsplash.com/photo-1495446815901-a7297e633e8d?q=80&w=900&auto=format&fit=crop',
    badgeAr: 'مفيد للباحثين',
    badgeEn: 'For Researchers',
  },
];

const authors = [
  {
    nameAr: 'علي محمد علي دخيل',
    nameEn: 'Ali Muhammad Ali Dakhil',
    roleAr: 'باحث ومؤلف',
    roleEn: 'Researcher & Author',
  },
  {
    nameAr: 'د. حسن الكرخي',
    nameEn: 'Dr. Hasan Al-Karkhi',
    roleAr: 'متخصص في التفسير',
    roleEn: 'Qur’anic Studies Specialist',
  },
  {
    nameAr: 'د. سامر الموسوي',
    nameEn: 'Dr. Samer Al-Moussawi',
    roleAr: 'محقق وباحث',
    roleEn: 'Editor & Researcher',
  },
  {
    nameAr: 'هيئة التحرير',
    nameEn: 'Editorial Board',
    roleAr: 'إعداد ومراجعة',
    roleEn: 'Editing & Review',
  },
];

function SectionTitle({ eyebrow, title, text, dir = 'rtl' }) {
  return (
    <div className={`max-w-3xl ${dir === 'rtl' ? 'text-right' : 'text-left'}`}>
      {eyebrow ? <div className="text-sm uppercase tracking-[0.3em] text-emerald-700/80 mb-3">{eyebrow}</div> : null}
      <h2 className="text-3xl md:text-4xl font-bold text-slate-900">{title}</h2>
      {text ? <p className="mt-4 text-slate-600 leading-8">{text}</p> : null}
    </div>
  );
}

function BookCard({ book, t, lang, dir }) {
  const title = lang === 'ar' ? book.titleAr : book.titleEn;
  const author = lang === 'ar' ? book.authorAr : book.authorEn;
  const summary = lang === 'ar' ? book.summaryAr : book.summaryEn;
  const badge = lang === 'ar' ? book.badgeAr : book.badgeEn;

  return (
    <div className="group overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm hover:shadow-xl transition-all duration-300">
      <div className="relative aspect-[3/4] overflow-hidden bg-slate-100">
        <img loading="lazy" src={book.cover} alt={title} className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" />
        <div className="absolute top-4 left-4 rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-900 shadow-sm">
          {badge}
        </div>
      </div>
      <div className="p-5">
        <div className={`text-sm text-emerald-700 font-medium ${dir === 'rtl' ? 'text-right' : 'text-left'}`}>{author}</div>
        <h3 className={`mt-2 text-xl font-bold text-slate-900 ${dir === 'rtl' ? 'text-right' : 'text-left'}`}>{title}</h3>
        <p className={`mt-3 text-sm leading-7 text-slate-600 ${dir === 'rtl' ? 'text-right' : 'text-left'}`}>{summary}</p>

        <div className={`mt-5 flex flex-wrap gap-2 ${dir === 'rtl' ? 'justify-end' : 'justify-start'}`}>
          <span className="rounded-full bg-slate-100 px-3 py-1 text-xs text-slate-700">{t.paper}: {book.pricePrint} {t.currency}</span>
          {book.priceEbook ? (
            <span className="rounded-full bg-emerald-50 px-3 py-1 text-xs text-emerald-700">{t.ebook}: {book.priceEbook} {t.currency}</span>
          ) : null}
        </div>

        <div className={`mt-5 flex flex-wrap gap-3 ${dir === 'rtl' ? 'justify-end' : 'justify-start'}`}>
          <button aria-label={`${t.readMore} ${title}`} className="rounded-2xl bg-slate-900 px-4 py-2.5 text-sm font-medium text-white hover:bg-slate-800">{t.readMore}</button>
          <button aria-label={`${t.addToCart} ${title}`} className="rounded-2xl border border-slate-300 px-4 py-2.5 text-sm font-medium text-slate-800 hover:bg-slate-50">{t.addToCart}</button>
        </div>
      </div>
    </div>
  );
}

function InfoCard({ icon: Icon, title, text, items, dir }) {
  return (
    <div className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
      <div className={`flex items-center gap-3 ${dir === 'rtl' ? 'justify-end' : 'justify-start'}`}>
        <div className="rounded-2xl bg-emerald-50 p-3 text-emerald-700"><Icon size={20} /></div>
        <h3 className="text-xl font-bold text-slate-900">{title}</h3>
      </div>
      <p className={`mt-4 leading-8 text-slate-600 ${dir === 'rtl' ? 'text-right' : 'text-left'}`}>{text}</p>
      {items?.length ? (
        <ul className={`mt-4 space-y-3 ${dir === 'rtl' ? 'text-right' : 'text-left'}`}>
          {items.map((item) => (
            <li key={item} className="flex items-start gap-3 text-slate-700">
              <ChevronRight size={16} className="mt-1 shrink-0 text-amber-600" />
              <span>{item}</span>
            </li>
          ))}
        </ul>
      ) : null}
    </div>
  );
}

export default function App() {
  const [lang, setLang] = useState('ar');
  const [category, setCategory] = useState('all');
  const [query, setQuery] = useState('');

  const t = translations[lang];
  const dir = t.dir;

  const filteredBooks = useMemo(() => {
    return books.filter((book) => {
      const title = lang === 'ar' ? book.titleAr : book.titleEn;
      const author = lang === 'ar' ? book.authorAr : book.authorEn;
      const localizedCategory = t[book.category];
      const matchesCategory = category === 'all' ? true : book.category === category;
      const haystack = `${title} ${author} ${localizedCategory}`.toLowerCase();
      const matchesQuery = haystack.includes(query.toLowerCase());
      return matchesCategory && matchesQuery;
    });
  }, [lang, category, query, t]);

  return (
    <div dir={dir} className="min-h-screen bg-[#f8f6f1] text-slate-900 font-sans">
      <div className="sticky top-0 z-50 border-b border-slate-200/80 bg-white/90 backdrop-blur-xl">
        <div className="mx-auto flex max-w-7xl items-center justify-between gap-6 px-4 py-4 md:px-8">
          <div className={`flex items-center gap-4 ${dir === 'rtl' ? 'flex-row-reverse' : ''}`}>
            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-900 text-white shadow-lg">
              <BookOpen size={22} />
            </div>
            <div className={dir === 'rtl' ? 'text-right' : 'text-left'}>
              <div className="text-xl font-black tracking-tight">{t.brand}</div>
              <div className="text-xs text-slate-500">{t.brandSub}</div>
            </div>
          </div>

          <nav className="hidden gap-6 lg:flex text-sm text-slate-700">
            {Object.values(t.nav).map((item) => (
              <a key={item} href={`#${item}`} className="hover:text-slate-900">{item}</a>
            ))}
          </nav>

          <div className={`flex items-center gap-3 ${dir === 'rtl' ? 'flex-row-reverse' : ''}`}>
            <button aria-label="السلة" className="rounded-2xl border border-slate-200 p-3 text-slate-700 hover:bg-slate-50">
              <ShoppingCart size={18} />
            </button>
            <button
              onClick={() => setLang(lang === 'ar' ? 'en' : 'ar')}
              aria-label="تغيير اللغة"
              className="inline-flex items-center gap-2 rounded-2xl bg-emerald-700 px-4 py-3 text-sm font-semibold text-white hover:bg-emerald-800"
            >
              <Globe size={16} /> {lang === 'ar' ? 'English' : 'العربية'}
            </button>
          </div>
        </div>
      </div>

      <section className="relative overflow-hidden border-b border-slate-200 bg-[radial-gradient(circle_at_top,_rgba(16,185,129,0.12),_transparent_32%),linear-gradient(180deg,#fff,#f8f6f1)]">
        <div className="absolute inset-0 opacity-[0.06]" style={{backgroundImage:'radial-gradient(#0f172a 1px, transparent 1px)', backgroundSize:'18px 18px'}} />
        <div className="mx-auto grid max-w-7xl gap-12 px-4 py-16 md:px-8 md:py-24 lg:grid-cols-[1.15fr_0.85fr] lg:items-center">
          <div className={dir === 'rtl' ? 'text-right lg:order-2' : 'text-left'}>
            <div className="mb-4 inline-flex rounded-full border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-medium text-emerald-800">
              {t.heroEyebrow}
            </div>
            <h1 className="max-w-3xl text-4xl font-black leading-tight text-slate-950 md:text-6xl">{t.heroTitle}</h1>
            <p className="mt-6 max-w-2xl text-lg leading-9 text-slate-600">{t.heroText}</p>
            <div className={`mt-8 flex flex-wrap gap-4 ${dir === 'rtl' ? 'justify-end' : 'justify-start'}`}>
              <button className="rounded-2xl bg-slate-900 px-6 py-4 text-sm font-semibold text-white shadow-lg shadow-slate-900/10 hover:bg-slate-800">{t.heroPrimary}</button>
              <button className="rounded-2xl border border-slate-300 px-6 py-4 text-sm font-semibold text-slate-800 hover:bg-white">{t.heroSecondary}</button>
            </div>
            <div className="mt-10 grid grid-cols-2 gap-4 md:grid-cols-4">
              {[
                ['400+', t.statsTitles],
                ['120+', t.statsAuthors],
                ['35+', t.statsCountries],
                ['20+', t.statsYears],
              ].map(([num, label]) => (
                <div key={label} className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm">
                  <div className="text-2xl font-black text-slate-900">{num}</div>
                  <div className="mt-1 text-sm leading-6 text-slate-500">{label}</div>
                </div>
              ))}
            </div>
          </div>

          <div className={dir === 'rtl' ? 'lg:order-1' : ''}>
            <div className="overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-2xl shadow-slate-900/10">
              <div className="border-b border-slate-200 bg-slate-900 px-6 py-4 text-white">
                <div className="text-sm uppercase tracking-[0.3em] text-emerald-300">{t.featuredBanner}</div>
                <div className="mt-2 text-2xl font-bold">{t.newReleases}</div>
              </div>
              <div className="grid gap-0 md:grid-cols-[0.95fr_1.05fr]">
                <div className="p-6">
                  <div className="rounded-3xl bg-[linear-gradient(135deg,#0f172a,#1f2937)] p-6 text-white h-full flex flex-col justify-center">
                    <div className="text-sm uppercase tracking-[0.3em] text-amber-300">{t.brand}</div>
                    <div className="mt-4 text-3xl font-black">{t.featuredBannerText}</div>
                    <div className="mt-6 flex gap-3 flex-wrap">
                      <span className="rounded-full bg-white/10 px-3 py-1 text-xs">{t.quran}</span>
                      <span className="rounded-full bg-white/10 px-3 py-1 text-xs">{t.tafsir}</span>
                    </div>
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-4 p-6 bg-[#faf9f7]">
                  {books.slice(0, 4).map((book) => (
                    <div key={book.id} className="rounded-2xl border border-slate-200 bg-white p-3 shadow-sm">
                      <img loading="lazy" src={book.cover} alt={lang === 'ar' ? book.titleAr : book.titleEn} className="aspect-[3/4] w-full rounded-xl object-cover" />
                      <div className="mt-3 line-clamp-2 text-sm font-semibold text-slate-800">{lang === 'ar' ? book.titleAr : book.titleEn}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-4 py-16 md:px-8" id={t.nav.books}>
        <div className="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
          <SectionTitle title={t.booksSectionTitle} text={t.booksSectionText} dir={dir} />
          <div className={`flex w-full max-w-xl items-center gap-3 rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-sm ${dir === 'rtl' ? 'flex-row-reverse' : ''}`}>
            <Search size={18} className="text-slate-400 shrink-0" />
            <input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder={t.searchPlaceholder}
              className="w-full bg-transparent text-sm outline-none placeholder:text-slate-400"
            />
          </div>
        </div>

        <div className={`mt-8 flex flex-wrap gap-3 ${dir === 'rtl' ? 'justify-end' : 'justify-start'}`}>
          {categories.map((cat) => (
            <button
              key={cat}
              onClick={() => setCategory(cat)}
              className={`rounded-full px-4 py-2 text-sm font-medium transition ${category === cat ? 'bg-slate-900 text-white' : 'bg-white text-slate-700 border border-slate-200 hover:bg-slate-50'}`}
            >
              {t[cat]}
            </button>
          ))}
        </div>

        <div className="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
          {filteredBooks.length > 0 ? filteredBooks.map((book) => (
            <BookCard key={book.id} book={book} t={t} lang={lang} dir={dir} />
          )) : (
            <div className="col-span-full py-12 text-center text-slate-500">
               لا توجد نتائج مطابقة لبحثك.
            </div>
          )}
        </div>
      </section>

      <section className="border-y border-slate-200 bg-white">
        <div className="mx-auto grid max-w-7xl gap-6 px-4 py-16 md:px-8 lg:grid-cols-2 xl:grid-cols-3">
          <InfoCard icon={Users} title={t.authorsTitle} text={t.authorsText} items={authors.map((a) => (lang === 'ar' ? `${a.nameAr} — ${a.roleAr}` : `${a.nameEn} — ${a.roleEn}`))} dir={dir} />
          <InfoCard icon={Truck} title={t.distributorsTitle} text={t.distributorsText} items={t.distributors} dir={dir} />
          <InfoCard icon={CalendarDays} title={t.fairsTitle} text={t.fairsText} items={t.fairs} dir={dir} />
          <InfoCard icon={Printer} title={t.servicesTitle} text={t.servicesText} items={t.services} dir={dir} />
          <InfoCard icon={Star} title={t.newsTitle} text={t.newsText} items={t.newsItems} dir={dir} />
          <InfoCard icon={FileText} title={t.faqTitle} text={t.faqText} items={t.faq.map((f) => `${f.q} — ${f.a}`)} dir={dir} />
        </div>
      </section>

      <section className="mx-auto grid max-w-7xl gap-8 px-4 py-16 md:px-8 lg:grid-cols-2">
        <div className="rounded-[2rem] bg-slate-900 p-8 text-white shadow-2xl shadow-slate-900/10">
          <SectionTitle title={t.aboutTitle} text={t.aboutText} dir={dir} />
          <div className="mt-8 grid gap-4 md:grid-cols-2">
            <div className="rounded-3xl bg-white/5 p-5">
              <div className="flex items-center gap-3 text-amber-300"><Package size={18} /> {t.requestFormats}</div>
              <div className="mt-3 text-sm leading-7 text-slate-200">{t.paper} / {t.ebook} / الطلبات المؤسسية.</div>
            </div>
            <div className="rounded-3xl bg-white/5 p-5">
              <div className="flex items-center gap-3 text-amber-300"><Truck size={18} /> {t.shippingInfo}</div>
              <div className="mt-3 text-sm leading-7 text-slate-200">شحن محلي ودولي مع حساب آلي للتكلفة.</div>
            </div>
            <div className="rounded-3xl bg-white/5 p-5 md:col-span-2">
              <div className="flex items-center gap-3 text-amber-300"><CreditCard size={18} /> {t.paymentInfo}</div>
              <div className="mt-3 text-sm leading-7 text-slate-200">{t.paymentText}</div>
            </div>
          </div>
        </div>

        <div className="rounded-[2rem] border border-slate-200 bg-white p-8 shadow-sm">
          <SectionTitle title={t.contactTitle} text={t.contactText} dir={dir} />
          <div className="mt-8 space-y-4">
            <div className={`flex items-center gap-4 rounded-2xl border border-slate-200 p-4 ${dir === 'rtl' ? 'flex-row-reverse text-right' : ''}`}>
              <Phone size={18} className="text-emerald-700 shrink-0" />
              <span>{t.contact.phone}</span>
            </div>
            <div className={`flex items-center gap-4 rounded-2xl border border-slate-200 p-4 ${dir === 'rtl' ? 'flex-row-reverse text-right' : ''}`}>
              <Mail size={18} className="text-emerald-700 shrink-0" />
              <span className="break-all">{t.contact.email}</span>
            </div>
            <div className={`flex items-center gap-4 rounded-2xl border border-slate-200 p-4 ${dir === 'rtl' ? 'flex-row-reverse text-right' : ''}`}>
              <MapPin size={18} className="text-emerald-700 shrink-0" />
              <span>{t.contact.address}</span>
            </div>
          </div>
          <div className={`mt-8 flex flex-wrap gap-3 ${dir === 'rtl' ? 'justify-end' : 'justify-start'}`}>
            <a aria-label="WhatsApp" className="rounded-2xl bg-[#25D366] px-4 py-3 text-sm font-semibold text-white flex items-center" href="#"><MessageCircle size={16} className="mr-2" /> {t.contact.whatsapp}</a>
            <a aria-label="Telegram" className="rounded-2xl bg-[#229ED9] px-4 py-3 text-sm font-semibold text-white flex items-center" href="#"><Send size={16} className="mr-2" /> {t.contact.telegram}</a>
            <a aria-label="Facebook" className="rounded-2xl bg-[#1877F2] p-3 text-white flex items-center justify-center" href="#"><Facebook size={18} /></a>
            <a aria-label="Instagram" className="rounded-2xl bg-[#E4405F] p-3 text-white flex items-center justify-center" href="#"><Instagram size={18} /></a>
            <a aria-label="Youtube" className="rounded-2xl bg-[#FF0000] p-3 text-white flex items-center justify-center" href="#"><Youtube size={18} /></a>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-4 pb-16 md:px-8">
        <div className="overflow-hidden rounded-[2rem] border border-emerald-200 bg-[linear-gradient(135deg,#022c22,#065f46)] p-8 text-white shadow-2xl shadow-emerald-950/20 md:p-10">
          <div className="grid gap-6 md:grid-cols-[1.2fr_0.8fr] md:items-center">
            <div className={dir === 'rtl' ? 'text-right' : 'text-left'}>
              <h3 className="text-3xl font-black">{t.ctaTitle}</h3>
              <p className="mt-4 max-w-2xl text-emerald-50/90 leading-8">{t.ctaText}</p>
            </div>
            <div className={`flex ${dir === 'rtl' ? 'justify-start md:justify-end' : 'justify-start md:justify-end'}`}>
              <button className="inline-flex items-center gap-2 rounded-2xl bg-white px-6 py-4 font-semibold text-emerald-900 shadow-lg hover:bg-emerald-50">
                {t.ctaButton}
                <ArrowRight size={18} className={dir === 'rtl' ? 'rotate-180' : ''} />
              </button>
            </div>
          </div>
        </div>
      </section>

      <footer className="border-t border-slate-200 bg-white">
        <div className="mx-auto flex max-w-7xl flex-col gap-4 px-4 py-8 text-sm text-slate-500 md:px-8 md:flex-row md:items-center md:justify-between">
          <div>{t.footer}</div>
          <div className="flex flex-wrap gap-4">
            {Object.values(t.nav).map((item) => (
              <a key={item} href={`#${item}`} className="hover:text-slate-800">{item}</a>
            ))}
          </div>
        </div>
      </footer>
    </div>
  );
}