/* global React */

function Services() {
  const services = [
    {
      id: "recycle",
      tag: "S-01",
      t: "不用品回収・買取",
      d: "家具・家電・楽器・工具・事務什器まで。使えるものは買取で減額、不要分のみを回収。",
      items: ["冷蔵庫・洗濯機", "ソファ・ベッド", "テレビ・AV機器", "事務机・書庫", "楽器・工具", "自転車・バイク"],
      price: "単品 1,500円〜",
    },
    {
      id: "aircon",
      tag: "S-02",
      t: "エアコン無料回収",
      d: "室外機・配管含む取り外しから回収まで。銅・鉄のスクラップ価値を還元。",
      items: ["壁掛けエアコン", "室外機・配管", "業務用エアコン", "取り外し工事", "ガス回収", "ビス穴処理"],
      price: "標準機 ¥0",
    },
    {
      id: "ihin",
      tag: "S-03",
      t: "遺品整理・生前整理",
      d: "貴重品の仕分けから、思い出の品の供養相談まで。ご遺族の心情に寄り添った作業を。",
      items: ["全体の仕分け", "貴重品の発見", "書類・通帳整理", "供養相談", "特殊清掃連携", "相続物品査定"],
      price: "1R ¥35,000〜",
    },
    {
      id: "gomiyashiki",
      tag: "S-04",
      t: "ゴミ屋敷片付け",
      d: "近隣にお気づかれしない時間帯・車両で。写真見積もり可、事前ヒアリング徹底。",
      items: ["全量撤去", "分別作業", "害虫対策連携", "消臭・簡易清掃", "原状回復相談", "深夜早朝対応"],
      price: "応相談",
    },
    {
      id: "export",
      tag: "S-05",
      t: "海外輸出・貿易（リユース）",
      d: "自社輸出ルートで、東南アジア・アフリカへ。焼却せず、次の使い手に届ける。",
      items: ["家電・家具の輸出", "コンテナ積込", "通関手続き", "B2B買取", "企業一括引取", "ODA連携事例"],
      price: "買取強化中",
    },
  ];

  return (
    <section className="section" id="service">
      <div className="container">
        <div className="section-head">
          <div><div className="idx">02 / 09 &nbsp; SERVICES</div></div>
          <div>
            <h2>五本の柱で、<br />暮らしと事業のお片付けを。</h2>
            <p className="lede">
              単発の回収から、一棟まるごとの整理、国境を越えるリユースまで。<br />
              「捨てる」の手前で立ち止まり、価値を最大化してからお預かりいたします。
            </p>
          </div>
        </div>

        <div className="svc-grid">
          {services.map((s, i) => (
            <a href={`#${s.id}`} key={s.id} className="svc-card">
              <div className="svc-card-head">
                <span className="mono svc-tag">{s.tag}</span>
                <span className="mono svc-price">{s.price}</span>
              </div>
              <h3 className="svc-t heading">{s.t}</h3>
              <p className="svc-d">{s.d}</p>
              <ul className="svc-items">
                {s.items.map((it, j) => <li key={j}>・ {it}</li>)}
              </ul>
            </a>
          ))}
          <div className="svc-card svc-card--note">
            <div className="eyebrow">NOTE</div>
            <p>
              上記以外の品目・作業もご相談ください。<br />
              できない場合は、できないと申し上げます。
            </p>
            <a href="#contact" className="btn btn-ghost" style={{marginTop: 20}}>相談してみる →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Services = Services;