// FAQ — sidebar nav (categories + contact card) on left, accordion on right.

function FAQItem({ item, allItems }) {
  // Use uncontrolled <details> — browser-native accordion behavior.
  // Initial 'open' attribute set from data.
  return (
    <details open={item.open} className="faq-item" style={{
      borderBottom: '1px solid var(--ink-line-soft)',
    }}>
      <summary style={{
        padding: '22px 0',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        gap: 24,
      }}>
        <h3 style={{
          fontFamily: 'var(--serif)',
          fontSize: 'clamp(18px, 1.8vw, 22px)',
          fontWeight: 400,
          letterSpacing: '-0.018em',
          margin: 0,
          color: 'var(--ink)',
          lineHeight: 1.3,
          flex: 1,
        }}>
          {item.q}
        </h3>
        <span className="faq-chevron" aria-hidden="true" style={{
          flexShrink: 0,
          width: 36, height: 36,
          borderRadius: '50%',
          border: '1px solid var(--ink-line)',
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'var(--ink-2)',
          transition: 'transform .25s ease, background .2s ease, border-color .2s ease',
          fontSize: 16,
        }}>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M2 4 L6 8 L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
      </summary>
      <div style={{
        paddingBottom: 26,
        paddingRight: 64,
      }}>
        <p className="body-md" style={{
          margin: 0,
          color: 'var(--ink-2)',
          fontSize: 15.5,
          lineHeight: 1.65,
          maxWidth: '64ch',
        }}>
          {item.a}
        </p>
      </div>
    </details>
  );
}

function FAQ() {
  const cats = window.BG_DATA.FAQ_CATEGORIES;
  const items = window.BG_DATA.FAQ_ITEMS;
  const [activeCat, setActiveCat] = React.useState('all');

  const filtered = activeCat === 'all'
    ? items
    : items.filter(i => i.cat === activeCat);

  return (
    <section id="faq" style={{
      padding: 'clamp(80px, 10vw, 130px) 0',
      background: 'var(--paper-2)',
      borderTop: '1px solid var(--ink-line-soft)',
    }}>
      <div className="container">
        <div style={{ marginBottom: 'clamp(40px, 6vw, 64px)' }} className="reveal">
          <span className="eyebrow">
            <span className="dot" />
            Questions fréquentes
          </span>
          <h2 className="h-section" style={{ margin: '20px 0 0', maxWidth: '18ch' }}>
            Le mieux est<br />
            de <em>tout demander.</em>
          </h2>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 2.5fr',
          gap: 'clamp(28px, 5vw, 64px)',
          alignItems: 'flex-start',
        }} className="faq-grid">
          {/* Sidebar */}
          <aside style={{
            position: 'sticky',
            top: 100,
          }} className="faq-sidebar">
            <nav style={{ marginBottom: 32 }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Catégories</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
                {[{ id: 'all', label: 'Toutes', count: items.length }, ...cats].map(c => {
                  const isActive = c.id === activeCat;
                  return (
                    <li key={c.id}>
                      <button onClick={() => setActiveCat(c.id)} style={{
                        background: 'transparent',
                        border: 'none',
                        padding: '10px 0',
                        width: '100%',
                        textAlign: 'left',
                        cursor: 'pointer',
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        gap: 8,
                        fontFamily: 'var(--sans)',
                        fontSize: 14.5,
                        fontWeight: isActive ? 600 : 500,
                        color: isActive ? 'var(--ink)' : 'var(--ink-2)',
                        borderLeft: '2px solid',
                        borderLeftColor: isActive ? 'var(--navy)' : 'transparent',
                        paddingLeft: 14,
                        transition: 'all .15s ease',
                      }}>
                        <span>{c.label}</span>
                        <span style={{
                          fontSize: 12,
                          color: 'var(--ink-3)',
                          fontWeight: 500,
                          fontVariantNumeric: 'tabular-nums',
                        }}>{c.count}</span>
                      </button>
                    </li>
                  );
                })}
              </ul>
            </nav>

            {/* Contact card */}
            <div style={{
              padding: 24,
              background: 'var(--paper)',
              borderRadius: 'var(--radius-card)',
              border: '1px solid var(--ink-line)',
            }}>
              <div className="eyebrow navy" style={{ marginBottom: 12 }}>Pas de réponse ?</div>
              <p style={{
                fontFamily: 'var(--serif)',
                fontSize: 19,
                letterSpacing: '-0.01em',
                lineHeight: 1.3,
                margin: '0 0 14px',
                color: 'var(--ink)',
              }}>
                Écrivez-nous. Une vraie personne lira votre message — et y répondra.
              </p>
              <a href="../contact.html" className="btn btn-ghost" style={{
                width: '100%',
                fontSize: 13.5,
              }}>
                Nous écrire →
              </a>
              <p style={{ fontSize: 12, color: 'var(--ink-3)', margin: '12px 0 0' }}>
                Réponse sous 48 h ouvrées.
              </p>
            </div>
          </aside>

          {/* Accordion */}
          <div className="reveal">
            {filtered.map(item => (
              <FAQItem key={item.id} item={item} />
            ))}
            {filtered.length === 0 && (
              <div style={{ padding: 40, textAlign: 'center', color: 'var(--ink-3)' }}>
                Aucune question dans cette catégorie pour l'instant.
              </div>
            )}
          </div>
        </div>
      </div>

      <style>{`
        details[open] .faq-chevron {
          transform: rotate(180deg);
          background: var(--ink);
          color: var(--paper);
          border-color: var(--ink);
        }
        .faq-item summary:hover h3 {
          color: var(--navy);
        }
        @media (max-width: 880px) {
          .faq-grid { grid-template-columns: 1fr !important; }
          .faq-sidebar { position: static !important; }
          .faq-sidebar nav ul {
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch !important;
            gap: 8px !important;
            padding-bottom: 8px !important;
          }
          .faq-sidebar nav ul li { flex-shrink: 0; }
          .faq-sidebar nav ul li button {
            border: 1px solid var(--ink-line) !important;
            border-left: 1px solid var(--ink-line) !important;
            border-radius: 20px !important;
            padding: 6px 14px !important;
            white-space: nowrap !important;
          }
          .faq-sidebar > div { display: none !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { FAQ });