/* FAQ — answer-first question list. Questions are real h3s and answers are
   always visible (no accordion) so search and AI answer engines can read them.
   Pairs with the FAQPage JSON-LD in index.html — keep the two in sync.
   Presentation borrows the engraved-card device: a thin inset frame, the
   eyebrow set in script at the top edge, and numbered question rules. */
function FAQ({ eyebrow = 'Common Questions', title = 'Questions we are asked most.', items = [], background = 'transparent' }) {
  const { ScriptMark } = window;

  return (
    <section style={{ background, borderTop: '1px solid var(--border-strong)', borderBottom: '1px solid var(--border-strong)', padding: 'var(--space-10) var(--gutter)' }}>
      <div style={{ position: 'relative', maxWidth: '1040px', margin: '0 auto', border: '1px solid var(--border-strong)', padding: 'var(--space-8) clamp(20px, 5vw, 64px) var(--space-8)' }}>
        <span aria-hidden style={{ position: 'absolute', inset: '8px', border: '1px solid var(--line-soft)', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', top: 0, left: '50%', transform: 'translate(-50%, -50%)', background: 'var(--site-ground, var(--cream))', padding: '0 20px' }}>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-eyebrow, 11px)', fontWeight: 600, letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>{eyebrow}</span>
        </div>
        <div style={{ position: 'relative', textAlign: 'center', marginBottom: 'var(--space-8)' }}>
          <h2 style={{ fontSize: 'clamp(1.8rem, 3.2vw, 2.4rem)', fontWeight: 400, margin: '8px 0 0', lineHeight: 1.2 }}>{title}</h2>
        </div>
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 'var(--space-7) var(--space-8)' }}>
          {items.map(([q, a], i) => (
            <div key={q} style={{ borderTop: '1px solid var(--border-strong)', paddingTop: '20px' }}>
              <span style={{ display: 'block', fontFamily: 'var(--font-sans)', fontSize: '10px', fontWeight: 600, letterSpacing: '.22em', color: 'var(--oxblood)', marginBottom: '10px' }}>{String(i + 1).padStart(2, '0')}</span>
              <h3 style={{ fontSize: '1.2rem', fontWeight: 400, margin: '0 0 14px', lineHeight: 1.35 }}>{q}</h3>
              <p style={{ margin: 0, fontSize: 'var(--fs-small)', color: 'var(--text-secondary)', lineHeight: 1.8 }}>{a}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;