/* ============================================================
   Enarge — Top page (3 variations) + shared Header / Footer
   Exposes window.TopHeader, window.TopFooter, window.TopPage
   ============================================================ */
const { useState: useStateT, useEffect: useEffectT } = React;

/* ---- Logo mark (simple geometric — energy node) ---- */
function LogoMark({ size = 30, color = "#d8503e", dot = "#faf4e8" }) {
  return (
    <span className="mark" style={{ width: size, height: size }}>
      <svg width={size} height={size} viewBox="0 0 30 30" fill="none">
        <rect x="4.5" y="4.5" width="21" height="21" rx="6"
              transform="rotate(45 15 15)" fill={color} />
        <circle cx="15" cy="15" r="3.4" fill={dot} />
      </svg>
    </span>
  );
}

function Logo({ light = false }) {
  return (
    <div className="logo">
      <LogoMark />
      <span style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
        <span className="word" style={ light ? { color: "#1c1815" } : null }>
          En<b>a</b>rge
        </span>
        <span className="tag">エナージ<br />HARDWARE &amp; SOFTWARE</span>
      </span>
    </div>
  );
}
window.Logo = Logo;
window.LogoMark = LogoMark;

/* ---- Shared specialties data ---- */
const SPECIALTIES = [
  {
    no: "01",
    key: "設備・機械設計",
    title: "設備・機械設計",
    desc: "生産設備・試験設備・治具の設計から、機構・構造設計、3D CAD によるモデリング・図面作成まで。動く仕組みをゼロからかたちにします。",
    points: ["生産・試験設備", "機構設計", "3D CAD", "治具・図面"],
    img: "uploads/mech-detail4.png",
    small: true
  },
  {
    no: "02",
    key: "ハードウェア・回路設計",
    title: "ハードウェア・回路設計",
    desc: "回路設計・基板アートワークから、PLC・シーケンス制御、試作・評価まで。ソフトとハードを一気通貫で開発できる体制です。",
    points: ["回路設計", "基板評価", "PLC・制御", "試作・評価"],
    img: "uploads/pasted-1782220434630-0.png"
  },
  {
    no: "03",
    key: "ソフトウェア",
    title: "ソフトウェア・組込み開発",
    desc: "STM32 / PIC の組込みファームから、C# / .NET・C++ による計測・制御アプリ、業務システムまで。計測・制御を軸に実装・保守します。",
    points: ["組込み（STM32 / PIC）", "C / C++", "C# / .NET", "計測・制御ソフト"],
    visual: "code"
  },
  {
    no: "04",
    key: "スマホアプリ",
    title: "スマホアプリ開発",
    desc: "Android / iOS ネイティブアプリ。計測機器との連携や現場用ツールなど、業務に直結するアプリを開発します。",
    points: ["Android", "iOS / iPhone", "機器連携"],
    visual: "phone"
  }
];
window.SPECIALTIES = SPECIALTIES;

/* ---- Header ---- */
function TopHeader({ onLogin, variant, onVariant }) {
  const [scrolled, setScrolled] = useStateT(false);
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 40,
      background: "rgba(28,24,21,0.82)", backdropFilter: "blur(14px)",
      borderBottom: "1px solid var(--ink-600)"
    }}>
      <div className="wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20, minHeight: 74, flexWrap: "wrap", paddingTop: 8, paddingBottom: 8 }}>
        <a href={window.HOME || "#"} onClick={e => { if (!window.HOME) { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); } }}
           style={{ textDecoration: "none", display: "inline-flex" }}><Logo /></a>
        <nav style={{ display: "flex", alignItems: "center", gap: 30, flexWrap: "wrap", justifyContent: "flex-end" }}>
          {[["事業内容", "#service"], ["技術・得意分野", "#expertise"], ["会社概要", "#company"], ["ダウンロード", "@sw"], ["製品案内", "@prod"], ["ソレノイド計測制御", "@tech"]].map(([t, h]) => (
            <a key={t} href={h === "@sw" ? (window.SOFTWARE_URL || "software.html") : h === "@tech" ? (window.TECH_URL || "drive-tech.html") : h === "@prod" ? (window.PRODUCTS_URL || "products/") : (window.HOME || "") + h} style={{ fontSize: 14.5, color: "var(--text-muted)", fontWeight: 500, whiteSpace: "nowrap" }}
               onMouseEnter={e => e.currentTarget.style.color = "var(--cream-50)"}
               onMouseLeave={e => e.currentTarget.style.color = "var(--text-muted)"}>{t}</a>
          ))}
          <button className="btn btn-primary" style={{ padding: "10px 18px", fontSize: 14 }} onClick={() => location.href = "memo/"}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>
            技術情報
          </button>
        </nav>
      </div>
    </header>
  );
}
window.TopHeader = TopHeader;

/* ---- Footer ---- */
function TopFooter({ onLogin }) {
  return (
    <footer style={{ background: "var(--ink-900)", borderTop: "1px solid var(--ink-600)", paddingTop: 64, paddingBottom: 40 }}>
      <div className="wrap ct-grid ct-foot">
        <div>
          <Logo />
          <p style={{ color: "var(--text-muted)", fontSize: 14, lineHeight: 1.8, maxWidth: 320, marginTop: 18 }}>
            設備・機械設計から回路・PLC・組込み・ソフトウェアまで。ものづくりの全工程を、ひとつの窓口でお引き受けします。
          </p>
        </div>
        <div>
          <h4 style={{ color: "var(--text-strong)", fontSize: 13, letterSpacing: ".05em", margin: "0 0 16px" }}>サイトメニュー</h4>
          {[["会社について", "#about"], ["事業内容", "#service"], ["技術・得意分野", "#expertise"], ["開発の流れ", "#flow"], ["会社概要", "#company"]].map(([t, h]) => (
            <a key={t} href={(window.HOME || "") + h} style={{ display: "block", color: "var(--text-muted)", fontSize: 14, padding: "7px 0" }}>{t}</a>
          ))}
          <a href={window.SOFTWARE_URL || "software.html"} style={{ display: "block", color: "var(--text-muted)", fontSize: 14, padding: "7px 0" }}>ダウンロード</a>
          <a href={window.PRODUCTS_URL || "products/"} style={{ display: "block", color: "var(--text-muted)", fontSize: 14, padding: "7px 0" }}>製品案内</a>
          <a href={window.TECH_URL || "drive-tech.html"} style={{ display: "block", color: "var(--text-muted)", fontSize: 14, padding: "7px 0" }}>ソレノイド計測制御</a>
          <a href={window.CONTACT_URL || "お問い合わせ.html"} style={{ display: "block", color: "var(--text-muted)", fontSize: 14, padding: "7px 0" }}>お問い合わせ</a>
        </div>
        <div>
          <h4 style={{ color: "var(--text-strong)", fontSize: 13, letterSpacing: ".05em", margin: "0 0 16px" }}>社内向け</h4>
          <button className="btn btn-ghost" style={{ padding: "11px 18px", fontSize: 14 }} onClick={() => location.href = "memo/"}>技術情報ページ</button>
          <p style={{ color: "var(--text-faint)", fontSize: 12, marginTop: 16, fontFamily: "var(--font-mono)" }}>※ 閲覧にはパスワードが必要です</p>
        </div>
      </div>
      <div className="wrap" style={{ marginTop: 48, paddingTop: 24, borderTop: "1px solid var(--ink-700)", display: "flex", justifyContent: "space-between", color: "var(--text-faint)", fontSize: 12.5 }}>
        <span>© 2026 Enarge.co.,ltd.</span>
        <span style={{ fontFamily: "var(--font-mono)" }}>Renewal preview</span>
      </div>
    </footer>
  );
}
window.TopFooter = TopFooter;