// Skrrs portal — Property detail (best-in-class commercial real-estate page).
// Rich data is synthesized from the property's base fields + type defaults via pInfo(p),
// so every sample property renders a complete page without bloating data.jsx.
const { Button: DBtn, Badge: DBadge, IconButton: DIconBtn, Tag: DTag, Avatar: DAvatar } = window.SkrrsDesignSystem_6013e8;

// ── derive a full property dossier from base fields ─────────
const TSUBO_TO_SQM = 3.305785;
const yen = (n) => '¥' + Math.round(n).toLocaleString('ja-JP');
function pInfo(p) {
  // ── CMS実データ優先 → 無ければ従来の自動既定（基本項目だけでも完全描画）──
  // 実写真を持つ物件（ATBB転載など）は実在の募集広告。自動既定での補完は
  // 事実と異なる表示（虚偽広告）になり得るため、実物件では一切行わない。
  const isReal = Array.isArray(p.images) && p.images.length > 0;
  const unit = (p.rentNum > 0 ? p.rentNum : parseInt(String(p.rent).replace(/[^0-9]/g, ''), 10)) || 0;   // 坪単価
  const tsubo = (p.sizeNum > 0 ? p.sizeNum : parseFloat(p.size)) || 0;
  const sqm = tsubo * TSUBO_TO_SQM;
  const kyoeki = (p.mgmtFeeTsubo > 0) ? p.mgmtFeeTsubo : (isReal ? 0 : Math.round(unit * 0.13 / 100) * 100);  // 共益費/坪（実物件は資料に無ければ0＝総額に乗せない）
  const monthly = unit * tsubo;
  const monthlyTotal = (unit + kyoeki) * tsubo;

  const typeDefaults = {
    office:     { struct:'SRC造',     scale:'地上12階 地下1階', floor:'4階／12階', ceiling:'2.7m', built:'2019年3月', parking:'有（月額 応相談）', reform:'2023年 共用部リニューアル' },
    retail:     { struct:'RC造',      scale:'地上5階',          floor:'1階（路面）', ceiling:'3.2m', built:'2016年9月', parking:'無',                reform:'居抜き区画' },
    rnd:        { struct:'RC造',      scale:'地上6階',          floor:'2階／6階',  ceiling:'2.8m', built:'2015年4月', parking:'有（近隣提携）',     reform:'2022年 内装更新' },
    industrial: { struct:'S造',       scale:'平屋',             floor:'1階',       ceiling:'5.5m', built:'2012年6月', parking:'有（大型車可）',     reform:'—' },
    datacenter: { struct:'S造',       scale:'地上2階',          floor:'1〜2階',    ceiling:'6.0m', built:'2010年8月', parking:'有（大型車可）',     reform:'2021年 電力設備増設' },
  };
  const d0 = isReal
    ? { struct:'', scale:'', floor:'', ceiling:'', built:'', parking:'', reform:'' }   // 実物件：無い項目は行ごと非表示
    : (typeDefaults[p.type] || typeDefaults.office);
  // CMSに登録があれば各項目を実データで上書き
  const d = {
    struct:  p.structure     || d0.struct,
    scale:   p.buildingScale || d0.scale,
    floor:   p.floorTxt      || d0.floor,
    ceiling: p.ceiling       || d0.ceiling,
    built:   p.builtYM       || d0.built,
    parking: p.parkingTxt    || d0.parking,
    reform:  p.renovation    || d0.reform,
  };

  // facilities by type — only positive (available) ones are shown as chips
  const facByType = {
    office:     [['個別空調','snow'],['OAフロア','grid'],['24時間利用可','clock'],['機械警備','shield'],['光ファイバー','wifi'],['エレベーター','building'],['男女別トイレ','droplet'],['1階エントランス','store']],
    retail:     [['路面店','store'],['居抜き可','key'],['看板設置可','maximize'],['給排水あり','droplet'],['深夜営業可','clock'],['物販・飲食可','briefcase'],['前面歩道広め','pin'],['空調完備','snow']],
    rnd:        [['防音仕様','shield'],['給排水あり','droplet'],['24時間利用可','clock'],['エレベーター','building'],['バリアフリー','users'],['個別空調','snow'],['看板設置可','maximize'],['Wi-Fi対応','wifi']],
    industrial: [['前面道路広め','car'],['トラックバース','car'],['高床式','maximize'],['床荷重 強化','layers'],['24時間搬入可','clock'],['大型車駐車可','car'],['動力電源','zap'],['防火区画','shield']],
    datacenter: [['電力増設可','zap'],['重量物対応','layers'],['動力電源','zap'],['高天井','maximize'],['換気・排煙設備','snow'],['24時間稼働可','clock'],['大型車搬入可','car'],['耐震構造','shield']],
  };
  // CMSの設備リスト（文字列配列）があれば優先し、キーワードからアイコンを推定
  const facIcon = (t) =>
    /空調|冷暖/.test(t) ? 'snow' : /電力|動力|電源/.test(t) ? 'zap' : /駐車|車|バース|搬入/.test(t) ? 'car' :
    /24時間|深夜|時間/.test(t) ? 'clock' : /警備|防火|防音|耐震|セキュリ/.test(t) ? 'shield' :
    /エレベ|ビル|階/.test(t) ? 'building' : /水|トイレ|排水/.test(t) ? 'droplet' : /ネット|光|Wi-?Fi|WiFi/.test(t) ? 'wifi' :
    /看板|天井|高床|広/.test(t) ? 'maximize' : /床|荷重|重量/.test(t) ? 'layers' : /居抜き|鍵/.test(t) ? 'key' : 'check';
  const facilities = (Array.isArray(p.facilities) && p.facilities.length)
    ? p.facilities.map(t => [t, facIcon(t)])
    : (isReal ? [] : (facByType[p.type] || facByType.office));

  // access — 実物件は資料記載の1行のみ。デモのみ汎用の補足行を付ける
  const access = isReal ? [p.access] : [p.access, '複数路線が利用可能（最寄り3駅圏）', '高速IC・幹線道路へのアクセス良好'];

  // staff comment — type-aware, trust-building
  const commentByType = {
    office:     `${p.area}エリアの中でも視認性と交通利便性に優れた区画です。共用部はリニューアル済みで、来客の多い企業様にも安心してお使いいただけます。分割・レイアウト変更のご相談も承ります。`,
    retail:     `駅至近で人通りが多く、視認性の高い路面区画です。居抜き設備を活かせば初期費用を抑えた出店が可能です。業種可否・看板条件など、オーナー様との交渉もお任せください。`,
    rnd:        `スクール・教室運営に適した静かな立地で、駅からのアクセスも良好です。給排水・防音などの設備条件もご相談に応じて調整可能。開校スケジュールに合わせた契約交渉を支援します。`,
    industrial: `前面道路が広く、トラックの取り回しがしやすい実用的な区画です。床荷重・天井高も確保されており、保管〜出荷の動線を効率化できます。用途・搬入条件はお気軽にご相談ください。`,
    datacenter: `電力増設に対応した軽工業・データ用途向けの区画です。重量物対応・動力電源を備え、設備投資の自由度が高い物件です。電力・冷却・搬入要件を踏まえた最適なご提案をいたします。`,
  };
  // 実物件でコメント未登録なら空＝セクション非表示（型文のセールストークは実物件には出さない）
  const comment = p.staffComment || (isReal ? '' : (commentByType[p.type] || commentByType.office));

  const depositMonths = (p.depositMonths > 0) ? p.depositMonths : (isReal ? 0 : (p.type==='office'?12:p.type==='retail'?10:6));
  const keyMoney = (p.keyMoneyMonths >= 0) ? (p.keyMoneyMonths === 0 ? '無' : `賃料 ${p.keyMoneyMonths}ヶ月分`)
                                           : (isReal ? '—' : (p.zeroCommission ? '無' : '賃料 1ヶ月分'));
  const moveIn = p.moveIn || (isReal ? '相談' : '即時入居可');

  return {
    unit, tsubo, sqm, kyoeki, monthly, monthlyTotal, ...d, facilities, access, comment, moveIn, isReal,
    rentRows: [
      ['賃料（坪単価）', `${yen(unit)} / 坪`, true],
      ['共益費（坪単価）', kyoeki > 0 ? `${yen(kyoeki)} / 坪` : '—', false],
      ['月額賃料（目安）', `${yen(monthly)} / 月`, false],
      ['月額総額（目安）', `${yen(monthlyTotal)} / 月`, true],
      ['敷金 / 保証金', depositMonths > 0 ? `賃料 ${depositMonths} ヶ月分` : '—', false],
      ['礼金', keyMoney, false],
      ['更新料', p.renewalFee || (isReal ? '—' : '新賃料 1ヶ月分'), false],
      ['契約形態', p.contractType || (isReal ? '—' : '定期借家契約（5年）'), false],
      ['入居時期', moveIn, false],
      ['仲介手数料', p.zeroCommission ? '0円（無料）' : '賃料 1ヶ月分＋税', false],
    ],
    // 値が無い行は表示しない。事業用不動産の広告では、空欄より
    // 「実際とは違う値が入っていること」のほうが重大な問題になる。
    buildingRows: [
      ['物件名', p.name],
      ['所在地', p.area],
      ['交通', p.access],
      ['物件種別', p.typeLabel],
      ['募集階', d.floor],
      ['専有面積', `${tsubo.toFixed(1)}坪（${sqm.toFixed(2)}㎡）`],
      ['構造', d.struct],
      ['規模', d.scale],
      ['天井高', d.ceiling],
      // ▼ 事業用で判断を左右する項目。物件データに入れると自動で表示される。
      ['用途地域', p.zoning],
      ['受電容量', p.power],
      ['床荷重', p.floorLoad],
      ['消防設備', p.fire],
      ['看板・サイン', p.signage],
      ['引渡し状態', p.handover],
      ['利用時間', p.hours],
      // ▲
      ['築年月', d.built],
      ['リニューアル', d.reform],
      ['駐車場', d.parking],
      // 耐震基準は建物ごとに異なる。固定値で「適合」と出すと虚偽表示になりうるため、
      // 物件データ(p.seismic)に入力があるときだけ表示する。
      ['耐震基準', p.seismic],
      ['取引態様', p.dealType || '媒介（仲介）'],
      // 表示規約対応：情報公開日（ATBB転載物件は取込時に自動セット・空なら非表示）
      ['情報公開日', p.infoOpened],
    ].filter(([, v]) => v != null && v !== ''),
  };
}

// ── small section heading with accent bar ───────────────────
function THLabel({ text }) {
  const m = typeof text === 'string' && text.match(/^(.*?)\s*([(（][^)）]*[)）])\s*$/);
  if (!m) return text;
  return (
    <React.Fragment>
      {m[1]}
      <span style={{ font:'var(--fw-regular) 0.6875rem/1.3 var(--font-body)', color:'var(--text-faint)', marginLeft:1 }}>{m[2]}</span>
    </React.Fragment>
  );
}

function SecHead({ children, sub }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:5, marginBottom:'var(--sp-4)' }}>
      <div style={{ display:'flex', alignItems:'center', gap:10 }}>
        <span style={{ width:4, height:18, borderRadius:2, background:'var(--blue-600)' }} />
        <h2 style={{ margin:0, font:'700 var(--t-h4)/1.2 var(--font-display)', color:'var(--text-strong)' }}>{children}</h2>
      </div>
      {sub && <span style={{ font:'var(--fw-regular) var(--t-2xs)/1.5 var(--font-body)', color:'var(--text-muted)', paddingLeft:14 }}>{sub}</span>}
    </div>
  );
}

function DetailScreen({ property, saved, onToggleSave, onBack, onNav, onOpen }) {
  const D = window.SKRRS_DATA;
  const p = property || D.properties[0];
  const { isMobile } = window.useViewport();
  const [shot, setShot] = React.useState(0);
  const isSaved = !!saved[p.id];
  const I = window.SKRRS_IMG;
  React.useEffect(() => { setShot(0); }, [p.id]);

  const info = pInfo(p);

  // categorized gallery — CMSでアップロードされた実画像があればそれを表示（先頭=メイン）
  const gallery = (Array.isArray(p.images) && p.images.length)
    ? p.images.map((src, i) => ({ src, cat: i === 0 ? 'メイン' : `写真${i + 1}` }))
    : [
      { src: p.img,        cat: '内観' },
      { src: I.cityTowers, cat: '外観' },
      { src: I.floorPlan,  cat: '間取図' },
      { src: (p.type === 'industrial' || p.type === 'datacenter') ? I.warehouseInspect : I.negotiation, cat: p.type === 'industrial' || p.type === 'datacenter' ? '庫内' : 'エントランス' },
      { src: I.officeReport, cat: '共用部' },
    ];
  const related = D.properties.filter(x => x.id !== p.id && x.type === p.type).slice(0, isMobile ? 2 : 3);
  // ── このビルのその他の区画 ──
  // 実物件：同一ビル名＋同一住所で実際に登録されている別区画だけを表示（クリックでその区画へ）。
  // デモ：従来の合成サンプル（実物件では合成は出さない）。
  const sameBldg = (info.isReal && p.bldgName)
    ? D.properties.filter(x => x.id !== p.id && x.bldgName === p.bldgName && x.area === p.area)
    : [];
  const otherFloors = info.isReal
    ? sameBldg.map(x => {
        const xi = pInfo(x);
        return { floor: x.floorTxt || x.name.replace(p.bldgName, '').trim() || '—',
          tsubo: xi.tsubo.toFixed(2), sqm: xi.sqm.toFixed(1), unit: xi.unit,
          monthly: Math.round((xi.unit + xi.kyoeki) * xi.tsubo),
          deposit: x.depositMonths > 0 ? `${x.depositMonths}ヶ月` : '—',
          moveIn: xi.moveIn === '即時入居可' ? '即時' : xi.moveIn, status: '募集中', prop: x };
      })
    : [
    { floor: '3階', tsubo: (info.tsubo * 1.0).toFixed(2), sqm: (info.tsubo * 1.0 * TSUBO_TO_SQM).toFixed(1), unit: info.unit, monthly: Math.round(info.unit * info.tsubo * 1.0 * 1.13), deposit: '12ヶ月', moveIn: '即時', status: '募集中' },
    { floor: '6階', tsubo: (info.tsubo * 0.7).toFixed(2), sqm: (info.tsubo * 0.7 * TSUBO_TO_SQM).toFixed(1), unit: Math.round(info.unit * 1.03), monthly: Math.round(info.unit * 1.03 * info.tsubo * 0.7 * 1.13), deposit: '12ヶ月', moveIn: '2026年7月予定', status: '募集中' },
    { floor: '8階', tsubo: (info.tsubo * 1.4).toFixed(2), sqm: (info.tsubo * 1.4 * TSUBO_TO_SQM).toFixed(1), unit: Math.round(info.unit * 1.06), monthly: Math.round(info.unit * 1.06 * info.tsubo * 1.4 * 1.13), deposit: '12ヶ月', moveIn: '相談', status: '申込あり' },
  ];
  // 区画クリック：実物件はその区画の詳細ページへ、デモは問い合わせへ
  const openFloor = (f) => f.prop ? onOpen(f.prop) : onNav('contact', p);
  const floorUse = p.type === 'office' ? ['事務所', 'SOHO', 'R&D対応']
    : p.type === 'retail' ? ['店舗', '物販', '飲食可']
    : p.type === 'rnd' ? ['教室', 'スクール', 'オフィス']
    : p.type === 'industrial' ? ['倉庫', '物流', 'BTS対応']
    : p.type === 'datacenter' ? ['工場', '製造', '電力増設可']
    : ['事務所', 'ラボ', 'R&D対応'];

  // ── key-figures strip ──
  const KeyFigures = (
    <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)',
      border:'1px solid var(--border-subtle)', borderRadius:'var(--r-lg)', overflow:'hidden', background:'var(--surface)' }}>
      {[
        { icon:'building', label:'賃料（坪単価）', value: yen(info.unit), unit:'/坪' },
        { icon:'doc',      label:'月額総額（目安）', value: yen(info.monthlyTotal), unit:'/月' },
        { icon:'ruler',    label:'専有面積', value: info.tsubo.toFixed(1)+'坪', unit: info.sqm.toFixed(1)+'㎡' },
        { icon:'calendar', label:'入居時期', value: info.moveIn === '即時入居可' ? '即時' : info.moveIn, unit: info.moveIn === '即時入居可' ? '入居可' : '' },
      ].map((k, i) => (
        <div key={k.label} style={{ padding: isMobile ? 'var(--sp-3) var(--sp-4)' : 'var(--sp-5)',
          borderRight: (!isMobile && i < 3) ? '1px solid var(--border-subtle)' : 'none',
          borderBottom: (isMobile && i < 2) ? '1px solid var(--border-subtle)' : 'none',
          borderRight2: 'none', display:'flex', flexDirection:'column', gap:6,
          ...(isMobile && i % 2 === 0 ? { borderRight:'1px solid var(--border-subtle)' } : {}) }}>
          <span style={{ display:'inline-flex', alignItems:'center', gap:6, font:'var(--fw-medium) var(--t-2xs)/1 var(--font-body)', color:'var(--text-muted)' }}>
            <window.Icon name={k.icon} size={13} stroke={1.6} style={{ color:'var(--blue-500)' }} />{k.label}
          </span>
          <span style={{ display:'flex', alignItems:'baseline', gap:5 }}>
            <span style={{ font:`700 ${isMobile ? '1.1rem' : '1.3rem'}/1 var(--font-num)`, color:'var(--blue-900)' }}>{k.value}</span>
            <span style={{ font:'var(--fw-medium) 0.625rem/1 var(--font-num)', color:'var(--text-muted)' }}>{k.unit}</span>
          </span>
        </div>
      ))}
    </div>
  );

  // ── sticky inquiry rail ──
  const InquiryRail = (
    <div style={{ display:'flex', flexDirection:'column', gap:'var(--sp-4)' }}>
      <div style={{ background:'var(--surface)', border:'1px solid var(--border-subtle)',
        borderRadius:'var(--r-lg)', boxShadow:'var(--shadow-md)', padding:'var(--sp-6)', display:'flex', flexDirection:'column', gap:16 }}>
        <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
          <span style={{ font:'var(--fw-medium) var(--t-xs)/1 var(--font-body)', color:'var(--text-muted)' }}>月額総額（目安）</span>
          <span style={{ display:'flex', alignItems:'baseline', gap:6 }}>
            <span style={{ font:'700 1.9rem/1 var(--font-num)', color:'var(--blue-900)' }}>{yen(info.monthlyTotal)}</span>
            <span style={{ font:'var(--fw-medium) var(--t-xs)/1 var(--font-num)', color:'var(--text-muted)' }}>/月</span>
          </span>
          <span style={{ font:'var(--fw-regular) var(--t-2xs)/1.5 var(--font-num)', color:'var(--text-muted)' }}>
            賃料 {yen(info.unit)}/坪 ＋ 共益費 {yen(info.kyoeki)}/坪 ・ {info.tsubo.toFixed(1)}坪
          </span>
        </div>
        {p.zeroCommission && (
          <div style={{ display:'flex', alignItems:'center', gap:8, padding:'8px 12px', borderRadius:'var(--r-sm)', background:'var(--blue-50)' }}>
            <window.Icon name="check" size={15} stroke={2.6} style={{ color:'var(--blue-600)' }} />
            <span style={{ font:'var(--fw-bold) var(--t-xs)/1.3 var(--font-body)', color:'var(--blue-800)' }}>仲介手数料 0円 対象物件</span>
          </div>
        )}
        <div style={{ height:1, background:'var(--border-subtle)' }} />
        <DBtn variant="primary" full size="lg" pill iconLeft={<window.Icon name="mail" size={18} />} onClick={() => onNav('contact', p)}>この物件を相談する</DBtn>
        <DBtn variant="secondary" full iconLeft={<window.Icon name="doc" size={16} />} onClick={() => onNav('contact', p)}>資料請求</DBtn>
        <DBtn variant={isSaved ? 'primary' : 'ghost'} full iconLeft={<window.Icon name="heart" size={16} fill={isSaved ? 'currentColor' : 'none'} />}
          onClick={() => onToggleSave(p.id)}>{isSaved ? 'お気に入り登録済み' : 'お気に入りに追加'}</DBtn>
        <div style={{ display:'flex', flexDirection:'column', gap:6, alignItems:'center', paddingTop:2 }}>
          <span style={{ font:'var(--fw-medium) var(--t-2xs)/1 var(--font-body)', color:'var(--text-muted)' }}>お電話でのご相談（物件番号: SK-{String(p.id).toUpperCase()}）</span>
          <a href="tel:0359377544" style={{ display:'inline-flex', alignItems:'center', gap:7, color:'var(--blue-900)', textDecoration:'none' }}>
            <window.Icon name="phone" size={17} /><span style={{ font:'700 1.3rem/1 var(--font-num)' }}>03-5937-7544</span>
          </a>
          <span style={{ font:'var(--fw-regular) 0.625rem/1 var(--font-body)', color:'var(--text-faint)' }}>営業時間／平日 10:00〜18:00</span>
        </div>
      </div>

      {/* agent card */}
      <div style={{ background:'var(--blue-50)', border:'1px solid var(--blue-100)', borderRadius:'var(--r-md)', padding:'var(--sp-4)', display:'flex', gap:12, alignItems:'center' }}>
        <DAvatar name="担当" tone="navy" size={44} />
        <div style={{ display:'flex', flexDirection:'column', gap:2 }}>
          <span style={{ font:'var(--fw-medium) var(--t-2xs)/1 var(--font-body)', color:'var(--text-muted)' }}>担当エージェント</span>
          <span style={{ font:'var(--fw-bold) var(--t-sm)/1.3 var(--font-body)', color:'var(--text-strong)' }}>Skrrs {p.ward}担当チーム</span>
        </div>
      </div>

      {/* trust badges */}
      <div style={{ display:'flex', flexDirection:'column', gap:10, padding:'var(--sp-4)', border:'1px solid var(--border-subtle)', borderRadius:'var(--r-md)', background:'var(--surface)' }}>
        {[['shield','契約前に、法令・用途のリスクを確認'],['sparkles','お問い合わせには、その日のうちに一次回答'],['key','Webに出ていない物件からもご提案']].map(([ic, t]) => (
          <span key={t} style={{ display:'flex', alignItems:'center', gap:10, font:'var(--fw-medium) var(--t-xs)/1.4 var(--font-body)', color:'var(--text-body)' }}>
            <span style={{ display:'grid', placeItems:'center', width:26, height:26, borderRadius:'var(--r-pill)', background:'var(--blue-50)', color:'var(--blue-600)', flex:'none' }}><window.Icon name={ic} size={14} /></span>{t}
          </span>
        ))}
      </div>
    </div>
  );

  return (
    <main style={{ background:'var(--bg-page)' }}>
      <window.Container style={{ paddingTop:'var(--sp-6)', paddingBottom: isMobile ? 'var(--sp-16)' : 'var(--sp-20)' }}>
        {/* 下書きプレビュー帯（管理者プレビューでのみ p.draft が立つ） */}
        {p.draft && (
          <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:16, padding:'10px 16px', borderRadius:'var(--r-md)',
            background:'#FBF2DC', border:'1px solid #E8CF96', color:'#7A5A0E', font:'var(--fw-bold) var(--t-xs)/1.5 var(--font-body)' }}>
            <window.Icon name="eye" size={15} />下書きプレビュー — この物件はまだサイトに公開されていません（管理者にのみ表示中）
          </div>
        )}
        {/* breadcrumb */}
        <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:18, flexWrap:'wrap',
          font:'var(--fw-regular) var(--t-xs)/1 var(--font-body)', color:'var(--text-muted)' }}>
          <span style={{ cursor:'pointer' }} onClick={() => onNav('home')}>ホーム</span><window.Icon name="chevR" size={12} />
          <span style={{ cursor:'pointer' }} onClick={onBack}>賃貸物件検索</span><window.Icon name="chevR" size={12} />
          <span style={{ cursor:'pointer' }} onClick={onBack}>{p.typeLabel}</span><window.Icon name="chevR" size={12} />
          <span style={{ color:'var(--text-body)', overflow:'hidden', whiteSpace:'nowrap', textOverflow:'ellipsis', maxWidth:isMobile?180:420 }}>{p.name}</span>
        </div>

        {/* title row */}
        <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:20, marginBottom:'var(--sp-6)' }}>
          <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
            <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>
              <DBadge tone={p.type}>{p.typeLabel}</DBadge>
              {p.isNew && <DBadge tone="info" solid>NEW</DBadge>}
              {p.zeroCommission && <DBadge tone="promo">仲介手数料0円</DBadge>}
              <span style={{ font:'var(--fw-regular) var(--t-2xs)/1 var(--font-num)', color:'var(--text-faint)' }}>物件番号: SK-{String(p.id).toUpperCase()}</span>
            </div>
            <h1 style={{ margin:0, font:'700 var(--t-h1)/1.3 var(--font-display)', color:'var(--text-strong)' }}>{p.name}</h1>
            <div style={{ display:'flex', alignItems:'center', gap:16, flexWrap:'wrap' }}>
              <span style={{ display:'inline-flex', alignItems:'center', gap:6, font:'var(--fw-regular) var(--t-sm)/1 var(--font-body)', color:'var(--text-muted)' }}>
                <window.Icon name="pin" size={15} />{p.area}
              </span>
              <span style={{ display:'inline-flex', alignItems:'center', gap:6, font:'var(--fw-regular) var(--t-sm)/1 var(--font-body)', color:'var(--text-muted)' }}>
                <window.Icon name="train" size={15} />{p.access}
              </span>
            </div>
          </div>
          <DIconBtn label="お気に入り" variant="fav" size="lg" active={isSaved} onClick={() => onToggleSave(p.id)}>
            <window.Icon name="heart" size={20} fill={isSaved ? 'currentColor' : 'none'} />
          </DIconBtn>
        </div>

        <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 340px', gap:'var(--sp-8)', alignItems:'start' }}>
          {/* ── LEFT column ── */}
          <div style={{ display:'flex', flexDirection:'column', gap:'var(--sp-6)' }}>
            {/* gallery */}
            <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
              <div style={{ position:'relative' }}>
                <window.Photo src={gallery[shot].src} alt={`${p.name}（${gallery[shot].cat}）`} hue={p.hue} ratio={isMobile ? '4 / 3' : '16 / 9'} icon="building" style={{ borderRadius:'var(--r-lg)' }} />
                <span style={{ position:'absolute', left:12, bottom:12, padding:'5px 12px', borderRadius:'var(--r-pill)',
                  background:'rgba(7,24,43,0.72)', color:'#fff', font:'var(--fw-medium) var(--t-2xs)/1 var(--font-body)', backdropFilter:'blur(4px)' }}>{gallery[shot].cat}</span>
                <span style={{ position:'absolute', right:12, bottom:12, padding:'5px 10px', borderRadius:'var(--r-pill)',
                  background:'rgba(7,24,43,0.55)', color:'#fff', font:'var(--fw-medium) var(--t-2xs)/1 var(--font-num)' }}>{shot + 1} / {gallery.length}</span>
              </div>
              <div style={{ display:'grid', gridTemplateColumns:`repeat(${gallery.length}, 1fr)`, gap:8 }}>
                {gallery.map((g, i) => (
                  <button key={i} onClick={() => setShot(i)} style={{ cursor:'pointer', padding:0, border:'none', position:'relative',
                    borderRadius:'var(--r-sm)', overflow:'hidden', outline: shot === i ? '2px solid var(--blue-600)' : '2px solid transparent', outlineOffset: -2 }}>
                    <window.Photo src={g.src} hue={p.hue} ratio="4 / 3" icon="building" />
                    <span style={{ position:'absolute', inset:0, background: shot === i ? 'transparent' : 'rgba(255,255,255,0.32)' }} />
                  </button>
                ))}
              </div>
            </div>

            {/* key figures */}
            {KeyFigures}

            {/* highlights / catch */}
            <div>
              <SecHead sub="この物件の特長">物件のポイント</SecHead>
              <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap:'var(--sp-2)' }}>
                {(info.isReal
                  ? [
                      // 実物件：資料に書かれている事実だけでポイントを構成（断定・固定文は使わない）
                      p.access && ['pin', p.access],
                      info.struct && ['building', `${info.struct.endsWith('造') ? info.struct : info.struct + '造'}${info.built ? `・${info.built}竣工` : ''}`],
                      info.ceiling && ['maximize', `天井高 ${info.ceiling}`],
                      info.facilities.some(([t]) => /新耐震/.test(t)) && ['shield', '耐震構造（新耐震基準）'],
                      info.moveIn && ['calendar', `入居時期：${info.moveIn}`],
                    ].filter(Boolean).slice(0, 4)
                  : [
                      ['pin', `${p.access}の好立地`],
                      ['maximize', `天井高 ${info.ceiling}・${info.struct}`],
                      ['shield', '新耐震基準適合で安心'],
                      [p.zeroCommission ? 'check' : 'calendar', p.zeroCommission ? '仲介手数料0円・即時入居可' : '即時入居可・条件交渉可'],
                    ]
                ).map(([ic, t]) => (
                  <div key={t} style={{ display:'flex', alignItems:'center', gap:10, padding:'9px 13px', borderRadius:'var(--r-md)', background:'var(--surface)', border:'1px solid var(--border-subtle)' }}>
                    <span style={{ display:'grid', placeItems:'center', width:28, height:28, borderRadius:'var(--r-pill)', background:'var(--blue-50)', color:'var(--blue-600)', flex:'none' }}><window.Icon name={ic} size={15} /></span>
                    <span style={{ font:'var(--fw-medium) var(--t-xs)/1.4 var(--font-body)', color:'var(--text-strong)' }}>{t}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* facilities */}
            <div>
              <SecHead sub="設備・条件（◯=利用可）">設備・仕様</SecHead>
              <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
                {info.facilities.map(([t, ic]) => (
                  <span key={t} style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'6px 11px', borderRadius:'var(--r-pill)',
                    background:'var(--surface)', border:'1px solid var(--border-default)', font:'var(--fw-medium) var(--t-xs)/1 var(--font-body)', color:'var(--text-strong)' }}>
                    <window.Icon name={ic} size={13} stroke={1.7} style={{ color:'var(--blue-600)' }} />{t}
                  </span>
                ))}
              </div>
            </div>

            {/* rent terms */}
            <div>
              <SecHead sub="賃料・契約条件のめやす（デモ表記）">募集条件</SecHead>
              <table style={{ width:'100%', borderCollapse:'collapse', border:'1px solid var(--border-subtle)', borderRadius:'var(--r-md)', overflow:'hidden' }}>
                <tbody>
                  {info.rentRows.map(([k, v, strong]) => (
                    <tr key={k} style={{ borderBottom:'1px solid var(--border-subtle)' }}>
                      <th style={{ width:isMobile?112:150, whiteSpace:'nowrap', textAlign:'left', padding: isMobile?'13px 12px':'13px 16px', background:'var(--surface-sunken)', verticalAlign:'top',
                        font:'var(--fw-medium) var(--t-sm)/1.4 var(--font-body)', color:'var(--text-body)', borderRight:'1px solid var(--border-subtle)' }}><THLabel text={k} /></th>
                      <td style={{ padding:'13px 18px', background:'var(--surface)',
                        font:`${strong ? 'var(--fw-bold)' : 'var(--fw-regular)'} var(--t-sm)/1.5 var(--font-num)`,
                        color: strong ? 'var(--blue-900)' : 'var(--text-strong)' }}>{v}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* building info */}
            <div>
              <SecHead sub="ビル・区画の基本情報">物件概要</SecHead>
              <table style={{ width:'100%', borderCollapse:'collapse', border:'1px solid var(--border-subtle)', borderRadius:'var(--r-md)', overflow:'hidden' }}>
                <tbody>
                  {info.buildingRows.map(([k, v]) => (
                    <tr key={k} style={{ borderBottom:'1px solid var(--border-subtle)' }}>
                      <th style={{ width:isMobile?112:150, whiteSpace:'nowrap', textAlign:'left', padding: isMobile?'13px 12px':'13px 16px', background:'var(--surface-sunken)', verticalAlign:'top',
                        font:'var(--fw-medium) var(--t-sm)/1.4 var(--font-body)', color:'var(--text-body)', borderRight:'1px solid var(--border-subtle)' }}><THLabel text={k} /></th>
                      <td style={{ padding:'13px 18px', background:'var(--surface)', font:'var(--fw-regular) var(--t-sm)/1.5 var(--font-body)', color:'var(--text-strong)' }}>{v}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* access + map */}
            <div>
              <SecHead sub="最寄り駅・幹線道路">アクセス</SecHead>
              <div style={{ display:'flex', flexDirection:'column', gap:10, marginBottom:'var(--sp-4)' }}>
                {info.access.map((a, i) => (
                  <span key={i} style={{ display:'flex', alignItems:'center', gap:10, font:'var(--fw-medium) var(--t-sm)/1.5 var(--font-body)', color:'var(--text-body)' }}>
                    <span style={{ display:'grid', placeItems:'center', width:26, height:26, borderRadius:'var(--r-pill)', background:'var(--blue-50)', color:'var(--blue-600)', flex:'none' }}><window.Icon name={i === 0 ? 'train' : i === 1 ? 'pin' : 'car'} size={14} /></span>{a}
                  </span>
                ))}
              </div>
              <div style={{ position:'relative', borderRadius:'var(--r-md)', overflow:'hidden', border:'1px solid var(--border-subtle)' }}>
                <window.Photo src={I.cityAerial} alt={`${p.area} 周辺地図`} hue="var(--blue-800)" ratio={isMobile ? '16 / 10' : '21 / 8'} icon="pin" overlay={0.18} />
                <div style={{ position:'absolute', inset:0, display:'grid', placeItems:'center' }}>
                  <span style={{ display:'inline-flex', alignItems:'center', gap:8, padding:'10px 18px', borderRadius:'var(--r-pill)', background:'rgba(255,255,255,0.94)',
                    font:'var(--fw-bold) var(--t-sm)/1 var(--font-body)', color:'var(--blue-900)', boxShadow:'var(--shadow-sm)' }}>
                    <window.Icon name="pin" size={16} style={{ color:'var(--blue-600)' }} />{p.area}（地図はイメージ）
                  </span>
                </div>
              </div>
            </div>

            {/* staff comment — 実物件でコメント未登録なら出さない */}
            {info.comment && (
            <div>
              <SecHead sub="現地を知る担当者より">担当スタッフのコメント</SecHead>
              <div style={{ display:'flex', gap:'var(--sp-4)', padding:'var(--sp-6)', borderRadius:'var(--r-lg)', background:'var(--blue-50)', border:'1px solid var(--blue-100)' }}>
                <DAvatar name="担当" tone="navy" size={48} />
                <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                  <window.Icon name="quote" size={22} style={{ color:'var(--blue-300)' }} />
                  <p style={{ margin:0, font:'var(--fw-regular) var(--t-base)/1.9 var(--font-body)', color:'var(--text-body)' }}>{info.comment}</p>
                  <span style={{ font:'var(--fw-bold) var(--t-xs)/1.3 var(--font-body)', color:'var(--text-strong)' }}>Skrrs {p.ward}担当チーム</span>
                </div>
              </div>
            </div>
            )}

            {/* other floors — 実物件は同一ビルの実登録区画のみ（無ければセクションごと非表示）。デモは合成サンプル */}
            {(!info.isReal || otherFloors.length > 0) && (
            <div>
              <SecHead sub="同じビルの募集区画">このビルのその他の区画</SecHead>
              {isMobile ? (
              <div style={{ border:'1px solid var(--border-subtle)', borderRadius:'var(--r-md)', overflow:'hidden' }}>
                {otherFloors.map((f, i) => (
                  <div key={i} style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 14px',
                    borderBottom: i < otherFloors.length - 1 ? '1px solid var(--border-subtle)' : 'none', background:'var(--surface)' }}>
                    {/* col 1: floor + status stacked */}
                    <div style={{ display:'flex', flexDirection:'column', gap:5, width:58, flex:'none' }}>
                      <span style={{ font:'var(--fw-bold) var(--t-base)/1 var(--font-body)', color:'var(--text-strong)', whiteSpace:'nowrap' }}>{f.floor}</span>
                      <span style={{ display:'inline-block', padding:'2px 7px', borderRadius:'var(--r-pill)', textAlign:'center', whiteSpace:'nowrap',
                        font:'var(--fw-medium) 0.625rem/1.3 var(--font-body)',
                        background: f.status === '募集中' ? 'var(--blue-50)' : 'var(--surface-sunken)', color: f.status === '募集中' ? 'var(--blue-700)' : 'var(--text-muted)' }}>{f.status}</span>
                    </div>
                    {/* col 2: 坪 + ㎡ stacked */}
                    <div style={{ display:'flex', flexDirection:'column', gap:4, flex:'none', minWidth:62 }}>
                      <span style={{ font:'var(--fw-bold) var(--t-sm)/1 var(--font-num)', color:'var(--text-strong)', whiteSpace:'nowrap' }}>{f.tsubo}坪</span>
                      <span style={{ font:'var(--fw-regular) 0.625rem/1 var(--font-num)', color:'var(--text-muted)', whiteSpace:'nowrap' }}>{f.sqm}㎡</span>
                    </div>
                    {/* col 3: rent */}
                    <div style={{ flex:1, minWidth:0 }}>
                      <span style={{ font:'var(--fw-bold) var(--t-sm)/1 var(--font-num)', color:'var(--blue-900)', whiteSpace:'nowrap' }}>{yen(f.unit)}/坪</span>
                    </div>
                    {/* col 4: action */}
                    <div style={{ display:'flex', alignItems:'center', flex:'none' }}>
                      <span style={{ display:'inline-flex', alignItems:'center', gap:3, font:'var(--fw-bold) var(--t-2xs)/1 var(--font-body)', color:'var(--blue-600)', cursor:'pointer', whiteSpace:'nowrap' }} onClick={() => openFloor(f)}>詳細を見る<window.Icon name="chevR" size={12} /></span>
                    </div>
                  </div>
                ))}
              </div>
              ) : (
              <div style={{ border:'1px solid var(--border-subtle)', borderRadius:'var(--r-md)', overflowX:'auto' }}>
                <table style={{ width:'100%', minWidth:736, borderCollapse:'collapse', tableLayout:'fixed' }}>
                  <colgroup>
                    <col style={{ width:'76px' }} /><col style={{ width:'84px' }} /><col style={{ width:'96px' }} />
                    <col style={{ width:'92px' }} /><col style={{ width:'120px' }} /><col style={{ width:'84px' }} />
                    <col style={{ width:'96px' }} /><col style={{ width:'112px' }} />
                  </colgroup>
                  <thead>
                    <tr style={{ background:'var(--surface-sunken)', borderBottom:'1px solid var(--border-default)' }}>
                      {['階数','用途','面積','坪単価','月額賃料\n(共益費込)','敷金/\n保証金','入居時期',''].map((h,i)=>(
                        <th key={i} style={{ padding:'11px 10px', textAlign:'left', verticalAlign:'middle', whiteSpace:'pre-line',
                          font:'var(--fw-bold) var(--t-2xs)/1.35 var(--font-body)', color:'var(--text-body)' }}>{h}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {otherFloors.map((f,i)=>(
                      <tr key={i} style={{ borderBottom: i<otherFloors.length-1?'1px solid var(--border-subtle)':'none', background:'var(--surface)' }}>
                        <td style={{ padding:'14px 10px', verticalAlign:'middle' }}>
                          <div style={{ display:'flex', flexDirection:'column', gap:5, alignItems:'flex-start' }}>
                            <span style={{ font:'var(--fw-bold) var(--t-base)/1 var(--font-num)', color:'var(--text-strong)', whiteSpace:'nowrap' }}>{f.floor}</span>
                            <span style={{ display:'inline-block', padding:'2px 8px', borderRadius:'var(--r-pill)', whiteSpace:'nowrap',
                              font:'var(--fw-medium) 0.625rem/1.3 var(--font-body)',
                              background: f.status === '募集中' ? 'var(--blue-50)' : 'var(--surface-sunken)', color: f.status === '募集中' ? 'var(--blue-700)' : 'var(--text-muted)' }}>{f.status}</span>
                          </div>
                        </td>
                        <td style={{ padding:'14px 10px', verticalAlign:'middle' }}>
                          <div style={{ display:'flex', flexDirection:'column', gap:2 }}>
                            <span style={{ font:'var(--fw-medium) var(--t-xs)/1.45 var(--font-body)', color:'var(--text-body)' }}>{f.prop ? f.prop.typeLabel : floorUse[0]}</span>
                            {!f.prop && <span style={{ font:'var(--fw-regular) var(--t-2xs)/1.4 var(--font-body)', color:'var(--text-muted)' }}>{floorUse[1]}</span>}
                          </div>
                        </td>
                        <td style={{ padding:'14px 10px', verticalAlign:'middle' }}>
                          <div style={{ display:'flex', flexDirection:'column', gap:2 }}>
                            <span style={{ font:'var(--fw-bold) var(--t-base)/1.1 var(--font-num)', color:'var(--text-strong)', whiteSpace:'nowrap' }}>{f.tsubo}坪</span>
                            <span style={{ font:'var(--fw-regular) var(--t-2xs)/1 var(--font-num)', color:'var(--text-faint)', whiteSpace:'nowrap' }}>{f.sqm}㎡</span>
                          </div>
                        </td>
                        <td style={{ padding:'14px 10px', verticalAlign:'middle', font:'var(--fw-medium) var(--t-sm)/1.3 var(--font-num)', color:'var(--text-strong)', whiteSpace:'nowrap' }}>{yen(f.unit)}<span style={{ font:'var(--fw-regular) var(--t-2xs)/1 var(--font-body)', color:'var(--text-faint)' }}>/坪</span></td>
                        <td style={{ padding:'14px 10px', verticalAlign:'middle' }}>
                          <div style={{ display:'flex', flexDirection:'column', gap:2 }}>
                            <span style={{ font:'var(--fw-bold) var(--t-sm)/1.2 var(--font-num)', color:'var(--blue-900)', whiteSpace:'nowrap' }}>{yen(f.monthly)}</span>
                            <span style={{ font:'var(--fw-regular) var(--t-2xs)/1 var(--font-body)', color:'var(--text-faint)' }}>共益費込</span>
                          </div>
                        </td>
                        <td style={{ padding:'14px 10px', verticalAlign:'middle', font:'var(--fw-regular) var(--t-sm)/1.3 var(--font-body)', color:'var(--text-body)', whiteSpace:'nowrap' }}>{f.deposit}</td>
                        <td style={{ padding:'14px 10px', verticalAlign:'middle', font:'var(--fw-regular) var(--t-sm)/1.4 var(--font-body)', color:'var(--text-body)' }}>{f.moveIn}</td>
                        <td style={{ padding:'14px 10px', verticalAlign:'middle', textAlign:'right' }}>
                          <button onClick={()=>openFloor(f)} style={{ display:'inline-flex', alignItems:'center', justifyContent:'center', gap:2, padding:'8px 10px', cursor:'pointer',
                            border:'none', borderRadius:'var(--r-sm)', background:'var(--blue-600)', color:'#fff', font:'var(--fw-bold) var(--t-2xs)/1 var(--font-body)', whiteSpace:'nowrap' }}>
                            {f.prop ? '詳細を見る' : '相談する'}<window.Icon name="chevR" size={12} />
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              )}
            </div>
            )}

            {/* disclaimer — 実物件とデモで文言を切り替え */}
            <p style={{ margin:0, font:'var(--fw-regular) var(--t-2xs)/1.7 var(--font-body)', color:'var(--text-faint)' }}>
              {info.isReal
                ? '※ 掲載情報は情報公開日時点のものです。ご成約済みなど、最新の募集状況・条件と異なる場合があります。最新情報はお問い合わせください。'
                : '※ 掲載中の物件情報・写真・地図・賃料・設備はデモ用のサンプルです。実際の募集状況・条件は異なる場合があります。最新情報はお問い合わせください。'}
            </p>
          </div>

          {/* ── RIGHT: inquiry rail ── */}
          {isMobile ? InquiryRail : <aside style={{ position:'sticky', top:120 }}>{InquiryRail}</aside>}
        </div>

        {/* related */}
        <div style={{ marginTop:'var(--sp-16)' }}>
          <SecHead sub="条件の近い物件">同じ種別のおすすめ物件</SecHead>
          <div style={{ display:'grid', gridTemplateColumns:`repeat(${isMobile ? 1 : 3}, 1fr)`, gap:'var(--sp-5)' }}>
            {related.map(r => (
              <window.SkrrsDesignSystem_6013e8.PropertyCard key={r.id} {...r}
                image={<window.Photo src={r.img} alt={r.name} hue={r.hue} ratio="16 / 10" icon="building" label={r.typeLabel} />}
                saved={!!saved[r.id]} onToggleSave={() => onToggleSave(r.id)} onClick={() => onOpen(r)} />
            ))}
          </div>
        </div>
      </window.Container>
    </main>
  );
}

Object.assign(window, { DetailScreen });