/* global React, Reveal, Check, BrandMark, Count */

// ====================== FEATURES — 6 categories ======================
const FEATURES = [
  { cat: '予約・客室', color: 'green', title: '予約・客室管理', tag: '旅の入口を、宿の表情に。',
    body: 'カレンダー予約台帳 · 客室・料金カレンダー · 顧客タイプ別の予約ルール · 連泊・代理予約',
    icon: <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6"><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> },
  { cat: '顧客', color: 'blue', title: '顧客・CRM', tag: 'ファンを育てる、最初の一歩。',
    body: '顧客台帳 · タグ機能 · 会員制度（ロイヤリティ） · 宿泊履歴・好み・要望の一元化',
    icon: <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/></svg> },
  { cat: '決済', color: 'green', title: '決済・税務', tag: '取りこぼさない決済、自動の宿泊税。',
    body: '**決済・キャンセル料の自動徴収** · キャンセルポリシー設定 · **宿泊税の徴収・申告対応**',
    icon: <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="6" width="18" height="13" rx="2"/><line x1="3" y1="10" x2="21" y2="10"/></svg> },
  { cat: '運営', color: 'yellow', title: '現場・運営', tag: 'スタッフを、本来のおもてなしに戻す。',
    body: 'スマートチェックイン · スマートロック連携 · 清掃外注者のアクセス制限 · 自動メール配信',
    icon: <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3"/></svg> },
  { cat: '連携', color: 'green', title: 'チャネル連携', tag: '既存のシステムを、そのままで。',
    body: 'OTA連携（サイトコントローラー） · 自社予約サイト（日英対応） · らく通／TLリンカーン／RemoteLock',
    icon: <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg> },
  { cat: '分析', color: 'blue', title: '分析・AI', tag: '経営を、数字で見通す。',
    body: '経営ダッシュボード · リピーター分析 · OTA／直販比率 · **AI Buddy アシスタント**',
    icon: <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg> },
];
const BENTO_AREAS = { '決済': 'pay', '顧客': 'crm', '分析': 'ai', '予約・客室': 'book', '運営': 'ops', '連携': 'link' };

function Features() {
  const renderBody = (b) => {
    const parts = b.split(/(\*\*[^*]+\*\*)/g);
    return parts.map((p, i) => p.startsWith('**') ? <strong key={i}>{p.slice(2, -2)}</strong> : p);
  };
  const order = ['決済', '顧客', '分析', '予約・客室', '運営', '連携'];
  const cells = order.map(cat => FEATURES.find(f => f.cat === cat));
  return (
    <section className="section bg-off" id="features">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <h2 className="section-title">宿の仕事を、ひとつに。</h2>
            <p className="section-sub">予約から経営分析まで。tomarin は宿に必要な機能を、ひとつの画面にまとめます。</p>
          </div>
        </Reveal>
        <Reveal>
          <div className="bento-grid">
            {cells.map((f) => (
              <div key={f.title} className={`bento-cell area-${BENTO_AREAS[f.cat]}`}>
                <div className="bento-head">
                  <div className="bento-icon">{f.icon}</div>
                  <div className="bento-cat">{f.cat}</div>
                </div>
                <h4>{f.title}</h4>
                <div className="bento-tagline">{f.tag}</div>
                <div className="bento-body">{renderBody(f.body)}</div>
                {f.cat === '決済' && (
                  <div className="bento-receipt">
                    <div className="bento-receipt-inner">
                      <div className="bento-receipt-tag">✓ 宿泊税 自動算定</div>
                      <div className="bento-receipt-row"><span>宿泊料金 · 2泊</span><span className="val">¥48,000</span></div>
                      <div className="bento-receipt-row"><span>宿泊税（東川町 · 定額）</span><span className="val">¥400</span></div>
                      <div className="bento-receipt-row total"><span>登録カードへ自動徴収</span><span className="val">¥48,400</span></div>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </Reveal>
        <p className="features-foot">全機能の詳細はデモにてご案内します。機能は継続的に追加されています。</p>
      </div>
    </section>
  );
}

// ====================== RESERVATION DEMO (Dashboard Showcase) ======================
function ReservationDemo() {
  const [bookings, setBookings] = React.useState([
    { room: 0, start: 0, len: 3, name: '山田 様', type: 'green', meta: '2名 · 2泊' },
    { room: 0, start: 5, len: 2, name: '伊藤 様', type: 'blue', meta: 'リピーター' },
    { room: 0, start: 9, len: 3, name: '佐藤 様', type: 'green', meta: '3名' },
    { room: 1, start: 1, len: 2, name: 'Chen 様', type: 'yellow', meta: '海外 · EN' },
    { room: 1, start: 6, len: 4, name: '田中 様', type: 'green', meta: '2泊' },
    { room: 1, start: 11, len: 3, name: '清掃', type: 'gray', meta: 'メンテ' },
    { room: 2, start: 0, len: 4, name: '高橋 様', type: 'blue', meta: 'リピーター' },
    { room: 2, start: 7, len: 2, name: '小林 様', type: 'green', meta: '夫婦' },
    { room: 3, start: 2, len: 3, name: 'Smith 様', type: 'yellow', meta: 'EN · 家族' },
    { room: 3, start: 8, len: 4, name: '中村 様', type: 'green', meta: '連泊' },
  ]);
  const [newIdx, setNewIdx] = React.useState(-1);

  const rooms = [
    { name: '松の間', type: 'デラックス和室' },
    { name: '竹の間', type: 'スタンダード和室' },
    { name: '梅の間', type: 'ツイン洋室' },
    { name: '桜の間', type: 'ファミリー和洋室' },
  ];

  React.useEffect(() => {
    const t = setTimeout(() => {
      setBookings(b => {
        const next = [...b, { room: 2, start: 4, len: 2, name: '新規予約', type: 'green', meta: 'たった今', isNew: true }];
        setNewIdx(next.length - 1);
        setTimeout(() => setNewIdx(-1), 3000);
        return next;
      });
    }, 3500);
    return () => clearTimeout(t);
  }, []);

  const days = Array.from({ length: 14 }, (_, i) => {
    const d = new Date(2026, 3, 19 + i);
    return {
      num: d.getDate(),
      wk: ['日','月','火','水','木','金','土'][d.getDay()],
      isWeekend: d.getDay() === 0 || d.getDay() === 6,
      isToday: i === 1,
    };
  });

  return (
    <section className="section bg-off" id="demo">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <h2 className="section-title">宿の状況が、<br/>ひと目でわかる。</h2>
            <p className="section-sub">予約・稼働・売上・チェックイン状況まで、必要な情報が一画面に。スマホでもPCでも、同じ画面で操作できます。</p>
          </div>
        </Reveal>
        <Reveal>
          <div className="demo-wrap">
            <div className="demo-card">
              <div className="demo-head">
                <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                  <div className="demo-title">宿泊台帳</div>
                  <div className="ticker"><span className="ping" />LIVE</div>
                </div>
                <div className="demo-right">
                  <button className="demo-ctrl">‹</button>
                  <span style={{ minWidth: 100, textAlign: 'center' }}>2026年 4月</span>
                  <button className="demo-ctrl">›</button>
                </div>
              </div>
              <div style={{ overflowX: 'auto' }}>
                <div className="chart-grid" style={{ minWidth: 720 }}>
                  <div className="room-head" style={{ background: 'white', borderBottom: '0.5px solid var(--border-subtle)' }}>客室 / 日付</div>
                  {days.map((d, i) => (
                    <div key={i} className={`day-head ${d.isWeekend ? 'weekend' : ''} ${d.isToday ? 'today' : ''}`}>
                      <span className="wk">{d.wk}</span>
                      <span className="num">{d.num}</span>
                    </div>
                  ))}
                  {rooms.map((r, rIdx) => (
                    <React.Fragment key={r.name}>
                      <div className="room-head">
                        {r.name}
                        <span className="type">{r.type}</span>
                      </div>
                      {days.map((d, i) => (
                        <div key={i} className={`cell ${d.isWeekend ? 'weekend' : ''}`} style={{ position: 'relative' }}>
                          {bookings.filter(b => b.room === rIdx && b.start === i).map((b, bi) => {
                            const gIdx = bookings.indexOf(b);
                            return (
                              <div key={bi} className={`booking ${b.type} ${gIdx === newIdx ? 'new' : ''}`}
                                style={{ width: `calc(${b.len * 100}% - 6px)` }}>
                                <span className="name">{b.name}</span>
                                <span className="meta">{b.meta}</span>
                              </div>
                            );
                          })}
                        </div>
                      ))}
                    </React.Fragment>
                  ))}
                </div>
              </div>
              <div className="demo-footer">
                <div className="demo-legend">
                  <span><i className="green" />直接予約</span>
                  <span><i className="blue" />リピーター</span>
                  <span><i className="yellow" />OTA / 海外</span>
                </div>
                <div>本日稼働率 <strong style={{ color: 'var(--green-text)' }}>82%</strong></div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ====================== PROOF — 導入実績 (was Case Studies) ======================
function CaseStudies() {
  const stats = [
    { label: 'SCALE', value: '57', unit: '室', note: '複数施設で稼働中' },
    { label: 'REVENUE', value: '+20.2', unit: '%', note: '宿の売上の伸び' },
    { label: 'LENGTH OF STAY', value: '1.72', unit: '泊', note: '平均滞在日数の伸び' },
    { label: 'REPEAT RATE', value: '31.0', unit: '%', note: '毎年再訪されるお客様の割合' },
  ];
  const points = [
    { num: '01', t: '顧客資本が、宿に蓄積する', b: '「誰が・何を喜び・いつ戻ったか」が宿の資産に。OTAでは見えない情報。' },
    { num: '02', t: '国内ファンを軸とした客層', b: '短期インバウンドではなく、年単位で再訪する国内ファンが育つ。' },
    { num: '03', t: '現場業務の時間が浮く', b: '予約・精算・顧客台帳を一元化。OTA手数料の流出も抑えられる。' },
  ];
  return (
    <section className="section" id="case">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <h2 className="section-title">数字が、<br/>変化を裏づけている。</h2>
            <p className="section-sub">
              導入企業での実績値。導入から約1.5年で、宿の経営指標に
              <span className="mark-soft">明確な変化</span>があらわれています。
            </p>
          </div>
        </Reveal>
        <Reveal>
          <div className="proof-grid">
            {stats.map((s, i) => (
              <div className="proof-cell" key={i}>
                <div className="proof-label">{s.label}</div>
                <div className="proof-value">
                  <span className="proof-num">{s.value}</span>
                  <span className="proof-unit">{s.unit}</span>
                </div>
                <div className="proof-note">{s.note}</div>
              </div>
            ))}
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div className="proof-points">
            {points.map(p => (
              <div className="proof-point" key={p.num}>
                <div className="pp-num">{p.num}</div>
                <div className="pp-t">{p.t}</div>
                <div className="pp-b">{p.b}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ====================== PRICING — STARTER + GROWTH ======================
function Pricing() {
  return (
    <section className="section" id="pricing">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <h2 className="section-title">
              宿の規模に、<br/>合わせて。
            </h2>
            <p className="section-sub">初期費用なし。宿の規模や運用に合わせたプランを、お見積もりします。</p>
          </div>
        </Reveal>
        <Reveal>
          <div className="pv2-wrap">
            <div className="pv2-grid">
              {/* Starter — popular */}
              <div className="pv2-card pv2-popular">
                <div className="pv2-badge">人気</div>
                <div className="pv2-name">Starter</div>
                <p className="pv2-blurb">まずは、使ってみる。予約情報をひとつの場所に。</p>
                <div className="pv2-price">
                  <span className="pv2-currency">¥</span>
                  <span className="pv2-num">0</span>
                  <span className="pv2-unit">固定費 ／ 月</span>
                </div>
                <div className="pv2-price2">＋ 決済額の <span className="pv2-pct">5%</span></div>
                <div className="pv2-caption">初期費用なし</div>
                <a href="/tomarin/shiryou-seikyuu.html" className="btn btn-dark pv2-btn">お問い合わせ</a>
                <div className="pv2-incl">含まれる機能:</div>
                <ul className="pv2-features">
                  <li><FeatIcon name="cal" />予約・顧客・客室管理</li>
                  <li><FeatIcon name="card" />決済・自動精算・宿泊税対応</li>
                  <li><FeatIcon name="globe" />OTA連携・サイトコントローラー連携</li>
                  <li><FeatIcon name="home" />自社予約サイト（日英対応）・会員制度</li>
                  <li><FeatIcon name="key" />スマートチェックイン・スマートロック</li>
                  <li className="pv2-more"><FeatIcon name="sparkle" /><a href="/tomarin/pricing.html#compare">ほか、基本機能のすべて →</a></li>
                </ul>
              </div>

              {/* Growth */}
              <div className="pv2-card">
                <div className="pv2-name">Growth</div>
                <p className="pv2-blurb">経営を、強くする。データを判断に使える状態へ。</p>
                <div className="pv2-price">
                  <span className="pv2-currency">¥</span>
                  <span className="pv2-num">100,000</span>
                  <span className="pv2-unit">／月</span>
                </div>
                <div className="pv2-price2">＋ 決済額の <span className="pv2-pct">3.5%</span></div>
                <div className="pv2-caption">初期費用なし</div>
                <a href="/tomarin/shiryou-seikyuu.html" className="btn btn-outline pv2-btn">お問い合わせ</a>
                <div className="pv2-incl">Starter のすべて、さらに:</div>
                <ul className="pv2-features">
                  <li><FeatIcon name="chart" />経営ダッシュボード</li>
                  <li><FeatIcon name="sparkle" />リピーター分析・OTA/直販比率</li>
                  <li><FeatIcon name="heart" />専任サポート</li>
                </ul>
              </div>

              {/* Municipality */}
              <div className="pv2-card">
                <div className="pv2-name">自治体向け</div>
                <p className="pv2-blurb">地域まるごと、宿を支える。</p>
                <div className="pv2-price">
                  <span className="pv2-num pv2-num-sm">ご相談</span>
                </div>
                <div className="pv2-price2">地域に合わせた個別プラン</div>
                <div className="pv2-caption">施設数・客室数に応じてご提案します</div>
                <a href="/tomarin/shiryou-seikyuu.html" className="btn btn-outline pv2-btn">お問い合わせ</a>
                <div className="pv2-incl">Growth のすべて、さらに:</div>
                <ul className="pv2-features">
                  <li><FeatIcon name="link" />観光DMPへのデータ連携</li>
                  <li><FeatIcon name="chart" />地域施策のための宿泊データレポート</li>
                  <li><FeatIcon name="heart" />導入・運用の伴走支援</li>
                </ul>
              </div>
            </div>

            {/* AI Buddy option — Mobbin-style banner */}
            <div className="aib" style={{ marginTop: 16 }}>
              <div className="aib-left">
                <div className="aib-label">OPTION · AI BUDDY<span className="aib-soon">2027年ローンチ予定</span></div>
                <h3 className="aib-title">24時間、多言語で、<br/>経営のそばに。</h3>
                <p className="aib-sub">
                  お客様からの問い合わせ対応も、経営の相談も。AI Buddy が宿のもうひとりのスタッフになります。
                  Starter / Growth のどちらでも、ユーザー単位で追加できる予定です。
                </p>
                <a href="/tomarin/shiryou-seikyuu.html" className="btn btn-dark" style={{ width: 'fit-content' }}>お問い合わせ</a>
              </div>
              <div className="aib-right">
                <div className="aim-col">
                  <div className="aim-track up">
                    {[...LP_AI_A, ...LP_AI_A].map((c, i) => <LpAiCard c={c} key={i} />)}
                  </div>
                </div>
                <div className="aim-col">
                  <div className="aim-track down">
                    {[...LP_AI_B, ...LP_AI_B].map((c, i) => <LpAiCard c={c} key={i} />)}
                  </div>
                </div>
              </div>
            </div>

            <div className="pricing-note">
              
              ※ Stripe社の決済代行手数料は別途ご請求となります。<br/>※ スマートロック連携をご利用の場合、スマートロック提供会社より月額利用料が別途請求されます。<br/>
              <a href="/tomarin/pricing.html" className="pricing-more">プラン比較・料金の詳細はこちら →</a>
            </div>
          </div>
        </Reveal>

      </div>
    </section>
  );
}

// ====================== ABOUT RAMPS ======================
function AboutRamps() {
  return (
    <section className="section" id="about">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <h2 className="section-title"><img src="/tomarin/assets/tomarin-wordmark.png" alt="tomarin" className="sol-logo" /> を、<br/>つくっている会社。</h2>
            <p className="section-sub">
              <img src="/tomarin/assets/tomarin-wordmark.png" alt="tomarin" className="tm-inline" /> は、東川町で自ら宿を運営する Ramps が開発・運営しています。<br/>
              金融やホスピタリティの実務家が集まり、地域をどう豊かにできるかを考え続けています。
            </p>
          </div>
        </Reveal>
        <Reveal>
          <div className="ramps-lead">3つの事業で、「地域の関係人口」を増やす。</div>
          <div className="ramps-biz">
            <a className="rb-card" href="https://hello.ensembles.ai/" target="_blank" rel="noopener noreferrer">
              <div className="rb-visual">
                <span className="rb-role yellow">出会う</span>
                <span className="rb-ext">↗</span>
                <img src="/tomarin/assets/clients/ensembles-trim.png" alt="ensembles" style={{ height: 20 }} />
              </div>
              <div className="rb-body">
                <div className="rb-cat">地域コミュニティ</div>
                <p>「訪れる」と「暮らす」のあいだに、新しい関わり方をつくる。</p>
              </div>
            </a>
            <a className="rb-card" href="#top">
              <div className="rb-visual">
                <span className="rb-role green">泊まる</span>
                <span className="rb-ext">↑</span>
                <img src="/tomarin/assets/tomarin-wordmark.png" alt="tomarin" style={{ height: 19 }} />
              </div>
              <div className="rb-body">
                <div className="rb-cat">宿泊運営プラットフォーム</div>
                <p>予約から顧客管理まで、宿の毎日を支える。</p>
              </div>
            </a>
            <a className="rb-card" href="https://www.ramps.jp/kanko-dx/" target="_blank" rel="noopener noreferrer">
              <div className="rb-visual">
                <span className="rb-role blue">活かす</span>
                <span className="rb-ext">↗</span>
                <span className="rb-dmp">観光DX</span>
                <span className="rb-proof">観光庁「観光DX推進事業」採択（2025年）</span>
              </div>
              <div className="rb-body">
                <div className="rb-cat">地域のデータ基盤</div>
                <p>町じゅうのデータをひとつにし、次の一手が見えるダッシュボードに。</p>
              </div>
            </a>
          </div>
          <div className="ramps-loop">
            <span>出会う</span><i>→</i><span>泊まる</span><i>→</i><span>活かす</span><i>→</i><span className="loop-back">↺ また訪れる</span>
          </div>
          <div className="ramps-sub">この循環が、地域の関係人口を育てます。</div>
        </Reveal>
        <Reveal delay={80}>
          <div className="ramps-facts">
            {[
              ['会社名', 'Ramps 株式会社'],
              ['設立', '2022年 7月 19日'],
              ['代表者', '創業者兼代表取締役 成尾 太希'],
              ['所在地', '北海道上川郡東川町東町 1-7-4'],
              ['資本金', '1億 8,870万円（資本準備金を含む）'],
              ['メンバー', '18名（業務委託先を含む）'],
            ].map(([k, v]) => (
              <div className="rf-item" key={k}>
                <div className="rf-k">{k}</div>
                <div className="rf-v">{v}</div>
              </div>
            ))}
          </div>
        </Reveal>
        <Reveal delay={100}>
          <div className="purpose-mission">
            <div className="pm-block">
              <div className="pm-label">OUR PURPOSE</div>
              <div className="pm-text">地域の価値を再考し、<br/>地球の未来へと先導する。</div>
            </div>
            <div className="pm-divider" />
            <div className="pm-block">
              <div className="pm-label">OUR MISSION</div>
              <div className="pm-text">誰もが好きな地域を何度も訪れ、<br/>有意義な貢献ができる世界を創造する。</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ====================== FAQ — 7 questions ======================
const FAQS = [
  { q: '料金はどのように決まりますか？', a: '初期費用はかかりません。月額は宿の規模や運用に応じて個別にご提案します。まずはお気軽にお問い合わせください。' },
  { q: '導入までどれくらいかかりますか？', a: '最短2週間です。お問い合わせ後、1時間ほどのオンラインデモを経て、宿の情報をいただいてからセットアップを進めます。' },
  { q: '既存の予約システムからの移行はできますか？', a: '可能です。CSVやAPI経由で過去の予約・顧客データを移行できます。' },
  { q: 'OTA（楽天・じゃらん・Booking.com 等）との連携は？', a: 'はい。サイトコントローラー経由で主要OTAに対応しています。Starter・Growthどちらのプランでも、接続するOTAの数に制限はなく、無制限でご契約いただけます。' },
  { q: '宿泊税の対応は？', a: '全国の宿泊税に対応しています。自治体ごとに定額／定率／階層の3方式を設定でき、予約時の自動徴収から月次申告書出力まで完結します。北海道全道2026年4月導入にも標準対応。' },
  { q: 'デモや相談はどこから？', a: 'オンラインデモは「デモを予約」ボタンから、カレンダーでご希望の日時をお選びいただけます。まずは話を聞きたい方は「お問い合わせ」フォームからご記入ください。1営業日以内に担当者よりご連絡します。' },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <h2 className="section-title">疑問は、先に解いておきましょう。</h2>
          </div>
        </Reveal>
        <div className="faq-wrap">
          {FAQS.map((f, i) => (
            <Reveal key={i} delay={i * 40}>
              <div className={`faq-item ${open === i ? 'open' : ''}`}>
                <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="plus" />
                </div>
                <div className="faq-a">
                  {f.a}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ====================== FINAL CTA ======================
function FinalCTA() {
  return (
    <section className="final-cta" id="cta">
      <div className="bg-shapes">
        <svg style={{ top: '30px', left: '12%' }} width="52" height="52" viewBox="0 0 60 60"><circle cx="30" cy="30" r="26" fill="#F5D938"/></svg>
        <svg style={{ bottom: '40px', right: '14%' }} width="56" height="56" viewBox="0 0 60 60"><circle cx="30" cy="30" r="26" fill="#9ED4E2"/></svg>
        <svg style={{ top: '40%', left: '8%' }} width="44" height="44" viewBox="0 0 60 60"><polygon points="30,6 54,52 6,52" fill="#6FAF2A"/></svg>
        <svg style={{ top: '20%', right: '10%' }} width="28" height="28" viewBox="0 0 60 60"><circle cx="30" cy="30" r="26" fill="#6FAF2A"/></svg>
      </div>
      <Reveal>
        <h2><span className="serif">&ldquo;誰かの<span className="mark">定宿</span>&rdquo; へ。</span></h2>
      </Reveal>
      <Reveal delay={120}>
        <p>
          OTA依存と価格競争から、関係でお客様に選ばれる宿へ。<br/>
          <img src="/tomarin/assets/tomarin-wordmark.png" alt="tomarin" className="tm-inline" /> が、その一歩を静かに支えます。
        </p>
      </Reveal>
      <Reveal delay={200}>
        <div className="cta-buttons">
          <a href="/tomarin/demo-yoyaku.html" className="btn btn-primary btn-xl">デモを予約する</a>
          <a href="/tomarin/shiryou-seikyuu.html" className="btn btn-outline btn-xl">お問い合わせ</a>
        </div>
      </Reveal>
      <Reveal delay={260}>
        <div className="cta-foot">
          初期費用はかかりません。 ✉ <a href="mailto:tomarin@ramps.jp">tomarin@ramps.jp</a>
        </div>
      </Reveal>
    </section>
  );
}

// ====================== FOOTER ======================
function SiteFooter() {
  return (
    <footer>
      <div className="foot-grid">
        <div className="foot-brand">
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <BrandMark size={26} />
            <img src="/tomarin/assets/tomarin-wordmark.png" alt="tomarin" style={{ height: 15, width: 'auto', display: 'block' }} />
          </div>
          <p>
            地域の宿のためのクラウドPMS。<br/>
            小さな宿の、毎日を整える。
          </p>
        </div>
        <div className="foot-col">
          <h5>プロダクト</h5>
          <a href="#strengths">特長</a>
          <a href="#features">機能一覧</a>
          <a href="/tomarin/pricing.html">料金プラン</a>
          <a href="#features">宿泊税対応</a>
        </div>
        <div className="foot-col">
          <h5>導入</h5>
          <a href="#case">導入事例</a>
          <a href="/tomarin/demo-yoyaku.html">デモを予約</a>
          <a href="/tomarin/shiryou-seikyuu.html">お問い合わせ</a>
          <a href="#faq">FAQ</a>
          <a href="#about">自治体向け</a>
        </div>
        <div className="foot-col">
          <h5>会社</h5>
          <a href="#about">Ramps</a>
          <a href="https://hello.ensembles.ai/" target="_blank" rel="noopener noreferrer">ensembles</a>
          <a href="https://www.ramps.jp/" target="_blank" rel="noopener noreferrer">採用情報</a>
          <a href="#cta">お問い合わせ</a>
        </div>
        <div className="foot-col">
          <h5>リソース</h5>
          <a href="https://www.ramps.jp/privacy" target="_blank" rel="noopener noreferrer">プライバシーポリシー</a>
          <a href="/tomarin/legal.html#terms">利用規約</a>
          <a href="https://www.ramps.jp/specific-trade-law" target="_blank" rel="noopener noreferrer">特定商取引法</a>
        </div>
      </div>
      <div className="foot-base">
        <div>© 2026 Ramps Inc. · 北海道 上川郡 東川町</div>
        <div className="meta">
          <span>tomarin@ramps.jp</span>
          <span>ramps.jp / tomarin（移行後 tomarin.co）</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Features, ReservationDemo, CaseStudies, Pricing, AboutRamps, FAQ, FinalCTA, SiteFooter });


// ====================== AI BUDDY CARDS (LP banner) ======================
const LP_AI_A = [
  { tag: '多言語対応', color: 'blue', body: '英語のお問い合わせに、返信案を作成しました ✓' },
  { tag: '経営アシスト', color: 'green', body: '今月のリピーター率は34%。前月比 +3pt です。' },
  { tag: '料金アドバイス', color: 'yellow', body: '連休の週末は +¥4,000 の料金設定をおすすめします。' },
  { tag: 'レビュー返信', color: 'blue', body: 'クチコミへの返信文を3案ご用意しました。' },
];
const LP_AI_B = [
  { tag: 'レポート要約', color: 'green', body: '4月の月次レポートを要約: 直販比率が48%に上昇。' },
  { tag: '予約対応', color: 'blue', body: 'メールのお問い合わせから、仮予約を作成しました。' },
  { tag: '在庫の確認', color: 'yellow', body: '今週末の空室は「桜の間」のみ。販売強化を提案します。' },
  { tag: 'おもてなしメモ', color: 'green', body: '田中様は明日ご到着。ほうじ茶のご用意を忘れずに。' },
];
function LpAiCard({ c }) {
  return (
    <div className="aim-card">
      <div className={`aim-tag ${c.color}`}>{c.tag}</div>
      <div className="aim-body">{c.body}</div>
    </div>
  );
}