/* v4 中央本体セクション群 */

const TEL = "0957-53-5656";
const TEL_HREF = "tel:" + TEL.replace(/-/g, "");
const LINE_HREF = "https://line.me/ti/p/kjvX-xFLFT";

const asset = (id, path) => (typeof window !== "undefined" && window.__resources && window.__resources[id]) || path;

// セクション定義（右ナビと連動）
const SECTIONS = [
{ id: "hero", no: "00", nav: "トップ" },
{ id: "results", no: "01", nav: "実績" },
{ id: "worries", no: "02", nav: "ご相談例" },
{ id: "capability", no: "03", nav: "対応力" },
{ id: "reasons", no: "04", nav: "選ばれる理由" },
{ id: "service", no: "05", nav: "サービス" },
{ id: "plan", no: "06", nav: "含まれる内容" },
{ id: "price", no: "07", nav: "料金の目安" },
{ id: "flow", no: "08", nav: "ご依頼の流れ" },
{ id: "works", no: "09", nav: "作業実績" },
{ id: "voice", no: "10", nav: "お客様の声" },
{ id: "faq", no: "11", nav: "よくある質問" },
{ id: "contact", no: "12", nav: "お問い合わせ" }];


function Eyebrow({ no, children }) {
  return (
    <>
      {no && no !== "—" && <span className="sec-wm num" aria-hidden="true">{no}</span>}
      <div className="eyebrow" style={{ padding: "0px", borderStyle: "solid", borderWidth: "0px", margin: "0px 0px 5px", fontSize: "15px", lineHeight: "1.85" }}><span className="num">{no}</span>{children}</div>
    </>);

}

// 朝の光の和室 SVG（明るめ配色）
function HeroScene() {
  return (
    <div className="ph" style={{ aspectRatio: "16/10" }}>
      <svg viewBox="0 0 400 250" xmlns="http://www.w3.org/2000/svg" style={{ display: "block", width: "100%", height: "100%" }} preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="v4wall" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#fbf6ec" />
            <stop offset="100%" stopColor="#eef3ea" />
          </linearGradient>
          <linearGradient id="v4floor" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#e8dcc4" />
            <stop offset="100%" stopColor="#d6c4a4" />
          </linearGradient>
          <linearGradient id="v4shoji" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#ffffff" />
            <stop offset="100%" stopColor="#f3f7ee" />
          </linearGradient>
          <radialGradient id="v4glow" cx="0.28" cy="0.12" r="0.8">
            <stop offset="0%" stopColor="#fffbef" stopOpacity="0.95" />
            <stop offset="100%" stopColor="#fffbef" stopOpacity="0" />
          </radialGradient>
          <linearGradient id="v4beam" x1="0.2" y1="0" x2="0.4" y2="1">
            <stop offset="0%" stopColor="#ffffff" stopOpacity="0.6" />
            <stop offset="100%" stopColor="#ffffff" stopOpacity="0" />
          </linearGradient>
        </defs>
        <rect x="0" y="0" width="400" height="185" fill="url(#v4wall)" />
        <rect x="0" y="0" width="400" height="250" fill="url(#v4glow)" />
        {/* 障子 */}
        <g>
          <rect x="24" y="32" width="172" height="135" fill="url(#v4shoji)" stroke="#bfa987" strokeWidth="2" />
          <line x1="81" y1="32" x2="81" y2="167" stroke="#cdb893" strokeWidth="1" />
          <line x1="138" y1="32" x2="138" y2="167" stroke="#cdb893" strokeWidth="1" />
          <line x1="24" y1="77" x2="196" y2="77" stroke="#cdb893" strokeWidth="1" />
          <line x1="24" y1="122" x2="196" y2="122" stroke="#cdb893" strokeWidth="1" />
        </g>
        {/* 光の帯 */}
        <polygon points="26,167 196,167 250,250 -24,250" fill="url(#v4beam)" opacity="0.8" />
        {/* 床 */}
        <rect x="0" y="185" width="400" height="65" fill="url(#v4floor)" />
        <line x1="0" y1="185" x2="400" y2="185" stroke="#c2ab86" strokeWidth="0.8" opacity="0.6" />
        {/* 床の間と掛け軸 */}
        <g>
          <rect x="250" y="44" width="104" height="141" fill="#efe4cf" stroke="#cdb893" strokeWidth="1.4" />
          <rect x="278" y="54" width="48" height="112" fill="#fdfaf2" stroke="#cdb893" strokeWidth="0.6" />
          <rect x="278" y="54" width="48" height="7" fill="#bfa987" />
          <rect x="278" y="159" width="48" height="7" fill="#bfa987" />
          <path d="M294 76 L308 86 M299 71 L299 100" stroke="#5f8d6e" strokeWidth="1.4" strokeLinecap="round" fill="none" opacity="0.75" />
          <path d="M296 116 Q303 125 310 116 M303 111 L303 134" stroke="#5f8d6e" strokeWidth="1.2" strokeLinecap="round" fill="none" opacity="0.75" />
        </g>
        {/* 生け花 */}
        <g transform="translate(296, 172)">
          <ellipse cx="0" cy="13" rx="12" ry="3.5" fill="#000" opacity="0.08" />
          <path d="M-8 11 Q-8 -3 -5 -6 L5 -6 Q8 -3 8 11 Z" fill="#5f8d6e" />
          <path d="M0 -6 Q-4 -22 -11 -34" stroke="#436b50" strokeWidth="1.1" fill="none" strokeLinecap="round" />
          <path d="M0 -6 Q3 -18 7 -26" stroke="#436b50" strokeWidth="1" fill="none" strokeLinecap="round" />
          <circle cx="-11" cy="-34" r="3.6" fill="#e89a63" />
          <circle cx="-9" cy="-36" r="2.6" fill="#f2b888" />
          <circle cx="7" cy="-26" r="2.8" fill="#e07a5f" />
          <circle cx="8" cy="-28" r="1.8" fill="#f2b888" />
        </g>
        {/* 塵 */}
        <g opacity="0.7" fill="#fffbe8">
          <circle cx="120" cy="120" r="1.1" />
          <circle cx="150" cy="160" r="0.8" />
          <circle cx="95" cy="180" r="1" />
          <circle cx="175" cy="200" r="1.1" />
          <circle cx="210" cy="185" r="0.9" />
        </g>
      </svg>
    </div>);

}

// ヒーローの4特徴アイコン列
function HeroFeatures() {
  const ic = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" };
  const feats = [
  { t: <>最短30分〜1時間で<br />スピード対応</>, svg: <svg {...ic}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg> },
  { t: <>長崎県内<br />全域対応</>, svg: <svg {...ic}><path d="M12 21s-7-6-7-12a7 7 0 0 1 14 0c0 6-7 12-7 12z" /><circle cx="12" cy="9" r="2.5" /></svg> },
  { t: <>引越会社の<br />確かな対応力</>, svg: <svg {...ic}><path d="M1 5h11v10H1z" /><path d="M12 8h4l3 3v4h-7z" /><circle cx="5" cy="17.5" r="1.6" /><circle cx="16.5" cy="17.5" r="1.6" /></svg> },
  { t: <>その後の困りごとも<br />しっかりサポート</>, svg: <svg {...ic}><path d="M3 13c3 0 4-3 6-3s3 2 5 2M3 13v4a1 1 0 0 0 1 1h5" /><path d="M20.5 8.5a2.3 2.3 0 0 0-3.3 0l-.7.7-.7-.7a2.3 2.3 0 1 0-3.3 3.3l4 4 4-4a2.3 2.3 0 0 0 0-3.3z" /></svg> }];

  return (
    <div className="hero-features">
      {feats.map((f, i) =>
      <div className="hero-feat" key={i}>
          <div className="hf-ic">{f.svg}</div>
          <div className="hf-tx">{f.t}</div>
        </div>
      )}
    </div>);

}

function Hero() {
  const heroBg = asset("heroBg", "assets/hero-bg.png");
  return (
    <section className="sec" id="hero" data-screen-label="トップ" style={{ paddingTop: 0, paddingBottom: 48 }}>
      <div className="hero-top">
        <div className="hero-visual">
          <img className="hero-visual-img" src={heroBg} alt="和室に並ぶ段ボール・思い出の品・供養品" />
          <div className="hero-visual-text">
            <Eyebrow no="—">長崎の遺品整理・生前整理</Eyebrow>
            <h1 className="h2 mincho" style={{ lineHeight: 1.5, marginBottom: 22, marginTop: 6, fontSize: "36px", margin: "25px 0px 30px" }}>
              長崎で遺品整理に<br />
              困ったら、<br />
              <span className="hl" style={{ fontSize: "36px" }}>中村トランスポート</span>へ。
            </h1>
            <div className="speed-wrap" style={{ textAlign: "left", marginBottom: 22, margin: "0px 0px 22px" }}>
              <div className="speed-badge">
                <span className="sb-tx">
                  <span className="sb-lbl">長崎県内・スピード対応</span>
                  <span className="sb-tm">最短<b>30</b><i>分</i>〜<b>1</b><i>時間</i>で現地へ</span>
                </span>
              </div>
            </div>
          </div>
        </div>
        <p className="lead hero-lead">
          「今から来れますか？」——ご親族が集まって片付けを始めたものの、<br />
          とても1日では終わらない。そんな時こそ、お電話ください。<br />
          <strong style={{ color: "var(--ink)", fontWeight: 700, fontSize: "16px" }}>探す・整理する・運ぶ・届ける・処分する</strong>まで、<br />
          引越会社だからできる対応力で、<span className="mk" style={{ fontSize: "16px" }}>その後のお困りごとまで解決します。</span>
        </p>
      </div>
      <HeroFeatures />
      <div className="hero-tagline" style={{ textAlign: "center", marginBottom: 22, marginTop: 18,
        fontFamily: "'Noto Serif JP', serif", fontSize: 17, color: "var(--primary-deep)",
        letterSpacing: "0.06em", fontWeight: 600, margin: "18px 0px 30px"
      }}>
        <span className="ht-dash">――</span> <span className="mk-g ht-tx" style={{ fontSize: "26px" }}>そのまんまで、よかけんね。</span> <span className="ht-dash">――</span>
        <div style={{ marginTop: 10, fontSize: 16, color: "var(--ink-soft)", fontWeight: 600, letterSpacing: "0.04em", margin: "10px 0px 0px" }}>
          まずはお気軽にご相談ください。
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10, maxWidth: 420, marginLeft: "auto", marginRight: "auto", width: "100%" }}>
        <a href={TEL_HREF} className="contact-route" style={{ borderColor: "var(--primary)" }}>
          <span className="cr-ic" style={{ background: "var(--primary)" }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff"><path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57a1 1 0 0 0-1.02.24l-2.2 2.2a15.1 15.1 0 0 1-6.59-6.59l2.2-2.2a1 1 0 0 0 .25-1.02A11.36 11.36 0 0 1 8.5 4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1 17 17 0 0 0 17 17 1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1z" /></svg>
          </span>
          <span className="cr-tx"><b>電話で相談する</b><i>「今から来れますか？」など緊急のご相談</i></span>
          <span className="cr-ar">›</span>
        </a>
        <a href={LINE_HREF} className="contact-route" style={{ borderColor: "#06c755" }}>
          <span className="cr-ic" style={{ background: "#06c755" }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff"><path d="M12 3C6.5 3 2 6.7 2 11.2c0 4 3.6 7.4 8.5 8 .3.1.8.2.9.5.1.3.1.7 0 1l-.1.9c0 .3-.2 1 .9.6 1.1-.5 6-3.5 8.2-6C21.3 14.6 22 13 22 11.2 22 6.7 17.5 3 12 3z" /></svg>
          </span>
          <span className="cr-tx"><b>LINEで写真を送って相談</b><i>写真を送るだけでも大丈夫です</i></span>
          <span className="cr-ar">›</span>
        </a>
        <a href="#contact" className="contact-route" style={{ borderColor: "var(--accent)" }}>
          <span className="cr-ic" style={{ background: "var(--accent)" }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16v16H4z" /><path d="m4 6 8 6 8-6" /></svg>
          </span>
          <span className="cr-tx"><b>フォームから相談する</b><i>電話やLINEが難しい方はこちら</i></span>
          <span className="cr-ar">›</span>
        </a>
        <div style={{ display: "flex", justifyContent: "center", gap: 8, marginTop: 14, flexWrap: "wrap" }}>
          <span className="contact-badge">最短30分〜1時間対応</span>
          <span className="contact-badge">立会不要・写真報告対応</span>
        </div>
      </div>
    </section>);

}

function Worries() {
  const items = [
  "「今から来れますか？」と、今日中に来てほしい",
  "残す物と処分する物を、一緒に確認してほしい",
  "写真・通帳・権利書・現金などを探してほしい",
  "形見の家具や家電を、ご親族のお宅へ届けてほしい",
  "同居されているご家族の不用品も一緒に片付けたい",
  "洗濯機の入れ替え・接続、古い物の処分まで頼みたい",
  "片付けで広くなった部屋の、家具の配置換えもお願いしたい",
  "県外で行けないので、鍵を送るから写真で報告してほしい"];

  return (
    <section className="sec sec-warm" id="worries" data-screen-label="ご相談例">
      <Eyebrow no="02">CONSULTATION</Eyebrow>
      <h2 className="h2 mincho">ご相談のほとんどは、<br />遺品整理だけではありません。</h2>
      <p className="lead">「処分してほしい」だけではありません。<br /><span className="mk-g">中村トランスポートには、こんなお声が日々届きます。</span></p>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {items.map((t, i) =>
        <div key={i} className="card" style={{ display: "flex", alignItems: "center", gap: 14, padding: "16px 18px" }}>
            <div style={{
            width: 30, height: 30, borderRadius: "50%", flexShrink: 0,
            background: "var(--primary)", color: "#fff",
            display: "flex", alignItems: "center", justifyContent: "center"
          }}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
            </div>
            <span className="mincho" style={{ fontSize: 15.5, fontWeight: 500, color: "var(--ink)", lineHeight: 1.55 }}>{t}</span>
          </div>
        )}
      </div>
      <div style={{
        marginTop: 18, padding: "16px 18px", background: "var(--surface)",
        borderRadius: "var(--r-md)", border: "1px solid var(--line)",
        fontSize: 13.5, lineHeight: 1.9, color: "var(--ink-soft)"
      }}>
        どれも実際にいただくご相談です。「これもお願いできる？」と思ったら、<br />
        まずはお気軽にお声がけください。<strong style={{ color: "var(--ink)" }}>そのまんまで、大丈夫です。</strong>
      </div>
    </section>);

}

// 引越会社だからできる8つの対応力
function Capability() {
  const caps = [
  { icon: "search", t: "探す", d: "通帳・権利書・現金・思い出の品を丁寧に捜索します。" },
  { icon: "sort", t: "整理する", d: "残す物と処分する物を、ご一緒に確認しながら。" },
  { icon: "truck", t: "運ぶ", d: "家具・家電をご親族のお宅へお運びします。" },
  { icon: "gift", t: "届ける", d: "形見の品を県外へも配送・郵送いたします。" },
  { icon: "plug", t: "設置する", d: "テレビ・洗濯機・冷蔵庫・エアコン（別途工事費用必須）の入れ替え・接続など設置作業まで。" },
  { icon: "layout", t: "配置換えする", d: "広くなったお部屋の模様変え・大型家具の配置換えも。" },
  { icon: "box", t: "保管する", d: "必要なお品は一時的にお預かりいたします。" },
  { icon: "broom", t: "処分する", d: "仕分け・搬出から適正処分まで責任を持って。" }];

  const Icon = ({ name }) => {
    const p = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" };
    const paths = {
      search: <><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></>,
      sort: <><path d="M4 6h16M6 12h12M9 18h6" /></>,
      truck: <><path d="M1 4h13v10H1z" /><path d="M14 8h4l3 3v3h-7z" /><circle cx="5.5" cy="17" r="1.8" /><circle cx="17.5" cy="17" r="1.8" /></>,
      gift: <><rect x="3" y="9" width="18" height="12" rx="1" /><path d="M3 9h18M12 9v12M12 9S9 3 6.5 4.5 8 9 8 9M12 9s3-6 5.5-4.5S16 9 16 9" /></>,
      plug: <><path d="M9 2v6M15 2v6M7 8h10v3a5 5 0 0 1-10 0z M12 16v6" /></>,
      layout: <><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18M9 21V9" /></>,
      box: <><path d="M21 8 12 3 3 8v8l9 5 9-5z" /><path d="M3 8l9 5 9-5M12 13v8" /></>,
      broom: <><path d="M19 4 9 14M5 21s-1-4 2-7l8-8 3 3-8 8c-3 3-5 4-5 4z" /></>
    };
    return <svg {...p}>{paths[name]}</svg>;
  };
  return (
    <section className="sec sec-dark" id="capability" data-screen-label="対応力">
      <Eyebrow no="03">OUR STRENGTH</Eyebrow>
      <h2 className="h2 mincho">ご家族だけでは難しい整理を。<br /><span className="hl">その先</span>まで支えます。</h2>
      <p className="lead">
        <span className="mk">遺品整理＝処分、ではありません。</span>中村トランスポートは引越会社が母体。<br />
        亡くなられた方が残されたお品を、ご家族に代わって整理し、<br />
        その後のお困りごとまで、ひとつの窓口で解決します。
      </p>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        {caps.map((c, i) =>
        <div key={i} className="card" style={{ padding: "16px 16px" }}>
            <div style={{
            width: 40, height: 40, borderRadius: 12, marginBottom: 10,
            background: "var(--primary-soft)", color: "var(--primary-deep)",
            display: "flex", alignItems: "center", justifyContent: "center"
          }}>
              <Icon name={c.icon} />
            </div>
            <h3 className="mincho" style={{ margin: "0 0 4px", fontSize: 17, fontWeight: 600, letterSpacing: "0.04em" }}>{c.t}</h3>
            <p style={{ margin: 0, fontSize: 12.5, lineHeight: 1.7, color: "var(--ink-soft)" }}>{c.d}</p>
          </div>
        )}
      </div>
      <div style={{
        marginTop: 18, padding: "20px 22px", borderRadius: "var(--r-md)",
        background: "#ffffff", textAlign: "center",
        boxShadow: "0 10px 30px rgba(0,0,0,0.25)", border: "1px solid rgba(255,255,255,0.5)"
      }}>
        <div className="mincho" style={{ lineHeight: 1.8, letterSpacing: "0.04em", color: "var(--ink-soft)", fontSize: "14px" }}>
          亡くなられた方が残された物を、ご家族に代わって整理し、<br />
          その先の暮らしまで支える。<br />
          <strong style={{ fontSize: "22px", color: "var(--primary-deep)" }}>それが、私たちの遺品整理です。</strong>
        </div>
      </div>
    </section>);

}

function Reasons() {
  const reasons = [
  { n: "01", t: "長崎県内、「今すぐ来てほしい」に応える", d: "「今すぐどうしたら…」という突然のご相談に、スピード対応。長崎県内なら<span class=\"em\">最短30分〜1時間で現地</span>に伺います。" },
  { n: "02", t: "いきなり処分しません", d: "<span class=\"em\">残す物・探す物の確認を何より大切に。</span>通帳・写真・現金など、ご家族に必要なものを一緒に確認してから進めます。" },
  { n: "03", t: "遺品整理その先まで、１つの窓口で", d: "運ぶ・届ける・設置・配置換えまで。母体が引越会社だからこそ、<span class=\"em\">その後のお困りごとも一つの窓口で</span>解決できます。" },
  { n: "04", t: "お見積り後の追加請求はありません", d: "再利用できるお品は活かし、できる限りご負担を抑えます。<span class=\"em\">お見積り後の追加請求は一切ありません。</span>" }];

  return (
    <section className="sec" id="reasons" data-screen-label="選ばれる理由">
      <Eyebrow no="04">REASON</Eyebrow>
      <h2 className="h2 mincho">ご家族から選ばれ続ける<br /><span className="hl">4つ</span>の理由</h2>
      <p className="lead">長崎のご遺族様から選んでいただいている理由です。</p>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {reasons.map((r, i) =>
        <div key={i} className="card" style={{ padding: "22px 22px", display: "flex", gap: 18 }}>
            <div className="num" style={{
            fontSize: 34, fontWeight: 700, color: "var(--accent)", lineHeight: 1, flexShrink: 0
          }}>{r.n}</div>
            <div>
              <h3 className="mincho" style={{ margin: "2px 0 6px", color: "var(--ink)", letterSpacing: "0.03em", fontWeight: "900", fontSize: "20px" }}>{r.t}</h3>
              <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.9, color: "var(--ink-soft)" }} dangerouslySetInnerHTML={{ __html: r.d }} />
            </div>
          </div>
        )}
      </div>
    </section>);

}

function Services() {
  const services = [
  { n: "1", t: "遺品整理・生前整理", img: asset("svcIhin", "assets/c/svc-ihin.jpg"), d: "形見分け・仕分け・搬出・清掃まで対応。貴重品や思い出の品は、ご確認しながら丁寧に仕分けます。" },
  { n: "2", t: "特殊清掃・空き家整理", img: asset("svcTokushu", "assets/c/svc-tokushu.jpg"), d: "孤独死現場や空き家整理にも対応。消臭・除菌・原状回復まで、近隣に配慮して作業します。" },
  { n: "3", t: "ご供養・お焚き上げ", img: asset("svcKuyo", "assets/c/svc-kuyo.jpg"), d: "仏壇・人形・写真など、提携寺院にて合同供養のうえお焚き上げまで執り行います。" },
  { n: "4", t: "形見配送・家具移設・引越し", img: asset("svcHakobi", "assets/c/svc-hakobi.jpg"), d: "ご親族宅への配送や家具移設、お引越しまで対応。引越会社ならではの対応力です。" },
  { n: "5", t: "空き家整理・残置物撤去", img: asset("svcAkiya", "assets/c/svc-akiya.jpg"), d: "不動産売却前や退去前の片付けにも対応。残置物の撤去・不用品回収までまとめて。" }];

  return (
    <section className="sec sec-tinted" id="service" data-screen-label="サービス">
      <Eyebrow no="05">SERVICE</Eyebrow>
      <h2 className="h2 mincho">遺品整理だけではない、<br />中村トランスポートの対応内容</h2>
      <p className="lead">「整理」だけではない、ご遺族の心に寄り添う<br />総合的なサポートをご提供します。</p>
      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        {services.map((s, i) =>
        <div key={i} className="card" style={{ overflow: "hidden" }}>
            {s.img &&
            <div style={{ aspectRatio: "16/9", overflow: "hidden" }}>
              <img src={s.img} alt={s.t + "の作業風景"} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} loading="lazy" />
            </div>}
            <div style={{ padding: "18px 20px" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 7 }}>
                <span className="num" style={{
                width: 26, height: 26, borderRadius: "50%", background: "var(--primary-soft)", color: "var(--primary-deep)",
                display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 13, fontWeight: 700
              }}>{s.n}</span>
                <h3 className="mincho" style={{ margin: 0, letterSpacing: "0.04em", fontSize: "22px", fontWeight: "900" }}>{s.t}</h3>
              </div>
              <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.9, color: "var(--ink-soft)" }}>{s.d}</p>
            </div>
          </div>
        )}
      </div>
    </section>);

}

function Plan() {
  const items = [
  { n: "1", t: "仕分け・搬出作業" }, { n: "2", t: "貴重品・思い出品の捜索" },
  { n: "3", t: "残す物・探す物の確認" }, { n: "4", t: "室内簡易清掃" },
  { n: "5", t: "ご供養のご相談" }, { n: "6", t: "再利用品の確認" },
  { n: "7", t: "形見配送のご相談" }, { n: "8", t: "一時保管のご相談" }];

  return (
    <section className="sec sec-green" id="plan" data-screen-label="含まれる内容">
      <Eyebrow no="06">PLAN</Eyebrow>
      <h2 className="h2 mincho">基本料金に含まれる<br /><span className="hl">安心サポート</span></h2>
      <p className="lead">仕分けから処分まで、遺品整理に関わるすべての作業を<br />ワンストップで承ります。</p>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        {items.map((it, i) =>
        <div key={i} className="card" style={{ display: "flex", alignItems: "center", gap: 12, padding: "14px 16px" }}>
            <span className="num" style={{
            width: 30, height: 30, borderRadius: "50%", flexShrink: 0,
            background: "linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%)", color: "#fff",
            display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 14, fontWeight: 700
          }}>{it.n}</span>
            <span className="mincho" style={{ fontSize: 14, fontWeight: 500, lineHeight: 1.4 }}>{it.t}</span>
          </div>
        )}
      </div>
    </section>);

}

function Pricing() {
  const rows = [
  { size: "1R・1K", time: "約1〜3時間", price: "39,000" },
  { size: "1DK・1LDK", time: "約2〜4時間", price: "69,000" },
  { size: "2DK・2LDK", time: "約3〜6時間", price: "119,000" },
  { size: "3DK・3LDK", time: "約5〜8時間", price: "179,000" },
  { size: "4LDK以上", time: "約1〜2日", price: "239,000" }];

  return (
    <section className="sec sec-warm" id="price" data-screen-label="料金の目安">
      <Eyebrow no="07">PRICE</Eyebrow>
      <h2 className="h2 mincho">料金の目安</h2>
      <p className="lead">間取り別の基本料金です。お部屋の状況により変動いたします。</p>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {rows.map((r, i) =>
        <div key={i} className="card" style={{ display: "flex", alignItems: "center", gap: 14, padding: "16px 20px" }}>
            <div style={{ flex: 1 }}>
              <div className="mincho" style={{ fontSize: 18, fontWeight: 600, letterSpacing: "0.03em" }}>{r.size}</div>
              <div style={{ fontSize: 11, color: "var(--ink-mute)" }}>目安 {r.time}</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <span className="num" style={{ fontSize: 25, fontWeight: 700, color: "var(--primary-deep)" }}>{r.price}</span>
              <span style={{ fontSize: 13, color: "var(--ink-soft)", marginLeft: 2 }}>円〜</span>
            </div>
          </div>
        )}
      </div>
      <div style={{ marginTop: 16, padding: "14px 18px", background: "var(--surface)", border: "1px dashed var(--line)", borderRadius: "var(--r-md)", fontSize: 12.5, color: "var(--ink-soft)", lineHeight: 1.9 }}>
        ※ 料金には出張費・作業費・処分費が含まれます。<br />
        ※ 同じ間取りでも、<strong style={{ color: "var(--ink)" }}>荷物量・立地条件・階段作業・駐車状況</strong>などにより金額は大きく変動します。<br />
        ※ まずは無料の現地確認・LINEで、正確なお見積りをお出しします。
      </div>

      <div style={{ marginTop: 30, marginBottom: 14, textAlign: "center" }}>
        <div className="num" style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--accent-deep)", fontWeight: 700, marginBottom: 4 }}>CASE STUDY</div>
        <div className="mincho" style={{ fontSize: 19, fontWeight: 600, color: "var(--ink)" }}>中村トランスポートの実際の作業例</div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {[
        { area: "大村市", title: "遺品整理 4DK 戸建", staff: "作業員4名", time: "5時間30分", price: "198,000", note: "ご依頼から3日後に作業実施" },
        { area: "長崎市", title: "遺品整理 2LDK", staff: "作業員3名", time: "4時間", price: "132,000", note: "県外在住のご家族から鍵預かり対応" },
        { area: "諫早市", title: "遺品整理＋形見配送 3DK", staff: "作業員4名", time: "6時間", price: "187,000", note: "家具をご親族宅へ配送" }].
        map((c, i) =>
        <div key={i} className="card" style={{ padding: "16px 18px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8, flexWrap: "wrap" }}>
              <span className="mincho" style={{ fontSize: 11, fontWeight: 700, color: "#fff", background: "var(--primary)", padding: "3px 11px", borderRadius: 999, letterSpacing: "0.05em" }}>{c.area}</span>
              <span className="mincho" style={{ fontSize: 15, fontWeight: 600, color: "var(--ink)" }}>{c.title}</span>
            </div>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 10, flexWrap: "wrap" }}>
              <div style={{ fontSize: 12, color: "var(--ink-mute)" }}>{c.staff}／作業時間 {c.time}</div>
              <div><span className="num" style={{ fontSize: 22, fontWeight: 700, color: "var(--accent-deep)" }}>{c.price}</span><span style={{ fontSize: 12, color: "var(--ink-soft)", marginLeft: 2 }}>円（税込）</span></div>
            </div>
            <div style={{ marginTop: 8, paddingTop: 8, borderTop: "1px solid var(--line-soft)", fontSize: 12.5, color: "var(--ink-soft)", display: "flex", alignItems: "center", gap: 6 }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}><polyline points="20 6 9 17 4 12" /></svg>
              {c.note}
            </div>
          </div>
        )}
      </div>
    </section>);

}

function Flow() {
  const steps = [
  { n: "01", t: "お問い合わせ", d: "お電話・LINE・フォームよりお気軽にご相談ください。" },
  { n: "02", t: "現地確認・お見積り", d: "最短30分〜1時間で現地へ。LINEのお写真でも概算見積り可能です。" },
  { n: "03", t: "残す物・探す物の確認", d: "通帳・現金・権利書・写真など、残したい物や探したい物を一緒に確認します。", key: true },
  { n: "04", t: "ご供養・作業開始", d: "必要に応じて合掌・ご供養を行い、ご家族のお気持ちに配慮しながら作業を進めます。" },
  { n: "05", t: "仕分け・搬出・簡易清掃", d: "遺品の仕分けから搬出、作業後の簡易清掃まで対応します。" },
  { n: "06", t: "写真報告・配送・家具移設", d: "遠方のご家族には写真でご報告。形見配送や家具移設にも対応します。" },
  { n: "07", t: "完了確認・お支払い", d: "作業完了後、お部屋をご確認いただき、ご納得いただいてから完了となります。" }];

  return (
    <section className="sec" id="flow" data-screen-label="ご依頼の流れ">
      <Eyebrow no="08">FLOW</Eyebrow>
      <h2 className="h2 mincho">ご依頼の流れ</h2>
      <p className="lead">処分だけではない、中村トランスポートの流れ。<br />「探す・整理・お届け」まで、ひとつひとつ丁寧に。</p>
      <div style={{ position: "relative" }}>
        {steps.map((s, i) =>
        <div key={i} style={{ display: "flex", gap: 16, paddingBottom: i === steps.length - 1 ? 0 : 16 }}>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 }}>
              <div className="num" style={{
              width: 42, height: 42, borderRadius: "50%",
              background: s.key ? "var(--accent)" : "var(--surface)",
              border: s.key ? "2px solid var(--accent)" : "2px solid var(--primary)",
              color: s.key ? "#fff" : "var(--primary-deep)",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontSize: 15, fontWeight: 700, zIndex: 2
            }}>{s.n}</div>
              {i < steps.length - 1 && <div style={{ width: 2, flex: 1, background: "var(--line)", marginTop: 4 }} />}
            </div>
            <div style={{ paddingTop: 8, paddingBottom: 4 }}>
              <h3 className="mincho" style={{ margin: "0 0 4px", fontSize: 16.5, fontWeight: 600, letterSpacing: "0.03em", display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                {s.t}
                {s.key && <span style={{ fontSize: 10, fontWeight: 700, color: "#fff", background: "var(--accent-deep)", padding: "2px 8px", borderRadius: 999, letterSpacing: "0.08em" }}>重要</span>}
              </h3>
              <p style={{ margin: 0, fontSize: 12.5, lineHeight: 1.8, color: "var(--ink-soft)" }}>{s.d}</p>
            </div>
          </div>
        )}
      </div>
    </section>);

}

function Works() {
  const items = [
  { area: "長崎市・アパート", layout: "1DK", desc: "お母様のお部屋の遺品整理。形見分けから搬出・清掃まで、1日で対応いたしました。", before: asset("work1b", "assets/c/work1-before.jpg"), after: asset("work1a", "assets/c/work1-after.jpg") },
  { area: "大村市・アパート", layout: "3DK", desc: "ご実家の遺品整理。大量の書籍や家財を仕分けし、搬出・清掃まで対応いたしました。", before: asset("work2b", "assets/c/work2-before.jpg"), after: asset("work2a", "assets/c/work2-after.jpg") },
  { area: "諫早市・アパート", layout: "2DK", desc: "お一人暮らしのお部屋を遺品整理。衣類や生活用品の仕分けから搬出・簡易清掃まで対応いたしました。", before: asset("work3b", "assets/c/work3-before.jpg"), after: asset("work3a", "assets/c/work3-after.jpg") }];

  return (
    <section className="sec sec-tinted" id="works" data-screen-label="作業実績">
      <Eyebrow no="09">WORKS</Eyebrow>
      <h2 className="h2 mincho">作業実績</h2>
      <p className="lead">長崎エリアで承ったお仕事の一部です。</p>
      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        {items.map((it, i) =>
        <div key={i} className="card" style={{ overflow: "hidden" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2 }}>
              {[["BEFORE", it.before], ["AFTER", it.after]].map(([lbl, src], j) =>
            <div key={j} style={{ position: "relative", aspectRatio: "4/3", overflow: "hidden" }}>
                  <img src={src} alt={it.area + " " + lbl} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} loading="lazy" />
                  <div style={{
                position: "absolute", top: 8, left: 8, fontSize: 10, fontWeight: 700, letterSpacing: "0.1em",
                padding: "3px 9px", borderRadius: 999, color: "#fff",
                background: j === 0 ? "rgba(50,46,41,0.82)" : "var(--primary)"
              }}>{lbl}</div>
                </div>
            )}
            </div>
            <div style={{ padding: "16px 18px" }}>
              <div style={{ display: "flex", gap: 8, marginBottom: 8 }}>
                <span style={{ fontSize: 11, padding: "3px 11px", background: "var(--surface-3)", borderRadius: 999, color: "var(--ink-soft)" }}>{it.area}</span>
                <span className="num" style={{ fontSize: 11, padding: "3px 11px", background: "var(--primary)", color: "#fff", borderRadius: 999, fontWeight: 600 }}>{it.layout}</span>
              </div>
              <p style={{ margin: 0, fontSize: 13, lineHeight: 1.8, color: "var(--ink-soft)" }}>{it.desc}</p>
            </div>
          </div>
        )}
      </div>
    </section>);

}

function Voices() {
  const voices = [
  {
    who: "長崎エリア・女性", sub: "兄の遺品整理", img: asset("voice1", "assets/c/voice1.jpg"),
    situation: "お兄様を亡くされ、妹様からのご依頼。葬儀を終えて親族の皆さまが集まられ、みんなで協力して整理されました。",
    body: "迅速かつ丁寧で、スタッフの方も優しくしていただき、ありがとうございました。とても助かりました。"
  },
  {
    who: "長崎エリア・男性", sub: "父の遺品整理", img: asset("voice2", "assets/c/voice2.jpg"),
    situation: "ご実家のお父様が亡くなられ、近くにお住まいの息子様より。「家賃を払い続けるより」と、ホームページから急遽のご依頼でした。",
    body: "兄とも相談して、すぐに片付けてくれる会社がないかネットで探して見つけ、依頼しました。4時間30分ほどかかりましたが、丁寧に対応してくださいました。ありがとうございました。"
  },
  {
    who: "長崎市・60代 男性", sub: "妻の遺品整理", img: asset("voice3", "assets/c/voice3.jpg"),
    situation: "奥様を亡くされ、脚もご不自由なまま数年お過ごしに。「先のことを考えると」と整理を決意されてのご依頼でした。",
    body: "妻に先立たれてから、部屋を見るたびに思い出がよみがえり、脚も不自由でなかなか片付けることができませんでした。ホームページを見て中村トランスポートさんへ連絡したところ、急な依頼にも関わらずすぐに対応してくださり、本当に助かりました。一つひとつ丁寧に確認しながら進めてくださり、安心してお任せできました。長年手を付けられなかった部屋がきれいになり、気持ちにも一区切りつけることができたように思います。このたびは本当にありがとうございました。"
  }];

  return (
    <section className="sec sec-green" id="voice" data-screen-label="お客様の声">
      <Eyebrow no="10">VOICE</Eyebrow>
      <h2 className="h2 mincho">お客様の声</h2>
      <p className="lead">ご遺族の皆さまからいただいたお言葉です。</p>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {voices.map((v, i) =>
        <div key={i} className="card" style={{ padding: 20 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
              <img src={v.img} alt={v.sub} style={{
              width: 52, height: 52, borderRadius: "50%", flexShrink: 0,
              objectFit: "cover", display: "block"
            }} loading="lazy" />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 700 }}>{v.who}</div>
                <div style={{ fontSize: 11, color: "var(--ink-mute)" }}>{v.sub}</div>
              </div>
              <div style={{ color: "var(--gold)", fontSize: 13 }}>★★★★★</div>
            </div>
            <div style={{
            fontSize: 12, lineHeight: 1.8, color: "var(--ink-soft)",
            background: "var(--surface-2)", borderRadius: 8, padding: "10px 12px", marginBottom: 12
          }}>{v.situation}</div>
            <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.95, color: "var(--ink)" }}>{v.body}</p>
          </div>
        )}
      </div>
    </section>);

}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const faqs = [
  { q: "どのくらいの早さで来てもらえますか？", a: "長崎県内なら、最短30分〜1時間程度で現地確認に伺えます。「今から来れますか？」という突然のご相談にも、できる限りお応えします。" },
  { q: "処分だけでなく、運んだり設置も頼めますか？", a: "はい。引越会社が母体のため、形見の家具・家電のご親族への配送、洗濯機の接続、家具の配置換えまで対応できます。" },
  { q: "見積り後に断っても大丈夫ですか？", a: "もちろんです。お見積り・ご相談は完全無料です。しつこい営業などは一切いたしません。" },
  { q: "立会いができなくても依頼できますか？", a: "可能です。遠方のご遺族様からも多くご依頼いただいております。鍵を送っていただければ、作業後に写真でご報告します。" },
  { q: "仏壇や神棚はどうしたらよいですか？", a: "提携寺院にて合同供養・お焚き上げをご手配します。閉眼供養もご相談のうえ対応可能です。" },
  { q: "対応エリアを教えてください。", a: "長崎市・大村市・諫早市・時津町・長与町・雲仙市・東彼杵郡など県内全域に対応。離島も承ります。" },
  { q: "遺品整理以外のことも相談できますか？", a: "可能です。無料見積、空き家整理、残置物撤去、不用品回収、引越しなど、その後のお困りごともまとめてご相談いただけます。" }];

  return (
    <section className="sec" id="faq" data-screen-label="よくある質問">
      <Eyebrow no="11">FAQ</Eyebrow>
      <h2 className="h2 mincho">よくあるご質問</h2>
      <p className="lead">ご依頼前によくいただくお問い合わせです。</p>
      <div className="card" style={{ overflow: "hidden" }}>
        {faqs.map((f, i) => {
          const isOpen = open === i;
          return (
            <div key={i} style={{ borderTop: i === 0 ? "none" : "1px solid var(--line-soft)" }}>
              <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                width: "100%", background: "none", border: "none", padding: "18px 20px", textAlign: "left", cursor: "pointer",
                display: "flex", alignItems: "flex-start", gap: 12, fontFamily: "inherit", color: "var(--ink)"
              }}>
                <span className="mincho" style={{ color: "var(--primary-deep)", fontSize: 18, fontWeight: 600, flexShrink: 0 }}>Q</span>
                <span style={{ flex: 1, fontSize: 14.5, lineHeight: 1.6, fontWeight: 600, paddingRight: 8 }}>{f.q}</span>
                <span style={{
                  flexShrink: 0, width: 22, height: 22, borderRadius: "50%", background: "var(--primary-soft)",
                  display: "flex", alignItems: "center", justifyContent: "center", marginTop: 2,
                  transition: "transform 0.25s", transform: isOpen ? "rotate(45deg)" : "none"
                }}>
                  <span style={{ position: "relative", width: 10, height: 10 }}>
                    <span style={{ position: "absolute", top: "50%", left: 0, right: 0, height: 1.5, background: "var(--primary-deep)", transform: "translateY(-50%)" }} />
                    <span style={{ position: "absolute", left: "50%", top: 0, bottom: 0, width: 1.5, background: "var(--primary-deep)", transform: "translateX(-50%)" }} />
                  </span>
                </span>
              </button>
              <div style={{ maxHeight: isOpen ? 300 : 0, overflow: "hidden", transition: "max-height 0.3s ease" }}>
                <div style={{ display: "flex", gap: 12, padding: "0 20px 20px" }}>
                  <span className="mincho" style={{ color: "var(--accent-deep)", fontSize: 18, fontWeight: 600, flexShrink: 0 }}>A</span>
                  <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.95, color: "var(--ink-soft)" }}>{f.a}</p>
                </div>
              </div>
            </div>);

        })}
      </div>
    </section>);

}

function AwardSeals() {
  return (
    <div className="award-block">
      <p className="award-intro">ご利用いただいたお客様から、高い評価をいただいています。</p>
      <div className="award-row">
        <div className="award-ph-wide" style={{ borderRadius: 14, overflow: "hidden" }}>
          <img src={asset("award", "assets/c/award.jpg")} alt="各種認定・受賞・加盟団体" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", background: "#fff" }} loading="lazy" />
        </div>
      </div>
    </div>);

}

// 圧倒的な実績バンド（カウントアップ付き）
function Results() {
  const stats = [
  { label: "累計現場対応", target: 10000, suffix: "件以上", decimals: 0, comma: true },
  { label: "お客様の声", target: 2500, suffix: "件超", decimals: 0, comma: true },
  { label: "Google口コミ", target: 4.7, suffix: "", decimals: 1, comma: false, star: true, note: "250件以上の高評価" }];

  const [vals, setVals] = React.useState(stats.map(() => 0));
  const ref = React.useRef(null);
  const done = React.useRef(false);

  React.useEffect(() => {
    const animate = () => {
      if (done.current) return;
      done.current = true;
      const t0 = Date.now();
      const dur = 1400;
      const id = setInterval(() => {
        const p = Math.min(1, (Date.now() - t0) / dur);
        const ease = 1 - Math.pow(1 - p, 3);
        setVals(stats.map((s) => s.target * ease));
        if (p >= 1) {clearInterval(id);setVals(stats.map((s) => s.target));}
      }, 30);
    };
    const check = () => {
      const el = ref.current;
      if (!el || done.current) return;
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight * 0.88 && r.bottom > 0) animate();
    };
    check();
    window.addEventListener("scroll", check, { passive: true });
    window.addEventListener("resize", check);
    const fallback = setTimeout(() => {if (!done.current) animate();}, 4000);
    return () => {
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
      clearTimeout(fallback);
    };
  }, []);

  const fmt = (v, s) => {
    const n = s.decimals ? v.toFixed(s.decimals) : Math.round(v).toString();
    return s.comma ? Number(n).toLocaleString("en-US") : n;
  };

  return (
    <section className="sec results-band" id="results" data-screen-label="実績" ref={ref}>
      <div className="results-eyebrow"><span className="num">TRACK RECORD</span></div>
      <h2 className="results-head mincho">
        ご依頼の数よりも、<br /><span className="hl">「頼んで良かった」</span>の声を大切に。
      </h2>
      <AwardSeals />
      <div className="results-grid">
        {stats.map((s, i) =>
        <div className="results-item" key={i}>
            <div className="results-label">{s.label}</div>
            <div className="results-value">
              <span className="results-numline">
                {s.star && <span className="results-star">★</span>}
                <span className="num results-num">{fmt(vals[i], s)}</span>
              </span>
              {s.suffix && <span className="results-suffix">{s.suffix}</span>}
            </div>
            {s.note && <div className="results-note">{s.note}</div>}
          </div>
        )}
      </div>
    </section>);

}

Object.assign(window, { SECTIONS, Eyebrow, Hero, Results, Worries, Capability, Reasons, Services, Plan, Pricing, Flow, Works, Voices, FAQ, TEL, TEL_HREF, LINE_HREF });