/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakSelect, TweakColor, TweakSlider */
/* global SiteNav, Hero, Marquee, Services, Work, AboutTeaser, Contact, Cursor, ScrollWorld, getSiteTweaks, getEffectiveMode, getEffectivePalette, getEffectiveLanguage */

const { useEffect, useState } = React;

// ============================================================
// Site copy (placeholder content — easy to edit)
// ============================================================
const SITE_DATA = {
  brandName: "Omar Abo Rabea",
  initials: "OA",
  status: "Available for work",
  // location: "Israel · Remote",
  eyebrow: "AI Solution Engineer",

  headlinePre: "AI solutions that",
  headlineAccent: "save",
  headlinePost: "business hours.",

  sub: "I help businesses find, design, and build practical AI systems: automations, internal tools, websites, campaign workflows, and full-stack products that remove repeat work and make teams faster.",

  heroProof: [
    { k: "01", v: "AI solution strategy" },
    { k: "02", v: "Automation + internal tools" },
    { k: "03", v: "Launcho: ads from WhatsApp" },
  ],

  marquee: [
    "Available now",
    "AI solution engineering",
    "Business automation",
    "Websites + dashboards",
    "Meta campaigns",
    "WhatsApp workflows",
    "Internal tools",
    "Full-stack builds",
    "AI creative systems",
  ],

  servicesHeadline: "What I build.",
  servicesKicker: "Practical AI, software, and campaign systems for businesses that want less manual work and more output.",
  services: [
    {
      name: "AI solution strategy",
      desc: "I map where AI can actually save time in your business, choose the right workflows, and turn vague ideas into a buildable plan with clear ROI.",
      tags: ["Audit", "Roadmap", "ROI"],
    },
    {
      name: "Automations & internal tools",
      desc: "Custom workflows, dashboards, approvals, CRMs, content pipelines, API integrations, and WhatsApp systems that remove repeat work.",
      tags: ["n8n", "APIs", "Dashboards"],
    },
    {
      name: "Websites & full-stack products",
      desc: "Marketing sites, client portals, SaaS dashboards, payments, auth, databases, cloud deployment, and production-grade engineering.",
      tags: ["React", "NestJS", "Cloud"],
    },
    {
      name: "Launcho campaign engine",
      desc: "A WhatsApp-native platform where businesses send text, images, or voice notes and get branded ad creatives, copy, approvals, and Meta publishing in minutes.",
      tags: ["WhatsApp", "Meta ads", "AI creative"],
    },
  ],

  workHeadline: "Selected work.",
  workKicker: "A few proof points across AI products, automation systems, and production engineering.",
  proofVisuals: [
    {
      type: "process",
      label: "Launcho",
      title: "WhatsApp input. Campaign-ready output.",
      desc: "A business can send a product photo, short text, or voice note. Launcho understands the business style, creates the offer, designs the ad, and moves it toward approval and publishing.",
      steps: [
        { label: "Original product photo", src: "uploads/case-studies/launcho-product-photo.png" },
        { label: "WhatsApp request", src: "uploads/case-studies/launcho-whatsapp-request.png" },
        { label: "Final generated ad", src: "uploads/case-studies/launcho-generated-ad.png" },
      ],
    },
    {
      type: "wide",
      label: "Automation",
      title: "The workflow behind the magic.",
      desc: "Under the simple WhatsApp experience is a real automation system: routing, AI decisions, API calls, media generation, approvals, publishing steps, and processing locks.",
      src: "uploads/case-studies/launcho-workflow-map.png",
    },
    {
      type: "system",
      label: "Builds",
      title: "Websites, dashboards, and campaign systems.",
      desc: "Not every result should be a screenshot. Some of the best work is the structure: fast landing pages, practical dashboards, Meta campaign flows, and tools that make business operations easier to run.",
      stats: [
        "AI strategy",
        "Web apps",
        "Meta campaigns",
        "Internal tools",
      ],
    },
  ],
  work: [
    { title: "Launcho", summary: "A WhatsApp-native AI campaign engine that creates branded ads, copy, previews, approvals, and Meta publishing from chat or voice.", client: "Own product", year: "2025" },
    { title: "Client AI automations", summary: "Workflow systems, internal tools, and campaign operations that save teams hours every week.", client: "Freelance", year: "2024 — now" },
    { title: "Full-stack AI platform", summary: "Microservices, payments, auth, dashboards, and AI features shipped end-to-end.", client: "Veedy AI", year: "2024" },
    { title: "ASR benchmarking systems", summary: "Speech-recognition tooling, evaluation pipelines, and Python automation for model testing.", client: "Verbit AI", year: "2023" },
    { title: "Backend integrations & testing", summary: "API integrations and test infrastructure for production security tooling.", client: "Armis", year: "2023" },
  ],

  aboutIntroPre: "I'm Omar — an AI Solution Engineer helping businesses",
  aboutIntroAccent: "save time with practical AI systems",
  aboutIntroPost: "from automations and websites to full-stack products and ad workflows.",

  aboutMeta: [
    // { k: "Based", v: "Israel" },
    { k: "Working", v: "Remote · Hybrid" },
    { k: "Status", v: "Available" },
    { k: "Stack", v: "AI · Web · Automation" },
  ],

  aboutBody: [
    { type: "p", html: "I work with businesses that know AI can help, but need someone to turn the opportunity into a real system. That can mean an automation, website, dashboard, campaign workflow, internal tool, or full SaaS product." },
    { type: "p", html: "My focus is simple: find the slow manual work, design the shortest useful workflow, then build something reliable enough for real people to use every day." },
    { type: "quote", text: "Good AI does not just answer questions. It finishes work." },
    { type: "p", html: "<strong>Launcho</strong> is my flagship example: a WhatsApp-native campaign engine where a business can send a product image, description, or voice note and get branded ad creatives, copy, previews, approvals, and Meta publishing in minutes. It understands the business style instead of producing random one-off results." },
    { type: "p", html: "Beyond Launcho, I build websites, Meta campaign flows, internal tools, automations, and AI-powered systems that can save teams hundreds or thousands of hours a year." },
    { type: "p", html: "Before going independent, I shipped at <strong>Veedy AI</strong> as a full-stack developer, worked on speech-recognition benchmarking at <strong>Verbit AI</strong>, and built backend integrations and tests at <strong>Armis</strong>." },
    {
      type: "timeline", label: "Where I've been",
      rows: [
        { when: "2024 — now", role: "AI Solution Engineer · Launcho + client systems", org: "Independent" },
        { when: "2024", role: "Full-stack Developer", org: "Veedy AI · AI platform, microservices, payments" },
        { when: "2023", role: "Backend Intern", org: "Verbit AI · ASR systems, Python, benchmarking" },
        { when: "2023", role: "Backend Intern", org: "Armis · API integrations, testing" },
      ],
    },
    {
      type: "stack", label: "Tools I reach for",
      items: ["Python", "TypeScript", "Node.js", "React", "NestJS", "Postgres", "Redis", "Gemini", "WhatsApp Cloud API", "Meta Marketing API", "n8n", "Cloudflare R2", "Stripe", "Docker", "AWS"],
    },
    { type: "p", html: "If your business has repetitive work, slow campaign production, scattered tools, or AI ideas that have not become a system yet, I can help map, build, and ship it." },
  ],

  contactPretitle: "Available for work · 2026",
  contactPre: "Let's build",
  contactAccent: "the system your business needs.",
  email: "aborabeeomar@gmail.com",
  socials: [
    { label: "Email", href: "mailto:aborabeeomar@gmail.com" },
    { label: "GitHub", href: "https://github.com/omaraborabea1" },
    { label: "LinkedIn", href: "https://linkedin.com/in/omar-abo-rabea-software-engineer" },
    { label: "Phone", href: "tel:+972539613663" },
  ],
};

const SITE_TRANSLATIONS = {
  ar: {
    brandName: "عمر أبو ربيع",
    status: "متاح للعمل",
//    location: "إسرائيل · عن بُعد",
    eyebrow: "مهندس حلول ذكاء اصطناعي",
    headlinePre: "حلول ذكاء اصطناعي",
    headlineAccent: "توفّر",
    headlinePost: "ساعات عمل للشركات.",
    sub: "أساعد الشركات على اكتشاف وتصميم وبناء أنظمة ذكاء اصطناعي عملية: أتمتة، أدوات داخلية، مواقع، مسارات حملات، ومنتجات كاملة تقلّل العمل المتكرر وتسرّع الفريق.",
    nav: { services: "الخدمات", work: "الأعمال", about: "عنّي", contact: "تواصل", bookCall: "احجز مكالمة" },
    heroScroll: "مرّر للمتابعة",
    heroActions: { primary: "شاهد ما أبنيه", secondary: "أعمال مختارة" },
    heroProof: [
      { k: "01", v: "استراتيجية حلول AI" },
      { k: "02", v: "أتمتة وأدوات داخلية" },
      { k: "03", v: "Launcho: إعلانات من واتساب" },
    ],
    marquee: [
      "متاح الآن",
      "هندسة حلول AI",
      "أتمتة الأعمال",
      "مواقع ولوحات تحكم",
      "حملات Meta",
      "مسارات واتساب",
      "أدوات داخلية",
      "بناء منتجات كاملة",
      "أنظمة إبداعية بالذكاء الاصطناعي",
    ],
    sectionLabels: {
      servicesIdx: "01 / الخدمات",
      servicesLabel: "ما أقدّمه",
      workIdx: "02 / الأعمال",
      workLabel: "مشاريع مختارة",
      aboutIdx: "03 / عنّي",
      aboutLabel: "الملف الشخصي",
      aboutTitle: "عن عمر",
    },
    servicesHeadline: "ما أبنيه.",
    servicesKicker: "حلول ذكاء اصطناعي وبرمجيات وحملات عملية للشركات التي تريد عملًا يدويًا أقل ونتائج أكثر.",
    services: [
      {
        name: "استراتيجية حلول AI",
        desc: "أحدد أين يمكن للذكاء الاصطناعي أن يوفّر وقتًا فعليًا داخل عملك، أختار المسارات المناسبة، وأحوّل الأفكار العامة إلى خطة قابلة للبناء بعائد واضح.",
        tags: ["تدقيق", "خارطة طريق", "عائد"],
      },
      {
        name: "أتمتة وأدوات داخلية",
        desc: "مسارات عمل، لوحات تحكم، موافقات، CRM، مسارات محتوى، تكاملات API، وأنظمة واتساب تزيل العمل المتكرر.",
        tags: ["n8n", "APIs", "لوحات تحكم"],
      },
      {
        name: "مواقع ومنتجات كاملة",
        desc: "مواقع تسويقية، بوابات عملاء، لوحات SaaS، مدفوعات، تسجيل دخول، قواعد بيانات، نشر سحابي، وهندسة جاهزة للإنتاج.",
        tags: ["React", "NestJS", "Cloud"],
      },
      {
        name: "محرك حملات Launcho",
        desc: "منصة تعمل من واتساب: يرسل صاحب العمل نصًا أو صورة أو رسالة صوتية ويحصل خلال دقائق على تصميمات إعلانية، نصوص، موافقات، ونشر على Meta.",
        tags: ["واتساب", "إعلانات Meta", "إبداع AI"],
      },
    ],
    workHeadline: "أعمال مختارة.",
    workKicker: "نماذج تثبت ما يمكن بناؤه عبر منتجات AI، أنظمة أتمتة، وهندسة إنتاجية.",
    proofVisuals: [
      {
        type: "process",
        label: "Launcho",
        title: "صورة من واتساب. حملة جاهزة للنشر.",
        desc: "يرسل صاحب العمل صورة منتج أو نصًا قصيرًا أو رسالة صوتية. يفهم Launcho أسلوب العمل، يبني العرض، يصمم الإعلان، ثم ينقله إلى الموافقة والنشر.",
        steps: [
          { label: "صورة المنتج الأصلية", src: "uploads/case-studies/launcho-product-photo.png" },
          { label: "طلب واتساب", src: "uploads/case-studies/launcho-whatsapp-request.png" },
          { label: "الإعلان النهائي", src: "uploads/case-studies/launcho-generated-ad.png" },
        ],
      },
      {
        type: "wide",
        label: "أتمتة",
        title: "النظام خلف التجربة البسيطة.",
        desc: "خلف واجهة واتساب يوجد نظام أتمتة كامل: توجيه، قرارات AI، API، توليد وسائط، موافقات، خطوات نشر، وأقفال معالجة.",
        src: "uploads/case-studies/launcho-workflow-map.png",
      },
      {
        type: "system",
        label: "بناء",
        title: "مواقع، لوحات تحكم، وأنظمة حملات.",
        desc: "ليست كل نتيجة مجرد لقطة شاشة. أحيانًا أفضل قيمة تكون في البنية: صفحات سريعة، لوحات عملية، حملات Meta، وأدوات تجعل التشغيل أسهل.",
        stats: ["استراتيجية AI", "تطبيقات ويب", "حملات Meta", "أدوات داخلية"],
      },
    ],
    work: [
      { title: "Launcho", summary: "محرك حملات يعمل من واتساب ويولّد إعلانات، نصوص، معاينات، موافقات، ونشر على Meta من محادثة أو رسالة صوتية.", client: "منتج خاص", year: "2025" },
      { title: "أتمتة AI للعملاء", summary: "أنظمة عمل وأدوات داخلية وتشغيل حملات توفّر على الفرق ساعات كل أسبوع.", client: "عمل حر", year: "2024 — الآن" },
      { title: "منصة AI كاملة", summary: "Microservices، مدفوعات، Auth، لوحات تحكم، وميزات AI تم شحنها من البداية للنهاية.", client: "Veedy AI", year: "2024" },
      { title: "أنظمة قياس ASR", summary: "أدوات تقييم التعرف على الكلام، مسارات قياس، وأتمتة Python لاختبار النماذج.", client: "Verbit AI", year: "2023" },
      { title: "تكاملات Backend واختبارات", summary: "تكاملات API وبنية اختبارات لأدوات أمنية في الإنتاج.", client: "Armis", year: "2023" },
    ],
    aboutTeaser: {
      label: "الملف الشخصي",
      title: "المهندس خلف الأنظمة.",
      body: "أنا عمر، مهندس حلول ذكاء اصطناعي أبني أتمتة ومواقع ومسارات حملات ومنتجات كاملة توفّر وقتًا حقيقيًا للشركات.",
      cta: "اقرأ قصتي",
    },
    aboutIntroPre: "أنا عمر — مهندس حلول ذكاء اصطناعي أساعد الشركات على",
    aboutIntroAccent: "توفير الوقت بأنظمة AI عملية",
    aboutIntroPost: "من الأتمتة والمواقع إلى المنتجات الكاملة ومسارات الإعلانات.",
    aboutMeta: [
//      { k: "الموقع", v: "إسرائيل" },
      { k: "العمل", v: "عن بُعد · هجين" },
      { k: "الحالة", v: "متاح" },
      { k: "المجال", v: "AI · Web · Automation" },
    ],
    aboutBody: [
      { type: "p", html: "أعمل مع شركات تعرف أن الذكاء الاصطناعي يمكن أن يساعدها، لكنها تحتاج شخصًا يحوّل الفرصة إلى نظام حقيقي. قد يكون ذلك أتمتة، موقعًا، لوحة تحكم، مسار حملة، أداة داخلية، أو منتج SaaS كامل." },
      { type: "p", html: "تركيزي بسيط: أجد العمل اليدوي البطيء، أصمم أقصر مسار مفيد، ثم أبني شيئًا موثوقًا يمكن للناس استخدامه يوميًا." },
      { type: "quote", text: "الذكاء الاصطناعي الجيد لا يجيب فقط. هو ينجز العمل." },
      { type: "p", html: "<strong>Launcho</strong> هو المثال الأوضح: محرك حملات من داخل واتساب، يرسل فيه صاحب العمل صورة أو وصفًا أو رسالة صوتية ويحصل على تصميمات إعلانية، نصوص، معاينات، موافقات، ونشر على Meta خلال دقائق. يفهم أسلوب العمل بدل إنتاج نتائج عشوائية." },
      { type: "p", html: "خارج Launcho، أبني مواقع، مسارات حملات Meta، أدوات داخلية، أتمتة، وأنظمة AI يمكن أن توفّر على الفرق مئات أو آلاف الساعات سنويًا." },
      { type: "p", html: "قبل العمل المستقل، عملت في <strong>Veedy AI</strong> كمطور Full-stack، وعلى قياس أنظمة التعرف على الكلام في <strong>Verbit AI</strong>، وعلى تكاملات واختبارات Backend في <strong>Armis</strong>." },
      { type: "timeline", label: "المسار المهني", rows: [
        { when: "2024 — الآن", role: "مهندس حلول AI · Launcho وأنظمة عملاء", org: "مستقل" },
        { when: "2024", role: "مطور Full-stack", org: "Veedy AI · منصة AI، Microservices، مدفوعات" },
        { when: "2023", role: "متدرب Backend", org: "Verbit AI · ASR، Python، قياس نماذج" },
        { when: "2023", role: "متدرب Backend", org: "Armis · تكاملات API واختبارات" },
      ] },
      { type: "stack", label: "أدوات أستخدمها", items: ["Python", "TypeScript", "Node.js", "React", "NestJS", "Postgres", "Redis", "Gemini", "WhatsApp Cloud API", "Meta Marketing API", "n8n", "Cloudflare R2", "Stripe", "Docker", "AWS"] },
      { type: "p", html: "إذا كان لدى شركتك عمل متكرر، إنتاج حملات بطيء، أدوات مشتتة، أو أفكار AI لم تتحول بعد إلى نظام، يمكنني مساعدتك في التخطيط والبناء والشحن." },
    ],
    contactPretitle: "متاح للعمل · 2026",
    contactPre: "لنبنِ",
    contactAccent: "النظام الذي يحتاجه عملك.",
    socials: [
      { label: "البريد", href: "mailto:aborabeeomar@gmail.com" },
      { label: "GitHub", href: "https://github.com/omaraborabea1" },
      { label: "LinkedIn", href: "https://linkedin.com/in/omar-abo-rabea-software-engineer" },
      { label: "هاتف", href: "tel:+972539613663" },
    ],
  },
  he: {
    brandName: "עומר אבו רביע",
    status: "זמין לעבודה",
//    location: "ישראל · מרחוק",
    eyebrow: "מהנדס פתרונות AI",
    headlinePre: "מערכות AI שחוסכות",
    headlineAccent: "שעות",
    headlinePost: "לעסקים.",
    sub: "אני עוזר לעסקים למצוא, לתכנן ולבנות מערכות AI מעשיות: אוטומציות, כלים פנימיים, אתרים, תהליכי קמפיינים ומוצרים מלאים שמורידים עבודה חוזרת ומאיצים צוותים.",
    nav: { services: "שירותים", work: "עבודות", about: "עליי", contact: "יצירת קשר", bookCall: "לקביעת שיחה" },
    heroScroll: "גללו להמשך",
    heroActions: { primary: "מה אני בונה", secondary: "עבודות נבחרות" },
    heroProof: [
      { k: "01", v: "אסטרטגיית פתרונות AI" },
      { k: "02", v: "אוטומציות וכלים פנימיים" },
      { k: "03", v: "Launcho: מודעות מ-WhatsApp" },
    ],
    marquee: [
      "זמין עכשיו",
      "הנדסת פתרונות AI",
      "אוטומציה עסקית",
      "אתרים ודשבורדים",
      "קמפיינים ב-Meta",
      "תהליכי WhatsApp",
      "כלים פנימיים",
      "מוצרים מלאים",
      "מערכות קריאייטיב AI",
    ],
    sectionLabels: {
      servicesIdx: "01 / שירותים",
      servicesLabel: "מה אני עושה",
      workIdx: "02 / עבודות",
      workLabel: "פרויקטים נבחרים",
      aboutIdx: "03 / עליי",
      aboutLabel: "פרופיל",
      aboutTitle: "על עומר",
    },
    servicesHeadline: "מה אני בונה.",
    servicesKicker: "מערכות AI, תוכנה וקמפיינים לעסקים שרוצים פחות עבודה ידנית ויותר תפוקה.",
    services: [
      {
        name: "אסטרטגיית פתרונות AI",
        desc: "אני ממפה איפה AI באמת יכול לחסוך זמן בעסק, בוחר את התהליכים הנכונים, והופך רעיונות כלליים לתוכנית בנייה עם החזר ברור.",
        tags: ["אבחון", "מפת דרכים", "ROI"],
      },
      {
        name: "אוטומציות וכלים פנימיים",
        desc: "תהליכי עבודה, דשבורדים, אישורים, CRM, תהליכי תוכן, אינטגרציות API ומערכות WhatsApp שמסירות עבודה חוזרת.",
        tags: ["n8n", "APIs", "דשבורדים"],
      },
      {
        name: "אתרים ומוצרים מלאים",
        desc: "אתרי שיווק, פורטלים ללקוחות, דשבורדי SaaS, תשלומים, הרשאות, מסדי נתונים, פריסה לענן והנדסה מוכנה לפרודקשן.",
        tags: ["React", "NestJS", "Cloud"],
      },
      {
        name: "מנוע הקמפיינים Launcho",
        desc: "פלטפורמה מתוך WhatsApp שבה עסק שולח טקסט, תמונות או הודעה קולית ומקבל קריאייטיבים, קופי, אישורים ופרסום ל-Meta בתוך דקות.",
        tags: ["WhatsApp", "Meta Ads", "AI Creative"],
      },
    ],
    workHeadline: "עבודות נבחרות.",
    workKicker: "כמה הוכחות מתוך מוצרי AI, מערכות אוטומציה והנדסה לפרודקשן.",
    proofVisuals: [
      {
        type: "process",
        label: "Launcho",
        title: "קלט מ-WhatsApp. קמפיין מוכן לפרסום.",
        desc: "עסק שולח תמונת מוצר, טקסט קצר או הודעה קולית. Launcho מבין את סגנון המותג, יוצר הצעה, מעצב מודעה ומעביר אותה לאישור ולפרסום.",
        steps: [
          { label: "תמונת מוצר מקורית", src: "uploads/case-studies/launcho-product-photo.png" },
          { label: "בקשת WhatsApp", src: "uploads/case-studies/launcho-whatsapp-request.png" },
          { label: "המודעה הסופית", src: "uploads/case-studies/launcho-generated-ad.png" },
        ],
      },
      {
        type: "wide",
        label: "אוטומציה",
        title: "המערכת שמאחורי הקסם.",
        desc: "מאחורי חוויית WhatsApp פשוטה יש מערכת אמיתית: ניתוב, החלטות AI, קריאות API, יצירת מדיה, אישורים, פרסום ונעילות עיבוד.",
        src: "uploads/case-studies/launcho-workflow-map.png",
      },
      {
        type: "system",
        label: "בנייה",
        title: "אתרים, דשבורדים ומערכות קמפיינים.",
        desc: "לא כל תוצאה צריכה להיות צילום מסך. לפעמים הערך הוא במבנה: דפי נחיתה מהירים, דשבורדים שימושיים, תהליכי Meta וכלים שמקלים על התפעול.",
        stats: ["אסטרטגיית AI", "אפליקציות Web", "קמפיינים ב-Meta", "כלים פנימיים"],
      },
    ],
    work: [
      { title: "Launcho", summary: "מנוע קמפיינים מתוך WhatsApp שיוצר מודעות, קופי, תצוגות מקדימות, אישורים ופרסום ל-Meta מצ'אט או קול.", client: "מוצר עצמאי", year: "2025" },
      { title: "אוטומציות AI ללקוחות", summary: "מערכות עבודה, כלים פנימיים ותפעול קמפיינים שחוסכים לצוותים שעות בכל שבוע.", client: "פרילנס", year: "2024 — היום" },
      { title: "פלטפורמת AI מלאה", summary: "Microservices, תשלומים, Auth, דשבורדים ופיצ'רים של AI שנבנו מקצה לקצה.", client: "Veedy AI", year: "2024" },
      { title: "מערכות Benchmark ל-ASR", summary: "כלי הערכת זיהוי דיבור, תהליכי מדידה ואוטומציה ב-Python לבדיקת מודלים.", client: "Verbit AI", year: "2023" },
      { title: "אינטגרציות Backend ובדיקות", summary: "אינטגרציות API ותשתיות בדיקה לכלי אבטחה בפרודקשן.", client: "Armis", year: "2023" },
    ],
    aboutTeaser: {
      label: "פרופיל",
      title: "המהנדס שמאחורי המערכות.",
      body: "אני עומר, מהנדס פתרונות AI שבונה אוטומציות, אתרים, תהליכי קמפיינים ומוצרים מלאים שחוסכים לעסקים זמן אמיתי.",
      cta: "קראו את הסיפור",
    },
    aboutIntroPre: "אני עומר — מהנדס פתרונות AI שעוזר לעסקים",
    aboutIntroAccent: "לחסוך זמן עם מערכות AI מעשיות",
    aboutIntroPost: "מאוטומציות ואתרים ועד מוצרים מלאים ותהליכי פרסום.",
    aboutMeta: [
//      { k: "מיקום", v: "ישראל" },
      { k: "עבודה", v: "מרחוק · היברידי" },
      { k: "סטטוס", v: "זמין" },
      { k: "תחום", v: "AI · Web · Automation" },
    ],
    aboutBody: [
      { type: "p", html: "אני עובד עם עסקים שיודעים ש-AI יכול לעזור, אבל צריכים מישהו שיהפוך את ההזדמנות למערכת אמיתית. זה יכול להיות אוטומציה, אתר, דשבורד, תהליך קמפיין, כלי פנימי או מוצר SaaS מלא." },
      { type: "p", html: "הפוקוס שלי פשוט: למצוא את העבודה הידנית האיטית, לתכנן את התהליך הקצר והשימושי ביותר, ואז לבנות משהו אמין שאנשים באמת ישתמשו בו כל יום." },
      { type: "quote", text: "AI טוב לא רק עונה על שאלות. הוא מסיים עבודה." },
      { type: "p", html: "<strong>Launcho</strong> הוא הדוגמה המרכזית שלי: מנוע קמפיינים מתוך WhatsApp שבו עסק שולח תמונת מוצר, תיאור או הודעה קולית ומקבל קריאייטיבים, קופי, תצוגות מקדימות, אישורים ופרסום ל-Meta בתוך דקות. הוא מבין את סגנון העסק במקום להפיק תוצאות אקראיות." },
      { type: "p", html: "מעבר ל-Launcho, אני בונה אתרים, תהליכי קמפיינים ב-Meta, כלים פנימיים, אוטומציות ומערכות AI שיכולות לחסוך לצוותים מאות או אלפי שעות בשנה." },
      { type: "p", html: "לפני העבודה העצמאית עבדתי ב-<strong>Veedy AI</strong> כמפתח Full-stack, על מערכות Benchmark לזיהוי דיבור ב-<strong>Verbit AI</strong>, ועל אינטגרציות ובדיקות Backend ב-<strong>Armis</strong>." },
      { type: "timeline", label: "איפה הייתי", rows: [
        { when: "2024 — היום", role: "מהנדס פתרונות AI · Launcho ומערכות לקוחות", org: "עצמאי" },
        { when: "2024", role: "מפתח Full-stack", org: "Veedy AI · פלטפורמת AI, Microservices, תשלומים" },
        { when: "2023", role: "מתמחה Backend", org: "Verbit AI · ASR, Python, Benchmarking" },
        { when: "2023", role: "מתמחה Backend", org: "Armis · אינטגרציות API ובדיקות" },
      ] },
      { type: "stack", label: "כלים שאני משתמש בהם", items: ["Python", "TypeScript", "Node.js", "React", "NestJS", "Postgres", "Redis", "Gemini", "WhatsApp Cloud API", "Meta Marketing API", "n8n", "Cloudflare R2", "Stripe", "Docker", "AWS"] },
      { type: "p", html: "אם לעסק שלכם יש עבודה חוזרת, הפקת קמפיינים איטית, כלים מפוזרים או רעיונות AI שעדיין לא הפכו למערכת, אני יכול לעזור לתכנן, לבנות ולהוציא את זה לאוויר." },
    ],
    contactPretitle: "זמין לעבודה · 2026",
    contactPre: "בואו נבנה",
    contactAccent: "את המערכת שהעסק שלכם צריך.",
    socials: [
      { label: "אימייל", href: "mailto:aborabeeomar@gmail.com" },
      { label: "GitHub", href: "https://github.com/omaraborabea1" },
      { label: "LinkedIn", href: "https://linkedin.com/in/omar-abo-rabea-software-engineer" },
      { label: "טלפון", href: "tel:+972539613663" },
    ],
  },
};

function readLanguage() {
  return typeof getEffectiveLanguage === "function" ? getEffectiveLanguage("en") : (document.documentElement.dataset.language || "en");
}

function getLocalizedSiteData(language) {
  return { ...SITE_DATA, ...(SITE_TRANSLATIONS[language] || {}) };
}

// ============================================================
// Tweak defaults — wrapped so host can persist edits
// ============================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "copper",
  "mode": "dark",
  "type": "editorial",
  "cursor": "aurora",
  "scrollWorld": true,
  "grain": true,
  "grainOpacity": 0.04,
  "videoSrc": ""
}/*EDITMODE-END*/;

const PALETTE_OPTIONS = [
  ["#c97a4a", "#0e0c0a", "#f4ece2"], // copper
  ["#4ade80", "#07100b", "#e7f0e9"], // forest
  ["#818cf8", "#0a0c14", "#e8eaf3"], // indigo
];
const PALETTE_NAMES = ["copper", "forest", "indigo"];
const PALETTE_LABELS = {
  copper: "A · Copper Obsidian",
  forest: "B · Terminal Forest",
  indigo: "C · Midnight Indigo",
};
const HERO_MEDIA = {
  copper: {
    dark: {
      type: "video",
      src: "uploads/hero/video-copper-obsidian-dark.mp4",
      poster: "uploads/hero/copper-obsidian-dark.jpeg",
    },
    light: {
      type: "video",
      src: "uploads/hero/video-copper-obsidian-light.mp4",
      poster: "uploads/hero/copper-obsidian-light.jpg",
    },
  },
  forest: {
    dark: {
      type: "video",
      src: "uploads/hero/video-terminal-forest-dark.mp4",
      poster: "uploads/hero/terminal-forest-dark.jpg",
    },
    light: {
      type: "video",
      src: "uploads/hero/video-terminal-forest-light.mp4",
      poster: "uploads/hero/terminal-forest-light.jpg",
    },
  },
  indigo: {
    dark: { type: "image", src: "uploads/hero/midnight-indigo-dark.jpg" },
    light: { type: "image", src: "uploads/hero/midnight-indigo-light.jpg" },
  },
};

function resolveHeroMedia(palette, mode, fallbackVideoSrc) {
  const mapped = HERO_MEDIA[palette]?.[mode] || HERO_MEDIA[palette]?.dark || HERO_MEDIA.copper.dark;
  if (mapped) return mapped;
  return fallbackVideoSrc ? { type: "video", src: fallbackVideoSrc } : null;
}

// ============================================================
// App
// ============================================================
function App() {
  const [language, setLanguage] = useState(readLanguage);
  const [t, setTweak] = useTweaks(
    typeof getSiteTweaks === "function" ? getSiteTweaks(TWEAK_DEFAULTS) : TWEAK_DEFAULTS
  );
  const readEffectiveTweaks = React.useCallback(() => ({
    palette: typeof getEffectivePalette === "function" ? getEffectivePalette(t.palette) : t.palette,
    mode: typeof getEffectiveMode === "function" ? getEffectiveMode(t.mode) : t.mode,
  }), [t.palette, t.mode]);
  const [effectiveTweaks, setEffectiveTweaks] = useState(readEffectiveTweaks);

  // Apply to <html> so cascade hits everything
  useEffect(() => {
    const root = document.documentElement;
    const next = readEffectiveTweaks();
    root.dataset.palette = next.palette;
    root.dataset.mode = next.mode;
    root.dataset.type = t.type;
    root.style.setProperty("--grain-opacity", t.grain ? String(t.grainOpacity) : "0");
    setEffectiveTweaks(next);
  }, [readEffectiveTweaks, t.type, t.grain, t.grainOpacity]);

  useEffect(() => {
    const syncEffectiveTweaks = () => setEffectiveTweaks(readEffectiveTweaks());
    window.addEventListener("sitepalettechange", syncEffectiveTweaks);
    window.addEventListener("sitemodechange", syncEffectiveTweaks);
    syncEffectiveTweaks();
    return () => {
      window.removeEventListener("sitepalettechange", syncEffectiveTweaks);
      window.removeEventListener("sitemodechange", syncEffectiveTweaks);
    };
  }, [readEffectiveTweaks]);

  useEffect(() => {
    const syncGlobalSettings = (event) => {
      const tweaks = event.detail?.settings?.tweaks;
      if (tweaks) setTweak(tweaks);
    };
    window.addEventListener("sitesettingschange", syncGlobalSettings);
    return () => window.removeEventListener("sitesettingschange", syncGlobalSettings);
  }, [setTweak]);

  useEffect(() => {
    const syncLanguage = () => setLanguage(readLanguage());
    window.addEventListener("sitelanguagechange", syncLanguage);
    syncLanguage();
    return () => window.removeEventListener("sitelanguagechange", syncLanguage);
  }, []);

  const heroMedia = resolveHeroMedia(effectiveTweaks.palette, effectiveTweaks.mode, t.videoSrc);
  const siteData = getLocalizedSiteData(language);

  return React.createElement(
    React.Fragment,
    null,
    t.scrollWorld && React.createElement(ScrollWorld, null),
    t.grain && React.createElement("div", { className: "grain" }),
    React.createElement(Cursor, { style: t.cursor }),
    React.createElement(SiteNav, { data: siteData }),
    React.createElement(Hero, { data: siteData, media: heroMedia }),
    React.createElement(Marquee, { items: siteData.marquee }),
    React.createElement(Services, { data: siteData }),
    React.createElement(Work, { data: siteData }),
    React.createElement(AboutTeaser, { data: siteData }),
    React.createElement(Contact, { data: siteData }),

    // Tweaks
    React.createElement(
      TweaksPanel, { title: "Tweaks" },
      React.createElement(
        TweakSection, { label: "Palette" },
        React.createElement(TweakColor, {
          label: "Color system",
          value: PALETTE_OPTIONS[PALETTE_NAMES.indexOf(t.palette)],
          options: PALETTE_OPTIONS,
          onChange: (v) => {
            const match = PALETTE_OPTIONS.findIndex(p => JSON.stringify(p) === JSON.stringify(v));
            if (match >= 0) setTweak("palette", PALETTE_NAMES[match]);
          },
        }),
        React.createElement("div", {
          style: {
            fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em",
            textTransform: "uppercase", color: "var(--ink-mute, #888)",
            margin: "-4px 0 6px", textAlign: "right",
          },
        }, PALETTE_LABELS[t.palette]),
        React.createElement(TweakRadio, {
          label: "Mode",
          value: t.mode,
          options: [
            { value: "dark", label: "Dark" },
            { value: "light", label: "Light" },
          ],
          onChange: (v) => setTweak("mode", v),
        })
      ),
      React.createElement(
        TweakSection, { label: "Typography" },
        React.createElement(TweakSelect, {
          label: "Type pairing",
          value: t.type,
          options: [
            { value: "editorial", label: "Editorial serif + grotesque" },
            { value: "grotesque", label: "Tight grotesque" },
            { value: "terminal", label: "Mono display + sans body" },
            { value: "geometric", label: "Wide geometric + neutral" },
          ],
          onChange: (v) => setTweak("type", v),
        })
      ),
      React.createElement(
        TweakSection, { label: "Motion & feel" },
        React.createElement(TweakSelect, {
          label: "Cursor",
          value: t.cursor,
          options: [
            { value: "aurora", label: "Aurora glow" },
            { value: "spotlight", label: "Spotlight reveal" },
            { value: "comet", label: "Comet trail" },
            { value: "off", label: "Off (native)" },
          ],
          onChange: (v) => setTweak("cursor", v),
        }),
        React.createElement(TweakToggle, {
          label: "Scroll island background",
          value: t.scrollWorld,
          onChange: (v) => setTweak("scrollWorld", v),
        }),
        React.createElement(TweakToggle, {
          label: "Grain overlay",
          value: t.grain,
          onChange: (v) => setTweak("grain", v),
        }),
        t.grain && React.createElement(TweakSlider, {
          label: "Grain intensity",
          value: t.grainOpacity,
          min: 0, max: 0.12, step: 0.005,
          onChange: (v) => setTweak("grainOpacity", v),
        })
      ),
      React.createElement(
        TweakSection, { label: "Hero video" },
        React.createElement("div", { style: { fontSize: 11, color: "var(--ink-mute, #888)", lineHeight: 1.5, marginBottom: 8, padding: "0 2px" } },
          "Path or URL. Until you set one, the animated fallback plays."),
        React.createElement("input", {
          type: "text",
          value: t.videoSrc || "",
          placeholder: "e.g. uploads/hero.mp4",
          onChange: (e) => setTweak("videoSrc", e.target.value),
          style: {
            width: "100%", padding: "8px 10px", fontSize: 12,
            background: "rgba(0,0,0,0.25)", color: "#fff",
            border: "1px solid rgba(255,255,255,0.15)", borderRadius: 6,
            fontFamily: "ui-monospace, monospace",
          },
        })
      )
    )
  );
}

// Global defaults come from the admin file; visitor palette/mode choices stay local.

ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));