/* global React, Reveal, Check */

// ====================== TAX BANNER (2026 宿泊税) ======================
function TaxBanner() {
  return (
    <a href="#features" className="tax-banner">
      <span className="tb-badge"><span className="tb-ping" />2026年4月</span>
      <span className="tb-text">北海道の宿泊税、全道でスタート。<strong><img src="/tomarin/assets/tomarin-wordmark.png" alt="tomarin" className="tm-inline" /> は徴収から申告まで標準対応</strong></span>
      <span className="tb-arrow">→</span>
    </a>
  );
}

// ====================== COST COMPARISON ======================
function CostComparison() {
  const [monthly, setMonthly] = React.useState(1500000);
  const fmt = (n) => '¥' + Math.round(n).toLocaleString('ja-JP');
  const feeRate = 0.15;
  const shift = 0.3; // 直販へ移行する割合
  const otaYearly = monthly * feeRate * 12;
  const withTomarin = monthly * (1 - shift) * feeRate * 12;
  const savings = otaYearly - withTomarin;

  return (
    <section className="section" id="cost">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <h2 className="section-title">その手数料、<br />いくら流れていますか。</h2>
            <p className="section-sub">OTA経由の売上には、10〜25%の手数料がかかります。直販が育つと、宿に残る金額はどう変わるか——試算してみてください。</p>
          </div>
        </Reveal>
        <Reveal>
          <div className="cost-card">
            <div className="cost-slider-row">
              <div className="cost-slider-label">
                <span>OTA経由の月間売上</span>
                <span className="cost-slider-val">{fmt(monthly)}</span>
              </div>
              <input
                type="range" min="300000" max="10000000" step="100000"
                value={monthly}
                onChange={e => setMonthly(Number(e.target.value))}
                className="cost-range"
                style={{ '--fill': `${((monthly - 300000) / (10000000 - 300000)) * 100}%` }}
              />
              <div className="cost-slider-scale"><span>¥30万</span><span>¥1,000万</span></div>
            </div>
            <div className="cost-compare">
              <div className="cost-col">
                <div className="cost-col-label">OTAのみの場合</div>
                <div className="cost-col-num dim">{fmt(otaYearly)}</div>
                <div className="cost-col-note">年間のOTA手数料（15%で試算）</div>
              </div>
              <div className="cost-arrow">→</div>
              <div className="cost-col highlight">
                <div className="cost-col-label">WITH <span className="brand-lower">tomarin</span></div>
                <div className="cost-col-num green">+{fmt(savings)}</div>
                <div className="cost-col-note">直販に3割移行した場合、宿に残る額（年間）</div>
              </div>
            </div>
            <div className="cost-foot">※ OTA手数料15%・直販移行率30%での概算です。実際の料率・移行率は宿により異なります。tomarin の自社予約サイトはOTA手数料がかかりません（Stripe決済手数料は別途）。</div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ====================== VOICE — 導入施設とお客様の声 ======================
const CLIENTS = [
  { name: 'キトウシの森', note: '東川町' },
  { name: '暮らし体験館', note: '東川町' },
  { name: 'コモンズ', note: '東川町' },
  { name: 'みずにわテラス', note: '東川町' },
  { name: 'ふるさと交流センター', note: '東川町' },
  { name: 'ensembles', note: 'COMING SOON', upcoming: true },
];

// ====================== VOICE — testimonial cards ======================
const AV = (seed) => `https://api.dicebear.com/9.x/notionists-neutral/svg?seed=${seed}&backgroundColor=f5fbee,fdfaea,f0f8fb`;
const VOICES = [
  {
    quote: 'お客様の顔と名前、前回のご要望まで、スタッフ全員が同じ画面で見られる。「おかえりなさい」と言える宿に、少しずつ近づいています。',
    name: '運営ご担当',
    org: 'キトウシの森',
    avatar: AV('kitoushi-ops'),
  },
  {
    quote: 'チェックインと精算が自動になって、夕方のフロントの混雑がなくなりました。浮いた時間は、お客様との会話に使っています。',
    name: 'フロント担当',
    org: '暮らし体験館',
    avatar: AV('kurashi-front'),
  },
  {
    quote: '宿泊税の集計と申告書が自動で出るのは本当に助かる。月末の事務作業が、まるまるなくなりました。',
    name: '支配人',
    org: 'みずにわテラス',
    avatar: AV('mizuniwa-mgr'),
  },
  {
    quote: '予約がひとつの台帳にまとまって、ダブルブッキングの不安がなくなりました。少人数でも回せています。',
    name: 'オーナー',
    org: 'コモンズ',
    avatar: AV('commons-owner'),
  },
  {
    quote: '団体と個人の予約が混ざっても迷わない。スタッフ研修も半日で終わり、翼日から普通に使えていました。',
    name: '事務局',
    org: 'ふるさと交流センター',
    avatar: AV('furusato-office'),
  },
  {
    quote: '常連のお客様の顔ぶれが、数字で見えるようになったのが嬉しい。接客の引き継ぎがメモ一つで済みます。',
    name: 'フロントスタッフ',
    org: 'キトウシの森',
    avatar: AV('kitoushi-staff'),
  },
];

function Testimonial() {
  return (
    <section className="section" id="voice">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <h2 className="section-title">現場の声が、<br />いちばんの証明。</h2>
          </div>
        </Reveal>
        <div className="voice-grid">
          {VOICES.map((v, i) => (
            <Reveal key={v.name} delay={i * 120}>
              <div className="voice-tile">
                <p className="vt-quote">{v.quote}</p>
                <div className="vt-person">
                  <span className="vt-avatar"><img src={v.avatar} alt="" /></span>
                  <span className="vt-who">
                    <span className="vt-name">{v.name}</span>
                    <span className="vt-role">{v.org} · 東川町</span>
                  </span>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ====================== INTEGRATION MARQUEE ======================
const WM = (f) => `https://commons.wikimedia.org/wiki/Special:FilePath/${encodeURIComponent(f)}`;
const INTEGRATIONS = [
  { name: 'らく通 with', logo: 'https://www.raku-2.jp/files/images/header/logo.png' },
  { name: 'TLリンカーン', logo: 'https://i0.wp.com/www.kankokeizai.com/wp-content/uploads/logo_Lincoln_4c.png', upcoming: true },
  { name: 'Beds24', logo: 'https://beds24.com/webinclude/beds24_channel_manager.svg', isNew: true },
  { name: 'RemoteLock', logo: 'https://remotelock.kke.co.jp/hubfs/renewal2018/image/common/logo/logo2.svg' },
  { name: 'Stripe', logo: WM('Stripe Logo, revised 2016.svg') },
  { name: 'eLTAX', logo: 'https://www.eltax.lta.go.jp/common/images/logo_eltax01.png', upcoming: true },
  { name: '楽天トラベル', logo: 'https://trvimg.r10s.jp/share/common/images/travel-logo-pc.png' },
  { name: 'じゃらん', logo: 'https://i0.wp.com/kawashimablog.com/wp-content/uploads/2018/06/JLN_Top_Logo.png' },
  { name: '一休.com', logo: 'https://www.ikyu.com/design-system/assets/logos/png/ikyu-stay.png' },
  { name: 'Yahoo!トラベル', logo: WM('Yahoo Japan Logo.svg'), jp: 'トラベル' },
  { name: 'Booking.com', logo: WM('Booking.com logo.svg') },
  { name: 'Airbnb', logo: WM('Airbnb Logo Bélo.svg') },
  { name: 'Expedia', logo: WM('Expedia Logo 2023.svg') },
  { name: 'Agoda', logo: WM('Agoda logo 2019.svg') },
  { name: 'Trip.com', logo: WM('Trip.com logo.svg') },
  { name: 'JALパック', logo: 'https://jalpak.jp/assets/common/img/jal_icon.png' },
];

const favicon = (domain) => `https://www.google.com/s2/favicons?domain=${domain}&sz=64`;

function MarqueeItem({ item }) {
  const [failed, setFailed] = React.useState(false);
  return (
    <span className={`marquee-item ${item.upcoming ? 'upcoming' : ''}`}>
      {item.logo && !failed
        ? (
          <>
            <img src={item.logo} alt={item.name} className="marquee-logo" onError={() => setFailed(true)} />
            {item.jp && <span className="marquee-jp">{item.jp}</span>}
          </>
        )
        : (
          <>
            {item.domain && (
              <img src={favicon(item.domain)} alt="" className="marquee-ico"
                onError={e => { e.target.style.display = 'none'; }} />
            )}
            {item.name}
          </>
        )}
      {item.upcoming && <span className="marquee-soon">COMING SOON</span>}
      {item.isNew && <span className="marquee-new">NEW</span>}
    </span>
  );
}

function IntegrationMarquee() {
  const items = [...INTEGRATIONS, ...INTEGRATIONS];
  return (
    <div className="marquee-strip">
      <div className="marquee-label">INTEGRATIONS · 外部連携</div>
      <div className="marquee-window">
        <div className="marquee-track">
          {items.map((it, i) => (
            <MarqueeItem key={i} item={it} />
          ))}
        </div>
      </div>
      <div className="marquee-foot">※ OTAはサイトコントローラー「らく通 with」経由で接続。接続数に制限はありません。</div>
    </div>
  );
}

// ====================== SCREENS GALLERY — 機能画面 ======================
const SCREEN_CATS = ['すべて', '予約・客室', '顧客', '決済・税務', '運営', '連携', '分析・AI'];
const FEATURE_LIST = [
  ['代行予約', '予約・客室'],
  ['顧客タイプ別の予約ルール', '予約・客室'],
  ['滞在日数の変更', '予約・客室'],
  ['オプション・付帯商品の管理', '予約・客室'],
  ['アップセルの事前提案', '顧客'],
  ['客室グレードアップ販売', '予約・客室'],
  ['アーリーIN / レイトOUT', '予約・客室'],
  ['体験・レンタルの在庫管理', '運営'],
  ['各種割引設定', '予約・客室'],
  ['キャンセルポリシー設定', '決済・税務'],
  ['自動配信メール設定', '運営'],
  ['複数施設の一元管理', '連携'],
];
const SCREEN_CARDS = [
  { key: 'booking', title: 'オンライン予約', cat: '予約・客室', color: 'green', cap: '自社予約サイトを、日英対応で開設。' },
  { key: 'ledger', title: '宿泊台帳', cat: '予約・客室', color: 'green', cap: '予約はドラッグで移動。空室がひと目で。' },
  { key: 'detail', title: '予約詳細', cat: '予約・客室', color: 'green', cap: '人数・食事・要望まで、1枚のカルテに。' },
  { key: 'upsell', title: 'オプション販売', cat: '予約・客室', color: 'green', cap: '食事・体験・送迎・客室UPを、予約時にそのまま販売。' },
  { key: 'rate', title: '客室・料金カレンダー', cat: '予約・客室', color: 'green', cap: '1ヶ月分の料金を、曜日・繁忙日ごとに一括設定。' },
  { key: 'assign', title: '自動部屋割り', cat: '予約・客室', color: 'green', cap: '予約を最適配置。稼働率を上げ、清掃コストを下げる。' },
  { key: 'crm', title: '顧客台帳', cat: '顧客', color: 'blue', cap: '宿泊履歴と好みが、自動で積み上がる。' },
  { key: 'profile', title: '顧客カルテ', cat: '顧客', color: 'blue', cap: 'おもてなしメモをスタッフ全員で共有。' },
  { key: 'loyalty', title: '会員制度', cat: '顧客', color: 'blue', cap: '常連を見える化し、再訪を後押し。' },
  { key: 'survey', title: '予約事前アンケート', cat: '顧客', color: 'blue', cap: '到着前に、好みとご要望を把握。' },
  { key: 'upsellauto', title: 'アップセル自動提案', cat: '顧客', color: 'blue', cap: 'アンケートの回答に合わせて、到着前にオプションを提案。' },
  { key: 'pay', title: 'オンライン決済', cat: '決済・税務', color: 'green', cap: '予約時にカード登録。当日はキャッシュレス精算。' },
  { key: 'tax', title: '宿泊税レポート', cat: '決済・税務', color: 'yellow', cap: '徴収から申告書まで、自治体方式で自動。' },
  { key: 'clean', title: '清掃管理', cat: '運営', color: 'yellow', cap: '外注スタッフには必要な画面だけ。' },
  { key: 'checkin', title: 'スマートチェックイン', cat: '運営', color: 'yellow', cap: 'QRでセルフチェックイン。鍵はスマートロック。' },
  { key: 'lock', title: 'スマートロック連携', cat: '運営', color: 'yellow', cap: '4桁PINを自動発行。滞在中だけ有効。' },
  { key: 'ota', title: 'OTA連携', cat: '連携', color: 'green', cap: '在庫・料金をリアルタイム同期。' },
  { key: 'dash', title: 'ダッシュボード', cat: '分析・AI', color: 'blue', cap: '今日の宿の状態が、開いた瞬間にわかる。' },
  { key: 'sales', title: '売上分析', cat: '分析・AI', color: 'blue', cap: 'OTA/直販比率・リピーター率を毎月自動で。' },
  { key: 'ai', title: 'AI Buddy', cat: '分析・AI', color: 'blue', cap: '多言語の問い合わせも、経営の相談も。2027年ローンチ予定。' },
];

function OptionIcon({ k }) {
  const p = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const wrap = c => <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">{c}</svg>;
  if (k === 'opt-breakfast') return wrap(<g {...p}><path d="M4 11h13a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4Z" /><path d="M17 11h1.5a2 2 0 0 1 0 4H17" /><path d="M7 7.5c0-1 1-1.3 1-2.3M11 7.5c0-1 1-1.3 1-2.3" /><path d="M4.5 18h13" /></g>);
  if (k === 'opt-dinner') return wrap(<g {...p}><path d="M7 3v7a2 2 0 0 0 2 2v9" /><path d="M7 3v5M10 3v5" /><path d="M17 3c-1.5 1.5-2 3.5-2 5.5S15.5 12 17 12v9" /></g>);
  if (k === 'opt-activity') return wrap(<g {...p}><path d="M3 18h18" /><path d="M5 18 10 7l3.5 6" /><path d="m11.5 14 3-5 5 9" /><circle cx="17.5" cy="5" r="1.6" /></g>);
  return wrap(<g {...p}><path d="M4 16v-3.2L5.8 8A2 2 0 0 1 7.7 6.7h8.6A2 2 0 0 1 18.2 8L20 12.8V16" /><path d="M4 13h16" /><path d="M4 16h3v1.8H4zM17 16h3v1.8h-3z" /><circle cx="8" cy="13" r="0.1" /></g>);
}

function ScreenCardBody({ k }) {
  if (k === 'booking') return (
    <div className="sc-body">
      <div className="sc-line"><span>チェックイン</span><strong>4/25（土）</strong></div>
      <div className="sc-line"><span>チェックアウト</span><strong>4/27（月）</strong></div>
      <div className="sc-line"><span>大人 2名</span><strong>デラックス和室</strong></div>
      <div className="sc-book-btn">空室を検索する</div>
      <div className="sc-line" style={{ borderBottom: 'none' }}><span>表示言語</span><strong>日本語 / English</strong></div>
    </div>
  );
  if (k === 'lock') return (
    <div className="sc-body">
      <div className="sc-line"><span>田中様 · 松の間</span><strong className="ok">PIN 発行済 ✓</strong></div>
      <div className="sc-pin">
        <i>4</i><i>8</i><i>2</i><i>6</i>
      </div>
      <div className="sc-line"><span>有効期間</span><strong>4/25 15:00 → 4/27 10:00</strong></div>
      <div className="sc-line" style={{ borderBottom: 'none' }}><span>連携</span><strong>RemoteLock</strong></div>
    </div>
  );
  if (k === 'survey') return (
    <div className="sc-body">
      <div className="sc-line"><span>ご到着時間</span><strong>17:00頃</strong></div>
      <div className="sc-line"><span>アレルギー</span><strong>甲殻類</strong></div>
      <div className="sc-line"><span>ご旅行の目的</span><strong>家族旅行</strong></div>
      <div className="sc-line total"><span>回答状況</span><strong className="ok">到着前に回答済 ✓</strong></div>
    </div>
  );
  if (k === 'upsellauto') return (
    <div className="sc-body">
      <div className="sc-line"><span>田中様 · 到着3日前</span><strong className="ok">配信済 ✓</strong></div>
      <div className="sc-line"><span>記念日 → ケーキ</span><strong>¥3,800</strong></div>
      <div className="sc-line"><span>空室連動 → 客室UP</span><strong>¥6,000</strong></div>
      <div className="sc-line"><span>18時着 → 送迎</span><strong>¥3,000</strong></div>
      <div className="sc-line total"><span>提案の受注率</span><strong className="ok">32%</strong></div>
    </div>
  );
  if (k === 'assign') return (
    <div className="sc-body">
      {[
        ['松の間', [[0, 38, 'green'], [40, 36, 'green']]],
        ['竹の間', [[0, 34, 'blue'], [36, 40, 'green', true]]],
        ['梅の間', [[10, 44, 'yellow']]],
      ].map(([r, bars]) => (
        <div className="sc-ledger-row" key={r}>
          <span className="sc-room">{r}</span>
          <span className="sc-track">
            {bars.map(([off, w, c, moved], i) => (
              <i key={i} className={`${c} ${moved ? 'moved' : ''}`} style={{ left: off + '%', width: w + '%' }}></i>
            ))}
          </span>
        </div>
      ))}
      <div className="sc-ledger-row">
        <span className="sc-room">桜の間</span>
        <span className="sc-track empty"><em>予約を集約 → 清掃不要</em></span>
      </div>
      <div className="sc-line" style={{ marginTop: 'auto' }}><span>稼働率</span><strong className="ok">↑ 上昇</strong></div>
      <div className="sc-line" style={{ borderBottom: 'none' }}><span>清掃コスト</span><strong className="ok">↓ 削減</strong></div>
    </div>
  );
  if (k === 'dash') return (
    <div className="sc-body">
      <div className="sc-tiles">
        <div className="sc-tile"><span>予約</span><strong>142</strong></div>
        <div className="sc-tile"><span>稼働</span><strong>82%</strong></div>
        <div className="sc-tile"><span>リピーター</span><strong>34%</strong></div>
        <div className="sc-tile"><span>ADR</span><strong>¥18.4k</strong></div>
      </div>
      <svg viewBox="0 0 200 56" className="sc-chart">
        <polyline points="0,46 25,40 50,42 75,32 100,35 125,24 150,27 175,15 200,10" fill="none" stroke="#6FAF2A" strokeWidth="2" strokeLinecap="round" />
      </svg>
    </div>
  );
  if (k === 'ledger') return (
    <div className="sc-body">
      {[['松の間', 34, 'green'], ['竹の間', 20, 'yellow'], ['梅の間', 48, 'blue'], ['桜の間', 12, 'green'], ['楓の間', 40, 'green']].map(([r, off, c]) => (
        <div className="sc-ledger-row" key={r}>
          <span className="sc-room">{r}</span>
          <span className="sc-track"><i className={c} style={{ left: off + '%', width: '38%' }}></i></span>
        </div>
      ))}
      <div className="sc-line" style={{ borderBottom: 'none', marginTop: 'auto' }}><span>本日稼働率</span><strong className="ok">82%</strong></div>
    </div>
  );
  if (k === 'detail') return (
    <div className="sc-body">
      <div className="sc-cust"><i>田</i><span>田中 さくら 様</span><em>2名 · 2泊</em></div>
      <div className="sc-line"><span>チェックイン</span><strong>4/25 15:00</strong></div>
      <div className="sc-line"><span>お食事</span><strong>朝食のみ</strong></div>
      <div className="sc-line"><span>ご要望</span><strong>ほうじ茶を用意</strong></div>
      <div className="sc-line total"><span>ステータス</span><strong>決済済 ✓</strong></div>
    </div>
  );
  if (k === 'upsell') return (
    <div className="sc-body">
      {[
        ['opt-breakfast', '朝食（和定食）', '数量 2', '¥1,800'],
        ['opt-dinner', '夕食 地場食材コース', '数量 2', '¥5,500'],
        ['opt-activity', 'スノーシュー体験', '9:00〜', '¥4,500'],
        ['opt-transfer', '空港送迎（片道）', '17:00 着', '¥3,000'],
      ].map(([id, name, meta, price]) => (
        <div className="sc-opt" key={id}>
          <div className="sc-opt-thumb"><OptionIcon k={id} /></div>
          <div className="sc-opt-main"><strong>{name}</strong><em>{meta}</em></div>
          <span className="sc-opt-add">{price}</span>
        </div>
      ))}
      <div className="sc-line total"><span>1予約あたり追加売上</span><strong>+¥17,600</strong></div>
    </div>
  );
  if (k === 'rate') return (
    <div className="sc-body">
      <div className="sc-month-head"><span>2026年 4月</span><em>デラックス和室</em></div>
      <div className="sc-month-grid">
        {['日','月','火','水','木','金','土'].map(w => <span className="sc-mwd" key={w}>{w}</span>)}
        {Array.from({ length: 30 }, (_, i) => {
          const dow = (i + 3) % 7; // 4/1 = 水
          const hot = dow === 5 || dow === 6;
          const peak = i >= 26; // GW直前
          return (
            <span className={`sc-mcell ${hot ? 'hot' : ''} ${peak ? 'peak' : ''}`} key={i}>
              <span>{i + 1}</span>
              <strong>{peak ? 24 : hot ? 18 : 12}</strong>
            </span>
          );
        })}
      </div>
      <div className="sc-line" style={{ borderBottom: 'none', marginTop: 'auto' }}><span>週末・GWを選択中</span><strong className="ok">一括変更 ✓</strong></div>
    </div>
  );
  if (k === 'crm') return (
    <div className="sc-body">
      {[['田', '田中 さくら 様', '★ リピーター'], ['高', '高橋 誠 様', '5回'], ['C', 'Chen Wei 様', 'EN'], ['小', '小林 直子 様', '2回']].map(([i, n, m]) => (
        <div className="sc-cust" key={n}><i>{i}</i><span>{n}</span><em>{m}</em></div>
      ))}
    </div>
  );
  if (k === 'profile') return (
    <div className="sc-body">
      <div className="sc-cust"><i>田</i><span>田中 さくら 様</span><em>滞在3回</em></div>
      <div className="sc-memo">· コーヒーよりほうじ茶</div>
      <div className="sc-memo">· 到着は夕方が多い</div>
      <div className="sc-memo">· お子さま8歳 · 朝食パン抜き</div>
      <div className="sc-tags-row">
        <span className="mc-tag green">#和食</span>
        <span className="mc-tag yellow">#ファミリー</span>
      </div>
    </div>
  );
  if (k === 'loyalty') return (
    <div className="sc-body">
      <div className="sc-line"><span>ゴールド会員</span><strong>12名</strong></div>
      <div className="sc-line"><span>シルバー会員</span><strong>38名</strong></div>
      <div className="sc-line"><span>今月の新規会員</span><strong className="ok">+9名</strong></div>
      <div className="sc-line total"><span>会員の再訪率</span><strong>41%</strong></div>
    </div>
  );
  if (k === 'pay') return (
    <div className="sc-body">
      <div className="sc-recap">
        <span className="sc-recap-icon">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#3E6E12" strokeWidth="1.8"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
        </span>
        <span className="sc-recap-main">
          <strong>4/25（土）→ 4/27（月）</strong>
          <em>デラックス和室 · 2名 · 2泊</em>
        </span>
      </div>
      <div className="sc-field">
        <span className="sc-field-label">カード番号</span>
        <span className="sc-field-input">•••• •••• •••• 4242</span>
      </div>
      <div className="sc-brands">
        {['VISA', 'Mastercard', 'JCB', 'AMEX', 'Diners'].map(b => <span key={b}>{b}</span>)}
      </div>
      <div className="sc-line"><span>宿泊料金 + 宿泊税<i className="sc-tax-opt">税込／税別 選択可</i></span><strong>¥48,400</strong></div>
      <div className="sc-book-btn">¥48,400 を支払う</div>
      <div className="sc-secure">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
        Stripe で保護された決済
      </div>
    </div>
  );
  if (k === 'tax') return (
    <div className="sc-body">
      <div className="sc-line"><span>4月分 · 東川町</span><strong>¥42,800</strong></div>
      <div className="sc-line"><span>課税泊数</span><strong>214泊</strong></div>
      <div className="sc-line"><span>申告書</span><strong className="ok">自動生成 ✓</strong></div>
      <div className="sc-line"><span>eLTAX</span><strong className="wait">連携予定</strong></div>
    </div>
  );
  if (k === 'clean') return (
    <div className="sc-body">
      {[['松の間', 1], ['竹の間', 1], ['梅の間', 0], ['桜の間', 2]].map(([r, st]) => (
        <div className="sc-line" key={r}><span>{r}</span><strong className={st === 1 ? 'ok' : st === 0 ? 'wait' : ''}>{st === 1 ? '清掃完了 ✓' : st === 0 ? '作業中…' : '未着手'}</strong></div>
      ))}
      <div className="sc-line total"><span>外注アクセス</span><strong>清掃画面のみ</strong></div>
    </div>
  );
  if (k === 'checkin') return (
    <div className="sc-body sc-center">
      <div className="sc-qr">
        {Array.from({ length: 25 }, (_, i) => <i key={i} className={[0,2,3,4,6,8,10,12,14,16,18,20,21,22,24].includes(i) ? 'on' : ''}></i>)}
      </div>
      <div className="sc-line" style={{ borderBottom: 'none', width: '100%' }}><span>本日のセルフチェックイン</span><strong className="ok">8件 ✓</strong></div>
    </div>
  );
  if (k === 'ota') return (
    <div className="sc-body">
      {[['楽天トラベル', '同期済'], ['じゃらん', '同期済'], ['Booking.com', '同期済'], ['Airbnb', '同期中…']].map(([n, s]) => (
        <div className="sc-line" key={n}><span>{n}</span><strong className={s === '同期済' ? 'ok' : 'wait'}>{s}</strong></div>
      ))}
      <div className="sc-line total"><span>在庫・料金</span><strong>リアルタイム反映</strong></div>
    </div>
  );
  if (k === 'sales') return (
    <div className="sc-body">
      <div className="sc-bars" style={{ flex: 1, display: 'flex' }}>
        {[38, 52, 44, 66, 58, 80, 72].map((h, i) => <i key={i} style={{ height: h + '%' }}></i>)}
      </div>
      <div className="sc-line" style={{ marginTop: 10 }}><span>直販比率</span><strong className="ok">48% (+6pt)</strong></div>
    </div>
  );
  return (
    <div className="sc-body">
      <div className="sc-bubble user">今月のリピーターは？</div>
      <div className="sc-bubble ai">34%です。前月比 +3pt。再訪の多い週末に向けて、会員向けプランの配信をおすすめします。</div>
      <div className="sc-bubble user">英語の問い合わせが来てる</div>
      <div className="sc-bubble ai">返信案を用意しました ✓</div>
    </div>
  );
}

function ScreensGallery() {
  const [cat, setCat] = React.useState('すべて');
  const filtered = cat === 'すべて' ? SCREEN_CARDS : SCREEN_CARDS.filter(c => c.cat === cat);
  return (
    <section className="section screens-section" id="features">
      <div className="container">
        <Reveal>
          <div className="section-head sg-head">
            <h2 className="section-title">宿の仕事が、<br/>楽しくなる。</h2>
          </div>
        </Reveal>
        <Reveal>
          <div className="sg-tabs-wrap">
            <div className="sg-tabs">
              {SCREEN_CATS.map(c => (
                <button key={c} onClick={() => setCat(c)} className={cat === c ? 'active' : ''}>
                  {c}
                </button>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
      <div className="sg-bleed">
        <div className="sg-window" key={cat}>
          <div className="sg-track" style={{ animationDuration: `${Math.max(filtered.length * 5, 20)}s` }}>
            {[0, 1].map(dup => (
              <div className="sg-set" key={dup} aria-hidden={dup === 1 ? 'true' : undefined}>
                {filtered.map((c, i) => (
                  <div className="sg-item sg-anim" style={{ animationDelay: `${i * 45}ms` }} key={c.key}>
                    <div className="sg-label">{c.title}</div>
                    <div className={`screen-card sg-tall ${c.color}`} data-k={c.key}>
                      <div className="sc-chrome"><i></i><i></i><i></i></div>
                      <ScreenCardBody k={c.key} />
                      <div className="sc-cap">{c.cap}</div>
                    </div>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="container">
        <div className="sg-featlist" key={'fl-' + cat}>
          {(cat === 'すべて' ? FEATURE_LIST : FEATURE_LIST.filter(f => f[1] === cat)).map(([label], i) => (
            <span className="sg-feat sg-anim" style={{ animationDelay: `${i * 25}ms` }} key={label}>
              <Check color="#6FAF2A" size={12} />{label}
            </span>
          ))}
        </div>
        <p className="features-foot">全機能の詳細はデモにてご案内します。機能は継続的に追加されています。</p>
      </div>
    </section>
  );
}

Object.assign(window, { TaxBanner, CostComparison, Testimonial, IntegrationMarquee, ScreensGallery, ScreensMarquee: ScreensGallery });