/* global React */

function Price() {
  const [tab, setTab] = React.useState("single");

  const single = [
    { k: "冷蔵庫 (〜170L)", v: 6500 },
    { k: "冷蔵庫 (171L〜)", v: 9000 },
    { k: "洗濯機 (縦型)", v: 3500 },
    { k: "洗濯機 (ドラム式)", v: 8000 },
    { k: "エアコン (標準)", v: 0, note: "無料回収" },
    { k: "テレビ (〜32型)", v: 2500 },
    { k: "テレビ (33型〜)", v: 4000 },
    { k: "電子レンジ", v: 1500 },
    { k: "ソファ (2人掛け)", v: 4500 },
    { k: "ソファ (3人掛け)", v: 8000 },
    { k: "ベッド (シングル)", v: 4500 },
    { k: "ベッド (ダブル)", v: 6500 },
    { k: "マットレス", v: 3500 },
    { k: "タンス (中)", v: 3500 },
    { k: "自転車", v: 1500 },
    { k: "バイク (50cc)", v: 0, note: "無料引取" },
  ];

  const pack = [
    { k: "1R / 1K", v: 35000, hrs: "1〜2h", staff: "1〜2名", trk: "1.5t" },
    { k: "1DK / 1LDK", v: 55000, hrs: "2〜3h", staff: "2名", trk: "2t" },
    { k: "2DK / 2LDK", v: 85000, hrs: "3〜5h", staff: "2〜3名", trk: "2t" },
    { k: "3DK / 3LDK", v: 125000, hrs: "4〜6h", staff: "3〜4名", trk: "4t" },
    { k: "4LDK 〜", v: 165000, hrs: "6h〜", staff: "4名〜", trk: "要相談" },
  ];

  const options = [
    { k: "階段上げ (2F〜)", v: "+500円 / 階" },
    { k: "大型品 解体", v: "+2,000円〜" },
    { k: "即日対応", v: "+5,000円" },
    { k: "深夜・早朝 (22–6時)", v: "+30% 割増" },
    { k: "日祝割増", v: "なし" },
    { k: "土日割増", v: "なし" },
  ];

  const yen = (n) => "¥" + n.toLocaleString("ja-JP");

  return (
    <section className="section" id="price">
      <div className="container">
        <div className="section-head">
          <div><div className="idx">04 / 09 &nbsp; PRICE</div></div>
          <div>
            <h2>料金は、先に お見せいたします。</h2>
            <p className="lede">
              現地確認で確定いたしますが、ご依頼前の目安をそのまま掲載しております。<br />
              見積もり後の追加請求はいたしません。
            </p>
          </div>
        </div>

        <div className="price-tabs">
          <button className={`price-tab ${tab === "single" ? "is-active" : ""}`} onClick={() => setTab("single")}>
            <span className="mono">A</span> 品目別料金
          </button>
          <button className={`price-tab ${tab === "pack" ? "is-active" : ""}`} onClick={() => setTab("pack")}>
            <span className="mono">B</span> 間取り別パック
          </button>
          <button className={`price-tab ${tab === "opt" ? "is-active" : ""}`} onClick={() => setTab("opt")}>
            <span className="mono">C</span> オプション
          </button>
        </div>

        {tab === "single" && (
          <div className="price-grid">
            {single.map((it, i) => (
              <div key={i} className="price-cell">
                <div className="price-cell-k">{it.k}</div>
                <div className="price-cell-v heading">
                  {it.v === 0 ? <span className="price-free">¥0</span> : yen(it.v)}
                  <span className="price-cell-u mono">〜</span>
                </div>
                {it.note && <div className="price-cell-note mono">{it.note}</div>}
              </div>
            ))}
          </div>
        )}

        {tab === "pack" && (
          <div className="price-pack-table">
            <div className="ppt-head mono">
              <div>間取り</div><div>目安料金</div><div>作業時間</div><div>スタッフ</div><div>車両</div>
            </div>
            {pack.map((p, i) => (
              <div key={i} className="ppt-row">
                <div className="ppt-k heading">{p.k}</div>
                <div className="ppt-v heading">{yen(p.v)} <span className="price-cell-u mono">〜</span></div>
                <div className="mono">{p.hrs}</div>
                <div className="mono">{p.staff}</div>
                <div className="mono">{p.trk}</div>
              </div>
            ))}
          </div>
        )}

        {tab === "opt" && (
          <div className="price-opt">
            {options.map((o, i) => (
              <div key={i} className="price-opt-row">
                <span className="mono price-opt-n">{String(i+1).padStart(2, "0")}</span>
                <span className="price-opt-k">{o.k}</span>
                <span className="price-opt-v heading mono">{o.v}</span>
              </div>
            ))}
          </div>
        )}

        <div className="price-beat">
          <div className="eyebrow">PRICE MATCH</div>
          <div className="price-beat-body">
            <p className="heading price-beat-t">
              他社見積もりより高ければ、ご相談ください。
            </p>
            <p>
              同条件・同品目であれば、誠実に価格をお話し合いさせていただきます。<br />
              不当な値下げ合戦ではなく、「適正価格」を一緒に探す姿勢でおります。
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Price = Price;