/* v4 シェル：左パネル / 右ナビ（スクロールスパイ）/ 中央 / モバイルCTA */

// ===== フォーム送信設定（ここを変更すれば差し替え可能）=====
const FORM_TO = "nakamura@nts-kyushu.co.jp"; // 申込みメールの主たる届け先
const FORM_CC = "satsuki@nts-kyushu.co.jp,haruhisa.nts@icloud.com,otoiawase@ritou-hikkoshi.com,info@nts-kyushu.co.jp,keiri@nts-kyushu.co.jp,yamaguchitakuya0112@gmail.com"; // 同報先
const FORM_ACTION = "https://formsubmit.co/" + FORM_TO; // FormSubmit エンドポイント
const THANKS_URL = "https://ritou-hikkoshi.com/thanks/"; // 送信後の遷移先
const AUTO_REPLY =
"この度は中村トランスポートへお問い合わせをいただき、誠にありがとうございます。\n\n" +
"お送りいただいた内容を確認のうえ、担当者より24時間以内にご連絡を差し上げます。\n" +
"お急ぎの場合は、お電話（0957-53-5656／年中無休・24時間受付）でも承っております。\n\n" +
"※本メールは自動送信です。ご不明な点はお電話にてお問い合わせください。\n\n" +
"中村トランスポート株式会社\n遺品整理・特殊清掃・生前整理";

function ContactForm() {
  const [s, setS] = React.useState({ name: "", email: "", phone: "", address: "", layout: "", message: "" });
  const [errors, setErrors] = React.useState({});
  const up = (k) => (e) => {setS((p) => ({ ...p, [k]: e.target.value }));if (errors[k]) setErrors((er) => ({ ...er, [k]: null }));};
  const submit = (e) => {
    const er = {};
    if (!s.name.trim()) er.name = "お名前をご入力ください";
    if (!s.phone.trim()) er.phone = "お電話番号をご入力ください";else
    if (!/^[\d\-+() ]{7,}$/.test(s.phone.trim())) er.phone = "正しい電話番号をご入力ください";
    if (s.email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s.email.trim())) er.email = "正しいメールアドレスをご入力ください";
    if (Object.keys(er).length > 0) {
      e.preventDefault(); // エラーがあれば送信中止
      setErrors(er);
      return;
    }
    // 問題なければそのまま FormSubmit へ送信 → サンクスページへ遷移
  };
  const inp = (name) => ({
    width: "100%", padding: "14px 14px", fontSize: 16, borderRadius: "var(--r-sm)",
    border: `1.5px solid ${errors[name] ? "var(--coral)" : "var(--line)"}`,
    background: "var(--surface-2)", fontFamily: "inherit", color: "var(--ink)", minHeight: 52
  });
  const fieldWrap = { marginBottom: 16 };
  const labelStyle = { display: "flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 700, marginBottom: 7 };
  const reqBadge = { background: "var(--coral)", color: "#fff", fontSize: 10, padding: "2px 7px", borderRadius: 4 };
  const optBadge = { background: "var(--surface-3)", color: "var(--ink-mute)", fontSize: 10, padding: "2px 7px", borderRadius: 4 };
  const errStyle = { fontSize: 12, color: "var(--coral)", marginTop: 4 };

  return (
    <section className="sec" id="contact" data-screen-label="お問い合わせ" style={{ background: "var(--surface-2)" }}>
      <Eyebrow no="12">CONTACT</Eyebrow>
      <h2 className="h2 mincho">無料相談・無料お見積り</h2>
      <p className="lead">「金額だけ知りたい」でも大丈夫。<br />お電話・LINE・フォームのご希望の方法で、お気軽に。</p>

      {/* 3つの導線 */}
      <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 24 }}>
        <div style={{ textAlign: "center", fontSize: 12, fontWeight: 700, color: "var(--accent-deep)", letterSpacing: "0.1em", marginBottom: 2 }}>【お急ぎの方はこちら】</div>
        <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-form" 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>

      <div className="card" style={{ padding: "20px 18px", marginBottom: 22, textAlign: "center", background: "var(--primary-tint)", borderColor: "var(--primary-soft)" }}>
        <div style={{ fontSize: 11, color: "var(--primary-deep)", letterSpacing: "0.15em", marginBottom: 6, fontWeight: 700 }}>お電話でのご相談</div>
        <a href={TEL_HREF} className="num" style={{ display: "block", fontSize: 30, fontWeight: 700, color: "var(--ink)", textDecoration: "none" }}>{TEL}</a>
        <div style={{ fontSize: 11, color: "var(--ink-mute)", marginTop: 2 }}>年中無休・24時間受付</div>
        <div style={{ display: "flex", justifyContent: "center", gap: 8, marginTop: 12, flexWrap: "wrap" }}>
          <span className="contact-badge">最短30分〜1時間対応</span>
          <span className="contact-badge">立会不要・写真報告対応</span>
        </div>
      </div>

      <form id="contact-form" action={FORM_ACTION} method="POST" onSubmit={submit}>
        {/* FormSubmit 設定 */}
        <input type="hidden" name="_next" value={THANKS_URL} />
        <input type="hidden" name="_subject" value="【LP】無料お見積り・お問い合わせ" />
        <input type="hidden" name="_template" value="table" />
        <input type="hidden" name="_cc" value={FORM_CC} />
        <input type="hidden" name="_captcha" value="false" />
        <input type="hidden" name="_autoresponse" value={AUTO_REPLY} />
        <input type="text" name="_honey" style={{ display: "none" }} tabIndex="-1" autoComplete="off" />

        <div style={fieldWrap}>
          <label style={labelStyle}>お名前<span style={reqBadge}>必須</span></label>
          <input type="text" name="お名前" value={s.name} onChange={up("name")} placeholder="例）山田 花子" style={inp("name")} autoComplete="name" />
          {errors.name && <div style={errStyle}>{errors.name}</div>}
        </div>
        <div style={fieldWrap}>
          <label style={labelStyle}>お電話番号<span style={reqBadge}>必須</span></label>
          <input type="tel" name="お電話番号" value={s.phone} onChange={up("phone")} placeholder="例）090-1234-5678" style={inp("phone")} inputMode="tel" />
          {errors.phone && <div style={errStyle}>{errors.phone}</div>}
        </div>
        <div style={fieldWrap}>
          <label style={labelStyle}>メールアドレス<span style={optBadge}>任意</span></label>
          <input type="email" name="email" value={s.email} onChange={up("email")} placeholder="例）yamada@example.com" style={inp("email")} autoComplete="email" inputMode="email" />
          {errors.email && <div style={errStyle}>{errors.email}</div>}
        </div>
        <div style={fieldWrap}>
          <label style={labelStyle}>ご住所（ご訪問のエリア）<span style={optBadge}>任意</span></label>
          <input type="text" name="ご住所" value={s.address} onChange={up("address")} placeholder="例）長崎県諫早市○○町" style={inp("address")} />
          {errors.address && <div style={errStyle}>{errors.address}</div>}
        </div>
        <div style={fieldWrap}>
          <label style={labelStyle}>間取り<span style={optBadge}>任意</span></label>
          <select name="間取り" value={s.layout} onChange={up("layout")} style={inp("layout")}>
            <option value="">お選びください</option>
            <option>1R・1K</option><option>1DK・1LDK</option><option>2DK・2LDK</option><option>3DK・3LDK</option><option>4LDK以上</option><option>わからない</option>
          </select>
        </div>
        <div style={fieldWrap}>
          <label style={labelStyle}>ご相談内容<span style={optBadge}>任意</span></label>
          <textarea name="ご相談内容" value={s.message} onChange={up("message")} rows={4} placeholder="お部屋の状況、ご希望の作業日、ご不安な点など、ご自由にご記入ください。" style={{ ...inp("message"), minHeight: 110, resize: "vertical", lineHeight: 1.7 }} />
        </div>

        <div style={{ background: "var(--surface-3)", borderRadius: "var(--r-md)", padding: "14px 16px", marginBottom: 16 }}>
          <div style={{ fontSize: 11.5, fontWeight: 700, color: "var(--ink-soft)", marginBottom: 8, letterSpacing: "0.04em" }}>こんなご相談、お寄せいただいています：</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            {["「今から来れますか？」", "通帳や権利書を探してほしい", "まずは金額だけ知りたい", "空き家の片付け", "形見を親族宅へ届けて"].map((t, i) =>
            <span key={i} style={{ fontSize: 11.5, background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 999, padding: "5px 11px", color: "var(--ink-soft)" }}>{t}</span>
            )}
          </div>
        </div>

        <button type="submit" className="btn btn-accent btn-lg btn-block">この内容で送信する</button>
        <p style={{ fontSize: 11.5, color: "var(--ink-mute)", lineHeight: 1.7, marginTop: 14, textAlign: "center" }}>
          ※ ご入力いただいた個人情報は、お問い合わせ対応以外には使用いたしません。<br />
          ※ メールアドレスをご入力の方には、受付完了の自動返信メールをお送りします。
        </p>
      </form>
    </section>);

}

function Footer() {
  return (
    <footer style={{ background: "var(--ink)", color: "var(--bg)", padding: "36px 36px 32px", textAlign: "center" }}>
      <div className="mincho" style={{ fontSize: 18, letterSpacing: "0.08em", marginBottom: 18, fontWeight: 600 }}>中村トランスポート株式会社</div>
      <div style={{ fontSize: 12, opacity: 0.8, lineHeight: 1.9, marginBottom: 20 }}>
        対応サービス：遺品整理・生前整理・特殊清掃<br />空き家整理・残置物撤去・形見配送・引越し
      </div>
      <div style={{ fontSize: 12, opacity: 0.8, lineHeight: 1.9, marginBottom: 20 }}>
        対応エリア：長崎市・大村市・諫早市・時津町<br />佐世保・長与町・雲仙市・東彼杵郡・離島
      </div>
      <div style={{ fontSize: 10, opacity: 0.45 }}>© 中村トランスポート株式会社</div>
    </footer>);

}

// 左サイドパネル
function SideLeft() {
  return (
    <aside className="side-left">
      <div className="brand-block">
        <div className="brand-logo" style={{ flexDirection: "column", alignItems: "center", gap: 12, width: "100%" }}>
          <img src={window.__resources && window.__resources.logoNts || "assets/logo-nts.webp"} alt="中村トランスポート株式会社" style={{ height: 32, width: "auto", display: "block", margin: "0 auto" }} />
          <div className="brand-text">
            <div className="sub" style={{ fontSize: 11, color: "var(--ink-soft)", letterSpacing: "0.04em", marginBottom: 1 }}>中村トランスポート株式会社</div>
            <div className="name">遺品整理の窓口</div>
          </div>
        </div>
        <div className="brand-tagline">
          大切な方の「想い」に、<br />やさしく寄り添う整理を。
        </div>
      </div>

      <div className="side-card">
        <div className="label">お電話でのご相談</div>
        <a href={TEL_HREF} className="side-tel num">{TEL}</a>
        <div className="side-tel-note">年中無休・24時間受付</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 12 }}>
          <span className="contact-badge" style={{ textAlign: "center" }}>最短30分〜1時間対応</span>
          <span className="contact-badge" style={{ textAlign: "center" }}>立会不要・写真報告対応</span>
        </div>
      </div>

      <div className="side-actions">
        <a href="#contact" className="btn btn-accent btn-lg btn-block">無料お見積りを予約</a>
        <a href={LINE_HREF} className="btn btn-line btn-md btn-block">LINEで写真を送って相談</a>
      </div>

      <div className="side-trust">
        <div className="chip"><span className="n">12<span style={{ fontSize: 11 }}>年</span></span><span className="t">の実績</span></div>
        <div className="chip"><span className="n">0<span style={{ fontSize: 11 }}>円</span></span><span className="t">出張見積</span></div>
        <div className="chip"><span className="n">24<span style={{ fontSize: 11 }}>h</span></span><span className="t">受付</span></div>
      </div>
    </aside>);

}

// 右サイドメニュー（スクロールスパイ）
function SideRight({ active }) {
  return (
    <nav className="side-right">
      <div className="nav-title">CONTENTS</div>
      <ul className="nav-list">
        {SECTIONS.map((sec) =>
        <li key={sec.id} className={"nav-item" + (active === sec.id ? " active" : "")}>
            <a href={"#" + sec.id}>
              <span className="nav-num num">{sec.no}</span>
              <span>{sec.nav}</span>
            </a>
          </li>
        )}
      </ul>
    </nav>);

}

// モバイル下部固定CTA
function MobileCTA() {
  return (
    <div className="mobile-cta">
      <a href={LINE_HREF} className="m-call m-line">
        <span className="l">写真で相談</span>
        <span className="n">LINE</span>
      </a>
      <a href={TEL_HREF} className="m-call">
        <span className="l">24時間受付</span>
        <span className="n">電話する</span>
      </a>
      <a href="#contact" className="btn btn-accent" style={{ padding: "14px 6px", fontSize: 14 }}>無料見積り</a>
    </div>);

}

// モバイルヘッダー
function MobileHeader() {
  return (
    <header className="m-header">
      <div className="brand-logo">
        <img src={window.__resources && window.__resources.logoNts || "assets/logo-nts.webp"} alt="中村トランスポート株式会社" style={{ height: 24, width: "auto", display: "block" }} />
        <div className="brand-text">
          <div className="name" style={{ fontSize: 14 }}>遺品整理の窓口</div>
        </div>
      </div>
      <a href={TEL_HREF} className="m-tel">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><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>
        電話
      </a>
    </header>);

}

function App() {
  const [active, setActive] = React.useState("hero");

  React.useEffect(() => {
    const ids = SECTIONS.map((s) => s.id);
    const onScroll = () => {
      const mid = window.innerHeight * 0.35;
      let current = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top <= mid) current = id;
      }
      setActive(current);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {window.removeEventListener("scroll", onScroll);window.removeEventListener("resize", onScroll);};
  }, []);

  return (
    <div className="page">
      <SideLeft />
      <main className="center">
        <MobileHeader />
        <Hero />
        <Results />
        <Worries />
        <Capability />
        <Reasons />
        <Services />
        <Plan />
        <Pricing />
        <Flow />
        <Works />
        <Voices />
        <FAQ />
        <ContactForm />
        <Footer />
      </main>
      <SideRight active={active} />
      <MobileCTA />
    </div>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);