"use client";

import { FormEvent, useEffect, useState } from "react";
import {
  Activity, ArrowLeft, Bot, BriefcaseBusiness, Building2, CalendarCheck, Car,
  Check, CheckCircle2, CircleGauge, GraduationCap, Headphones, HeartPulse,
  Languages, Menu, MessageCircle, MessagesSquare, Plane, Play, Send,
  ShieldCheck, ShoppingCart, Sparkles, Store, SunMedium, Workflow, X, Zap,
} from "lucide-react";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

const sectors = [
  { title: "التجارة الإلكترونية", text: "حوّل الاستفسارات إلى طلبات، واسترجع السلات المتروكة، وتابع الشحن والدفع آليًا.", stat: "3×", statLabel: "زيادة التحويل", icon: ShoppingCart, color: "coral", points: ["استشارات المنتجات", "حالة الطلبات", "البيع والاستبدال"] },
  { title: "الرعاية الصحية", text: "نسّق المواعيد وقدّم إجابات فورية للمرضى مع تحويل الحالات الحساسة للموظف المختص.", stat: "40%", statLabel: "تقليل الغياب", icon: HeartPulse, color: "rose", points: ["حجز المواعيد", "تذكير آلي", "متابعة المرضى"] },
  { title: "العقارات", text: "وكيل مبيعات متاح دائمًا لفرز العملاء واقتراح العقارات وجدولة المعاينات.", stat: "45%", statLabel: "تحويل العملاء", icon: Building2, color: "blue", points: ["ترشيح العقارات", "جدولة المعاينة", "إدارة العروض"] },
  { title: "التعليم", text: "مساعد قبول ودعم طلابي يجيب عن البرامج والرسوم ويؤتمت التسجيل والمتابعة.", stat: "60%", statLabel: "أتمتة التسجيل", icon: GraduationCap, color: "violet", points: ["أسئلة القبول", "تسجيل الطلاب", "دعم المتعلمين"] },
  { title: "السيارات", text: "استقبل طلبات التجربة والصيانة ووفّر ترشيحات ذكية حسب الاحتياج والميزانية.", stat: "50%", statLabel: "تأهيل العملاء", icon: Car, color: "mint", points: ["استشارات المركبات", "حجز تجربة قيادة", "خدمات الصيانة"] },
  { title: "السفر والسياحة", text: "ساعد المسافرين على الحجز والتعديل والإلغاء ووفّر دعمًا متعدد اللغات طوال اليوم.", stat: "95%", statLabel: "رضا العملاء", icon: Plane, color: "cyan", points: ["مساعدة الحجز", "تعديلات الرحلات", "توصيات ذكية"] },
];

const channelMessages = [
  { name: "عميل واتساب", text: "أحتاج أغيّر موعد الحجز إلى يوم الخميس", time: "10:42", status: "جديد" },
  { name: "سارة — المتجر", text: "هل المنتج متوفر باللون الأسود؟", time: "10:38", status: "تم الرد" },
  { name: "أحمد العتيبي", text: "أرغب في حجز موعد معاينة", time: "10:31", status: "محول" },
];

function Logo() {
  return <a href="#top" className="brand" aria-label="NEXORA AI — الرئيسية"><span className="brand-mark" aria-hidden="true"><Sparkles /></span><span>NEXORA <b>AI</b></span></a>;
}

function SectionHead({ eyebrow, title, text }: { eyebrow: string; title: string; text?: string }) {
  return <div className="section-head"><span className="eyebrow"><Sparkles /> {eyebrow}</span><h2>{title}</h2>{text && <p>{text}</p>}</div>;
}

export default function Home() {
  const [mobileOpen, setMobileOpen] = useState(false);
  const [demoOpen, setDemoOpen] = useState(false);
  const [chatOpen, setChatOpen] = useState(false);
  const [createLabel, setCreateLabel] = useState("أنشئ وكيلك");
  const [chatText, setChatText] = useState("");
  const [chatMessages, setChatMessages] = useState([{ from: "bot", text: "مرحبًا! أنا وكيل NEXORA. أخبرني عن نشاطك وسأقترح لك أول أتمتة مناسبة." }]);

  useEffect(() => {
    fetch("/api/onboarding/entry", { cache: "no-store" }).then((response) => response.json() as Promise<{labelAr:string}>).then((entry) => setCreateLabel(entry.labelAr)).catch(() => undefined);
  }, []);

  const sendChat = (event: FormEvent) => {
    event.preventDefault();
    const value = chatText.trim();
    if (!value) return;
    setChatMessages((items) => [...items, { from: "user", text: value }, { from: "bot", text: "ممتاز. سأبني لك مسارًا يبدأ باستقبال العميل، يفهم طلبه، ينفّذ الإجراء، ثم يحوّل الحالات الخاصة لفريقك مع ملخص كامل." }]);
    setChatText("");
  };

  return (
    <main id="top">
      <header className="site-header">
        <div className="container header-inner">
          <Logo />
          <nav className="desktop-nav" aria-label="التنقل الرئيسي">
            <a href="/platform">المنصة</a><a href="/solutions">الحلول</a><a href="/industries">القطاعات</a><a href="/success-stories">قصص النجاح</a><a href="/pricing">الأسعار</a><a href="/contact">تواصل معنا</a>
          </nav>
          <div className="header-actions">
            <button className="icon-button desktop-only" aria-label="تغيير المظهر"><SunMedium /></button>
            <button className="login-link desktop-only" onClick={() => { window.location.href = "/dashboard"; }}>تسجيل الدخول</button>
            <Button className="primary-button desktop-only" onClick={() => { window.location.href = "/create-agent"; }}>{createLabel}</Button>
            <button className="icon-button mobile-menu" onClick={() => setMobileOpen(!mobileOpen)} aria-label="فتح القائمة">{mobileOpen ? <X /> : <Menu />}</button>
          </div>
        </div>
        {mobileOpen && <nav className="mobile-nav" aria-label="التنقل على الجوال">
          <a href="/platform" onClick={() => setMobileOpen(false)}>المنصة</a>
          <a href="/solutions" onClick={() => setMobileOpen(false)}>الحلول</a>
          <a href="/industries" onClick={() => setMobileOpen(false)}>القطاعات</a>
          <a href="/success-stories" onClick={() => setMobileOpen(false)}>قصص النجاح</a>
          <a href="/pricing" onClick={() => setMobileOpen(false)}>الأسعار</a><a href="/contact" onClick={() => setMobileOpen(false)}>تواصل معنا</a>
          <Button className="primary-button" onClick={() => { window.location.href = "/create-agent"; }}>{createLabel}</Button>
        </nav>}
      </header>

      <section className="hero">
        <div className="hero-glow hero-glow-one" /><div className="hero-glow hero-glow-two" />
        <div className="container hero-grid">
          <div className="hero-copy">
            <span className="eyebrow"><Bot /> وكلاء ذكاء اصطناعي للأعمال</span>
            <h1>موظف رقمي يعمل<br /><span>ويبيع ويدعم</span> عنك.</h1>
            <p>ابنِ وكلاء ذكاء اصطناعي يتحدثون العربية، يفهمون عملاءك، وينفذون العمليات عبر كل قنواتك — على مدار الساعة.</p>
            <div className="hero-actions"><Button className="primary-button large" onClick={() => { window.location.href = "/create-agent"; }}>ابدأ الآن <ArrowLeft /></Button><Button variant="outline" className="outline-button large" onClick={() => setDemoOpen(true)}><Play /> شاهد المنصة</Button></div>
            <div className="trust-row"><span><CheckCircle2 /> إعداد موجّه ومحفوظ</span><span><CheckCircle2 /> الشروط واضحة حسب الباقة</span><span><CheckCircle2 /> دعم عربي وإنجليزي</span></div>
          </div>

          <div className="hero-console" aria-label="معاينة صندوق المحادثات الموحد">
            <div className="console-topbar"><div className="console-dots"><i /><i /><i /></div><span>مركز عمليات NEXORA</span><span className="online"><i /> مباشر</span></div>
            <div className="console-body">
              <aside className="console-side"><div className="mini-logo"><Sparkles /></div><button className="active"><MessagesSquare /></button><button><Bot /></button><button><CircleGauge /></button><button><Workflow /></button></aside>
              <div className="console-list"><div className="console-title"><strong>صندوق موحد</strong><span>12 محادثة</span></div>{channelMessages.map((message, index) => <div className={`conversation ${index === 0 ? "selected" : ""}`} key={message.name}><div className={`avatar avatar-${index + 1}`}>{message.name.slice(0, 1)}</div><div><strong>{message.name}</strong><p>{message.text}</p></div><small>{message.time}</small></div>)}</div>
              <div className="console-chat"><div className="chat-person"><div className="avatar avatar-1">ع</div><div><strong>عميل واتساب</strong><span>متصل الآن</span></div></div><div className="chat-bubbles"><p className="incoming">أحتاج أغيّر موعد الحجز إلى يوم الخميس</p><p className="ai-note"><Sparkles /> فهم الوكيل الطلب وتحقق من الخيارات المتاحة</p><p className="outgoing">تم العثور على موعد الخميس الساعة 4:30 مساءً. هل أؤكد التغيير؟</p></div><div className="chat-input"><span>اكتب رسالة...</span><Send /></div></div>
            </div>
            <div className="floating-metric metric-one"><Zap /><div><strong>72%</strong><span>أتمتة فورية</span></div></div><div className="floating-metric metric-two"><Activity /><div><strong>24/7</strong><span>استجابة مستمرة</span></div></div>
          </div>
        </div>
      </section>

      <section className="stats-strip"><div className="container stats-grid">{[["AR + EN", "لغات العمل"], ["AI + Human", "تحويل بشري واضح"], ["CRM", "سجل عميل موحد"], ["Audit", "سجل نشاط وصلاحيات"]].map(([value, label]) => <div key={label}><strong>{value}</strong><span>{label}</span></div>)}</div></section>

      <section id="platform" className="section platform-section"><div className="container">
        <SectionHead eyebrow="منصة واحدة" title="كل ما يحتاجه فريقك لتشغيل الذكاء الاصطناعي" text="من المحادثة الأولى إلى تنفيذ الإجراء وقياس النتيجة — في مساحة عمل موحدة." />
        <div className="feature-grid">{[
          { icon: MessagesSquare, title: "صندوق محادثات موحد", text: "اجمع واتساب وإنستغرام والبريد والموقع في مكان واحد مع سجل عميل كامل." },
          { icon: Bot, title: "منشئ وكلاء بلا برمجة", text: "درّب وكيلك على ملفاتك وسياساتك، وحدد نبرته وصلاحياته بخطوات واضحة." },
          { icon: Workflow, title: "أتمتة العمليات", text: "اربط المحادثات بالحجز والطلبات والمواعيد والتذاكر، مع تحويل ذكي للموظف." },
          { icon: CircleGauge, title: "تحليلات لحظية", text: "راقب الجودة ووقت الرد والتحويل ورضا العملاء من لوحات قابلة للتنفيذ." },
        ].map((item) => <article className="feature-card" key={item.title}><span className="feature-icon"><item.icon /></span><h3>{item.title}</h3><p>{item.text}</p><a href="/platform">استكشف الميزة <ArrowLeft /></a></article>)}</div>
      </div></section>

      <section id="solutions" className="section demo-section"><div className="container demo-grid">
        <div className="demo-copy"><span className="eyebrow"><CircleGauge /> تشغيل واضح</span><h2>تابع كل محادثة وقرار ونتيجة لحظة بلحظة.</h2><p>مساحة عمل مصممة لفرق خدمة العملاء والمبيعات والعمليات، مع شفافية كاملة لما ينفذه الوكيل.</p><ul><li><Check /> تعيين تلقائي حسب القسم والأولوية</li><li><Check /> مراجعة بشرية للحالات الحساسة</li><li><Check /> تقارير أداء لكل وكيل وقناة</li></ul><Button className="primary-button large" onClick={() => setDemoOpen(true)}>جرّب لوحة التشغيل</Button></div>
        <div className="dashboard-shell"><Tabs defaultValue="inbox" dir="rtl"><TabsList className="dashboard-tabs"><TabsTrigger value="inbox">صندوق موحد</TabsTrigger><TabsTrigger value="agents">الوكلاء</TabsTrigger><TabsTrigger value="analytics">التحليلات</TabsTrigger></TabsList>
          <TabsContent value="inbox"><div className="dashboard-panel"><div className="metric-cards"><div><span>المحادثات اليوم</span><strong>1,248</strong><small>↑ 18% هذا الأسبوع</small></div><div><span>معدل الحل الآلي</span><strong>74%</strong><small>+6.2 نقطة</small></div><div><span>متوسط الرد</span><strong>4 ث</strong><small>أسرع من الهدف</small></div></div><div className="activity-card"><div className="activity-head"><strong>النشاط المباشر</strong><span><i /> يتحدث 38 عميلًا الآن</span></div>{channelMessages.map((m, index) => <div className="activity-row" key={m.name}><div className={`avatar avatar-${index + 1}`}>{m.name.slice(0, 1)}</div><div><strong>{m.name}</strong><span>{m.text}</span></div><em>{m.status}</em></div>)}</div></div></TabsContent>
          <TabsContent value="agents"><div className="dashboard-panel agent-panel">{[["وكيل المبيعات", "نشط", "82%"], ["وكيل الدعم", "نشط", "76%"], ["وكيل المواعيد", "تدريب", "61%"]].map(([name, status, rate], i) => <div className="agent-card" key={name}><span className={`agent-avatar agent-${i + 1}`}><Bot /></span><div><strong>{name}</strong><small>{status}</small></div><b>{rate}<small> أتمتة</small></b></div>)}</div></TabsContent>
          <TabsContent value="analytics"><div className="dashboard-panel analytics-panel"><div className="chart-title"><strong>المحادثات المنجزة</strong><span>آخر 7 أيام</span></div><div className="bars">{[48, 62, 55, 78, 69, 91, 84].map((h, i) => <div key={i}><i style={{ height: `${h}%` }} /><span>{["س", "ح", "ن", "ث", "ر", "خ", "ج"][i]}</span></div>)}</div></div></TabsContent>
        </Tabs></div>
      </div></section>

      <section id="sectors" className="section sectors-section"><div className="container"><SectionHead eyebrow="حلول لكل قطاع" title="وكيل يفهم طبيعة عملك" text="مسارات جاهزة قابلة للتخصيص، مع كامل المرونة لسياسات وإجراءات كل منشأة." /><div className="sectors-grid">{sectors.map((sector, index) => <article className={`sector-card ${sector.color}`} key={sector.title}><div className="sector-top"><span className="sector-icon"><sector.icon /></span><div><strong>AI</strong><small>قالب قطاعي</small></div></div><h3>{sector.title}</h3><p>{sector.text}</p><span className="uses-label">أهم حالات الاستخدام</span><ul>{sector.points.map((point) => <li key={point}>{point}</li>)}</ul><a href={`/industries/${["ecommerce", "healthcare-admin", "real-estate", "education", "automotive", "travel"][index]}`}>اعرف المزيد <ArrowLeft /></a></article>)}</div></div></section>

      <section className="section integrations-section"><div className="container integrations-grid"><div><span className="eyebrow"><Zap /> تكامل مباشر</span><h2>قنواتك وأنظمتك تعمل معًا.</h2><p>اربط نقاط التواصل والعمليات الحالية دون تغيير أدوات فريقك.</p></div><div className="integration-orbit">{[[MessageCircle, "WhatsApp"], [MessagesSquare, "Instagram"], [Send, "Telegram"], [Store, "Shopify"], [CalendarCheck, "Calendar"], [BriefcaseBusiness, "CRM"]].map(([Icon, label], index) => { const IconComp = Icon as typeof MessageCircle; return <span className={`integration integration-${index + 1}`} key={label as string}><IconComp /><b>{label as string}</b></span>; })}<div className="orbit-core"><Sparkles /><strong>NEXORA</strong></div></div></div></section>

      <section id="success" className="section success-section"><div className="container"><SectionHead eyebrow="تطبيقات عملية" title="من المشكلة إلى سير عمل واضح" text="نماذج توضيحية معلّمة بوضوح تشرح كيف يمكن تطبيق NEXORA دون اختلاق أسماء عملاء أو نتائج رقمية." /><div className="case-card"><div className="case-story"><span className="case-brand"><Store /> نموذج توضيحي — ليس قصة عميل فعلية</span><h3>شاهد المشكلة والحل والوكلاء وسير العمل والنتيجة في رحلة واحدة.</h3><p>استكشف نماذج السفر والعقارات والمقاولات والتجارة الإلكترونية والسيارات والتعليم، مع ضوابط واضحة للتكاملات والتحويل البشري.</p><a className="primary-button" href="/success-stories">استكشف نماذج الاستخدام <ArrowLeft /></a></div><div className="case-results">{[["المشكلة", "ما الذي يحتاج إلى تنظيم؟"], ["Workflow", "كيف تنتقل العملية؟"], ["النتيجة", "وصف واضح بلا أرقام مختلقة"]].map(([value, label]) => <div key={label}><strong>{value}</strong><span>{label}</span></div>)}</div></div></div></section>

      <section id="pricing" className="section pricing-section"><div className="container"><SectionHead eyebrow="أسعار بلا افتراضات" title="اعرف السعر والحدود قبل الاشتراك" text="صفحة مستقلة تعرض فقط الخطط والأسعار والخصومات التي اعتمدتها الإدارة فعليًا." /><div className="case-card"><div className="case-story"><span className="case-brand"><BriefcaseBusiness /> تسعير مُدار من النظام</span><h3>شهري أو سنوي، حدود واضحة، وضريبة موضحة قبل أي خطوة.</h3><p>قارن الباقات، احسب احتياجك، وافهم AI Credits وسياسة تجاوز الحدود دون رسوم مخفية أو خصومات وهمية.</p><a className="primary-button" href="/pricing">استكشف الأسعار <ArrowLeft /></a></div><div className="case-results">{[["الخطط", "تنشرها الإدارة فقط"], ["الحدود", "تطبق على الخادم"], ["الفوترة", "لا تبدأ دون مزود متصل"]].map(([value, label]) => <div key={label}><strong>{value}</strong><span>{label}</span></div>)}</div></div></div></section>

      <section className="section faq-section"><div className="container faq-grid"><div><span className="eyebrow"><Headphones /> أسئلة شائعة</span><h2>إجابات واضحة قبل أن تبدأ.</h2><p>وإذا احتجت تفاصيل أكثر، فريقنا يساعدك في تصميم أول وكيل.</p></div><Accordion type="single" collapsible className="faq-list" dir="rtl">{[
        ["هل أحتاج مبرمجًا لإنشاء الوكيل؟", "لا. يمكنك إضافة المعرفة وتحديد المهام والقنوات من واجهة مرئية، مع إمكان التخصيص التقني للعمليات المتقدمة."],
        ["هل تدعم المنصة اللغة العربية؟", "نعم، تدعم العربية ولهجاتها إلى جانب لغات متعددة، ويمكن تحديد نبرة وهوية مختلفة لكل وكيل."],
        ["متى يحوّل الوكيل المحادثة لموظف؟", "تحدد أنت قواعد التحويل؛ مثل طلب العميل، انخفاض الثقة، كلمات حساسة، أو الحاجة إلى صلاحية بشرية."],
        ["هل يمكن ربط أنظمتنا الحالية؟", "نعم، عبر التكاملات الجاهزة وواجهات API والويب هوك لربط CRM والمتاجر والمواعيد والأنظمة الداخلية."],
      ].map(([q, a], i) => <AccordionItem value={`item-${i}`} key={q}><AccordionTrigger>{q}</AccordionTrigger><AccordionContent>{a}</AccordionContent></AccordionItem>)}</Accordion></div></section>

      <section id="contact" className="section contact-section"><div className="container contact-grid"><div className="contact-copy"><span className="eyebrow"><CalendarCheck /> مسارات تواصل واضحة</span><h2>لنبدأ من احتياج عملك.</h2><p>اختر المبيعات أو طلب العرض أو المؤسسة أو الدعم أو الشراكات، وسيحفظ NEXORA طلبك ويوجهه للفريق المناسب.</p><div className="contact-points"><span><Zap /> توجيه ذكي</span><span><ShieldCheck /> تحقق وحماية</span><span><Languages /> عربي وإنجليزي</span></div></div><div className="contact-form-card"><div className="success-state"><MessageCircle /><h3>مركز تواصل متكامل</h3><p>النموذج الفعلي ينشئ رقمًا مرجعيًا وLead أو Ticket حسب نوع الطلب.</p><a className="primary-button large" href="/contact?intent=sales">اختر سبب التواصل <ArrowLeft /></a></div></div></div></section>

      <footer><div className="container footer-grid"><div><Logo /><p>وكلاء ذكاء اصطناعي يفهمون عملك وينفذون العمليات عبر قنواتك.</p></div><div><strong>المنصة</strong><a href="/platform">المزايا</a><a href="/solutions">الحلول</a><a href="/pricing">الأسعار</a></div><div><strong>الحلول</strong><a href="/industries">القطاعات</a><a href="/success-stories">قصص النجاح</a><a href="#contact">تواصل معنا</a></div><div><strong>الثقة</strong><span>حماية البيانات</span><span>صلاحيات الفرق</span><span>سجل التدقيق</span></div></div><div className="container footer-bottom"><span>© 2026 NEXORA AI. جميع الحقوق محفوظة.</span><span>منصة مستقلة لخدمة جميع القطاعات</span></div></footer>

      <button className="floating-chat" onClick={() => setChatOpen(true)} aria-label="تحدث مع الوكيل"><MessageCircle /><span>اسأل الوكيل</span></button>

      <Dialog open={chatOpen} onOpenChange={setChatOpen}><DialogContent className="chat-dialog" dir="rtl"><DialogHeader><DialogTitle>جرّب وكيل NEXORA</DialogTitle><DialogDescription>اكتب طبيعة نشاطك أو العملية التي تريد أتمتتها.</DialogDescription></DialogHeader><div className="demo-messages">{chatMessages.map((m, i) => <p key={i} className={m.from === "bot" ? "demo-bot" : "demo-user"}>{m.from === "bot" && <Sparkles />}{m.text}</p>)}</div><form className="demo-chat-form" onSubmit={sendChat}><Input value={chatText} onChange={(e) => setChatText(e.target.value)} placeholder="مثال: لدي عيادة وأريد حجز المواعيد" aria-label="رسالة للوكيل" /><Button type="submit" className="primary-button" size="icon"><Send /></Button></form></DialogContent></Dialog>

      <Dialog open={demoOpen} onOpenChange={setDemoOpen}><DialogContent className="walkthrough-dialog" dir="rtl"><DialogHeader><DialogTitle>رحلة الوكيل في 4 خطوات</DialogTitle><DialogDescription>كيف تتحول رسالة العميل إلى إجراء منجز داخل NEXORA.</DialogDescription></DialogHeader><div className="walkthrough-steps">{[[MessageCircle, "1", "يستقبل", "يجمع الرسائل من جميع القنوات"], [Bot, "2", "يفهم", "يحدد النية ويبحث في معرفة المنشأة"], [Zap, "3", "ينفذ", "يجري الحجز أو الطلب أو التحديث"], [Headphones, "4", "يصعّد", "يسلم الحالة الخاصة مع ملخص كامل"]].map(([Icon, num, title, text]) => { const IconComp = Icon as typeof Bot; return <div key={num as string}><span><IconComp /></span><b>{num as string}. {title as string}</b><p>{text as string}</p></div>; })}</div><Button className="primary-button large" onClick={() => { window.location.href = "/create-agent"; }}>فتح لوحة المنصة</Button></DialogContent></Dialog>
    </main>
  );
}