// Hero, Problem, Solution sections + FeaturesBanner

const { useState: useStateT, useEffect: useEffectT } = React;

// ─── Hero ───────────────────────────────────────────────
// 5 logical slots ، each slot has alternatives that fit its position in the
// production order. We rotate ONE slot at a time so the user can read the change.
const HERO_SLOT_ALTS = [
  // Slot 0 ، ideation / planning
  [
    { name:'فكرة',   emoji:'💡', color:'orange' },
    { name:'تخطيط',  emoji:'🗒️', color:'orange' },
    { name:'بحث',    emoji:'🔍', color:'amber'  },
    { name:'إعداد',  emoji:'📋', color:'blue'   },
  ],
  // Slot 1 ، writing / scripting
  [
    { name:'كتابة',   emoji:'📝', color:'blue'   },
    { name:'سيناريو', emoji:'📜', color:'blue'   },
    { name:'مراجعة نص', emoji:'✍️', color:'teal' },
    { name:'هيكلة',   emoji:'🧩', color:'purple' },
  ],
  // Slot 2 ، capture (filming / recording)
  [
    { name:'تصوير',       emoji:'📸', color:'amber'  },
    { name:'تسجيل صوت',   emoji:'🎙️', color:'amber'  },
    { name:'تعليق صوتي',  emoji:'🎤', color:'pink'   },
    { name:'لقطات إضافية', emoji:'🎥', color:'orange'},
  ],
  // Slot 3 ، post-production (editing / sound)
  [
    { name:'مونتاج',       emoji:'✂️', color:'purple' },
    { name:'تصحيح ألوان',  emoji:'🎨', color:'pink'   },
    { name:'موسيقى',       emoji:'🎵', color:'pink'   },
    { name:'مؤثرات',       emoji:'✨', color:'purple' },
  ],
  // Slot 4 ، review / publish
  [
    { name:'نشر',     emoji:'📤', color:'green' },
    { name:'مراجعة',  emoji:'👁️', color:'teal'  },
    { name:'جدولة',   emoji:'📅', color:'green' },
    { name:'اعتماد',  emoji:'✅', color:'green' },
  ],
];

function MazbatLogo({ size = 22 }) {
  return (
    <span style={{display:'inline-flex', alignItems:'center', gap:10}}>
      <span style={{
        display:'inline-flex', alignItems:'center', gap:3,
      }}>
        <span style={{display:'inline-block', width:6, height:size, borderRadius:3, background:'#60a5fa'}}/>
        <span style={{display:'inline-block', width:6, height:size, borderRadius:3, background:'#fbbf24'}}/>
        <span style={{display:'inline-block', width:6, height:size, borderRadius:3, background:'#a78bfa'}}/>
        <span style={{display:'inline-block', width:6, height:size*1.3, borderRadius:3, background:'#34d399'}}/>
      </span>
      <span style={{font:'700 22px/1 var(--font-arabic)', color:'var(--fg-1)', letterSpacing:'-0.01em'}}>مزبط</span>
    </span>
  );
}
window.MazbatLogo = MazbatLogo;

function HeroSection() {
  // One alt-index per slot. Start with each slot showing alt 0.
  const [altIdx, setAltIdx] = useStateT([0, 0, 0, 0, 0]);
  // Which slot is currently animating (-1 = none).
  const [swapping, setSwapping] = useStateT(-1);
  // Tick per slot so React re-keys the pill on every change (re-runs entry anim).
  const [tick, setTick] = useStateT([0, 0, 0, 0, 0]);

  useEffectT(() => {
    let lastSlot = -1;
    const interval = setInterval(() => {
      // Pick a different slot than last time so changes feel spread out.
      let slot;
      do { slot = Math.floor(Math.random() * 5); } while (slot === lastSlot);
      lastSlot = slot;

      // Phase 1: trigger fade-out
      setSwapping(slot);
      // Phase 2: after fade-out completes, swap to next alt for that slot
      setTimeout(() => {
        setAltIdx(prev => {
          const next = [...prev];
          const altCount = HERO_SLOT_ALTS[slot].length;
          // Advance to next alt (random different from current).
          let n;
          do { n = Math.floor(Math.random() * altCount); } while (n === prev[slot] && altCount > 1);
          next[slot] = n;
          return next;
        });
        setTick(prev => {
          const next = [...prev];
          next[slot] = prev[slot] + 1;
          return next;
        });
        // Phase 3: end fade ، let the new pill animate in via key change
        setTimeout(() => setSwapping(-1), 50);
      }, 280);
    }, 2500);
    return () => clearInterval(interval);
  }, []);

  const stages = HERO_SLOT_ALTS.map((alts, i) => alts[altIdx[i]]);

  return (
    <section className="hero">
      <div className="container">
        <div className="hero-logo"><MazbatLogo/></div>
        <div className="eyebrow" style={{color:'var(--indigo-600)', marginBottom:18}}>منصة مزبط</div>
        <h1 className="hero-title">يزبط محتواك ويزبط فريقك</h1>
        <p className="hero-sub">منصة تساعدك بجدولة مهام فريقك بصناعة المحتوى مع أدوات تساعدهم بزيادة الإنتاجية</p>
        <p className="hero-sub-2">تسهل عليك كل خطوات المحتوى، من كتابة الفكرة إلى المونتاج والنشر</p>

        <div className="hero-chain-label">صمم سير عمل محتواك</div>

        <div className="stage-chain" role="img" aria-label="مراحل الإنتاج">
          {stages.map((s, i) => {
            const c = window.pfChip(s.color);
            const isSwapping = swapping === i;
            return (
              <React.Fragment key={i}>
                <span
                  key={`slot-${i}-${tick[i]}`}
                  className={'stage-pill stage-pill--slot' + (isSwapping ? ' stage-pill--leaving' : '')}
                  style={{
                    background: c.bg, color: c.text, borderColor: c.bar,
                  }}
                >
                  <span style={{fontSize:14, lineHeight:1}}>{s.emoji}</span>
                  {s.name}
                </span>
                {i < stages.length - 1 && <span className="chain-arrow">←</span>}
              </React.Fragment>
            );
          })}
        </div>
        <div className="hero-chain-hint">
          <span className="dot-pulse"/>
          المراحل قابلة للتخصيص ، رتبها وسمها كما يناسب فريقك
        </div>
      </div>
    </section>
  );
}

// ─── Problem (WhatsApp mockup) ──────────────────────────
function WAMessage({ text, time, side='right' }) {
  const isRight = side === 'right';
  return (
    <div style={{
      alignSelf: isRight ? 'flex-end' : 'flex-start',
      maxWidth:'78%',
      background: isRight ? '#dcf8c6' : '#ffffff',
      borderRadius: isRight ? '14px 14px 4px 14px' : '14px 14px 14px 4px',
      padding:'7px 10px 4px',
      font:'500 14.5px/1.5 var(--font-arabic)', color:'#111b21',
      boxShadow:'0 1px 1px rgba(0,0,0,0.08)',
      position:'relative',
    }}>
      <div style={{whiteSpace:'pre-wrap', textWrap:'pretty'}}>{text}</div>
      <div style={{
        font:'400 10px/1 var(--font-sans)', color:'#667781',
        marginTop:2, textAlign:'end',
      }}>{time} {isRight && <span style={{color:'#53bdeb', marginInlineStart:3}}>✓✓</span>}</div>
    </div>
  );
}

function ProblemSection() {
  return (
    <section className="section problem-section">
      <div className="container">
        <div className="eyebrow">المشكلة</div>
        <h2 className="section-title">من حوسة الأدوات وضياع المهام والملفات</h2>
        <p className="section-sub">
          الفريق متناثر بين واتساب، Drive، Notion، رسائل صوتية… ينتهي اليوم بسوء فهم وملفات ضائعة وعتاب لا ينقطع.
        </p>

        <div className="wa-stage">
          {/* Phone frame */}
          <div className="wa-phone">
            <div className="wa-notch"/>
            <div className="wa-screen">
              {/* Status bar */}
              <div className="wa-status">
                <span>9:41</span>
                <span style={{display:'inline-flex', gap:5, alignItems:'center'}}>
                  <span style={{display:'inline-block', width:14, height:8, border:'1px solid #fff', borderRadius:2, position:'relative'}}>
                    <span style={{position:'absolute', inset:1, width:'70%', background:'#fff', borderRadius:1}}/>
                  </span>
                </span>
              </div>
              {/* Header */}
              <div className="wa-header">
                <button className="wa-back">‹</button>
                <span className="wa-avatar">🎬</span>
                <div className="wa-meta">
                  <div className="wa-name">أحمد المنتج 🎬</div>
                  <div className="wa-presence">آخر ظهور قبل ساعتين</div>
                </div>
                <span className="wa-icon">📞</span>
                <span className="wa-icon">⋮</span>
              </div>
              {/* Chat */}
              <div className="wa-chat">
                <div className="wa-day">اليوم</div>
                <WAMessage side="right" text={'ليش تأخرت بالمونتاج 😤'} time="10:14"/>
                <WAMessage side="right" text={'رفعته لك قبل يومين'} time="10:14"/>
                <WAMessage side="left"  text={'وين رفعته؟ ما لقيت شي بالـDrive'} time="10:16"/>
                <WAMessage side="right" text={'بالواتس… كان فيديو طويل'} time="10:16"/>
                <WAMessage side="left"  text={'فيديو الواتس انضغط، الجودة راحت'} time="10:17"/>
                <WAMessage side="right" text={'قطعت رزقيي 🤬'} time="10:18"/>
              </div>
              {/* Composer */}
              <div className="wa-composer">
                <span className="wa-emoji">😊</span>
                <span className="wa-input">رسالة</span>
                <span className="wa-emoji">📎</span>
                <span className="wa-emoji">📷</span>
                <span className="wa-mic">🎤</span>
              </div>
            </div>
          </div>

          {/* Friction callouts */}
          <div className="wa-callouts">
            <div className="wa-callout">
              <div className="wa-callout-num">1</div>
              <div>
                <div className="wa-callout-h">ملفات تختفي</div>
                <div className="wa-callout-p">فيديو في واتساب، نسخة في Drive، نسخة على الموبايل ، أي واحدة المعتمدة؟</div>
              </div>
            </div>
            <div className="wa-callout">
              <div className="wa-callout-num">2</div>
              <div>
                <div className="wa-callout-h">مهام بلا تتبع</div>
                <div className="wa-callout-p">من مسؤول؟ متى الددلاين؟ "أعتقد قلتلك" بدل تكليف رسمي.</div>
              </div>
            </div>
            <div className="wa-callout">
              <div className="wa-callout-num">3</div>
              <div>
                <div className="wa-callout-h">لوم بدون سياق</div>
                <div className="wa-callout-p">كل تأخير ينتهي برسالة غاضبة لأن لا أحد يعرف الصورة الكاملة.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Solution (Notification mockup) ─────────────────────
function SolutionSection() {
  return (
    <section className="section solution-section" style={{background:'var(--white)'}}>
      <div className="container">
        <div className="eyebrow">الحل</div>
        <h2 className="section-title">خصص مهام فريقك، وبتوصلهم إشعارات تلقائية</h2>
        <p className="section-sub">ندعم الإشعارات عبر <strong>واتساب</strong> ، <strong>إيميل</strong> ، <strong>SMS</strong>. كل عضو يختار قنواته المفضلة، ولا تذكير ينسى.</p>

        <div className="notif-stage">
          {/* Phone backdrop */}
          <div className="notif-phone">
            <div className="notif-time-row">
              <div className="notif-time-big">9:41</div>
              <div className="notif-date">الإثنين، 6 مايو</div>
            </div>

            {/* Notification card */}
            <div className="notif-card">
              <div className="notif-card-head">
                <span className="notif-app-icon"><MazbatLogoMark/></span>
                <span className="notif-app-name">مزبط</span>
                <span style={{flex:1}}/>
                <span className="notif-time-small">الآن</span>
              </div>
              <div className="notif-card-body">
                <div className="notif-title">مهمة جديدة</div>
                <div className="notif-text">
                  إعداد محتوى <strong>«سفرتي إلى اليابان»</strong>
                </div>
                <div className="notif-meta">
                  <span className="notif-meta-icon">📅</span>
                  <span>تاريخ الإنجاز: 20 مايو</span>
                </div>
              </div>
              <div className="notif-actions">
                <button className="notif-btn notif-btn-secondary">تأجيل</button>
                <button className="notif-btn notif-btn-primary">عرض</button>
              </div>
            </div>

            {/* Stack hint behind */}
            <div className="notif-stack notif-stack-1"/>
            <div className="notif-stack notif-stack-2"/>
          </div>

          {/* Side points */}
          <div className="notif-side">
            <h3 className="notif-side-h">الإشعارات تلحقهم لين يوصلهم</h3>
            <ul className="notif-side-list">
              <li><span className="notif-channel">واتساب</span> ، الإشعار الأساسي للفريق العربي</li>
              <li><span className="notif-channel">إيميل</span> ، لتفاصيل المهمة الكاملة والملفات</li>
              <li><span className="notif-channel">SMS</span> ، للديدلاينات الحرجة</li>
            </ul>
            <p className="notif-side-foot">
              كل عضو يختار قنواته من الإعدادات ، وأنت تختار أولوية الإشعار.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function MazbatLogoMark() {
  return (
    <span style={{display:'inline-flex', alignItems:'center', gap:1.5}}>
      <span style={{display:'inline-block', width:3, height:14, borderRadius:1.5, background:'#60a5fa'}}/>
      <span style={{display:'inline-block', width:3, height:14, borderRadius:1.5, background:'#fbbf24'}}/>
      <span style={{display:'inline-block', width:3, height:14, borderRadius:1.5, background:'#a78bfa'}}/>
      <span style={{display:'inline-block', width:3, height:18, borderRadius:1.5, background:'#34d399'}}/>
    </span>
  );
}
window.MazbatLogoMark = MazbatLogoMark;

// ─── Features Banner (big H1) ───────────────────────────
function FeaturesBanner() {
  return (
    <section className="features-banner">
      <div className="container">
        <div className="features-banner-eyebrow">المزايا</div>
        <h1 className="features-banner-title">
          <span style={{color:'var(--indigo-600)'}}>مزايا</span> مزبط
        </h1>
        <p className="features-banner-sub">سبع مزايا أساسية، مصممة لفرق المحتوى العربية ، جربها كلها بنفسك أدناه.</p>
        <div className="features-banner-arrow">↓</div>
      </div>
    </section>
  );
}

window.HeroSection = HeroSection;
window.ProblemSection = ProblemSection;
window.SolutionSection = SolutionSection;
window.FeaturesBanner = FeaturesBanner;