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

// Animated hero demo: マイソク PDF → 公開ページ生成
function HeroDemo() {
  const [step, setStep] = useState(0); // 0: idle, 1: dragging, 2: section 1, 3: section 2, 4: section 3, 5: complete

  useEffect(() => {
    const t = [
    setTimeout(() => setStep(1), 800),
    setTimeout(() => setStep(2), 1700),
    setTimeout(() => setStep(3), 2400),
    setTimeout(() => setStep(4), 3100),
    setTimeout(() => setStep(5), 3800)];

    return () => t.forEach(clearTimeout);
  }, []);

  // Loop the demo every 7 seconds
  useEffect(() => {
    if (step !== 5) return;
    const loop = setTimeout(() => {
      setStep(0);
      setTimeout(() => setStep(1), 600);
      setTimeout(() => setStep(2), 1500);
      setTimeout(() => setStep(3), 2200);
      setTimeout(() => setStep(4), 2900);
      setTimeout(() => setStep(5), 3600);
    }, 3500);
    return () => clearTimeout(loop);
  }, [step]);

  return (
    <div className="hero-demo-wrap">
      <div className="demo-stage">
        {/* Mysoku card — full dummy mysoku */}
        <div className={`demo-mysoku demo-mysoku-host ${step === 1 ? 'dragging' : ''}`}>
          <Mysoku data={MYSOKU_DATA[0]} />
        </div>

        {/* Arrow */}
        <div className="demo-arrow" style={{ opacity: step >= 1 && step < 5 ? 1 : 0.3, transition: 'opacity .4s' }}>
          <span className="label">自動生成</span>
          <svg width="34" height="20" viewBox="0 0 34 20" fill="none">
            <path d="M2 10 H30 M22 3 L30 10 L22 17" stroke="oklch(0.62 0.13 50)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        {/* Output (public page mock — mirrors actual customer page layout) */}
        <div className="demo-output">
          <div className="titlebar">
            <span className="dot"></span>
            <span className="dot"></span>
            <span className="dot"></span>
            <span className="url">ftool.online/p/<span className="accent">123abc</span></span>
          </div>
          <div className="demo-output-body">
            <div className={`demo-section ${step >= 2 ? 'shown' : ''}`}>
              <div className="demo-title">
                サンプルレジデンス代々木 A棟 305
                <span className="addr">〒151-XX 東京都渋谷区代々木x-x-x</span>
              </div>
            </div>
            <div className={`demo-section ${step >= 2 ? 'shown' : ''}`}>
              <div className="demo-headline">
                <div className="col">月額<strong>¥118,000</strong></div>
                <div className="col">間取り<strong className="jp">1K</strong></div>
              </div>
            </div>
            <div className={`demo-section ${step >= 3 ? 'shown' : ''}`}>
              <div className="demo-mysoku-thumb">
                <Mysoku data={MYSOKU_DATA[0]} withLabel={false} />
              </div>
            </div>
            <div className={`demo-section ${step >= 4 ? 'shown' : ''}`}>
              <div className="demo-info-card">
                <div className="demo-info-row"><span className="lbl">専有</span><span className="v">28.40 ㎡</span></div>
                <div className="demo-info-row"><span className="lbl">所在階</span><span className="v">3階 南西</span></div>
                <div className="demo-info-row"><span className="lbl">最寄</span><span className="v">徒歩5分</span></div>
              </div>
            </div>
            <div className={`demo-section ${step >= 5 ? 'shown' : ''}`}>
              <div className="demo-fee">
                <div className="demo-fee-row"><span>礼金</span><span>¥20,000</span></div>
                <div className="demo-fee-row"><span>仲介手数料</span><span>¥108,900</span></div>
                <div className="demo-fee-row"><span>火災保険</span><span>¥20,000</span></div>
                <div className="demo-fee-row"><span>保証会社</span><span>¥49,500</span></div>
                <div className="demo-fee-row"><span>日割賃料</span><span>¥59,000</span></div>
              </div>
              <div className="demo-total">
                <span className="lbl">入居時 概算</span>
                <span className="num">¥496,400</span>
              </div>
            </div>
            <div className={`demo-section ${step >= 5 ? 'shown' : ''}`}>
              <div className="demo-line-cta">
                <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で問い合わせる
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="demo-step-counter">
        <span className={`pip ${step >= 1 ? 'active' : ''}`}></span>
        <span className={`pip ${step >= 3 ? 'active' : ''}`}></span>
        <span className={`pip ${step >= 5 ? 'active' : ''}`}></span>
      </div>
    </div>);

}

// Feature visual — tabbed comparison (proposal page)
function FeatureTabs() {
  const [active, setActive] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setActive((a) => (a + 1) % 3), 3200);
    return () => clearInterval(id);
  }, []);
  const tabs = [
  {
    label: '代々木',
    sub: '1K ・ 徒5分',
    title: 'サンプルレジデンス代々木 A棟',
    addr: '渋谷区代々木x-x-x',
    rent: '¥118,000',
    layout: '1K',
    area: '28.40㎡',
    built: '築17年',
    direction: '南西',
    moveIn: '¥501,000',
    tags: ['オートロック', '宅配ボックス', '2面採光']
  },
  {
    label: '初台',
    sub: '1DK ・ 徒10分',
    title: 'サンプル初台ヒルズ 2F',
    addr: '渋谷区初台x-x-x',
    rent: '¥115,000',
    layout: '1DK',
    area: '38.00㎡',
    built: '築32年',
    direction: '東',
    moveIn: '¥610,500',
    tags: ['角部屋', '大型収納', '都市ガス']
  },
  {
    label: '幡ヶ谷',
    sub: '1K ・ 徒7分',
    title: 'サンプル幡ヶ谷テラス 705',
    addr: '渋谷区幡ヶ谷x-x-x',
    rent: '¥128,000',
    layout: '1K',
    area: '30.15㎡',
    built: '築12年',
    direction: '南東',
    moveIn: '¥653,800',
    tags: ['オートロック', '24時間管理', '高層階']
  }];

  const p = tabs[active];
  return (
    <div className="feature-visual">
      <div className="fv-tabs">
        <div className="fv-tab-row">
          {tabs.map((t, i) =>
          <button
            key={i}
            type="button"
            className={`fv-tab ${i === active ? 'active' : ''}`}
            onClick={() => setActive(i)}>
            
              <strong>{t.label}</strong>
              <span className="sub">{t.sub}</span>
            </button>
          )}
        </div>
        <div className="fv-tab-body" key={active}>
          <div className="fv-tab-hero">
            <div className="fv-tab-title">{p.title}</div>
            <div className="fv-tab-addr">{p.addr}</div>
            <div className="fv-tab-price">
              <div><span>月額</span><strong>{p.rent}</strong></div>
              <div><span>間取り</span><strong className="jp">{p.layout}</strong></div>
            </div>
          </div>
          <div className="fv-tab-cards">
            <div className="fv-tab-card"><span>専有</span><strong>{p.area}</strong></div>
            <div className="fv-tab-card"><span>築年</span><strong>{p.built}</strong></div>
            <div className="fv-tab-card"><span>向き</span><strong>{p.direction}</strong></div>
          </div>
          <div className="fv-tab-tags">
            {p.tags.map((t, i) =>
            <span className="fv-tab-tag" key={i}>{t}</span>
            )}
          </div>
          <div className="fv-tab-total">
            <span>入居時 概算</span>
            <strong>{p.moveIn}</strong>
          </div>
        </div>
        <div className="fv-tab-pips">
          {tabs.map((_, i) =>
          <span key={i} className={`pip ${i === active ? 'on' : ''}`}></span>
          )}
        </div>
      </div>
    </div>);

}

// Feature visual — fee breakdown (mirrors the actual customer page)
function FeatureSimulator() {
  const rows = [
  { k: '敷金', v: '¥99,000', n: '物件記載値' },
  { k: '礼金', v: '¥20,000', n: '物件記載値' },
  { k: '仲介手数料', v: '¥108,900', n: '賃料1ヶ月分(税込)' },
  { k: '鍵交換費', v: '¥22,000', n: '税込' },
  { k: '火災保険(2年)', v: '¥20,000', n: '加入必須' },
  { k: '保証会社初回料', v: '¥49,500', n: '原文: 初回契約時50%' },
  { k: '日割賃料(目安)', v: '¥59,000', n: '15日換算(目安)。入居日に応じて変動' }];

  return (
    <div className="feature-visual feature-visual-fee">
      <div className="fv-fee">
        <div className="fv-fee-head">初期費用</div>
        <div className="fv-fee-card">
          {rows.map((r, i) =>
          <div className="fv-fee-row" key={i}>
              <div className="l">
                <span className="k">{r.k}</span>
                <span className="n">{r.n}</span>
              </div>
              <span className="v">{r.v}</span>
            </div>
          )}
          <div className="fv-fee-row total">
            <span className="k">初期費用 合計</span>
            <span className="v">¥378,400</span>
          </div>
          <div className="fv-fee-row plus">
            <span className="k">+ 初月家賃(賃料+管理費)</span>
            <span className="v">¥118,000</span>
          </div>
          <div className="fv-fee-row movein">
            <span className="k">= 入居時 概算</span>
            <span className="v">¥496,400</span>
          </div>
        </div>
        <div className="fv-fee-note">※ 契約時期や条件により実際の金額と異なる場合があります。</div>
      </div>
    </div>);

}

// Feature visual — mini-rendering of the actual customer public page
function FeaturePage() {
  return (
    <div className="feature-visual">
      <div className="fv-page">
        <div className="fv-page-frame">
          <div className="fv-page-bar">
            <span></span><span></span><span></span>
            <span className="fv-page-url">ftool.online/p/<em>a8k2x9p</em></span>
          </div>
          <div className="fv-page-scroll">
            <div className="fv-page-inner">
              <div className="fv-page-hero">
                <div className="fv-page-title">サンプルレジデンス代々木 A棟 305</div>
                <div className="fv-page-addr">〒151-XX 東京都渋谷区代々木x-x-x</div>
                <div className="fv-page-headline">
                  <div><span>月額</span><strong>¥118,000</strong></div>
                  <div><span>間取り</span><strong className="jp">1K</strong></div>
                </div>
              </div>
              <div className="fv-page-mysoku">
                <div className="fv-page-mysoku-display">
                  <Mysoku data={MYSOKU_DATA[0]} withLabel={false} />
                </div>
              </div>
              <div className="fv-page-info">
                <div className="fv-page-info-amount">
                  <span>月額(賃料+管理費)</span>
                  <strong>¥118,000<em>/月</em></strong>
                </div>
                <div className="fv-page-info-row"><span>専有面積</span><span>28.40 ㎡</span></div>
                <div className="fv-page-info-row"><span>所在階</span><span>3階 / 南西</span></div>
                <div className="fv-page-info-row"><span>築年数</span><span>築17年</span></div>
              </div>
              <div className="fv-page-section-h">物件位置</div>
              <div className="fv-page-map">
                <div className="pin"></div>
              </div>
              <div className="fv-page-section-h centered">この物件を選ぶ理由</div>
              <div className="fv-page-reasons">
                <div className="fv-page-reason"><span>1</span><div><strong>代々木駅徒歩5分</strong><p>JR・地下鉄複数路線が使える好立地。</p></div></div>
                <div className="fv-page-reason"><span>2</span><div><strong>南西向き・2面採光</strong><p>日当たり良好で開放感のある住空間。</p></div></div>
                <div className="fv-page-reason"><span>3</span><div><strong>充実の防犯設備</strong><p>オートロック・防犯カメラ・宅配ボックス完備。</p></div></div>
              </div>
              <div className="fv-page-section-h">初期費用</div>
              <div className="fv-page-fee">
                <div className="r"><span>礼金</span><span>¥110,000</span></div>
                <div className="r"><span>仲介手数料</span><span>¥121,000</span></div>
                <div className="r"><span>火災保険(2年)</span><span>¥20,000</span></div>
                <div className="r"><span>日割賃料(目安)</span><span>¥55,000</span></div>
                <div className="r total"><span>入居時 概算</span><span>¥501,000</span></div>
              </div>
              <button className="fv-page-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>
            </div>
          </div>
        </div>
      </div>
    </div>);

}

Object.assign(window, { HeroDemo, FeatureTabs, FeatureSimulator, FeaturePage });