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

// ---- Calendly 埋め込み ----
// 各担当者の Calendly アカウント（handle）と、枠のイベント slug。
// 担当者を増やすには HOSTS に { calendly } を足すだけ。30分枠は Calendly 側で
// 「tomarin-soudan」イベントを作成し slug を合わせてください。
const EVENT_SLUGS = { full: 'tomarin-demo', short: 'tomarin-soudan' };

// TODO: 担当者2・3 の calendly handle と photoId 用の写真を差し替えてください。
const HOSTS = [
  { id: 'naruo', name: '成尾 太希', role: '代表 · 北海道 東川町', note: '地域の宿の現場を回ってきた担当が、直接ご案内します。', calendly: 'daikinaruo' },
  { id: 'cs',    name: '（カスタマーサクセス）', role: '導入・運用サポート', note: '立ち上げから日々の運用まで伴走します。', calendly: 'tomarin-cs' },
  { id: 'migration', name: '（データ移行担当）', role: '移行サポート', note: '既存システムからのデータ移行をお手伝いします。', calendly: 'tomarin-migration' },
];

const calendlyBase = (host, type) => `https://calendly.com/${host.calendly}/${EVENT_SLUGS[type]}`;

function CalendlyEmbed({ baseUrl }) {
  const ref = React.useRef(null);
  const [failed, setFailed] = React.useState(false);

  React.useEffect(() => {
    const s = document.createElement('script');
    s.src = 'https://assets.calendly.com/assets/external/widget.js';
    s.async = true;
    s.onerror = () => setFailed(true);
    document.body.appendChild(s);
    const t = setTimeout(() => {
      if (ref.current && !ref.current.querySelector('iframe')) setFailed(true);
    }, 6000);
    return () => { clearTimeout(t); };
  }, []);

  // Re-initialise the widget whenever the selected event type changes.
  React.useEffect(() => {
    if (!ref.current) return;
    ref.current.innerHTML = '';
    const init = () => {
      if (window.Calendly && ref.current) {
        window.Calendly.initInlineWidget({ url, parentElement: ref.current });
      }
    };
    if (window.Calendly) init();
    else { const iv = setInterval(() => { if (window.Calendly) { clearInterval(iv); init(); } }, 200); return () => clearInterval(iv); }
  }, [baseUrl]);

  const url = `${baseUrl}?hide_gdpr_banner=1&primary_color=6FAF2A&text_color=1A1A18`;

  if (failed) {
    return (
      <div className="cal-fallback">
        <p>予約カレンダーを読み込めませんでした。</p>
        <a className="btn btn-primary btn-lg" href={baseUrl} target="_blank" rel="noopener noreferrer">
          Calendly で日時を選ぶ ↗
        </a>
      </div>
    );
  }

  return (
    <div
      ref={ref}
      className="calendly-embed-host"
      style={{ minWidth: 320, height: 620 }}
    ></div>
  );
}

const WEEKDAYS = ['日', '月', '火', '水', '木', '金', '土'];
const TIME_SLOTS = ['10:00', '11:00', '13:00', '14:00', '15:00', '16:00', '17:00'];

// Deterministic pseudo-availability so the calendar feels real & stable.
function slotsForDate(d) {
  const seed = d.getFullYear() * 372 + (d.getMonth() + 1) * 31 + d.getDate();
  return TIME_SLOTS.filter((_, i) => ((seed * (i + 3)) % 7) > 1);
}
function isSelectable(d, today) {
  const dow = d.getDay();
  if (dow === 0 || dow === 6) return false;       // weekends closed
  if (d < today) return false;                      // past
  return slotsForDate(d).length > 0;
}

function fmtDateJP(d) {
  return `${d.getFullYear()}年 ${d.getMonth() + 1}月 ${d.getDate()}日（${WEEKDAYS[d.getDay()]}）`;
}

// ---- Booking notification to tomarin@ramps.jp ----
const NOTIFY_EMAIL = 'tomarin@ramps.jp';
// 自動メール送信を有効にするには、Web3Forms (https://web3forms.com) で
// tomarin@ramps.jp を登録して取得したアクセスキーを下に貼り付けてください。
// 空のままでも、確定画面の「メールで送る」ボタンで送信できます。
const WEB3FORMS_ACCESS_KEY = '';

function bookingText(date, time, form) {
  return [
    '■ tomarin デモ予約',
    '',
    `希望日時： ${fmtDateJP(date)} ${time}〜（約1時間・オンライン）`,
    `宿泊施設： ${form.inn}`,
    `ご担当者： ${form.name}`,
    `メール： ${form.email}`,
    form.phone ? `電話： ${form.phone}` : '',
    form.scale ? `客室規模： ${form.scale}` : '',
    form.message ? `ご相談内容： ${form.message}` : '',
    '',
    `送信日時： ${new Date().toLocaleString('ja-JP')}`,
  ].filter(Boolean).join('\n');
}

function bookingMailto(date, time, form) {
  const subject = `【デモ予約】${form.inn} / ${fmtDateJP(date)} ${time}〜`;
  const body = bookingText(date, time, form);
  return `mailto:${NOTIFY_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
}

// Crash-proof "send to tomarin" button: copies details + opens mail app
// in a new context (never navigates the current document).
function NotifyButton({ date, time, form }) {
  const [state, setState] = React.useState('idle'); // idle | copied | opened

  const handleClick = async () => {
    const text = bookingText(date, time, form);
    // 1) Always copy details to clipboard as a reliable fallback.
    let copied = false;
    try {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        await navigator.clipboard.writeText(`宛先： ${NOTIFY_EMAIL}\n\n${text}`);
        copied = true;
      }
    } catch (err) { /* ignore */ }
    // 2) Try to open the mail app WITHOUT navigating this page.
    let opened = false;
    try {
      const w = window.open(bookingMailto(date, time, form), '_blank');
      opened = !!w;
    } catch (err) { /* ignore */ }
    setState(opened ? 'opened' : (copied ? 'copied' : 'opened'));
    setTimeout(() => setState('idle'), 4000);
  };

  return (
    <button type="button" className="btn btn-dark bk-notify-btn" onClick={handleClick}>
      {state === 'idle' && (
        <>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
          tomarin に予約内容をメールで送る
        </>
      )}
      {state === 'opened' && (
        <>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
          メールアプリを開きました
        </>
      )}
      {state === 'copied' && (
        <>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
          内容をコピーしました
        </>
      )}
    </button>
  );
}

async function notifyBooking(date, time, form) {
  if (!WEB3FORMS_ACCESS_KEY) return { ok: false, skipped: true };
  try {
    const res = await fetch('https://api.web3forms.com/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
      body: JSON.stringify({
        access_key: WEB3FORMS_ACCESS_KEY,
        subject: `【デモ予約】${form.inn} / ${fmtDateJP(date)} ${time}〜`,
        from_name: 'tomarin デモ予約フォーム',
        email: form.email,
        replyto: form.email,
        message: bookingText(date, time, form),
      }),
    });
    const data = await res.json().catch(() => ({}));
    return { ok: !!data.success };
  } catch (err) {
    return { ok: false, error: String(err) };
  }
}

// ---- Calendar integration (invites tomarin@ramps.jp as guest) ----
const ORGANIZER_EMAIL = 'tomarin@ramps.jp';
const DEMO_MINUTES = 45;

function eventTimes(date, time) {
  const [h, m] = time.split(':').map(Number);
  const start = new Date(date);
  start.setHours(h, m, 0, 0);
  const end = new Date(start.getTime() + DEMO_MINUTES * 60000);
  return { start, end };
}
function stampLocal(d) {
  const p = n => String(n).padStart(2, '0');
  return `${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}T${p(d.getHours())}${p(d.getMinutes())}00`;
}
function stampUTC(d) {
  const p = n => String(n).padStart(2, '0');
  return `${d.getUTCFullYear()}${p(d.getUTCMonth() + 1)}${p(d.getUTCDate())}T${p(d.getUTCHours())}${p(d.getUTCMinutes())}${p(d.getUTCSeconds())}Z`;
}
function eventDetails(form) {
  return [
    'tomarin オンラインデモ（約1時間）',
    '',
    `宿泊施設： ${form.inn}`,
    `ご担当者： ${form.name}`,
    form.scale ? `客室規模： ${form.scale}` : '',
    form.phone ? `電話： ${form.phone}` : '',
    form.message ? `メモ： ${form.message}` : '',
    '',
    '会議URLは別途メールでお送りします。',
  ].filter(Boolean).join('\n');
}
function gcalUrl(date, time, form) {
  const { start, end } = eventTimes(date, time);
  const params = new URLSearchParams({
    action: 'TEMPLATE',
    text: `tomarin オンラインデモ・${form.inn || '宿'}`,
    dates: `${stampLocal(start)}/${stampLocal(end)}`,
    details: eventDetails(form),
    add: ORGANIZER_EMAIL,
    ctz: 'Asia/Tokyo',
  });
  return `https://calendar.google.com/calendar/render?${params.toString()}`;
}
function downloadIcs(date, time, form) {
  const { start, end } = eventTimes(date, time);
  const ics = [
    'BEGIN:VCALENDAR', 'VERSION:2.0', 'PRODID:-//tomarin//demo-booking//JA',
    'CALSCALE:GREGORIAN', 'METHOD:REQUEST',
    'BEGIN:VEVENT',
    `UID:${Date.now()}-${Math.random().toString(36).slice(2)}@tomarin`,
    `DTSTAMP:${stampUTC(new Date())}`,
    `DTSTART:${stampUTC(start)}`,
    `DTEND:${stampUTC(end)}`,
    `SUMMARY:tomarin オンラインデモ・${form.inn || '宿'}`,
    `DESCRIPTION:${eventDetails(form).replace(/\n/g, '\\n')}`,
    `ORGANIZER;CN=tomarin:mailto:${ORGANIZER_EMAIL}`,
    `ATTENDEE;CN=tomarin;RSVP=TRUE:mailto:${ORGANIZER_EMAIL}`,
    form.email ? `ATTENDEE;CN=${form.name};RSVP=TRUE:mailto:${form.email}` : '',
    'END:VEVENT', 'END:VCALENDAR',
  ].filter(Boolean).join('\r\n');
  const blob = new Blob([ics], { type: 'text/calendar;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'tomarin-demo.ics';
  document.body.appendChild(a);
  a.click();
  a.remove();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

function Calendar({ month, setMonth, selected, onSelect, today }) {
  const year = month.getFullYear();
  const m = month.getMonth();
  const first = new Date(year, m, 1);
  const startPad = first.getDay();
  const daysInMonth = new Date(year, m + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < startPad; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(year, m, d));

  const thisMonthStart = new Date(today.getFullYear(), today.getMonth(), 1);
  const canGoPrev = new Date(year, m, 1) > thisMonthStart;

  return (
    <div className="cal">
      <div className="cal-head">
        <button type="button" className="cal-nav" disabled={!canGoPrev}
          onClick={() => canGoPrev && setMonth(new Date(year, m - 1, 1))} aria-label="前の月">‹</button>
        <div className="cal-month">{year}年 {m + 1}月</div>
        <button type="button" className="cal-nav"
          onClick={() => setMonth(new Date(year, m + 1, 1))} aria-label="次の月">›</button>
      </div>
      <div className="cal-grid">
        {WEEKDAYS.map((w, i) => (
          <div key={w} className={`cal-wd ${i === 0 ? 'sun' : ''} ${i === 6 ? 'sat' : ''}`}>{w}</div>
        ))}
        {cells.map((d, i) => {
          if (!d) return <div key={i} className="cal-cell empty" />;
          const sel = selected && d.toDateString() === selected.toDateString();
          const ok = isSelectable(d, today);
          const isToday = d.toDateString() === today.toDateString();
          return (
            <button type="button" key={i}
              className={`cal-cell ${ok ? 'open' : 'closed'} ${sel ? 'sel' : ''} ${isToday ? 'today' : ''}`}
              disabled={!ok}
              onClick={() => onSelect(d)}>
              <span className="cal-num">{d.getDate()}</span>
              {ok && <span className="cal-dot" />}
            </button>
          );
        })}
      </div>
      <div className="cal-legend">
        <span><i className="lg-open" />予約可</span>
        <span><i className="lg-closed" />受付なし</span>
      </div>
    </div>
  );
}

function BookingForm({ date, time, onBack, onDone }) {
  const [form, setForm] = React.useState({ inn: '', name: '', email: '', phone: '', scale: '', message: '', agree: false });
  const [errors, setErrors] = React.useState({});
  const [sending, setSending] = React.useState(false);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const SCALES = ['〜10室', '11〜30室', '31〜50室', '51室以上'];

  const submit = async (ev) => {
    ev.preventDefault();
    const e = {};
    if (!form.inn.trim()) e.inn = '宿泊施設名をご入力ください。';
    if (!form.name.trim()) e.name = 'ご担当者名をご入力ください。';
    if (!form.email.trim()) e.email = 'メールアドレスをご入力ください。';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = 'メールアドレスの形式をご確認ください。';
    if (!form.agree) e.agree = 'プライバシーポリシーへの同意が必要です。';
    setErrors(e);
    if (Object.keys(e).length) return;
    if (sending) return;
    setSending(true);
    try {
      const all = JSON.parse(localStorage.getItem('tomarin_demo_bookings') || '[]');
      all.push({ ...form, date: date.toISOString(), time, at: new Date().toISOString() });
      localStorage.setItem('tomarin_demo_bookings', JSON.stringify(all));
    } catch (err) { /* ignore */ }
    let result = { ok: false };
    try { result = await notifyBooking(date, time, form); } catch (err) { result = { ok: false, error: String(err) }; }
    setSending(false);
    onDone({ ...form, _sent: !!result.ok });
  };

  return (
    <form className="bk-form" onSubmit={submit} noValidate>
      <div className="bk-slot-recap">
        <div className="bsr-icon">
          <svg width="20" height="20" 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>
        </div>
        <div>
          <div className="bsr-date">{fmtDateJP(date)}</div>
          <div className="bsr-time">{time} 〜（約1時間・オンライン）</div>
        </div>
        <button type="button" className="bsr-change" onClick={onBack}>変更</button>
      </div>

      <div className="bk-fields">
        <div className="form-field">
          <label className="form-label">宿泊施設名<span className="req">必須</span></label>
          <input className={`form-input ${errors.inn ? 'err' : ''}`} placeholder="例：山あいの宿 つきのや" value={form.inn} onChange={e => set('inn', e.target.value)} />
          {errors.inn && <div className="form-error">{errors.inn}</div>}
        </div>
        <div className="form-field">
          <label className="form-label">ご担当者名<span className="req">必須</span></label>
          <input className={`form-input ${errors.name ? 'err' : ''}`} placeholder="例：田中 さくら" value={form.name} onChange={e => set('name', e.target.value)} />
          {errors.name && <div className="form-error">{errors.name}</div>}
        </div>
        <div className="form-field">
          <label className="form-label">メールアドレス<span className="req">必須</span></label>
          <input className={`form-input ${errors.email ? 'err' : ''}`} type="email" placeholder="example@inn.jp" value={form.email} onChange={e => set('email', e.target.value)} />
          {errors.email && <div className="form-error">{errors.email}</div>}
          <div className="form-hint">この宛先に、オンライン会議のURLをお送りします。</div>
        </div>
        <div className="form-field">
          <label className="form-label">電話番号</label>
          <input className="form-input" type="tel" placeholder="0166-00-0000" value={form.phone} onChange={e => set('phone', e.target.value)} />
        </div>
      </div>

      <div className="form-field">
        <label className="form-label">客室規模</label>
        <div className="chip-group">
          {SCALES.map(s => (
            <button type="button" key={s} className={`select-chip ${form.scale === s ? 'active' : ''}`} onClick={() => set('scale', s)}>{s}</button>
          ))}
        </div>
      </div>

      <div className="form-field">
        <label className="form-label">事前に伝えたいこと</label>
        <textarea className="form-input form-textarea" rows={3} placeholder="特に見たい機能や、現在ご利用中のシステムなどがあればご記入ください。" value={form.message} onChange={e => set('message', e.target.value)} />
      </div>

      <div className={`form-agree ${errors.agree ? 'err' : ''}`}>
        <button type="button" className={`agree-box ${form.agree ? 'on' : ''}`} onClick={() => set('agree', !form.agree)} aria-label="同意">
          {form.agree && <Check color="#fff" size={13} />}
        </button>
        <span onClick={() => set('agree', !form.agree)}>
          <a href="https://www.ramps.jp/privacy" target="_blank" rel="noopener noreferrer">プライバシーポリシー</a>に同意します。
        </span>
      </div>
      {errors.agree && <div className="form-error" style={{ marginTop: -8 }}>{errors.agree}</div>}

      <button type="submit" className="btn btn-primary btn-xl bk-submit" disabled={sending}>{sending ? '送信中…' : 'この日時で予約する'}</button>
      <div className="req-note">✉ 日程が合わない場合は <a href="mailto:tomarin@ramps.jp">tomarin@ramps.jp</a> までお気軽に。</div>
    </form>
  );
}

function DemoBooking() {
  const today = React.useMemo(() => { const t = new Date(); t.setHours(0, 0, 0, 0); return t; }, []);
  const [month, setMonth] = React.useState(new Date(today.getFullYear(), today.getMonth(), 1));
  const [date, setDate] = React.useState(null);
  const [time, setTime] = React.useState(null);
  const [step, setStep] = React.useState(1); // 1: pick slot, 2: details, 3: done
  const [done, setDone] = React.useState(null);

  const slots = date ? slotsForDate(date) : [];

  const pickDate = (d) => { setDate(d); setTime(null); };
  const goDetails = () => { if (date && time) setStep(2); };

  if (step === 3 && done) {
    return (
      <div className="req-done">
        <div className="req-done-mark">
          <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <h2>デモのご予約を承りました。</h2>
        <p>
          {done.name} 様、ありがとうございます。<br/>
          {done._sent
            ? <>ご予約内容を <strong>{NOTIFY_EMAIL}</strong> に送信しました。折り返し、オンライン会議のURLをお送りします。</>
            : <>下のボタンから <strong>{NOTIFY_EMAIL}</strong> に予約内容をお送りください。折り返し、会議URLをご案内します。</>}
        </p>
        <div className="req-done-summary">
          <div className="rds-row"><span>日時</span><span>{fmtDateJP(date)} {time}〜</span></div>
          <div className="rds-row"><span>形式</span><span>オンライン（約1時間）</span></div>
          <div className="rds-row"><span>宿泊施設</span><span>{done.inn}</span></div>
        </div>
        {!done._sent && (
          <div className="bk-notify">
            <NotifyButton date={date} time={time} form={done} />
            <div className="bk-notify-note">
              メールアプリが開きます。開かない場合は予約内容がコピーされるので、{NOTIFY_EMAIL} 宛に貼り付けて送信してください。
            </div>
          </div>
        )}
        <div className="bk-cal-add">
          <div className="bca-label">カレンダーに登録</div>
          <div className="bca-buttons">
            <a className="bca-btn gcal" href={gcalUrl(date, time, done)} target="_blank" rel="noopener noreferrer">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
              Googleカレンダーに追加
            </a>
            <button className="bca-btn ics" type="button" onClick={() => downloadIcs(date, time, done)}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 3v12"/><path d="m7 12 5 5 5-5"/><path d="M5 21h14"/></svg>
              .ics をダウンロード
            </button>
          </div>
          <div className="bca-note">
            予定には <strong>{ORGANIZER_EMAIL}</strong> が招待先として含まれます。「追加」すると tomarin の共有カレンダーにも反映されます。
          </div>
        </div>
        <div className="req-done-actions">
          <a href="/tomarin/" className="btn btn-dark btn-lg">トップへ戻る</a>
          <a href="/tomarin/shiryou-seikyuu.html" className="btn btn-outline btn-lg">お問い合わせもする</a>
        </div>
      </div>
    );
  }

  if (step === 2 && date && time) {
    return <BookingForm date={date} time={time} onBack={() => setStep(1)} onDone={(f) => { setDone(f); setStep(3); window.scrollTo({ top: 0, behavior: 'smooth' }); }} />;
  }

  return (
    <div className="bk-pick">
      <div className="bk-steps">
        <span className="bk-step active"><i>1</i>日時を選ぶ</span>
        <span className="bk-step-line" />
        <span className="bk-step"><i>2</i>情報を入力</span>
        <span className="bk-step-line" />
        <span className="bk-step"><i>3</i>完了</span>
      </div>
      <div className="bk-grid">
        <Calendar month={month} setMonth={setMonth} selected={date} onSelect={pickDate} today={today} />
        <div className="bk-slots">
          {!date && (
            <div className="bk-slots-empty">
              <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></svg>
              <p>左のカレンダーから、<br/>ご希望の日を選んでください。</p>
            </div>
          )}
          {date && (
            <>
              <div className="bk-slots-head">
                <div className="bsh-date">{fmtDateJP(date)}</div>
                <div className="bsh-sub">ご希望の開始時間をお選びください</div>
              </div>
              <div className="bk-slot-grid">
                {slots.map(s => (
                  <button type="button" key={s} className={`bk-slot ${time === s ? 'sel' : ''}`} onClick={() => setTime(s)}>{s}</button>
                ))}
              </div>
              <button type="button" className="btn btn-primary btn-lg bk-next" disabled={!time} onClick={goDetails}>
                {time ? `${time} で進む →` : '時間を選んでください'}
              </button>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

function DemoPage() {
  const demoType = 'full';
  const [hostId, setHostId] = React.useState(HOSTS[0].id);
  const host = HOSTS.find(h => h.id === hostId) || HOSTS[0];

  const agenda = ['予約管理・顧客台帳のご案内', '自動部屋割・オプション販売のご案内', '自宿の宿泊税シミュレーション', 'OTA連携・料金の目安', 'ご質問にお答えします'];

  return (
    <>
      <nav className="site-nav scrolled">
        <div className="nav-inner nav-inner-simple">
          <a href="/tomarin/" className="nav-brand">
            <img src="/tomarin/assets/tomarin-logo-cropped.png" alt="tomarin" className="nav-logo-img" />
          </a>
          <a href="/tomarin/" className="nav-back">← トップへ戻る</a>
        </div>
      </nav>

      <main className="req-main">
        <div className="req-shapes">
          <svg style={{ top: '40px', left: '6%' }} width="60" height="60" viewBox="0 0 60 60"><circle cx="30" cy="30" r="26" fill="#F5D938"/></svg>
          <svg style={{ top: '120px', right: '8%' }} width="46" height="46" viewBox="0 0 60 60"><circle cx="30" cy="30" r="24" fill="#9ED4E2"/></svg>
          <svg style={{ bottom: '8%', left: '10%' }} width="38" height="38" viewBox="0 0 60 60"><circle cx="30" cy="30" r="26" fill="#6FAF2A"/></svg>
        </div>
        <div className="req-wrap bk-wrap">
          <aside className="req-aside">
            <div className="req-eyebrow"><span className="dot" />オンラインデモのご予約</div>
            <h1 className="req-title">やりたかったことを、<br/>はじめてみる。</h1>
            <p className="req-lead">
              実際の <img src="/tomarin/assets/tomarin-wordmark.png" alt="tomarin" style={{ height: '0.92em', width: 'auto', display: 'inline-block', verticalAlign: '-0.06em' }} /> の画面を見ながら、宿の運営にどう役立つかをご説明します。準備は不要です。
            </p>

            {/* --- Concrete agenda --- */}
            <div className="bk-agenda">
              <div className="bka-head">この1時間でわかること</div>
              <ul className="bka-list">
                {agenda.map((a, i) => (
                  <li key={i}><span className="bka-no">{i + 1}</span>{a}</li>
                ))}
              </ul>
            </div>

            <div className="bk-note-line">予約後に確認メールとカレンダー招待が届きます。無理な営業はしません。</div>
          </aside>

          <div className="req-card bk-card cal-card">
            <CalendlyEmbed baseUrl={calendlyBase(host, demoType)} />
          </div>
        </div>
      </main>

      <footer className="req-footer">
        <div className="rf-inner">
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <BrandMark size={22} />
            <span>tomarin</span>
          </div>
          <div className="rf-copy">© 2026 Ramps Inc. · 北海道 上川郡 東川町</div>
        </div>
      </footer>
    </>
  );
}

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