// 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 } = 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) {
  const unit = parseInt(String(p.rent).replace(/[^0-9]/g, ''), 10) || 0;   // 坪単価
  const tsubo = parseFloat(p.size) || 0;
  const sqm = tsubo * TSUBO_TO_SQM;
  const kyoeki = Math.round(unit * 0.13 / 100) * 100;                       // 共益費/坪 ≈ 13%
  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 d = typeDefaults[p.type] || typeDefaults.office;

  // 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']],
  };
  const facilities = facByType[p.type] || facByType.office;

  // access — primary line from data + a couple of synthesized alternates
  const access = [p.access, '複数路線が利用可能（最寄り3駅圏）', '高速IC・幹線道路へのアクセス良好'];

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

  return {
    unit, tsubo, sqm, kyoeki, monthly, monthlyTotal, ...d, facilities, access, comment,
    rentRows: [
      ['賃料（坪単価）', `${yen(unit)} / 坪`, true],
      ['共益費（坪単価）', `${yen(kyoeki)} / 坪`, false],
      ['月額賃料（目安）', `${yen(monthly)} / 月`, false],
      ['月額総額（目安）', `${yen(monthlyTotal)} / 月`, true],
      ['敷金 / 保証金', `賃料 ${p.type==='office'?'12':p.type==='retail'?'10':'6'} ヶ月分`, false],
      ['礼金', p.zeroCommission ? '無' : '賃料 1ヶ月分', false],
      ['更新料', '新賃料 1ヶ月分', false],
      ['契約形態', '定期借家契約（5年）', false],
      ['入居時期', '即時入居可', 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],
      ['築年月', d.built],
      ['リニューアル', d.reform],
      ['駐車場', d.parking],
      ['耐震基準', '新耐震基準（1981年基準）適合'],
      ['取引態様', '媒介（仲介）'],
    ],
  };
}

// ── 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
  const gallery = [
    { 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);
  // other floors in the same building (synthesized)
  const otherFloors = [
    { 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 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:'即時', unit:'入居可' },
      ].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' }}>
        <window.Avatar 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','非公開物件 500件以上から提案']].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)' }}>
        {/* 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)' }}>
                {[
                  [gallery[0].cat ? 'pin' : '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 */}
            <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)' }}>
                <window.Avatar 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 */}
            <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={() => onNav('contact', p)}>詳細を見る<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)' }}>{floorUse[0]}</span>
                            <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={()=>onNav('contact', p)} 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' }}>
                            相談する<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)' }}>
              ※ 掲載中の物件情報・写真・地図・賃料・設備はデモ用のサンプルです。実際の募集状況・条件は異なる場合があります。最新情報はお問い合わせください。
            </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 });