const { useState } = React;

const weeks = [
  {
    week: 1,
    title: "أسبوع الإطلاق",
    subtitle: "Launch Week",
    color: "#00ff9d",
    goal: "بناء الهوية البصرية + أول 4 فيديوهات",
    days: [
      {
        day: 1,
        label: "الإعداد",
        type: "setup",
        title: "🔧 يوم الإعداد الكامل",
        tasks: [
          "إنشاء حساب يوتيوب وانستا بنفس الاسم",
          "اختر اسم القناة: شيء مثل RealOrAI / AIvsEye / SpotTheAI",
          "صمّم لوغو بـ Canva (مجاني) — لونين فقط، أسود وأخضر نيون",
          "حمّل OBS و CapCut",
          "اعمل حساب على: Ideogram.ai + Leonardo.ai + Pexels",
          "جهّز مجلد على الكمبيوتر: Photos/Real + Photos/AI + Videos/Raw + Videos/Final",
        ],
        tip: "اسم القناة مهم جداً — يجب أن يكون سهل النطق لأي شخص في العالم",
      },
      {
        day: 2,
        label: "فيديو ١",
        type: "video",
        title: "🎬 أول فيديو: وجوه بشرية",
        category: "Human Faces",
        hook: '"Can YOU tell which face is AI? 99% fail this 👇"',
        structure: [
          "0-2 ثانية: نص كبير 'REAL or AI?' على شاشة سوداء",
          "2-12 ثانية: صورتان جنب بعض — لا تكشف شيئاً",
          "12-17 ثانية: عداد تنازلي 3..2..1 مع موسيقى توتر",
          "17-25 ثانية: إطار أخضر يحيط الحقيقية + نص REAL",
          "25-30 ثانية: CTA — 'Follow for daily AI challenges'",
        ],
        tools: ["Bing Image Creator للوجه AI", "Pexels للوجه الحقيقي"],
        description: `🤖 REAL or AI? Can you spot the difference?\n\n99% of people fail to tell the difference between AI-generated faces and real ones.\n\nComment your answer BEFORE the reveal! ⬇️\n\n#AIvsReal #ArtificialIntelligence #AIArt #SpotTheAI #AIChallenge #MindBlowing #Viral`,
      },
      {
        day: 3,
        label: "نشر ١",
        type: "publish",
        title: "📤 نشر الفيديو الأول + إعداد البايو",
        tasks: [
          "انشر على يوتيوب Shorts + انستا Reels في نفس الوقت",
          "أفضل وقت نشر: 12 ظهراً أو 7 مساءً بتوقيت GMT+3",
          "بايو انستا: '🤖 Real or AI? You decide. New challenge daily ⬇️ [رابط يوتيوب]'",
          "رد على كل تعليق خلال أول ساعتين — الخوارزمية تراقب هذا",
          "لا تشتري متابعين أبداً — يدمر الحساب",
        ],
        tip: "أول 48 ساعة بعد النشر هي الأهم — تفاعل مع كل من يعلق",
      },
      {
        day: 4,
        label: "فيديو ٢",
        type: "video",
        title: "🎬 فيديو ٢: غرف وديكور",
        category: "Interior Design",
        hook: '"This room costs $0 to design. Guess which one 👇"',
        structure: [
          "0-3 ثانية: نص 'Which room is AI-designed?'",
          "3-15 ثانية: غرفة A vs غرفة B — دوّر ببطء على كل واحدة",
          "15-20 ثانية: صوت تصويت + نسبة مئوية وهمية تتحرك",
          "20-28 ثانية: الكشف مع تأثير صوتي مفاجئ",
          "28-35 ثانية: 'The AI tool used 👆 link in bio'",
        ],
        tools: ["Ideogram.ai للغرفة AI", "Unsplash للغرفة الحقيقية"],
        description: `🏠 Which room was designed by AI?\n\nAI interior design tools can now create photorealistic rooms in seconds — for FREE.\n\nCan you spot the difference? Comment A or B! ⬇️\n\nTool used: [اسم الأداة] — Link in bio 🔗\n\n#AIDesign #InteriorDesign #AIvsReal #HomeDecor #AIArt #FutureOfDesign`,
      },
      {
        day: 5,
        label: "فيديو ٣",
        type: "video",
        title: "🎬 فيديو ٣: طعام ومأكولات",
        category: "Food Photography",
        hook: '"This food photo is FAKE. But you can\'t tell 🍕"',
        structure: [
          "0-2 ثانية: صورة طعام جميلة تملأ الشاشة",
          "2-8 ثانية: نص يظهر ببطء 'Real or AI?'",
          "8-18 ثانية: الصورة الثانية تنزلق من الجانب",
          "18-23 ثانية: موسيقى توتر + عداد",
          "23-30 ثانية: كشف + ردة فعل نصية مبالغ فيها 'YOU WON'T BELIEVE IT'",
        ],
        tools: ["Ideogram.ai يتقن الطعام بشكل رهيب", "Unsplash للطعام الحقيقي"],
        description: `🍕 This food photo is NOT real. But can you tell which one?\n\nAI is now so good at generating food images that even professional photographers can't tell the difference!\n\nComment: Which one do you think is FAKE? ⬇️\n\n#AIFood #FoodPhotography #AIvsReal #ArtificialIntelligence #AIArt #MindBlown`,
      },
      {
        day: 6,
        label: "فيديو ٤",
        type: "video",
        title: "🎬 فيديو ٤: مناظر طبيعية",
        category: "Landscapes",
        hook: '"This place doesn\'t exist. Or does it? 🌄"',
        structure: [
          "0-3 ثانية: منظر خلاب يملأ الشاشة ببطء",
          "3-5 ثانية: نص 'This place is NOT real'",
          "5-15 ثانية: مقارنة مع منظر حقيقي مشابه",
          "15-22 ثانية: تصويت ومؤقت",
          "22-30 ثانية: كشف + 'AI made this in 3 seconds'",
        ],
        tools: ["Bing Image Creator للمناظر", "Unsplash للطبيعة الحقيقية"],
        description: `🌄 This breathtaking landscape doesn't exist in real life.\n\nAI generated this entire scene in under 3 seconds — completely free.\n\nCan you tell which landscape is AI? Comment below! ⬇️\n\n#AILandscape #AIArt #NaturePhotography #AIvsReal #GenerativeAI #MindBlowing`,
      },
      {
        day: 7,
        label: "تحليل",
        type: "analysis",
        title: "📊 يوم التحليل والتعديل",
        tasks: [
          "راجع إحصائيات كل فيديو: Watch Time + Engagement Rate",
          "أي فيديو حصل على أكثر تعليقات؟ كرر نفس النوع",
          "اقرأ التعليقات — الناس تقترح أفكار بدون ما تعرف",
          "إذا فيديو تجاوز 500 مشاهدة في أول أسبوع = أنت على الطريق الصح",
          "لا تغير الاستراتيجية بعد أسبوع واحد — الصبر مطلوب",
        ],
        tip: "KPI الأسبوع الأول: 100+ مشاهدة لكل فيديو + 10+ تعليق = نجاح مبدئي",
      },
    ],
  },
  {
    week: 2,
    title: "أسبوع التنويع",
    subtitle: "Diversification Week",
    color: "#00d4ff",
    goal: "اختبار أنواع مختلفة + إيجاد النوع الأقوى",
    days: [
      {
        day: 8,
        label: "فيديو ٥",
        type: "video",
        title: "🎬 فيديو ٥: أصوات بشرية",
        category: "AI Voice",
        hook: '"One of these voices is NOT human. Listen carefully 🎧"',
        structure: [
          "0-3 ثانية: أذن تصغي + نص 'REAL or AI Voice?'",
          "3-18 ثانية: صوت A يتكلم 5 ثوان، ثم صوت B",
          "18-25 ثانية: تصويت + توتر موسيقي",
          "25-32 ثانية: كشف + اسم الأداة",
        ],
        tools: ["ElevenLabs للصوت AI (مجاني محدود)", "أي تسجيل بشري حقيقي"],
        description: `🎧 Can you tell which voice is AI?\n\nAI voice technology has reached a point where even trained ears can't detect it.\n\nListen carefully and comment: A or B? ⬇️\n\nThis changes EVERYTHING about how we create content.\n\n#AIVoice #ElevenLabs #AIvsReal #FutureOfAudio #ArtificialIntelligence #MindBlown`,
      },
      {
        day: 9,
        label: "فيديو ٦",
        type: "video",
        title: "🎬 فيديو ٦: حيوانات",
        category: "Animals",
        hook: '"This animal has NEVER existed. Can you guess which? 🐾"',
        structure: [
          "0-2 ثانية: حيوان غريب وجميل يملأ الشاشة",
          "2-8 ثانية: نص بطيء 'Real animal or AI creation?'",
          "8-18 ثانية: حيوان حقيقي مشابه للمقارنة",
          "18-28 ثانية: كشف + نص 'This creature NEVER existed'",
        ],
        tools: ["Bing Image Creator لحيوانات خيالية", "Pexels لحيوانات حقيقية"],
        description: `🐾 This creature has NEVER existed in real life.\n\nAI can now generate photorealistic animals that look 100% real — but are completely fictional.\n\nCan you spot the AI-generated animal? ⬇️\n\n#AIAnimals #AIArt #AIvsReal #GenerativeAI #WildlifePhotography #Unbelievable`,
      },
      {
        day: 10,
        label: "فيديو ٧",
        type: "video",
        title: "🎬 فيديو ٧: ملابس وموضة",
        category: "Fashion",
        hook: '"This fashion brand doesn\'t exist. But it should 👗"',
        structure: [
          "0-3 ثانية: إطلالة أزياء فاخرة + نص 'Real or AI Fashion?'",
          "3-15 ثانية: 3 صور متتالية — واحدة فقط AI",
          "15-22 ثانية: تصويت",
          "22-30 ثانية: كشف + 'AI designed this entire collection'",
        ],
        tools: ["Ideogram.ai ممتاز للموضة", "Instagram للأزياء الحقيقية Creative Commons"],
        description: `👗 This entire fashion collection was designed by AI.\n\nNo designer. No photographer. No studio.\n\nJust a text prompt — and this is the result.\n\nCan you tell which outfit is AI? ⬇️\n\n#AIFashion #FashionDesign #AIvsReal #GenerativeAI #AIArt #FutureOfFashion`,
      },
      {
        day: 11,
        label: "فيديو ٨",
        type: "video",
        title: "🎬 فيديو ٨: مدن وعمارة",
        category: "Architecture",
        hook: '"This city doesn\'t exist on any map 🏙️"',
        structure: [
          "0-3 ثانية: مدينة مستقبلية خيالية",
          "3-15 ثانية: مقارنة مع مدينة حقيقية (دبي مثلاً)",
          "15-23 ثانية: تصويت",
          "23-30 ثانية: كشف + 'AI built this city in 4 seconds'",
        ],
        tools: ["Bing Image Creator للمدن المستقبلية", "Unsplash لمدن حقيقية"],
        description: `🏙️ This futuristic city doesn't exist on any map.\n\nAI can now design entire cities, buildings, and skylines in seconds.\n\nReal city or AI creation? Comment below ⬇️\n\n#AIArchitecture #FuturisticCity #AIvsReal #GenerativeAI #CityDesign #AIArt`,
      },
      {
        day: 12,
        label: "فيديو ٩",
        type: "video",
        title: "🎬 فيديو ٩: فن ولوحات",
        category: "Art & Paintings",
        hook: '"One of these paintings sold for $10,000. One cost $0 🎨"',
        structure: [
          "0-3 ثانية: لوحتان فنيتان جميلتان",
          "3-15 ثانية: تكبير تدريجي على تفاصيل كل لوحة",
          "15-22 ثانية: 'Which one is worth $10,000?'",
          "22-32 ثانية: كشف مفاجئ + 'AI made the expensive-looking one'",
        ],
        tools: ["Ideogram للفن التجريدي", "WikiArt للفن الحقيقي المفتوح المصدر"],
        description: `🎨 One of these paintings sold for thousands of dollars. The other cost absolutely NOTHING.\n\nCan you tell which one is the AI-generated artwork?\n\nComment your guess! ⬇️\n\n#AIArt #DigitalArt #AIvsReal #GenerativeAI #ArtVsAI #MindBlowing #Painting`,
      },
      {
        day: 13,
        label: "فيديو ١٠",
        type: "video",
        title: "🎬 فيديو ١٠: أطفال وعائلات",
        category: "Children",
        hook: '"These kids don\'t exist. But they look 100% real 👶"',
        structure: [
          "0-3 ثانية: صورة طفل귀يل جداً",
          "3-12 ثانية: صور متتالية — أيها حقيقي؟",
          "12-20 ثانية: 'If AI can fake children, what else can it fake?'",
          "20-28 ثانية: كشف + تفكير عميق",
        ],
        tools: ["Bing Image Creator", "Pexels للأطفال الحقيقيين"],
        description: `👶 These children have never existed in real life.\n\nAI can now generate photorealistic images of people who don't exist — babies, kids, adults, elderly.\n\nThis raises BIG questions about the future.\n\nReal or AI? ⬇️\n\n#AIvsReal #GenerativeAI #AIFaces #FutureOfAI #AIArt #MindBlown #DeepFake`,
      },
      {
        day: 14,
        label: "تحليل ٢",
        type: "analysis",
        title: "📊 تحليل الأسبوع الثاني + تحديد النيش الفرعي",
        tasks: [
          "قارن كل الفيديوهات العشرة: أيها أعلى Watch Time؟",
          "أيها أكثر تعليقاً؟ هذا النوع هو سلاحك السري",
          "ابدأ بتكرار النوع الناجح 2 مرة أسبوعياً بدل مرة",
          "ابحث عن أكبر 5 قنوات مشابهة وحلل أكثر فيديوهاتهم مشاهدة",
          "أضف Linktree في البايو مع روابط Affiliate الأولى",
        ],
        tip: "بعد 10 فيديوهات، المعطيات تكفي لتعرف اتجاهك الصحيح",
      },
    ],
  },
  {
    week: 3,
    title: "أسبوع التسريع",
    subtitle: "Growth Week",
    color: "#ff6b35",
    goal: "الضغط على النوع الناجح + بناء Affiliate أولي",
    days: [
      {
        day: 15,
        label: "استراتيجية",
        type: "setup",
        title: "⚡ يوم إعادة الاستراتيجية",
        tasks: [
          "بناءً على الأسبوعين الماضيين، اختر نوعين فقط للتركيز عليهما",
          "اصنع قالب CapCut جاهز للنوع الأول (يوفر 70% من الوقت)",
          "اصنع قالب CapCut جاهز للنوع الثاني",
          "جهّز 20 صورة AI جاهزة مسبقاً لهذا الأسبوع",
          "سجّل في Leonardo AI Affiliate Program",
          "سجّل في Canva Affiliate Program",
        ],
        tip: "القوالب الجاهزة تحوّل صناعة الفيديو من ساعتين إلى 30 دقيقة",
      },
      {
        day: 16,
        label: "فيديو ١١",
        type: "video",
        title: "🎬 فيديو ١١: نوع A المتكرر (الأنجح)",
        structure: [
          "نفس هيكل الفيديو الأنجح في الأسبوعين الماضيين",
          "لكن أصعب مستوى — جعل التمييز أصعب",
          "أضف نص 'HARDEST LEVEL YET' في البداية",
          "هذا يرفع التحدي ويزيد المشاركة",
        ],
        tools: ["استخدم أدوات AI أقوى هذه المرة للنتيجة الأكثر واقعية"],
        description: `🔥 HARDEST LEVEL YET — Can you STILL tell the difference?\n\nWe made this one extra difficult. Most people will fail.\n\nComment your answer BEFORE the reveal! Are you brave enough? ⬇️\n\n#AIvsReal #HardestLevel #AIChallenge #GenerativeAI #AIArt #CanYouTell`,
      },
      {
        day: 17,
        label: "فيديو ١٢",
        type: "video",
        title: "🎬 فيديو ١٢: نوع B المتكرر (الثاني الأنجح)",
        structure: [
          "نفس المنهج — لكن زد عليه 'Level 2'",
          "الناس تحب التسلسل والتدرج",
          "اجعل الكشف أكثر دراماتيكية هذه المرة",
        ],
        tools: ["نفس أدوات الأسبوع الأول لكن بدقة أعلى"],
        description: `😱 Level 2 — This time it's IMPOSSIBLE to tell.\n\nWe've upgraded the AI quality. Even experts are getting this wrong.\n\nDo you think YOU can spot it? ⬇️\n\n#AIvsReal #Level2 #AIArt #GenerativeAI #MindBlowing #AIChallenge`,
      },
      {
        day: 18,
        label: "فيديو ١٣",
        type: "video",
        title: "🎬 فيديو ١٣: فيديو 'تعليمي خفي'",
        category: "Educational Twist",
        hook: '"3 signs that reveal AI images EVERY time 🔍"',
        structure: [
          "0-5 ثانية: صورة AI يصعب اكتشافها",
          "5-25 ثانية: دوائر حمراء تظهر على 3 تفاصيل تكشف أنها AI",
          "25-35 ثانية: 'Now you know the secret — try the next one'",
          "35-45 ثانية: صورة جديدة — هل تستطيع تطبيق ما تعلمته؟",
        ],
        tools: ["CapCut لإضافة الدوائر والأسهم"],
        description: `🔍 3 secret signs that ALWAYS reveal AI images.\n\nOnce you know these tricks, you can never be fooled again.\n\nSave this video — you'll need it 👆\n\n#AIDetection #AIvsReal #HowToSpotAI #AITips #GenerativeAI #AILiteracy`,
      },
      {
        day: 19,
        label: "فيديو ١٤",
        type: "video",
        title: "🎬 فيديو ١٤: نوع A مرة ثالثة",
        structure: [
          "زد صعوبة المستوى",
          "استخدم مقطع فيديو بدل صورة ثابتة إذا أمكن",
          "أضف عنصر صوتي جديد لزيادة التشويق",
        ],
        tools: ["Pika Labs لتوليد فيديو AI مجاناً"],
        description: `🎬 Wait... is this video REAL or AI?\n\nAI video generation has reached a scary level of realism.\n\nWatch carefully. Comment: REAL or AI? ⬇️\n\n#AIVideo #AIvsReal #GenerativeAI #PikaLabs #AIArt #VideoAI #FutureIsNow`,
      },
      {
        day: 20,
        label: "فيديو ١٥",
        type: "video",
        title: "🎬 فيديو ١٥: تحدي المجتمع",
        category: "Community Challenge",
        hook: '"YOU choose the next AI challenge 🗳️"',
        structure: [
          "0-5 ثانية: ملخص سريع لأفضل لحظات الأسبوعين",
          "5-20 ثانية: 'Which category should we test next?'",
          "20-35 ثانية: 4 خيارات على الشاشة — اطلب التعليق",
          "35-45 ثانية: 'Most voted wins — follow to see the result'",
        ],
        tools: ["CapCut للمونتاج فقط"],
        description: `🗳️ YOU decide what we test next!\n\nComment the NUMBER of your choice:\n1️⃣ AI vs Real Celebrities\n2️⃣ AI vs Real Cars\n3️⃣ AI vs Real Babies\n4️⃣ AI vs Real Sunsets\n\nMost votes wins! 👇\n\n#AIChallenge #CommunityVote #AIvsReal #YouDecide #GenerativeAI`,
      },
      {
        day: 21,
        label: "Affiliate",
        type: "analysis",
        title: "💰 يوم إعداد الـ Affiliate الكامل",
        tasks: [
          "أنشئ Linktree أو bio.link مجاناً",
          "أضف هذه الروابط بالترتيب: 1-Leonardo AI 2-Canva Pro 3-ElevenLabs",
          "اكتب في البايو: '🔗 Tools I use to create these videos ⬇️'",
          "كل رابط Affiliate يجب أن تجرب الأداة فعلاً — المصداقية أساسية",
          "ابدأ بتتبع الكليكات في Linktree",
        ],
        tip: "لا تضع أكثر من 3 روابط في البداية — الكثير يربك المتابع",
      },
    ],
  },
  {
    week: 4,
    title: "أسبوع الحصاد",
    subtitle: "Monetization Week",
    color: "#ffd700",
    goal: "تحسين الجودة + بدء تحقيق الدخل + التخطيط للشهر القادم",
    days: [
      {
        day: 22,
        label: "فيديو ١٦",
        type: "video",
        title: "🎬 فيديو ١٦: Viral Bait — أصعب تحدي",
        hook: '"Scientists can\'t even tell. Can you? 🧪"',
        structure: [
          "0-3 ثانية: نص كبير 'SCIENTISTS FAILED THIS'",
          "3-20 ثانية: مقارنة صعبة جداً جداً",
          "20-25 ثانية: تصويت بدون مؤقت — اتركهم يفكرون",
          "25-35 ثانية: كشف مفاجئ",
          "35-40 ثانية: 'Share this — nobody will get it right'",
        ],
        tools: ["Midjourney إذا أمكن الوصول، أو Ideogram بأعلى جودة"],
        description: `🧪 Even AI researchers can't pass this test.\n\nThis is the hardest AI vs Real challenge we've ever made.\n\nDare to try? Comment your answer ⬇️\n\nShare with someone you think can beat it 👀\n\n#ImpossibleChallenge #AIvsReal #GenerativeAI #HardestEver #AIArt #ShareThis`,
      },
      {
        day: 23,
        label: "فيديو ١٧",
        type: "video",
        title: "🎬 فيديو ١٧: نوع الفائز من التصويت",
        structure: [
          "أعمل الفيديو الذي فاز بالتصويت في اليوم 20",
          "في البداية أذكر 'You voted for this!'",
          "هذا يجعل الجمهور يشعر أنه جزء من القناة",
        ],
        tools: ["أدوات حسب الفئة المختارة"],
        description: `✅ YOU voted for this challenge — so here it is!\n\nThank you for 500+ votes on our last poll 🙏\n\nNow let's see if you can actually tell the difference...\n\nComment: REAL or AI? ⬇️\n\n#YourChoice #CommunityPick #AIvsReal #GenerativeAI #AIChallenge`,
      },
      {
        day: 24,
        label: "فيديو ١٨",
        type: "video",
        title: "🎬 فيديو ١٨: Behind The Scenes",
        category: "Educational",
        hook: '"How I make these videos in 30 minutes (full process) 📱"',
        structure: [
          "0-5 ثانية: نتيجة نهائية جذابة",
          "5-35 ثانية: screen recording للعملية كاملة",
          "35-50 ثانية: قائمة الأدوات المستخدمة",
          "50-60 ثانية: 'All tools are FREE — links in bio 👆'",
        ],
        tools: ["OBS للتسجيل", "CapCut للمونتاج"],
        description: `📱 Full tutorial: How I make AI vs Real videos in 30 minutes.\n\nAll tools are 100% FREE. No paid software needed.\n\nSave this video for later! 💾\n\n🔗 All tools linked in bio\n\n#Tutorial #AITools #FreeAITools #ContentCreation #AIvsReal #HowTo #ContentCreatorTips`,
      },
      {
        day: 25,
        label: "فيديو ١٩",
        type: "video",
        title: "🎬 فيديو ١٩: فيديو الـ Milestone",
        category: "Milestone",
        hook: '"1000 followers. Thank you. Here\'s our hardest challenge yet 🏆"',
        structure: [
          "0-5 ثانية: شكر الجمهور بنص كبير",
          "5-35 ثانية: أصعب مقارنة حتى الآن",
          "35-45 ثانية: 'Help us reach 10K — share this video'",
        ],
        tools: ["أعلى جودة ممكنة لهذا الفيديو"],
        description: `🏆 We hit our first milestone — THANK YOU!\n\nTo celebrate, here's our hardest AI vs Real challenge ever made.\n\nIf this video surprises you — share it. Help us grow 🙏\n\n#Milestone #ThankYou #AIvsReal #GenerativeAI #AIChallenge #Community`,
      },
      {
        day: 26,
        label: "فيديو ٢٠",
        type: "video",
        title: "🎬 فيديو ٢٠: Top 5 Fails",
        category: "Compilation",
        hook: '"The 5 times AI completely fooled everyone 😂"',
        structure: [
          "0-5 ثانية: 'Top 5 most viral moments'",
          "5-50 ثانية: مقاطع من أفضل 5 فيديوهات سابقة",
          "50-60 ثانية: 'Which fooled you the most? Comment the number'",
        ],
        tools: ["CapCut للمونتاج — لا تحتاج أدوات AI جديدة"],
        description: `😂 The 5 times AI COMPLETELY fooled everyone on this channel.\n\nEven WE were surprised by these results.\n\nWhich one fooled you? Comment the number 1-5 ⬇️\n\n#TopMoments #AIFails #AIvsReal #Compilation #GenerativeAI #BestOf`,
      },
      {
        day: 27,
        label: "فيديو ٢١",
        type: "video",
        title: "🎬 فيديو ٢١: نوع جديد تجريبي",
        category: "Experimental",
        hook: '"We tried something NEW. First channel to ever test this 🚀"',
        structure: [
          "جرب نوعاً لم تجربه بعد — موسيقى AI vs حقيقية؟ شعر AI vs بشري؟",
          "الجدة تجذب المتابعين الجدد",
          "ضع 'FIRST ON THIS CHANNEL' في البداية",
        ],
        tools: ["حسب النوع المختار"],
        description: `🚀 We've never tested THIS before.\n\nAnd we're pretty sure no other channel has either.\n\nThis one will SURPRISE you — guarantee it.\n\nComment: REAL or AI? ⬇️\n\n#NewChallenge #FirstEver #AIvsReal #GenerativeAI #AIArt #Experimental`,
      },
      {
        day: 28,
        label: "تحليل نهائي",
        type: "analysis",
        title: "📊 التحليل النهائي + خطة الشهر الثاني",
        tasks: [
          "ارسم جدول لكل 21 فيديو: المشاهدات + التعليقات + Watch Time",
          "حدد أفضل 3 فيديوهات وكرر نفس فكرتها شهرياً",
          "راجع Affiliate clicks — هل بدأت تظهر؟",
          "ابحث عن Affiliate Programs جديدة: Envato, Adobe, Canva",
          "خطط لأول collaboration مع قناة مشابهة",
          "ضع هدف واضح للشهر الثاني: 5K متابع و أول $50 Affiliate",
        ],
        tip: "الشهر الأول للتجربة، الشهر الثاني للتسريع، الشهر الثالث للحصاد",
      },
      {
        day: "29-30",
        label: "Batch Production",
        type: "setup",
        title: "🏭 يومان الإنتاج الجماعي",
        tasks: [
          "اجلس مع صديقك وانتجوا 8 فيديوهات دفعة واحدة",
          "اليوم 29: توليد جميع الصور AI للأسبوع القادمين",
          "اليوم 29: إعداد وتجهيز المواد الخام",
          "اليوم 30: مونتاج الـ 8 فيديوهات",
          "احفظوها جاهزة للنشر على مدار أسبوعين",
          "هكذا تصبح صناعة المحتوى عملية وليست عبئاً",
        ],
        tip: "Batch Production = تنتجون أسبوعين في يومين. هذا سر الاستمرارية",
      },
    ],
  },
];

const typeConfig = {
  video: { bg: "rgba(0,255,157,0.08)", border: "#00ff9d", icon: "🎬" },
  setup: { bg: "rgba(0,212,255,0.08)", border: "#00d4ff", icon: "⚙️" },
  analysis: { bg: "rgba(255,215,0,0.08)", border: "#ffd700", icon: "📊" },
  publish: { bg: "rgba(255,107,53,0.08)", border: "#ff6b35", icon: "📤" },
};

function Plan() {
  const [activeWeek, setActiveWeek] = useState(0);
  const [expandedDay, setExpandedDay] = useState(null);

  const week = weeks[activeWeek];

  return (
    <div style={{
      minHeight: "100vh",
      background: "#050508",
      color: "#e8e8f0",
      fontFamily: "'Segoe UI', system-ui, sans-serif",
      direction: "rtl",
    }}>
      {/* Header */}
      <div style={{
        background: "linear-gradient(135deg, #0a0a14 0%, #0d0d1a 100%)",
        borderBottom: "1px solid rgba(255,255,255,0.06)",
        padding: "32px 24px 24px",
        textAlign: "center",
        position: "relative",
        overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", inset: 0,
          background: `radial-gradient(ellipse at 50% 0%, rgba(0,255,157,0.08) 0%, transparent 70%)`,
        }} />
        <div style={{ position: "relative" }}>
          <div style={{ fontSize: 13, letterSpacing: 4, color: "#00ff9d", marginBottom: 10, opacity: 0.8 }}>
            CONTENT STRATEGY
          </div>
          <h1 style={{
            fontSize: 28, fontWeight: 800, margin: "0 0 8px",
            background: "linear-gradient(135deg, #fff 0%, #00ff9d 100%)",
            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
          }}>
            🤖 AI vs Real — خطة 30 يوم
          </h1>
          <p style={{ color: "rgba(255,255,255,0.4)", fontSize: 14, margin: 0 }}>
            خطة احترافية مفصلة لبناء قناة عالمية من الصفر
          </p>
        </div>
      </div>

      {/* Stats Bar */}
      <div style={{
        display: "flex", gap: 1, background: "rgba(255,255,255,0.03)",
        borderBottom: "1px solid rgba(255,255,255,0.06)",
      }}>
        {[
          { label: "فيديو", value: "21" },
          { label: "منصة", value: "2" },
          { label: "أداة مجانية", value: "8+" },
          { label: "هدف متابع", value: "5K" },
        ].map((s, i) => (
          <div key={i} style={{
            flex: 1, padding: "14px 8px", textAlign: "center",
            borderRight: i < 3 ? "1px solid rgba(255,255,255,0.04)" : "none",
          }}>
            <div style={{ fontSize: 22, fontWeight: 800, color: "#00ff9d" }}>{s.value}</div>
            <div style={{ fontSize: 11, color: "rgba(255,255,255,0.3)", marginTop: 2 }}>{s.label}</div>
          </div>
        ))}
      </div>

      {/* Week Tabs */}
      <div style={{
        display: "flex", gap: 8, padding: "16px",
        overflowX: "auto", borderBottom: "1px solid rgba(255,255,255,0.06)",
      }}>
        {weeks.map((w, i) => (
          <button key={i} onClick={() => { setActiveWeek(i); setExpandedDay(null); }} style={{
            flex: "0 0 auto",
            padding: "10px 16px",
            background: activeWeek === i ? w.color : "rgba(255,255,255,0.04)",
            color: activeWeek === i ? "#000" : "rgba(255,255,255,0.5)",
            border: `1px solid ${activeWeek === i ? w.color : "rgba(255,255,255,0.06)"}`,
            borderRadius: 10, cursor: "pointer", fontSize: 13, fontWeight: 700,
            transition: "all 0.2s", whiteSpace: "nowrap",
          }}>
            الأسبوع {i + 1}
          </button>
        ))}
      </div>

      {/* Week Header */}
      <div style={{
        padding: "20px 16px 12px",
        borderBottom: "1px solid rgba(255,255,255,0.04)",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }}>
          <div style={{
            width: 4, height: 32, borderRadius: 2,
            background: week.color,
          }} />
          <div>
            <div style={{ fontSize: 18, fontWeight: 800, color: "#fff" }}>{week.title}</div>
            <div style={{ fontSize: 12, color: week.color, opacity: 0.8 }}>{week.subtitle}</div>
          </div>
        </div>
        <div style={{
          background: `linear-gradient(135deg, ${week.color}15, transparent)`,
          border: `1px solid ${week.color}30`,
          borderRadius: 10, padding: "10px 14px",
          fontSize: 13, color: "rgba(255,255,255,0.7)",
        }}>
          🎯 <strong style={{ color: "#fff" }}>هدف الأسبوع:</strong> {week.goal}
        </div>
      </div>

      {/* Days */}
      <div style={{ padding: "12px 16px", display: "flex", flexDirection: "column", gap: 8 }}>
        {week.days.map((day, i) => {
          const cfg = typeConfig[day.type] || typeConfig.video;
          const key = `${activeWeek}-${i}`;
          const isOpen = expandedDay === key;

          return (
            <div key={key} style={{
              background: isOpen ? cfg.bg : "rgba(255,255,255,0.02)",
              border: `1px solid ${isOpen ? cfg.border : "rgba(255,255,255,0.06)"}`,
              borderRadius: 12, overflow: "hidden", transition: "all 0.3s",
            }}>
              <button onClick={() => setExpandedDay(isOpen ? null : key)} style={{
                width: "100%", padding: "14px 16px",
                display: "flex", alignItems: "center", gap: 12,
                background: "transparent", border: "none", cursor: "pointer",
                textAlign: "right", color: "#fff",
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 8, flexShrink: 0,
                  background: `${cfg.border}20`,
                  border: `1px solid ${cfg.border}40`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontSize: 16,
                }}>
                  {cfg.icon}
                </div>
                <div style={{ flex: 1, textAlign: "right" }}>
                  <div style={{ fontSize: 11, color: cfg.border, marginBottom: 3, opacity: 0.8 }}>
                    يوم {day.day}
                  </div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: "#fff" }}>{day.title}</div>
                </div>
                <div style={{
                  color: "rgba(255,255,255,0.3)", fontSize: 18,
                  transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
                  transition: "transform 0.3s",
                }}>›</div>
              </button>

              {isOpen && (
                <div style={{ padding: "0 16px 16px", borderTop: `1px solid ${cfg.border}20` }}>

                  {/* Hook */}
                  {day.hook && (
                    <div style={{
                      marginTop: 14,
                      background: "rgba(255,255,255,0.04)", borderRadius: 8,
                      padding: "10px 14px", fontSize: 13,
                      color: "#ffd700", fontStyle: "italic",
                      borderRight: `3px solid #ffd700`,
                    }}>
                      🎣 Hook: {day.hook}
                    </div>
                  )}

                  {/* Structure */}
                  {day.structure && (
                    <div style={{ marginTop: 14 }}>
                      <div style={{ fontSize: 12, color: cfg.border, marginBottom: 8, fontWeight: 700 }}>
                        📐 هيكل الفيديو
                      </div>
                      {day.structure.map((s, si) => (
                        <div key={si} style={{
                          display: "flex", gap: 10, marginBottom: 6, alignItems: "flex-start",
                        }}>
                          <div style={{
                            width: 20, height: 20, borderRadius: 4, flexShrink: 0,
                            background: `${cfg.border}25`, color: cfg.border,
                            fontSize: 11, display: "flex", alignItems: "center",
                            justifyContent: "center", fontWeight: 700, marginTop: 1,
                          }}>{si + 1}</div>
                          <div style={{ fontSize: 13, color: "rgba(255,255,255,0.75)", lineHeight: 1.5 }}>{s}</div>
                        </div>
                      ))}
                    </div>
                  )}

                  {/* Tasks */}
                  {day.tasks && (
                    <div style={{ marginTop: 14 }}>
                      <div style={{ fontSize: 12, color: cfg.border, marginBottom: 8, fontWeight: 700 }}>
                        ✅ المهام
                      </div>
                      {day.tasks.map((t, ti) => (
                        <div key={ti} style={{
                          display: "flex", gap: 10, marginBottom: 8, alignItems: "flex-start",
                        }}>
                          <div style={{
                            width: 18, height: 18, borderRadius: 4, flexShrink: 0,
                            border: `1.5px solid ${cfg.border}60`,
                            marginTop: 2,
                          }} />
                          <div style={{ fontSize: 13, color: "rgba(255,255,255,0.75)", lineHeight: 1.5 }}>{t}</div>
                        </div>
                      ))}
                    </div>
                  )}

                  {/* Tools */}
                  {day.tools && (
                    <div style={{ marginTop: 12 }}>
                      <div style={{ fontSize: 12, color: cfg.border, marginBottom: 8, fontWeight: 700 }}>
                        🛠️ الأدوات
                      </div>
                      <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                        {day.tools.map((t, ti) => (
                          <span key={ti} style={{
                            padding: "5px 10px", borderRadius: 6, fontSize: 12,
                            background: `${cfg.border}15`,
                            border: `1px solid ${cfg.border}30`,
                            color: cfg.border,
                          }}>{t}</span>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* Description */}
                  {day.description && (
                    <div style={{ marginTop: 14 }}>
                      <div style={{ fontSize: 12, color: cfg.border, marginBottom: 8, fontWeight: 700 }}>
                        📝 الوصف الجاهز للنسخ
                      </div>
                      <div style={{
                        background: "rgba(0,0,0,0.4)", borderRadius: 8,
                        padding: "12px 14px", fontSize: 12,
                        color: "rgba(255,255,255,0.7)", lineHeight: 1.8,
                        fontFamily: "monospace", whiteSpace: "pre-line",
                        border: "1px solid rgba(255,255,255,0.08)",
                        wordBreak: "break-all",
                      }}>
                        {day.description}
                      </div>
                    </div>
                  )}

                  {/* Tip */}
                  {day.tip && (
                    <div style={{
                      marginTop: 14,
                      background: "rgba(255,215,0,0.06)",
                      border: "1px solid rgba(255,215,0,0.2)",
                      borderRadius: 8, padding: "10px 14px",
                      fontSize: 12, color: "rgba(255,215,0,0.9)",
                      lineHeight: 1.6,
                    }}>
                      💡 <strong>نصيحة:</strong> {day.tip}
                    </div>
                  )}
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* Bottom Summary */}
      <div style={{
        margin: "8px 16px 32px",
        background: "rgba(255,255,255,0.02)",
        border: "1px solid rgba(255,255,255,0.06)",
        borderRadius: 12, padding: "16px",
      }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: "#fff", marginBottom: 12 }}>
          🔑 قواعد الـ 30 يوم
        </div>
        {[
          ["الاتساق أهم من الكمال", "فيديو متوسط منشور أفضل من فيديو مثالي لم يُنشر"],
          ["لا تحذف أي فيديو", "حتى لو حصل على 10 مشاهدات فقط — السوشيال يتأخر أحياناً"],
          ["الصبر هو الاستراتيجية", "30 يوم لا يكفي للشهرة لكن يكفي لمعرفة الاتجاه الصحيح"],
          ["التعليقات هي بيانات مجانية", "كل تعليق فكرة فيديو جديدة"],
        ].map(([title, desc], i) => (
          <div key={i} style={{
            display: "flex", gap: 10, marginBottom: i < 3 ? 10 : 0,
            paddingBottom: i < 3 ? 10 : 0,
            borderBottom: i < 3 ? "1px solid rgba(255,255,255,0.04)" : "none",
          }}>
            <div style={{ color: "#00ff9d", fontSize: 16, flexShrink: 0, marginTop: 1 }}>✓</div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: "#fff", marginBottom: 2 }}>{title}</div>
              <div style={{ fontSize: 12, color: "rgba(255,255,255,0.45)", lineHeight: 1.5 }}>{desc}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Plan />);