import Layout from "@/components/Layout";
import SEOHead from "@/components/SEOHead";
import { useLanguage } from "@/contexts/LanguageContext";
import { Link } from "wouter";
import { FileText, Scale, AlertTriangle, Globe, Ban, RefreshCw, Mail, ArrowLeft, ArrowRight } from "lucide-react";

function SectionCard({
  icon,
  title,
  children,
}: {
  icon: React.ReactNode;
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-6 mb-6">
      <div className="flex items-center gap-3 mb-4">
        <div className="w-10 h-10 rounded-lg bg-teal/10 flex items-center justify-center text-teal shrink-0">
          {icon}
        </div>
        <h2 className="font-heading font-semibold text-navy text-lg">{title}</h2>
      </div>
      <div className="text-gray-600 text-sm leading-relaxed space-y-3">{children}</div>
    </div>
  );
}

export default function Terms() {
  const { lang } = useLanguage();
  const isAr = lang === "ar";
  const BackArrow = isAr ? ArrowRight : ArrowLeft;

  return (
    <Layout>
      <SEOHead
        title={isAr ? "شروط الاستخدام | الزار" : "Terms of Service | Alzar FZE"}
        description={isAr ? "شروط وأحكام استخدام موقع الزار الإلكتروني." : "Terms and conditions for using the Alzar FZE website."}
        canonical="https://www.alzarfze.com/terms"
        noindex={false}
        breadcrumbs={[
          { name: isAr ? "الرئيسية" : "Home", url: "https://www.alzarfze.com" },
          { name: isAr ? "شروط الاستخدام" : "Terms of Service", url: "https://www.alzarfze.com/terms" },
        ]}
      />

      <div className="bg-warm-white min-h-screen">
        {/* Header */}
        <div className="bg-navy text-white py-12">
          <div className="container">
            <Link href="/" className="inline-flex items-center gap-2 text-white/60 hover:text-white transition-colors mb-4 text-sm">
              <BackArrow className="w-4 h-4" />
              {isAr ? "العودة إلى الرئيسية" : "Back to Home"}
            </Link>
            <div className="flex items-center gap-3 mb-3">
              <FileText className="w-8 h-8 text-teal" />
              <h1 className="font-heading font-bold text-3xl">
                {isAr ? "شروط الاستخدام" : "Terms of Service"}
              </h1>
            </div>
            <p className="text-white/60 text-sm">
              {isAr ? "آخر تحديث: فبراير 2026" : "Last updated: February 2026"}
            </p>
          </div>
        </div>

        {/* Content */}
        <div className="container py-10 max-w-3xl">
          {/* Introduction */}
          <div className="bg-teal/5 border border-teal/20 rounded-xl p-6 mb-8">
            <p className="text-gray-700 text-sm leading-relaxed">
              {isAr
                ? "مرحباً بك في موقع الزار الإلكتروني (alzarfze.com). باستخدامك لهذا الموقع، فإنك توافق على الالتزام بهذه الشروط والأحكام. إذا كنت لا توافق على أي جزء من هذه الشروط، يرجى عدم استخدام الموقع."
                : "Welcome to the Alzar FZE website (alzarfze.com). By accessing and using this website, you agree to be bound by these Terms of Service. If you do not agree to any part of these terms, please do not use the website."}
            </p>
          </div>

          <SectionCard icon={<Globe className="w-5 h-5" />} title={isAr ? "استخدام الموقع" : "Use of Website"}>
            <p>
              {isAr
                ? "هذا الموقع مخصص لأغراض المعلومات فقط. المحتوى المقدم يتعلق بخدمات الاستشارات الهندسية والحلول الصناعية التي تقدمها شركة الزار. يجوز لك:"
                : "This website is provided for informational purposes only. The content relates to the engineering consulting services and industrial solutions offered by Alzar FZE. You may:"}
            </p>
            <ul className="list-disc ps-5 space-y-1">
              <li>{isAr ? "تصفح الموقع والاطلاع على المعلومات المتاحة" : "Browse the website and access available information"}</li>
              <li>{isAr ? "إرسال استفسارات عبر نموذج الاتصال" : "Submit inquiries through the contact form"}</li>
              <li>{isAr ? "تنزيل المواد المتاحة للتنزيل للاستخدام الشخصي أو التجاري المشروع" : "Download available materials for legitimate personal or business use"}</li>
            </ul>
          </SectionCard>

          <SectionCard icon={<Scale className="w-5 h-5" />} title={isAr ? "الملكية الفكرية" : "Intellectual Property"}>
            <p>
              {isAr
                ? "جميع المحتويات على هذا الموقع، بما في ذلك النصوص والصور والشعارات والتصميمات، هي ملك لشركة الزار أو شركائها المعتمدين وتخضع لحماية قوانين الملكية الفكرية. شعارات وأسماء الشركاء والمصنعين المذكورين على هذا الموقع هي علامات تجارية مسجلة لأصحابها."
                : "All content on this website, including text, images, logos, and designs, is the property of Alzar FZE or its authorized partners and is protected by intellectual property laws. Logos and names of partners and manufacturers mentioned on this website are registered trademarks of their respective owners."}
            </p>
            <p>
              {isAr
                ? "لا يجوز نسخ أو إعادة إنتاج أو توزيع أي محتوى من هذا الموقع دون إذن كتابي مسبق."
                : "No content from this website may be copied, reproduced, or distributed without prior written permission."}
            </p>
          </SectionCard>

          <SectionCard icon={<FileText className="w-5 h-5" />} title={isAr ? "دقة المعلومات" : "Accuracy of Information"}>
            <p>
              {isAr
                ? "نبذل جهوداً معقولة لضمان دقة المعلومات المقدمة على هذا الموقع. ومع ذلك، فإن المواصفات الفنية ومعلومات المنتجات قابلة للتغيير دون إشعار مسبق. للحصول على أحدث المواصفات والأسعار، يرجى التواصل معنا مباشرة."
                : "We make reasonable efforts to ensure the accuracy of information provided on this website. However, technical specifications and product information are subject to change without prior notice. For the latest specifications and pricing, please contact us directly."}
            </p>
            <p>
              {isAr
                ? "المعلومات المتعلقة بمنتجات شركائنا مستمدة من المصادر الرسمية للمصنعين وقد تخضع لشروطهم الخاصة."
                : "Information regarding our partners' products is derived from the manufacturers' official sources and may be subject to their own terms."}
            </p>
          </SectionCard>

          <SectionCard icon={<AlertTriangle className="w-5 h-5" />} title={isAr ? "حدود المسؤولية" : "Limitation of Liability"}>
            <p>
              {isAr
                ? "يُقدم هذا الموقع ومحتواه \"كما هو\" دون أي ضمانات صريحة أو ضمنية. لا تتحمل شركة الزار المسؤولية عن:"
                : "This website and its content are provided \"as is\" without any express or implied warranties. Alzar FZE shall not be liable for:"}
            </p>
            <ul className="list-disc ps-5 space-y-1">
              <li>{isAr ? "أي أضرار مباشرة أو غير مباشرة ناتجة عن استخدام الموقع" : "Any direct or indirect damages arising from the use of this website"}</li>
              <li>{isAr ? "انقطاع الخدمة أو الأخطاء التقنية" : "Service interruptions or technical errors"}</li>
              <li>{isAr ? "محتوى المواقع الخارجية المرتبطة" : "Content of linked external websites"}</li>
              <li>{isAr ? "القرارات المتخذة بناءً على المعلومات المقدمة على الموقع" : "Decisions made based on information provided on the website"}</li>
            </ul>
          </SectionCard>

          <SectionCard icon={<Ban className="w-5 h-5" />} title={isAr ? "الاستخدام المحظور" : "Prohibited Use"}>
            <p>{isAr ? "يُحظر عليك:" : "You are prohibited from:"}</p>
            <ul className="list-disc ps-5 space-y-1">
              <li>{isAr ? "استخدام الموقع لأي غرض غير قانوني" : "Using the website for any unlawful purpose"}</li>
              <li>{isAr ? "محاولة الوصول غير المصرح به إلى أنظمتنا" : "Attempting unauthorized access to our systems"}</li>
              <li>{isAr ? "إرسال محتوى ضار أو مسيء عبر نماذج الاتصال" : "Submitting harmful or abusive content through contact forms"}</li>
              <li>{isAr ? "استخدام أدوات آلية لجمع البيانات من الموقع" : "Using automated tools to scrape data from the website"}</li>
            </ul>
          </SectionCard>

          <SectionCard icon={<Scale className="w-5 h-5" />} title={isAr ? "القانون الحاكم" : "Governing Law"}>
            <p>
              {isAr
                ? "تخضع هذه الشروط لقوانين دولة الإمارات العربية المتحدة وتُفسر وفقاً لها. أي نزاع ينشأ عن استخدام هذا الموقع يخضع للاختصاص القضائي الحصري لمحاكم دبي، الإمارات العربية المتحدة."
                : "These terms are governed by and construed in accordance with the laws of the United Arab Emirates. Any dispute arising from the use of this website shall be subject to the exclusive jurisdiction of the courts of Dubai, UAE."}
            </p>
          </SectionCard>

          <SectionCard icon={<RefreshCw className="w-5 h-5" />} title={isAr ? "التعديلات" : "Modifications"}>
            <p>
              {isAr
                ? "نحتفظ بالحق في تعديل هذه الشروط في أي وقت. ستصبح التعديلات سارية فور نشرها على هذه الصفحة. استمرارك في استخدام الموقع بعد نشر التعديلات يعني موافقتك على الشروط المعدلة."
                : "We reserve the right to modify these terms at any time. Modifications will become effective immediately upon posting on this page. Your continued use of the website after modifications are posted constitutes your acceptance of the revised terms."}
            </p>
          </SectionCard>

          <SectionCard icon={<Mail className="w-5 h-5" />} title={isAr ? "اتصل بنا" : "Contact Us"}>
            <p>
              {isAr
                ? "إذا كانت لديك أي أسئلة حول هذه الشروط، يرجى التواصل معنا:"
                : "If you have any questions about these terms, please contact us:"}
            </p>
            <div className="bg-gray-50 rounded-lg p-4 mt-2">
              <p className="font-semibold text-navy">{isAr ? "الزار" : "Alzar FZE"}</p>
              <p>{isAr ? "LOB #21، الدوار السادس، ميناء جبل علي" : "LOB #21, 6th Roundabout, Mina Jebel Ali"}</p>
              <p>{isAr ? "المنطقة الحرة لجبل علي، دبي، الإمارات العربية المتحدة" : "Jebel Ali Free Zone, Dubai, UAE"}</p>
              <p className="mt-2">
                <span dir="ltr">info@alzarfze.com</span> | <span dir="ltr">+971 4 881 4928</span>
              </p>
            </div>
          </SectionCard>

          {/* Related links */}
          <div className="flex flex-wrap gap-4 justify-center mt-8 pb-4">
            <Link href="/privacy-policy" className="text-sm text-teal hover:underline">
              {isAr ? "سياسة الخصوصية" : "Privacy Policy"}
            </Link>
            <span className="text-gray-300">|</span>
            <Link href="/cookie-policy" className="text-sm text-teal hover:underline">
              {isAr ? "سياسة ملفات تعريف الارتباط" : "Cookie Policy"}
            </Link>
          </div>
        </div>
      </div>
    </Layout>
  );
}
