/* FAQ — accordion Q&A + jewellery care guide. */
function SF_FAQ({ go }) {
  const [open, setOpen] = React.useState('s0');

  const SECTIONS = [
    { label: 'ORDERS & SHIPPING', items: [
      { q: 'How long does delivery take?', a: 'Orders are hand-checked and dispatched within 1–2 working days, then delivered in 3–6 days across India. Tracking is shared by email and WhatsApp the moment your parcel leaves.' },
      { q: 'Is shipping free?', a: 'Yes — shipping is free on all orders over ₹999. Below that, a flat ₹79 applies.' },
      { q: 'Do you ship internationally?', a: `Not yet. International shipping is on the roadmap — DM ${window.SS_SITE.social.instagram.handle} and we’ll note your city.` },
    ]},
    { label: 'RETURNS & EXCHANGES', items: [
      { q: 'What is the return policy?', a: 'Unworn pieces in original packaging can be exchanged within 7 days of delivery. For hygiene, earrings can be exchanged only if the seal is intact.' },
      { q: 'My piece arrived damaged — what now?', a: `Send a photo to ${window.SS_SITE.email} or WhatsApp within 48 hours of delivery and a replacement ships free, no questions asked.` },
    ]},
    { label: 'JEWELLERY CARE', items: [
      { q: 'How do I keep the gold foil bright?', a: 'Put jewellery on last — after perfume, lotion and hairspray. Wipe with the soft cloth in your box after each wear and store pieces in their pouch, away from moisture.' },
      { q: 'Can I wear my pieces every day?', a: 'The Daily collection is built for it. Statement and bridal pieces prefer occasional wear — keep them off in water, workouts and monsoon downpours.' },
      { q: 'Are the earrings skin-safe?', a: 'Yes. All posts are nickel-safe and hypoallergenic. If you have very sensitive ears, the sterling-silver pieces are the safest pick.' },
    ]},
  ];

  return (
    <div className="sf-maxw" style={{ paddingTop: 56, paddingBottom: 96, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: '.24em', textTransform: 'uppercase', color: 'var(--sf-gold-hi)' }}>HELP</div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 38, fontWeight: 600, color: 'var(--sf-text)', marginTop: 8 }}>FAQ &amp; <em style={{ fontStyle: 'italic', fontWeight: 400 }}>care guide</em></div>

      <div style={{ width: 'min(720px, 100%)', marginTop: 40, display: 'flex', flexDirection: 'column', gap: 36 }}>
        {SECTIONS.map((s, si) => (
          <div key={s.label}>
            <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--sf-text-faint)', marginBottom: 12 }}>{s.label}</div>
            <div style={{ background: 'var(--sf-surface)', border: '1px solid var(--sf-border-soft)', borderRadius: 'var(--sf-radius)', overflow: 'hidden' }}>
              {s.items.map((item, i) => {
                const id = 's' + si + '-' + i;
                const isOpen = open === id || (open === 's0' && si === 0 && i === 0);
                return (
                  <div key={id} style={{ borderTop: i > 0 ? '1px solid var(--sf-border-soft)' : 'none' }}>
                    <button onClick={() => setOpen(isOpen ? null : id)} style={{
                      all: 'unset', boxSizing: 'border-box', cursor: 'pointer', width: '100%',
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
                      padding: '18px 24px', minHeight: 44,
                    }}>
                      <span style={{ fontFamily: 'var(--font-display)', fontSize: 16.5, fontWeight: 500, color: isOpen ? 'var(--sf-gold-hi)' : 'var(--sf-text)' }}>{item.q}</span>
                      <svg width="14" height="14" viewBox="0 0 14 14" style={{ flex: 'none', transform: isOpen ? 'rotate(45deg)' : 'none', transition: 'transform .2s' }}>
                        <path d="M7 1v12M1 7h12" stroke="var(--sf-gold-hi)" strokeWidth="1.4" strokeLinecap="round" />
                      </svg>
                    </button>
                    {isOpen && (
                      <div style={{ padding: '0 24px 20px', fontSize: 13.5, fontWeight: 300, color: 'var(--sf-text-muted)', lineHeight: 1.7, maxWidth: 600 }}>{item.a}</div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
window.SF_FAQ = SF_FAQ;