"use client";

import { FormEvent, useEffect, useState } from "react";
import {
  Activity, ArrowLeft, ArrowRight, BarChart3, BellRing, Bot, BrainCircuit,
  BriefcaseBusiness, Building2, CalendarCheck, Check, CheckCircle2, ChevronDown,
  CircleGauge, Clock3, Database, FileSpreadsheet, FileText, Globe2, Headphones,
  History, Inbox, LockKeyhole, Mail, MessageCircle, MessagesSquare,
  Mic2, Network, NotebookText, Paperclip, PhoneCall, Play, Plug, Search, Send,
  Settings2, ShieldCheck, Sparkles, Tags, Upload, UserRound, Users, WandSparkles,
  Workflow, Zap,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { Textarea } from "@/components/ui/textarea";
import { MarketingFooter, MarketingHeader } from "@/components/marketing-shell";
import "./platform.css";

type Language = "ar" | "en";
type AgentKind = "sales" | "support";

const content = {
  ar: {
    nav: ["نظرة عامة", "الوكلاء", "الصندوق الموحد", "الأتمتة", "التحليلات", "التكاملات"],
    heroTitle: "منصة واحدة. فريق رقمي يعمل معك على مدار الساعة.",
    heroText: "أنشئ وكلاء ذكاء اصطناعي يفهمون أعمال شركتك، يتحدثون مع عملائك، ينفذون المهام، ويتعاونون مع فريقك من منصة واحدة.",
    create: "أنشئ وكيلك", watch: "شاهد كيف تعمل المنصة", login: "تسجيل الدخول",
    eyebrow: "منصة الموظفين الرقميين",
    demoMode: "وضع تجريبي — بدون اتصال إنتاجي",
  },
  en: {
    nav: ["Overview", "AI Agents", "Unified Inbox", "Automation", "Analytics", "Integrations"],
    heroTitle: "One platform. A digital team working with you around the clock.",
    heroText: "Build AI agents that understand your business, talk to customers, complete tasks, and collaborate with your team from one workspace.",
    create: "Create your agent", watch: "See how the platform works", login: "Sign in",
    eyebrow: "Digital employees platform",
    demoMode: "Demo mode — no production connection",
  },
} as const;

const featureData = [
  { id: "agents", icon: Bot, ar: ["وكلاء الذكاء الاصطناعي", "موظفون رقميون بمهام وصلاحيات واضحة."], en: ["AI Agents", "Digital employees with clear tasks and permissions."] },
  { id: "inbox", icon: Inbox, ar: ["صندوق موحد", "كل المحادثات والقنوات في شاشة واحدة."], en: ["Unified Inbox", "Every conversation and channel in one screen."] },
  { id: "crm", icon: UserRound, ar: ["إدارة العملاء CRM", "ملف موحد وتاريخ كامل لكل عميل."], en: ["CRM", "One profile and a complete history for every customer."] },
  { id: "knowledge", icon: BrainCircuit, ar: ["قاعدة المعرفة", "ملفاتك وسياساتك مرجع موثوق للوكيل."], en: ["Knowledge Base", "Your files and policies become the agent’s trusted source."] },
  { id: "automation", icon: Workflow, ar: ["الأتمتة", "مسارات تحول الرسائل إلى إجراءات."], en: ["Automation", "Workflows that turn messages into actions."] },
  { id: "use-cases", icon: BellRing, ar: ["الحملات والمتابعة", "متابعة منظمة للعملاء المحتملين."], en: ["Campaigns", "Structured follow-up for leads and customers."] },
  { id: "voice", icon: Mic2, ar: ["الذكاء الصوتي", "تصور لوكلاء المكالمات مع تحويل بشري."], en: ["Voice AI", "A clear path for calling agents and human transfer."] },
  { id: "analytics", icon: BarChart3, ar: ["التحليلات", "رؤية الأداء والنتائج لحظة بلحظة."], en: ["Analytics", "See performance and outcomes as they happen."] },
  { id: "integrations", icon: Plug, ar: ["التكاملات", "حالة واضحة لما هو متاح وما هو قادم."], en: ["Integrations", "Clear status for what is available and what is coming."] },
] as const;

const agentExamples = [
  { icon: BriefcaseBusiness, ar: "وكيل مبيعات", en: "Sales Agent" },
  { icon: Headphones, ar: "وكيل خدمة عملاء", en: "Customer Service Agent" },
  { icon: CalendarCheck, ar: "وكيل حجوزات", en: "Booking Agent" },
  { icon: UserRound, ar: "وكيل استقبال", en: "Reception Agent" },
  { icon: BellRing, ar: "وكيل متابعة", en: "Follow-up Agent" },
  { icon: Settings2, ar: "وكيل دعم فني", en: "Technical Support Agent" },
] as const;

function Heading({ label, title, text }: { label: string; title: string; text?: string }) {
  const titleId = label === "منصة متكاملة" || label === "Integrated platform" ? "features-title" : undefined;
  return <div className="pf-heading"><span><Sparkles />{label}</span><h2 id={titleId}>{title}</h2>{text && <p>{text}</p>}</div>;
}

function FlowArrow({ isAr }: { isAr: boolean }) {
  return <span className="pf-flow-arrow" aria-hidden="true">{isAr ? <ArrowLeft /> : <ArrowRight />}</span>;
}

export default function PlatformPage({ lang }: { lang: Language }) {
  const isAr = lang === "ar";
  const t = content[lang];
  const [builderText, setBuilderText] = useState(isAr ? "أريد موظف مبيعات يتحدث العربية والإنجليزية، يستقبل العملاء، يتعرف على احتياجاتهم، يسجل بياناتهم، ويحول العملاء المؤهلين إلى فريق المبيعات." : "I need a bilingual sales employee who welcomes customers, understands their needs, records their details, and hands qualified leads to sales.");
  const [builderReady, setBuilderReady] = useState(false);
  const [building, setBuilding] = useState(false);
  const [agentKind, setAgentKind] = useState<AgentKind>("sales");
  const [demoMessage, setDemoMessage] = useState("");
  const [demoResult, setDemoResult] = useState<{ intent: string; reply: string } | null>(null);

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

  function runBuilder() {
    if (!builderText.trim()) return;
    setBuilding(true); setBuilderReady(false);
    window.setTimeout(() => { setBuilding(false); setBuilderReady(true); }, 650);
  }

  function runDemo(event: FormEvent) {
    event.preventDefault();
    const value = demoMessage.trim();
    if (!value) return;
    const booking = /حجز|موعد|booking|appointment/i.test(value);
    const price = /سعر|تكلف|باقة|price|cost|plan/i.test(value);
    const complaint = /شكوى|مشكلة|غاضب|complaint|problem|angry/i.test(value);
    const intent = booking ? (isAr ? "حجز موعد" : "Book appointment") : price ? (isAr ? "استفسار سعر" : "Pricing enquiry") : complaint ? (isAr ? "حالة تحتاج تحويلًا بشريًا" : "Human handoff required") : agentKind === "sales" ? (isAr ? "عميل محتمل" : "Sales lead") : (isAr ? "استفسار خدمة" : "Support enquiry");
    const reply = complaint
      ? (isAr ? "أتفهم ملاحظتك. جهزت ملخص المحادثة وبياناتك وسأحوّلك الآن إلى الموظف المختص دون أن تعيد التفاصيل." : "I understand your concern. I prepared your profile and conversation summary and will hand you to the right specialist without asking you to repeat anything.")
      : booking
        ? (isAr ? "بكل سرور. أستطيع مساعدتك في الحجز؛ اذكر اليوم والوقت المناسبين وسأعرض الخيارات قبل التأكيد." : "Of course. Share your preferred day and time, and I will show available options before confirmation.")
        : price
          ? (isAr ? "سأقترح الباقة المناسبة بعد معرفة عدد المحادثات والقنوات وأعضاء فريقك." : "I’ll recommend the right plan after learning your conversation volume, channels, and team size.")
          : agentKind === "sales"
            ? (isAr ? "مرحبًا، سأفهم احتياجك أولًا ثم أسجل بياناتك وأوصلك بفريق المبيعات إذا كان الحل مناسبًا." : "Welcome. I’ll understand your needs, capture your details, and connect you with sales when there is a good fit.")
            : (isAr ? "مرحبًا، سأبحث في قاعدة المعرفة وأعطيك الإجابة، أو أحولك لموظف مع ملخص كامل عند الحاجة." : "Welcome. I’ll search the knowledge base and answer, or hand you to a teammate with a full summary when needed.");
    setDemoResult({ intent, reply });
  }

  const navLinks = [
    ["overview", t.nav[0]], ["agents", t.nav[1]], ["inbox", t.nav[2]],
    ["automation", t.nav[3]], ["analytics", t.nav[4]], ["integrations", t.nav[5]],
  ] as const;

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

    <section className="pf-hero">
      <div className="pf-hero-orb one" /><div className="pf-hero-orb two" />
      <div className="pf-container pf-hero-grid">
        <div className="pf-hero-copy"><span className="pf-kicker"><Bot />{t.eyebrow}</span><h1>{t.heroTitle}</h1><p>{t.heroText}</p><div className="pf-actions"><a className="pf-button primary large" href="/create-agent">{t.create}{isAr ? <ArrowLeft /> : <ArrowRight />}</a><a className="pf-button secondary large" href="#how-it-works"><Play />{t.watch}</a></div><div className="pf-trust"><span><Check />{isAr ? "بدون برمجة" : "No code"}</span><span><Check />{isAr ? "تحكم بشري" : "Human control"}</span><span><Check />{isAr ? "جميع القطاعات" : "Every industry"}</span></div></div>
        <div className="pf-hero-visual" aria-label={isAr ? "رحلة رسالة العميل داخل المنصة" : "Customer message journey through the platform"}>
          <div className="pf-visual-head"><span><i />NEXORA Operations</span><Badge variant="secondary">{isAr ? "تدفق توضيحي" : "Illustrative flow"}</Badge></div>
          <div className="pf-pipeline">
            {[
              [MessageCircle, isAr ? "رسالة العميل" : "Customer message"],
              [BrainCircuit, isAr ? "فهم الطلب" : "Understand"],
              [Search, isAr ? "بحث المعرفة" : "Knowledge search"],
              [Zap, isAr ? "تنفيذ الإجراء" : "Take action"],
              [Database, isAr ? "تحديث العميل" : "Update CRM"],
              [Send, isAr ? "إرسال الرد" : "Send reply"],
            ].map(([Icon,label], index) => { const IconComponent = Icon as typeof Bot; return <div className="pf-pipeline-item" style={{ "--delay": `${index * .14}s` } as React.CSSProperties} key={label as string}><span><IconComponent /></span><b>{label as string}</b></div>; })}
          </div>
          <div className="pf-handoff-line"><Headphones /><div><strong>{isAr ? "تحويل ذكي عند الحاجة" : "Smart handoff when needed"}</strong><small>{isAr ? "ملخص + بيانات العميل + سبب التحويل" : "Summary + profile + reason"}</small></div><span>{isAr ? "فريقك" : "Your team"}</span></div>
        </div>
      </div>
    </section>

    <section className="pf-section pf-features" aria-labelledby="features-title"><div className="pf-container"><Heading label={isAr ? "منصة متكاملة" : "Integrated platform"} title={isAr ? "كل ما يحتاجه فريقك لخدمة العميل في مكان واحد" : "Everything your team needs to serve customers in one place"} text={isAr ? "ليست مجرد Chatbot؛ بل مساحة تشغيل للوكلاء والعملاء والمعرفة والإجراءات." : "Not just a chatbot — an operating workspace for agents, customers, knowledge, and actions."} /><div className="pf-feature-grid">{featureData.map((feature) => { const [title,text] = feature[lang]; return <a className="pf-feature-card" href={`#${feature.id}`} key={feature.id}><span><feature.icon /></span><h3>{title}</h3><p>{text}</p><b>{isAr ? "عرض التفاصيل" : "View details"}{isAr ? <ArrowLeft /> : <ArrowRight />}</b></a>; })}</div></div></section>

    <section id="agents" className="pf-section pf-agents"><div className="pf-container pf-split"><div><Heading label={isAr ? "وكلاء AI" : "AI Agents"} title={isAr ? "أنشئ موظفك الرقمي خلال دقائق" : "Create your digital employee in minutes"} text={isAr ? "اختر المهمة والشخصية واللغة والصلاحيات والقنوات وقواعد التحويل البشري." : "Choose the role, personality, language, permissions, channels, and human handoff rules."} /><div className="pf-agent-options">{agentExamples.map((agent) => <button key={agent.ar} onClick={() => setBuilderText(isAr ? `أريد ${agent.ar} يفهم أعمال شركتي ويتحدث مع العملاء وينفذ المهام ضمن صلاحيات محددة.` : `I need a ${agent.en} that understands my business, serves customers, and acts within clear permissions.`)}><agent.icon />{agent[lang]}</button>)}</div><a className="pf-button primary large" href="/create-agent">{isAr ? "أنشئ أول وكيل AI" : "Create your first AI agent"}</a></div><div className="pf-agent-profile"><div className="pf-profile-head"><span><Bot /></span><div><strong>{isAr ? "وكيل خدمة العملاء" : "Customer Service Agent"}</strong><small>{isAr ? "نشط · العربية والإنجليزية" : "Active · Arabic & English"}</small></div><i /></div><div className="pf-profile-grid">{[[isAr?"القسم":"Department",isAr?"خدمة العملاء":"Customer Service"],[isAr?"النبرة":"Tone",isAr?"ودود واحترافي":"Friendly & professional"],[isAr?"ساعات العمل":"Hours","24/7"],[isAr?"التحويل":"Handoff",isAr?"عند انخفاض الثقة":"When confidence drops"]].map(([label,value]) => <div key={label}><small>{label}</small><strong>{value}</strong></div>)}</div><div className="pf-permission-list">{[isAr?"يجيب من المعرفة المعتمدة":"Answers from approved knowledge",isAr?"يسجل بيانات العميل":"Captures customer data",isAr?"ينشئ مهمة متابعة":"Creates follow-up tasks",isAr?"لا ينفذ إجراء حساس دون موافقة":"No sensitive action without approval"].map((item) => <span key={item}><CheckCircle2 />{item}</span>)}</div></div></div></section>

    <section id="builder" className="pf-section pf-builder-section"><div className="pf-container"><Heading label={isAr ? "منشئ بلا برمجة" : "No-code builder"} title={isAr ? "صف الموظف الذي تحتاجه… والمنصة ترتب الإعداد" : "Describe the employee you need — the platform prepares the setup"} /><div className="pf-builder"><div className="pf-builder-input"><label htmlFor="agent-prompt">{isAr ? "وصف الوكيل" : "Agent description"}</label><Textarea id="agent-prompt" value={builderText} onChange={(e) => { setBuilderText(e.target.value); setBuilderReady(false); }} /><Button className="pf-button primary" onClick={runBuilder} disabled={building || !builderText.trim()}>{building ? (isAr ? "جارٍ إعداد الوكيل..." : "Preparing agent...") : <><WandSparkles />{isAr ? "إعداد الوكيل" : "Build agent"}</>}</Button></div><div className={`pf-builder-result ${builderReady ? "ready" : ""}`}><div className="pf-builder-status"><span><Bot /></span><div><strong>{builderReady ? (isAr ? "تم إعداد الوكيل" : "Agent ready") : (isAr ? "معاينة الإعداد" : "Setup preview")}</strong><small>{isAr ? "يمكن تعديل كل بند قبل الحفظ" : "Every item can be edited before saving"}</small></div>{builderReady && <CheckCircle2 />}</div><div className="pf-builder-tabs">{["Instructions","Personality","Knowledge","Actions","Channels","Rules","Human Handoff","Test Agent"].map((item,index) => <span className={builderReady && index < 6 ? "done" : ""} key={item}>{builderReady && index < 6 ? <Check /> : <i>{index+1}</i>}{item}</span>)}</div></div></div></div></section>

    <section id="inbox" className="pf-section pf-inbox-section"><div className="pf-container pf-split"><div><Heading label={isAr ? "صندوق موحد" : "Unified Inbox"} title={isAr ? "كل محادثات عملائك في صندوق وارد واحد" : "Every customer conversation in one inbox"} text={isAr ? "شاهد العميل والقناة والموظف والوكيل والأولوية والحالة دون التنقل بين التطبيقات." : "See the customer, channel, teammate, agent, priority, and status without switching apps."} /><div className="pf-channel-pills">{["WhatsApp","Instagram","Messenger","Web Chat","Email","Telegram","Voice"].map((channel,index) => <span key={channel}><i className={index < 2 ? "available" : ""} />{channel}<small>{index < 2 ? (isAr?"متاح للتجهيز":"Setup available") : (isAr?"مخطط":"Planned")}</small></span>)}</div></div><div className="pf-inbox-demo"><aside><strong>{isAr ? "المحادثات" : "Conversations"}</strong>{[["سارة محمد","أريد معرفة حالة طلبي","WhatsApp"],["أحمد سالم","هل يمكن حجز موعد؟","Web Chat"],["ريم خالد","أحتاج موظفًا مختصًا","Instagram"]].map(([name,message,channel],i) => <button className={i===0?"active":""} key={name}><span>{name[0]}</span><div><b>{isAr?name:["Sarah","Ahmed","Reem"][i]}</b><small>{isAr?message:["Where is my order?","Can I book an appointment?","I need a specialist"][i]}</small><em>{channel}</em></div></button>)}</aside><article><header><div><span>س</span><div><b>{isAr?"سارة محمد":"Sarah Mohammed"}</b><small>WhatsApp · {isAr?"أولوية عالية":"High priority"}</small></div></div><Badge>{isAr?"مفتوحة":"Open"}</Badge></header><div className="pf-inbox-messages"><p className="customer">{isAr?"أريد معرفة حالة طلبي رقم 4821":"I need the status of order 4821."}</p><span><Sparkles />{isAr?"بحث الوكيل في الطلبات وقاعدة المعرفة":"Agent searched orders and knowledge"}</span><p className="agent">{isAr?"طلبك خرج للتوصيل وسيصل اليوم بين 4 و6 مساءً.":"Your order is out for delivery and will arrive today between 4 and 6 PM."}</p></div><footer><Tags /><NotebookText /><Paperclip /><div>{isAr?"المسؤول: فريق الدعم":"Owner: Support team"}</div></footer></article></div></div></section>

    <section id="crm" className="pf-section pf-crm-section"><div className="pf-container"><Heading label="Customer 360" title={isAr ? "كل عميل له قصة كاملة" : "Every customer has a complete story"} text={isAr ? "ملف موحد يجمع البيانات والمحادثات والطلبات والمواعيد والصفقات وآخر تواصل." : "One profile for details, conversations, orders, appointments, deals, and last contact."} /><div className="pf-customer-card"><aside><span className="pf-customer-avatar">م</span><h3>{isAr?"محمد العتيبي":"Mohammed Alotaibi"}</h3><p>mohammed@company.com</p><Badge>{isAr?"عميل محتمل مؤهل":"Qualified lead"}</Badge><div><small>{isAr?"المسؤول":"Owner"}</small><strong>{isAr?"فريق المبيعات":"Sales team"}</strong></div></aside><article><div className="pf-customer-stats">{[[isAr?"المصدر":"Source","WhatsApp"],[isAr?"المحادثات":"Conversations","6"],[isAr?"المواعيد":"Appointments","2"],[isAr?"الصفقات":"Deals","1"]].map(([label,value]) => <span key={label}><small>{label}</small><b>{value}</b></span>)}</div><h4>{isAr?"سجل التفاعل":"Interaction timeline"}</h4><div className="pf-timeline">{[[MessageCircle,isAr?"بدأ محادثة حول باقة الأعمال":"Started a conversation about Business plan","10:35"],[Database,isAr?"تم تحديث مرحلة العميل إلى مؤهل":"Lead stage updated to Qualified","10:38"],[CalendarCheck,isAr?"حُجز عرض توضيحي لفريقه":"Demo booked for his team","10:44"],[BellRing,isAr?"إنشاء متابعة بعد 24 ساعة":"Follow-up created for 24 hours","10:45"]].map(([Icon,label,time]) => { const I=Icon as typeof Bot; return <div key={label as string}><span><I /></span><div><strong>{label as string}</strong><small>{time as string}</small></div></div>; })}</div></article></div></div></section>

    <section id="knowledge" className="pf-section pf-knowledge"><div className="pf-container pf-split"><div><Heading label={isAr ? "المعرفة المؤسسية" : "Company knowledge"} title={isAr ? "علّم وكيلك كل ما يعرفه فريقك" : "Teach your agent everything your team knows"} text={isAr ? "أضف PDF وWord وExcel والأسئلة الشائعة والنصوص وصفحات الموقع والمنتجات والخدمات والسياسات." : "Add PDFs, Word, Excel, FAQs, text, website pages, products, services, and policies."} /><a className="pf-button primary large" href="/create-agent">{isAr?"فتح مركز المعرفة":"Open knowledge center"}</a></div><div className="pf-upload-flow">{[[Upload,isAr?"رفع":"Upload","PDF · DOCX · XLSX"],[Activity,isAr?"معالجة":"Processing",isAr?"قراءة وتنظيم":"Read & organize"],[CheckCircle2,isAr?"جاهز":"Ready",isAr?"مصدر معتمد":"Approved source"],[Bot,isAr?"يستخدمه الوكيل":"Agent uses it",isAr?"إجابة موثقة":"Grounded answer"]].map(([Icon,title,sub],index) => {const I=Icon as typeof Bot;return <div key={title as string}><span><I /></span><b>{title as string}</b><small>{sub as string}</small>{index<3&&<FlowArrow isAr={isAr}/>}</div>})}</div></div></section>

    <section id="automation" className="pf-section pf-automation"><div className="pf-container"><Heading label={isAr ? "منشئ المسارات" : "Workflow builder"} title={isAr ? "حوّل الإجراءات المتكررة إلى عمليات تلقائية" : "Turn repetitive steps into automated workflows"} /><div className="pf-workflow-board">{[[MessageCircle,isAr?"رسالة جديدة":"New message"],[BrainCircuit,isAr?"تحديد نية العميل":"Detect intent"],[UserRound,isAr?"إنشاء Lead":"Create lead"],[Tags,isAr?"إضافة Tag":"Add tag"],[Users,isAr?"إسناد للمبيعات":"Assign sales"],[Send,isAr?"رسالة متابعة":"Follow-up message"],[BellRing,isAr?"إنشاء تذكير":"Create reminder"]].map(([Icon,label],index)=>{const I=Icon as typeof Bot;return <div className={index===2?"decision":""} key={label as string}><span><I /></span><b>{label as string}</b><small>{index===2?(isAr?"إذا كان مهتمًا بالشراء":"If purchase intent"):(isAr?"تم":"Done")}</small></div>})}</div></div></section>

    <section id="human-ai" className="pf-section pf-human"><div className="pf-container pf-split"><div><Heading label="Human + AI" title={isAr ? "الذكاء الاصطناعي عندما يستطيع، وفريقك عندما تحتاج المحادثة إنسانًا" : "AI when it can, your team when the conversation needs a human"} text={isAr ? "الوكيل لا يلغي الموظف؛ بل يجهز له المحادثة والبيانات والسبب واقتراح الرد التالي." : "The agent does not replace your teammate; it prepares the conversation, data, reason, and suggested next reply."} /><ul>{[isAr?"اختيار القسم المناسب":"Select the right department",isAr?"إرسال ملخص واضح":"Send a clear summary",isAr?"عرض سبب التحويل":"Show the handoff reason",isAr?"متابعة الحوار دون تكرار المعلومات":"Continue without repeating information"].map((item)=><li key={item}><CheckCircle2 />{item}</li>)}</ul></div><div className="pf-handoff-card"><div className="pf-ai-side"><span><Bot /></span><strong>{isAr?"الوكيل الرقمي":"Digital agent"}</strong><p>{isAr?"جمعت بيانات العميل وحددت أن الطلب يحتاج صلاحية بشرية.":"I collected the customer details and identified a request that needs human approval."}</p></div><FlowArrow isAr={isAr}/><div className="pf-human-side"><span><Headphones /></span><strong>{isAr?"موظف المبيعات":"Sales teammate"}</strong><p>{isAr?"وصلني الملخص والملف واقتراح الرد؛ سأكمل من هنا.":"I received the summary, profile, and reply suggestion. I’ll continue from here."}</p></div></div></div></section>

    <section id="voice" className="pf-section pf-voice"><div className="pf-container pf-split"><div className="pf-voice-visual"><div className="pf-wave">{[18,34,58,42,72,48,82,55,31,64,42,22].map((height,index)=><i key={index} style={{height}} />)}</div><div className="pf-call-flow">{[[PhoneCall,"Customer Call"],[Mic2,"AI Receptionist"],[BrainCircuit,"Intent"],[Database,"Knowledge / CRM"],[Headphones,"Human Transfer"]].map(([Icon,label],index)=>{const I=Icon as typeof Bot;return <span key={label as string}><I />{label as string}{index<4&&<small>→</small>}</span>})}</div><Badge variant="outline">{isAr?"ميزة مخطط لها — ليست Live حاليًا":"Planned capability — not live yet"}</Badge></div><div><Heading label="Voice AI" title={isAr ? "وكيلك لا يكتب فقط… يستطيع التحدث أيضًا" : "Your agent will not only type — it can speak too"} text={isAr ? "تصميم جاهز لاستقبال وإجراء المكالمات، تحويل الكلام إلى نص، التلخيص، تسجيل Lead، الحجز والتحويل للموظف بعد اكتمال التكامل الصوتي." : "Designed for inbound and outbound calls, transcription, summaries, lead capture, bookings, and human transfer once voice integration is completed."} /></div></div></section>

    <section id="omnichannel" className="pf-section pf-omnichannel"><div className="pf-container"><Heading label="Omnichannel" title={isAr ? "عميلك يختار القناة… وNEXORA تدير المحادثة" : "Your customer chooses the channel — NEXORA manages the conversation"} text={isAr ? "هوية العميل وتاريخه تبقى موحدة مهما تغيّرت قناة التواصل." : "The customer identity and history stay unified across channels."} /><div className="pf-channel-map"><div className="pf-channel-core"><UserRound /><strong>{isAr?"ملف عميل موحد":"Unified customer"}</strong><small>Customer ID #4821</small></div>{[[MessageCircle,"WhatsApp"],[MessagesSquare,"Instagram"],[Mail,"Email"],[Globe2,"Web Chat"],[Send,"Telegram"],[PhoneCall,"Voice"]].map(([Icon,label],index)=>{const I=Icon as typeof Bot;return <span className={`channel-${index+1}`} key={label as string}><I />{label as string}</span>})}</div></div></section>

    <section id="analytics" className="pf-section pf-analytics"><div className="pf-container"><Heading label={isAr ? "رؤية لحظية" : "Live visibility"} title={isAr ? "اعرف ما يحدث في شركتك لحظة بلحظة" : "Know what is happening across your company"} text={isAr ? "واجهة توضيحية برسوم مبنية داخل الصفحة وليست صورة ثابتة." : "An illustrative dashboard rendered in the page, not a static image."} /><div className="pf-analytics-board"><div className="pf-metric-grid">{[[isAr?"المحادثات":"Conversations","8,924","+16%"],[isAr?"عملاء جدد":"New customers","1,286","+9%"],["Leads","438","+12%"],[isAr?"معدل التحويل":"Conversion","38.6%","+5.1"],[isAr?"متوسط الرد":"Avg. response","4s","-21%"],[isAr?"الحل بالوكيل":"AI resolution","74%","+6%"]].map(([label,value,change])=><div key={label}><small>{label}</small><strong>{value}</strong><span>{change}</span></div>)}</div><div className="pf-chart-grid"><article><div><strong>{isAr?"أداء القنوات":"Channel performance"}</strong><Badge variant="secondary">{isAr?"بيانات توضيحية":"Demo data"}</Badge></div><div className="pf-bars">{[["WhatsApp",86],["Web Chat",62],["Instagram",48],["Email",35]].map(([label,value])=><span key={label as string}><b>{label as string}</b><i><em style={{width:`${value}%`}}/></i><small>{value}%</small></span>)}</div></article><article><strong>{isAr?"أداء الوكلاء":"Agent performance"}</strong><div className="pf-donut"><span><b>92%</b><small>{isAr?"رضا العملاء":"Customer satisfaction"}</small></span></div><div className="pf-chart-legend"><span><i/>AI Resolution 74%</span><span><i/>Human Handoff 26%</span></div></article></div></div></div></section>

    <section id="integrations" className="pf-section pf-integrations"><div className="pf-container"><Heading label={isAr ? "حالة شفافة" : "Transparent status"} title={isAr ? "اربط NEXORA بأدوات شركتك" : "Connect NEXORA to your business tools"} text={isAr ? "نوضح ما هو متاح داخل النظام وما يحتاج تكاملًا لاحقًا دون ادعاءات غير صحيحة." : "We clearly separate what is available now from what still needs integration."} /><div className="pf-integration-grid">{[
      ["NEXORA Dashboard",CircleGauge,"available"],["Knowledge Storage",Database,"available"],["Team & Roles",Users,"available"],["Audit Logs",History,"available"],
      ["WhatsApp Business",MessageCircle,"soon"],["Instagram",MessagesSquare,"soon"],["Telegram",Send,"soon"],["Email",Mail,"soon"],["Voice Provider",PhoneCall,"soon"],["External CRM",BriefcaseBusiness,"soon"],
    ].map(([name,Icon,status])=>{const I=Icon as typeof Bot;return <article key={name as string}><span><I /></span><strong>{name as string}</strong><Badge variant={status==="available"?"secondary":"outline"}>{status==="available"?(isAr?"متاح":"Available"):(isAr?"قريبًا":"Coming soon")}</Badge></article>})}</div></div></section>

    <section id="security" className="pf-section pf-security"><div className="pf-container pf-split"><div><Heading label={isAr ? "الأمان والصلاحيات" : "Security & permissions"} title={isAr ? "بيانات شركتك تحت سيطرتك" : "Your company data stays under your control"} text={isAr ? "أدوار وصلاحيات وفرق وأقسام وسجل تدقيق وعزل بيانات كل مساحة عمل، دون ادعاء أي شهادات لم تحصل عليها المنصة." : "Roles, permissions, teams, departments, audit logs, authentication, sessions, and workspace isolation — with no unearned certification claims."} /></div><div className="pf-security-grid">{[[Users,isAr?"الفرق والأقسام":"Teams & departments"],[LockKeyhole,isAr?"مصادقة آمنة":"Secure authentication"],[ShieldCheck,isAr?"عزل مساحات العمل":"Tenant isolation"],[History,isAr?"سجل التدقيق":"Audit logs"],[Settings2,isAr?"إدارة الجلسات":"Session management"],[Network,isAr?"صلاحيات حسب الدور":"Role permissions"]].map(([Icon,label])=>{const I=Icon as typeof Bot;return <span key={label as string}><I />{label as string}</span>})}</div></div></section>

    <section id="how-it-works" className="pf-section pf-how"><div className="pf-container"><Heading label={isAr ? "ابدأ بسهولة" : "Start simply"} title={isAr ? "كيف تعمل المنصة؟" : "How does the platform work?"} text={isAr ? "خمس خطوات واضحة للمستخدم غير التقني." : "Five clear steps for non-technical teams."} /><ol>{[[Building2,isAr?"أنشئ حساب شركتك":"Create your company account"],[Upload,isAr?"أضف معرفة شركتك":"Add company knowledge"],[Bot,isAr?"أنشئ وكيل AI":"Create an AI agent"],[Plug,isAr?"اربط قنوات التواصل":"Connect channels"],[Activity,isAr?"ابدأ الخدمة والعمليات":"Start service and operations"]].map(([Icon,label],index)=>{const I=Icon as typeof Bot;return <li key={label as string}><b>{index+1}</b><span><I /></span><strong>{label as string}</strong>{index<4&&<FlowArrow isAr={isAr}/>}</li>})}</ol></div></section>

    <section id="use-cases" className="pf-section pf-use-cases"><div className="pf-container"><Heading label={isAr ? "حالات استخدام" : "Use cases"} title={isAr ? "مسارات تخدم جميع القطاعات" : "Workflows for every industry"} /><div className="pf-use-grid">{[
      [BriefcaseBusiness,isAr?"المبيعات":"Sales",[isAr?"استقبال العميل":"Welcome",isAr?"تأهيل Lead":"Qualify lead",isAr?"تسجيل CRM":"Update CRM",isAr?"تحويل للمبيعات":"Handoff to sales"]],
      [Headphones,isAr?"خدمة العملاء":"Customer service",[isAr?"فهم السؤال":"Understand",isAr?"بحث المعرفة":"Search knowledge",isAr?"الرد":"Answer",isAr?"فتح Ticket":"Open ticket"]],
      [CalendarCheck,isAr?"الحجوزات":"Bookings",[isAr?"معرفة الطلب":"Understand request",isAr?"عرض الخيارات":"Show options",isAr?"جمع البيانات":"Capture data",isAr?"تسجيل الحجز":"Book"]],
      [BellRing,isAr?"المتابعة":"Follow-up",[isAr?"تحديد العملاء":"Find customers",isAr?"تشغيل Workflow":"Run workflow",isAr?"متابعة آلية":"Automated follow-up",isAr?"تذكير الموظف":"Remind teammate"]],
    ].map(([Icon,title,steps])=>{const I=Icon as typeof Bot;return <article key={title as string}><span><I /></span><h3>{title as string}</h3><div>{(steps as string[]).map((step,index)=><p key={step}><b>{index+1}</b>{step}</p>)}</div></article>})}</div></div></section>

    <section id="interactive-demo" className="pf-section pf-demo"><div className="pf-container pf-demo-grid"><div><Heading label={isAr ? "جرّب الفكرة" : "Try the concept"} title={isAr ? "شاهد كيف يفهم الوكيل الرسالة ويتصرف" : "See how an agent understands and acts"} text={isAr ? "محاكاة قواعد واضحة داخل المتصفح، وليست اتصال AI إنتاجيًا." : "A transparent in-browser rule simulation, not a production AI connection."} /><Badge variant="outline">{t.demoMode}</Badge></div><div className="pf-demo-console"><div className="pf-agent-switch"><button className={agentKind==="sales"?"active":""} onClick={()=>{setAgentKind("sales");setDemoResult(null)}}><BriefcaseBusiness />{isAr?"وكيل مبيعات":"Sales agent"}</button><button className={agentKind==="support"?"active":""} onClick={()=>{setAgentKind("support");setDemoResult(null)}}><Headphones />{isAr?"وكيل خدمة عملاء":"Support agent"}</button></div><form onSubmit={runDemo}><label htmlFor="demo-message">{isAr?"اكتب رسالة العميل":"Type a customer message"}</label><div><input id="demo-message" value={demoMessage} onChange={(e)=>setDemoMessage(e.target.value)} placeholder={isAr?"مثال: أريد حجز موعد غدًا":"Example: I need an appointment tomorrow"} /><Button type="submit" className="pf-button primary"><Send />{isAr?"تشغيل":"Run"}</Button></div></form>{demoResult ? <div className="pf-demo-result"><div className="pf-demo-steps">{[[BrainCircuit,isAr?"فهم الرسالة":"Understood"],[Tags,demoResult.intent],[Search,isAr?"بحث المعرفة":"Searched knowledge"],[Database,isAr?"حدّث العميل":"Updated customer"]].map(([Icon,label],index)=>{const I=Icon as typeof Bot;return <span key={index}><I /><b>{label as string}</b><Check /></span>})}</div><p>{demoResult.reply}</p></div> : <div className="pf-demo-empty"><MessageCircle /><p>{isAr?"اختر الوكيل واكتب رسالة لعرض مسار المعالجة والرد.":"Choose an agent and enter a message to see the processing path and reply."}</p></div>}</div></div></section>

    <section className="pf-final"><div className="pf-container"><span><Sparkles /></span><h2>{isAr?"موظفك الرقمي الأول يمكن أن يبدأ من هنا":"Your first digital employee can start here"}</h2><p>{isAr?"أنشئ وكيل ذكاء اصطناعي مخصص لشركتك، علّمه أعمالك، واربطه بقنوات عملائك.":"Create an AI agent for your company, teach it your business, and connect it to customer channels."}</p><div className="pf-actions"><a className="pf-button primary large" href="/create-agent">{t.create}</a><a className="pf-button secondary large" href="/contact?intent=sales">{isAr?"تحدث مع فريقنا":"Talk to our team"}</a></div></div></section>

    <MarketingFooter isAr={isAr} navLinks={navLinks} />
  </main>;
}