/* ============================================================
   Enarge — 駆動・計測制御 技術紹介ページ
   Exposes window.DriveTechPage
   ============================================================ */
const DT_TOPICS = [
  {
    id: "solenoid",
    no: "01",
    key: "ソレノイド計測制御装置設計",
    title: "ソレノイド計測制御装置設計",
    lead: ["ソレノイドを", "セットする、制御する、計測する", "。"],
    body: "ソレノイドの特性を計測するための装置を、一貫して開発します。ワークセット治具、ストロークセンサ、ロードセルを組み込んだメカ設計から、駆動と計測を担う制御装置、そして測定を操作するアプリケーションまで。設計の区切りで手を離さないため、機構・回路・ソフトのどこに原因があっても、その場で詰められます。",
    img: "uploads/SOL_MEAS2.jpg",
    fitHeight: true,
    points: ["ワークセット治具の設計", "ストロークセンサ", "ロードセル", "メカ設計", "制御装置の設計", "アプリケーション開発"]
  },
  {
    id: "pwm",
    no: "02",
    key: "PWM制御",
    title: "PWM制御",
    lead: ["ソレノイドを", "PWM制御", "で駆動させる装置開発"],
    body: "ソレノイドは電流を流せば動きますが、安定して動かし続けるには設計が要ります。逆起電力はフライホイールダイオードで処理し、駆動回路の素子を守る。電流をフィードバックしながら目標値へ収束させる電流制御では、PID 調整が要になります。",
    img: "uploads/SOL_PWM4.jpg",
    fitHeight: true,
    points: ["駆動回路の設計", "デューティー比による電流制御", "突入・保持の2段駆動", "逆起電力対策（フライホイールダイオード）", "電流フィードバック", "PID 調整", "マイコン制御（STM32 / PIC タイマ）", "多連ソレノイドの同期駆動"]
  },
  {
    id: "measure",
    no: "03",
    key: "計測制御",
    title: "計測制御",
    lead: "センサからの信号を取り込み、電流-推力, ストローク-推力等の計測を行います",
    body: "ソレノイドを制御し、PC側のアプリで記録、グラフ表示、データ解析まで含めて設計できます。自社開発ですので、サンプリング周期変更、ノイズフィルタの実装も可能です。",
    imgs: ["uploads/SOL_IF.png", "uploads/SOL_STF.png"],
    points: ["ADC / センサ入力", "ノイズ対策・フィルタ設計", "校正とスケーリング", "リアルタイム収集", "シリアル / USB / TCP 通信", "C# による記録・監視アプリ"]
  }
];

function DT_Nav() {
  return (
    <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 34 }}>
      {DT_TOPICS.map(t => (
        <a key={t.id} href={"#" + t.id} className="chip" style={{ fontSize: 14, padding: "10px 18px", textDecoration: "none" }}>{t.key}</a>
      ))}
    </div>
  );
}

function DT_Topic({ t, i }) {
  const cream = i % 2 === 1;
  const ink = cream ? "var(--ink-900)" : "var(--text-strong)";
  const sub = cream ? "#5f5040" : "var(--text)";
  return (
    <section id={t.id} className={cream ? "grain" : ""}
      style={{ background: cream ? "var(--cream-50)" : "var(--ink-900)", color: cream ? "var(--ink-900)" : undefined,
               padding: "76px 0", scrollMarginTop: 90, borderTop: cream ? "none" : "1px solid var(--ink-600)" }}>
      <div className="wrap">
        <window.CT_SectionLabel n={t.no + " — " + t.title} dark={cream} />
        <div className="ct-grid ct-hero" style={{ alignItems: "start" }}>
          <div>
            <h2 style={{ fontFamily: "var(--font-round)", fontWeight: 700, fontSize: 32, lineHeight: 1.4, color: ink, margin: "0 0 18px" }}>
              {Array.isArray(t.lead) ?
              <React.Fragment>{t.lead[0]}<span style={{ color: cream ? "var(--red-600)" : "var(--red-500)" }}>{t.lead[1]}</span>{t.lead[2]}</React.Fragment> :
              t.lead}
            </h2>
            <p style={{ color: sub, fontSize: 17, lineHeight: 2, margin: 0 }}>{t.body}</p>
          </div>
          <div>
            {t.imgs ?
            <div style={{ display: "grid", gap: 14, marginBottom: 20 }}>
              {t.imgs.map(src => (
                <img key={src} src={src} alt={t.title} style={{ width: "100%", height: "auto", display: "block", borderRadius: "var(--radius-lg)" }} />
              ))}
            </div> :
            t.fitHeight ?
            <img src={t.img} alt={t.title} style={{ width: "100%", height: "auto", display: "block", borderRadius: "var(--radius-lg)", marginBottom: 20 }} /> :
            <div className="ph" style={{ aspectRatio: "4/3", borderRadius: "var(--radius-lg)", marginBottom: 20, overflow: "hidden", padding: t.img ? 8 : undefined }}>
              {t.img ?
              <img src={t.img} alt={t.title} style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} /> :
              t.key + " の写真・図版"}
            </div>}
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {t.points.map(p => (
                <span key={p} className="chip" style={{ pointerEvents: "none",
                  ...(cream ? { background: "#fff", borderColor: "var(--cream-200)", color: "#5f5040" } : null) }}>{p}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function DriveTechPage({ onLogin }) {
  const login = onLogin || (() => {});
  return (
    <div>
      <window.TopHeader onLogin={login} />

      <section style={{ position: "relative", overflow: "hidden", padding: "74px 0 66px" }}>
        <div className="wrap">
          <window.CT_SectionLabel n="TECHNOLOGY — 駆動と計測制御" />
          <h1 className="ct-h1" style={{ fontFamily: "var(--font-round)", fontWeight: 700, lineHeight: 1.28, color: "var(--text-strong)", margin: "0 0 22px", maxWidth: 780 }}>
            ソレノイド特性を<span style={{ color: "var(--red-500)", whiteSpace: "nowrap" }}>計測する</span>
          </h1>
          <p style={{ color: "var(--text)", fontSize: 18.5, lineHeight: 1.95, maxWidth: 620, margin: 0 }}>
            ソレノイドを PWM で駆動する制御と、センサからの計測。装置を思いどおりに動かすための、駆動回路とファームウェアの設計が得意分野です。
          </p>
          <DT_Nav />
        </div>
        <div style={{ position: "absolute", bottom: -160, right: -110, width: 360, height: 360, borderRadius: "50%", background: "var(--red-glow)", filter: "blur(90px)", pointerEvents: "none" }}></div>
      </section>

      {DT_TOPICS.map((t, i) => <DT_Topic key={t.id} t={t} i={i} />)}

      <section style={{ background: "var(--ink-800)", borderTop: "1px solid var(--ink-600)", padding: "72px 0" }}>
        <div className="wrap">
          <window.CT_SectionLabel n="STRENGTH — 一社で完結する強み" />
          <h2 style={{ fontFamily: "var(--font-round)", fontWeight: 700, fontSize: 32, color: "var(--text-strong)", margin: "0 0 14px" }}>
            回路とソフトを、同じ人間が見る。
          </h2>
          <p style={{ color: "var(--text-muted)", fontSize: 17.5, lineHeight: 1.9, maxWidth: 640, margin: "0 0 40px" }}>
            駆動や計測の不具合は、ハードとソフトの境目で起きます。分業していると原因の切り分けだけで時間が溶けますが、両方を一社で持てば、波形を見ながらその場でファームを直せます。
          </p>
          <div className="ct-grid ct-3">
            {[
              ["切り分けが速い", "回路とファームの両方を追えるため、症状から原因へ最短で辿り着きます。"],
              ["実機で詰める", "机上の計算で終わらせず、実際の波形と動作を見ながら定数を追い込みます。"],
              ["PC 側まで一貫", "装置の制御だけでなく、記録・監視する PC アプリまで同じ設計思想で作れます。"]
            ].map(([t, d]) => (
              <div key={t} style={{ background: "var(--ink-900)", border: "1px solid var(--ink-600)", borderRadius: "var(--radius-lg)", padding: "28px 26px" }}>
                <h3 style={{ fontFamily: "var(--font-round)", fontSize: 19, color: "var(--text-strong)", margin: "0 0 12px" }}>{t}</h3>
                <p style={{ color: "var(--text-muted)", fontSize: 15.5, lineHeight: 1.85, margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: "var(--red-600)", padding: "64px 0" }}>
        <div className="wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 28, flexWrap: "wrap" }}>
          <div>
            <h2 style={{ fontFamily: "var(--font-round)", fontWeight: 700, fontSize: 30, color: "#fff", margin: "0 0 8px" }}>
              駆動・計測でお困りでしたら。
            </h2>
            <p style={{ color: "rgba(255,255,255,0.9)", fontSize: 17, margin: 0 }}>仕様が固まっていない段階からでも構いません。</p>
          </div>
          <a className="btn btn-cream" href={window.CONTACT_URL || "contact.html"}>お問い合わせ</a>
        </div>
      </section>

      <window.TopFooter onLogin={login} />
    </div>
  );
}
window.DriveTechPage = DriveTechPage;