/* Danex Roofing — FAQ. Plain-language answers that double as SEO/AI-search
   content. The same Q&A is mirrored in the static fallback, FAQPage JSON-LD,
   and llms.txt so crawlers that don't run JS still read it. */
function Faq() {
  const { Eyebrow } = DS;

  // Single source of truth for the visible FAQ. Keep in sync with the
  // FAQPage JSON-LD in index.html and /llms.txt.
  const faqs = window.DANEX_FAQ || [];

  return (
    <section id="faq" style={{ background: 'var(--surface-base)', paddingBlock: 'var(--section-y)' }}>
      <div className="dx-container">
        <div style={{ maxWidth: 560, marginBottom: 40 }}>
          <Eyebrow>FAQ</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.25rem,4vw,3.25rem)', lineHeight: 0.98, margin: '14px 0 0', fontWeight: 800 }}>
            Common Roofing Questions
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 14, maxWidth: 860 }}>
          {faqs.map((f, i) => (
            <details key={i} style={{
              background: 'var(--surface-raised)', borderRadius: 'var(--radius-lg)',
              border: '1px solid var(--border-subtle)', padding: '20px 24px',
            }}>
              <summary style={{
                cursor: 'pointer', listStyle: 'none', display: 'flex', alignItems: 'center',
                justifyContent: 'space-between', gap: 16, fontFamily: 'var(--font-sans)',
                fontWeight: 700, fontSize: 17, color: 'var(--text-strong)',
              }}>
                {f.q}
                <i data-lucide="plus" style={{ width: 20, height: 20, color: 'var(--ember-500)', flexShrink: 0 }}></i>
              </summary>
              <p style={{ margin: '14px 0 0', color: 'var(--text-muted)', fontSize: 15.5, lineHeight: 1.65 }}>{f.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Faq = Faq;