// Problem + Solution sections (bilingual).

const ProblemSection = () => {
  const t = useT();
  const pains = [
    { icon: 'clock',     title: t('ردود بطيئة','Slow replies'),                 sub: t('عميل ينتظر، عميل يخسر','A waiting customer is a lost customer') },
    { icon: 'layers',    title: t('محادثات مشتتة','Scattered conversations'),    sub: t('واتساب، DM، إيميل، مكالمات','WhatsApp, DMs, email, calls') },
    { icon: 'grid',      title: t('أدوات منفصلة','Disconnected tools'),          sub: t('إكسل، Trello، CRM قديم','Excel, Trello, legacy CRM') },
    { icon: 'users',     title: t('ضغط على الفريق','Team burnout'),              sub: t('الكل يجيب على نفس السؤال','Everyone answers the same question') },
    { icon: 'chart',     title: t('تسويق بدون رؤية','Marketing in the dark'),     sub: t('لا تعرف من أين يأتي الإيراد',"You don't know what's driving revenue") },
    { icon: 'briefcase', title: t('تجربة غير مناسبة','One-size-fits-none'),       sub: t('حلول عامة لا تفهم مجالك','Generic tools that ignore your sector') },
    { icon: 'bell',      title: t('متابعة ضائعة','Lost follow-ups'),              sub: t('عملاء محتملون يُنسون في الفوضى','Hot leads forgotten in the noise') },
    { icon: 'pie',       title: t('تقارير يدوية','Manual reports'),               sub: t('ساعات تُهدر في تجهيز إكسل','Hours wasted prepping spreadsheets') },
  ];

  return (
    <section style={{ padding: '160px 28px 120px', background: 'var(--bg-subtle)', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center' }}>
          <Badge variant="neutral" dot>{t('المشكلة','The problem')}</Badge>
          <h2 style={{ fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.1, margin: '16px 0 16px', textWrap: 'balance' }}>
            {t('هل يشبه هذا يومك؟','Does your day look like this?')}
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 660, margin: '0 auto' }}>
            {t(
              'أغلب الأعمال تخسر عملاء ليس بسبب ضعف الخدمة، بل بسبب فوضى الإدارة وتشتت التواصل.',
              "Most businesses don't lose customers from bad service — they lose them to chaos and scattered conversations."
            )}
          </p>
        </div>

        <div style={{ position: 'relative', maxWidth: 1100, margin: '64px auto 0', height: 360, borderRadius: 28, background: '#fff', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)', overflow: 'hidden' }}>
          <ChaosVisual />
        </div>

        <div style={{
          marginTop: 56, display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 14,
        }}>
          {pains.map(p => (
            <div key={p.title} className="hover-lift" style={{
              background: '#fff', border: '1px solid var(--border)', borderRadius: 20,
              padding: 22, display: 'flex', alignItems: 'center', gap: 14, boxShadow: 'var(--shadow-1)',
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12, flexShrink: 0,
                background: 'var(--bg-muted)', color: 'var(--fg-muted)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                border: '1px solid var(--border)',
              }}>
                <Icon name={p.icon} size={20} />
              </div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 600 }}>{p.title}</div>
                <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginTop: 2 }}>{p.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const ChaosVisual = () => {
  const t = useT();
  const items = [
    { x: '5%', y: '15%', rot: -6, kind: 'whats',     text: t('متى يوصل؟؟','When will it arrive??'), unread: true },
    { x: '22%', y: '60%', rot: 4, kind: 'note',      text: t('اتصال فايت • أحمد','Missed call · Ahmed'), color: '#FFD86B' },
    { x: '40%', y: '20%', rot: -3, kind: 'instagram',text: t('DM · سارة','DM · Sara') },
    { x: '52%', y: '70%', rot: 2, kind: 'excel' },
    { x: '70%', y: '15%', rot: 5, kind: 'email',      text: t('تذكرة #٢١٤٧','Ticket #2147') },
    { x: '78%', y: '55%', rot: -4, kind: 'note',      text: t('اطلب من الفريق','Ask the team'), color: '#FF9F8C' },
    { x: '30%', y: '85%', rot: 3, kind: 'whats',      text: t('لسه ما رد؟','Still no reply?') },
    { x: '85%', y: '78%', rot: -2, kind: 'call' },
    { x: '60%', y: '40%', rot: 0, kind: 'badge',      text: t('٣ غير مقروء','3 unread'), color: '#EF4444' },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(255,255,255,0.4), rgba(245,245,246,0.8))' }}>
      <div aria-hidden className="dots-bg" style={{ position: 'absolute', inset: 0, opacity: 0.3 }} />
      {items.map((it, i) => <ChaosItem key={i} {...it} />)}
      <div style={{ position: 'absolute', insetInlineStart: 40, top: '50%', transform: 'translateY(-50%)', zIndex: 5 }}>
        <span style={{ fontSize: 12, fontWeight: 700, padding: '6px 10px', borderRadius: 99, background: '#EF4444', color: '#fff' }}>{t('قبل سيلاتر','Before Sellatr')}</span>
      </div>
      <div style={{ position: 'absolute', insetInlineEnd: 40, top: '50%', transform: 'translateY(-50%)', zIndex: 5 }}>
        <span style={{ fontSize: 12, fontWeight: 700, padding: '6px 10px', borderRadius: 99, background: 'linear-gradient(135deg, #5B5BF7, #06B6D4)', color: '#fff' }}>{t('بعد سيلاتر','After Sellatr')}</span>
      </div>
    </div>
  );
};

const ChaosItem = ({ x, y, rot, kind, text, color, unread }) => {
  const t = useT();
  const baseStyle = {
    position: 'absolute', insetInlineStart: x, top: y, transform: `rotate(${rot}deg)`,
    fontSize: 12, fontWeight: 500, padding: '8px 12px', borderRadius: 12,
    boxShadow: 'var(--shadow-1)', background: '#fff', border: '1px solid var(--border)',
    display: 'inline-flex', alignItems: 'center', gap: 8, zIndex: 2,
  };
  if (kind === 'whats') return (
    <div style={{ ...baseStyle, background: 'linear-gradient(135deg, #DCF8C6, #C5EFB0)', border: 'none' }}>
      <ChannelIcon channel="whatsapp" size={12} />
      <span>{text}</span>
      {unread && <span style={{ background: '#EF4444', color: '#fff', fontSize: 9, fontWeight: 700, padding: '1px 5px', borderRadius: 99 }}>!</span>}
    </div>
  );
  if (kind === 'instagram') return (
    <div style={baseStyle}>
      <span style={{ color: '#E4405F' }}><ChannelIcon channel="instagram" size={12} /></span>
      <span>{text}</span>
    </div>
  );
  if (kind === 'email') return (
    <div style={baseStyle}>
      <ChannelIcon channel="email" size={12} />
      <span>{text}</span>
    </div>
  );
  if (kind === 'call') return (
    <div style={{ ...baseStyle, color: '#EF4444' }}>
      <Icon name="phone" size={12} />
      <span style={{ color: 'var(--fg)' }}>{t('مكالمة فائتة','Missed call')}</span>
    </div>
  );
  if (kind === 'note') return (
    <div style={{ ...baseStyle, background: color, border: 'none', fontWeight: 600, color: '#0B0B0E', boxShadow: '0 6px 14px rgba(0,0,0,0.12)' }}>
      {text}
    </div>
  );
  if (kind === 'excel') return (
    <div style={{ ...baseStyle, padding: 0, overflow: 'hidden' }}>
      <div style={{ display: 'flex', flexDirection: 'column', fontSize: 10 }}>
        <div style={{ display: 'flex', background: '#1F7244', color: '#fff', fontWeight: 600 }}>
          <span style={{ padding: '4px 10px' }}>{t('اسم','Name')}</span><span style={{ padding: '4px 10px' }}>{t('طلب','Order')}</span><span style={{ padding: '4px 10px' }}>{t('حالة','Status')}</span>
        </div>
        {[
          [t('أحمد','Ahmed'), t('#١٢','#12'), t('بانتظار','Pending')],
          [t('مها','Maha'), t('#١٣','#13'), t('إلغاء','Canceled')],
          [t('فهد','Fahd'), t('#١٤','#14'), t('جاري','In progress')],
        ].map((r,i) => (
          <div key={i} style={{ display: 'flex', borderTop: '1px solid var(--border)' }}>
            {r.map((c,j) => <span key={j} style={{ padding: '3px 10px', minWidth: 50 }}>{c}</span>)}
          </div>
        ))}
      </div>
    </div>
  );
  if (kind === 'badge') return (
    <div style={{ ...baseStyle, background: color, color: '#fff', border: 'none', fontWeight: 700 }}>{text}</div>
  );
  return null;
};

/* ===================== SOLUTION ===================== */
const SolutionSection = () => {
  const t = useT();
  const { lang } = useLang();
  const pillars = [
    { icon: 'inbox',    label: t('التواصل','Communication') },
    { icon: 'users',    label: t('العملاء','Customers') },
    { icon: 'workflow', label: t('التشغيل','Operations') },
    { icon: 'calendar', label: t('الحجوزات','Bookings') },
    { icon: 'checkCircle', label: t('المهام','Tasks') },
    { icon: 'trending', label: t('الإيرادات','Revenue') },
    { icon: 'sparkles', label: t('الذكاء الاصطناعي','AI') },
  ];

  return (
    <section style={{ padding: '160px 28px', overflow: 'hidden', position: 'relative' }}>
      <div aria-hidden style={{
        position: 'absolute', insetInlineStart: '40%', top: '20%', width: 600, height: 600,
        background: 'radial-gradient(circle, rgba(91,91,247,0.10), transparent 60%)',
        filter: 'blur(60px)', zIndex: 0,
      }} />
      <div style={{ position: 'relative', zIndex: 1, maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center' }}>
          <Badge variant="ai" dot>{t('الحل','The solution')}</Badge>
          <h2 style={{ fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.12, margin: '16px 0 14px', textWrap: 'balance' }}>
            {lang === 'ar' ? (
              <>ليس Chatbot…<br/>وليس CRM…<br/>
              <span style={{ background: 'linear-gradient(135deg, #5B5BF7, #06B6D4)', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>سيلاتر نظام تشغيل كامل.</span></>
            ) : (
              <>Not a chatbot.<br/>Not a CRM.<br/>
              <span style={{ background: 'linear-gradient(135deg, #5B5BF7, #06B6D4)', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>A full business OS.</span></>
            )}
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 640, margin: '0 auto' }}>
            {t(
              'منصة واحدة تجمع التواصل والعملاء والتشغيل والحجوزات والمهام والإيرادات — مدعومة بالذكاء الاصطناعي.',
              'One platform unifying communication, customers, operations, bookings, tasks, and revenue — powered by AI.'
            )}
          </p>
        </div>

        <div style={{ position: 'relative', maxWidth: 880, margin: '72px auto 0', aspectRatio: '1.4 / 1' }}>
          <OrbitSystem pillars={pillars} />
        </div>
      </div>
    </section>
  );
};

const OrbitSystem = ({ pillars }) => {
  const t = useT();
  return (
    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
      <div className="spin-slow" style={{
        position: 'absolute', inset: 0,
        borderRadius: '50%', border: '1px dashed var(--border-strong)',
        maskImage: 'linear-gradient(180deg, black 70%, transparent)',
      }} />
      <div className="spin-slow" style={{
        position: 'absolute', inset: '15%',
        borderRadius: '50%', border: '1px dashed var(--border)',
        animationDirection: 'reverse', animationDuration: '36s',
      }} />

      <div style={{
        position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
        width: 200, height: 200, borderRadius: '50%',
        background: 'linear-gradient(135deg, #0B0B0E 0%, #27272A 100%)',
        color: '#fff', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 30px 80px rgba(91,91,247,0.32), 0 0 0 8px rgba(255,255,255,0.04)',
        zIndex: 5,
      }}>
        <div style={{ position: 'absolute', inset: -2, borderRadius: '50%', padding: 2,
          background: 'conic-gradient(from 0deg, #5B5BF7, #06B6D4, #25D366, #5B5BF7)',
          WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
          WebkitMaskComposite: 'xor', maskComposite: 'exclude',
          opacity: 0.6,
        }} className="spin-slow" />
        <LogoMark size={42} />
        <div style={{ fontSize: 18, fontWeight: 700, marginTop: 10 }}>{t('سيلاتر','Sellatr')}</div>
        <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)', marginTop: 2 }}>Business OS</div>
      </div>

      {pillars.map((p, i) => {
        const angle = (i / pillars.length) * 2 * Math.PI - Math.PI / 2;
        const rx = 42, ry = 38;
        const x = 50 + rx * Math.cos(angle);
        const y = 50 + ry * Math.sin(angle);
        return (
          <div key={p.label} className="float-y" style={{
            position: 'absolute', left: `${x}%`, top: `${y}%`,
            transform: 'translate(-50%, -50%)',
            animationDelay: `${i * 0.3}s`,
          }}>
            <div className="hover-lift" style={{
              background: '#fff', border: '1px solid var(--border)', borderRadius: 16,
              padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10,
              boxShadow: 'var(--shadow-2)', minWidth: 130,
            }}>
              <div style={{ width: 32, height: 32, borderRadius: 10, background: 'var(--accent-bg)', color: 'var(--indigo)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={p.icon} size={16} />
              </div>
              <span style={{ fontSize: 13, fontWeight: 600 }}>{p.label}</span>
            </div>
          </div>
        );
      })}
    </div>
  );
};

window.ProblemSection = ProblemSection;
window.SolutionSection = SolutionSection;