// Pretty Rare Boutique — FAQ (responsive)

const FAQS = [
  { q: 'I\'ve never done anything like this before. Is that okay?',
    a: 'More than okay. Many of our clients feel exactly the same way on their first visit. We will never rush you, never pressure you. We will answer every question honestly, and if treatment isn\'t right for you, we will say so.' },
  { q: 'Can I find out about pricing before I book?',
    a: 'Cosmetic and skin treatment pricing is personalised. It depends on your individual goals and what we discuss during your consultation. We never post pricing publicly, but we will always give you a clear, honest quote before any decision is made. There is no obligation to proceed.' },
  { q: 'Do you offer wrinkle treatment, lip treatment and cheek treatment?',
    a: 'Yes. We offer wrinkle treatment, lip treatment and consult, cheek volumising and consult, and masseter (jaw) treatment. Every treatment begins with a complimentary 20-minute consultation so we can understand your goals properly.' },
  { q: 'Will the results look natural?',
    a: 'Always. Every treatment is shaped around enhancement, not transformation. If something would look out of place for your face, we will tell you before we ever begin.' },
  { q: 'What is the consultation like?',
    a: 'A quiet 20-minute conversation. We listen first, ask about your concerns and what matters most, and then share our honest thoughts. There is absolutely no obligation to proceed the same day. Or at all.' },
  { q: 'Is the experience uncomfortable?',
    a: 'We use fine techniques and topical numbing where appropriate. And you can pause or stop at any point. No explanation needed. Your comfort is always the first priority.' },
  { q: 'Is a follow-up included?',
    a: 'Yes. Every treatment includes a complimentary review at two to four weeks. We check in, answer questions, and make sure you feel completely happy.' },
];

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 ? 300 : 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">
            A few things<br/>
            <span className="thin">you might wonder.</span>
          </h2>
          <p className="body" style={{ marginTop: 20, maxWidth: 320 }}>
            Anything else, reach us at <span style={{ color: 'var(--accent)' }}>hello@prettyrareboutique.com</span> and we are always happy to talk.
          </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;