/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;

/* ============== i18n ============== */
const T = {
  ar: {
    nav_products: "المنتجات", nav_features: "لماذا أوتمكس", nav_pricing: "الأسعار",
    nav_dashboard: "لوحة التحكم", nav_docs: "التوثيق", nav_about: "من نحن", nav_blog: "المدونة", nav_contact: "تواصل معنا",
    btn_login: "تسجيل الدخول", btn_trial: "احصل على عرض سعر مخصص",
    prod_cta_demo: "احجز تجربة حية", prod_cta_details: "التفاصيل والأسعار",
    hero_pill: "داخل المملكة · متوافق مع PDPL · جاهز للزكاة والضريبة",
    hero_h1_a: "أتمتة عمليات شركتك", hero_h1_b: "بوكلاء ذكاء اصطناعي يعملون نيابةً عنك.",
    hero_lead: "كل منتج هو نظام ذكاء اصطناعي متخصص — مبني مسبقاً، ومهيّأ بالكامل للسوق السعودي، ومتكامل مع الأنظمة التي تعتمد عليها اليوم.",
    hero_cta1: "تصفّح المنتجات", hero_cta2: "احصل على عرض سعر مخصص",
    stat_agents: "وكلاء جاهزون", stat_payback: "متوسط استرداد التكلفة",
    stat_margin: "هامش الربح الإجمالي", stat_nrr: "الاحتفاظ بالعملاء",
    flow_title: "كيف يعمل الوكيل", flow_in: "المدخلات", flow_agent: "وكيل أوتمكس", flow_out: "المخرجات",
    sec_products_eyebrow: "وحدة الأتمتة الذكية",
    sec_products_h: "لكل عملية وكيلها المتخصص — ولشركتك منظومة واحدة.",
    sec_products_d: "كل وكيل في أوتمكس مصمَّم لمهمة واحدة يُتقنها — استقبال الطلبات، أو معالجة الفواتير، أو تحليل البيانات. اشتغل وكلاء متعدّدون معاً، وستحصل على فريق رقمي متكامل بثقة عالية وأمان مؤسسي.",
    sec_features_eyebrow: "لماذا أوتمكس؟",
    sec_features_h: "لماذا أوتمكس هو الخيار المعتمد لفرق المالية والعمليات؟",
    sec_features_d: "خمسة أسباب جوهرية تجعل أوتمكس البنية التحتية المعتمدة للأتمتة الذكية في المنشآت السعودية — التزام تنظيمي، شفافية مالية، وكفاءة تشغيلية مُثبتة.",
    sec_pricing_eyebrow: "خطط مرنة",
    sec_pricing_h: "اختر الباقة المناسبة لحجم عملياتك — وارتقِ معنا.",
    sec_pricing_d: "الأسعار شاملة ضريبة القيمة المضافة · خصم على الدفع السنوي.",
    monthly: "شهري", annual: "سنوي", save: "−١٧٪",
    vat_inclusive: "شامل الضريبة",
    starter: "البداية", growth: "النمو", enterprise: "المؤسسات",
    starter_sub: "تشغيل ذاتي · جاهز خلال ٧ أيام",
    growth_sub: "تنفيذ بإشراف فريقنا · ٣ أيام · الأكثر طلباً",
    enterprise_sub: "تنفيذ مخصّص · أسبوعان · SLA ٩٩٫٩٥٪",
    most_popular: "الأكثر شهرة", per_month: "/ شهرياً", sar: "ر.س",
    cta_trial: "اشترك الآن", cta_sales: "اشتر الآن", cta_subscribe: "اشترك الآن",
    perks: ["✓ إلغاء الاشتراك في أي وقت","✓ خصم ضمّ المنتجات ١٠–١٨٪","✓ فواتير ضريبية متوافقة مع زاتكا","✓ بنية تحتية داخل المملكة"],
    calc_eyebrow: "احسب توفيرك",
    calc_h: "كم ستوفر شركتك مع أوتمكس؟",
    calc_q: "كم فاتورة تعالجها شركتك شهرياً؟",
    calc_recommended: "الباقة الموصى بها",
    calc_manual: "تكلفتك الحالية اليدوية (تقديرياً)",
    calc_otmix: "تكلفة أوتمكس شهرياً",
    calc_savings: "توفيرك السنوي المتوقّع",
    calc_payback: "استرداد التكلفة خلال",
    calc_payback_unit: "يوماً",
    calc_cta: "احصل على عرض مخصّص لحجمك",
    calc_note: "*تقديرات مبنية على متوسط ٨ ر.س لمعالجة الفاتورة اليدوية (المالية، الوقت، الأخطاء).",
    sec_dash_eyebrow: "لوحة تحكم ذكية",
    sec_dash_h: "رؤية كاملة لأداء كل وكيل — بأرقام تتحدّث.",
    sec_dash_d: "العائد، الإنتاجية، التكلفة، والاستثناءات — كلها في لوحة واحدة. حدّد ما يحتاج تدخّلك، واترك الباقي للوكلاء.",
    open_admin: "استعرض اللوحة الكاملة",
    closing_h: "ابدأ بوكيل واحد، ووفّر تكلفة موظف كامل قبل نهاية الفصل.",
    closing_p: "أكثر من ٢٥٠ منشأة سعودية تُشغِّل وكلاء أوتمكس اليوم — تحرّر فرقها من المهام المتكرّرة، وتُوفّر ٤٠٪+ من تكاليفها التشغيلية. ابدأ بعملية واحدة، شغِّلها خلال أيام، واسترد تكلفتها في أقل من ٩٠ يوماً.",
    motto: "",
    email_ph: "بريدك المهني — example@yourcompany.sa",
    submit_trial: "احجز عرضاً مخصّصاً",
    closing_stats: [["+٢٥٠","منشأة سعودية تثق بنا"],["٤٠٪+","متوسط التوفير التشغيلي"],["<٩٠ يوم","استرداد التكلفة"],["٩٩٫٩٪","دقة المعالجة"]],
    foot_tagline: "منصّة الوكلاء الذكية للشركات السعودية. بياناتك في الرياض، وقراراتك بيدك.",
    foot_products: "المنتجات", foot_company: "الشركة", foot_legal: "قانوني",
    foot_links: {
      products: [
        { name:"المالية", href:"index.html#products" },
        { name:"الموارد البشرية", href:"index.html#products" },
        { name:"المبيعات والتسويق", href:"index.html#products" },
        { name:"القانونية", href:"index.html#products" },
        { name:"حلول مؤسسية", href:"index.html#products" },
      ],
      company: [
        { name:"من نحن", href:"about.html" },
        { name:"المدونة", href:"blog.html" },
        { name:"تواصل معنا", href:"contact.html" },
      ],
      legal: [
        { name:"سياسة الخصوصية", href:"privacy.html" },
        { name:"الشروط والأحكام", href:"#" },
        { name:"سياسة الكوكيز", href:"#" },
      ],
    },
    copyright: "© ٢٠٢٦ شركة أوتمكس · الرياض، المملكة العربية السعودية · س.ت ٧٠٣٨٣٥٥٨٨٤ · جميع الحقوق محفوظة",
    products: [
      { code: "P1", category: "finance",    name: "أخصائي الحسابات الدائنة المؤتمت", cat: "المالية · الذمم الدائنة", desc: "يُسجّل فواتيرك في ERP خلال ثوانٍ من تيليجرام مباشرة. متوافق مع زاتكا المرحلة الثانية.", unit: "١٬٠٠٠ فاتورة / شهر" },
      { code: "P2", category: "sales",      name: "وكيل مبيعات الواتساب الذكي", cat: "المبيعات · تجارة واتساب", desc: "يستقبل طلبات عملائك على واتساب ٢٤/٧ بلهجة طبيعية، ويُرسلها لكاشيرك (فودكس، مدى) تلقائياً.", unit: "٥٠٠ طلب / شهر", tag: "الأكثر طلباً" },
      { code: "P3", category: "sales",      name: "خبير العناية بتجربة العملاء", cat: "التسويق · جوجل والتقييمات", desc: "يردّ على كل تقييم جوجل بصوت علامتك خلال ساعة، ويُحوّل كل شكوى لتذكرة CRM مباشرة.", unit: "٢٠٠ تقييم / شهر" },
      { code: "P4", category: "finance",    name: "محاسب المطابقة الذكي", cat: "المالية · مطابقة الحسابات", desc: "يُطابق حساباتك البنكية تلقائياً ويُغلق دفاترك أسبوعاً قبل الموعد. جاهز لـساما المصرفية المفتوحة.", unit: "١٬٠٠٠ معاملة / شهر" },
      { code: "P5", category: "hr",         name: "مستشار إدارة الأجور والامتثال", cat: "الموارد البشرية · رواتب مُداد", desc: "يحسب الرواتب، يُحدّث GOSI، ويرفع WPS عبر مُداد — بنقرة موافقة واحدة.", unit: "حتى ٥٠ موظف" },
      { code: "P6", category: "hr",         name: "وكيل استقطاب المواهب الذكي", cat: "الموارد البشرية · التوظيف", desc: "يفرز السير الذاتية، يُجري المقابلات الأولية، ويُكمل إجراءات الانضمام مع مراعاة نسب السعودة.", unit: "١٠٠ مرشح / شهر" },
      { code: "P7", category: "legal",      name: "محلل العقود والامتثال القانوني", cat: "القانوني · ذكاء العقود", desc: "يقرأ كل عقد قبل أن يقرأك، ويستخرج أكثر من ٦٠ حقلاً، يُصنّف المخاطر، ويُنبّهك قبل التجديد بشهر.", unit: "٥٠ عقد / شهر" },
      { code: "P8", category: "sales",      name: "مدير التسويق الذكي", cat: "التسويق · إعلانات ومحتوى", desc: "يُؤلّف محتواك التسويقي، يُدير حملاتك المدفوعة، ويُجدول منشورات السوشيال — ثنائي اللغة وملتزم بهويتك.", unit: "٣٠ محتوى / شهر" },
      { code: "P9", category: "enterprise", name: "مركز المعرفة المؤسسية الذكي", cat: "حلول مؤسسية · شات بوت RAG", desc: "يُجيب على أسئلة موظفيك وعملائك من مستنداتك الفعلية مع توثيق المصدر — صفر هلوسة.", unit: "٥٬٠٠٠ محادثة / شهر" },
    ],
    product_categories: {
      finance:    { title: "المالية",          icon: "finance" },
      hr:         { title: "الموارد البشرية",  icon: "hr" },
      sales:      { title: "المبيعات والتسويق", icon: "sales" },
      legal:      { title: "القانونية",         icon: "legal" },
      enterprise: { title: "حلول مؤسسية",      icon: "enterprise" },
    },
    category_order: ["finance","hr","sales","legal","enterprise"],
    features: [
      { num:"٠١", stat:"PDPL", title:"التزام كامل بالأنظمة السعودية", body:"يتوافق توافقاً تاماً مع زاتكا (المرحلة الثانية)، مُداد، قوى، ونظام حماية الأجور (WPS) — جاهز للتدقيق من اليوم الأول.", artKind:"ksa", green:true, span:"feat-1" },
      { num:"٠٢", stat:"FLAT", title:"شفافية التكاليف (Flat-Rate)", body:"يقدّم باقات ثابتة تمنحك وضوحاً مالياً كاملاً، وتقلّ تكلفة الوحدة كلما نمت أعمالك — بلا مفاجآت في الفاتورة.", artKind:"replace", span:"feat-2" },
      { num:"٠٣", stat:"٩٩٪", title:"كفاءة تشغيلية فورية", body:"يوفّر جهد ١ إلى ٥ موظفين بدوام كامل، ويُعالج المهام بدقة تصل إلى ٩٩٪ — تنفيذ مباشر دون انتظار.", artKind:"models", span:"feat-3" },
      { num:"٠٤", stat:"KSA", title:"أمان البيانات وسيادتها", body:"يستضيف ويعالج بياناتك محلياً داخل المملكة، ويضمن خصوصية معلوماتك المالية وفق PDPL وإطار ساما السيبراني.", artKind:"integrations", span:"feat-4" },
      { num:"٠٥", stat:"9-in-1", title:"منصّة واحدة متكاملة", body:"يُدير المالية والموارد البشرية والقانونية في مكان واحد — يمنع تشتّت البيانات ويُوحّد قرارات شركتك تحت سقف واحد.", artKind:"audit", span:"feat-5" },
    ],
    tier_titles: { ap:"الحسابات الدائنة", order:"مبيعات الواتساب", reputation:"تجربة العملاء", recon:"المطابقة البنكية", payroll:"إدارة الأجور", talent:"استقطاب المواهب", contracts:"تحليل العقود", marketing:"التسويق الرقمي", knowledge:"المعرفة المؤسسية" },
  },
  en: {
    nav_products:"Products", nav_features:"Why Otmix", nav_pricing:"Pricing",
    nav_dashboard:"Dashboard", nav_docs:"Docs", nav_about:"About", nav_blog:"Blog", nav_contact:"Contact",
    btn_login:"Sign in", btn_trial:"Get a custom quote",
    prod_cta_demo:"Book a live demo", prod_cta_details:"Details & pricing",
    hero_pill:"Data in KSA · PDPL compliant · ZATCA-ready",
    hero_h1_a:"Automate your business operations", hero_h1_b:"with AI agents that work for you.",
    hero_lead:"Each product is a specialized AI system — pre-built, fully tuned for the Saudi market, and integrated with the systems you rely on today.",
    hero_cta1:"Browse products", hero_cta2:"Get a custom quote",
    stat_agents:"Production agents", stat_payback:"Avg. payback period",
    stat_margin:"Gross margin", stat_nrr:"Net revenue retention",
    flow_title:"How an agent works", flow_in:"Inputs", flow_agent:"Otmix Agent", flow_out:"Outputs",
    sec_products_eyebrow:"The automation unit",
    sec_products_h:"A specialized agent for every process — one complete system for your business.",
    sec_products_d:"Every Otmix agent is built for one task it masters — taking orders, processing invoices, or analyzing data. Run several agents together, and you get a complete digital team with high confidence and enterprise-grade security.",
    sec_features_eyebrow:"Why Otmix?",
    sec_features_h:"Why Otmix is the trusted choice for finance & operations teams.",
    sec_features_d:"Five fundamental reasons Otmix is the trusted automation infrastructure for Saudi enterprises — regulatory compliance, financial transparency, and proven operational efficiency.",
    sec_pricing_eyebrow:"Flexible plans",
    sec_pricing_h:"Pick the tier that matches your volume — and grow with us.",
    sec_pricing_d:"All prices include VAT · Annual payment discount available.",
    monthly:"Monthly", annual:"Annual", save:"−17%",
    vat_inclusive:"VAT inclusive",
    starter:"Starter", growth:"Growth", enterprise:"Enterprise",
    starter_sub:"Self-serve · live in 7 days",
    growth_sub:"Implemented by our team · 3 days · most popular",
    enterprise_sub:"Custom rollout · 2 weeks · 99.95% SLA",
    most_popular:"Most popular", per_month:"/ month", sar:"SAR",
    cta_trial:"Subscribe now", cta_sales:"Buy now", cta_subscribe:"Subscribe now",
    perks:["✓ Cancel anytime","✓ Bundle 10–18% off","✓ ZATCA tax invoices","✓ KSA data residency"],
    calc_eyebrow: "Calculate your savings",
    calc_h: "How much will your company save with Otmix?",
    calc_q: "How many invoices does your company process monthly?",
    calc_recommended: "Recommended plan",
    calc_manual: "Your current manual cost (est.)",
    calc_otmix: "Otmix cost / month",
    calc_savings: "Estimated annual savings",
    calc_payback: "Payback in",
    calc_payback_unit: "days",
    calc_cta: "Get a quote for your volume",
    calc_note: "*Estimates based on SAR 8 average per manual invoice (labor, time, errors).",
    sec_dash_eyebrow:"Smart admin console",
    sec_dash_h:"Full visibility into every agent — with numbers that speak.",
    sec_dash_d:"ROI, throughput, cost, and exceptions — all in one console. Decide what needs your attention, and leave the rest to the agents.",
    open_admin:"Explore the full console",
    closing_h:"Start with one agent — save the cost of a full employee before next quarter.",
    closing_p:"250+ Saudi enterprises run Otmix agents today — freeing teams from repetitive work and cutting operational costs by 40%+. Pick one process, launch it in days, and recover your investment in under 90 days.",
    motto:"",
    email_ph:"Work email — name@yourcompany.sa",
    submit_trial:"Book a custom demo",
    closing_stats:[["+250","Saudi enterprises trust us"],["40%+","Avg. operational savings"],["<90 days","Payback period"],["99.9%","Processing accuracy"]],
    foot_tagline:"The agentic AI platform for Saudi enterprises. Data in Riyadh — decisions in your hands.",
    foot_products:"Products", foot_company:"Company", foot_legal:"Legal",
    foot_links: {
      products:[
        { name:"Finance", href:"index.html#products" },
        { name:"Human Resources", href:"index.html#products" },
        { name:"Sales & Marketing", href:"index.html#products" },
        { name:"Legal", href:"index.html#products" },
        { name:"Enterprise Solutions", href:"index.html#products" },
      ],
      company:[
        { name:"About", href:"about.html" },
        { name:"Blog", href:"blog.html" },
        { name:"Contact", href:"contact.html" },
      ],
      legal:[
        { name:"Privacy Policy", href:"privacy.html" },
        { name:"Terms & Conditions", href:"#" },
        { name:"Cookies Policy", href:"#" },
      ],
    },
    copyright:"© 2026 Otmix Co. · Riyadh, Saudi Arabia · CR 7038355884 · All rights reserved",
    products: [
      { code:"P1", category:"finance",    name:"Accounts Payable Automation Specialist", cat:"Finance · Accounts Payable", desc:"Files invoices into your ERP in seconds — straight from Telegram. ZATCA Phase 2 compliant.", unit:"1,000 invoices / month" },
      { code:"P2", category:"sales",      name:"Smart WhatsApp Sales Agent", cat:"Sales · WhatsApp commerce", desc:"Takes customer orders on WhatsApp 24/7 in natural language, and routes them to your POS (Foodics, mada) automatically.", unit:"500 orders / month", tag:"Top seller" },
      { code:"P3", category:"sales",      name:"Customer Experience Care Expert", cat:"Marketing · Google & reviews", desc:"Replies to every Google review in your brand voice within an hour, and converts complaints into CRM tickets instantly.", unit:"200 reviews / month" },
      { code:"P4", category:"finance",    name:"Smart Reconciliation Accountant", cat:"Finance · Bank reconciliation", desc:"Auto-reconciles your bank accounts and closes books a week early. SAMA Open Banking ready.", unit:"1,000 txns / month" },
      { code:"P5", category:"hr",         name:"Payroll & Compliance Advisor", cat:"HR · Mudad payroll", desc:"Calculates payroll, syncs GOSI, and files WPS via Mudad — with one approval click.", unit:"Up to 50 employees" },
      { code:"P6", category:"hr",         name:"Smart Talent Acquisition Agent", cat:"HR · Recruiting & onboarding", desc:"Screens CVs, runs first-round interviews, and completes onboarding with Saudization-aware shortlisting.", unit:"100 candidates / month" },
      { code:"P7", category:"legal",      name:"Contracts & Legal Compliance Analyst", cat:"Legal · Contract intelligence", desc:"Reads every contract before it reads you. 60+ field extraction, risk scoring, renewal radar.", unit:"50 contracts / month" },
      { code:"P8", category:"sales",      name:"Smart Marketing Director", cat:"Marketing · Ads & content", desc:"Copywriter + paid-ads manager + social manager — one bilingual brand-locked agent.", unit:"30 pieces / month" },
      { code:"P9", category:"enterprise", name:"Smart Enterprise Knowledge Hub", cat:"Enterprise · RAG bot", desc:"Answers employee and customer questions from your actual documents — always cited, zero hallucinations.", unit:"5,000 chats / month" },
    ],
    product_categories: {
      finance:    { title: "Finance",            icon: "finance" },
      hr:         { title: "Human Resources",    icon: "hr" },
      sales:      { title: "Sales & Marketing",  icon: "sales" },
      legal:      { title: "Legal",              icon: "legal" },
      enterprise: { title: "Enterprise Solutions", icon: "enterprise" },
    },
    category_order: ["finance","hr","sales","legal","enterprise"],
    features: [
      { num:"01", stat:"PDPL", title:"Full Saudi regulatory compliance", body:"Fully aligned with ZATCA (Phase 2), Mudad, Qiwa, and the Wage Protection System (WPS) — audit-ready from day one.", artKind:"ksa", green:true, span:"feat-1" },
      { num:"02", stat:"FLAT", title:"Cost transparency (Flat-Rate)", body:"Delivers fixed-tier pricing that gives you complete financial clarity, with unit cost dropping as your business scales — no billing surprises.", artKind:"replace", span:"feat-2" },
      { num:"03", stat:"99%", title:"Instant operational efficiency", body:"Replaces the effort of 1 to 5 full-time employees and processes tasks with accuracy up to 99% — instant execution, zero waiting.", artKind:"models", span:"feat-3" },
      { num:"04", stat:"KSA", title:"Data security & sovereignty", body:"Hosts and processes your data locally inside the Kingdom, securing your financial information under PDPL and the SAMA cyber framework.", artKind:"integrations", span:"feat-4" },
      { num:"05", stat:"9-in-1", title:"One integrated platform", body:"Manages finance, HR, and legal operations in one place — eliminates data silos and unifies your company's decisions under one roof.", artKind:"audit", span:"feat-5" },
    ],
    tier_titles: { ap:"Accounts Payable", order:"WhatsApp Sales", reputation:"Customer Experience", recon:"Bank Reconciliation", payroll:"Payroll Management", talent:"Talent Acquisition", contracts:"Contract Analysis", marketing:"Digital Marketing", knowledge:"Enterprise Knowledge" },
  }
};

const PRICES = {
  ap:        { starter:990, growth:2990, enterprise:8990,
    quotas: { ar:["١٬٠٠٠ فاتورة شهرياً","٥٬٠٠٠ فاتورة شهرياً","٢٠٬٠٠٠ فاتورة شهرياً"],
              en:["1,000 invoices / month","5,000 invoices / month","20,000 invoices / month"] },
    feats:  { ar:[
      ["استقبال عبر تيليجرام","OCR عربي/إنجليزي","ربط ERP واحد","تقرير بريدي يومي","زمن تشغيل ٩٩٪"],
      ["كيانات متعددة","سير اعتماد","ربط ERP اثنين","زاتكا المرحلة ٢","تنبيهات Slack/Teams"],
      ["SSO + SAML","API عام","SLA ٩٩٫٩٥٪","مدير نجاح مخصص","تثبيت داخلي"]],
              en:[
      ["Telegram intake","OCR (Ar/En)","1 ERP connector","Daily email digest","99% uptime"],
      ["Multi-entity","Approval workflow","2 ERP connectors","ZATCA Phase 2","Slack/Teams alerts"],
      ["SSO + SAML","Public API","99.95% SLA","Dedicated CSM","On-prem option"]] }
  },
  order:     { starter:690, growth:2490, enterprise:6990,
    quotas: { ar:["فرع واحد · ٥٠٠ طلب/شهر","حتى ٣ فروع · ٣٬٠٠٠/شهر","غير محدود · ١٥٬٠٠٠/شهر"],
              en:["1 location · 500 orders/mo","Up to 3 · 3,000/mo","Unlimited · 15,000/mo"] },
    feats: { ar:[
      ["واتساب بزنس","ربط نقطة بيع واحدة","فهم ثنائي اللغة","دفع مدى","تحليلات أساسية"],
      ["برنامج ولاء","حملات ترويجية","Apple Pay + STC Pay","شرائح عملاء","تصدير لـ CRM"],
      ["أرقام مخصصة","وكيل صوتي (تجريبي)","لوحات لحظية","منطق بيع تكميلي مخصص","أولوية الدعم"]],
            en:[
      ["WhatsApp Business","1 POS connector","Bilingual NLU","mada checkout","Basic analytics"],
      ["Loyalty engine","Promo broadcasts","Apple Pay + STC Pay","Customer segments","CRM export"],
      ["Dedicated numbers","Voice agent (beta)","Real-time dashboards","Custom upsell logic","Priority support"]] }
  },
  knowledge: { starter:990, growth:2990, enterprise:7990,
    quotas: { ar:["نشر واحد · ٥٬٠٠٠ محادثة/شهر","٣ عمليات نشر · ٢٥٬٠٠٠/شهر","غير محدود · ١٠٠٬٠٠٠/شهر"],
              en:["1 deployment · 5,000 chats/mo","3 deployments · 25,000/mo","Unlimited · 100,000/mo"] },
    feats: { ar:[
      ["موقع أو Slack أو بريد","٥ موصلات محتوى","ردود ثنائية اللغة","توثيق المصدر","بيانات داخل المملكة"],
      ["متعدد القنوات","التقاط العملاء المحتملين","١٥ موصلاً","لوحة تحليلات","توجيه حسب الثقة"],
      ["SSO / SAML / RBAC","احتفاظ مخصص","مفاتيح تشفير يديرها العميل","API + Webhooks","SLA ٩٩٫٩٥٪"]],
            en:[
      ["Web OR Slack OR email","5 content connectors","Bilingual answers","Source citations","Data in KSA"],
      ["Multi-channel","Lead capture","15 connectors","Analytics dashboard","Confidence routing"],
      ["SSO / SAML / RBAC","Custom retention","Customer-managed keys","API + Webhooks","99.95% SLA"]] }
  },
  reputation:{ starter:490, growth:1490, enterprise:3990,
    quotas: { ar:["فرع واحد · ٢٠٠ تقييم/شهر","٥ فروع · ١٬٠٠٠/شهر","٢٠+ فرع · ٥٬٠٠٠/شهر"],
              en:["1 location · 200 reviews/mo","5 locations · 1,000/mo","20+ locations · 5,000/mo"] },
    feats: { ar:[
      ["ملف جوجل التجاري","ردود بصوت العلامة","تصنيف تلقائي","تقرير أسبوعي","دعم بالعربية"],
      ["تحويل الشكاوى إلى CRM","رصد منصة X","تحليل المشاعر","لوحة ثنائية اللغة","تنبيهات فورية"],
      ["SLA رد خلال أقل من ساعة","إدارة جميع المنصات","بوابة تصعيد للأزمات","تدريب على هوية العلامة","مدير نجاح مخصص"]],
            en:[
      ["Google Business","Brand-voice replies","Auto-classification","Weekly digest","Arabic support"],
      ["Complaint → CRM","X / Twitter monitor","Sentiment analysis","Bilingual dashboard","Real-time alerts"],
      ["<1m response SLA","All-platform inbox","Crisis escalation","Brand-voice training","Dedicated CSM"]] }
  },
  recon:     { starter:1490, growth:3990, enterprise:9990,
    quotas: { ar:["حساب واحد · ١٬٠٠٠ معاملة/شهر","٥ حسابات · ٥٬٠٠٠/شهر","غير محدود · ٥٠٬٠٠٠/شهر"],
              en:["1 account · 1,000 txns/mo","5 accounts · 5,000/mo","Unlimited · 50,000/mo"] },
    feats: { ar:[
      ["ربط بنك واحد","مطابقة أسبوعية","تصدير Excel","تقرير الإغلاق","دعم بالعربية"],
      ["ساما المصرفية المفتوحة","إغلاق يومي","سجل استثناءات","ربط ERP","تنبيهات Slack"],
      ["متعدد الكيانات","عملات متعددة","تدقيق لحظي","سير اعتماد","سجل تدقيق مُشفَّر"]],
            en:[
      ["1 bank connector","Weekly recon","Excel export","Close report","Arabic support"],
      ["SAMA Open Banking","Daily close","Exception ledger","ERP connector","Slack alerts"],
      ["Multi-entity","Multi-currency","Real-time audit","Approval workflow","Cryptographic audit log"]] }
  },
  payroll:   { starter:1990, growth:4990, enterprise:11990,
    quotas: { ar:["حتى ٥٠ موظف","حتى ٢٥٠ موظف","حتى ٢٬٠٠٠ موظف"],
              en:["Up to 50 employees","Up to 250 employees","Up to 2,000 employees"] },
    feats: { ar:[
      ["مُداد WPS","ربط GOSI","حساب تلقائي","قسائم رواتب PDF","دعم بالعربية"],
      ["تتبع الإجازات","جدولة الدوام","سير اعتماد","بوابة الموظف","تنبيهات Slack/Teams"],
      ["متعدد الكيانات","بدلات واستحقاقات","تدقيق نسب السعودة","تكامل SAP وأوراكل","مدير نجاح مخصص"]],
            en:[
      ["Mudad WPS","GOSI sync","Auto-calculation","PDF payslips","Arabic support"],
      ["Leave tracking","Schedule mgmt","Approval workflow","Employee portal","Slack/Teams alerts"],
      ["Multi-entity","Benefits & accruals","Saudization audit","SAP/Oracle/Aramco","Dedicated CSM"]] }
  },
  talent:    { starter:1290, growth:3990, enterprise:9990,
    quotas: { ar:["١٠٠ مرشح · ١٠ توظيفات/شهر","٥٠٠ مرشح · ٥٠ توظيفاً/شهر","٢٬٠٠٠ مرشح · ٢٠٠ توظيف/شهر"],
              en:["100 candidates · 10 hires/mo","500 candidates · 50 hires/mo","2,000 candidates · 200 hires/mo"] },
    feats: { ar:[
      ["فرز السير الذاتية","فلتر السعودة","مقابلات أولية","فحص المراجع","دعم بالعربية"],
      ["وصف وظيفي ذكي","بوابة المرشحين","لوحة المتقدمين","إجراءات الانضمام","ربط ATS"],
      ["تقييم الملاءمة الثقافية","تحليل المهارات","تدقيق أمني","SSO + SAML","مدير نجاح مخصص"]],
            en:[
      ["CV screening","Saudization filter","First-round chat","Reference checks","Arabic support"],
      ["Smart JD","Candidate portal","Applicant dashboard","Onboarding","ATS connector"],
      ["Culture fit","Skills mapping","Background screening","SSO + SAML","Dedicated CSM"]] }
  },
  contracts: { starter:1490, growth:4490, enterprise:11990,
    quotas: { ar:["٥٠ عقد/شهر","٢٥٠ عقداً/شهر","١٬٠٠٠ عقد/شهر"],
              en:["50 contracts/mo","250 contracts/mo","1,000 contracts/mo"] },
    feats: { ar:[
      ["استخراج ٦٠+ حقلاً","تصنيف المخاطر","تنبيهات التجديد","تلخيص عربي/إنجليزي","تخزين داخل المملكة"],
      ["مكتبة بنود","مقارنة الإصدارات","توقيع إلكتروني","ربط SharePoint","ربط Salesforce"],
      ["سير اعتماد","توجيه قانوني تلقائي","امتثال السياسات","مفاتيح تشفير يديرها العميل","مدير نجاح مخصص"]],
            en:[
      ["60+ field extraction","Risk scoring","Renewal radar","Bilingual summary","Storage in KSA"],
      ["Clause library","Version compare","E-signature","SharePoint connector","Salesforce connector"],
      ["Approval workflow","Auto legal-routing","Policy compliance","Customer-managed keys","Dedicated CSM"]] }
  },
  marketing: { starter:1490, growth:4490, enterprise:11990,
    quotas: { ar:["علامة واحدة · ٤ حملات · ٣٠ محتوى/شهر","٣ علامات · ١٥ حملة · ١٥٠ محتوى/شهر","علامات غير محدودة · ٥٠+ حملة · محتوى غير محدود"],
              en:["1 brand · 4 campaigns · 30 pieces/mo","3 brands · 15 campaigns · 150 pieces/mo","Unlimited brands · 50+ campaigns · unlimited content"] },
    feats: { ar:[
      ["محتوى ثنائي اللغة","إعلانات مدفوعة","جدولة منصات التواصل","هوية العلامة","دعم بالعربية"],
      ["وسائط + تصميم","اختبار A/B تلقائي","تحليلات CTR","ربط GA4","تصدير CRM"],
      ["تحسين الميزانية","تحليل المنافسين","ضبط نبرة العلامة","تدريب على دليل العلامة","مدير نجاح مخصص"]],
            en:[
      ["Bilingual content","Paid ads","Social scheduling","Brand identity","Arabic support"],
      ["Media + design","Auto A/B","CTR analytics","GA4 connector","CRM export"],
      ["Budget optimization","Competitor analysis","Brand voice tuning","Guidelines training","Dedicated CSM"]] }
  },
};

function fmtNum(n, lang){
  return lang === "ar" ? n.toLocaleString("ar-SA") : n.toLocaleString("en-US");
}

/* ============== UI atoms ============== */
const LogoFull = ({ height = 44, light = false }) => (
  <img src="assets/otmix-full.svg" alt="Otmix"
    style={{ height, width:"auto", display:"block",
      filter: light ? "brightness(0) invert(1)" : "none" }}/>
);
const Check = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
);
const Arrow = ({ size = 16, lang }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"
    style={{ transform: lang === "ar" ? "scaleX(-1)" : "none" }}>
    <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
  </svg>
);

/* ============== Hero automation flow visual ============== */
function FlowDiagram({ lang }) {
  const t = T[lang];
  const Node = ({x,y,label,sub,color,icon}) => (
    <g transform={`translate(${x},${y})`}>
      <rect x="-58" y="-22" width="116" height="44" rx="10" fill={color || "#171717"} stroke="#2a2a2a"/>
      <text x="0" y="-3" fontFamily="IBM Plex Sans Arabic" fontWeight="700" fontSize="12" textAnchor="middle" fill="#fff">{icon} {label}</text>
      <text x="0" y="13" fontFamily="IBM Plex Mono" fontSize="9" textAnchor="middle" fill="#888" letterSpacing="0.05em">{sub}</text>
    </g>
  );
  return (
    <svg viewBox="0 0 760 260" style={{width:"100%",height:"auto",display:"block"}}>
      <defs>
        <linearGradient id="flowLine" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#4bec42" stopOpacity="0.0"/>
          <stop offset="50%" stopColor="#4bec42" stopOpacity="0.9"/>
          <stop offset="100%" stopColor="#4bec42" stopOpacity="0.0"/>
        </linearGradient>
        <radialGradient id="agentGlow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#4bec42" stopOpacity="0.5"/>
          <stop offset="100%" stopColor="#4bec42" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <text x="380" y="22" fontFamily="IBM Plex Mono" fontSize="11" textAnchor="middle" fill="#666" letterSpacing="0.16em">{t.flow_title.toUpperCase()}</text>
      <text x="80" y="52" fontFamily="IBM Plex Mono" fontSize="10" textAnchor="middle" fill="#4bec42" letterSpacing="0.12em">{t.flow_in.toUpperCase()}</text>
      <Node x={80} y={90} label="WhatsApp" sub="messages" icon="💬"/>
      <Node x={80} y={150} label="Telegram" sub="invoices" icon="📷"/>
      <Node x={80} y={210} label="Email" sub="contracts" icon="📧"/>

      <circle cx="380" cy="150" r="80" fill="url(#agentGlow)"/>
      <circle cx="380" cy="150" r="44" fill="#080808" stroke="#4bec42" strokeWidth="2"/>
      <text x="380" y="146" fontFamily="IBM Plex Sans Arabic" fontWeight="700" fontSize="13" textAnchor="middle" fill="#4bec42">otmix</text>
      <text x="380" y="162" fontFamily="IBM Plex Mono" fontSize="9" textAnchor="middle" fill="#888">otmix-agent-core</text>
      <text x="380" y="52" fontFamily="IBM Plex Mono" fontSize="10" textAnchor="middle" fill="#4bec42" letterSpacing="0.12em">{t.flow_agent.toUpperCase()}</text>

      <text x="680" y="52" fontFamily="IBM Plex Mono" fontSize="10" textAnchor="middle" fill="#4bec42" letterSpacing="0.12em">{t.flow_out.toUpperCase()}</text>
      <Node x={680} y={90} label="Foodics" sub="POS sync"/>
      <Node x={680} y={150} label="Odoo ERP" sub="invoice posted"/>
      <Node x={680} y={210} label="Mudad" sub="WPS payroll"/>

      {/* Static lines */}
      {[90,150,210].map((y,i)=>(
        <g key={"in"+i}>
          <path d={`M 138 ${y} C 220 ${y}, 280 150, 336 150`} fill="none" stroke="#222" strokeWidth="1.5"/>
          <path d={`M 138 ${y} C 220 ${y}, 280 150, 336 150`} fill="none" stroke="url(#flowLine)" strokeWidth="2.5" strokeDasharray="3 7">
            <animate attributeName="stroke-dashoffset" from="0" to="-100" dur={`${2.5+i*0.5}s`} repeatCount="indefinite"/>
          </path>
        </g>
      ))}
      {[90,150,210].map((y,i)=>(
        <g key={"out"+i}>
          <path d={`M 424 150 C 480 150, 540 ${y}, 622 ${y}`} fill="none" stroke="#222" strokeWidth="1.5"/>
          <path d={`M 424 150 C 480 150, 540 ${y}, 622 ${y}`} fill="none" stroke="url(#flowLine)" strokeWidth="2.5" strokeDasharray="3 7">
            <animate attributeName="stroke-dashoffset" from="0" to="-100" dur={`${2.5+i*0.4}s`} repeatCount="indefinite" begin={`${i*0.3}s`}/>
          </path>
        </g>
      ))}
    </svg>
  );
}

/* ============== Product visuals ============== */
function ProdArt({ i }) {
  const C = "#4bec42", L = "#1c1c1c", D = "#080808";
  const arts = [
    // P1 AP - invoice + ERP
    <svg viewBox="0 0 220 110" key={i}><rect x="14" y="14" width="70" height="82" rx="6" fill="#fff" stroke="#e6e6e0"/><rect x="22" y="22" width="42" height="5" fill={C}/><rect x="22" y="34" width="54" height="3" fill="#ddd"/><rect x="22" y="42" width="48" height="3" fill="#ddd"/><rect x="22" y="50" width="54" height="3" fill="#ddd"/><rect x="22" y="58" width="40" height="3" fill="#ddd"/><rect x="22" y="80" width="30" height="8" rx="2" fill={D}/><path d="M88 55 L 130 55" stroke={C} strokeWidth="2" strokeDasharray="3 3"/><polygon points="128,51 136,55 128,59" fill={C}/><rect x="138" y="22" width="68" height="66" rx="6" fill={D}/><circle cx="172" cy="46" r="13" fill="none" stroke={C} strokeWidth="2"/><path d="M165 46 L 170 51 L 180 41" stroke={C} strokeWidth="2.5" fill="none" strokeLinecap="round"/><text x="172" y="74" fontSize="7" fontFamily="monospace" textAnchor="middle" fill={C}>ERP-OK</text></svg>,
    // P2 Order - WhatsApp
    <svg viewBox="0 0 220 110" key={i}><circle cx="48" cy="55" r="32" fill="#25D366"/><path d="M40 50 c -2 -8 6 -16 14 -16 c 8 0 14 6 14 14 c 0 6 -4 12 -10 14 l 2 6 l -8 -4 c -7 1 -12 -4 -12 -10z" fill="#fff"/><rect x="100" y="22" width="106" height="22" rx="11" fill="#fff" stroke="#e6e6e0"/><text x="153" y="37" fontSize="9" textAnchor="middle" fill="#333" fontFamily="IBM Plex Sans Arabic">برجر دجاج 🍔</text><rect x="100" y="50" width="86" height="22" rx="11" fill={D}/><text x="143" y="65" fontSize="9" textAnchor="middle" fill={C} fontFamily="IBM Plex Sans Arabic">+ بطاطس؟</text><rect x="100" y="78" width="64" height="20" rx="10" fill={C}/><text x="132" y="91" fontSize="8" textAnchor="middle" fill="#000" fontFamily="IBM Plex Sans Arabic" fontWeight="700">دفع مدى ✓</text></svg>,
    // P3 Reputation - stars
    <svg viewBox="0 0 220 110" key={i}><g transform="translate(110,40)"><polygon points="0,-22 5,-7 21,-7 8,3 13,18 0,9 -13,18 -8,3 -21,-7 -5,-7" fill={C}/></g><g transform="translate(64,52)"><polygon points="0,-14 4,-4 14,-4 6,2 9,11 0,5 -9,11 -6,2 -14,-4 -4,-4" fill={C} opacity="0.7"/></g><g transform="translate(156,52)"><polygon points="0,-14 4,-4 14,-4 6,2 9,11 0,5 -9,11 -6,2 -14,-4 -4,-4" fill={C} opacity="0.7"/></g><g transform="translate(34,76)"><polygon points="0,-9 3,-3 10,-3 4,1 6,8 0,4 -6,8 -4,1 -10,-3 -3,-3" fill={C} opacity="0.4"/></g><g transform="translate(186,76)"><polygon points="0,-9 3,-3 10,-3 4,1 6,8 0,4 -6,8 -4,1 -10,-3 -3,-3" fill={C} opacity="0.4"/></g><rect x="76" y="84" width="68" height="14" rx="7" fill={D}/><text x="110" y="94" fontSize="8" textAnchor="middle" fill={C} fontFamily="IBM Plex Sans Arabic">شكراً ❤</text></svg>,
    // P4 Recon - matching
    <svg viewBox="0 0 220 110" key={i}><rect x="20" y="22" width="70" height="66" rx="4" fill="#fff" stroke="#e6e6e0"/><rect x="130" y="22" width="70" height="66" rx="4" fill="#fff" stroke="#e6e6e0"/>{[0,1,2,3].map(k=>(<g key={k}><rect x="26" y={30+k*14} width="58" height="10" rx="2" fill={k<3?"#f0f0eb":"#fef3e0"}/><rect x="136" y={30+k*14} width="58" height="10" rx="2" fill={k<3?"#f0f0eb":"#fef3e0"}/>{k<3 && <path d={`M 90 ${35+k*14} L 130 ${35+k*14}`} stroke={C} strokeWidth="1.5"/>}{k<3 && <circle cx="110" cy={35+k*14} r="3" fill={C}/>}</g>))}<rect x="92" y="79" width="36" height="14" rx="3" fill={D}/><text x="110" y="89" fontSize="8" textAnchor="middle" fill={C} fontFamily="monospace">99.7%</text></svg>,
    // P5 Payroll
    <svg viewBox="0 0 220 110" key={i}>{[0,1,2,3,4].map(k=>(<g key={k} transform={`translate(${30+k*38},48)`}><circle cx="0" cy="0" r="11" fill={D}/><circle cx="0" cy="0" r="9" fill={k===0?C:"#1c1c1c"}/><rect x="-13" y="14" width="26" height="20" rx="4" fill={k===0?C:"#222"}/><text x="0" y="48" fontSize="7" textAnchor="middle" fontFamily="monospace" fill={k===0?"#1d8a13":"#888"}>WPS ✓</text></g>))}<rect x="20" y="86" width="180" height="2" fill={C}/></svg>,
    // P6 Talent - funnel
    <svg viewBox="0 0 220 110" key={i}><polygon points="40,20 180,20 150,55 150,90 110,82 110,55 70,55" fill="none" stroke={C} strokeWidth="2"/>{[0,1,2,3,4,5].map(k=>{const xs=[55,80,120,165,100,140];const ys=[30,30,30,30,42,42];return <circle key={k} cx={xs[k]} cy={ys[k]} r="5" fill={k<2?"#ddd":k<4?"#888":C}/>})}<circle cx="130" cy="78" r="9" fill={D}/><path d="M125 78 L 128 81 L 135 74" stroke={C} strokeWidth="2" fill="none" strokeLinecap="round"/></svg>,
    // P7 Contracts
    <svg viewBox="0 0 220 110" key={i}><rect x="60" y="14" width="100" height="86" rx="4" fill="#fff" stroke="#e6e6e0"/>{[0,1,2,3,4,5,6].map(k=>(<rect key={k} x="68" y={22+k*10} width={k===2?40:80} height="3" fill={k===2?"#fef3e0":"#e8e8e3"}/>))}<rect x="68" y="42" width="84" height="6" fill="#fff5e0" stroke="#f5b342" strokeWidth="0.8"/><circle cx="180" cy="32" r="14" fill={D}/><text x="180" y="36" fontSize="11" textAnchor="middle" fill={C} fontFamily="IBM Plex Sans Arabic" fontWeight="700">!</text><rect x="68" y="78" width="50" height="14" rx="3" fill={D}/><text x="93" y="88" fontSize="8" textAnchor="middle" fill={C} fontFamily="monospace">RISK: HIGH</text></svg>,
    // P8 Marketing
    <svg viewBox="0 0 220 110" key={i}>{[20,55,90,140,175].map((x,k)=>(<g key={k} transform={`translate(${x},20)`}><rect x="0" y="0" width="30" height="74" rx="4" fill={k===2?D:"#fff"} stroke="#e6e6e0"/><rect x="4" y="6" width="22" height="14" rx="2" fill={k===2?C:"#f0f0eb"}/><rect x="4" y="24" width="22" height="2" fill="#ddd"/><rect x="4" y="30" width="18" height="2" fill="#ddd"/><rect x="4" y="36" width="22" height="2" fill="#ddd"/><rect x="4" y="50" width={[14,18,22,16,20][k]} height="20" fill={k===2?C:"#4bec42"} opacity={k===2?1:0.3}/></g>))}<text x="110" y="106" fontSize="7" fontFamily="monospace" textAnchor="middle" fill="#888">CTR ↑ 24%</text></svg>,
    // P9 Knowledge
    <svg viewBox="0 0 220 110" key={i}><circle cx="110" cy="55" r="28" fill={D}/><circle cx="110" cy="55" r="20" fill="none" stroke={C} strokeWidth="1.5" strokeDasharray="4 4"><animateTransform attributeName="transform" type="rotate" from="0 110 55" to="360 110 55" dur="12s" repeatCount="indefinite"/></circle><text x="110" y="59" fontSize="11" textAnchor="middle" fill={C} fontFamily="IBM Plex Sans Arabic" fontWeight="700">?</text>{[[40,30],[180,30],[35,80],[185,80],[110,12],[110,98]].map((p,k)=>(<g key={k}><circle cx={p[0]} cy={p[1]} r="9" fill="#fff" stroke="#e6e6e0"/><rect x={p[0]-5} y={p[1]-2} width="10" height="1.5" fill="#888"/><rect x={p[0]-5} y={p[1]+1} width="7" height="1.5" fill="#888"/><line x1={p[0]} y1={p[1]} x2="110" y2="55" stroke={C} strokeWidth="0.8" opacity="0.5"/></g>))}</svg>,
  ];
  return arts[i] || null;
}

/* ============== Components ============== */
function Nav({ lang, setLang }) {
  const t = T[lang];
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const navLinks = [
    { href:"about.html",        label:t.nav_about },
    { href:"#products",         label:t.nav_products },
    { href:"#pricing",          label:t.nav_pricing },
    { href:"contact.html",      label:t.nav_contact },
    { href:"blog.html",         label:t.nav_blog },
  ];
  return (
    <nav className="top">
      <div className="container nav">
        <button
          className={`nav-burger ${menuOpen?"open":""}`}
          onClick={()=>setMenuOpen(o=>!o)}
          aria-label={lang==="ar"?"القائمة":"Menu"}
          aria-expanded={menuOpen}
        >
          <span/><span/><span/>
        </button>
        <a href="#" className="logo" style={{textDecoration:"none"}}>
          <LogoFull height={42}/>
        </a>
        <div className="nav-links">
          {navLinks.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
        </div>
        <div className="nav-cta">
          <button onClick={()=>setLang(lang==="ar"?"en":"ar")} className="lang-toggle" title="Switch language">
            <span className={lang==="ar"?"on":""}>عربي</span>
            <span className={lang==="en"?"on":""}>EN</span>
          </button>
          <a href="login.html" className="btn btn-ghost" style={{padding:"10px 14px"}}>{t.btn_login}</a>
          <a href="contact.html" className="btn btn-primary">
            <span className="btn-label-full">{t.btn_trial}</span>
            <span className="btn-label-short">{lang==="ar"?"عرض سعر":"Quote"}</span>
            <Arrow lang={lang}/>
          </a>
        </div>
      </div>
      <div className={`nav-mobile-sheet ${menuOpen?"open":""}`} onClick={()=>setMenuOpen(false)}>
        <div className="nav-mobile-inner" onClick={(e)=>e.stopPropagation()}>
          {navLinks.map(l => (
            <a key={l.href} href={l.href} onClick={()=>setMenuOpen(false)}>{l.label}</a>
          ))}
          <div className="nav-mobile-divider"/>
          <a href="login.html" className="nav-mobile-secondary" onClick={()=>setMenuOpen(false)}>{t.btn_login}</a>
          <a href="contact.html" className="nav-mobile-cta" onClick={()=>setMenuOpen(false)}>
            {t.btn_trial} <Arrow lang={lang}/>
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ============== Animated Robot Mascot ============== */
function Robot({ lang }) {
  return (
    <div className="hero-visual robot-visual anim-fade" style={{animationDelay:"0.85s"}} aria-hidden="true">
      <div className="robot-stage">
        <div className="robot-grid"/>
        <div className="robot-glow"/>
        <div className="robot-orbit o1"><span/></div>
        <div className="robot-orbit o2"><span/></div>
        <div className="robot-orbit o3"><span/></div>
        <div className="robot-shadow"/>
        <div className="robot-float">
          <svg className="robot-svg" viewBox="0 0 400 480" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <linearGradient id="rbody" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#f6f6f4"/>
                <stop offset="100%" stopColor="#cfcfc8"/>
              </linearGradient>
              <linearGradient id="rdark" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#1a1a1a"/>
                <stop offset="100%" stopColor="#080808"/>
              </linearGradient>
              <linearGradient id="rgreen" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#5cff6e"/>
                <stop offset="100%" stopColor="#1f9c2e"/>
              </linearGradient>
              <radialGradient id="rvisor">
                <stop offset="0%" stopColor="#4bec42" stopOpacity="0.5"/>
                <stop offset="60%" stopColor="#4bec42" stopOpacity="0.08"/>
                <stop offset="100%" stopColor="#4bec42" stopOpacity="0"/>
              </radialGradient>
            </defs>

            {/* Antenna */}
            <g className="r-antenna">
              <line x1="200" y1="80" x2="200" y2="40" stroke="#bdbdb8" strokeWidth="3" strokeLinecap="round"/>
              <circle cx="200" cy="34" r="9" fill="url(#rgreen)"/>
              <circle cx="200" cy="34" r="14" fill="#4bec42" opacity="0.25" className="r-pulse"/>
            </g>

            {/* Neck */}
            <rect x="186" y="78" width="28" height="18" rx="4" fill="#9a9a93"/>
            <rect x="184" y="92" width="32" height="6" rx="2" fill="#6b6b66"/>

            {/* Head */}
            <g className="r-head">
              <rect x="120" y="96" width="160" height="140" rx="32" fill="url(#rbody)" stroke="#b3b3ad" strokeWidth="1.5"/>
              {/* Side ears */}
              <rect x="108" y="148" width="14" height="36" rx="4" fill="#9a9a93"/>
              <rect x="278" y="148" width="14" height="36" rx="4" fill="#9a9a93"/>
              <circle cx="115" cy="166" r="3" fill="#4bec42" className="r-led"/>
              <circle cx="285" cy="166" r="3" fill="#4bec42" className="r-led"/>
              {/* Visor */}
              <rect x="138" y="124" width="124" height="74" rx="18" fill="url(#rdark)"/>
              <rect x="138" y="124" width="124" height="74" rx="18" fill="url(#rvisor)"/>
              {/* Eyes */}
              <g className="r-eyes">
                <rect className="r-eye" x="160" y="148" width="34" height="28" rx="14" fill="#4bec42"/>
                <rect className="r-eye" x="206" y="148" width="34" height="28" rx="14" fill="#4bec42"/>
              </g>
              {/* Mouth dots */}
              <g className="r-mouth">
                <circle cx="184" cy="218" r="2.5" fill="#4bec42"/>
                <circle cx="200" cy="218" r="2.5" fill="#4bec42"/>
                <circle cx="216" cy="218" r="2.5" fill="#4bec42"/>
              </g>
            </g>

            {/* Body */}
            <g className="r-body">
              <path d="M 96 252 Q 96 240 110 240 L 290 240 Q 304 240 304 252 L 304 388 Q 304 408 284 408 L 116 408 Q 96 408 96 388 Z"
                    fill="url(#rbody)" stroke="#b3b3ad" strokeWidth="1.5"/>
              {/* Inner panel */}
              <rect x="118" y="262" width="164" height="124" rx="14" fill="#171717"/>
              {/* Chest screen content */}
              <g className="r-screen">
                <rect x="130" y="276" width="60" height="6" rx="2" fill="#4bec42" opacity="0.85"/>
                <rect x="130" y="290" width="120" height="4" rx="2" fill="#2a2a2a"/>
                <rect x="130" y="290" width="80" height="4" rx="2" fill="#4bec42" className="r-bar"/>
                <rect x="130" y="302" width="120" height="4" rx="2" fill="#2a2a2a"/>
                <rect x="130" y="302" width="48" height="4" rx="2" fill="#4bec42" className="r-bar2"/>
                <rect x="130" y="314" width="120" height="4" rx="2" fill="#2a2a2a"/>
                <rect x="130" y="314" width="100" height="4" rx="2" fill="#4bec42" className="r-bar3"/>
                {/* Mini chart */}
                <polyline className="r-chart" points="130,360 146,348 162,354 178,338 194,344 210,326 226,332 242,316 258,322 270,310"
                          fill="none" stroke="#4bec42" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                <circle cx="270" cy="310" r="3" fill="#4bec42" className="r-pulse"/>
              </g>
              {/* Power button */}
              <circle cx="200" cy="398" r="6" fill="#4bec42" className="r-pulse"/>
            </g>

            {/* Arms */}
            <g className="r-arm-l">
              <rect x="62" y="258" width="34" height="14" rx="6" fill="#9a9a93"/>
              <rect x="44" y="270" width="22" height="84" rx="10" fill="url(#rbody)" stroke="#b3b3ad"/>
              <circle cx="55" cy="358" r="14" fill="#1a1a1a"/>
              <circle cx="55" cy="358" r="6" fill="#4bec42" className="r-led"/>
            </g>
            <g className="r-arm-r">
              <rect x="304" y="258" width="34" height="14" rx="6" fill="#9a9a93"/>
              <rect x="334" y="270" width="22" height="84" rx="10" fill="url(#rbody)" stroke="#b3b3ad"/>
              <circle cx="345" cy="358" r="14" fill="#1a1a1a"/>
              <circle cx="345" cy="358" r="6" fill="#4bec42" className="r-led"/>
            </g>

            {/* Legs/base */}
            <rect x="140" y="408" width="38" height="32" rx="6" fill="#9a9a93"/>
            <rect x="222" y="408" width="38" height="32" rx="6" fill="#9a9a93"/>
            <ellipse cx="159" cy="446" rx="26" ry="6" fill="#1a1a1a"/>
            <ellipse cx="241" cy="446" rx="26" ry="6" fill="#1a1a1a"/>
          </svg>
        </div>
        <div className="robot-tag">
          <span className="tdot"/>
          <span className="ttxt">{lang==="ar"?"وكيل أوتمكس · متصل":"Otmix Agent · online"}</span>
        </div>
      </div>
    </div>
  );
}

function Hero({ lang }) {
  const t = T[lang];
  return (
    <header className="hero" data-screen-label="01 Hero">
      <div className="hero-bg"/><div className="hero-grid"/>
      <div className="hero-orbs" aria-hidden="true">
        <span className="orb o1"/><span className="orb o2"/><span className="orb o3"/>
      </div>
      <div className="container hero-inner">
        <div>
          <h1 style={{marginTop:0}}>
            <span className="anim-rise" style={{animationDelay:"0.15s",display:"inline-block"}}>{t.hero_h1_a}</span><br/>
            <em className="anim-rise" style={{animationDelay:"0.35s",display:"inline-block"}}>{t.hero_h1_b}</em>
          </h1>
          <p className="lead anim-fade" style={{animationDelay:"0.55s"}}>{t.hero_lead}</p>
          <div className="hero-cta anim-fade" style={{animationDelay:"0.7s"}}>
            <a href="#products" className="btn btn-green">{t.hero_cta1} <Arrow lang={lang}/></a>
            <a href="contact.html" className="btn btn-outline" style={{borderColor:"#2a2a2a",color:"#fff"}}>{t.hero_cta2}</a>
          </div>
        </div>
        <div className="hero-visual anim-fade" style={{animationDelay:"0.85s"}}>
          <Robot lang={lang}/>
        </div>
      </div>
      <div className="marquee">
        <div className="marquee-inner">
          {Array.from({length:2}).flatMap((_,k)=>(
            ["زاتكا المرحلة ٢","مُداد WPS","GOSI","نفاذ","ساما المصرفية المفتوحة","PDPL","فودكس","أودو","دايناميكس","زوهو بوكس","SAP Business One","سيلز فورس","زنديسك","واتساب بزنس","مدى","Apple Pay","STC Pay","Anthropic Claude"]
            .map((s,i)=> <span key={k+"-"+i}>{s}</span>)
          ))}
        </div>
      </div>
    </header>
  );
}

const CategoryIcon = ({ kind, size = 22 }) => {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "finance":    return (<svg {...props}><line x1="4" y1="20" x2="4" y2="10"/><line x1="10" y1="20" x2="10" y2="4"/><line x1="16" y1="20" x2="16" y2="14"/><line x1="22" y1="20" x2="2" y2="20"/></svg>);
    case "hr":         return (<svg {...props}><circle cx="9" cy="8" r="3"/><path d="M3 20c0-3 3-5 6-5s6 2 6 5"/><circle cx="17" cy="8" r="2"/><path d="M21 18c0-2-1.5-3.5-4-4"/></svg>);
    case "sales":      return (<svg {...props}><path d="M3 11l18-7-3 16-7-3-3 5z"/><path d="M11 17v4"/></svg>);
    case "legal":      return (<svg {...props}><path d="M12 3v18"/><path d="M5 21h14"/><path d="M5 8h14"/><path d="M5 8l-2 6h6z"/><path d="M19 8l2 6h-6z"/></svg>);
    case "enterprise": return (<svg {...props}><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M9 21V12h6v9"/><path d="M9 7h2M13 7h2M9 11h2M13 11h2"/></svg>);
    default: return null;
  }
};

const PRICE_BY_CODE = { P1:990, P2:690, P3:490, P4:1490, P5:1990, P6:1290, P7:1490, P8:1490, P9:990 };

const PRODUCT_TIER_KEY = { P1:"ap", P2:"order", P3:"reputation", P4:"recon", P5:"payroll", P6:"talent", P7:"contracts", P8:"marketing", P9:"knowledge" };

function ProductCard({ p, lang, t, i }) {
  const tierKey = PRODUCT_TIER_KEY[p.code];
  return (
    <article className="product" key={p.code}>
      {p.tag && <span className="tag">{p.tag}</span>}
      <div className="prod-art" data-art={i}>
        <ProdArt i={i}/>
      </div>
      <h3>{p.name}</h3>
      <p className="replaces">{p.desc}</p>
      <a href="#pricing" className="btn-prod-primary" data-tier={tierKey}>{t.prod_cta_details}</a>
    </article>
  );
}

function Products({ lang }) {
  const t = T[lang];
  const productIndexByCode = {};
  t.products.forEach((p, i) => { productIndexByCode[p.code] = i; });
  return (
    <section className="products" id="products" data-screen-label="02 Products">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow">{t.sec_products_eyebrow}</div>
            <h2>{t.sec_products_h}</h2>
          </div>
          <p className="desc">{t.sec_products_d}</p>
        </div>
        {t.category_order.map(catKey => {
          const cat = t.product_categories[catKey];
          const items = t.products.filter(p => p.category === catKey);
          if (items.length === 0) return null;
          return (
            <div className="category-block" key={catKey}>
              <div className="category-head">
                <div className="cat-ic"><CategoryIcon kind={cat.icon}/></div>
                <h3 className="cat-title">{cat.title}</h3>
                <span className="cat-count">{lang==="ar"
                  ? `${fmtNum(items.length, lang)} ${items.length===1?"منتج":items.length===2?"منتجان":"منتجات"}`
                  : `${items.length} product${items.length>1?"s":""}`}</span>
              </div>
              <div className="product-grid">
                {items.map(p => (
                  <ProductCard key={p.code} p={p} lang={lang} t={t} i={productIndexByCode[p.code]}/>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function FeatureArt({ kind, lang }) {
  const G = "#4bec42", GD = "#1d8a13", L = "#888";
  if (kind === "ksa") {
    // Compliance badges grid
    const badges = lang==="ar"
      ? ["زاتكا","مُداد","قوى","WPS"]
      : ["ZATCA","Mudad","Qiwa","WPS"];
    return (
      <svg viewBox="0 0 320 130" preserveAspectRatio="xMidYMid meet" style={{width:"100%",height:"100%"}}>
        <defs>
          <linearGradient id="ksaShield" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={G} stopOpacity="0.35"/>
            <stop offset="100%" stopColor={G} stopOpacity="0.05"/>
          </linearGradient>
        </defs>
        {badges.map((label, i) => {
          const col = i % 2, row = Math.floor(i/2);
          const x = 20 + col * 130, y = 18 + row * 50;
          return (
            <g key={i}>
              <rect x={x} y={y} width="120" height="38" rx="8" fill="rgba(75,236,66,0.08)" stroke="rgba(75,236,66,0.35)"/>
              <text x={x+60} y={y+24} textAnchor="middle" fontFamily="IBM Plex Sans Arabic" fontSize="14" fontWeight="700" fill={G}>{label}</text>
            </g>
          );
        })}
        <g transform="translate(280,65)">
          <path d="M0,-22 L18,-12 L18,8 C18,18 0,24 0,24 C0,24 -18,18 -18,8 L-18,-12 Z" fill="url(#ksaShield)" stroke={G} strokeWidth="1.5"/>
          <path d="M-7,2 L-2,7 L9,-5" stroke={G} strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        </g>
      </svg>
    );
  }
  if (kind === "replace") {
    // Flat-rate line vs jagged competitor
    return (
      <svg viewBox="0 0 320 130" preserveAspectRatio="xMidYMid meet" style={{width:"100%",height:"100%"}}>
        <text x="22" y="22" fontFamily="IBM Plex Mono" fontSize="10" fill="#666" letterSpacing="0.08em">{lang==="ar"?"المنافسون":"COMPETITORS"}</text>
        <path d="M22,72 L60,68 L60,58 L100,55 L100,40 L140,38 L140,28 L180,26 L180,16 L240,14 L240,8 L298,8"
              stroke="#666" strokeWidth="1.8" fill="none" strokeLinejoin="miter"/>
        <text x="22" y="98" fontFamily="IBM Plex Mono" fontSize="10" fill={G} letterSpacing="0.08em">OTMIX · FLAT</text>
        <line x1="22" y1="110" x2="298" y2="110" stroke={G} strokeWidth="2.5" strokeLinecap="round"/>
        {[60,120,180,240,298].map((x,i)=>(<circle key={i} cx={x} cy="110" r="3" fill={G}/>))}
      </svg>
    );
  }
  if (kind === "models") {
    // 99% efficiency ring with team
    return (
      <svg viewBox="0 0 320 130" preserveAspectRatio="xMidYMid meet" style={{width:"100%",height:"100%"}}>
        <g transform="translate(80,65)">
          <circle cx="0" cy="0" r="42" fill="none" stroke="#222" strokeWidth="6"/>
          <circle cx="0" cy="0" r="42" fill="none" stroke={G} strokeWidth="6"
                  strokeDasharray={`${42*2*Math.PI*0.99} ${42*2*Math.PI}`} strokeDashoffset={`${42*2*Math.PI*0.25}`}
                  transform="rotate(-90)" strokeLinecap="round"/>
          <text x="0" y="-2" textAnchor="middle" fontFamily="IBM Plex Sans Arabic" fontSize="22" fontWeight="700" fill={G}>99%</text>
          <text x="0" y="16" textAnchor="middle" fontFamily="IBM Plex Mono" fontSize="9" fill="#888" letterSpacing="0.08em">{lang==="ar"?"دقة":"ACCURACY"}</text>
        </g>
        <g transform="translate(195,65)">
          {[0,1,2,3,4].map(k=>{
            const angle = (k/5)*2*Math.PI - Math.PI/2;
            const x = Math.cos(angle)*42, y = Math.sin(angle)*42;
            return <g key={k} transform={`translate(${x},${y})`}>
              <circle cx="0" cy="-4" r="6" fill="#222" stroke={G} strokeWidth="1.5"/>
              <rect x="-9" y="3" width="18" height="11" rx="3" fill="#222" stroke={G} strokeWidth="1.5"/>
            </g>;
          })}
          <text x="0" y="4" textAnchor="middle" fontFamily="IBM Plex Sans Arabic" fontSize="14" fontWeight="700" fill={G}>1–5×</text>
        </g>
      </svg>
    );
  }
  if (kind === "integrations") {
    // KSA shield with data center
    return (
      <svg viewBox="0 0 320 130" preserveAspectRatio="xMidYMid meet" style={{width:"100%",height:"100%"}}>
        <g transform="translate(160,65)">
          <path d="M0,-46 L40,-30 L40,18 C40,38 0,48 0,48 C0,48 -40,38 -40,18 L-40,-30 Z"
                fill="rgba(75,236,66,0.06)" stroke={G} strokeWidth="1.8"/>
          <text x="0" y="-22" textAnchor="middle" fontFamily="IBM Plex Mono" fontSize="9" fill={G} letterSpacing="0.12em">KSA</text>
          <rect x="-22" y="-12" width="44" height="9" rx="2" fill="#222" stroke={G} strokeWidth="1"/>
          <rect x="-22" y="0" width="44" height="9" rx="2" fill="#222" stroke={G} strokeWidth="1"/>
          <rect x="-22" y="12" width="44" height="9" rx="2" fill="#222" stroke={G} strokeWidth="1"/>
          <circle cx="-15" cy="-7.5" r="1.5" fill={G}/>
          <circle cx="-15" cy="4.5" r="1.5" fill={G}/>
          <circle cx="-15" cy="16.5" r="1.5" fill={G}/>
          <text x="0" y="38" textAnchor="middle" fontFamily="IBM Plex Mono" fontSize="8" fill={G} letterSpacing="0.1em">PDPL · SAMA</text>
        </g>
      </svg>
    );
  }
  if (kind === "audit") {
    // 9-in-1 platform hub
    return (
      <svg viewBox="0 0 320 130" preserveAspectRatio="xMidYMid meet" style={{width:"100%",height:"100%"}}>
        <g transform="translate(160,65)">
          {[0,1,2,3,4,5,6,7].map(k=>{
            const angle = (k/8)*2*Math.PI;
            const x = Math.cos(angle)*46, y = Math.sin(angle)*46;
            return <g key={k}>
              <line x1="0" y1="0" x2={x*0.78} y2={y*0.78} stroke={G} strokeWidth="0.8" strokeDasharray="2 3" opacity="0.6"/>
              <circle cx={x} cy={y} r="10" fill="#222" stroke={G} strokeWidth="1.5"/>
            </g>;
          })}
          <circle cx="0" cy="0" r="22" fill="#0a0a0a" stroke={G} strokeWidth="2"/>
          <text x="0" y="2" textAnchor="middle" fontFamily="IBM Plex Sans Arabic" fontSize="13" fontWeight="700" fill={G}>9-in-1</text>
        </g>
      </svg>
    );
  }
  return null;
}

function Features({ lang }) {
  const t = T[lang];
  return (
    <section className="features" id="features" data-screen-label="03 Why Otmix">
      <div className="container">
        <div className="sec-head" style={{color:"#fff"}}>
          <div>
            <div className="eyebrow" style={{color:"#888"}}>{t.sec_features_eyebrow}</div>
            <h2>{t.sec_features_h}</h2>
          </div>
          <p className="desc" style={{color:"#aaa"}}>{t.sec_features_d}</p>
        </div>
        <div className="feat-grid">
          {t.features.map(f => (
            <div key={f.num} className={`feat ${f.span}`}>
              <div className="feat-top">
                {f.stat && <span className="feat-stat">{f.stat}</span>}
              </div>
              <h3>{f.title}</h3>
              <p>{f.body}</p>
              <div className={`feat-art ${f.green ? "green" : ""}`}>
                <FeatureArt kind={f.artKind} lang={lang}/>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SavingsCalculator({ lang }) {
  const t = T[lang];
  const [volume, setVolume] = useState(1500);
  const MANUAL_COST_PER_UNIT = 8; // SAR per invoice (labor + time + errors)
  const ap = PRICES.ap;
  let tierKey, tierLabel;
  if (volume <= 1000) { tierKey = "starter"; tierLabel = t.starter; }
  else if (volume <= 5000) { tierKey = "growth"; tierLabel = t.growth; }
  else { tierKey = "enterprise"; tierLabel = t.enterprise; }
  const otmixMonthly = ap[tierKey];
  const manualMonthly = volume * MANUAL_COST_PER_UNIT;
  const monthlySavings = Math.max(0, manualMonthly - otmixMonthly);
  const annualSavings = monthlySavings * 12;
  const paybackDays = otmixMonthly > 0 && monthlySavings > 0
    ? Math.max(1, Math.round((otmixMonthly / monthlySavings) * 30))
    : 0;
  return (
    <div className="calc-card">
      <div className="calc-head">
        <div className="eyebrow" style={{margin:0}}>{t.calc_eyebrow}</div>
        <h3>{t.calc_h}</h3>
      </div>
      <div className="calc-body">
        <div className="calc-input">
          <label>{t.calc_q}</label>
          <input
            type="range" min="100" max="10000" step="100"
            value={volume}
            onChange={(e)=>setVolume(parseInt(e.target.value,10))}
          />
          <div className="calc-val">
            <span className="vnum">{fmtNum(volume, lang)}</span>
            <span className="vlbl">{lang==="ar"?"فاتورة / شهر":"invoices / mo"}</span>
          </div>
        </div>
        <div className="calc-output">
          <div className="calc-row">
            <span className="ck">{t.calc_recommended}</span>
            <span className="cv tier-pill">{tierLabel}</span>
          </div>
          <div className="calc-row">
            <span className="ck">{t.calc_manual}</span>
            <span className="cv">{fmtNum(manualMonthly, lang)} {t.sar}</span>
          </div>
          <div className="calc-row">
            <span className="ck">{t.calc_otmix}</span>
            <span className="cv">{fmtNum(otmixMonthly, lang)} {t.sar}</span>
          </div>
          <div className="calc-savings">
            <div className="ck">{t.calc_savings}</div>
            <div className="cv-big">{fmtNum(annualSavings, lang)} {t.sar}</div>
            {paybackDays > 0 && paybackDays < 365 && (
              <div className="payback">{t.calc_payback} <b>{fmtNum(paybackDays, lang)}</b> {t.calc_payback_unit}</div>
            )}
          </div>
          <a href="contact.html" className="btn btn-green" style={{width:"100%",justifyContent:"center",marginTop:6}}>
            {t.calc_cta} <Arrow lang={lang}/>
          </a>
          <p className="calc-note">{t.calc_note}</p>
        </div>
      </div>
    </div>
  );
}

function Pricing({ lang }) {
  const [product, setProduct] = useState("ap");
  const [billing, setBilling] = useState("monthly");
  const t = T[lang];
  const tier = PRICES[product];
  const factor = billing === "annual" ? 0.83 : 1;

  useEffect(() => {
    const handler = (e) => {
      const link = e.target.closest('.btn-prod-ghost[data-tier]');
      if (!link) return;
      const tk = link.getAttribute('data-tier');
      if (PRICES[tk]) setProduct(tk);
    };
    document.addEventListener('click', handler);
    return () => document.removeEventListener('click', handler);
  }, []);

  return (
    <section className="pricing" id="pricing" data-screen-label="04 Pricing">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow">{t.sec_pricing_eyebrow}</div>
            <h2>{t.sec_pricing_h}</h2>
          </div>
          <p className="desc">{t.sec_pricing_d}</p>
        </div>
        <SavingsCalculator lang={lang}/>

        <div style={{display:"flex",alignItems:"center",flexWrap:"wrap",gap:12}}>
          <div className="price-tabs" role="tablist">
            {Object.entries(t.tier_titles).map(([k,label])=>(
              <button key={k} className={product===k?"active":""} onClick={()=>setProduct(k)}>{label}</button>
            ))}
          </div>
          <div className="billing-toggle">
            <button className={billing==="monthly"?"active":""} onClick={()=>setBilling("monthly")}>{t.monthly}</button>
            <button className={billing==="annual"?"active":""} onClick={()=>setBilling("annual")}>
              {t.annual} <span className="save">{t.save}</span>
            </button>
          </div>
        </div>

        <div className="tier-grid" style={{marginTop:28}}>
          {[
            {key:"starter",label:t.starter,sub:t.starter_sub},
            {key:"growth",label:t.growth,sub:t.growth_sub,featured:true,ribbon:t.most_popular},
            {key:"enterprise",label:t.enterprise,sub:t.enterprise_sub},
          ].map((row,idx)=>(
            <div key={row.key} className={`tier ${row.featured?"featured":""}`}>
              {row.ribbon && <span className="ribbon">{row.ribbon}</span>}
              <div className="name">{row.label}</div>
              <h3>{t.tier_titles[product]}</h3>
              <div className="num-row">
                <span className="num">${fmtNum(Math.round(tier[row.key]*factor/3.75), "en")}</span>
                <span className="ccy">USD</span>
                <span className="per">{t.per_month}</span>
              </div>
              <div className="vat-note">{t.vat_inclusive}</div>
              <div className="quota">{tier.quotas[lang][idx]}</div>
              <div className="feats">
                {tier.feats[lang][idx].map(f=>(
                  <div key={f} className="feat-line"><Check/><span>{f}</span></div>
                ))}
              </div>
              <div className="cta">
                <a href={`signup.html?p=${product}&t=${row.key}&billing=${billing}`} className={`btn ${row.featured?"btn-green":"btn-outline"}`} style={{width:"100%",justifyContent:"center"}}>
                  {row.featured ? t.cta_trial : (row.key === "enterprise" ? t.cta_sales : t.cta_subscribe)} <Arrow lang={lang}/>
                </a>
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

function MiniChart() {
  const data = [124,148,131,162,180,176,210,245,232,268,289,275,312,341];
  const max = Math.max(...data);
  const w = 600, h = 180, pad = 12;
  const stepX = (w - pad*2) / (data.length - 1);
  const pts = data.map((v,i) => [pad + i*stepX, h - pad - (v/max) * (h - pad*2)]);
  const path = pts.map((p,i) => (i?"L":"M")+p[0].toFixed(1)+" "+p[1].toFixed(1)).join(" ");
  const area = path + ` L ${w-pad} ${h-pad} L ${pad} ${h-pad} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <defs><linearGradient id="g1" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#4bec42" stopOpacity="0.32"/>
        <stop offset="100%" stopColor="#4bec42" stopOpacity="0"/>
      </linearGradient></defs>
      {[0.25,0.5,0.75].map(y=>(<line key={y} x1={pad} x2={w-pad} y1={h*y} y2={h*y} stroke="#eee" strokeDasharray="2 4"/>))}
      <path d={area} fill="url(#g1)"/>
      <path d={path} fill="none" stroke="#4bec42" strokeWidth="2.5"/>
      {pts.map((p,i)=>(<circle key={i} cx={p[0]} cy={p[1]} r={i===pts.length-1?5:2.5} fill="#fff" stroke="#4bec42" strokeWidth="2"/>))}
    </svg>
  );
}

function DonutCost({ lang }) {
  const r=50, cx=70, cy=70, c=2*Math.PI*r, pct=0.78;
  return (
    <svg viewBox="0 0 140 140" width="140" height="140">
      <circle cx={cx} cy={cy} r={r} fill="none" stroke="#eee" strokeWidth="14"/>
      <circle cx={cx} cy={cy} r={r} fill="none" stroke="#4bec42" strokeWidth="14"
        strokeDasharray={`${c*pct} ${c}`} strokeDashoffset={c*0.25} strokeLinecap="round"
        transform={`rotate(-90 ${cx} ${cy})`}/>
      <text x={cx} y={cy-2} fontFamily="IBM Plex Sans Arabic" fontWeight="700" fontSize="22" textAnchor="middle" fill="#080808">{lang==="ar"?"٧٨٪":"78%"}</text>
      <text x={cx} y={cy+18} fontFamily="IBM Plex Sans Arabic" fontSize="9" letterSpacing="1" textAnchor="middle" fill="#888">{lang==="ar"?"عبء الموظفين":"FTE OFFLOAD"}</text>
    </svg>
  );
}

function Dashboard({ lang }) {
  const t = T[lang];
  const L = lang==="ar" ? {
    live:"مباشر",
    region:"الرياض ١",
    crumb:"مساحة العمل · مايو ٢٠٢٦",
    greeting:"مرحباً، خالد — هذا ملخّص أداء وكلائك اليوم.",
    open:"افتح اللوحة الكاملة",
    k1:"فواتير مؤتمتة", k1d:"+١٢٫٤٪ هذا الشهر",
    k2:"ساعات عمل موفّرة", k2d:"+١٨٫٠٪ هذا الشهر",
    k3:"تكلفة الفاتورة", k3d:"−٩٫٣٪ هذا الشهر",
    k4:"معدّل الأتمتة", k4d:"+٢٫١ نقطة",
    chartH:"إنتاجية الوكلاء", chartSub:"معاملات يومية · آخر ١٤ يوماً", stp:"معالجة مباشرة ٨٧٫٣٪",
    roiH:"العائد على الاستثمار", roiSub:"هذا الشهر مقارنة بالعمل اليدوي",
    saved:"وفّر من تكاليف العمالة", sub:"اشتراك أوتمكس", roi:"عائد صافٍ",
    actH:"النشاط اللحظي للوكلاء", actSub:"آخر ٤ ساعات", auto:"تلقائي",
  } : {
    live:"live",
    region:"riyadh-1",
    crumb:"Workspace · May 2026",
    greeting:"Hi Khalid — here's how your agents performed today.",
    open:"Open full console",
    k1:"Invoices automated", k1d:"+12.4% this month",
    k2:"Labor hours saved", k2d:"+18.0% this month",
    k3:"Cost per invoice", k3d:"−9.3% this month",
    k4:"Automation rate", k4d:"+2.1 pts",
    chartH:"Agent throughput", chartSub:"Daily transactions · last 14 days", stp:"Straight-through 87.3%",
    roiH:"Return on investment", roiSub:"This month vs. manual ops",
    saved:"Labor cost saved", sub:"Otmix subscription", roi:"Net ROI",
    actH:"Live agent activity", actSub:"Last 4 hours", auto:"auto",
  };

  const activity = [
    {time:"09:42", ic:"AP", ev: lang==="ar"?<><b>وكيل الحسابات الدائنة</b> سجّل فاتورة INV-4291 — ١٨٬٤٠٠ ر.س</>:<><b>AP Agent</b> filed INV-4291 — 18,400 SAR</>},
    {time:"09:38", ic:"OR", ev: lang==="ar"?<><b>وكيل مبيعات الواتساب</b> أغلق طلب #4821 — رفع الطلب ٢٨٪</>:<><b>Sales Agent</b> closed order #4821 — upsell +28%</>},
    {time:"09:31", ic:"RC", ev: lang==="ar"?<><b>وكيل المطابقة البنكية</b> طابق ١٤٢ معاملة · ٣ استثناءات</>:<><b>Recon Agent</b> matched 142 txns · 3 exceptions</>},
    {time:"09:14", ic:"CX", ev: lang==="ar"?<><b>خبير تجربة العملاء</b> ردّ على ٣ تقييمات — فُتحت تذكرة CRM</>:<><b>CX Expert</b> replied to 3 reviews — 1 CRM ticket</>},
  ];

  return (
    <section className="dash-section" id="dashboard" data-screen-label="05 Admin Dashboard">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow">{t.sec_dash_eyebrow}</div>
            <h2>{t.sec_dash_h}</h2>
          </div>
          <p className="desc">{t.sec_dash_d}</p>
        </div>

        <div className="dashboard pro">
          <div className="dash-bar">
            <div className="lights"><span/><span/><span/></div>
            <div className="url" dir="ltr">app.otmix.sa / admin / overview</div>
            <span className="bar-region">
              <span className="live-dot"/> {L.live} · {L.region}
            </span>
          </div>
          <div className="dash-pro">
            <div className="dash-pro-head">
              <div>
                <div className="dp-crumb">{L.crumb}</div>
                <h3 className="dp-greeting">{L.greeting}</h3>
              </div>
              <a href="dashboard.html" className="dp-open">
                {L.open}
                <Arrow lang={lang}/>
              </a>
            </div>

            <div className="dp-kpis">
              {[
                {l:L.k1, v: lang==="ar"?"٣٬٤٨١":"3,481", d:L.k1d, dir:"up", spark:[2,4,3,5,6,8,7,9,10,12,11,14]},
                {l:L.k2, v: lang==="ar"?"٤١٢":"412", suf:lang==="ar"?"س":"h", d:L.k2d, dir:"up", spark:[3,3,4,4,5,5,6,7,7,8,9,10]},
                {l:L.k3, v: lang==="ar"?"٠٫٧١":"0.71", suf:lang==="ar"?"ر.س":"SAR", d:L.k3d, dir:"down", spark:[10,9,9,8,8,7,7,6,6,5,5,4]},
                {l:L.k4, v: lang==="ar"?"٩٧٫٢":"97.2", suf:"٪", d:L.k4d, dir:"up", spark:[80,82,85,86,88,90,92,93,94,95,96,97]},
              ].map((k,i)=>(
                <div className="dp-kpi" key={i}>
                  <div className="dp-kpi-top">
                    <div className="dp-kpi-label">{k.l}</div>
                    <div className={`dp-kpi-spark ${k.dir==="down"?"dn":""}`}><DashSpark data={k.spark}/></div>
                  </div>
                  <div className="dp-kpi-v">
                    <span className="num">{k.v}</span>
                    {k.suf && <span className="suf">{k.suf}</span>}
                  </div>
                  <div className={`dp-kpi-d ${k.dir==="down"?"dn":""}`}>
                    <span className="arrow">{k.dir==="up"?"▲":"▼"}</span> {k.d}
                  </div>
                </div>
              ))}
            </div>

            <div className="dp-row">
              <div className="dp-panel">
                <div className="dp-panel-head">
                  <div>
                    <h4>{L.chartH}</h4>
                    <div className="dp-sub">{L.chartSub}</div>
                  </div>
                  <span className="dp-pill"><span className="d"/>{L.stp}</span>
                </div>
                <div className="dp-chart"><MiniChart/></div>
              </div>
              <div className="dp-panel">
                <div className="dp-panel-head">
                  <div>
                    <h4>{L.roiH}</h4>
                    <div className="dp-sub">{L.roiSub}</div>
                  </div>
                </div>
                <div className="dp-roi">
                  <DonutCost lang={lang}/>
                  <div className="dp-roi-list">
                    <div><span className="ck">{L.saved}</span><b className="cv up">{lang==="ar"?"٦٤٬٢٠٠ ر.س":"64,200 SAR"}</b></div>
                    <div><span className="ck">{L.sub}</span><b className="cv">−{lang==="ar"?"١٢٬٤٧٠ ر.س":"12,470 SAR"}</b></div>
                    <div className="hl"><span className="ck">{L.roi}</span><b className="cv big">{lang==="ar"?"٥٫١×":"5.1×"}</b></div>
                  </div>
                </div>
              </div>
            </div>

            <div className="dp-panel">
              <div className="dp-panel-head">
                <div>
                  <h4>{L.actH}</h4>
                  <div className="dp-sub">{L.actSub}</div>
                </div>
                <span className="dp-pill"><span className="d"/>{L.live}</span>
              </div>
              <div className="dp-activity">
                {activity.map((a,i)=>(
                  <div className="dp-act-row" key={i}>
                    <span className="dp-act-time" dir="ltr">{a.time}</span>
                    <span className="dp-act-ic">{a.ic}</span>
                    <span className="dp-act-ev">{a.ev}</span>
                    <span className="dp-act-tag">{L.auto}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function DashSpark({ data }) {
  const w = 70, h = 22;
  const max = Math.max(...data), min = Math.min(...data);
  const range = Math.max(1, max - min);
  const pts = data.map((v,i) => [(i/(data.length-1))*w, h - ((v-min)/range)*(h-3) - 1.5]);
  const d = pts.map((p,i)=>(i===0?"M":"L")+p[0].toFixed(1)+" "+p[1].toFixed(1)).join(" ");
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{width:"100%",height:h,display:"block"}}>
      <path d={d + ` L ${w} ${h} L 0 ${h} Z`} fill="currentColor" opacity="0.12"/>
      <path d={d} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function Closing({ lang }) {
  const t = T[lang];
  return (
    <section className="closing" data-screen-label="06 CTA">
      <div className="container">
        <div className="closing-card">
          <div>
            <h2>{t.closing_h}</h2>
            <p>{t.closing_p}</p>
            <div className="closing-ctas">
              <a href="contact.html" className="btn btn-green">{t.submit_trial} <Arrow lang={lang}/></a>
              <a href="#pricing" className="btn-link">
                {lang==="ar"?"تصفّح الباقات":"Browse plans"}
                <Arrow lang={lang}/>
              </a>
            </div>
          </div>
          <div className="closing-right">
            <div className="stat-grid">
              {t.closing_stats.map(([v,l])=>(
                <div className="stat-card" key={l}><div className="v">{v}</div><div className="l">{l}</div></div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ lang }) {
  const t = T[lang];
  return (
    <footer>
      <div className="container">
        <div className="foot-grid">
          <div>
            <div style={{marginBottom:18}}><LogoFull height={48} light/></div>
            <p style={{fontSize:14.5,color:"#9d9d9d",maxWidth:360,lineHeight:1.75}}>{t.foot_tagline}</p>
            <div className="foot-social">
              <a href="https://x.com/Otmix_ai" target="_blank" rel="noopener" aria-label="X (Twitter)">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
              </a>
              <a href="https://www.linkedin.com/company/116010459" target="_blank" rel="noopener" aria-label="LinkedIn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.063 2.063 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
              </a>
            </div>
          </div>
          <div><h5>{t.foot_products}</h5>{t.foot_links.products.map(l=> <a key={l.name} href={l.href}>{l.name}</a>)}</div>
          <div><h5>{t.foot_company}</h5>{t.foot_links.company.map(l=> <a key={l.name} href={l.href}>{l.name}</a>)}</div>
          <div><h5>{t.foot_legal}</h5>{t.foot_links.legal.map(l=> <a key={l.name} href={l.href}>{l.name}</a>)}</div>
        </div>
        <div className="foot-bottom">
          <div>{t.copyright}</div>
        </div>
      </div>
    </footer>
  );
}

const CHAT_KNOWLEDGE = {
  ar: {
    welcome: "أهلاً بك في أوتمكس 👋 أنا وكيل المعرفة، أساعدك على فهم منتجاتنا واختيار المناسب لك.",
    suggestionsLabel: "أسئلة شائعة",
    suggestions: [
      "ما هي منتجات أوتمكس؟",
      "كم تبلغ الأسعار؟",
      "كيف أبدأ؟",
      "هل بياناتي آمنة؟",
      "تحدّث مع مستشار",
    ],
    fallback: "ما فهمت سؤالك تماماً 🤔 يمكنك التحدّث مع أحد مستشارينا مباشرة لإجابة دقيقة.",
    typing: "يكتب...",
    placeholder: "اكتب رسالتك...",
    send: "إرسال",
    header: "وكيل أوتمكس",
    headerSub: "متّصل · يردّ خلال ثوانٍ",
    qa: {
      "منتجات": "نقدّم ٩ وكلاء ذكاء اصطناعي متخصصين في:\n· المالية (الحسابات الدائنة، المطابقة البنكية)\n· الموارد البشرية (الأجور، التوظيف)\n· المبيعات والتسويق (الواتساب، السمعة، الحملات)\n· القانوني (تحليل العقود)\n· المعرفة المؤسسية",
      "الأسعار": "الباقات تبدأ من ٤٩٠ ر.س/شهر (شاملة الضريبة). كل منتج له ٣ باقات: البداية، النمو، المؤسسات. ادخل قسم الأسعار في الصفحة للتفاصيل، أو احسب توفيرك بحاسبتنا الذكية.",
      "تكلفة": "الباقات تبدأ من ٤٩٠ ر.س/شهر شاملة الضريبة. تنخفض التكلفة عند ضمّ منتجات متعددة، وعند الدفع السنوي.",
      "أبدأ": "اضغط زر «احصل على عرض سعر مخصص» في أعلى الصفحة، وسيتواصل معك أحد مستشارينا خلال ٢٤ ساعة.",
      "آمن": "نعم. بياناتك مستضافة داخل المملكة العربية السعودية، ومتوافقة مع نظام PDPL وإطار ساما السيبراني. كل إجراء موثّق بطابع زمني وقابل للتدقيق.",
      "خصوصية": "نلتزم بنظام حماية البيانات الشخصية (PDPL). راجع سياسة الخصوصية الكاملة من رابط الفوتر.",
      "مستشار": "👋 سأحوّلك مباشرة لصفحة التواصل لحجز موعد مع أحد مستشارينا.",
      "تواصل": "اضغط هنا للانتقال لصفحة تواصل معنا.",
      "ضريبة": "كل الأسعار شاملة ضريبة القيمة المضافة ١٥٪. نُصدر فواتير زاتكا المعتمدة تلقائياً.",
      "مدى": "نعم، نقبل الدفع عبر مدى، Visa، Mastercard، Apple Pay، Amex، وBenefit/KNET — جميعها متكاملة عبر بوّابة Tap Payments الآمنة (PCI DSS Level 1).",
      "زاتكا": "أوتمكس متوافقة بالكامل مع زاتكا المرحلة الثانية. وكيل الحسابات الدائنة يصدر ويسجّل الفواتير الضريبية تلقائياً.",
    },
  },
  en: {
    welcome: "Welcome to Otmix 👋 I'm the Knowledge Agent — here to help you explore our products and find the right fit.",
    suggestionsLabel: "Common questions",
    suggestions: [
      "What does Otmix offer?",
      "How much does it cost?",
      "How do I get started?",
      "Is my data secure?",
      "Talk to a human",
    ],
    fallback: "I didn't quite catch that 🤔 You can speak with one of our advisors for a more precise answer.",
    typing: "typing...",
    placeholder: "Type your message...",
    send: "Send",
    header: "Otmix Agent",
    headerSub: "online · replies in seconds",
    qa: {
      "offer": "We provide 9 specialized AI agents across:\n· Finance (Accounts Payable, Reconciliation)\n· HR (Payroll, Recruiting)\n· Sales & Marketing (WhatsApp, Reputation, Campaigns)\n· Legal (Contract analysis)\n· Enterprise Knowledge",
      "cost": "Plans start at SAR 490/month (VAT inclusive). Every product has 3 tiers: Starter, Growth, Enterprise. Visit the Pricing section or use our savings calculator.",
      "price": "Plans start at SAR 490/month, VAT inclusive. Bundle multiple products or pay annually to save more.",
      "start": "Click the 'Get a custom quote' button at the top of the page — one of our advisors will reach out within 24 hours.",
      "secure": "Yes. Your data is hosted inside Saudi Arabia, PDPL-compliant and aligned with the SAMA cyber framework. Every action is timestamped and audit-ready.",
      "privacy": "We comply with the Saudi Personal Data Protection Law (PDPL). Read the full Privacy Policy linked in the footer.",
      "human": "👋 I'll redirect you to our contact page to book a session with an advisor.",
      "contact": "Click here to go to the Contact page.",
      "vat": "All prices include 15% VAT. ZATCA-compliant tax invoices are issued automatically.",
      "payment": "Yes, we accept mada, Visa, Mastercard, Apple Pay, Amex, and Benefit/KNET — all integrated via Tap Payments (PCI DSS Level 1).",
      "zatca": "Otmix is fully compliant with ZATCA Phase 2. Our AP Agent issues and posts tax invoices automatically.",
    },
  },
};

function Chatbot({ lang }) {
  const t = CHAT_KNOWLEDGE[lang];
  const [open, setOpen] = useState(false);
  const [messages, setMessages] = useState([{ role:"bot", text: t.welcome }]);
  const [input, setInput] = useState("");
  const [typing, setTyping] = useState(false);
  const scrollRef = useRef(null);

  useEffect(() => {
    setMessages([{ role:"bot", text: CHAT_KNOWLEDGE[lang].welcome }]);
  }, [lang]);

  useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [messages, typing, open]);

  function answerFor(text) {
    const q = text.toLowerCase();
    for (const [kw, ans] of Object.entries(t.qa)) {
      if (q.includes(kw.toLowerCase())) return ans;
    }
    return null;
  }

  function send(text) {
    const value = (text ?? input).trim();
    if (!value) return;
    setMessages(m => [...m, { role:"user", text: value }]);
    setInput("");
    setTyping(true);
    setTimeout(() => {
      const ans = answerFor(value) || t.fallback;
      setMessages(m => [...m, { role:"bot", text: ans }]);
      setTyping(false);
    }, 600 + Math.min(value.length * 18, 900));
  }

  function handleSuggestion(s) {
    send(s);
  }

  return (
    <React.Fragment>
      <button className={`chat-fab ${open?"hidden":""}`} onClick={()=>setOpen(true)} aria-label="افتح المحادثة">
        <span className="chat-dot"/>
        <svg width="30" height="30" viewBox="0 0 82 72" fill="currentColor" aria-hidden="true">
          <path d="M46.4,63.7s13.1-.5,21-21.9c6.2-16.8-1.1-29.8-1.1-29.8l14.5,14.8.4,29.5s-10.8,11.6-34.8,7.4h0Z"/>
          <path d="M65,36.4s-.5-13.1-21.9-21c-16.8-6.2-29.8,1.1-29.8,1.1L28.1,2.1l29.5-.4s11.6,10.8,7.4,34.8h0Z"/>
          <path d="M37.3,19s-13.1,0-21.8,21.1c-6.8,16.5,0,29.8,0,29.8L1.6,54.6l.7-29.5s11.2-11.2,35-6.1h0Z"/>
          <path d="M18.8,43.9s0,13.1,21.2,21.7c16.5,6.7,29.8-.2,29.8-.2l-15.2,14-29.5-.5s-11.2-11.1-6.3-35Z"/>
        </svg>
      </button>
      <div className={`chat-panel ${open?"open":""}`} role="dialog" aria-label="محادثة أوتمكس">
        <div className="chat-head">
          <div className="chat-avatar">
            <svg width="24" height="24" viewBox="0 0 82 72" fill="currentColor" aria-hidden="true">
              <path d="M46.4,63.7s13.1-.5,21-21.9c6.2-16.8-1.1-29.8-1.1-29.8l14.5,14.8.4,29.5s-10.8,11.6-34.8,7.4h0Z"/>
              <path d="M65,36.4s-.5-13.1-21.9-21c-16.8-6.2-29.8,1.1-29.8,1.1L28.1,2.1l29.5-.4s11.6,10.8,7.4,34.8h0Z"/>
              <path d="M37.3,19s-13.1,0-21.8,21.1c-6.8,16.5,0,29.8,0,29.8L1.6,54.6l.7-29.5s11.2-11.2,35-6.1h0Z"/>
              <path d="M18.8,43.9s0,13.1,21.2,21.7c16.5,6.7,29.8-.2,29.8-.2l-15.2,14-29.5-.5s-11.2-11.1-6.3-35Z"/>
            </svg>
          </div>
          <div className="chat-title">
            <div className="ct-name">{t.header}</div>
            <div className="ct-sub"><span className="online"/> {t.headerSub}</div>
          </div>
          <button className="chat-close" onClick={()=>setOpen(false)} aria-label="إغلاق">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
        </div>
        <div className="chat-body" ref={scrollRef}>
          {messages.map((m,i)=>(
            <div key={i} className={`chat-msg ${m.role}`}>
              <div className="bubble">{m.text}</div>
            </div>
          ))}
          {typing && <div className="chat-msg bot"><div className="bubble typing"><span/><span/><span/></div></div>}
        </div>
        <div className="chat-suggestions">
          {t.suggestions.map(s => (
            <button key={s} className="chip" onClick={()=>handleSuggestion(s)}>{s}</button>
          ))}
        </div>
        <form className="chat-input" onSubmit={(e)=>{e.preventDefault();send();}}>
          <input
            type="text"
            value={input}
            onChange={(e)=>setInput(e.target.value)}
            placeholder={t.placeholder}
            aria-label={t.placeholder}
          />
          <button type="submit" className="chat-send" aria-label={t.send}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{transform: lang==="ar"?"scaleX(-1)":"none"}}><path d="M5 12h14"/><path d="M13 5l7 7-7 7"/></svg>
          </button>
        </form>
      </div>
    </React.Fragment>
  );
}

function App() {
  const [lang, setLang] = useState(() => localStorage.getItem("otmix-lang") || "ar");
  useEffect(() => {
    localStorage.setItem("otmix-lang", lang);
    document.documentElement.lang = lang;
    document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
    document.body.dataset.lang = lang;
  }, [lang]);
  return (
    <React.Fragment>
      <Nav lang={lang} setLang={setLang}/>
      <Hero lang={lang}/>
      <Products lang={lang}/>
      <Features lang={lang}/>
      <Pricing lang={lang}/>
      <Closing lang={lang}/>
      <Footer lang={lang}/>
      <Chatbot lang={lang}/>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);