"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 sections = [
  {
    titleAr: "سنترال ذكي بدلاً من الانتظار الطويل",
    titleEn: "AI call handling without long queues",
    textAr: "هلا يستقبل مكالمات العملاء، يفهم سبب الاتصال، يجيب من قاعدة المعرفة، ويحوّل المكالمات المعقدة لفريقك مع ملخص واضح بدل أن يبدأ الموظف من الصفر.",
    textEn: "Halla answers inbound calls, identifies the caller's intent, uses your approved knowledge base, and hands complex conversations to your team with a concise summary.",
  },
  {
    titleAr: "استعادة المكالمات الفائتة عبر واتساب",
    titleEn: "Missed-call recovery through WhatsApp",
    textAr: "إذا فاتتك مكالمة خارج وقت العمل، يسجل هلا الرقم ويطلق رسالة واتساب تلقائية: نأسف لفوات مكالمتك، كيف يمكننا مساعدتك؟ هذا يحوّل المكالمات الضائعة إلى فرص بيع ودعم.",
    textEn: "When a call is missed outside business hours, Halla can record the number and trigger an approved WhatsApp follow-up so the customer can continue the conversation.",
  },
  {
    titleAr: "حملات صوتية للحجوزات والطلبات",
    titleEn: "Voice workflows for bookings and orders",
    textAr: "استخدم هلا لتأكيد المواعيد، متابعة الطلبات، تذكير العملاء، أو إرسال تحديثات حالة الشحن بصوت عربي طبيعي مرتبط بسجلات العملاء داخل سكاي لايت شات.",
    textEn: "Use Halla for appointment confirmations, order follow-ups, reminders, and delivery updates, with call outcomes connected to the customer's SkyLight Chat record.",
  },
];

export default function HallaPageContent() {
  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 }}>
            Halla Voice AI · VoIP · Missed-call recovery
          </p>
          <h1 style={{ fontSize: "clamp(42px, 6vw, 74px)", lineHeight: 1.05, marginBottom: 24 }}>
            {isAr
              ? "هلا: نظام المكالمات الذكية للشركات في السعودية والخليج"
              : "Halla AI voice and missed-call recovery for MENA teams"}
          </h1>
          <p style={{ color: "#cbd5e1", fontSize: 20, lineHeight: 1.8, maxWidth: 860, marginBottom: 36 }}>
            {isAr
              ? "أتمتة المكالمات الواردة والصادرة، السنترال الذكي، استعادة المكالمات الفائتة عبر واتساب، وحملات صوتية عربية مرتبطة بصندوق سكاي لايت الموحّد."
              : "Handle inbound and outbound calls, recover missed calls through WhatsApp Business, and connect Arabic voice workflows to the SkyLight unified inbox."}
          </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 ? "احجز عرض هلا" : "Book a Halla demo"}>
              <span className="button-wraper">{isAr ? "احجز عرض هلا" : "Book a Halla demo"}</span>
            </Link>
            <Link className="azzle-default-btn btn2" href={localizedPath("/resources/halla-voice", language)} data-text={isAr ? "اقرأ دليل هلا" : "Read the Halla guide"}>
              <span className="button-wraper">{isAr ? "اقرأ دليل هلا" : "Read the Halla guide"}</span>
            </Link>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 18 }}>
            {sections.map((section) => (
              <article
                key={section.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 ? section.titleAr : section.titleEn}</h2>
                <p style={{ color: "#cbd5e1", lineHeight: 1.8 }}>{isAr ? section.textAr : section.textEn}</p>
              </article>
            ))}
          </div>

          <section style={{ marginTop: 64, maxWidth: 900 }}>
            <h2 style={{ fontSize: 34, marginBottom: 18 }}>{isAr ? "لمن يناسب هلا؟" : "Who is Halla for?"}</h2>
            <ul style={{ color: "#cbd5e1", lineHeight: 2, paddingInlineStart: 22 }}>
              {(isAr
                ? [
                    "المتاجر التي تحتاج تأكيد الطلبات ومتابعة الشحنات عبر المكالمات وواتساب.",
                    "العيادات ومراكز الحجز التي تريد تقليل المكالمات الفائتة وإعادة الجدولة تلقائياً.",
                    "العقارات والتأمين والخدمات التي تعتمد على متابعة العملاء المحتملين بسرعة.",
                    "مراكز الاتصال التي تريد مساعداً صوتياً عربياً قبل التحويل للموظف البشري.",
                  ]
                : [
                    "Ecommerce teams confirming orders and following deliveries by phone and WhatsApp.",
                    "Clinics and booking teams reducing missed calls and handling rescheduling.",
                    "Real estate, insurance, and service teams that need timely lead follow-up.",
                    "Contact centers adding an Arabic voice assistant before human handoff.",
                  ]).map((item) => <li key={item}>{item}</li>)}
            </ul>
          </section>
        </section>
      </main>
      <FooterTwo />
    </Wrapper>
  );
}