/* global React, MYSOKU_DATA, Mysoku */
const { useState, useEffect } = React;

// Dummy proposal data (3 properties, mirrors /c/[shortId] structure)
const PROPERTIES = [
  {
    tabPrice: '11.8万',
    tabArea: '代々木',
    tabWalk: '徒5分',
    title: 'サンプルレジデンス代々木 A棟 305',
    zip: '〒151-XX',
    address: '東京都渋谷区代々木x丁目xx-xx',
    monthly: '¥118,000',
    layout: '1K',
    rent: '¥110,000',
    mgmt: '¥8,000',
    area: '28.40 ㎡',
    floor: '3階',
    direction: '南西',
    built: '築17年(2008年)',
    struct: 'RC',
    description: '代々木駅徒歩5分という利便性の高い立地に建つ、3階南西向きの1Kです。明るい採光、オートロック・防犯カメラと安心の設備が揃っています。バス・トイレ別など、日常の快適さにもこだわった住まいです。',
    equipMain: ['オートロック', '防犯カメラ', '宅配ボックス', '浴室乾燥機', 'バス・トイレ別', 'コンロ2口', '洗濯機置き場室内', 'エレベーター', '南向き', '2面採光'],
    reasons: [
      { h: '代々木駅徒歩5分の立地', p: 'JR・地下鉄複数路線が使える代々木駅から徒歩わずか5分。通勤・通学はもちろん、日常の利便性が抜群です。' },
      { h: '3階南西向き・2面採光', p: '南西向きで日当たり良好、2面採光で室内に光が入りやすい開放感のある住空間。' },
      { h: '充実の防犯セキュリティ', p: 'オートロック・防犯カメラ・宅配ボックスが揃い、外出中も帰宅時も安心感の高い建物設備。' },
      { h: '暮らしを支える生活設備', p: '浴室乾燥機、バス・トイレ別、洗濯機置き場室内など、日常生活を快適にする設備が一通り揃っています。' },
      { h: '学生・外国籍も相談可', p: '学生入居可、外国籍の方もご相談可能。幅広い方が申し込みやすい入居条件を備えた物件です。' },
    ],
    fees: [
      { k: '敷金', v: '¥0', n: '物件記載値' },
      { k: '礼金', v: '¥110,000', n: '物件記載値' },
      { k: '仲介手数料', v: '¥121,000', n: '賃料1ヶ月分(税込)' },
      { k: '鍵交換費', v: '¥22,000', n: '税込' },
      { k: '火災保険(2年)', v: '¥20,000', n: '加入必須' },
      { k: '保証会社初回料', v: '¥55,000', n: '賃料の50%' },
      { k: '日割賃料(目安)', v: '¥55,000', n: '15日換算(目安)。入居日に応じて変動' },
    ],
    feeTotal: '¥383,000',
    feeMonth: '¥118,000',
    feeMoveIn: '¥501,000',
  },
  {
    tabPrice: '11.5万',
    tabArea: '初台',
    tabWalk: '徒10分',
    title: 'サンプル初台ヒルズ 2F',
    zip: '〒151-XX',
    address: '東京都渋谷区初台x丁目x-x',
    monthly: '¥115,000',
    layout: '1DK',
    rent: '¥110,000',
    mgmt: '¥5,000',
    area: '38.00 ㎡',
    floor: '2階',
    direction: '東',
    built: '築32年(1994年)',
    struct: '重量鉄骨造3階建',
    description: '初台駅まで徒歩10分、参宮橋駅まで徒歩9分と複数路線が利用できる利便性の高い立地です。1DK 38㎡の角部屋で、大型収納を備えた使い勝手のよい間取りが魅力です。バス・トイレ別、都市ガス完備で、毎日の暮らしを快適にサポートする設備が整っています。',
    equipMain: ['角部屋', '大型収納', 'バス・トイレ別', 'テレビドアフォン', '室内洗濯機置場', '都市ガス', 'エアコン'],
    reasons: [
      { h: '2駅利用できる立地', p: '初台駅徒歩10分、参宮橋駅徒歩9分の2駅が利用可能で、目的や時間帯に合わせてルートを選べます。' },
      { h: '角部屋の開放感', p: '角部屋のため隣接する住戸が少なく、採光や通風の面でゆとりのある住環境を確保しています。' },
      { h: '大型収納で広く使える', p: '大型収納を備えており、衣類や荷物をしっかり収納できるため、居室スペースをすっきりと活用できます。' },
      { h: 'バス・トイレ別の水回り', p: 'バスルームとトイレが独立した設計で、入浴中もトイレを使用でき、日常の生活動線がスムーズになります。' },
      { h: '生活設備が揃う室内', p: 'エアコン、室内洗濯機置場、都市ガス、テレビドアフォンを完備しており、引越し後すぐに快適な生活を始められます。' },
    ],
    fees: [
      { k: '敷金', v: '¥110,000', n: '物件記載値' },
      { k: '礼金', v: '¥110,000', n: '物件記載値' },
      { k: '仲介手数料', v: '¥121,000', n: '賃料1ヶ月分(税込)' },
      { k: '鍵交換費', v: '¥22,000', n: '税込' },
      { k: '火災保険(2年)', v: '¥20,000', n: '加入必須' },
      { k: '保証会社初回料', v: '¥55,000', n: '賃料の50%' },
      { k: '日割賃料(目安)', v: '¥57,500', n: '15日換算(目安)。入居日に応じて変動' },
    ],
    feeTotal: '¥495,500',
    feeMonth: '¥115,000',
    feeMoveIn: '¥610,500',
  },
  {
    tabPrice: '12.8万',
    tabArea: '幡ヶ谷',
    tabWalk: '徒7分',
    title: 'サンプル幡ヶ谷テラス 705',
    zip: '〒151-XX',
    address: '東京都渋谷区幡ヶ谷x丁目xx-x',
    monthly: '¥128,000',
    layout: '1K',
    rent: '¥118,000',
    mgmt: '¥10,000',
    area: '30.15 ㎡',
    floor: '7階',
    direction: '南東',
    built: '築12年(2013年)',
    struct: 'RC造 10階建',
    description: '幡ヶ谷駅徒歩7分、7階の高層階1Kです。南東向きで日当たり・眺望ともに良好、オートロック・防犯カメラに加え24時間管理体制で安心して暮らせます。築12年と比較的新しく、室内設備も充実しています。',
    equipMain: ['オートロック', '防犯カメラ', '24時間管理', '宅配ボックス', '浴室乾燥機', 'バス・トイレ別', '独立洗面台', '南東向き', '高層階', 'インターネット無料'],
    reasons: [
      { h: '幡ヶ谷駅徒歩7分の立地', p: '京王新線幡ヶ谷駅から徒歩7分。新宿エリアへのアクセスも良好で、生活利便性の高いエリアです。' },
      { h: '7階・南東向きの眺望', p: '7階の高層階で南東向き。日当たりはもちろん、眺望や風通しの良さも魅力です。' },
      { h: '24時間管理体制', p: 'オートロック・防犯カメラに加え24時間管理体制で、女性の一人暮らしも安心の建物です。' },
      { h: '築浅で設備充実', p: '築12年と比較的新しく、浴室乾燥機・独立洗面台・インターネット無料など現代的な設備が揃っています。' },
      { h: '居室を広く使える設計', p: '30㎡超の1Kで、収納も豊富。家具配置の自由度が高く、ワンルーム以上のゆとりが感じられます。' },
    ],
    fees: [
      { k: '敷金', v: '¥118,000', n: '物件記載値' },
      { k: '礼金', v: '¥118,000', n: '物件記載値' },
      { k: '仲介手数料', v: '¥129,800', n: '賃料1ヶ月分(税込)' },
      { k: '鍵交換費', v: '¥22,000', n: '税込' },
      { k: '火災保険(2年)', v: '¥20,000', n: '加入必須' },
      { k: '保証会社初回料', v: '¥59,000', n: '賃料の50%' },
      { k: '日割賃料(目安)', v: '¥59,000', n: '15日換算(目安)。入居日に応じて変動' },
    ],
    feeTotal: '¥525,800',
    feeMonth: '¥128,000',
    feeMoveIn: '¥653,800',
  },
];

function PreviewSection() {
  const [tab, setTab] = useState(0);
  const [auto, setAuto] = useState(true);

  // auto-cycle tabs every 10s when user hasn't interacted
  useEffect(() => {
    if (!auto) return;
    const id = setInterval(() => setTab(t => (t + 1) % PROPERTIES.length), 9000);
    return () => clearInterval(id);
  }, [auto]);

  const p = PROPERTIES[tab];

  const onTab = (i) => {
    setAuto(false);
    setTab(i);
  };
  const next = () => onTab((tab + 1) % PROPERTIES.length);
  const prev = () => onTab((tab - 1 + PROPERTIES.length) % PROPERTIES.length);

  return (
    <section id="preview" className="block preview-section">
      <div className="container">
        <div className="preview-grid">
          <div className="preview-copy reveal">
            <span className="section-eyebrow">What the customer sees</span>
            <h2>これが、お客様の<br />スマホに届く<em>1ページ</em>。</h2>
            <p>
              マイソク原本の上に、基本情報・地図・選ぶ理由・初期費用・LINE問い合わせまでが自動でまとまります。複数物件を提案する場合はタブで切り替えられる比較ページに。お客様はURLを開くだけで、必要な情報にすべてたどり着けます。
            </p>
            <div className="preview-chips">
              <span className="preview-chip"><span className="num">1</span>タブ式の物件切替</span>
              <span className="preview-chip"><span className="num">2</span>マイソク原本</span>
              <span className="preview-chip"><span className="num">3</span>基本情報</span>
              <span className="preview-chip"><span className="num">4</span>地図</span>
              <span className="preview-chip"><span className="num">5</span>設備・条件</span>
              <span className="preview-chip"><span className="num">6</span>選ぶ理由</span>
              <span className="preview-chip"><span className="num">7</span>初期費用</span>
              <span className="preview-chip"><span className="num">8</span>LINE問い合わせ</span>
            </div>
            <a href="https://www.ftool.online/signup" className="btn-primary" target="_blank" rel="noopener">
              14日間無料で試す
              <span className="arrow">→</span>
            </a>
            <div className="preview-meta">↓ ダミー物件3件で、実物に近い構成をご確認いただけます</div>
          </div>

          <div className="preview-visual reveal delay-1">
            <div className="cp-frame">
              {/* Browser bar */}
              <div className="cp-bar">
                <span className="cp-dot"></span><span className="cp-dot"></span><span className="cp-dot"></span>
                <span className="cp-url">
                  <svg viewBox="0 0 8 9" width="8" height="9" fill="currentColor" style={{ marginRight: 4, verticalAlign: -1, opacity: 0.6 }}>
                    <rect x="1" y="4" width="6" height="4.5" rx="0.5"/>
                    <path d="M2 4V2.5a2 2 0 0 1 4 0V4" stroke="currentColor" strokeWidth="0.8" fill="none"/>
                  </svg>
                  ftool.online/c/<span className="accent">ck677ww2</span>
                </span>
              </div>

              {/* Tab nav */}
              <div className="cp-tabs">
                {PROPERTIES.map((it, i) => (
                  <button
                    key={i}
                    className={`cp-tab ${i === tab ? 'active' : ''}`}
                    onClick={() => onTab(i)}
                  >
                    <span className="ix">{['①','②','③'][i]}</span>
                    <span className="tx">
                      <strong>{it.tabPrice}</strong>{it.tabArea}
                      <em>{it.tabWalk}</em>
                    </span>
                  </button>
                ))}
              </div>

              {/* Pager */}
              <div className="cp-pager">
                <button className="cp-pager-btn" onClick={prev}>← 前へ</button>
                <span className="cp-pager-counter">{tab + 1} / {PROPERTIES.length} 件目</span>
                <button className="cp-pager-btn" onClick={next}>次へ →</button>
              </div>

              {/* Content */}
              <div className="cp-scroll">
                <div className="cp-content" key={tab}>
                  {/* Title */}
                  <div className="cp-hero">
                    <h3 className="cp-title">{p.title}</h3>
                    <div className="cp-zip">{p.zip} {p.address}</div>
                    <div className="cp-headline">
                      <div className="hi">
                        <span>月額</span>
                        <strong>{p.monthly}<em>/月</em></strong>
                      </div>
                      <div className="hi">
                        <span>間取り</span>
                        <strong className="jp">{p.layout}</strong>
                      </div>
                    </div>
                  </div>

                  {/* Mysoku image */}
                  <div className="cp-mysoku">
                    <div className="cp-mysoku-section-tag">マイソク原本</div>
                    <div className="cp-mysoku-frame">
                      <div className="cp-mysoku-display">
                        <Mysoku data={MYSOKU_DATA[tab]} withLabel={false} />
                      </div>
                    </div>
                  </div>

                  {/* Basic info card */}
                  <div className="cp-card">
                    <div className="cp-amount">
                      <span className="lbl">月額(賃料+管理費)</span>
                      <span className="val">{p.monthly}<em>/月</em></span>
                    </div>
                    <dl className="cp-dl">
                      <div><dt>賃料</dt><dd>{p.rent}</dd></div>
                      <div><dt>管理費・共益費</dt><dd>{p.mgmt}</dd></div>
                      <div><dt>間取り</dt><dd>{p.layout}</dd></div>
                      <div><dt>専有面積</dt><dd>{p.area}</dd></div>
                      <div><dt>所在階</dt><dd>{p.floor}</dd></div>
                      <div><dt>方角</dt><dd>{p.direction}</dd></div>
                      <div><dt>築年数</dt><dd>{p.built}</dd></div>
                      <div><dt>構造</dt><dd>{p.struct}</dd></div>
                    </dl>
                  </div>

                  {/* Map */}
                  <h4 className="cp-h">物件位置</h4>
                  <div className="cp-map">
                    <div className="cp-map-pin"></div>
                    <div className="cp-map-label">マップで開く</div>
                  </div>

                  {/* Equipment */}
                  <h4 className="cp-h">この物件の設備・条件</h4>
                  <div className="cp-card cp-desc">
                    <p>{p.description}</p>
                  </div>
                  <div className="cp-equip">
                    {p.equipMain.map((e, i) => (
                      <div className="cp-equip-chip" key={i}>
                        <svg viewBox="0 0 10 10" fill="none" width="10" height="10"><path d="M1.5 5L4 7.5L8.5 2.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                        {e}
                      </div>
                    ))}
                  </div>

                  {/* Reasons */}
                  <h4 className="cp-h centered">この物件を選ぶ理由</h4>
                  <div className="cp-h-sub">5つのポイント</div>
                  <div className="cp-reasons">
                    {p.reasons.map((r, i) => (
                      <div className="cp-reason" key={i}>
                        <span className="n">{i + 1}</span>
                        <div>
                          <h5>{r.h}</h5>
                          <p>{r.p}</p>
                        </div>
                      </div>
                    ))}
                  </div>

                  {/* Fee */}
                  <h4 className="cp-h">初期費用</h4>
                  <div className="cp-card cp-fee">
                    {p.fees.map((f, i) => (
                      <div className="cp-fee-row" key={i}>
                        <div className="cp-fee-l">
                          <span className="k">{f.k}</span>
                          <span className="n">{f.n}</span>
                        </div>
                        <span className="v">{f.v}</span>
                      </div>
                    ))}
                    <div className="cp-fee-row total">
                      <span className="cp-fee-l"><span className="k">初期費用 合計</span></span>
                      <span className="v">{p.feeTotal}</span>
                    </div>
                    <div className="cp-fee-row plus">
                      <span className="cp-fee-l"><span className="k">+ 初月家賃(賃料+管理費)</span></span>
                      <span className="v">{p.feeMonth}</span>
                    </div>
                    <div className="cp-fee-row movein">
                      <span className="cp-fee-l"><span className="k">= 入居時 概算</span></span>
                      <span className="v">{p.feeMoveIn}</span>
                    </div>
                    <div className="cp-fee-note">※ 契約時期や条件により実際の金額と異なる場合があります。</div>
                  </div>

                  {/* LINE CTA */}
                  <h4 className="cp-h centered">この物件について相談する</h4>
                  <div className="cp-h-sub">LINE 公式アカウントで担当者にお気軽にご相談ください。</div>
                  <button className="cp-line">
                    <svg viewBox="0 0 16 16" fill="currentColor">
                      <path d="M8 1.5C4.13 1.5 1 4.04 1 7.16c0 2.8 2.5 5.14 5.88 5.58.23.05.54.15.62.34.07.18.05.45.02.63l-.1.6c-.03.18-.14.7.61.38.75-.32 4.07-2.4 5.55-4.11.99-1.09 1.42-2.2 1.42-3.42C14.5 4.04 11.37 1.5 8 1.5z"/>
                    </svg>
                    LINE で問い合わせる
                  </button>

                  {/* Footer */}
                  <div className="cp-footer">
                    <h5>{p.title}</h5>
                    <div className="cp-zip">{p.zip} {p.address}</div>
                    <div className="cp-headline mini">
                      <div className="hi"><span>月額</span><strong>{p.monthly}<em>/月</em></strong></div>
                      <div className="hi"><span>間取り</span><strong className="jp">{p.layout}</strong></div>
                    </div>
                    <p className="cp-footer-note">掲載情報は変更となる場合があります。最終的なお見積りは担当者よりご案内します。</p>
                    <p className="cp-footer-note">本ページは <strong>サンプル不動産</strong> が 作成・公開しています。</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="preview-caption">↑ お客様が見る画面イメージ(ダミー物件・タブで切替)</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PreviewSection });