/* global React */

function Compare() {
  const rows = [
    {
      stage: "見積もり時",
      items: [
        {
          label: "出張見積もり料",
          others: { v: "3,000〜5,000円", tone: "bad", note: "「キャンセルすると発生」と後出し" },
          ours:   { v: "0円", tone: "good", note: "訪問・写真見積もり、いずれも無料" },
        },
        {
          label: "見積もり書の内訳",
          others: { v: "一式・総額表示", tone: "warn", note: "内訳不明で比較困難" },
          ours:   { v: "品目別・工数別の明細", tone: "good", note: "A4 1枚で内訳をお渡し" },
        },
      ],
    },
    {
      stage: "作業当日",
      items: [
        {
          label: "追加請求",
          others: { v: "当日現場で上乗せ", tone: "bad", note: "「想定より量が多かった」等" },
          ours:   { v: "一切なし", tone: "good", note: "見積額で必ず完了" },
        },
        {
          label: "階段・搬出費",
          others: { v: "当日別途請求", tone: "bad", note: "階数×○円など後出し" },
          ours:   { v: "見積もり時に明示", tone: "good", note: "事前に現地確認・写真確認" },
        },
        {
          label: "時間延長料",
          others: { v: "1時間ごと加算", tone: "warn", note: "作業遅延を顧客負担に" },
          ours:   { v: "こちらの都合は加算せず", tone: "good", note: "時間は当社の責任範囲" },
        },
      ],
    },
    {
      stage: "処分・リユース",
      items: [
        {
          label: "処分方法",
          others: { v: "ほぼ全量を廃棄", tone: "warn", note: "リユース努力なし" },
          ours:   { v: "可能な限り再利用", tone: "good", note: "海外輸出ルートで第二の人生へ" },
        },
        {
          label: "買取の還元",
          others: { v: "回収料金と相殺で曖昧", tone: "warn", note: "買取額が見えない" },
          ours:   { v: "査定書で明示・差引表示", tone: "good", note: "買取 −◯◯円、と明記" },
        },
        {
          label: "マニフェスト発行",
          others: { v: "有料・別手配", tone: "warn", note: "事業者様にとって面倒" },
          ours:   { v: "必要時は標準対応", tone: "good", note: "適正処分の証跡をお渡し" },
        },
      ],
    },
    {
      stage: "お支払い",
      items: [
        {
          label: "支払い方法",
          others: { v: "現金のみが多い", tone: "warn", note: "" },
          ours:   { v: "現金 / 銀行振込", tone: "good", note: "法人様の経費処理にも対応" },
        },
        {
          label: "領収書・請求書",
          others: { v: "発行可否が不明瞭", tone: "warn", note: "" },
          ours:   { v: "適格請求書 対応", tone: "good", note: "インボイス制度対応済み" },
        },
      ],
    },
  ];

  const Icon = ({ tone }) => {
    if (tone === "good") return <span className="tone-icon tone-good" aria-hidden="true">●</span>;
    if (tone === "warn") return <span className="tone-icon tone-warn" aria-hidden="true">▲</span>;
    return <span className="tone-icon tone-bad" aria-hidden="true">×</span>;
  };

  return (
    <section className="section section--surface" id="compare">
      <div className="container">
        <div className="section-head">
          <div><div className="idx">03 / 09 &nbsp; COMPARISON</div></div>
          <div>
            <h2>見積もり、本当に比べてください。</h2>
            <p className="lede">
              「安いと思ったのに、当日いくつも足された」。<br />
              この業界でよく聞くお話です。料金は、総額ではなく<em className="em-ink">内訳</em>で比べるのが正解です。<br />
              一般的な業界慣行と、RE PLANNING の運用を並べました。ご遠慮なく、他社様とも見比べください。
            </p>
          </div>
        </div>

        <div className="compare-table-wrap">
          <div className="compare-table" role="table" aria-label="他社との比較">
            <div className="compare-row compare-head" role="row">
              <div className="compare-c c-stage" role="columnheader">
                <span className="mono">STAGE</span>
              </div>
              <div className="compare-c c-label" role="columnheader">
                <span className="mono">CHECK POINT</span>
              </div>
              <div className="compare-c c-other" role="columnheader">
                <div className="col-tag col-tag--other">一般的な業界慣行</div>
              </div>
              <div className="compare-c c-ours" role="columnheader">
                <div className="col-tag col-tag--ours">RE PLANNING</div>
              </div>
            </div>

            {rows.map((g, gi) => (
              <React.Fragment key={gi}>
                <div className="compare-stage-row">
                  <div className="stage-label heading">
                    <span className="mono stage-idx">Stage 0{gi+1}</span>
                    {g.stage}
                  </div>
                </div>
                {g.items.map((it, ii) => (
                  <div key={ii} className="compare-row" role="row">
                    <div className="compare-c c-stage" role="cell" />
                    <div className="compare-c c-label" role="cell">
                      <div className="label-t">{it.label}</div>
                    </div>
                    <div className="compare-c c-other" role="cell">
                      <div className="cell-head"><Icon tone={it.others.tone} /><span className="cell-v">{it.others.v}</span></div>
                      {it.others.note && <div className="cell-note">{it.others.note}</div>}
                    </div>
                    <div className="compare-c c-ours" role="cell">
                      <div className="cell-head"><Icon tone={it.ours.tone} /><span className="cell-v cell-v--strong">{it.ours.v}</span></div>
                      {it.ours.note && <div className="cell-note">{it.ours.note}</div>}
                    </div>
                  </div>
                ))}
              </React.Fragment>
            ))}

            <div className="compare-row compare-foot" role="row">
              <div className="compare-c c-stage" role="cell" />
              <div className="compare-c c-label" role="cell"><span className="mono">TOTAL</span></div>
              <div className="compare-c c-other" role="cell">
                <div className="cell-foot-v">不透明・変動</div>
              </div>
              <div className="compare-c c-ours" role="cell">
                <div className="cell-foot-v cell-foot-v--strong">明朗・確定</div>
              </div>
            </div>
          </div>
        </div>

        <div className="compare-cta">
          <div className="compare-cta-text">
            <div className="eyebrow">CHECK YOUR QUOTE</div>
            <p className="heading compare-cta-t">他社のお見積もり、<br className="br-mobile"/>拝見いたします。無料で。</p>
            <p className="compare-cta-d">
              相見積もりのチェックだけのご依頼も大歓迎です。<br/>
              契約の強要は一切いたしません。写真を送るだけで判定できます。
            </p>
          </div>
          <div className="compare-cta-actions">
            <a href="https://line.me/R/ti/p/@398wplue?from=page&liff.referrer=https%3A%2F%2Freplanning-fukuoka.studio.site%2F&searchId=398wplue" target="_blank" rel="noopener noreferrer" className="btn btn-primary">LINEで見積もりチェック</a>
            <a href="tel:09077781111" className="btn btn-ghost mono">090-7778-1111</a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Compare = Compare;