/* FAQ Section — dual tabs (client / artist) with accordion items.
   Styled to match Lamsa brand: Expo Arabic, pink accents, wine text, soft cards.
   Uses refs for smooth dynamic-height animation. */

const FAQ_DATA = {
  client: [
    {
      q: 'كيف أحجز؟',
      a: 'اختاري الخدمة، اختاري الآرتست والوقت، وأكدي. كله في أقل من دقيقة.',
    },
    {
      q: 'كيف أتأكد إن الآرتست موثوقة؟',
      a: 'كل آرتست في لمسة تمر بمراجعة قبل ما تستقبل أي حجز — نتحقق من هويتها وأعمالها. وبعد كل خدمة، تقدرين تقيمينها.',
    },
    {
      q: 'كيف أدفع؟',
      a: 'الدفع كله داخل التطبيق، ويدعم مدى وApple Pay.',
    },
    {
      q: 'وش يصير إذا احتجت ألغي أو أعدّل؟',
      a: 'تقدرين تلغين أو تعدلين موعدك من التطبيق بكل سهولة.',
    },
    {
      q: 'وين متوفرة لمسة؟',
      a: 'في كافة أحياء الرياض، وقريبًا المناطق الأخرى.',
    },
  ],
  artist: [
    {
      q: 'كيف أنضم للمسة؟',
      a: 'حملي التطبيق وسجلي كآرتست، عبي ملفك وأرسلي طلبك. نراجعه خلال 24 ساعة.',
    },
    {
      q: 'هل أحتاج أسوّق لنفسي؟',
      a: 'لا. عميلاتك جاهزات وينتظرونك في لمسة — نوصلك بالعميلات المناسبات بناءً على خدماتك وموقعك.',
    },
    {
      q: 'هل أقدر أتحكم بجدولي؟',
      a: 'إيه، تحددين الأيام والأوقات اللي تناسبك، وتقفلين اللي ما تبينها. جدولك بيدك بالكامل.',
    },
    {
      q: 'كيف أستلم فلوسي؟',
      a: 'فلوسك تدخل محفظتك في لمسة بعد كل خدمة مكتملة، وتسحبينها متى ما حبيتي.',
    },
  ],
};

/* Individual FAQ item with smooth height animation via ref */
function FaqItem({ item, isOpen, onToggle }) {
  const contentRef = React.useRef(null);
  const [height, setHeight] = React.useState(0);

  React.useEffect(() => {
    if (contentRef.current) {
      setHeight(isOpen ? contentRef.current.scrollHeight : 0);
    }
  }, [isOpen]);

  return (
    <div style={{
      background: '#fff',
      borderRadius: 20,
      border: isOpen
        ? '1.5px solid rgba(232,66,135,0.45)'
        : '1.5px solid rgba(232,66,135,0.12)',
      overflow: 'hidden',
      transition: 'border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
      boxShadow: isOpen ? '0 12px 40px rgba(232,66,135,0.12)' : '0 2px 8px rgba(77,8,37,0.04)',
      transform: isOpen ? 'scale(1.01)' : 'scale(1)',
    }}>
      <button
        onClick={onToggle}
        aria-expanded={isOpen}
        style={{
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 16,
          padding: '24px 28px',
          font: '600 19px/1.35 "Expo Arabic"',
          color: 'var(--wine-900)',
          textAlign: 'start',
          background: 'transparent',
          border: 'none',
          cursor: 'pointer',
          direction: 'rtl',
        }}
      >
        <span style={{
          transition: 'color 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
          color: isOpen ? 'var(--pink-500, #E84287)' : 'var(--wine-900)',
        }}>{item.q}</span>
        <span style={{
          flexShrink: 0,
          width: 34,
          height: 34,
          borderRadius: '50%',
          background: isOpen ? 'var(--pink-500, #E84287)' : 'rgba(232,66,135,0.08)',
          color: isOpen ? '#fff' : 'var(--pink-500, #E84287)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          transition: 'transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
          transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
            <line x1="7" y1="1" x2="7" y2="13" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
            <line x1="1" y1="7" x2="13" y2="7" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
          </svg>
        </span>
      </button>
      <div
        ref={contentRef}
        style={{
          height: height,
          overflow: 'hidden',
          transition: 'height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
          opacity: isOpen ? 1 : 0,
        }}
      >
        <p style={{
          padding: '0 28px 26px',
          font: '400 17px/1.7 "Expo Arabic"',
          color: 'var(--wine-900)',
          opacity: 0.75,
          margin: 0,
        }}>{item.a}</p>
      </div>
    </div>
  );
}

function FaqSection({ role }) {
  const [openIndex, setOpenIndex] = React.useState(null);
  const items = FAQ_DATA[role] || FAQ_DATA.client;

  const toggle = (i) => {
    setOpenIndex(openIndex === i ? null : i);
  };

  // Reset open item when role changes
  React.useEffect(() => {
    setOpenIndex(null);
  }, [role]);

  return (
    <section className="faq-section" style={{
      padding: '80px 56px 100px',
      background: '#FFF8FB',
      direction: 'rtl',
    }}>
      {/* Section header */}
      <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 600, margin: '0 auto 56px' }}>
        <h2 style={{
          font: '700 56px/1.05 "Expo Arabic"',
          color: 'var(--wine-900)',
          margin: 0,
        }}>
          أسئلة شائعة
        </h2>
        <p style={{
          font: '400 20px/1.55 "Expo Arabic"',
          color: 'var(--wine-900)',
          opacity: 0.7,
          marginTop: 18,
          marginBottom: 0,
        }}>
          {role === 'artist'
            ? 'كل اللي تحتاجين تعرفينه قبل تنضمين.'
            : 'كل اللي تحتاجين تعرفينه قبل تحجزين.'}
        </p>
      </div>

      {/* FAQ items */}
      <div style={{
        maxWidth: 820,
        margin: '0 auto',
        display: 'flex',
        flexDirection: 'column',
        gap: 14,
      }}>
        {items.map((item, i) => (
          <FaqItem
            key={`${role}-${i}`}
            item={item}
            isOpen={openIndex === i}
            onToggle={() => toggle(i)}
          />
        ))}
      </div>
    </section>
  );
}

window.FaqSection = FaqSection;