/* global React */

function Faq() {
  const [cat, setCat] = React.useState("all");
  const [open, setOpen] = React.useState(() => new Set([0]));

  const data = [
    { c: "料金", q: "見積もり後に料金が上がることはありますか？", a: "ございません。見積もり金額から1円も上げないことをお約束しております。現地で想定外の品目が発生した場合も、追加の作業についてお客様に合意いただいてから改めて作業を行います。黙って加算することは絶対にいたしません。" },
    { c: "料金", q: "他社で見積もりを取りました。チェックだけお願いできますか？", a: "もちろん承ります。お手元の見積書を写真でお送りください。内訳を拝見し、相場観と照らしてご意見を申し上げます。ご契約の強要は一切いたしません。" },
    { c: "料金", q: "買取と回収、どちらが得ですか？", a: "品目により異なります。原則として、使用できるものは買取で査定し、回収料金から差し引いてご提示いたします。年式・状態により買取困難な品は、リユースルートを通じて処分費を圧縮する運用です。" },
    { c: "料金", q: "支払い方法を教えてください。", a: "現金または銀行振込（西日本シティ銀行）でのお支払いに対応しております。クレジットカードでのお支払いは承っておりません。法人様の掛け払いはご相談ください。適格請求書（インボイス）を発行いたします。" },
    { c: "作業", q: "即日対応は可能ですか？", a: "那珂川市・福岡市近郊は原則即日対応が可能です。お電話でご相談ください。車両・スタッフの状況により翌日以降となる場合もございます。" },
    { c: "作業", q: "深夜・早朝でも対応してもらえますか？", a: "22時〜翌6時の深夜早朝帯も対応いたします。料金は通常の30%割増となりますが、近隣配慮の観点から無音搬出・社名非表示の車両でお伺いします。" },
    { c: "作業", q: "立会いなしで作業してもらえますか？", a: "鍵のお預かり、または現地解錠でのご依頼が可能です。作業前後の写真をお送りし、貴重品が発見された場合は必ずご連絡いたします。" },
    { c: "作業", q: "作業時間はどのくらいかかりますか？", a: "単品であれば30分〜、1R全量で1〜2時間、3LDKで4〜6時間が目安です。正確な所要は現地確認時にお伝えいたします。" },
    { c: "作業", q: "マンション・アパートでも大丈夫ですか？", a: "問題ございません。エレベーターの養生、共用部の保護シート敷設まで対応いたします。管理会社様への事前連絡もお申し付けください。" },
    { c: "品目", q: "1点だけでも依頼できますか？", a: "もちろん承ります。単品回収1,500円〜、エアコン・一部バイクは無料回収も行っております。" },
    { c: "品目", q: "金庫・ピアノ・仏壇の処分はできますか？", a: "いずれも対応可能です。金庫は解錠・耐火材の分別、ピアノは専門業者連携、仏壇は供養をご希望の場合は寺院を手配いたします。" },
    { c: "品目", q: "回収できないものはありますか？", a: "生ゴミ・医療廃棄物・産業廃棄物・危険物（ガソリン・灯油等）は法令上お引き受けできません。該当する場合は適切な処理方法をご案内いたします。" },
    { c: "品目", q: "家電リサイクル対象品の取り扱いは？", a: "家電リサイクル法に基づき適正に処理いたします。リサイクル券の発行から指定引取場所への引渡しまで代行可能です。" },
    { c: "エリア", q: "対応エリアはどこまでですか？", a: "福岡県全域に対応しております。那珂川市・福岡市近郊は即日、県内遠方は翌日対応が目安です。佐賀・熊本県境部もご相談ください。" },
    { c: "支払い", q: "領収書・請求書は発行してもらえますか？", a: "標準で発行いたします。宛名・但書のご指定、適格請求書のフォーマットにも対応いたします。法人様の経費処理用途もご安心ください。" },
    { c: "支払い", q: "後払いや分割払いはできますか？", a: "法人様の月末締め翌月末払いに対応いたします。個人様の分割払いは現状承っておりませんので、ご相談ください。" },
    { c: "その他", q: "プライバシーは守られますか？", a: "社名入り車両でのお伺いは行いません。お客様情報・作業内容は作業完了後6ヶ月で破棄、SNS等への投稿も一切いたしません。" },
    { c: "その他", q: "遺品整理で、何も分からない状態でも頼めますか？", a: "はい。むしろ、そうしたご依頼が多うございます。全体の仕分けから貴重品の発見、供養の相談までお任せください。ご遺族のご心情に寄り添って進めてまいります。" },
    { c: "その他", q: "ゴミ屋敷の状態でも大丈夫ですか？", a: "問題ございません。近隣に気づかれない時間帯・車両で作業いたします。事前ヒアリングと写真確認を徹底し、お客様に恥ずかしい思いをさせない配慮を最優先にしております。" },
  ];

  const cats = ["all", "料金", "作業", "品目", "エリア", "支払い", "その他"];
  const filtered = cat === "all" ? data : data.filter((d) => d.c === cat);

  const toggle = (i) => {
    setOpen((prev) => {
      const s = new Set(prev);
      s.has(i) ? s.delete(i) : s.add(i);
      return s;
    });
  };

  return (
    <section className="section section--surface" id="faq">
      <div className="container">
        <div className="section-head">
          <div><div className="idx">07 / 09 &nbsp; FAQ</div></div>
          <div>
            <h2>よくあるご質問。</h2>
            <p className="lede">
              お問い合わせの前に、多くの方が気にされるご質問を 21 項目。<br />
              ここに無いご質問も、お電話・メールで遠慮なくお尋ねください。
            </p>
          </div>
        </div>

        <div className="faq-tabs">
          {cats.map((c) => (
            <button key={c}
              className={`faq-tab ${cat === c ? "is-active" : ""}`}
              onClick={() => setCat(c)}>
              <span className="mono">{c === "all" ? "ALL" : c}</span>
              <span className="faq-tab-n mono">
                {c === "all" ? data.length : data.filter((d) => d.c === c).length}
              </span>
            </button>
          ))}
        </div>

        <div className="faq-list">
          {filtered.map((it, i) => {
            const idx = data.indexOf(it);
            const isOpen = open.has(idx);
            return (
              <div key={idx} className={`faq-item ${isOpen ? "is-open" : ""}`}>
                <button className="faq-q" onClick={() => toggle(idx)}>
                  <span className="faq-num mono">Q{String(idx+1).padStart(2, "0")}</span>
                  <span className="faq-cat mono">{it.c}</span>
                  <span className="faq-q-t">{it.q}</span>
                  <span className="faq-mark" aria-hidden="true">{isOpen ? "−" : "+"}</span>
                </button>
                <div className="faq-a-wrap" style={{ maxHeight: isOpen ? 400 : 0 }}>
                  <div className="faq-a">
                    <span className="faq-a-mark mono">A.</span>
                    <p>{it.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.Faq = Faq;