/* global React */
// Detailed mysoku data for 3 dummy properties + reusable <Mysoku> component.
// Sized via parent's font-size (em-based), so the same JSX scales for
// hero demo (tiny), preview frame (medium) and feature page (small).

const MYSOKU_DATA = [
  {
    title: 'サンプルレジデンス代々木 A棟',
    catch: '◆◇分譲タイプ賃貸マンション◇◆',
    roomNum: '305',
    rent: '118,000',
    mgmt: '8,000',
    deposit: '0ヶ月',
    keymoney: '1ヶ月',
    address: '東京都渋谷区代々木x-x-x',
    transit: ['JR山手線 代々木 徒歩5分', '都営大江戸線 代々木 徒歩6分'],
    structure: 'RC造 12階建',
    area: '28.40㎡',
    direction: '南西',
    units: '36戸',
    layout: '1K',
    built: '2008/03',
    contract: '2年',
    moveIn: '相談',
    floorplan: 'a',
    photos: ['ext-a', 'int-a'],
    equipPrimary: ['バス・トイレ別', 'オートロック', '防犯カメラ', 'ウォシュレット', '宅配ボックス', '浴室乾燥機', 'システムキッチン', 'エアコン'],
    equipSecondary: ['BS/CS対応', '都市ガス', 'フローリング', 'クローゼット'],
    tel: '03-XXXX-XXXX',
  },
  {
    title: 'サンプル初台ヒルズ',
    catch: '◆角部屋・大型収納の1DK◆',
    roomNum: '2F',
    rent: '110,000',
    mgmt: '5,000',
    deposit: '1ヶ月',
    keymoney: '1ヶ月',
    address: '東京都渋谷区初台x-x-x',
    transit: ['京王新線 初台 徒歩10分', '小田急線 参宮橋 徒歩9分'],
    structure: '重量鉄骨造 3階建',
    area: '38.00㎡',
    direction: '東',
    units: '12戸',
    layout: '1DK',
    built: '1994/06',
    contract: '2年',
    moveIn: '即可',
    floorplan: 'b',
    photos: ['ext-b', 'int-b'],
    equipPrimary: ['角部屋', '大型収納', 'バス・トイレ別', 'テレビドアフォン', '室内洗濯機置場', '都市ガス', 'エアコン'],
    equipSecondary: ['ガスコンロ', 'クローゼット', 'CATV', '駐輪場'],
    tel: '03-XXXX-XXXX',
  },
  {
    title: 'サンプル幡ヶ谷テラス',
    catch: '◆築浅・高層階の1K◆',
    roomNum: '705',
    rent: '118,000',
    mgmt: '10,000',
    deposit: '1ヶ月',
    keymoney: '1ヶ月',
    address: '東京都渋谷区幡ヶ谷x-x-x',
    transit: ['京王新線 幡ヶ谷 徒歩7分', '京王線 笹塚 徒歩12分'],
    structure: 'RC造 10階建',
    area: '30.15㎡',
    direction: '南東',
    units: '48戸',
    layout: '1K',
    built: '2013/09',
    contract: '2年',
    moveIn: '相談',
    floorplan: 'c',
    photos: ['ext-c', 'int-c'],
    equipPrimary: ['オートロック', '防犯カメラ', '24時間管理', '宅配ボックス', '浴室乾燥機', '独立洗面台', '高層階', 'インターネット無料'],
    equipSecondary: ['BS/CS対応', 'フローリング', 'クローゼット', 'CATV'],
    tel: '03-XXXX-XXXX',
  },
];

// Three floorplan SVGs — distinct layouts for each property
function Floorplan({ type }) {
  if (type === 'b') {
    // 1DK, 角部屋 — bigger DK + bedroom + bath block
    return (
      <svg viewBox="0 0 140 78" preserveAspectRatio="none">
        <rect x="2" y="2" width="136" height="74" fill="none" stroke="#1a1816" strokeWidth="0.8"/>
        {/* Balcony L+R */}
        <rect x="2" y="2" width="48" height="12" fill="none" stroke="#1a1816" strokeWidth="0.5" strokeDasharray="1.5 1"/>
        <rect x="88" y="2" width="50" height="12" fill="none" stroke="#1a1816" strokeWidth="0.5" strokeDasharray="1.5 1"/>
        {/* Bedroom (south) */}
        <rect x="14" y="18" width="36" height="32" fill="#f7f4ec" stroke="#1a1816" strokeWidth="0.4"/>
        <text x="32" y="36" fontSize="4.5" fill="#1a1816" textAnchor="middle">Bedroom</text>
        {/* DK */}
        <rect x="52" y="18" width="50" height="32" fill="none" stroke="#1a1816" strokeWidth="0.4"/>
        <text x="77" y="36" fontSize="4.5" fill="#1a1816" textAnchor="middle">DK</text>
        {/* Storage */}
        <rect x="14" y="52" width="20" height="14" fill="none" stroke="#1a1816" strokeWidth="0.4"/>
        <text x="24" y="61" fontSize="3.5" fill="#8a847c" textAnchor="middle">Storage</text>
        {/* Bath */}
        <rect x="104" y="18" width="22" height="16" fill="none" stroke="#1a1816" strokeWidth="0.4"/>
        <text x="115" y="28" fontSize="3.8" fill="#1a1816" textAnchor="middle">Bath</text>
        {/* Lav */}
        <rect x="104" y="36" width="22" height="14" fill="none" stroke="#1a1816" strokeWidth="0.4"/>
        <text x="115" y="44" fontSize="3.8" fill="#1a1816" textAnchor="middle">Lav.</text>
        {/* Entry */}
        <rect x="60" y="56" width="32" height="14" fill="none" stroke="#1a1816" strokeWidth="0.4"/>
        <text x="76" y="64" fontSize="3.5" fill="#1a1816" textAnchor="middle">Entry</text>
        {/* North */}
        <circle cx="128" cy="68" r="5" fill="none" stroke="#1a1816" strokeWidth="0.4"/>
        <path d="M128 64 L130 70 L128 68 L126 70 Z" fill="#1a1816"/>
      </svg>
    );
  }
  if (type === 'c') {
    // 1K, 角部屋・高層 — bedroom + kitchen + bath + entry
    return (
      <svg viewBox="0 0 140 78" preserveAspectRatio="none">
        <rect x="2" y="2" width="136" height="74" fill="none" stroke="#1a1816" strokeWidth="0.8"/>
        {/* Two-side balcony */}
        <rect x="2" y="2" width="80" height="12" fill="none" stroke="#1a1816" strokeWidth="0.5" strokeDasharray="1.5 1"/>
        <rect x="124" y="2" width="14" height="60" fill="none" stroke="#1a1816" strokeWidth="0.5" strokeDasharray="1.5 1"/>
        {/* Bedroom (corner) */}
        <rect x="14" y="18" width="58" height="36" fill="#f7f4ec" stroke="#1a1816" strokeWidth="0.4"/>
        <text x="43" y="38" fontSize="4.5" fill="#1a1816" textAnchor="middle">Bedroom</text>
        {/* Closet */}
        <rect x="74" y="18" width="14" height="18" fill="none" stroke="#1a1816" strokeWidth="0.4"/>
        <text x="81" y="29" fontSize="3" fill="#8a847c" textAnchor="middle">Clo.</text>
        {/* Kitchen */}
        <rect x="90" y="18" width="30" height="20" fill="none" stroke="#1a1816" strokeWidth="0.4"/>
        <text x="105" y="30" fontSize="3.8" fill="#1a1816" textAnchor="middle">Kitchen</text>
        {/* Bath */}
        <rect x="90" y="40" width="14" height="16" fill="none" stroke="#1a1816" strokeWidth="0.4"/>
        <text x="97" y="50" fontSize="3" fill="#1a1816" textAnchor="middle">Bath</text>
        {/* Lav */}
        <rect x="106" y="40" width="14" height="16" fill="none" stroke="#1a1816" strokeWidth="0.4"/>
        <text x="113" y="50" fontSize="3" fill="#1a1816" textAnchor="middle">Lav.</text>
        {/* Entry */}
        <rect x="74" y="58" width="46" height="14" fill="none" stroke="#1a1816" strokeWidth="0.4"/>
        <text x="97" y="67" fontSize="3.5" fill="#1a1816" textAnchor="middle">Entry</text>
        {/* North */}
        <circle cx="128" cy="68" r="5" fill="none" stroke="#1a1816" strokeWidth="0.4"/>
        <path d="M128 64 L130 70 L128 68 L126 70 Z" fill="#1a1816"/>
      </svg>
    );
  }
  // default 'a' — 1K standard
  return (
    <svg viewBox="0 0 140 78" preserveAspectRatio="none">
      <rect x="2" y="2" width="136" height="74" fill="none" stroke="#1a1816" strokeWidth="0.8"/>
      <rect x="2" y="2" width="60" height="14" fill="none" stroke="#1a1816" strokeWidth="0.5" strokeDasharray="1.5 1"/>
      <rect x="14" y="20" width="44" height="36" fill="#f7f4ec" stroke="#1a1816" strokeWidth="0.4"/>
      <text x="36" y="40" fontSize="4.5" fill="#1a1816" textAnchor="middle">Bedroom</text>
      <rect x="62" y="20" width="22" height="22" fill="none" stroke="#1a1816" strokeWidth="0.4"/>
      <text x="73" y="33" fontSize="3.8" fill="#1a1816" textAnchor="middle">Kitchen</text>
      <rect x="88" y="20" width="22" height="14" fill="none" stroke="#1a1816" strokeWidth="0.4"/>
      <text x="99" y="29" fontSize="3.8" fill="#1a1816" textAnchor="middle">Bath</text>
      <rect x="88" y="36" width="22" height="12" fill="none" stroke="#1a1816" strokeWidth="0.4"/>
      <text x="99" y="44" fontSize="3.8" fill="#1a1816" textAnchor="middle">Lav.</text>
      <rect x="62" y="44" width="22" height="14" fill="none" stroke="#1a1816" strokeWidth="0.4"/>
      <text x="73" y="53" fontSize="3.5" fill="#1a1816" textAnchor="middle">Entry</text>
      <rect x="14" y="58" width="96" height="14" fill="none" stroke="#1a1816" strokeWidth="0.5" strokeDasharray="1.5 1"/>
      <text x="62" y="68" fontSize="3.5" fill="#8a847c" textAnchor="middle">Roof Balcony</text>
      <circle cx="128" cy="68" r="5" fill="none" stroke="#1a1816" strokeWidth="0.4"/>
      <path d="M128 64 L130 70 L128 68 L126 70 Z" fill="#1a1816"/>
    </svg>
  );
}

function Photo({ kind }) {
  const cls = `msk-photo msk-photo-${kind}`;
  return <div className={cls}></div>;
}

// Mysoku — sizes via parent font-size (em-based)
function Mysoku({ data, withLabel = true }) {
  const d = data;
  return (
    <div className="msk">
      {withLabel && <span className="msk-label">マイソク.pdf</span>}
      <div className="msk-top">
        <div className="msk-title-block">
          <div className="msk-title">{d.title}</div>
          <div className="msk-roomnum">{d.roomNum}</div>
          <div className="msk-catch">{d.catch}</div>
        </div>
        <table className="msk-rent">
          <tbody>
            <tr><th>号室</th><th>賃料</th></tr>
            <tr>
              <td>{d.roomNum}</td>
              <td className="rent-val">{d.rent}</td>
            </tr>
            <tr>
              <td colSpan="2" className="mgmt">管理費 {d.mgmt}</td>
            </tr>
            <tr>
              <td>敷 {d.deposit}</td>
              <td>礼 {d.keymoney}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div className="msk-mid">
        <div className="msk-photos">
          <Photo kind={d.photos[0]} />
          <Photo kind={d.photos[1]} />
        </div>
        <div className="msk-floor">
          <Floorplan type={d.floorplan} />
        </div>
      </div>

      <div className="msk-info">
        <div><span className="lbl">所在地</span><span className="val">{d.address}</span></div>
        <div><span className="lbl">交通</span>
          <span className="val">
            {d.transit.map((t, i) => <span key={i} className="line">{t}</span>)}
          </span>
        </div>
        <div><span className="lbl">構造</span><span className="val">{d.structure}</span></div>
        <div><span className="lbl">専有面積</span><span className="val">{d.area}</span></div>
        <div><span className="lbl">間取り</span><span className="val">{d.layout}</span></div>
        <div><span className="lbl">方角</span><span className="val">{d.direction}</span></div>
        <div><span className="lbl">築年月</span><span className="val">{d.built}</span></div>
        <div><span className="lbl">契約期間</span><span className="val">{d.contract}</span></div>
      </div>

      <div className="msk-equip">
        {d.equipPrimary.map((e, i) => <span key={i} className="filled">◆{e}</span>)}
        {d.equipSecondary.map((e, i) => <span key={i} className="hollow">◇{e}</span>)}
      </div>

      <div className="msk-footer">
        <span>図面が現状と異なる場合は現状を優先とします。</span>
        <span>TEL {d.tel}</span>
      </div>
    </div>
  );
}

Object.assign(window, { MYSOKU_DATA, Mysoku });