"use client";

import Link from "next/link";
import Wrapper from "@/layouts/Wrapper";
import HeaderTwo from "@/layouts/headers/HeaderTwo";
import FooterTwo from "@/layouts/footers/FooterTwo";
import { useLanguage } from "@/contexts/LanguageContext";
import { localizedPath } from "@/lib/localized-path";

const capabilities = [
  {
    titleAr: "أتمتة العروض في زد",
    titleEn: "Targeted Zid offer workflows",
    textAr: "أنشئ حملات واتساب موجهة لشرائح العملاء حسب السلة، آخر طلب، قيمة العميل، أو اهتمامه بمنتج معيّن.",
    textEn: "Create WhatsApp campaigns for customer segments based on cart activity, recent orders, customer value, or product interest.",
  },
  {
    titleAr: "متابعة الطلبات والشحن",
    titleEn: "Order and delivery support",
    textAr: "يرد وكيل الذكاء الاصطناعي على أسئلة حالة الطلب، سياسة الاسترجاع، توفر المنتجات، وتحديثات الشحن بدل الضغط على فريق الدعم.",
    textEn: "Let an AI agent answer approved questions about order status, returns, product availability, and delivery updates before handing exceptions to support.",
  },
  {
    titleAr: "استرجاع العملاء والسلات المتروكة",
    titleEn: "Customer and cart recovery",
    textAr: "أرسل رسائل واتساب مخصصة بعد ترك السلة أو بعد فترة خمول، مع قوالب معتمدة وتحليلات تسليم وتحويل.",
    textEn: "Send personalized, approved WhatsApp templates after cart abandonment or inactivity and measure delivery and conversion events.",
  },
  {
    titleAr: "صندوق وارد موحّد للمتجر",
    titleEn: "A unified store inbox",
    textAr: "اجمع واتساب وإنستجرام وتيليجرام ودردشة الموقع في واجهة واحدة مرتبطة ببيانات العميل وسياق الطلب.",
    textEn: "Bring WhatsApp, Instagram, Telegram, and website conversations into one workspace connected to customer and order context.",
  },
];

export default function ZidIntegrationPageContent() {
  const { language } = useLanguage();
  const isAr = language === "ar";

  return (
    <Wrapper>
      <HeaderTwo />
      <main dir={isAr ? "rtl" : "ltr"} style={{ background: "#000", color: "#fff", minHeight: "100vh", padding: "140px 0 90px" }}>
        <section className="container" style={{ maxWidth: 1120 }}>
          <p style={{ color: "#9ca3af", marginBottom: 16, fontWeight: 600 }}>
            Zid AI · WhatsApp automation · E-commerce support
          </p>
          <h1 style={{ fontSize: "clamp(42px, 6vw, 72px)", lineHeight: 1.06, marginBottom: 24 }}>
            {isAr
              ? "ربط متجر زد مع واتساب والذكاء الاصطناعي"
              : "Connect Zid with WhatsApp Business and AI automation"}
          </h1>
          <p style={{ color: "#cbd5e1", fontSize: 20, lineHeight: 1.8, maxWidth: 860, marginBottom: 36 }}>
            {isAr
              ? "سكاي لايت شات يساعد متاجر زد على أتمتة خدمة العملاء، حملات العروض، متابعة الطلبات، واسترجاع السلات المتروكة عبر واتساب ووكلاء ذكاء اصطناعي يفهمون العربية ولهجات الخليج."
              : "SkyLight Chat helps Zid stores automate customer support, offer campaigns, order follow-ups, and cart recovery through WhatsApp and Arabic-aware AI agents."}
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginBottom: 56 }}>
            <Link className="azzle-default-btn btn2" href={localizedPath("/contact-us", language)} data-text={isAr ? "ناقش ربط زد" : "Discuss your Zid integration"}>
              <span className="button-wraper">{isAr ? "ناقش ربط زد" : "Discuss your Zid integration"}</span>
            </Link>
            <Link className="azzle-default-btn btn2" href={localizedPath("/resources/saudi-ecom-automation-zid-salla", language)} data-text={isAr ? "دليل المتاجر السعودية" : "Read the ecommerce guide"}>
              <span className="button-wraper">{isAr ? "دليل المتاجر السعودية" : "Read the ecommerce guide"}</span>
            </Link>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: 18 }}>
            {capabilities.map((capability) => (
              <article
                key={capability.titleEn}
                style={{
                  border: "1px solid rgba(255,255,255,0.12)",
                  borderRadius: 24,
                  padding: 26,
                  background: "rgba(255,255,255,0.04)",
                }}
              >
                <h2 style={{ fontSize: 24, marginBottom: 14 }}>{isAr ? capability.titleAr : capability.titleEn}</h2>
                <p style={{ color: "#cbd5e1", lineHeight: 1.8 }}>{isAr ? capability.textAr : capability.textEn}</p>
              </article>
            ))}
          </div>

          <section style={{ marginTop: 64 }}>
            <h2 style={{ fontSize: 34, marginBottom: 18 }}>{isAr ? "ما الذي تحتاجه قبل الربط؟" : "What you need before connecting Zid"}</h2>
            <p style={{ color: "#cbd5e1", lineHeight: 1.9, maxWidth: 900 }}>
              {isAr
                ? "حدد أحداث المتجر التي تريد تشغيلها، وقوالب واتساب المعتمدة، وحقول العميل والطلب التي يحتاجها فريقك. بعد ذلك اختبر كل تدفق على بيانات تجريبية، وأضف التحويل البشري للحالات الحساسة قبل الإطلاق."
                : "Define the store events you want to automate, the approved WhatsApp templates, and the customer and order fields your team needs. Test each workflow with sample data and add human handoff for sensitive cases before launch."}
            </p>
          </section>
        </section>
      </main>
      <FooterTwo />
    </Wrapper>
  );
}