/* Syllabus cards that fly in from alternating sides as you scroll.
   Each card is clickable - expanding reveals the full lesson list for the chapter. */
function FlyingCards() {
  const isMobile = useIsMobile();
  const modules = [
    {
      n:'01', t:'מבוא',
      d:'מבוא לקורס, למה העולם עובר ל-AI, איך זה משנה את הדרך שעושים כסף היום, ואיזה מערכות אפשר לבנות.',
      lessons:[
        'שיעור מבוא לקורס',
        'למה העולם עובר ל-AI ואיך זה משנה את הדרך שבה עושים כסף היום',
        'מערכות שאפשר לעשות ב-AI',
      ],
    },
    {
      n:'02', t:'היכרות עם Claude',
      d:'מה זה Claude, המערכות הקיימות, Claude Chat ו-Cowork, והדגמה חיה של בנייה תוך דקות - בלי קוד.',
      lessons:[
        'מה זה Claude והמערכות הקיימות ב-Claude',
        'Claude Chat: Web, Desktop, Cowork',
        'הדגמה חיה - בניית משהו פשוט תוך דקות, בלי קוד',
      ],
    },
    {
      n:'03', t:'שיווק: מהמוצר לשוק',
      d:'תוכנית שיווקית, איתור נישה רווחית, מחקר מתחרים, הצעה שמוכרת ופיילוט להכנסה קבועה.',
      lessons:[
        'תוכנית שיווקית למוצר AI - איך לתכנן את הדרך מהרעיון ללקוחות משלמים',
        'איתור נישה רווחית - איך למצוא כאב, ביקוש וכסף אמיתי',
        'מחקר מתחרים ובידול - איך לזהות מה חסר בשוק ולמה שיקנו דווקא מכם',
        'הצעה שיווקית שמוכרת - איך להפוך מערכת טכנולוגית לפתרון שקל להבין ולקנות',
        'מקוד לקאש - איך להפוך פיילוט ראשון להכנסה חודשית קבועה',
      ],
    },
    {
      n:'04', t:'פרסומות וסרטונים עם AI',
      d:'Higgsfield, אווטארים לעסקים, סרטוני פרסום בדקות, AI Video Swap, ואוטומציה של ויזואלים עם Claude Code.',
      lessons:[
        'מה זה Higgsfield ולמה זה כלי חזק לעסקים',
        'אווטארים לעסקים: ליצור פרזנטור בלי יום צילום',
        'Higgsfield: להפוך מוצר לסרטון פרסומי בכמה דקות',
        'מתמונה סטטית לסרטון חי: יצירת וידאו ב-Higgsfield',
        'AI Video Swap: איך מחליפים דמות בסרטון קיים',
        'Claude Code לווידאו: אוטומציה של יצירת תמונות וסרטונים',
      ],
    },
    {
      n:'05', t:'פרומפטים וחשיבה נכונה',
      d:'יסודות הפרומפט, מבנה מנצח (הקשר + מטרה + פורמט + קהל), סוגי פרומפטים, טעויות נפוצות, והנדסה לאחור.',
      lessons:[
        'יסודות ה-Prompt - איך לדבר נכון עם AI',
        'מבנה Prompt מנצח: הקשר + מטרה + פורמט + קהל יעד',
        'סוגי פרומפטים שכל אחד חייב להכיר',
        'טעויות בפרומפטים שמפילות מתחילים',
        'הנדסה לאחור: איך לבקש מ-Claude לכתוב עבורכם את הפרומפט המושלם',
      ],
    },
    {
      n:'06', t:'התקנה ל-Claude Code',
      d:'התקנת VSCode, חיבור Claude Code, היכרות עם הממשק, יצירת תיקייה והרשאות - והקמת הפרויקט הראשון.',
      lessons:[
        'התקנת VSCode - ה״משרד״ שבו העובד שלנו יושב, צעד אחר צעד',
        'חיבור Claude Code למערכת',
        'היכרות עם הממשק של Claude Code',
        'יצירת תיקייה לפרויקט ומתן הרשאות',
        'הדגמה חיה: הקמת הפרויקט הראשון',
      ],
    },
    {
      n:'07', t:'יסודות Claude Code',
      d:'טוקנים, מודלים, פקודות Slash מותאמות, ניהול קונטקסט, מצבי עבודה, CLAUDE.md, וייבוא מ-Lovable / Base44.',
      lessons:[
        'מה זה טוקנים',
        'סוגי מודלים והבדלים',
        'פקודות Slash',
        'יצירת פקודות מותאמות אישית',
        'חלון ההקשר וניהול קונטקסט',
        'סוגי המצבים הקיימים',
        'קובץ CLAUDE.md - ספר החוקים של הפרויקט',
        'ייבוא ועבודה על פרויקטים שנבנו בפלטפורמות אחרות כמו Lovable ו-Base44',
      ],
    },
    {
      n:'08', t:'שיטות עבודה מומלצות',
      d:'חוק הברזל: לתאר תוצאה, לא תהליך. Context Files, עבודה במקביל ומשימות מתוזמנות - והדגמה חיה לבניית CRM מלא.',
      lessons:[
        'חוק הברזל: תארו את התוצאה הסופית, אל תסבירו לקלוד איך לעבוד - כולל הדגמה לבניית מערכת CRM',
        'Context Files - הטריק שישדרג הכל',
        'עבודה במקביל ומשימות מתוזמנות',
        'הנחיות כלליות לפרויקט',
      ],
    },
    {
      n:'09', t:'נכסים דיגיטליים מהירים',
      d:'אתרי תדמית מאפס, אתר חדש למיתוג קיים, פרסומות AI עם Remotion, ודף נחיתה למוצר משלך - כמו זה שאתה רואה עכשיו.',
      lessons:[
        'איך לבקש מקלוד לבנות אתרי תדמית לעסקים מאפס, כולל דוגמה חיה',
        'בניית אתר חדש עם מיתוג של עסק קיים',
        'יוצרים פרסומות AI עם Claude Code ו-Remotion',
        'מאפס לדף נחיתה של עשרות אלפי שקלים: איך בניתי את עמוד המכירה של הקורס עם AI',
      ],
    },
    {
      n:'10', t:'Claude Design',
      d:'Design System למותג, מצגות, אנימציות, אפליקציית מובייל, תבניות, דף נחיתה יוקרתי וייצוא ל-Claude Code.',
      lessons:[
        'מה זה Claude Design ולמה זה עניין גדול',
        'מה אפשר לבנות עם Claude Design',
        'מגבלות, עלויות ומה לצפות',
        'יצירת Design System למותג שלכם',
        'יצירת מצגת מקצועית עם העיצוב של המותג שלכם',
        'יצירת אנימציות וסרטונים עם עיצוב המותג שלכם',
        'בניית עיצוב מלא לאפליקציית מובייל עם המותג שלכם',
        'שימוש בתבניות מוכנות מראש לבניית אתר מלא ב-10 דקות עבודה',
        'בניית דף נחיתה יוקרתי מ-0',
        'שיתוף, ייצוא וחיבור ל-Claude Code',
      ],
    },
    {
      n:'11', t:'יכולות מתקדמות וחיבורים',
      d:'גיבוי ב-GitHub, Skills מותאמים, Plugins, Subagents, חיבור MCP, מנהל קמפיינים במטא, ועריכת וידאו אוטומטית.',
      lessons:[
        'גיבוי אוטומטי: איך להגיד לקלוד לשמור את הפרויקט ב-GitHub כדי ששום דבר לא ילך לאיבוד',
        'מה הם Skills',
        'התקנת Skills בתוך Claude Code',
        'יצירת Skill מותאם אישית - כולל הדגמת Skill לרעיונות שיווקיים לסרטונים ולהכנת שיחת מכירה לפני שיחה עם לידים',
        'מה הם Plugins ב-Claude Code',
        'איך מתקינים Plugins - כולל הדגמת Plugin שנותן ל-Claude גישה לדפדפן',
        'מה הם Subagents - כולל הדגמת בניית סוכן שמבצע מחקר על מתחרים',
        'חיבור מערכות אחרות ל-Claude Code עם MCP',
        'יצירת Plugin בעצמנו - כולל הדגמת פלאגין שיכול להחליף צוות Marketing שלם',
        'איך לבנות מנהל קמפיינים במטא בשילוב קלוד',
        'עריכת וידאו אוטומטית: יצירת Intro, Outro, B-rolls וכתוביות',
      ],
    },
    {
      n:'12', t:'פרויקט גמר · Flow מלא',
      d:'Agents לפי תחומי התמחות, פרומפט "אדריכל", שילוב Skills, תוכנית בנייה מלאה ותחילת בניית המערכת.',
      lessons:[
        'תחילת פרויקט גמר - יצירת Agents המחולקים לפי תחומי התמחות לניהול הפרויקט',
        'בניית פרומפט "אדריכל" - הפרומפט המרכזי שמנהל את כל הפרויקט',
        'שימוש ב-Skills כחלק בלתי נפרד מהתהליך',
        'בניית תוכנית מלאה לבניית המוצר וחלוקה לפי שלבים',
        'תחילת בניית המערכת לפי התוכנית המלאה',
      ],
    },
    {
      n:'13', t:'מערכות ליבה למוצר',
      d:'מסד נתונים ב-Supabase, ממשק גרפי, בדיקות, התחברות עם Google, ממשק ניהול וחיבור סליקה לתשלומים.',
      lessons:[
        'מה זה מסד נתונים (Database) - הסבר ויזואלי פשוט, כמו קובץ אקסל חכם, ויצירת חשבון ב-Supabase',
        'חיבור מסד הנתונים עם Claude Code ומתן גישה לבניית מסד הנתונים',
        'תחילת עבודה על הממשק הגרפי ובדיקה ראשונית של המערכת',
        'בדיקה של המוצר שבנה קלוד, שיפורים ובאגים (QA)',
        'הטמעת התחברות עם Google',
        'בניית ממשק ניהול (Admin Panel) למעקב ונתונים',
        'חיבור מערכת סליקה לקבלת תשלומים',
      ],
    },
    {
      n:'14', t:'אבטחה, איכות, יציבות',
      d:'מה חובה לבדוק לפני שלוחצים השקה, הפרדת קבצי פיתוח מהמערכת החיה, Skill לבדיקת אבטחה, וצ׳קליסט מוכן להדבקה.',
      lessons:[
        'מה חובה לבדוק לפני שלוחצים על כפתור ההשקה',
        'הפרדת הקבצים של הפיתוח וקבצי המערכת הסופיים',
        'שימוש ב-Skill לבדיקת אבטחת מידע של המערכת שבנינו',
        'בדיקת אבטחת מידע על מסד הנתונים של המערכת',
        'צ׳קליסט בטיחות חובה לפני השקה - כולל פרומפט מוכן להדבקה',
      ],
    },
    {
      n:'15', t:'השקה ופריסה לאוויר',
      d:'דומיין, אחסון ושרת בשפה פשוטה. Vercel, פריסת הפרויקט, רכישת דומיין וחיבור לכל המערכות.',
      lessons:[
        'מה זה דומיין, אחסון ושרת - בשפה פשוטה וברורה',
        'היכרות עם Vercel',
        'פריסת הפרויקט בקלות ל-Vercel',
        'רכישת דומיין וחיבור ל-Vercel',
        'עדכון הדומיין החדש בכל המערכות',
      ],
    },
    {
      n:'16', t:'פרויקטים עסקיים',
      d:'מפעל תוכן אוטומטי (30 רעיונות/יום), דיוור חכם במייל ו-WhatsApp, ייצוא קבלות, פגישות, וסוכן מענה ללקוחות.',
      lessons:[
        'מפעל התוכן האוטומטי - יצירת 30 רעיונות ביום לפרסום',
        'בניית מערכת דיוור חכמה למייל, WhatsApp רשמי ו-WhatsApp לא רשמי',
        'שימוש ב-Claude Cowork לייצוא כל הקבלות של העסק והכנת טבלה מפורטת',
        'בניית מערכת קביעת פגישות ללקוחות',
        'בניית סוכן AI למענה ללקוחות והטמעה באתר שלנו',
      ],
    },
    {
      n:'17', t:'ספריות ובונוסים',
      d:'11 פלאגינים חינמיים שתרצו להתקין, ספריית ~200 פרומפטים מוכנים לשימוש מיידי, וסיכום הקורס.',
      lessons:[
        '11 הפלאגינים החינמיים שתרצו להתקין',
        'מדריך כ-200 פרומפטים מוכנים לשימוש מיידי',
        'סיכום קורס',
      ],
    },
  ];

  return (
    <section id="syllabus" style={{background:'#0A0907',padding: isMobile ? '90px 14px' : '160px 24px',position:'relative'}}>
      <div style={{maxWidth:1280,margin:'0 auto'}}>
        <div style={{textAlign:'center',marginBottom: isMobile ? 56 : 96}}>
          <div style={{fontSize: isMobile ? 11 : 13,letterSpacing:'0.18em',textTransform:'uppercase',color:'#EEB332',marginBottom: isMobile ? 12 : 18}}>סילבוס הקורס</div>
          <h2 style={{fontFamily:'Open Sans',fontWeight:900,fontSize: isMobile ? 'clamp(28px,7vw,40px)' : 'clamp(44px,5.5vw,84px)',lineHeight:1.15,letterSpacing:'-0.02em',margin:0,color:'#F5F2ED'}}>
            17 פרקים. <span style={{color:'#EEB332'}}>94 שיעורים.</span> שום דבר לא חסר.
          </h2>
          <p style={{marginTop: isMobile ? 12 : 18,fontSize: isMobile ? 13 : 15,color:'rgba(245,242,237,0.55)',letterSpacing:'0.04em'}}>לחצו על פרק כדי לראות את כל השיעורים בו ↓</p>
        </div>

        <div style={{display:'flex',flexDirection:'column',gap: isMobile ? 14 : 24}}>
          {modules.map((m, i) => <FlyCard key={m.n} m={m} side={i % 2 === 0 ? 'right' : 'left'} idx={i} />)}
        </div>
      </div>
    </section>
  );
}

function FlyCard({m, side, idx}) {
  const [ref, shown] = useReveal(0.25);
  const [open, setOpen] = React.useState(false);
  const [hovered, setHovered] = React.useState(false);
  const isMobile = useIsMobile();
  const dir = side === 'right' ? 1 : -1;

  const active = open || hovered;

  const toggle = () => setOpen(o => !o);
  const onKey = (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      toggle();
    }
  };

  return (
    <article
      ref={ref}
      role="button"
      tabIndex={0}
      aria-expanded={open}
      onClick={toggle}
      onKeyDown={onKey}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        position:'relative',
        transform: shown ? 'translateX(0) scale(1)' : `translateX(${dir * 120}px) scale(0.96)`,
        opacity: shown ? 1 : 0,
        transition: `transform 800ms cubic-bezier(0.22,1,0.36,1) ${idx*40}ms, opacity 600ms ease ${idx*40}ms, border-color 220ms, box-shadow 220ms`,
        background: '#13110F',
        border: `1px solid ${active ? '#EEB332' : 'rgba(238,179,50,0.18)'}`,
        borderRadius: 5,
        cursor: 'pointer',
        boxShadow: active ? '0 0 40px -10px rgba(238,179,50,0.4)' : 'none',
        overflow:'hidden',
        outline:'none',
      }}
    >
      {/* Summary row */}
      {isMobile ? (
        <div style={{padding:'20px 18px'}}>
          <div style={{display:'flex', alignItems:'flex-start', gap:14, marginBottom:10}}>
            <div style={{fontFamily:'Open Sans', fontWeight:900, fontSize:44, color: active ? '#EEB332' : '#DD9933', lineHeight:0.9, letterSpacing:'-0.04em', transition:'color 220ms', flexShrink:0, paddingTop:2}}>{m.n}</div>
            <h3 style={{fontFamily:'Open Sans', fontWeight:800, fontSize:20, letterSpacing:'-0.01em', margin:0, color:'#F5F2ED', lineHeight:1.2, flex:1}} dangerouslySetInnerHTML={{__html: m.t}} />
          </div>
          <p style={{margin:'0 0 12px', fontSize:14, lineHeight:1.55, color:'rgba(245,242,237,0.65)'}} dangerouslySetInnerHTML={{__html: m.d}} />
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:12}}>
            <span style={{fontSize:12, color:'#7A7773', letterSpacing:'0.04em'}}>{m.lessons.length} שיעורים</span>
            <span aria-hidden="true" style={{
              width:32, height:32,
              border:`1px solid ${active ? '#EEB332' : 'rgba(238,179,50,0.4)'}`,
              borderRadius:'50%',
              display:'flex', alignItems:'center', justifyContent:'center',
              color:'#EEB332',
              transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
              transition:'transform 320ms cubic-bezier(0.22,1,0.36,1), border-color 220ms',
              fontSize:13, lineHeight:1, paddingTop:2,
            }}>▾</span>
          </div>
        </div>
      ) : (
        <div style={{
          padding: '32px 36px',
          display: 'grid',
          gridTemplateColumns: '140px 1fr 150px',
          gap: 32,
          alignItems: 'center',
        }}>
          <div style={{fontFamily:'Open Sans',fontWeight:900,fontSize:80,color: active ? '#EEB332' : '#DD9933',lineHeight:0.9,letterSpacing:'-0.04em',transition:'color 220ms'}}>{m.n}</div>
          <div>
            <h3 style={{fontFamily:'Open Sans',fontWeight:800,fontSize:32,letterSpacing:'-0.01em',margin:0,color:'#F5F2ED'}} dangerouslySetInnerHTML={{__html: m.t}} />
            <p style={{margin:'10px 0 0',fontSize:17,lineHeight:1.6,color:'rgba(245,242,237,0.65)'}} dangerouslySetInnerHTML={{__html: m.d}} />
          </div>
          <div style={{display:'flex',justifyContent:'flex-end',alignItems:'center',gap:14}}>
            <span style={{fontSize:13,color:'#7A7773',letterSpacing:'0.04em'}}>{m.lessons.length} שיעורים</span>
            <span aria-hidden="true" style={{
              width:36,height:36,
              border:`1px solid ${active ? '#EEB332' : 'rgba(238,179,50,0.4)'}`,
              borderRadius:'50%',
              display:'flex',alignItems:'center',justifyContent:'center',
              color:'#EEB332',
              transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
              transition:'transform 320ms cubic-bezier(0.22,1,0.36,1), border-color 220ms',
              fontSize:14, lineHeight:1, paddingTop:2,
            }}>▾</span>
          </div>
        </div>
      )}

      {/* Expandable lessons list - grid-template-rows 0fr → 1fr smooth height */}
      <div style={{
        display:'grid',
        gridTemplateRows: open ? '1fr' : '0fr',
        transition:'grid-template-rows 420ms cubic-bezier(0.22,1,0.36,1)',
      }}>
        <div style={{overflow:'hidden', minHeight:0}}>
          <div style={{
            padding: isMobile ? '0 18px 22px' : '0 36px 32px 36px',
            borderTop:'1px solid rgba(238,179,50,0.14)',
            marginTop:0,
          }}>
            <div style={{fontSize:11, letterSpacing:'0.22em', color:'#EEB332', textTransform:'uppercase', fontFamily:'Open Sans, sans-serif', fontWeight:600, padding: isMobile ? '14px 0 12px' : '20px 0 16px'}}>
              שיעורים בפרק
            </div>
            <ol style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column'}}>
              {m.lessons.map((l, i) => (
                <li key={i} style={{
                  display:'grid',
                  gridTemplateColumns: isMobile ? '34px 1fr' : '44px 1fr',
                  gap: isMobile ? 10 : 16,
                  alignItems:'flex-start',
                  padding: isMobile ? '10px 0' : '14px 0',
                  borderTop: i === 0 ? 'none' : '1px solid rgba(238,179,50,0.08)',
                }}>
                  <span style={{
                    fontFamily:'monospace', fontSize: isMobile ? 11 : 13, color:'#EEB332',
                    letterSpacing:'0.08em', paddingTop:3,
                  }}>{String(i+1).padStart(2,'0')}</span>
                  <span style={{fontSize: isMobile ? 14 : 16, lineHeight:1.55, color:'rgba(245,242,237,0.82)'}}>{l}</span>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </div>
    </article>
  );
}
window.FlyingCards = FlyingCards;