/* global React */

function TrustBadges() {
  const items = [
    { k: "LICENSED", t: "古物商許可済み", n: "第901071510030号", s: "福岡県公安委員会" },
    { k: "FREE", t: "出張・査定 完全無料", n: "¥0", s: "見積もりのみも歓迎" },
    { k: "FIXED", t: "見積もり後の追加請求", n: "なし", s: "1円も上げません" },
    { k: "SPEED", t: "最短対応", n: "即日", s: "お電話一本で出動" },
  ];
  return (
    <section className="trust-strip">
      <div className="container trust-strip-inner">
        {items.map((it, i) => (
          <div key={i} className="trust-cell">
            <div className="trust-k mono">{String(i+1).padStart(2, "0")} / {it.k}</div>
            <div className="trust-t">{it.t}</div>
            <div className="trust-n heading">{it.n}</div>
            <div className="trust-s">{it.s}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Promises() {
  const items = [
    {
      num: "一",
      t: "見積もり金額から、1円も上げません。",
      d: "当日追加オプションの押し売りは行いません。事前提示した総額が、お支払いいただく総額です。",
    },
    {
      num: "二",
      t: "他社見積もりの適正チェックを無料で承ります。",
      d: "お手元の他社見積書をお送りください。内訳を拝見し、相場観と照らしてご説明いたします。",
    },
    {
      num: "三",
      t: "回収品は、可能な限りリユースいたします。",
      d: "海外輸出ルートを自社で保有。再利用できるものは廃棄せず、国境を越えて次の使い手へ。",
    },
    {
      num: "四",
      t: "処分が必要な品は、基準に沿って適正処分。",
      d: "家電リサイクル法・廃掃法に準拠。マニフェストが必要な品目は発行までお任せください。",
    },
    {
      num: "五",
      t: "プライバシー厳守。女性のお一人様でも安心。",
      d: "社名入りの車両で伺いません。立会い時の会話・連絡先の取り扱いにも配慮いたします。",
    },
  ];
  return (
    <section className="section" id="promises">
      <div className="container">
        <div className="section-head">
          <div><div className="idx">01 / 09 &nbsp; PROMISES</div></div>
          <div>
            <h2>お約束、五ヶ条。</h2>
            <p className="lede">
              派手な割引や安売りで選ばれる会社ではなく、<br />
              「呼んで、よかった」と静かに言っていただける会社でありたい。<br />
              そのために、私どもは次の五つをお約束いたします。
            </p>
          </div>
        </div>

        <ol className="promises-list">
          {items.map((p, i) => (
            <li key={i} className="promise">
              <div className="promise-num heading">{p.num}</div>
              <div className="promise-body">
                <h3 className="promise-t heading">{p.t}</h3>
                <p className="promise-d">{p.d}</p>
              </div>
              <div className="promise-mark mono">§ 0{i+1}</div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

window.TrustBadges = TrustBadges;
window.Promises = Promises;