/* global React, ReactDOM, BrandMark, Check, Reveal, FeatIcon */

// ====================== NAV ======================
function PNav() {
  return (
    <nav className="pnav">
      <div className="pnav-inner">
        <a href="/tomarin/" className="pnav-brand">
          <img src="/tomarin/assets/tomarin-logo-cropped.png" alt="tomarin" />
        </a>
        <ul className="pnav-menu">
          <li><a href="#plans">プラン</a></li>
          <li><a href="#addon">アドオン</a></li>
          <li><a href="#compare">プラン比較</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
        <div className="pnav-cta">
          <a href="/tomarin/shiryou-seikyuu.html" className="btn btn-outline">お問い合わせ</a>
          <a href="/tomarin/demo-yoyaku.html" className="btn btn-dark">デモを予約</a>
        </div>
      </div>
    </nav>
  );
}

// ====================== PLANS ======================
function Plans() {
  return (
    <section className="psection" id="plans">
      <div className="container">
        <div className="p-hero">
          <h1 className="p-title">宿の規模に、合わせて。</h1>
          <p className="p-sub">初期費用なし。固定費¥0からはじめて、宿の成長に合わせてプランを選べます。</p>
        </div>
        <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="#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>
          <div className="pricing-note">
            ※ Stripe社の決済代行手数料は別途ご請求となります。<br/>※ スマートロック連携をご利用の場合、スマートロック提供会社より月額利用料が別途請求されます。
          </div>
        </div>
        <Simulator />
      </div>
    </section>
  );
}

// ====================== SIMULATOR ======================
function fmtMan(man) {
  return man >= 10000 ? `${(man / 10000).toLocaleString('ja-JP')}億円` : `${man.toLocaleString('ja-JP')}万円`;
}
function fmtYen(yen) {
  return '¥' + Math.round(yen).toLocaleString('ja-JP');
}

function Simulator() {
  const [man, setMan] = React.useState(150); // 月間決済額（万円）
  const yen = man * 10000;
  const sRate = 0.05;
  const gRate = 0.035;
  const gFix = 100000;
  const starter = yen * sRate;
  const growth = gFix + yen * gRate;
  const starterWins = starter <= growth;
  const breakEvenMan = Math.round(gFix / (sRate - gRate) / 10000);

  return (
    <div className="psim">
      <div className="psim-head">
        <h3 className="psim-title">月々の目安を計算</h3>
      </div>
      <div className="psim-slider-row">
        <span className="psim-slider-label">月間の決済額</span>
        <input
          type="range" min="10" max="1500" step="10" value={man}
          onChange={(e) => setMan(Number(e.target.value))}
          className="cost-range"
          style={{ '--fill': `${((man - 10) / 1490) * 100}%` }}
          aria-label="月間の決済額（万円）"
        />
        <span className="psim-slider-value">{fmtMan(man)}</span>
      </div>
      <div className="psim-results">
        <div className={`psim-result ${starterWins ? 'win' : ''}`}>
          <div className="psim-plan">Starter</div>
          <div className="psim-fee">{fmtYen(starter)}<span> ／月</span></div>
          <div className="psim-detail">決済額の{(sRate * 100).toLocaleString('ja-JP')}%</div>
          {starterWins && <div className="psim-win-tag">こちらがお得</div>}
        </div>
        <div className={`psim-result ${!starterWins ? 'win' : ''}`}>
          <div className="psim-plan">Growth</div>
          <div className="psim-fee">{fmtYen(growth)}<span> ／月</span></div>
          <div className="psim-detail">月額{fmtYen(gFix)}＋決済額の{(gRate * 100).toLocaleString('ja-JP')}%</div>
          {!starterWins && <div className="psim-win-tag">こちらがお得</div>}
        </div>
      </div>
      <p className="psim-note">決済額が月{fmtMan(breakEvenMan)}を超えると Growth がお得になります。※Stripe社の決済手数料は含みません。Growthには経営ダッシュボード・専任サポートが含まれます。</p>
      <div className="psim-chips">
        <span className="psim-chip"><Check color="#111111" size={13} />初期費用なし</span>
        <span className="psim-chip"><Check color="#111111" size={13} />予約がない月の従量課金は¥0（Starter）</span>
      </div>
    </div>
  );
}

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

function AiCard({ c }) {
  return (
    <div className="aim-card">
      <div className={`aim-tag ${c.color}`}>{c.tag}</div>
      <div className="aim-body">{c.body}</div>
    </div>
  );
}

function AddOn() {
  return (
    <section className="psection" id="addon" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="aib">
          <div className="aib-left">
            <div className="aib-label">OPTION · AI BUDDY<span className="aib-soon">2027年ローンチ予定</span></div>
            <h2 className="aib-title">24時間、多言語で、<br/>経営のそばに。</h2>
            <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">
                {[...AI_CARDS_A, ...AI_CARDS_A].map((c, i) => <AiCard c={c} key={i} />)}
              </div>
            </div>
            <div className="aim-col">
              <div className="aim-track down">
                {[...AI_CARDS_B, ...AI_CARDS_B].map((c, i) => <AiCard c={c} key={i} />)}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ====================== COMPARE ======================
const CMP = [
  ['予約・客室', [
    ['カレンダー予約台帳', true, true],
    ['客室・料金カレンダー', true, true],
    ['連泊・代理予約', true, true],
    ['仮予約機能', true, true],
  ]],
  ['顧客・CRM', [
    ['顧客台帳・宿泊履歴', true, true],
    ['タグ・おもてなしメモ', true, true],
    ['会員制度（ロイヤリティ）', true, true],
  ]],
  ['決済・税務', [
    ['決済・キャンセル料の自動徴収', true, true],
    ['宿泊税の徴収・月次集計・申告書出力', true, true],
  ]],
  ['現場・運営', [
    ['スマートチェックイン', true, true],
    ['スマートロック連携', true, true],
    ['清掃管理・外注者のアクセス制限', true, true],
    ['自動メール配信', true, true],
  ]],
  ['連携', [
    ['OTA連携', true, true],
    ['サイトコントローラー連携', true, true],
    ['自社予約サイト（日英対応）', true, true],
  ]],
  ['サポート', [
    ['メール・チャットサポート', true, true],
    ['導入・データ移行サポート', true, true],
    ['専任サポート', false, true],
  ]],
  ['経営ダッシュボード', [
    ['経営ダッシュボード', false, true, false],
    ['リピーター分析・OTA/直販比率', false, true, false],
    ['売上・稼働率・ADRの自動集計', false, true, false],
    ['月次レポートの自動作成', false, true, false],
    ['ブッキングカーブ（予約の入り方）分析', false, true, false],
    ['複数施設の横断ダッシュボード', false, true, true],
    ['CSV・データエクスポート', false, true, true],
  ]],
];

function InfoTip({ text }) {
  if (!text) return null;
  return (
    <span className="cmp-info" tabIndex={0}>
      i
      <span className="cmp-tip">{text}</span>
    </span>
  );
}

const CMP_DESC = {"カレンダー予約台帳":"すべての予約をカレンダー形式の台帳で一元管理します。","客室・料金カレンダー":"先日付の客室料金を設定できます。1年先でもOK。曜日・繁忙日ごとの一括設定にも対応。","連泊・代理予約":"連泊予約に対応。代理予約は、グループ旅行で担当者が全員分をまとめて予約するような使い方です。予約者・宿泊者・決済者を分けられます。","仮予約機能":"確定前の仮押さえを台帳上で管理できます。","顧客台帳・宿泊履歴":"宿泊履歴・好み・ご要望が、顧客ごとに自動で蓄積されます。","タグ・おもてなしメモ":"タグとメモで、お客様の情報をスタッフ全員で共有できます。","会員制度（ロイヤリティ）":"会員ランクで常連のお客様を見える化し、再訪を後押しします。","決済・キャンセル料の自動徴収":"予約時のカード登録により、キャンセル料もポリシーに沿って自動請求します。","宿泊税の徴収・月次集計・申告書出力":"自治体ごとの方式（定額・定率・階層）で自動計算し、申告書まで自動作成します。","スマートチェックイン":"QRコードでのセルフチェックインに対応します。","スマートロック連携":"チェックインと同時に4桁PINを自動発行します（RemoteLock等）。","清掃管理・外注者のアクセス制限":"清掃状況を管理し、外注スタッフには必要な画面だけを共有します。","自動メール配信":"予約確認・事前案内などのメールを自動送信します。","OTA連携":"楽天トラベル・じゃらん・Booking.com などと在庫・料金をリアルタイム同期します。","サイトコントローラー連携":"サイトコントローラー経由で主要OTAと接続できます。","自社予約サイト（日英対応）":"OTA手数料のかからない自社予約サイトを日英対応で開設できます。","メール・チャットサポート":"メール・チャットでのお問い合わせに対応します。","導入・データ移行サポート":"既存システムからのデータ移行と初期設定を支援します。","専任サポート":"専任担当者が運用を継続的に支援します。","経営ダッシュボード":"予約・売上・稼働の状況を、ひとつの画面で確認できます。","リピーター分析・OTA/直販比率":"再訪率や販売チャネルの内訳を自動で分析します。","売上・稼働率・ADRの自動集計":"主要な経営指標を毎日自動で集計します。","月次レポートの自動作成":"月次の経営レポートを自動で作成します。","ブッキングカーブ（予約の入り方）分析":"予約の入り方を時系列で分析し、料金判断に活かせます。","複数施設の横断ダッシュボード":"複数施設の状況を1つの画面で横断的に確認できます。","CSV・データエクスポート":"予約・顧客データをCSVでエクスポートできます。","町内の宿への一括導入":"地域内の宿泊施設へまとめて導入・展開できます。","観光DMPへのデータ連携":"宿泊データを地域の観光データ基盤（DMP）に連携します。","地域施策のための宿泊データレポート":"地域全体の宿泊動向を、施策の根拠となるレポートにまとめます。"};

function Cell({ on }) {
  return on
    ? <span className="cmp-yes"><Check color="#111111" size={15} /></span>
    : <span className="cmp-no">—</span>;
}

function Compare() {
  return (
    <section className="psection" id="compare">
      <div className="container">
        <h2 className="p-h2">プランと機能を比較</h2>
        <div className="cmp-table">
          <div className="cmp-head">
            <div></div>
            <div className="cmp-plan featured">
              <span className="cmp-plan-name">Starter<i className="cmp-pop">人気</i></span>
              <span className="cmp-plan-price">¥0／月 ＋ 決済額の5%</span>
              <a href="/tomarin/shiryou-seikyuu.html" className="btn btn-dark cmp-btn">お問い合わせ</a>
            </div>
            <div className="cmp-plan">
              <span className="cmp-plan-name">Growth</span>
              <span className="cmp-plan-price">¥100,000／月 ＋ 決済額の3.5%</span>
              <a href="/tomarin/shiryou-seikyuu.html" className="btn btn-outline cmp-btn">お問い合わせ</a>
            </div>
            <div className="cmp-plan">
              <span className="cmp-plan-name">自治体向け</span>
              <span className="cmp-plan-price">ご相談</span>
              <a href="/tomarin/shiryou-seikyuu.html" className="btn btn-outline cmp-btn">お問い合わせ</a>
            </div>
          </div>
          {CMP.map(([group, rows]) => (
            <React.Fragment key={group}>
              <div className="cmp-group">{group}</div>
              {rows.map(([label, s, g, gov]) => (
                <div className="cmp-row" key={label}>
                  <div className="cmp-feature">{label}<InfoTip text={CMP_DESC[label]} /></div>
                  <div className="cmp-cell featured"><Cell on={s} /></div>
                  <div className="cmp-cell"><Cell on={g} /></div>
                  <div className="cmp-cell"><Cell on={gov === undefined ? g : gov} /></div>
                </div>
              ))}
            </React.Fragment>
          ))}
          <div className="cmp-group">自治体・地域</div>
          {[['観光DMPへのデータ連携'], ['地域施策のための宿泊データレポート']].map(([label]) => (
            <div className="cmp-row" key={label}>
              <div className="cmp-feature">{label}<InfoTip text={CMP_DESC[label]} /></div>
              <div className="cmp-cell featured"><Cell on={false} /></div>
              <div className="cmp-cell"><Cell on={false} /></div>
              <div className="cmp-cell"><Cell on={true} /></div>
            </div>
          ))}
          <div className="cmp-group">アドオン</div>
          <div className="cmp-row">
            <div className="cmp-feature">AI Buddy（24h多言語・経営アシスト）<InfoTip text="24時間の多言語問い合わせ対応と、経営判断を支えるAIアシスタント。2027年ローンチ予定です。" /></div>
            <div className="cmp-cell featured"><span className="cmp-opt">2027年予定</span></div>
            <div className="cmp-cell"><span className="cmp-opt">2027年予定</span></div>
            <div className="cmp-cell"><span className="cmp-opt">2027年予定</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ====================== FAQ ======================
const PFAQS = [
  { q: '料金はどのように決まりますか？', a: '初期費用はかかりません。Starterは固定費¥0＋決済額の5%、Growthは月額¥100,000＋決済額の3.5%です。自治体向けは地域の規模に応じて個別にご提案します。' },
  { q: '従量課金には何が含まれますか？', a: '決済金額に応じた課金です（Starter 5%・Growth 3.5%）。Stripe社の決済手数料は別途かかります。' },
  { q: 'AI Buddy はいつから使えますか？', a: 'AI Buddy は2027年ローンチ予定です。提供開始後は、どちらのプランでも、ユーザー単位で追加・削除できるようになる予定です。' },
  { q: '解約したらデータはどうなりますか？', a: '予約・顧客データはCSVでエクスポートできます。解約後も一定期間のダウンロード猶予を設けています。' },
];

function PFAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="psection" id="faq">
      <div className="container">
        <div className="faq2-grid">
          <div className="faq2-left">
            <h2 className="p-h2">よくある<br/>ご質問</h2>
            <p className="faq2-note">
              ほかにご不明な点があれば、<br/>
              <a href="/tomarin/shiryou-seikyuu.html">お気軽にお問い合わせください →</a>
            </p>
          </div>
          <div className="faq2-list">
            {PFAQS.map((f, i) => (
              <div className={`faq2-item ${open === i ? 'open' : ''}`} key={i}>
                <button className="faq2-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{f.q}</span>
                  <i className="faq2-plus"></i>
                </button>
                <div className="faq2-a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ====================== CTA + FOOTER ======================
const LP = '/tomarin/';

function PFoot() {
  return (
    <div className="pfoot">
      <div className="pfoot-cta">
        <h2>まずは、話を聞いてみる。</h2>
        <div className="cta-buttons" style={{ marginTop: 22 }}>
          <a href="/tomarin/demo-yoyaku.html" className="btn btn-primary btn-lg">デモを予約する</a>
          <a href="/tomarin/shiryou-seikyuu.html" className="btn btn-outline btn-lg">お問い合わせ</a>
        </div>
      </div>
      <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={`${LP}#strengths`}>特長</a>
            <a href={`${LP}#features`}>機能一覧</a>
            <a href="#plans">料金プラン</a>
            <a href={`${LP}#features`}>宿泊税対応</a>
          </div>
          <div className="foot-col">
            <h5>導入</h5>
            <a href={`${LP}#case`}>導入事例</a>
            <a href="/tomarin/demo-yoyaku.html">デモを予約</a>
            <a href="/tomarin/shiryou-seikyuu.html">お問い合わせ</a>
            <a href="#faq">FAQ</a>
            <a href={`${LP}#about`}>自治体向け</a>
          </div>
          <div className="foot-col">
            <h5>会社</h5>
            <a href={`${LP}#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={`${LP}#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>
    </div>
  );
}

function PricingPage() {
  // Hash anchors (#compare etc.) render after React mounts, so scroll manually.
  React.useEffect(() => {
    const hash = decodeURIComponent(window.location.hash || '').slice(1);
    if (!hash) return;
    const t = setTimeout(() => {
      const el = document.getElementById(hash);
      if (el) {
        const y = el.getBoundingClientRect().top + window.scrollY - 90;
        window.scrollTo({ top: y, behavior: 'auto' });
      }
    }, 120);
    return () => clearTimeout(t);
  }, []);

  return (
    <>
      <PNav />
      <Plans />
      <AddOn />
      <Compare />
      <PFAQ />
      <PFoot />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<PricingPage />);