/* Horizontal scroll - vertical scroll drives horizontal panel slide.
   Force section to LTR so translateX behaves predictably; each panel keeps RTL inside. */
function HorizontalScroll() {
  const ref = React.useRef(null);
  const progress = useSectionProgress(ref);
  const isMobile = useIsMobile();

  const panels = [
    { t:'הזדמנות',  d:'AI הוא לא טרנד טכנולוגי - זאת הדרך החדשה לעשות כסף ב-2026. עסקים שמבינים את זה היום, מובילים מחר. הקורס הזה הוא הקיצור.', tag:'WHY NOW' },
    { t:'שליטה',    d:'אתה לא "מבקש מ-AI" - אתה מנהל אותו. אתה האדריכל. הוא הצוות. אתה מחליט, מאשר ומשחרר - והוא מבצע. הסילבוס מלמד אותך לעבוד ככה מהשיעור הראשון.', tag:'OWNERSHIP' },
    { t:'מהירות',   d:'מה שלקח חודשים - עכשיו ימים. CRM מלא, סוכן AI ללקוחות, דף נחיתה יוקרתי, מפעל תוכן אוטומטי. בלי לחכות למפתח. בלי לסלוק על מעצב.', tag:'VELOCITY' },
    { t:'כסף',      d:'הקורס לא נעצר בבנייה. פרק שלם על איך למצוא נישה רווחית, לזהות לקוח אמיתי, להציע פיילוט - ולהפוך אותו להכנסה חודשית קבועה.', tag:'REVENUE' },
  ];

  // Negative translateX moves track LEFT - panel index increases to the LEFT.
  const x = -progress * (panels.length - 1) * 100;
  const activeIdx = Math.round(progress * (panels.length - 1));

  return (
    <section ref={ref} dir="ltr" style={{position:'relative', height:`${panels.length * 175}vh`, background:'#0A0907'}}>
      <div style={{position:'sticky', top:0, height:'100vh', overflow:'hidden', display:'flex', alignItems:'center'}}>
        <div style={{display:'flex', width:`${panels.length * 100}vw`, transform:`translateX(${x}vw)`, willChange:'transform'}}>
          {panels.map((pn, idx) => (
            <div key={idx} style={{width:'100vw', flexShrink:0, padding: isMobile ? '0 5vw' : '0 8vw', display:'flex', alignItems:'center', justifyContent:'center'}}>
              <div dir="rtl" style={{maxWidth:1080, width:'100%', display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 20 : 80, alignItems:'center'}}>
                <div>
                  <div style={{fontSize: isMobile ? 11 : 13, letterSpacing:'0.18em', color:'#EEB332', marginBottom: isMobile ? 12 : 18, fontFamily:'monospace'}}>
                    0{idx+1} / 0{panels.length} · {pn.tag}
                  </div>
                  <h3 style={{fontFamily:'Open Sans', fontWeight:900, fontSize: isMobile ? 'clamp(40px,12vw,72px)' : 'clamp(64px,9vw,140px)', lineHeight:0.95, letterSpacing:'-0.03em', margin:0, color:'#F5F2ED'}}>
                    {pn.t}.
                  </h3>
                </div>
                <p style={{fontSize: isMobile ? 14 : 'clamp(18px,1.6vw,24px)', lineHeight:1.55, color:'rgba(245,242,237,0.72)', fontWeight:300, margin:0}}>{pn.d}</p>
              </div>
            </div>
          ))}
        </div>

        {/* progress dots */}
        <div style={{position:'absolute', bottom: isMobile ? 24 : 48, left:0, right:0, display:'flex', justifyContent:'center', gap: isMobile ? 8 : 12}}>
          {panels.map((_, i) => {
            const active = activeIdx === i;
            return <div key={i} style={{width: active ? (isMobile ? 22 : 32) : (isMobile ? 5 : 6), height: isMobile ? 5 : 6, borderRadius: 500, background: active ? '#EEB332' : 'rgba(245,242,237,0.2)', transition:'all 300ms', boxShadow: active ? '0 0 12px #EEB332' : 'none'}} />;
          })}
        </div>

        {/* hint */}
        <div style={{position:'absolute', top: isMobile ? 90 : 32, right: isMobile ? 14 : 32, fontSize: isMobile ? 9 : 11, letterSpacing:'0.16em', color:'rgba(245,242,237,0.4)', fontFamily:'monospace'}}>
          {String(activeIdx+1).padStart(2,'0')} / {String(panels.length).padStart(2,'0')}
        </div>
      </div>
    </section>
  );
}
window.HorizontalScroll = HorizontalScroll;