"use client";

import { FormEvent, useEffect, useMemo, useState } from "react";
import {
  Activity, ArrowLeft, ArrowRight, BarChart3, BellRing, Bot, BrainCircuit,
  BriefcaseBusiness, Building2, CalendarCheck, Check, CheckCircle2, ChevronDown,
  CircleGauge, Clock3, Database, FileText, Filter, Gauge, Headphones, History,
  Inbox, KeyRound, Layers3, LockKeyhole, Mail, Megaphone, MessageCircle,
  MessagesSquare, Network, NotebookText, PhoneCall, Play, RefreshCcw, Route,
  Search, Send, Settings2, ShieldCheck, Sparkles, Tags, Target, TicketCheck,
  ToggleLeft, UserRound, Users, WandSparkles, Workflow, Zap,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { MarketingFooter, MarketingHeader } from "@/components/marketing-shell";
import "../platform/platform.css";
import "./solutions.css";

type Language = "ar" | "en";
type Pair = readonly [ar: string, en: string];

const copy = {
  ar: {
    heroTitle: "حلول ذكاء اصطناعي تعمل داخل شركتك، وليس بجانبها فقط",
    heroText: "NEXORA AI تساعد شركتك على تحويل المحادثات والاستفسارات والعمليات المتكررة إلى مهام ذكية مؤتمتة تعمل على مدار الساعة وتتكامل مع فريقك وأنظمتك.",
    explore: "استكشف الحلول", create: "أنشئ وكيلك", more: "اعرف المزيد",
  },
  en: {
    heroTitle: "AI solutions that work inside your business, not alongside it",
    heroText: "NEXORA AI turns conversations, enquiries, and repetitive operations into intelligent workflows that run around the clock and collaborate with your people and systems.",
    explore: "Explore solutions", create: "Create your agent", more: "Learn more",
  },
} as const;

const solutions = [
  ["customer-service", Headphones, ["خدمة العملاء", "Customer service"], ["إجابة متسقة وتحويل بشري منظم.", "Consistent answers with structured handoff."], ["استجابة أوضح", "Clearer service"]],
  ["sales", BriefcaseBusiness, ["المبيعات", "Sales"], ["تأهيل المحادثات وتحويلها إلى فرص.", "Qualify conversations and turn them into opportunities."], ["فرص منظمة", "Structured opportunities"]],
  ["marketing", Megaphone, ["التسويق", "Marketing"], ["شرائح ورسائل متابعة بإذن العميل.", "Permission-aware segments and follow-up."], ["تواصل أنسب", "More relevant outreach"]],
  ["leads", Target, ["إدارة العملاء المحتملين", "Lead management"], ["كل عميل ومرحلته وخطوته التالية.", "Every lead, stage, owner, and next action."], ["لا تضيع فرصة", "No lost lead"]],
  ["bookings", CalendarCheck, ["الحجوزات", "Bookings"], ["من اختيار الخدمة حتى التذكير.", "From service selection to reminder."], ["موعد منظم", "Organised booking"]],
  ["support", TicketCheck, ["الدعم الفني", "Technical support"], ["تشخيص أولي وتذكرة بملخص كامل.", "Triage and tickets with a full summary."], ["حل أسرع", "Faster triage"]],
  ["call-center", PhoneCall, ["مركز الاتصال", "Contact centre"], ["تصور موحد للصوت والإنسان والبيانات.", "One operating model for voice, people, and data."], ["قيد التكامل", "Integration in progress"]],
  ["automation", Workflow, ["الأتمتة", "Automation"], ["حوّل القواعد المتكررة إلى مسارات قابلة للتحكم.", "Turn repeatable rules into controlled workflows."], ["عمل أقل تكرارًا", "Less repetitive work"]],
  ["omnichannel", Inbox, ["إدارة المحادثات", "Conversation management"], ["صندوق واحد وهوية موحدة عبر القنوات.", "One inbox and identity across channels."], ["سياق واحد", "One context"]],
  ["knowledge", BrainCircuit, ["إدارة المعرفة", "Knowledge management"], ["مصدر معتمد للإجابات الخارجية والداخلية.", "A trusted source for external and internal answers."], ["إجابات موثوقة", "Grounded answers"]],
  ["follow-up", BellRing, ["متابعة العملاء", "Customer follow-up"], ["تذكيرات وخطوة تالية لا تعتمد على الذاكرة.", "Reminders and next actions that do not rely on memory."], ["متابعة منضبطة", "Consistent follow-up"]],
  ["solution-analytics", BarChart3, ["التقارير والتحليلات", "Reports & analytics"], ["مؤشرات مناسبة لكل حل وفريق.", "Relevant metrics for every solution and team."], ["قرار أوضح", "Better decisions"]],
] as const;

const simulatorOptions = [
  { id: "volume", label: ["لدي رسائل كثيرة", "I receive too many messages"] as Pair, flow: [["الصندوق الموحد", "Unified Inbox"], ["وكيل خدمة العملاء", "Customer Service Agent"], ["قاعدة المعرفة", "Knowledge Base"], ["التحويل البشري", "Human Handoff"], ["التحليلات", "Analytics"]] as Pair[] },
  { id: "leads", label: ["أحتاج زيادة Leads", "I need more leads"] as Pair, flow: [["التقاط العميل", "Lead Capture"], ["أسئلة التأهيل", "Qualification"], ["تقييم العميل", "Lead Score"], ["تسجيل CRM", "CRM Record"], ["إسناد للمبيعات", "Sales Assignment"]] as Pair[] },
  { id: "follow", label: ["أحتاج متابعة العملاء", "I need customer follow-up"] as Pair, flow: [["قواعد المتابعة", "Follow-up Rules"], ["تحديد الموعد", "Schedule"], ["رسالة مخصصة", "Personalised Message"], ["تحديث الحالة", "Status Update"], ["الخطوة التالية", "Next Action"]] as Pair[] },
  { id: "booking", label: ["أحتاج نظام حجوزات", "I need bookings"] as Pair, flow: [["اختيار الخدمة", "Select Service"], ["المواعيد المتاحة", "Available Slots"], ["تأكيد الحجز", "Confirm Booking"], ["تحديث CRM", "Update CRM"], ["تذكير", "Reminder"]] as Pair[] },
  { id: "support", label: ["أحتاج دعمًا فنيًا", "I need technical support"] as Pair, flow: [["تشخيص أولي", "Initial Triage"], ["بحث المعرفة", "Knowledge Search"], ["تحديد الأولوية", "Priority"], ["فتح تذكرة", "Create Ticket"], ["تحويل مختص", "Specialist Handoff"]] as Pair[] },
  { id: "agent", label: ["أحتاج AI Agent", "I need an AI agent"] as Pair, flow: [["تحديد المهمة", "Define Role"], ["إضافة المعرفة", "Add Knowledge"], ["تحديد الصلاحيات", "Set Permissions"], ["اختبار الوكيل", "Test Agent"], ["تشغيل تدريجي", "Controlled Launch"]] as Pair[] },
] as const;

function Heading({ label, title, text }: { label: string; title: string; text?: string }) {
  return <div className="pf-heading"><span><Sparkles />{label}</span><h2>{title}</h2>{text && <p>{text}</p>}</div>;
}

function Flow({ items, isAr, dark = false }: { items: string[]; isAr: boolean; dark?: boolean }) {
  return <div className={`sol-flow ${dark ? "dark" : ""}`} aria-label={isAr ? "تسلسل الحل" : "Solution flow"}>{items.map((item, index) => <div key={item}><span>{index + 1}</span><b>{item}</b>{index < items.length - 1 && (isAr ? <ArrowLeft /> : <ArrowRight />)}</div>)}</div>;
}

function List({ items }: { items: string[] }) {
  return <ul className="sol-check-list">{items.map((item) => <li key={item}><CheckCircle2 />{item}</li>)}</ul>;
}

export default function SolutionsPage({ lang }: { lang: Language }) {
  const isAr = lang === "ar";
  const l = isAr ? 0 : 1;
  const t = copy[lang];
  const [simulator, setSimulator] = useState("volume");
  const [controls, setControls] = useState([true, false, true, false]);
  const [goal, setGoal] = useState("service");
  const [size, setSize] = useState("small");
  const [channels, setChannels] = useState("1");
  const [hasCrm, setHasCrm] = useState("no");
  const [usesWhatsapp, setUsesWhatsapp] = useState("yes");
  const [reminderState, setReminderState] = useState<"pending" | "scheduled" | "skipped">("pending");
  const [recommendation, setRecommendation] = useState<string | null>(null);

  useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = isAr ? "rtl" : "ltr";
  }, [isAr, lang]);

  const activeSimulation = useMemo(() => simulatorOptions.find((option) => option.id === simulator) ?? simulatorOptions[0], [simulator]);
  const navLinks = [
    ["solutions-overview", isAr ? "الحلول" : "Solutions"],
    ["customer-service", isAr ? "خدمة العملاء" : "Service"],
    ["sales", isAr ? "المبيعات" : "Sales"],
    ["automation", isAr ? "الأتمتة" : "Automation"],
    ["solution-simulator", isAr ? "اختر حلك" : "Find your solution"],
  ] as const;

  function recommend(event: FormEvent) {
    event.preventDefault();
    const goalName: Record<string, Pair> = {
      service: ["خدمة العملاء", "Customer Service"], sales: ["المبيعات وإدارة العملاء المحتملين", "Sales & Lead Management"], automation: ["أتمتة العمليات", "Operations Automation"], bookings: ["الحجوزات والمواعيد", "Bookings & Appointments"], marketing: ["التسويق والمتابعة", "Marketing & Follow-up"], inbox: ["إدارة المحادثات", "Conversation Management"],
    };
    const scale = size === "enterprise" ? (isAr ? "مع صلاحيات متقدمة ومساحات عمل وتكاملات مخصصة" : "with advanced permissions, workspaces, and custom integrations") : size === "medium" ? (isAr ? "مع عدة وكلاء وفرق وتحليلات" : "with multiple agents, teams, and analytics") : (isAr ? "بإعداد مبسط ووكيل واحد قابل للتوسع" : "with a simple, scalable single-agent setup");
    const channelText = isAr ? `${channels} ${channels === "1" ? "قناة" : "قنوات"}` : `${channels} channel${channels === "1" ? "" : "s"}`;
    setRecommendation(isAr
      ? `نقترح البدء بحل ${goalName[goal][0]} ${scale}، وربطه مبدئيًا بـ${channelText}. ${hasCrm === "yes" ? "يُراجع تكامل CRM قبل الإطلاق." : "يمكن البدء بملف العميل داخل NEXORA."} ${usesWhatsapp === "yes" ? "تجهيز WhatsApp يعتمد على اعتماد القناة وبيانات المزود." : "يمكن اختيار قناة أخرى عند التجهيز."}`
      : `Start with ${goalName[goal][1]} ${scale}, initially across ${channelText}. ${hasCrm === "yes" ? "Your CRM integration should be reviewed before launch." : "You can begin with NEXORA customer profiles."} ${usesWhatsapp === "yes" ? "WhatsApp setup depends on channel approval and provider credentials." : "Another channel can be selected during setup."}`);
  }

  return <main className="platform-page solutions-page" id="top" dir={isAr ? "rtl" : "ltr"} lang={lang}>
    <MarketingHeader isAr={isAr} navLinks={navLinks} languageHref={isAr ? "/en/solutions" : "/solutions"} menuId="solutions-mobile-menu" />

    <section className="sol-hero">
      <div className="pf-container sol-hero-grid">
        <div className="sol-hero-copy"><span className="pf-kicker"><WandSparkles />{isAr ? "حلول مبنية على احتياجك" : "Solutions built around your needs"}</span><h1>{t.heroTitle}</h1><p>{t.heroText}</p><div className="pf-actions"><a className="pf-button primary large" href="#solutions-overview">{t.explore}{isAr ? <ArrowLeft /> : <ArrowRight />}</a><a className="pf-button secondary large" href="/create-agent">{t.create}</a></div><div className="sol-hero-note"><ShieldCheck />{isAr ? "صلاحيات واضحة وتحكم بشري في كل خطوة" : "Clear permissions and human control at every step"}</div></div>
        <div className="sol-system-map" aria-label={isAr ? "رحلة الحل داخل الشركة" : "Solution journey inside the business"}>
          {[[UserRound,"Customer"],[Bot,"AI Agent"],[Database,"CRM"],[Workflow,"Automation"],[Users,"Human Team"],[BarChart3,"Analytics"]].map(([Icon,label],index)=>{const I=Icon as typeof Bot;return <div style={{"--step":index} as React.CSSProperties} key={label as string}><span><I /></span><b>{label as string}</b>{index<5&&<em>{isAr?"←":"→"}</em>}</div>})}
        </div>
      </div>
    </section>

    <section id="solutions-overview" className="pf-section sol-overview"><div className="pf-container"><Heading label={isAr ? "حلول حسب المشكلة" : "Solutions by business need"} title={isAr ? "ابدأ من النتيجة التي يحتاجها فريقك" : "Start with the outcome your team needs"} text={isAr ? "كل حل يجمع الوكيل والبيانات والإجراء والتحكم البشري في مسار واحد." : "Each solution connects the agent, data, action, and human control in one workflow."} /><div className="sol-card-grid">{solutions.map(([id,Icon,title,text,result])=>{const I=Icon;return <a href={`#${id}`} className="sol-card" key={id}><span><I /></span><h3>{title[l]}</h3><p>{text[l]}</p><strong><Check />{result[l]}</strong><b>{t.more}{isAr?<ArrowLeft />:<ArrowRight />}</b></a>})}</div></div></section>

    <section id="customer-service" className="pf-section sol-service"><div className="pf-container"><Heading label={isAr ? "حل خدمة العملاء" : "Customer service solution"} title={isAr ? "خدمة عملاء أسرع وأكثر اتساقًا" : "Faster, more consistent customer service"} text={isAr ? "يستقبل الوكيل الاستفسار ويفهمه ويبحث في المعرفة المعتمدة، ثم يحل الحالة أو يحولها بملخص واضح." : "The agent receives and understands the enquiry, searches approved knowledge, then resolves or hands it off with a clear summary."} /><div className="sol-two"><List items={(isAr?["استقبال وفهم الاستفسارات بلغتها المناسبة","البحث في قاعدة المعرفة والرد الفوري","التعامل مع محادثات متعددة وتصنيفها","إضافة الوسوم وإنشاء تذكرة وتحديث العميل","تحويل الحالة للموظف عند الحاجة"]:["Receive and understand enquiries in the right language","Search approved knowledge and respond immediately","Handle and classify multiple conversations","Add tags, create a ticket, and update the customer","Hand off to a teammate when needed"])} /><div className="sol-panel"><Flow isAr={isAr} items={isAr?["رسالة العميل","فهم السؤال","بحث المعرفة","رد فوري","حل أو تحويل بشري"]:["Customer message","Understand","Knowledge search","Immediate reply","Resolve or hand off"]}/><div className="sol-outcomes">{(isAr?["تقليل زمن الانتظار","تسريع معالجة الاستفسارات","تخفيف الضغط المتكرر","تغطية على مدار الساعة"]:["Shorter waits","Faster enquiry handling","Less repetitive pressure","Around-the-clock coverage"]).map(x=><span key={x}><Check />{x}</span>)}</div><small>{isAr ? "مؤشرات توضيحية دون وعود رقمية ثابتة." : "Illustrative outcomes, not fixed performance claims."}</small></div></div></div></section>

    <section id="sales" className="pf-section sol-dark"><div className="pf-container"><Heading label={isAr ? "حل المبيعات" : "Sales solution"} title={isAr ? "حوّل المحادثة إلى فرصة بيع" : "Turn a conversation into a sales opportunity"} text={isAr ? "يجمع الوكيل البيانات، يفهم الاحتياج، يطرح أسئلة التأهيل، يسجل العميل ويحدد الخطوة التالية." : "The agent captures details, understands needs, asks qualification questions, records the lead, and sets the next step."} /><Flow dark isAr={isAr} items={["Incoming Lead","AI Qualification","CRM","Lead Score","Sales Assignment","Follow-up","Deal"]}/><div className="sol-sales-actions"><List items={isAr?["تحديد المنتج أو الخدمة المناسبة","إنشاء صفقة وتعيين مندوب","حجز موعد وتصعيد العميل المهم"]:["Match the right product or service","Create a deal and assign an owner","Book a meeting and escalate high-priority leads"]}/><a className="pf-button primary large" href="#solution-simulator">{isAr ? "شاهد حل المبيعات" : "See the sales solution"}<Play /></a></div></div></section>

    <section id="leads" className="pf-section sol-leads"><div className="pf-container"><Heading label="Lead Management" title={isAr ? "لا تدع أي عميل محتمل يضيع" : "Never let a potential customer disappear"} text={isAr ? "كل معلومة وقرار وتواصل تالٍ يبقى في ملف واحد واضح." : "Keep every detail, decision, and next contact in one clear record."} /><div className="sol-lead-fields">{["Lead Capture","Lead Source","Lead Scoring","Lead Status","Owner","Tags","Priority","Follow-up Date","Last Contact","Next Action","Notes","Timeline"].map((x,index)=><span key={x}><i>{index+1}</i>{x}</span>)}</div><div className="sol-pipeline" aria-label={isAr ? "مراحل العميل المحتمل" : "Lead stages"}>{["New Lead","Contacted","Qualified","Proposal","Negotiation","Won","Lost"].map((x,index)=><div className={index===5?"won":index===6?"lost":""} key={x}><span>{index+1}</span><b>{x}</b></div>)}</div></div></section>

    <section id="marketing" className="pf-section sol-marketing"><div className="pf-container sol-two"><div><Heading label={isAr ? "حل التسويق" : "Marketing solution"} title={isAr ? "تواصل مع العملاء بالرسالة المناسبة في الوقت المناسب" : "Reach customers with the right message at the right time"} text={isAr ? "شرائح وقوائم وحملات وقوالب وتسلسلات متابعة لتنمية العملاء وإعادة تنشيطهم ضمن موافقتهم وسياسات القنوات." : "Segments, lists, campaigns, templates, and nurturing sequences that respect consent and channel policies."} /><div className="sol-compliance"><ShieldCheck /><p>{isAr ? "لا إرسال جماعي غير مصرح به. WhatsApp والقنوات الأخرى تخضع للموافقة والقوالب وسياسات المزود." : "No unauthorised bulk messaging. WhatsApp and other channels remain subject to consent, templates, and provider policies."}</p></div></div><div className="sol-workflow-card"><strong>{isAr ? "مثال: إعادة تنشيط العملاء" : "Example: customer reactivation"}</strong><Flow isAr={isAr} items={isAr?["غير متفاعل 30 يومًا","إنشاء شريحة","حملة مصرح بها","رسالة مخصصة","استجابة","متابعة AI"]:["Inactive for 30 days","Create segment","Approved campaign","Personalised message","Response","AI follow-up"]}/></div></div></section>

    <section id="bookings" className="pf-section sol-bookings"><div className="pf-container"><Heading label={isAr ? "الحجوزات والمواعيد" : "Bookings & appointments"} title={isAr ? "من أول سؤال حتى تأكيد الموعد" : "From the first question to a confirmed appointment"} text={isAr ? "اختيار الخدمة والفرع والموظف والموعد، مع إعادة الجدولة والإلغاء والتأكيد والتذكير وتحديث CRM." : "Select the service, branch, teammate, and time, with rescheduling, cancellation, confirmation, reminders, and CRM updates."} /><Flow isAr={isAr} items={["Customer Request","Service","Available Slot","Booking","Confirmation","Reminder"]}/><a className="pf-button secondary large" href="#recommendation">{isAr ? "تحقق من ملاءمة الحل" : "Check solution fit"}</a></div></section>

    <section id="support" className="pf-section sol-support"><div className="pf-container sol-two"><div><Heading label={isAr ? "حل الدعم الفني" : "Technical support solution"} title={isAr ? "حل المشكلات قبل وصولها إلى فريق الدعم" : "Resolve issues before they reach the support team"} text={isAr ? "تشخيص أولي مبني على المنتج والمعرفة، ثم جمع تفاصيل المشكلة وتحديد الأولوية وفتح تذكرة عند الحاجة." : "Product-aware initial diagnosis, followed by detail capture, prioritisation, and ticket creation when needed."} /><List items={isAr?["تعليمات مناسبة من المعرفة المعتمدة","جمع بيانات المشكلة وإرسال ملخص","توجيه الحالة إلى المختص الصحيح"]:["Relevant guidance from approved knowledge","Capture issue details and send a summary","Route the case to the right specialist"]}/></div><div className="sol-status-board">{[[CheckCircle2,"Resolved by AI","ready"],[Users,"Needs Human","human"],[Zap,"Urgent","urgent"],[Clock3,"Pending Customer","pending"]].map(([Icon,label,status])=>{const I=Icon as typeof Bot;return <span className={status as string} key={label as string}><I /><b>{label as string}</b></span>})}</div></div></section>

    <section id="call-center" className="pf-section sol-call"><div className="pf-container sol-two"><div className="sol-call-visual"><div className="sol-wave">{[25,48,72,40,86,58,34,68,45].map((height,index)=><i key={index} style={{height}} />)}</div><Flow isAr={false} items={["Incoming Call","Voice AI","Intent","CRM","Human Transfer"]}/><Badge variant="outline">{isAr ? "قيد التكامل — ليست خدمة Live" : "Integration in progress — not live"}</Badge></div><div><Heading label={isAr ? "مركز الاتصال الذكي" : "Intelligent contact centre"} title={isAr ? "مركز اتصال يجمع الإنسان والذكاء الاصطناعي" : "A contact centre that combines people and AI"} text={isAr ? "تصور للمكالمات الواردة والصادرة والتوجيه والتفريغ والتلخيص وفهم النية وتحديث CRM والتحويل البشري بعد اكتمال تكامل Voice AI." : "A model for inbound and outbound calls, routing, transcription, summaries, intent, CRM updates, and human transfer once Voice AI integration is complete."} /></div></div></section>

    <section id="omnichannel" className="pf-section sol-omni"><div className="pf-container"><Heading label="Omnichannel" title={isAr ? "خدمة موحدة مهما تغيرت قناة العميل" : "Consistent service even when the customer changes channel"} text={isAr ? "عندما تتوفر بيانات هوية مشتركة، يمكن ربط WhatsApp والبريد والمحادثات الأخرى في ملف وتسلسل زمني واحد حسب حالة كل تكامل." : "When shared identity data is available, WhatsApp, email, and other conversations can be linked into one profile and timeline, subject to each integration’s status."} /><div className="sol-channel-row">{[[MessageCircle,"WhatsApp"],[MessagesSquare,"Instagram"],[MessagesSquare,"Facebook"],[GlobeIcon,"Web Chat"],[Mail,"Email"],[Send,"Telegram"],[PhoneCall,"Voice"]].map(([Icon,label],index)=>{const I=Icon as typeof Bot;return <span key={label as string}><I /><b>{label as string}</b><small>{index<2?(isAr?"متاح للتجهيز":"Setup available"):(isAr?"قيد التكامل":"Integration pending")}</small></span>})}</div><div className="sol-identity"><UserRound /><div><strong>{isAr ? "ملف عميل موحد" : "Unified customer profile"}</strong><p>{isAr ? "WhatsApp → Email → محادثة واحدة عندما تتطابق بيانات الهوية." : "WhatsApp → Email → one timeline when identity data matches."}</p></div></div></div></section>

    <section id="automation" className="pf-section sol-automation"><div className="pf-container"><Heading label={isAr ? "حلول الأتمتة" : "Automation solutions"} title={isAr ? "دع النظام ينفذ الأعمال المتكررة تلقائيًا" : "Let the system complete repetitive work automatically"} /><div className="sol-automation-grid">{[
      ["01",isAr?"Lead جديد":"New lead",isAr?["أضف وسمًا","سجل CRM","عيّن موظفًا","أرسل متابعة"]:["Add tag","Create CRM record","Assign owner","Send follow-up"]],
      ["02",isAr?"طلب حجز":"Booking request",isAr?["افحص المواعيد","أنشئ الموعد","أرسل التأكيد","أنشئ تذكيرًا"]:["Check slots","Create booking","Send confirmation","Create reminder"]],
      ["03",isAr?"العميل لم يرد":"No customer reply",["Wait 24 Hours","Follow-up",isAr?"تحديث الحالة":"Update status"]],
      ["04",isAr?"AI لم يجد إجابة":"AI cannot answer",["Human Handoff",isAr?"إرسال ملخص":"Send summary",isAr?"فتح تذكرة":"Open ticket"]],
    ].map(([num,title,steps])=><article key={num as string}><span>{num as string}</span><h3>{title as string}</h3>{(steps as string[]).map((step,index)=><p key={step}><i>{index+1}</i>{step}</p>)}</article>)}</div></div></section>

    <section id="follow-up" className="pf-section sol-follow"><div className="pf-container sol-two"><div><Heading label={isAr ? "متابعة العملاء" : "Customer follow-up"} title={isAr ? "المتابعة لا تعتمد على ذاكرة الموظف" : "Follow-up should not depend on employee memory"} text={isAr ? "قواعد وتذكيرات ورسائل مجدولة وخطوة تالية واضحة حسب نشاط العميل ومرحلته." : "Rules, reminders, scheduled messages, and a clear next action based on customer activity and stage."} /><div className="sol-tag-cloud">{["Follow-up Rules","Reminder","Next Action","Customer Inactivity","Scheduled Message","Lead Follow-up","Appointment Reminder","Renewal Reminder","Payment Reminder Architecture"].map(x=><span key={x}>{x}</span>)}</div><small className="sol-disclaimer">{isAr ? "بنية تذكير الدفع لا تنفذ تحصيلًا أو دفعًا دون تكامل فعلي وموافقة صريحة." : "Payment reminders do not collect or process payments without a live integration and explicit approval."}</small></div><div className="sol-reminder-card"><BellRing /><strong>{isAr ? "متابعة مقترحة" : "Suggested follow-up"}</strong><p>{isAr ? "لم يتفاعل العميل منذ 24 ساعة بعد استلام العرض." : "The customer has not responded for 24 hours after receiving the proposal."}</p><div><button type="button" onClick={() => setReminderState("scheduled")}>{isAr ? "جدولة متابعة" : "Schedule follow-up"}</button><button type="button" onClick={() => setReminderState("skipped")}>{isAr ? "تخطي" : "Skip"}</button></div><Badge variant="secondary" aria-live="polite">{reminderState === "scheduled" ? (isAr ? "تمت الجدولة" : "Scheduled") : reminderState === "skipped" ? (isAr ? "تم التخطي" : "Skipped") : (isAr ? "يحتاج موافقة" : "Approval required")}</Badge></div></div></section>

    <section id="knowledge" className="pf-section sol-knowledge"><div className="pf-container"><Heading label={isAr ? "إدارة المعرفة" : "Knowledge management"} title={isAr ? "مصدر واحد للحقيقة داخل شركتك" : "One source of truth across your company"} text={isAr ? "المعرفة نفسها تدعم خدمة العملاء والمبيعات والدعم والتدريب والردود الداخلية مع احترام الصلاحيات." : "The same knowledge supports service, sales, support, training, and internal answers while respecting permissions."} /><div className="sol-source-grid">{[[FileText,"PDF"],[NotebookText,"Word"],[Layers3,"Excel"],[GlobeIcon,"Website"],[MessageCircle,"FAQ"],[NotebookText,"Manual Text"],[Database,"Product Data"],[ShieldCheck,"Policies"]].map(([Icon,label])=>{const I=Icon as typeof Bot;return <span key={label as string}><I />{label as string}</span>})}</div><div className="sol-no-answer"><BrainCircuit /><div><strong>{isAr ? "لا معرفة كافية؟ لا يخترع الوكيل إجابة." : "Not enough knowledge? The agent does not invent an answer."}</strong><p>{isAr ? "يطلب توضيحًا، أو يذكر أن المعلومة غير متوفرة، أو يحول الحالة للموظف." : "It asks for clarification, states that the information is unavailable, or hands the case to a teammate."}</p></div></div></div></section>

    <section id="internal-assistant" className="pf-section sol-internal"><div className="pf-container sol-two"><div><Heading label={isAr ? "للموظفين أيضًا" : "For employees too"} title={isAr ? "مساعد ذكي لفريقك الداخلي" : "An intelligent assistant for your internal team"} text={isAr ? "يساعد الموظف في الوصول إلى السياسات والمنتجات والعقود والإجراءات والأسعار والتعليمات والأسئلة الشائعة والملفات الداخلية." : "Helps employees find policies, products, contracts, procedures, pricing, instructions, FAQs, and internal files."} /><a className="pf-button secondary large" href="/platform#knowledge">{isAr ? "استكشف قاعدة المعرفة" : "Explore the knowledge base"}</a></div><div className="sol-access-card"><KeyRound /><h3>{isAr ? "الإجابة حسب صلاحية المستخدم" : "Answers follow user permissions"}</h3><p>{isAr ? "لا تظهر معلومة أو ملفًا لا يملك الموظف صلاحية الاطلاع عليه." : "No information or file is shown when the employee lacks permission to view it."}</p><div><span><LockKeyhole />{isAr ? "العقود · الإدارة" : "Contracts · Management"}</span><span><CheckCircle2 />{isAr ? "الأسعار · المبيعات" : "Pricing · Sales"}</span><span><CheckCircle2 />{isAr ? "الإجراءات · الجميع" : "Procedures · Everyone"}</span></div></div></div></section>

    <section id="business-size" className="pf-section sol-size"><div className="pf-container"><Heading label={isAr ? "ينمو مع شركتك" : "Built to scale"} title={isAr ? "حل يناسب حجم فريقك اليوم وغدًا" : "A solution that fits your team today and tomorrow"} /><div className="sol-size-grid">{[
      [Building2,isAr?"الشركات الصغيرة":"Small business",["AI Agent","Inbox","CRM","WhatsApp Setup","Basic Automation"]],
      [Users,isAr?"الشركات المتوسطة":"Mid-market",["Multiple Agents","Teams","Automation","Campaigns","Analytics","Multiple Channels"]],
      [Network,isAr?"الشركات الكبيرة":"Enterprise",["Departments","Advanced Permissions","Multiple Workspaces","API","SSO Architecture","Audit Logs","Custom Integrations","White Label","Enterprise Support"]],
    ].map(([Icon,title,items])=>{const I=Icon as typeof Bot;return <article key={title as string}><span><I /></span><h3>{title as string}</h3><List items={items as string[]}/></article>})}</div></div></section>

    <section id="before-after" className="pf-section sol-compare"><div className="pf-container"><Heading label={isAr ? "قبل وبعد" : "Before and after"} title={isAr ? "من رسائل متفرقة إلى تشغيل يمكن إدارته" : "From scattered messages to manageable operations"} /><div className="sol-compare-grid"><article className="before"><span>{isAr ? "قبل NEXORA AI" : "Before NEXORA AI"}</span><List items={isAr?["رسائل متفرقة وتأخر في الرد","نسيان المتابعة","معلومات موزعة","صعوبة قياس الأداء","انتقال يدوي بين الأنظمة","ضغط كبير على الفريق"]:["Scattered messages and slow replies","Missed follow-up","Distributed information","Hard-to-measure performance","Manual system switching","Heavy team workload"]}/></article><article className="after"><span>{isAr ? "مع NEXORA AI" : "With NEXORA AI"}</span><List items={["Unified Inbox","AI Agents","CRM","Knowledge Base","Automation","Human Handoff","Analytics"]}/></article></div></div></section>

    <section id="solution-simulator" className="pf-section sol-simulator"><div className="pf-container sol-two"><div><Heading label={isAr ? "محاكي الحل" : "Solution simulator"} title={isAr ? "اختر مشكلتك وشاهد مسار الحل" : "Choose your challenge and see the solution flow"} text={isAr ? "محاكاة توضيحية داخل الصفحة وليست اتصال AI إنتاجيًا." : "An in-page illustrative simulation, not a production AI connection."} /><div className="sol-sim-options">{simulatorOptions.map(option=><button type="button" className={simulator===option.id?"active":""} aria-pressed={simulator===option.id} onClick={()=>setSimulator(option.id)} key={option.id}>{option.label[l]}</button>)}</div></div><div className="sol-sim-result" aria-live="polite"><Badge>{isAr ? "مسار مقترح" : "Recommended flow"}</Badge><h3>{activeSimulation.label[l]}</h3><div>{activeSimulation.flow.map((step,index)=><span key={step[0]}><i>{index+1}</i><b>{step[l]}</b>{index<activeSimulation.flow.length-1&&<ChevronDown />}</span>)}</div><a className="pf-button primary" href="/create-agent">{isAr ? "جرّب الحل" : "Try this solution"}</a></div></div></section>

    <section id="departments" className="pf-section sol-departments"><div className="pf-container"><Heading label={isAr ? "حسب الإدارة" : "By department"} title={isAr ? "كل فريق يرى الأدوات التي يحتاجها" : "Each team gets the tools it needs"} /><Tabs defaultValue="sales" dir={isAr?"rtl":"ltr"} className="sol-tabs"><TabsList>{[["sales",isAr?"المبيعات":"Sales"],["service",isAr?"خدمة العملاء":"Service"],["marketing",isAr?"التسويق":"Marketing"],["management",isAr?"الإدارة":"Management"],["support",isAr?"الدعم":"Support"],["operations",isAr?"العمليات":"Operations"]].map(([value,label])=><TabsTrigger value={value} key={value}>{label}</TabsTrigger>)}</TabsList>{[
        ["sales",BriefcaseBusiness,["Lead Capture","CRM","Follow-up"]], ["service",Headphones,["Inbox","Knowledge","AI Agent"]], ["marketing",Megaphone,["Segments","Campaigns","Automation"]], ["management",BarChart3,["Analytics","Reports","Permissions"]], ["support",TicketCheck,["Tickets","AI Diagnosis","Human Transfer"]], ["operations",Workflow,["Workflow","Notifications","Task Automation"]],
      ].map(([value,Icon,items])=>{const I=Icon as typeof Bot;return <TabsContent value={value as string} key={value as string}><div className="sol-dept-panel"><I /><div>{(items as string[]).map(item=><span key={item}><Check />{item}</span>)}</div><a href="/create-agent">{isAr?"ابدأ الإعداد":"Start setup"}{isAr?<ArrowLeft/>:<ArrowRight/>}</a></div></TabsContent>})}</Tabs></div></section>

    <section id="decision-engine" className="pf-section sol-decision"><div className="pf-container sol-two"><div><Heading label="Decision Engine" title={isAr ? "وكيل يفهم ثم يقرر الإجراء المناسب" : "An agent that understands, then chooses the right action"} text={isAr ? "ليست مجرد إجابة آلية؛ كل قرار محكوم بقواعد وصلاحيات واضحة." : "It is more than an automated reply; every decision is governed by clear rules and permissions."} /><List items={["Detect Intent","Classify Customer","Extract Information","Determine Next Action","Trigger Workflow","Update CRM","Route Conversation","Escalate to Human"]}/></div><div className="sol-decision-map"><div><MessageCircle /><span>{isAr?"رسالة":"Message"}</span></div><ArrowRight /><div><BrainCircuit /><span>{isAr?"فهم وتصنيف":"Understand & classify"}</span></div><ArrowRight /><div><Route /><span>{isAr?"قاعدة وصلاحية":"Rule & permission"}</span></div><ArrowRight /><div><Zap /><span>{isAr?"إجراء أو تحويل":"Act or hand off"}</span></div></div></div></section>

    <section id="human-control" className="pf-section sol-control"><div className="pf-container sol-two"><div><Heading label={isAr ? "تحكم بشري" : "Human control"} title={isAr ? "أنت تحدد ما الذي يستطيع AI فعله" : "You decide what AI is allowed to do"} text={isAr ? "يمكن تعطيل أي وكيل أو أتمتة، وتحديد ما يحتاج موافقة أو تحويلًا." : "Any agent or automation can be disabled, with clear approval and escalation rules."} /><List items={isAr?["الإجراءات المسموحة والمقيدة","قواعد التصعيد وتوجيه الأقسام","حد الثقة وساعات العمل"]:["Allowed and restricted actions","Escalation and department routing","Confidence threshold and business hours"]}/></div><div className="sol-control-panel">{[
        ["Auto Reply",isAr?"الرد الآلي":"Auto reply"],["Approval Before Send",isAr?"موافقة قبل الإرسال":"Approval before send"],["Agent Enabled",isAr?"تشغيل الوكيل":"Agent enabled"],["Automation Enabled",isAr?"تشغيل الأتمتة":"Automation enabled"],
      ].map(([key,label],index)=><label key={key}><span><strong>{label}</strong><small>{key}</small></span><input type="checkbox" checked={controls[index]} onChange={()=>setControls(current=>current.map((value,i)=>i===index?!value:value))}/><i aria-hidden="true" /></label>)}<p aria-live="polite">{isAr ? `${controls.filter(Boolean).length} من 4 إعدادات مفعلة` : `${controls.filter(Boolean).length} of 4 controls enabled`}</p></div></div></section>

    <section id="solution-analytics" className="pf-section sol-kpis"><div className="pf-container"><Heading label={isAr ? "مؤشرات كل حل" : "Solution analytics"} title={isAr ? "قِس ما يهم كل فريق" : "Measure what matters to each team"} text={isAr ? "أسماء المؤشرات دون عرض نتائج أو نسب غير مثبتة." : "Metric definitions without unverified results or percentages."} /><div className="sol-kpi-grid">{[
        [Headphones,isAr?"خدمة العملاء":"Customer service",["Conversations","First Response Time","Resolution Time","AI Resolution","Human Handoff"]],
        [BriefcaseBusiness,isAr?"المبيعات":"Sales",["Leads","Qualified Leads","Deals","Conversion"]],
        [Megaphone,isAr?"التسويق":"Marketing",["Campaign Delivery","Responses","Leads Generated"]],
        [CalendarCheck,isAr?"الحجوزات":"Bookings",["Booked","Cancelled","Rescheduled"]],
      ].map(([Icon,title,items])=>{const I=Icon as typeof Bot;return <article key={title as string}><span><I /></span><h3>{title as string}</h3>{(items as string[]).map(item=><p key={item}><CircleGauge />{item}</p>)}</article>})}</div></div></section>

    <section id="recommendation" className="pf-section sol-recommend"><div className="pf-container sol-two"><div><Heading label={isAr ? "توصية مبدئية" : "Initial recommendation"} title={isAr ? "لست متأكدًا من الحل المناسب؟" : "Not sure which solution fits?"} text={isAr ? "أجب عن أربعة أسئلة لتحصل على نقطة بداية. النتيجة ليست عرض سعر ملزمًا." : "Answer four questions for a starting point. The result is not a binding quotation."} />{recommendation&&<div className="sol-recommendation" aria-live="polite"><Sparkles /><p>{recommendation}</p><a href="/contact?intent=sales">{isAr?"تحدث مع فريقنا":"Talk to our team"}{isAr?<ArrowLeft/>:<ArrowRight/>}</a></div>}</div><form onSubmit={recommend} className="sol-questionnaire"><label>{isAr?"ما هدفك؟":"What is your goal?"}<select value={goal} onChange={e=>setGoal(e.target.value)}>{[["service",isAr?"خدمة العملاء":"Customer service"],["sales",isAr?"زيادة المبيعات":"Increase sales"],["automation",isAr?"أتمتة العمليات":"Automate operations"],["bookings",isAr?"الحجوزات":"Bookings"],["marketing",isAr?"التسويق":"Marketing"],["inbox",isAr?"إدارة المحادثات":"Conversation management"]].map(([v,x])=><option value={v} key={v}>{x}</option>)}</select></label><label>{isAr?"حجم الشركة":"Company size"}<select value={size} onChange={e=>setSize(e.target.value)}><option value="small">{isAr?"صغيرة":"Small"}</option><option value="medium">{isAr?"متوسطة":"Mid-market"}</option><option value="enterprise">{isAr?"كبيرة":"Enterprise"}</option></select></label><label>{isAr?"كم قناة تستخدم؟":"How many channels?"}<select value={channels} onChange={e=>setChannels(e.target.value)}><option value="1">1</option><option value="2">2</option><option value="3+">3+</option></select></label><label>{isAr?"هل لديك CRM؟":"Do you use a CRM?"}<select value={hasCrm} onChange={e=>setHasCrm(e.target.value)}><option value="no">{isAr?"لا":"No"}</option><option value="yes">{isAr?"نعم":"Yes"}</option></select></label><label>{isAr?"هل تستخدم WhatsApp؟":"Do you use WhatsApp?"}<select value={usesWhatsapp} onChange={e=>setUsesWhatsapp(e.target.value)}><option value="yes">{isAr?"نعم":"Yes"}</option><option value="no">{isAr?"لا":"No"}</option></select></label><Button type="submit" className="pf-button primary"><WandSparkles />{isAr?"اعرض التوصية":"Show recommendation"}</Button></form></div></section>

    <section className="pf-final"><div className="pf-container"><span><Workflow /></span><h2>{isAr ? "اختر المشكلة… ودع NEXORA تبني سير العمل" : "Choose the challenge — let NEXORA build the workflow"}</h2><p>{isAr ? "ابدأ بحل واحد اليوم، ثم وسّع استخدام المنصة مع نمو فريقك واحتياجات شركتك." : "Start with one solution today, then expand as your team and needs grow."}</p><div className="pf-actions"><a className="pf-button primary large" href="/create-agent">{t.create}</a><a className="pf-button secondary large" href="/#pricing">{isAr?"استكشف الأسعار":"Explore pricing"}</a></div></div></section>
    <MarketingFooter isAr={isAr} navLinks={navLinks} />
  </main>;
}

function GlobeIcon() {
  return <Activity />;
}