/* global React */
const { useState: useS_s } = React;

const SERVICES = [
  {
    id: 'wedding', num: '01', name: '結婚式',
    title: '結婚式に招かれた、その日のために。',
    desc: '親族として、友人として——晴れの席にふさわしい装いを。訪問着・色留袖・黒留袖まで、立場に合わせた着付けと小物の組み合わせをご提案します。当日のヘアセットも対応可能。',
    menu: [
      { name: '訪問着・色留袖の着付け', meta: 'VISITING / IRO-TOMESODE', price: '12,000', unit: '〜／回' },
      { name: '黒留袖の着付け', meta: 'KURO-TOMESODE', price: '15,000', unit: '〜／回' },
      { name: '着付け＋ヘアセット', meta: 'DRESSING + HAIR', price: '18,000', unit: '〜／回' },
      { name: '小物コーディネート相談', meta: 'STYLING', price: '3,000', unit: '〜／回' },
    ],
  },
  {
    id: '753', num: '02', name: '七五三',
    title: 'お子さんの、はじめての着物の日。',
    desc: '3歳・5歳・7歳それぞれの作法に合わせて。着崩れにくく、お子さんが疲れにくい着付けを心がけています。お母さま・お父さまの着付けも同時にご相談可能です。',
    menu: [
      { name: '3歳お祝い着の着付け', meta: '3 YEARS', price: '8,000', unit: '〜／回' },
      { name: '5歳袴の着付け', meta: '5 YEARS', price: '10,000', unit: '〜／回' },
      { name: '7歳四つ身の着付け', meta: '7 YEARS', price: '12,000', unit: '〜／回' },
      { name: 'ご家族着付けセット', meta: 'FAMILY SET', price: '25,000', unit: '〜／回' },
    ],
  },
  {
    id: 'graduation', num: '03', name: '卒業・入学式',
    title: 'お母さまの装い、お子さまの晴れ姿。',
    desc: '卒業式の袴姿、入学式の付下げや色無地——「自分で着たい」希望にも応えるレッスン付きプランも。ご自宅まで出張可能、対応エリアは要相談。',
    menu: [
      { name: '袴の着付け（卒業生）', meta: 'HAKAMA', price: '10,000', unit: '〜／回' },
      { name: 'お母さまの色無地・付下げ', meta: 'IROMUJI', price: '12,000', unit: '〜／回' },
      { name: 'セルフ着付けレッスン（90分）', meta: 'LESSON 90MIN', price: '8,000', unit: '〜／回' },
      { name: '出張着付け（往復交通費別）', meta: 'ON-LOCATION', price: '+ 3,000', unit: '〜／回' },
    ],
  },
  {
    id: 'small', num: '04', name: '小物相談',
    title: 'お得に揃えたい小物のこと、相談しよう。',
    desc: '帯締め・帯揚げ・伊達締めから、足袋・草履まで。「これって何が必要？」「もう持ってるかも？」——LINEや対面で30分無料相談。仕入れ先のリストもご紹介します。',
    menu: [
      { name: 'オンライン小物相談（30分）', meta: 'ONLINE 30MIN', price: '無料', unit: '' },
      { name: '対面コーディネート（60分）', meta: 'IN-PERSON 60MIN', price: '5,000', unit: '〜／回' },
      { name: '小物まるごとセット組み', meta: 'FULL STYLING', price: '8,000', unit: '〜／回' },
      { name: '仕入れ同行（半日）', meta: 'SHOPPING ASSIST', price: '12,000', unit: '〜／回' },
    ],
  },
];

const FAQ = [
  { q: '着物や小物がなくても大丈夫ですか？', a: 'もちろん大丈夫です。お持ちのものでまずお話しを伺い、足りないものは仕入れ先のご提案や貸出のご相談に乗ります。「何を揃えればいいか分からない」状態こそ、一緒に整えていきましょう。' },
  { q: '対応エリアはどこまでですか？', a: '基本的に首都圏（東京・神奈川・埼玉・千葉）にて対応しています。それ以外の地域も、交通費のご相談で出張可能なケースが多いです。まずはお気軽にお問い合わせください。' },
  { q: '当日に必要な持ち物はありますか？', a: 'ご予約確定後、シーンに合わせた持ち物リストをLINEまたはメールでお送りします。一般的には、着物一式・帯・小物・足袋・肌着・タオル数枚が基本です。事前にチェックする時間も設けています。' },
  { q: '着崩れが心配です。直しに来てもらえますか？', a: '対応エリア内であれば、当日の着崩れ直しもご相談可能です。式場の控室での15分程度のお直しから承ります。心配な場合は事前のご相談で、崩れにくい着付けを工夫します。' },
  { q: '副業とのことですが、平日も対応できますか？', a: '平日は19時以降、土日は終日対応可能です。早朝（朝6時〜）の支度にも対応しています。スケジュールはLINEで柔軟にやり取りさせてください。' },
];

function Services() {
  const [tab, setTab] = useS_s(SERVICES[0].id);
  const [openFaq, setOpenFaq] = useS_s(0);
  const cur = SERVICES.find(s => s.id === tab);

  return (
    <section id="services" className="scene services">
      <div className="header">
        <div>
          <span className="eyebrow">SERVICE ／ N° 03</span>
          <h2>4つのハレの日を、<br/>あなたのとなりで。</h2>
        </div>
        <p>
          結婚式・七五三・卒業式・入学式——<br/>
          それぞれのシーンに合わせた着付けメニューをご用意しています。
        </p>
      </div>

      <div className="svc-tabs" role="tablist">
        {SERVICES.map(s => (
          <button
            key={s.id}
            className={`svc-tab ${tab === s.id ? 'active' : ''}`}
            onClick={() => setTab(s.id)}
            role="tab"
          >
            <span className="num">{s.num}</span>
            <span className="name">{s.name}</span>
            <span className="price">FROM ¥{s.menu[0].price}</span>
          </button>
        ))}
      </div>

      <div className="svc-panel">
        <div className="desc">
          <h3>{cur.title}</h3>
          <p>{cur.desc}</p>
          <a className="btn ghost" href="#contact">
            このメニューで予約する <span className="arrow">→</span>
          </a>
        </div>
        <div className="menu">
          {cur.menu.map((m, i) => (
            <div key={i} className="row">
              <div>
                <span className="name">{m.name}</span>
                <span className="meta">{m.meta}</span>
              </div>
              <div className="price">¥{m.price}<small>{m.unit}</small></div>
            </div>
          ))}
        </div>
      </div>

      {/* booking flow */}
      <div style={{marginTop: 96}}>
        <span className="eyebrow">予約の流れ ／ FLOW</span>
        <div className="flow">
          {[
            { n: '01', t: 'お問い合わせ', d: 'フォームまたはLINEからご連絡ください。シーン・日付・場所をお知らせいただけるとスムーズです。' },
            { n: '02', t: 'ヒアリング', d: 'オンラインまたは対面で30分ほどお話を。お持ちの着物・小物を確認し、当日のイメージを擦り合わせます。' },
            { n: '03', t: '事前準備', d: '当日の持ち物リストをお送りします。必要に応じて小物の手配や貸出のご相談もこの段階で。' },
            { n: '04', t: 'ハレの日', d: '当日は予定の60〜90分前に伺います。気持ちよく一日を始められるよう、丁寧に着付けします。' },
          ].map(s => (
            <div key={s.n} className="step">
              <div className="step-num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>

      {/* FAQ */}
      <div className="faq">
        <span className="eyebrow">よくあるご質問 ／ FAQ</span>
        {FAQ.map((f, i) => (
          <div key={i} className={`faq-row ${openFaq === i ? 'open' : ''}`}>
            <button className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
              <span className="qm">Q.</span>
              <span className="qt">{f.q}</span>
              <span className="toggle">+</span>
            </button>
            <div className="faq-a"><div><p>{f.a}</p></div></div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Services = Services;