// Pretty Rare Boutique — FAQ (responsive)

const FAQS = [
  { q: 'Will the results look natural?',       a: 'Yes. Every treatment is shaped around enhancement, not transformation. If a result would look unnatural for your face, we will say so.' },
  { q: 'Is the experience uncomfortable?',     a: 'Most treatments use fine techniques and topical numbing where appropriate. You can pause at any point.' },
  { q: 'How long do results last?',            a: 'It varies. Wrinkle treatments settle for three to four months. Lip refinement softens over six to twelve. Your consultation gives specifics.' },
  { q: 'What is the consultation?',            a: 'A 20-minute conversation, a face assessment, and a personalised plan. No obligation to proceed the same day.' },
  { q: 'Is a review appointment included?',    a: 'Yes. Every treatment includes a complimentary review at two to four weeks.' },
  { q: 'How do I prepare?',                    a: 'Arrive ten minutes early. Avoid alcohol for 24 hours. Bare skin if possible. We handle the rest.' },
];

function FaqItem({ f, open, onToggle }) {
  return (
    <div style={{ borderBottom: '1px solid var(--border)' }}>
      <button onClick={onToggle} style={{
        width: '100%', background: 'transparent', border: 0,
        padding: '24px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        gap: 24, textAlign: 'left', cursor: 'pointer',
      }}>
        <span style={{
          fontFamily: 'var(--font-sans)', fontWeight: 500,
          fontSize: 17, letterSpacing: '-0.02em', color: 'var(--fg)',
        }}>{f.q}</span>
        <span style={{
          width: 36, height: 36, borderRadius: 999,
          border: '1px solid var(--border)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--accent)',
          transform: open ? 'rotate(45deg)' : 'rotate(0)',
          transition: 'transform 320ms var(--ease-soft), background 320ms var(--ease-soft)',
          background: open ? 'var(--pr-blush-100)' : 'transparent',
          flexShrink: 0,
          fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 22, lineHeight: 1,
        }}>+</span>
      </button>
      <div style={{
        maxHeight: open ? 200 : 0, overflow: 'hidden',
        transition: 'max-height 380ms var(--ease-soft), padding 380ms var(--ease-soft)',
      }}>
        <p className="body" style={{
          padding: open ? '0 40px 24px 0' : '0 40px 0 0',
          margin: 0, maxWidth: 640,
          transition: 'padding 380ms var(--ease-soft)',
        }}>{f.a}</p>
      </div>
    </div>
  );
}

function SiteFAQ() {
  const [open, setOpen] = React.useState(0);
  const mobile = useMobile();

  return (
    <section data-screen-label="faq" className="section" style={{ position: 'relative' }}>
      <div className="wrap" style={{
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1fr 1.4fr',
        gap: mobile ? 40 : 80,
        alignItems: 'flex-start',
      }}>
        <div style={{ position: mobile ? 'static' : 'sticky', top: 120 }}>
          <h2 className="h-1">
            What you might<br/>
            <span className="thin">want to know.</span>
          </h2>
          <p className="body" style={{ marginTop: 20, maxWidth: 320 }}>
            Anything else, write to <span style={{ color: 'var(--accent)' }}>hello@prettyrare.com</span>.
          </p>

          {!mobile && (
            <div className="zoom-frame" style={{
              marginTop: 36, width: 240, aspectRatio: '3/4',
              boxShadow: 'var(--shadow-sm)',
            }}>
              <div style={{
                width: '100%', height: '100%',
                backgroundImage: `url('assets/imagery/lifestyle-02.jpg')`,
                backgroundSize: 'cover', backgroundPosition: 'center',
              }} />
            </div>
          )}
        </div>

        <div>
          {FAQS.map((f, i) => (
            <FaqItem key={f.q} f={f}
              open={open === i}
              onToggle={() => setOpen(open === i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

window.SiteFAQ = SiteFAQ;