// site-faq.jsx — Q&A accordion

const FAQS = [
  { q: '初心者でも受講できますか？',
    a: 'はい、可能です。各講習にはレベル設定があり、基礎から段階的に学べる構成になっています。お気軽にご相談ください。' },
  { q: '美容師免許がなくても参加できますか？',
    a: '一部の講習は美容師免許をお持ちでない方もご参加いただけます。詳細は各講習詳細ページの「対象者」項目をご確認ください。' },
  { q: '講習は対面ですか？',
    a: '基本的に対面講習です。実技を伴う内容のため、講師との距離感を大切にした少人数制で実施しています。' },
  { q: '持ち物はありますか？',
    a: 'シザー、コーム、ダッカール等の基本道具をお持ちください。講習ごとの必要物品は、お申込み後にご案内します。' },
  { q: '申込方法を教えてください？',
    a: 'お問い合わせフォーム、またはInstagramのDMよりお申込みください。担当者よりご連絡を差し上げます。' },
];

function FAQItem({ item, idx, open, onToggle }) {
  const num = String(idx + 1).padStart(2, '0');
  return (
    <div
      onClick={onToggle}
      style={{
        background: BRAND.white, padding: '28px 36px', cursor: 'pointer',
        border: `1px solid ${open ? BRAND.black : 'transparent'}`,
        transition: 'border-color .3s ease',
      }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '60px 1fr 32px',
        alignItems: 'center', gap: 24,
      }}>
        <div style={{
          fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
          fontSize: 22, color: BRAND.gold, letterSpacing: '.04em',
        }}>Q.{num}</div>
        <div style={{
          fontFamily: '"Shippori Mincho", serif',
          fontSize: 17, letterSpacing: '.08em', color: BRAND.ink,
          lineHeight: 1.5,
        }}>{item.q}</div>
        <div style={{
          width: 32, height: 32, position: 'relative',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <span style={{
            position: 'absolute', width: 14, height: 1, background: BRAND.black,
          }} />
          <span style={{
            position: 'absolute', width: 1, height: 14, background: BRAND.black,
            transform: open ? 'scaleY(0)' : 'scaleY(1)',
            transition: 'transform .35s ease',
          }} />
        </div>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateRows: open ? '1fr' : '0fr',
        transition: 'grid-template-rows .5s cubic-bezier(.4,0,.2,1)',
      }}>
        <div style={{ overflow: 'hidden' }}>
          <div style={{
            paddingTop: 24, marginTop: 24, marginLeft: 84,
            borderTop: `1px solid ${BRAND.hair}`,
            fontFamily: '"Noto Sans JP", sans-serif',
            fontSize: 14, lineHeight: 2, letterSpacing: '.04em',
            color: BRAND.mute, maxWidth: 720, textWrap: 'pretty',
          }}>{item.a}</div>
        </div>
      </div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" style={{
      background: BRAND.beige, color: BRAND.ink, padding: '160px 80px',
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 72 }}>
          <Eyebrow>FAQ — 07</Eyebrow>
          <div style={{ marginTop: 28 }}>
            <SectionTitle en="Questions." jp="よくあるご質問" align="center" />
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {FAQS.map((item, i) => (
            <FAQItem key={i} item={item} idx={i} open={open === i}
                     onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;