// variants.jsx — 3 visual-tone variants for 鍵屋's resident-facing corporate site.
// Each variant is a self-contained multi-page React app with internal page state.

const { useState, useEffect } = React;

// ─────────────────────────────────────────────────────────────
// Shared content (so all 3 variants stay 1:1 comparable)
// ─────────────────────────────────────────────────────────────
const CONTENT = {
  brand: 'カーロックホームズ',
  brandEn: 'CARLOCK HOMES',
  brandShort: 'CLH',
  tagline: '暮らしの安心を、扉ひとつから。',
  taglineEn: 'Life HUB for your home.',
  desc:
  '美和ロック指定サービス代行店（SD）、ゴール指定メンテナンスステーション（GMS）、シブタニ Clavis サービス代行店。マンションの錠前・スマートロック・共用部システムから緊急解錠まで、全国180拠点のネットワークでお引き受けします。',
  strengths: [
  { no: '01', t: '3メーカー指定代行店', d: '美和ロック（SD）／ ゴール（GMS）／ シブタニ（Clavis代行店）— 主要メーカー3社の指定代行店として、最適な錠前・部材をご提案。' },
  { no: '02', t: '月間 3,000件の対応実績', d: '緊急解錠・スマートロック設置・共用部点検まで、現場で積み上げた実績が確かな品質の裏付けです。' },
  { no: '03', t: '全国180拠点のネットワーク', d: '全国に張り巡らされたパートナー網で、24時間365日、最寄りの拠点から最短ルートで駆けつけます。' },
  { no: '04', t: '管理会社向け代行サービス', d: '不動産管理会社向けの入居前点検・巡回点検・退去後清掃まで、建物管理業務を一括アウトソーシング。' },
  { no: '05', t: '創業20年以上の信頼', d: '平成14年創業。ALSOK・大和リビング・三井不動産レジデンシャルリース等、大手企業との取引実績。' }],

  services: [
  { tag: '主力', t: 'カギ・防犯セキュリティー', d: '住宅・金庫等の緊急解錠／鍵・スマートロックの交換・新規取付／監視カメラ・インターホン通信工事／オートロック・電気錠の保守点検。' },
  { tag: '主力', t: '住宅設備メンテナンス', d: 'サッシ・網戸・ペアガラス修理交換／水漏れ・排水詰まりの24時間緊急対応／建物共用部の定期安全点検・修繕提案／退去後清掃・リフレッシュ工事。' },
  { tag: '', t: '管理代行アウトソーシング', d: '不動産管理会社向け入居前点検代行／全国180拠点を活かした巡回点検／24時間365日の受付・緊急出動体制／建物価値向上のコンサル業務。' },
  { tag: '', t: 'マンション共用部 非接触エントリー', d: 'エントランス自動ドア、メールコーナー、駐輪・駐車場ゲートの非接触化と、ICカード・スマートロックの一元管理。' },
  { tag: '', t: '入居者向けスマートロック導入', d: '専有部の電気錠・スマートロックの選定〜施工〜引渡し後の鍵管理。退去・入居時の鍵交換も即日対応。' },
  { tag: '', t: '24時間 緊急対応', d: '鍵紛失・閉じ込め・水漏れなど、暮らしの「困った」に24時間365日対応。最寄り拠点から最短で出動します。' }],

  partners: [
  { cat: '指定代行店', name: '美和ロック株式会社', spec: '指定サービス代行店（SD）' },
  { cat: '指定代行店', name: '株式会社ゴール', spec: '指定メンテナンスステーション（GMS）' },
  { cat: '指定代行店', name: '株式会社シブタニ', spec: 'Clavisサービス代行店' },
  { cat: '加盟組合', name: '日本ロックセキュリティ協同組合', spec: '正会員' }],

  clients: [
  '綜合警備保障株式会社 (ALSOK)', '大和リビング株式会社', '三井不動産レジデンシャルリース',
  '伊藤忠アーバンコミュニティー', '株式会社ハウスメイト', 'スターツアメニティー株式会社',
  'プレステージ・コアソリューション', '株式会社リロクリエイション', '株式会社カインズ',
  '東建コーポレーション', '株式会社穴吹ハウジングサービス', '株式会社TOKAI'],

  company: {
    name: 'カーロックホームズ株式会社',
    nameEn: 'CarlockHomes CO., LTD. (CLH)',
    addr: '〒167-0042 東京都杉並区西荻北4-37-12 ブランシュ西荻 中2階',
    access: 'JR中央線・総武線「西荻窪駅」北口より徒歩5分',
    tel: '03-5311-0556',
    email: 'office@carlockhomes.co.jp',
    estd: '平成14年8月',
    rep: '上野原 政司',
    group: '株式会社TENKEN GO ／ 株式会社One Stop Labo',
    biz: 'カギ・防犯セキュリティー／住宅設備メンテナンス／管理代行アウトソーシング'
  },
  nav: [
  { id: 'home', label: 'ホーム' },
  { id: 'service', label: '事業内容' },
  { id: 'works', label: '実績・取引先' },
  { id: 'company', label: '企業情報' }]

};

// ─────────────────────────────────────────────────────────────
// Placeholder image — diagonal-stripe SVG with monospace caption
// ─────────────────────────────────────────────────────────────
function PH({ label, ratio, dark, accent, style, height }) {
  const stripe = dark ? 'rgba(255,255,255,.04)' : 'rgba(0,0,0,.035)';
  const bg = dark ? '#1a1714' : '#ece8e0';
  const fg = dark ? 'rgba(255,255,255,.55)' : 'rgba(0,0,0,.5)';
  const accentBar = accent || (dark ? '#c9a24b' : 'rgba(0,0,0,.18)');
  return (
    <div style={{
      position: 'relative', width: '100%', aspectRatio: ratio || '4/3', height,
      background: `repeating-linear-gradient(45deg, ${bg} 0 14px, ${stripe} 14px 15px)`,
      overflow: 'hidden', ...style
    }}>
      <div style={{ position: 'absolute', top: 12, left: 12, width: 28, height: 2, background: accentBar }} />
      <div style={{
        position: 'absolute', bottom: 12, left: 14,
        fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
        fontSize: 10, letterSpacing: 0.4, color: fg, textTransform: 'uppercase'
      }}>{label || 'IMAGE PLACEHOLDER'}</div>
    </div>);

}

// =============================================================
// VARIANT A — LUXURY (黒×ゴールド、明朝、余白)
// =============================================================
function LuxuryVariant() {
  const [page, setPage] = useState('home');

  // Page-level fonts/colors
  const palette = {
    bg: '#0c0a08',
    fg: '#f3ede1',
    fgMute: 'rgba(243,237,225,.62)',
    line: 'rgba(243,237,225,.12)',
    gold: '#c9a24b',
    goldDark: '#9d7d34',
    surface: '#15110c'
  };
  const serif = '"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif';
  const sans = '"Noto Sans JP", "Hiragino Sans", sans-serif';
  const latin = '"Cormorant Garamond", "Noto Serif JP", serif';

  const wrap = {
    width: '100%', height: '100%', background: palette.bg, color: palette.fg,
    fontFamily: sans, position: 'relative', overflow: 'hidden'
  };

  const Nav = () =>
  <header style={{
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '24px 56px', borderBottom: `1px solid ${palette.line}`,
    position: 'relative', zIndex: 2
  }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
        <div style={{ fontFamily: serif, fontSize: 22, letterSpacing: 6, fontWeight: 400 }}>カーロックホームズ</div>
        <div style={{ fontFamily: latin, fontSize: 13, letterSpacing: 4, color: palette.gold }}>CARLOCK HOMES</div>
      </div>
      <nav style={{ display: 'flex', gap: 36, fontSize: 12, letterSpacing: 2 }}>
        {CONTENT.nav.map((n) =>
      <button key={n.id} onClick={() => setPage(n.id)}
      style={{
        background: 'none', border: 'none', cursor: 'pointer', padding: '6px 0',
        color: page === n.id ? palette.gold : palette.fg,
        fontFamily: sans, letterSpacing: 2,
        borderBottom: `1px solid ${page === n.id ? palette.gold : 'transparent'}`
      }}>{n.label}</button>
      )}
      </nav>
      <button onClick={() => setPage('contact')} style={{
      border: `1px solid ${palette.gold}`, background: 'transparent', color: palette.gold,
      padding: '10px 22px', fontSize: 11, letterSpacing: 3, cursor: 'pointer', fontFamily: sans
    }}>CONTACT →</button>
    </header>;


  // ── Home ────────────────────────────────────────────
  const Home = () =>
  <div>
      <div style={{ position: 'relative', height: 560, display: 'grid', gridTemplateColumns: '1.1fr 1fr' }}>
        <div style={{ padding: '90px 56px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
            <div style={{ width: 40, height: 1, background: palette.gold }} />
            <span style={{ fontFamily: latin, fontSize: 13, letterSpacing: 4, color: palette.gold, fontStyle: 'italic' }}>Since 1983</span>
          </div>
          <h1 style={{
          fontFamily: serif, fontWeight: 300, fontSize: 64, lineHeight: 1.25,
          letterSpacing: 4, margin: 0, marginBottom: 26
        }}>
            扉のむこうに、<br />
            <span style={{ color: palette.gold, fontStyle: 'italic', fontFamily: latin, fontSize: 70 }}>quiet</span> な暮らし。
          </h1>
          <p style={{ fontSize: 14, lineHeight: 2.2, color: palette.fgMute, margin: 0, maxWidth: 460, letterSpacing: 1 }}>
            ハイエンドマンションの扉と共用部を、3つの錠前メーカーの粋を集めて。<br />
            設計の一筆目から、お引渡し後の鍵ひとつまで。
          </p>
          <div style={{ display: 'flex', gap: 18, marginTop: 44 }}>
            <button onClick={() => setPage('service')} style={{
            background: palette.gold, color: '#0c0a08', border: 'none', padding: '14px 28px',
            fontSize: 12, letterSpacing: 3, cursor: 'pointer', fontFamily: sans, fontWeight: 500
          }}>SERVICES →</button>
            <button onClick={() => setPage('works')} style={{
            background: 'transparent', color: palette.fg, border: `1px solid ${palette.line}`,
            padding: '14px 28px', fontSize: 12, letterSpacing: 3, cursor: 'pointer', fontFamily: sans
          }}>WORKS →</button>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <PH dark label="HERO  ·  ENTRANCE  /  TWILIGHT" ratio="auto" accent={palette.gold}
        style={{ height: '100%', position: 'absolute', inset: 0 }} />
          <div style={{
          position: 'absolute', bottom: 32, left: -60, padding: '18px 26px',
          background: palette.bg, border: `1px solid ${palette.gold}`,
          display: 'flex', alignItems: 'center', gap: 18
        }}>
            <div style={{ fontFamily: latin, fontSize: 38, color: palette.gold, fontStyle: 'italic', lineHeight: 1 }}>1983</div>
            <div style={{ fontSize: 10, letterSpacing: 2, color: palette.fgMute, lineHeight: 1.6 }}>
              CRAFTSMANSHIP<br />SINCE
            </div>
          </div>
        </div>
      </div>

      <div style={{ padding: '0 56px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', borderTop: `1px solid ${palette.line}` }}>
        {CONTENT.strengths.slice(0, 3).map((s, i) =>
      <div key={s.no} style={{
        padding: '40px 30px', borderRight: i < 2 ? `1px solid ${palette.line}` : 'none'
      }}>
            <div style={{ fontFamily: latin, fontSize: 32, color: palette.gold, fontStyle: 'italic', marginBottom: 12 }}>·{s.no}</div>
            <div style={{ fontFamily: serif, fontSize: 19, letterSpacing: 2, marginBottom: 14 }}>{s.t}</div>
            <div style={{ fontSize: 12, lineHeight: 1.9, color: palette.fgMute }}>{s.d}</div>
          </div>
      )}
      </div>
    </div>;


  // ── Service ─────────────────────────────────────────
  const Service = () =>
  <div style={{ padding: '60px 56px' }}>
      <SectionHead serif={serif} latin={latin} palette={palette}
    en="Services" jp="お引き受けする業務" />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1px', background: palette.line, marginTop: 40 }}>
        {CONTENT.services.map((s, i) =>
      <div key={i} style={{ background: palette.bg, padding: '36px 32px' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
              <div style={{ fontFamily: latin, fontStyle: 'italic', color: palette.gold, fontSize: 24 }}>0{i + 1}</div>
              {s.tag && <span style={{
            fontSize: 9, letterSpacing: 2, color: palette.gold,
            border: `1px solid ${palette.gold}`, padding: '3px 8px'
          }}>{s.tag}</span>}
            </div>
            <div style={{ fontFamily: serif, fontSize: 22, letterSpacing: 1.5, marginBottom: 14 }}>{s.t}</div>
            <div style={{ fontSize: 12, lineHeight: 1.95, color: palette.fgMute }}>{s.d}</div>
          </div>
      )}
      </div>
    </div>;


  // ── Works ───────────────────────────────────────────
  const Works = () =>
  <div style={{ padding: '60px 56px' }}>
      <SectionHead serif={serif} latin={latin} palette={palette}
    en="Partners & Clients" jp="取引先・加盟" />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, marginTop: 40 }}>
        {CONTENT.partners.map((p, i) =>
      <div key={i} style={{ border: `1px solid ${palette.line}`, padding: 28 }}>
            <div style={{ fontFamily: latin, fontStyle: 'italic', color: palette.gold, fontSize: 14, marginBottom: 10 }}>· {p.cat}</div>
            <div style={{ fontFamily: serif, fontSize: 22, letterSpacing: 1.5, marginBottom: 6 }}>{p.name}</div>
            <div style={{ fontSize: 12, color: palette.fgMute }}>{p.spec}</div>
          </div>
      )}
      </div>
      <div style={{ marginTop: 36, paddingTop: 28, borderTop: `1px solid ${palette.line}` }}>
        <div style={{ fontFamily: latin, fontStyle: 'italic', color: palette.gold, fontSize: 14, marginBottom: 18 }}>· Major Clients</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '10px 32px', fontSize: 13, color: palette.fgMute, fontFamily: serif, lineHeight: 1.8 }}>
          {CONTENT.clients.map((c, i) => <div key={i}>· {c}</div>)}
        </div>
      </div>
    </div>;


  // ── Company ─────────────────────────────────────────
  const Company = () =>
  <div style={{ padding: '60px 56px' }}>
      <SectionHead serif={serif} latin={latin} palette={palette}
    en="Company" jp="会社案内" />
      <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 64 }}>
        <div>
          <PH dark label="STUDIO  ·  OFFICE INTERIOR" ratio="4/5" accent={palette.gold} />
          <p style={{ marginTop: 24, fontSize: 13, lineHeight: 2.1, color: palette.fgMute, letterSpacing: 1 }}>
            私たちは、扉という小さな境界に、暮らしの密度をすべて閉じ込める仕事をしています。
            設計者・施工者・住まい手──三者の声を等しく聴く代行店であること。それが、当社の流儀です。
          </p>
        </div>
        <table style={{ borderCollapse: 'collapse', width: '100%', fontSize: 13, fontFamily: serif, letterSpacing: 1 }}>
          <tbody>
            {[
          ['商号', CONTENT.company.name],
          ['所在地', CONTENT.company.addr],
          ['電話', CONTENT.company.tel],
          ['Email', CONTENT.company.email],
          ['創業', CONTENT.company.estd],
          ['代表', CONTENT.company.rep],
          ['グループ', CONTENT.company.group],
          ['事業内容', CONTENT.company.biz],
          ['取扱メーカー', '美和ロック株式会社 / 株式会社シブタニ（クラビス）/ 株式会社ゴール']].
          map(([k, v], i) =>
          <tr key={i} style={{ borderBottom: `1px solid ${palette.line}` }}>
                <th style={{ textAlign: 'left', padding: '20px 0', width: 140, color: palette.gold, fontFamily: latin, fontStyle: 'italic', fontWeight: 400, fontSize: 14 }}>{k}</th>
                <td style={{ padding: '20px 0', color: palette.fg, lineHeight: 1.8 }}>{v}</td>
              </tr>
          )}
          </tbody>
        </table>
      </div>
    </div>;


  // ── Contact ─────────────────────────────────────────
  const Contact = () => {
    const [sent, setSent] = useState(false);
    const Field = ({ label, type = 'text', textarea }) =>
    <label style={{ display: 'block', marginBottom: 24 }}>
        <div style={{ fontFamily: latin, fontStyle: 'italic', color: palette.gold, fontSize: 12, letterSpacing: 2, marginBottom: 8 }}>· {label}</div>
        {textarea ?
      <textarea rows={4} style={{
        width: '100%', background: 'transparent', border: 'none', borderBottom: `1px solid ${palette.line}`,
        color: palette.fg, padding: '8px 0', fontFamily: serif, fontSize: 15, outline: 'none', resize: 'none'
      }} /> :

      <input type={type} style={{
        width: '100%', background: 'transparent', border: 'none', borderBottom: `1px solid ${palette.line}`,
        color: palette.fg, padding: '8px 0', fontFamily: serif, fontSize: 15, outline: 'none'
      }} />
      }
      </label>;

    return (
      <div style={{ padding: '60px 56px' }}>
        <SectionHead serif={serif} latin={latin} palette={palette}
        en="Contact" jp="お問い合わせ" />
        <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
          <div>
            <p style={{ fontSize: 13, lineHeight: 2.1, color: palette.fgMute, letterSpacing: 1, margin: 0, marginBottom: 36 }}>
              新築マンションの錠前・スマートロック・共用部システムについて、設計段階からのご相談を承ります。
            </p>
            <div style={{ borderTop: `1px solid ${palette.line}`, paddingTop: 24 }}>
              <div style={{ fontFamily: latin, fontStyle: 'italic', color: palette.gold, fontSize: 13, letterSpacing: 2, marginBottom: 6 }}>· By Phone</div>
              <div style={{ fontFamily: serif, fontSize: 32, letterSpacing: 2, color: palette.fg }}>{CONTENT.company.tel}</div>
              <div style={{ fontSize: 11, color: palette.fgMute, marginTop: 8, letterSpacing: 1 }}>平日 9:00–18:00 ／ 24h 緊急対応あり</div>
            </div>
          </div>
          <form onSubmit={(e) => {e.preventDefault();setSent(true);}}>
            {!sent ?
            <>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
                  <Field label="お名前 / Name" />
                  <Field label="会社名 / Company" />
                  <Field label="電話 / Tel" />
                  <Field label="メール / Email" type="email" />
                </div>
                <Field label="ご相談内容 / Message" textarea />
                <button type="submit" style={{
                marginTop: 16, background: palette.gold, color: '#0c0a08', border: 'none',
                padding: '18px 48px', fontSize: 12, letterSpacing: 4, cursor: 'pointer',
                fontFamily: sans, fontWeight: 500
              }}>送信する  ·  SEND →</button>
              </> :

            <div style={{ padding: '60px 0', textAlign: 'center' }}>
                <div style={{ fontFamily: latin, fontStyle: 'italic', color: palette.gold, fontSize: 28, marginBottom: 18 }}>· Thank you</div>
                <div style={{ fontFamily: serif, fontSize: 22, marginBottom: 12, letterSpacing: 2 }}>送信が完了しました</div>
                <div style={{ fontSize: 13, color: palette.fgMute, letterSpacing: 1 }}>2営業日以内にご返信いたします。</div>
              </div>
            }
          </form>
        </div>
      </div>);

  };

  return (
    <div style={wrap}>
      <Nav />
      <div key={page} style={{ animation: 'fade .35s ease' }}>
        {page === 'home' && <Home />}
        {page === 'service' && <Service />}
        {page === 'works' && <Works />}
        {page === 'company' && <Company />}
        {page === 'contact' && <Contact />}
      </div>
    </div>);

}

function SectionHead({ serif, latin, palette, en, jp }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 24 }}>
      <span style={{ fontFamily: latin, fontStyle: 'italic', color: palette.gold, fontSize: 36, letterSpacing: 1 }}>· {en}</span>
      <span style={{ fontFamily: serif, fontSize: 18, letterSpacing: 4, color: palette.fgMute }}>{jp}</span>
    </div>);

}

// =============================================================
// VARIANT B — MODERN / TECH (白×インクブルー、グリッド、サンセリフ)
// =============================================================
function ModernVariant() {
  const [page, setPage] = useState('home');

  const palette = {
    bg: '#f6f5f2',
    fg: '#0a0e1a',
    fgMute: 'rgba(10,14,26,.6)',
    line: 'rgba(10,14,26,.1)',
    blue: '#1d3fb8',
    blueLight: '#5d7be3',
    surface: '#ffffff'
  };
  const sans = '"Noto Sans JP", "Hiragino Sans", system-ui, sans-serif';
  const mono = 'ui-monospace, "SF Mono", "JetBrains Mono", monospace';

  const wrap = {
    width: '100%', height: '100%', background: palette.bg, color: palette.fg,
    fontFamily: sans, position: 'relative', overflow: 'hidden'
  };

  const Nav = () =>
  <header style={{
    display: 'grid', gridTemplateColumns: '240px 1fr auto',
    alignItems: 'center', padding: '20px 40px',
    borderBottom: `1px solid ${palette.line}`, background: palette.bg
  }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
        width: 32, height: 32, borderRadius: 6, background: palette.blue,
        display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 700, fontSize: 13,
        fontFamily: mono
      }}>CLH</div>
        <div>
          <div style={{ fontWeight: 700, fontSize: 16, letterSpacing: -0.2 }}>カーロックホームズ</div>
          <div style={{ fontSize: 10, fontFamily: mono, color: palette.fgMute, letterSpacing: 1 }}>CARLOCK HOMES / locks &amp; access</div>
        </div>
      </div>
      <nav style={{ display: 'flex', gap: 4, justifyContent: 'center' }}>
        {CONTENT.nav.map((n) =>
      <button key={n.id} onClick={() => setPage(n.id)} style={{
        background: page === n.id ? palette.fg : 'transparent',
        color: page === n.id ? palette.bg : palette.fg,
        border: 'none', padding: '8px 16px', borderRadius: 999,
        fontSize: 13, fontFamily: sans, fontWeight: 500, cursor: 'pointer',
        transition: 'all .15s'
      }}>{n.label}</button>
      )}
      </nav>
      <button onClick={() => setPage('contact')} style={{
      background: palette.blue, color: '#fff', border: 'none',
      padding: '11px 22px', borderRadius: 8, fontSize: 13, fontWeight: 600,
      fontFamily: sans, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8
    }}>無料相談 <span style={{ fontFamily: mono, opacity: .7 }}>→</span></button>
    </header>;


  // ── Home ────────────────────────────────────────────
  const Home = () =>
  <div>
      <div style={{
      position: 'relative', display: 'grid', gridTemplateColumns: '1.2fr 1fr',
      gap: 0, padding: '64px 40px 56px'
    }}>
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingRight: 40 }}>
          <div style={{
          display: 'inline-flex', alignSelf: 'flex-start', alignItems: 'center', gap: 8,
          background: '#fff', border: `1px solid ${palette.line}`, padding: '6px 12px',
          borderRadius: 999, fontSize: 11, fontFamily: mono, color: palette.fgMute, marginBottom: 28
        }}>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: palette.blue }} />
            MIWA · SHIBUTANI · GOAL ─ 3社対応サービス代行
          </div>
          <h1 style={{
          fontWeight: 700, fontSize: 60, lineHeight: 1.15, letterSpacing: -2,
          margin: 0, marginBottom: 22
        }}>
            扉と共用部を、<br />
            <span style={{ color: palette.blue }}>ひとつの体験</span>に。
          </h1>
          <p style={{ fontSize: 15, lineHeight: 1.85, color: palette.fgMute, margin: 0, maxWidth: 480 }}>
            新築マンションの錠前・スマートロック・非接触エントリーを、設計から運用まで一気通貫で。
            3メーカーから最適解を組み立てます。
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 36 }}>
            <button onClick={() => setPage('service')} style={{
            background: palette.fg, color: palette.bg, border: 'none', padding: '14px 24px',
            borderRadius: 10, fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: sans
          }}>サービスを見る  →</button>
            <button onClick={() => setPage('works')} style={{
            background: '#fff', color: palette.fg, border: `1px solid ${palette.line}`,
            padding: '14px 24px', borderRadius: 10, fontSize: 14, fontWeight: 500,
            cursor: 'pointer', fontFamily: sans
          }}>実績を見る</button>
          </div>
          <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20, marginTop: 48,
          paddingTop: 28, borderTop: `1px solid ${palette.line}`
        }}>
            {[
          ['320+', '累計納入マンション'],
          ['3', '取扱メーカー'],
          ['24h', '緊急対応']].
          map(([n, l]) =>
          <div key={l}>
                <div style={{ fontFamily: mono, fontSize: 30, fontWeight: 600, letterSpacing: -1, color: palette.blue, lineHeight: 1 }}>{n}</div>
                <div style={{ fontSize: 11, color: palette.fgMute, marginTop: 6 }}>{l}</div>
              </div>
          )}
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <div style={{ background: '#fff', borderRadius: 16, overflow: 'hidden', boxShadow: '0 24px 60px rgba(10,14,26,.1)' }}>
            <div style={{ padding: '14px 18px', borderBottom: `1px solid ${palette.line}`, display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 8, height: 8, borderRadius: 4, background: palette.blue }} />
              <span style={{ fontFamily: mono, fontSize: 11, color: palette.fgMute }}>access_log // entrance.tower-residence</span>
            </div>
            <PH label="ENTRANCE  ·  CONTACTLESS GATE" ratio="4/3" accent={palette.blue} />
            <div style={{ padding: '18px 20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              {['顔認証エントリー', 'EV連動', 'スマートロック', '宅配BOX連携'].map((t) =>
            <div key={t} style={{
              fontSize: 12, padding: '10px 12px', borderRadius: 8,
              background: '#f6f5f2', display: 'flex', alignItems: 'center', gap: 8
            }}>
                  <span style={{ width: 6, height: 6, borderRadius: 3, background: palette.blue }} />
                  {t}
                </div>
            )}
            </div>
          </div>
        </div>
      </div>

      <div style={{ padding: '32px 40px 56px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 24 }}>
          <h2 style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.5, margin: 0 }}>選ばれる5つの理由</h2>
          <span style={{ fontFamily: mono, fontSize: 11, color: palette.fgMute }}>// strengths</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
          {CONTENT.strengths.map((s) =>
        <div key={s.no} style={{
          background: '#fff', border: `1px solid ${palette.line}`,
          borderRadius: 12, padding: 18
        }}>
              <div style={{ fontFamily: mono, fontSize: 11, color: palette.blue, marginBottom: 14 }}>{s.no}</div>
              <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 8, lineHeight: 1.5 }}>{s.t}</div>
              <div style={{ fontSize: 11, lineHeight: 1.7, color: palette.fgMute }}>{s.d}</div>
            </div>
        )}
        </div>
      </div>
    </div>;


  // ── Service ─────────────────────────────────────────
  const Service = () =>
  <div style={{ padding: '48px 40px' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 28 }}>
        <div>
          <div style={{ fontFamily: mono, fontSize: 11, color: palette.blue, marginBottom: 8 }}>// services</div>
          <h2 style={{ fontSize: 36, fontWeight: 700, letterSpacing: -1, margin: 0 }}>お引き受けする業務</h2>
        </div>
        <span style={{ fontFamily: mono, fontSize: 12, color: palette.fgMute }}>06 services</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        {CONTENT.services.map((s, i) =>
      <div key={i} style={{
        background: '#fff', border: `1px solid ${palette.line}`, borderRadius: 14,
        padding: 24, position: 'relative', minHeight: 220
      }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 22 }}>
              <div style={{ fontFamily: mono, fontSize: 28, fontWeight: 600, color: palette.fg, letterSpacing: -1 }}>0{i + 1}</div>
              {s.tag && <span style={{
            fontSize: 9, letterSpacing: 1, color: palette.blue, fontFamily: mono,
            border: `1px solid ${palette.blueLight}`, padding: '3px 8px', borderRadius: 4,
            background: 'rgba(29,63,184,.06)'
          }}>{s.tag}</span>}
            </div>
            <div style={{ fontSize: 17, fontWeight: 700, marginBottom: 12, lineHeight: 1.4 }}>{s.t}</div>
            <div style={{ fontSize: 12.5, lineHeight: 1.85, color: palette.fgMute }}>{s.d}</div>
          </div>
      )}
      </div>
    </div>;


  // ── Works ───────────────────────────────────────────
  const Works = () =>
  <div style={{ padding: '48px 40px' }}>
      <div style={{ marginBottom: 28 }}>
        <div style={{ fontFamily: mono, fontSize: 11, color: palette.blue, marginBottom: 8 }}>// partners</div>
        <h2 style={{ fontSize: 36, fontWeight: 700, letterSpacing: -1, margin: 0 }}>取引先・加盟</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14, marginBottom: 24 }}>
        {CONTENT.partners.map((p, i) =>
      <div key={i} style={{
        background: '#fff', border: `1px solid ${palette.line}`, borderRadius: 12,
        padding: 20, display: 'flex', flexDirection: 'column', gap: 6
      }}>
            <span style={{
          alignSelf: 'flex-start', fontFamily: mono, fontSize: 10, color: palette.blue,
          background: 'rgba(29,63,184,.08)', padding: '3px 8px', borderRadius: 4, letterSpacing: 1
        }}>{p.cat}</span>
            <div style={{ fontSize: 17, fontWeight: 700, marginTop: 6 }}>{p.name}</div>
            <div style={{ fontSize: 12.5, color: palette.fgMute, fontFamily: mono }}>{p.spec}</div>
          </div>
      )}
      </div>
      <div style={{ background: '#fff', border: `1px solid ${palette.line}`, borderRadius: 12, padding: 22 }}>
        <div style={{ fontFamily: mono, fontSize: 11, color: palette.blue, marginBottom: 14 }}>// major_clients</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '10px 24px', fontSize: 12.5, lineHeight: 1.6 }}>
          {CONTENT.clients.map((c, i) =>
        <div key={i} style={{ display: 'flex', gap: 8 }}>
              <span style={{ color: palette.blue, fontFamily: mono }}>{String(i + 1).padStart(2, '0')}</span>
              <span>{c}</span>
            </div>
        )}
        </div>
      </div>
    </div>;


  // ── Company ─────────────────────────────────────────
  const Company = () =>
  <div style={{ padding: '48px 40px' }}>
      <div style={{ marginBottom: 28 }}>
        <div style={{ fontFamily: mono, fontSize: 11, color: palette.blue, marginBottom: 8 }}>// company</div>
        <h2 style={{ fontSize: 36, fontWeight: 700, letterSpacing: -1, margin: 0 }}>会社案内</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 32 }}>
        <div style={{ background: '#fff', borderRadius: 14, padding: 24, border: `1px solid ${palette.line}` }}>
          <PH label="STUDIO" ratio="4/3" accent={palette.blue} />
          <p style={{ marginTop: 20, fontSize: 13, lineHeight: 1.85, color: palette.fgMute }}>
            ハードウェアとシステム、ふたつの専門性を持つチームで、
            錠前メーカー各社の技術を結びつけ、マンション一棟ごとに最適な"鍵の体験"を設計しています。
          </p>
        </div>
        <div style={{ background: '#fff', borderRadius: 14, border: `1px solid ${palette.line}`, overflow: 'hidden' }}>
          {[
        ['Company', CONTENT.company.name],
        ['Address', CONTENT.company.addr],
        ['Tel', CONTENT.company.tel],
        ['Email', CONTENT.company.email],
        ['Founded', CONTENT.company.estd],
        ['CEO', CONTENT.company.rep],
        ['Group', CONTENT.company.group],
        ['Business', CONTENT.company.biz]].
        map(([k, v], i, arr) =>
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: '140px 1fr', padding: '16px 22px',
          borderBottom: i < arr.length - 1 ? `1px solid ${palette.line}` : 'none',
          fontSize: 13.5
        }}>
              <div style={{ fontFamily: mono, color: palette.blue, fontSize: 12 }}>{k}</div>
              <div>{v}</div>
            </div>
        )}
        </div>
      </div>
    </div>;


  // ── Contact ─────────────────────────────────────────
  const Contact = () => {
    const [sent, setSent] = useState(false);
    const inp = {
      width: '100%', background: '#fff', border: `1px solid ${palette.line}`, color: palette.fg,
      padding: '12px 14px', fontFamily: sans, fontSize: 14, outline: 'none', borderRadius: 10
    };
    return (
      <div style={{ padding: '48px 40px' }}>
        <div style={{ marginBottom: 28 }}>
          <div style={{ fontFamily: mono, fontSize: 11, color: palette.blue, marginBottom: 8 }}>// contact</div>
          <h2 style={{ fontSize: 36, fontWeight: 700, letterSpacing: -1, margin: 0 }}>お問い合わせ</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 32 }}>
          <div style={{ background: '#fff', border: `1px solid ${palette.line}`, borderRadius: 14, padding: 24 }}>
            <div style={{ fontFamily: mono, fontSize: 11, color: palette.blue, marginBottom: 10 }}>// phone</div>
            <div style={{ fontFamily: mono, fontSize: 26, fontWeight: 600, letterSpacing: -0.5, marginBottom: 6 }}>{CONTENT.company.tel}</div>
            <div style={{ fontSize: 11, color: palette.fgMute, marginBottom: 24 }}>平日 9:00–18:00 ／ 24h緊急対応</div>
            <div style={{ fontFamily: mono, fontSize: 11, color: palette.blue, marginBottom: 10 }}>// hours</div>
            <div style={{ fontSize: 13, lineHeight: 1.85, color: palette.fgMute }}>
              ご相談は無料です。<br />
              2営業日以内にご返信します。
            </div>
          </div>
          <form onSubmit={(e) => {e.preventDefault();setSent(true);}}
          style={{ background: '#fff', border: `1px solid ${palette.line}`, borderRadius: 14, padding: 28 }}>
            {!sent ?
            <div style={{ display: 'grid', gap: 16 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <label><div style={{ fontFamily: mono, fontSize: 11, color: palette.blue, marginBottom: 6 }}>// name</div><input style={inp} /></label>
                  <label><div style={{ fontFamily: mono, fontSize: 11, color: palette.blue, marginBottom: 6 }}>// company</div><input style={inp} /></label>
                  <label><div style={{ fontFamily: mono, fontSize: 11, color: palette.blue, marginBottom: 6 }}>// tel</div><input style={inp} /></label>
                  <label><div style={{ fontFamily: mono, fontSize: 11, color: palette.blue, marginBottom: 6 }}>// email</div><input type="email" style={inp} /></label>
                </div>
                <label><div style={{ fontFamily: mono, fontSize: 11, color: palette.blue, marginBottom: 6 }}>// message</div>
                  <textarea rows={4} style={{ ...inp, resize: 'none' }} /></label>
                <button type="submit" style={{
                marginTop: 6, background: palette.blue, color: '#fff', border: 'none',
                padding: '14px 22px', borderRadius: 10, fontSize: 14, fontWeight: 600,
                cursor: 'pointer', justifySelf: 'start'
              }}>送信する  →</button>
              </div> :

            <div style={{ padding: '48px 0', textAlign: 'center' }}>
                <div style={{ fontFamily: mono, fontSize: 12, color: palette.blue, marginBottom: 12 }}>// status: ok</div>
                <div style={{ fontSize: 22, fontWeight: 700, marginBottom: 10 }}>送信が完了しました</div>
                <div style={{ fontSize: 13, color: palette.fgMute }}>2営業日以内にご返信いたします。</div>
              </div>
            }
          </form>
        </div>
      </div>);

  };

  return (
    <div style={wrap}>
      <Nav />
      <div key={page} style={{ animation: 'fade .35s ease' }}>
        {page === 'home' && <Home />}
        {page === 'service' && <Service />}
        {page === 'works' && <Works />}
        {page === 'company' && <Company />}
        {page === 'contact' && <Contact />}
      </div>
    </div>);

}

// =============================================================
// VARIANT C — SOLID / TRADITIONAL (生成り×紺×朱、堅実)
// =============================================================
function SolidVariant() {
  const [page, setPage] = useState('home');

  const palette = {
    bg: '#f1ece1',
    paper: '#fbf7ed',
    fg: '#1c2238',
    fgMute: 'rgba(28,34,56,.65)',
    line: 'rgba(28,34,56,.16)',
    navy: '#1c2a55',
    red: '#a3361e'
  };
  const sans = '"Noto Sans JP", "Hiragino Sans", sans-serif';
  const serif = '"Noto Serif JP", "Hiragino Mincho ProN", serif';

  const wrap = {
    width: '100%', height: '100%', background: palette.bg, color: palette.fg,
    fontFamily: sans, position: 'relative', overflow: 'hidden'
  };

  const Nav = () =>
  <>
      <div style={{ background: palette.navy, color: '#fff', padding: '6px 40px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, fontSize: 12, whiteSpace: 'nowrap' }}>
        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>美和ロック（SD）／ ゴール（GMS）／ シブタニ Clavis 指定サービス代行店</span>
        <span style={{ fontWeight: 600, flexShrink: 0 }}>TEL  {CONTENT.company.tel}　24時間365日 対応</span>
      </div>
      <header style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '18px 40px', background: palette.paper,
      borderBottom: `2px solid ${palette.navy}`
    }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{
          width: 46, height: 46, background: palette.navy,
          display: 'grid', placeItems: 'center', color: palette.paper,
          fontFamily: serif, fontSize: 18, fontWeight: 700, letterSpacing: -1
        }}>CLH</div>
          <div style={{ whiteSpace: 'nowrap' }}>
            <div style={{ fontFamily: serif, fontWeight: 700, fontSize: 20, color: palette.navy, letterSpacing: 1 }}>カーロックホームズ</div>
            <div style={{ fontSize: 10, color: palette.fgMute, letterSpacing: 2 }}>CARLOCK  HOMES  CO., LTD.</div>
          </div>
        </div>
        <nav style={{ display: 'flex', gap: 0 }}>
          {CONTENT.nav.map((n) =>
        <button key={n.id} onClick={() => setPage(n.id)} style={{
          background: 'none', border: 'none', cursor: 'pointer',
          padding: '8px 18px', position: 'relative',
          color: page === n.id ? palette.red : palette.fg,
          fontFamily: sans, fontSize: 14, fontWeight: page === n.id ? 700 : 500,
          borderBottom: `3px solid ${page === n.id ? palette.red : 'transparent'}`,
          marginBottom: -2
        }}>{n.label}</button>
        )}
        </nav>
      </header>
    </>;


  // ── Home ────────────────────────────────────────────
  const Home = () =>
  <div>
      <div style={{ position: 'relative', height: 420, display: 'grid', gridTemplateColumns: '1.2fr 1fr', background: palette.paper, borderBottom: `1px solid ${palette.line}` }}>
        <div style={{ padding: '60px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{ fontSize: 13, color: palette.red, fontWeight: 600, letterSpacing: 2, marginBottom: 16 }}>
            ─ 創業 平成14年 ／ 月間 3,000件対応 ／ 全国180拠点
          </div>
          <h1 style={{
          fontFamily: serif, fontWeight: 600, fontSize: 50, lineHeight: 1.4, letterSpacing: 2,
          margin: 0, marginBottom: 22, color: palette.navy
        }}>
            マンションの<span style={{ color: palette.red }}>「鍵」</span>と<br />
            <span style={{ color: palette.red }}>「共用部」</span>のことなら。
          </h1>
          <p style={{ fontSize: 14.5, lineHeight: 2, color: palette.fg, margin: 0, maxWidth: 520 }}>
            美和ロック・ゴール・シブタニの3社指定代行店として、
            錠前・スマートロックの導入から共用部点検・緊急対応まで、責任を持ってお引き受けいたします。
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 28 }}>
            <button onClick={() => setPage('contact')} style={{
            background: palette.red, color: '#fff', border: 'none', padding: '14px 28px',
            fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: sans
          }}>無料でお問い合わせ ▶</button>
            <button onClick={() => setPage('service')} style={{
            background: palette.paper, color: palette.navy, border: `2px solid ${palette.navy}`,
            padding: '12px 28px', fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: sans
          }}>サービス一覧 ▶</button>
          </div>
        </div>
        <div style={{ padding: 32 }}>
          <PH label="マンション外観 / エントランス" ratio="auto" style={{ height: '100%' }} accent={palette.red} />
        </div>
      </div>

      <div style={{ padding: '40px 40px 24px' }}>
        <div style={{ borderLeft: `4px solid ${palette.red}`, paddingLeft: 14, marginBottom: 24 }}>
          <div style={{ fontSize: 12, color: palette.red, fontWeight: 600, letterSpacing: 1 }}>STRENGTHS</div>
          <h2 style={{ fontFamily: serif, fontSize: 26, fontWeight: 700, color: palette.navy, margin: 0, marginTop: 4 }}>当社が選ばれる理由</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
          {CONTENT.strengths.map((s) =>
        <div key={s.no} style={{
          background: palette.paper, border: `1px solid ${palette.line}`,
          padding: 18, borderTop: `3px solid ${palette.navy}`
        }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: palette.red, letterSpacing: 1, marginBottom: 10 }}>No.{s.no}</div>
              <div style={{ fontFamily: serif, fontWeight: 700, fontSize: 15, color: palette.navy, marginBottom: 8, lineHeight: 1.5 }}>{s.t}</div>
              <div style={{ fontSize: 11.5, lineHeight: 1.8, color: palette.fgMute }}>{s.d}</div>
            </div>
        )}
        </div>

        <div style={{
        marginTop: 28, background: palette.navy, color: '#fff', padding: 28,
        display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: 24
      }}>
          <div>
            <div style={{ fontFamily: serif, fontSize: 22, fontWeight: 600, marginBottom: 6 }}>不動産管理会社・ゼネコン様からのご相談を承っております</div>
            <div style={{ fontSize: 13, color: 'rgba(255,255,255,.75)' }}>仕様提案・施工・引渡し後の保守まで、全国180拠点のネットワークで一括対応いたします。</div>
          </div>
          <button onClick={() => setPage('contact')} style={{
          background: palette.red, color: '#fff', border: 'none', padding: '14px 28px',
          fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: sans
        }}>お問い合わせ ▶</button>
        </div>
      </div>
    </div>;


  // ── Service ─────────────────────────────────────────
  const Service = () => {
    const makers = [
    { name: '美和ロック株式会社', en: 'MIWA LOCK', cert: '指定サービス代行店', code: 'SD' },
    { name: '株式会社シブタニ', en: 'SHIBUTANI / Clavis', cert: 'Clavisサービス代行店', code: 'Clavis' },
    { name: '株式会社ゴール', en: 'GOAL', cert: '指定メンテナンスステーション', code: 'GMS' }];

    const groups = [
    {
      no: '01', tag: '主力',
      title: 'カギ・防犯セキュリティー',
      sub: 'Lock & Security',
      desc: '住宅から金庫、マンション共用部のオートロックまで。錠前メーカー3社の正規代行店として、解錠・交換・新規取付から保守点検まで責任を持って対応します。',
      items: [
      '住宅・金庫等の緊急解錠および修理',
      '鍵・スマートロックの交換および新規取付',
      '監視カメラ・インターホン等の通信工事',
      'オートロック・電気錠システムの保守点検']

    },
    {
      no: '02', tag: '主力',
      title: '住宅設備メンテナンス',
      sub: 'Home Maintenance',
      desc: '玄関まわりだけでなく、暮らしの「困った」全般に。サッシ・水漏れ・退去後清掃まで、住まいに関わるトラブルを24時間365日体制でお引き受けします。',
      items: [
      'サッシ・網戸・ペアガラスの修理交換',
      '水漏れ・排水詰まりの24時間緊急対応',
      '建物共用部の定期安全点検・修繕提案',
      '退去後清掃・リフレッシュ工事の受託']

    },
    {
      no: '03', tag: '',
      title: '管理代行アウトソーシング',
      sub: 'Property Outsourcing',
      desc: '不動産管理会社様向けに、入居前点検から巡回・緊急出動まで業務を一括で代行。全国180拠点のネットワークで建物価値の維持向上をご支援します。',
      items: [
      '不動産管理会社向けの入居前点検代行',
      '全国180拠点を活かした巡回点検',
      '24時間365日の受付・緊急出動体制',
      '建物価値向上を目指すコンサル業務']

    }];


    return (
      <div style={{ padding: '40px 40px' }}>
        <div style={{ borderLeft: `4px solid ${palette.red}`, paddingLeft: 14, marginBottom: 24 }}>
          <div style={{ fontSize: 12, color: palette.red, fontWeight: 600, letterSpacing: 1 }}>SERVICES</div>
          <h2 style={{ fontFamily: serif, fontSize: 30, fontWeight: 700, color: palette.navy, margin: 0, marginTop: 4 }}>事業内容</h2>
        </div>

        {/* 3-maker certification strip */}
        <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr 1fr 1fr', gap: 0,
          marginBottom: 32, border: `1px solid ${palette.line}`, background: palette.paper
        }}>
          <div style={{
            background: palette.navy, color: palette.paper, padding: '18px 22px',
            display: 'flex', flexDirection: 'column', justifyContent: 'center'
          }}>
            <div style={{ fontSize: 10, letterSpacing: 2, opacity: .7 }}>AUTHORIZED</div>
            <div style={{ fontFamily: serif, fontSize: 16, fontWeight: 700, marginTop: 4, lineHeight: 1.3 }}>3メーカー<br />指定代行店</div>
          </div>
          {makers.map((m, i) =>
          <div key={i} style={{
            padding: '18px 22px',
            borderLeft: `1px solid ${palette.line}`,
            display: 'flex', flexDirection: 'column', justifyContent: 'center'
          }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
                <span style={{
                  background: palette.red, color: '#fff', fontSize: 11, fontWeight: 700,
                  padding: '3px 10px', letterSpacing: 1
                }}>{m.code}</span>
                <span style={{ fontSize: 10, color: palette.fgMute, letterSpacing: 1 }}>{m.en}</span>
              </div>
              <div style={{ fontFamily: serif, fontSize: 15, fontWeight: 700, color: palette.navy, lineHeight: 1.4 }}>{m.name}</div>
              <div style={{ fontSize: 11, color: palette.fgMute, marginTop: 4 }}>{m.cert}</div>
            </div>
          )}
        </div>

        {/* 3 service categories */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {groups.map((g) =>
          <div key={g.no} style={{
            background: palette.paper, border: `1px solid ${palette.line}`,
            borderTop: `4px solid ${palette.navy}`, padding: '22px 22px 24px',
            display: 'flex', flexDirection: 'column'
          }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 14 }}>
                <div style={{ fontFamily: serif, fontSize: 30, fontWeight: 700, color: palette.navy, lineHeight: 1 }}>0{g.no.slice(-1)}</div>
                {g.tag && <span style={{
                fontSize: 10, color: '#fff', background: palette.red,
                padding: '3px 10px', fontWeight: 700, letterSpacing: 1
              }}>{g.tag}</span>}
              </div>
              <div style={{ fontSize: 11, color: palette.red, fontWeight: 700, letterSpacing: 2, marginBottom: 4 }}>{g.sub.toUpperCase()}</div>
              <div style={{ fontFamily: serif, fontSize: 19, fontWeight: 700, color: palette.navy, marginBottom: 12, lineHeight: 1.4 }}>{g.title}</div>
              <div style={{ fontSize: 12, lineHeight: 1.85, color: palette.fgMute, marginBottom: 16 }}>{g.desc}</div>
              <ul style={{ margin: 0, padding: 0, listStyle: 'none', borderTop: `1px solid ${palette.line}` }}>
                {g.items.map((it, j) =>
              <li key={j} style={{
                display: 'grid', gridTemplateColumns: '22px 1fr', gap: 4, alignItems: 'baseline',
                padding: '10px 0', borderBottom: `1px solid ${palette.line}`,
                fontSize: 12.5, lineHeight: 1.55, color: palette.fg
              }}>
                    <span style={{ fontSize: 10, color: palette.red, fontWeight: 700, letterSpacing: 1 }}>0{j + 1}</span>
                    <span>{it}</span>
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>

        {/* CTA strip */}
        <div style={{
          marginTop: 24, padding: '18px 24px', background: palette.navy, color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 18
        }}>
          <div style={{ fontSize: 14, fontWeight: 500 }}>
            <span style={{ color: 'rgba(255,255,255,.65)', fontSize: 12, marginRight: 12 }}>● 24時間365日 緊急対応</span>
            まずはお気軽にご相談ください。お見積りは無料です。
          </div>
          <button onClick={() => setPage('contact')} style={{
            background: palette.red, color: '#fff', border: 'none', padding: '12px 24px',
            fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: sans
          }}>お問い合わせ ▶</button>
        </div>
      </div>);

  };

  // ── Works ───────────────────────────────────────────
  const Works = () =>
  <div style={{ padding: '40px 40px' }}>
      <div style={{ borderLeft: `4px solid ${palette.red}`, paddingLeft: 14, marginBottom: 28 }}>
        <div style={{ fontSize: 12, color: palette.red, fontWeight: 600, letterSpacing: 1 }}>WORKS</div>
        <h2 style={{ fontFamily: serif, fontSize: 30, fontWeight: 700, color: palette.navy, margin: 0, marginTop: 4 }}>実績・取引先</h2>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 32 }}>
        {[
      ['3,000件', '月間 対応件数'],
      ['180拠点', '全国パートナー'],
      ['平成14年', '創業']].
      map(([n, l]) =>
      <div key={l} style={{ background: palette.navy, color: '#fff', padding: '22px 24px', textAlign: 'left' }}>
            <div style={{ fontFamily: serif, fontSize: 34, fontWeight: 700, color: palette.paper, lineHeight: 1 }}>{n}</div>
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,.75)', marginTop: 8, letterSpacing: 1 }}>{l}</div>
          </div>
      )}
      </div>

      <div style={{ borderLeft: `3px solid ${palette.navy}`, paddingLeft: 12, marginBottom: 16, fontFamily: serif, fontWeight: 700, fontSize: 18, color: palette.navy }}>加盟・特約・協力店</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, marginBottom: 28 }}>
        {CONTENT.partners.map((p, i) =>
      <div key={i} style={{
        background: palette.paper, border: `1px solid ${palette.line}`,
        padding: '16px 18px', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 14, alignItems: 'center'
      }}>
            <span style={{
          fontSize: 10, color: '#fff', background: palette.red, padding: '4px 10px',
          fontWeight: 700, letterSpacing: 1, whiteSpace: 'nowrap'
        }}>{p.cat}</span>
            <div>
              <div style={{ fontFamily: serif, fontSize: 15, fontWeight: 700, color: palette.navy }}>{p.name}</div>
              <div style={{ fontSize: 11.5, color: palette.fgMute, marginTop: 2 }}>{p.spec}</div>
            </div>
          </div>
      )}
      </div>

      <div style={{ borderLeft: `3px solid ${palette.navy}`, paddingLeft: 12, marginBottom: 16, fontFamily: serif, fontWeight: 700, fontSize: 18, color: palette.navy }}>主要取引先（順不同）</div>
      <div style={{ background: palette.paper, border: `1px solid ${palette.line}`, padding: '20px 24px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '10px 24px', fontSize: 12.5, color: palette.fg, lineHeight: 1.6 }}>
          {CONTENT.clients.map((c, i) =>
        <div key={i} style={{ display: 'flex', gap: 8 }}>
              <span style={{ color: palette.red, fontWeight: 700 }}>·</span>
              <span>{c}</span>
            </div>
        )}
        </div>
      </div>
    </div>;


  // ── Company ─────────────────────────────────────────
  const Company = () =>
  <div style={{ padding: '40px 40px' }}>
      <div style={{ borderLeft: `4px solid ${palette.red}`, paddingLeft: 14, marginBottom: 28 }}>
        <div style={{ fontSize: 12, color: palette.red, fontWeight: 600, letterSpacing: 1 }}>COMPANY</div>
        <h2 style={{ fontFamily: serif, fontSize: 30, fontWeight: 700, color: palette.navy, margin: 0, marginTop: 4 }}>会社案内</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 32 }}>
        <div>
          <PH label="会社外観 / 西荻窪 本社" ratio="4/5" accent={palette.red} />
          <div style={{ marginTop: 16, padding: 18, background: palette.paper, border: `1px solid ${palette.line}` }}>
            <div style={{ fontFamily: serif, fontSize: 16, fontWeight: 700, color: palette.navy, marginBottom: 8 }}>アクセス</div>
            <div style={{ fontSize: 12, lineHeight: 1.9, color: palette.fgMute }}>
              {CONTENT.company.access}
            </div>
          </div>
        </div>
        <table style={{ borderCollapse: 'collapse', width: '100%', fontSize: 13 }}>
          <tbody>
            {[
          ['商号', CONTENT.company.name],
          ['英名表記', CONTENT.company.nameEn],
          ['所在地', CONTENT.company.addr],
          ['電話番号', CONTENT.company.tel],
          ['Email', CONTENT.company.email],
          ['創業', CONTENT.company.estd],
          ['代表取締役', CONTENT.company.rep],
          ['グループ会社', CONTENT.company.group],
          ['事業内容', CONTENT.company.biz]].
          map(([k, v], i) =>
          <tr key={i} style={{ borderBottom: `1px solid ${palette.line}` }}>
                <th style={{
              textAlign: 'left', padding: '14px 16px', width: 130,
              background: palette.navy, color: palette.paper, fontFamily: serif,
              fontWeight: 600, fontSize: 13, verticalAlign: 'top'
            }}>{k}</th>
                <td style={{ padding: '14px 18px', background: palette.paper, lineHeight: 1.8 }}>{v}</td>
              </tr>
          )}
          </tbody>
        </table>
      </div>
    </div>;


  // ── Contact ─────────────────────────────────────────
  const Contact = () => {
    const [sent, setSent] = useState(false);
    const inp = {
      width: '100%', background: '#fff', border: `1px solid ${palette.line}`, color: palette.fg,
      padding: '12px 14px', fontFamily: sans, fontSize: 14, outline: 'none'
    };
    const Lbl = ({ children, req }) =>
    <div style={{ fontSize: 13, fontWeight: 600, color: palette.navy, marginBottom: 6, display: 'flex', alignItems: 'center', gap: 8 }}>
        {children}
        {req && <span style={{ background: palette.red, color: '#fff', fontSize: 10, padding: '1px 6px', fontWeight: 700 }}>必須</span>}
      </div>;

    return (
      <div style={{ padding: '40px 40px' }}>
        <div style={{ borderLeft: `4px solid ${palette.red}`, paddingLeft: 14, marginBottom: 28 }}>
          <div style={{ fontSize: 12, color: palette.red, fontWeight: 600, letterSpacing: 1 }}>CONTACT</div>
          <h2 style={{ fontFamily: serif, fontSize: 30, fontWeight: 700, color: palette.navy, margin: 0, marginTop: 4 }}>お問い合わせ</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 28 }}>
          <div>
            <div style={{ background: palette.navy, color: '#fff', padding: 24 }}>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,.7)', letterSpacing: 2, marginBottom: 8 }}>お電話でのお問合せ</div>
              <div style={{ fontFamily: serif, fontSize: 30, fontWeight: 700, marginBottom: 8 }}>{CONTENT.company.tel}</div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,.7)' }}>24時間365日 対応</div>
              <div style={{ height: 1, background: 'rgba(255,255,255,.18)', margin: '16px 0' }} />
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,.7)', letterSpacing: 2, marginBottom: 6 }}>メール</div>
              <div style={{ fontFamily: serif, fontSize: 14, fontWeight: 600, wordBreak: 'break-all' }}>{CONTENT.company.email}</div>
              <div style={{ height: 1, background: 'rgba(255,255,255,.18)', margin: '16px 0' }} />
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,.85)', lineHeight: 1.8 }}>
                {CONTENT.company.addr}<br />
                <span style={{ color: 'rgba(255,255,255,.65)', fontSize: 11 }}>{CONTENT.company.access}</span>
              </div>
            </div>
            <div style={{ marginTop: 14, padding: 16, border: `1px solid ${palette.line}`, background: palette.paper, fontSize: 12, lineHeight: 1.85, color: palette.fgMute }}>
              ※ ご相談・お見積りは無料です。<br />
              ※ 2営業日以内にご返信いたします。
            </div>
          </div>
          <form onSubmit={(e) => {e.preventDefault();setSent(true);}}
          style={{ background: palette.paper, border: `1px solid ${palette.line}`, padding: 24 }}>
            {!sent ?
            <div style={{ display: 'grid', gap: 18 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <label><Lbl req>お名前</Lbl><input style={inp} /></label>
                  <label><Lbl>会社名</Lbl><input style={inp} /></label>
                  <label><Lbl req>お電話番号</Lbl><input style={inp} /></label>
                  <label><Lbl req>メールアドレス</Lbl><input type="email" style={inp} /></label>
                </div>
                <label><Lbl>お問い合わせ内容</Lbl><select style={inp}>
                  <option>サービスについて</option>
                  <option>カギ・防犯セキュリティー</option>
                  <option>住宅設備メンテナンス</option>
                  <option>管理代行アウトソーシング</option>
                  <option>提携・パートナーシップ</option>
                  <option>その他</option>
                </select></label>
                <label><Lbl req>ご相談内容</Lbl><textarea rows={4} style={{ ...inp, resize: 'none' }} /></label>
                <button type="submit" style={{
                marginTop: 4, background: palette.red, color: '#fff', border: 'none',
                padding: '14px 28px', fontSize: 15, fontWeight: 700, cursor: 'pointer',
                fontFamily: sans, justifySelf: 'start'
              }}>上記内容で送信する ▶</button>
              </div> :

            <div style={{ padding: '40px 0', textAlign: 'center' }}>
                <div style={{ fontFamily: serif, fontSize: 24, fontWeight: 700, color: palette.navy, marginBottom: 10 }}>送信が完了しました</div>
                <div style={{ fontSize: 13, color: palette.fgMute }}>2営業日以内に担当よりご連絡いたします。</div>
              </div>
            }
          </form>
        </div>
      </div>);

  };

  return (
    <div style={wrap}>
      <Nav />
      <div key={page} style={{ animation: 'fade .35s ease' }}>
        {page === 'home' && <Home />}
        {page === 'service' && <Service />}
        {page === 'works' && <Works />}
        {page === 'company' && <Company />}
        {page === 'contact' && <Contact />}
      </div>
    </div>);

}

Object.assign(window, { LuxuryVariant, ModernVariant, SolidVariant });