/* global React, BrandMark, Reveal, Count, ShapeCircle, ShapeTri */

// ====================== NAV ======================
function SiteNav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [hidden, setHidden] = React.useState(false);
  React.useEffect(() => {
    let lastY = window.scrollY;
    const onScroll = () => {
      const y = window.scrollY;
      setScrolled(y > 10);
      if (y > 420 && y > lastY + 4) setHidden(true);
      else if (y < lastY - 4 || y <= 420) setHidden(false);
      lastY = y;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`site-nav ${scrolled ? 'scrolled' : ''} ${hidden ? 'nav-hidden' : ''}`}>
      <div className="nav-inner">
      <a href="#top" className="nav-brand">
        <img src="/tomarin/assets/tomarin-logo-cropped.png" alt="tomarin" className="nav-logo-img" />
      </a>
      <ul className="nav-menu">
        <li><a href="#strengths">特長</a></li>
        <li><a href="#highlights">強み</a></li>
        <li><a href="#features">機能</a></li>
        <li><a href="#case">実績</a></li>
        <li><a href="/tomarin/pricing.html">料金</a></li>
        <li><a href="#faq">FAQ</a></li>
      </ul>
      <div className="nav-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>
  );
}

// ====================== SCROLL PROGRESS ======================
function ScrollProgress() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      const p = max > 0 ? window.scrollY / max : 0;
      if (ref.current) ref.current.style.transform = `scaleX(${p})`;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return <div ref={ref} className="scroll-progress" style={{ width: '100%' }} />;
}

// ====================== HERO ======================
function Hero() {
  const mouse = React.useRef({ x: 0, y: 0 });
  const shapes = React.useRef([]);
  React.useEffect(() => {
    const onMove = (e) => {
      const x = (e.clientX / window.innerWidth - 0.5) * 2;
      const y = (e.clientY / window.innerHeight - 0.5) * 2;
      mouse.current = { x, y };
      shapes.current.forEach((el, i) => {
        if (!el) return;
        const factor = (i % 3 + 1) * 4;
        el.style.transform = `translate(${x * factor}px, ${y * factor}px)`;
      });
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <section className="hero" id="top">
      <div className="hero-shapes">
        <svg ref={el => shapes.current[0] = el} className="hero-shape" style={{ top: '80px', left: '8%', opacity: 0.2 }} width="56" height="56" viewBox="0 0 60 60"><circle cx="30" cy="30" r="26" fill="#F5D938"/></svg>
        <svg ref={el => shapes.current[1] = el} className="hero-shape" style={{ top: '160px', right: '10%', opacity: 0.22 }} width="48" height="48" viewBox="0 0 60 60"><circle cx="30" cy="30" r="24" fill="#9ED4E2"/></svg>
        <svg ref={el => shapes.current[2] = el} className="hero-shape" style={{ bottom: '20%', left: '14%', opacity: 0.2 }} width="50" height="50" viewBox="0 0 60 60"><polygon points="30,6 54,52 6,52" fill="#6FAF2A"/></svg>
        <svg ref={el => shapes.current[3] = el} className="hero-shape" style={{ top: '30%', right: '18%', opacity: 0.12 }} width="28" height="28" viewBox="0 0 60 60"><circle cx="30" cy="30" r="26" fill="#6FAF2A"/></svg>
        <svg ref={el => shapes.current[4] = el} className="hero-shape" style={{ bottom: '30%', right: '8%', opacity: 0.15 }} width="36" height="36" viewBox="0 0 60 60"><polygon points="30,6 54,52 6,52" fill="#F5D938"/></svg>
      </div>
      <div className="hero-inner">
        <Reveal delay={80}>
          <h1>
            ファンと、<span className="mark">もう一度</span><br />
            <span className="serif">会える宿へ。</span>
          </h1>
        </Reveal>
        <Reveal delay={180}>
          <p className="hero-sub">
            予約・決済・顧客管理を、ひとつの画面に。<br />
            OTAに頼らず、リピーターが育つ宿をつくるクラウドPMSです。
          </p>
        </Reveal>
        <Reveal delay={260}>
          <div className="hero-buttons">
            <a href="/tomarin/demo-yoyaku.html" className="btn btn-dark btn-lg">デモを予約する</a>
            <a href="/tomarin/shiryou-seikyuu.html" className="btn btn-outline btn-lg">お問い合わせ</a>
          </div>
        </Reveal>

        <Reveal delay={340}>
          <div className="hero-clients">
            <div className="hero-clients-label">北海道・東川町の宿泊施設で稼働中</div>
            <div className="hero-clients-row">
              <span className="hcl-box"><img src="/tomarin/assets/clients/kitoushi-trim.png" alt="キトウシの森" /></span>
              <span className="hcl-box">
                <img src="/tomarin/assets/clients/higashikawa-town.webp" alt="東川町 写真の町" />
              </span>
              <span className="hcl-box"><img src="/tomarin/assets/clients/mizuniwa-trim.png" alt="みずにわテラス" /></span>
              <span className="hcl-box"><img src="/tomarin/assets/clients/furusato-trim.png" alt="JA" /></span>
              <span className="hcl-box"><img src="/tomarin/assets/clients/ensembles-trim.png" alt="ensembles" /></span>
            </div>
          </div>
        </Reveal>

        <Reveal delay={420}>
          <ProductMock />
        </Reveal>
      </div>
    </section>
  );
}

// ====================== PRODUCT MOCK — interactive views ======================
const MOCK_VIEWS = ['ダッシュボード', '宿泊台帳', '顧客', '自社予約', 'マイページ'];
const GUEST_VIEWS = ['自社予約', 'マイページ'];

function MockDashboard({ todayBookings }) {
  const moves = [
    { time: '10:00', label: 'チェックアウト', who: '高橋 様 · 梅の間', tags: [['blue', 'リピーター']] },
    { time: '15:00', label: 'チェックイン', who: '山田 様 · 松の間', tags: [['green', '送迎あり']] },
    { time: '16:00', label: 'チェックイン', who: 'Chen 様 · 竹の間', tags: [['yellow', '海外OTA'], ['red', 'そばアレルギー']] },
    { time: '18:00', label: '夕食', who: '2組 4名', tags: [['red', 'アレルギー対応 1']] },
  ];
  const todos = [
    { text: '清掃が未完了：桜の間・竹の間', sub: '15:00 のチェックインまでに', urgent: true },
    { text: '未返信の問い合わせが 1件', sub: '「送迎の時間について」· 昨日 21:04', urgent: true },
    { text: '今夜は残り 1室', sub: '自社予約サイトで販売中', urgent: false },
    { text: '明日：チェックイン 4組（うち海外 1組）', sub: '送迎の希望は今のところなし', urgent: false },
  ];
  return (
    <React.Fragment>
      <div className="mock-stats">
        <div className="mock-stat">
          <div className="mock-stat-label">本日チェックイン</div>
          <div className="mock-stat-val"><Count to={3} /><span className="unit">組</span><span className="sub">15:00〜</span></div>
        </div>
        <div className="mock-stat">
          <div className="mock-stat-label">本日チェックアウト</div>
          <div className="mock-stat-val"><Count to={2} /><span className="unit">組</span><span className="sub">〜11:00</span></div>
        </div>
        <div className="mock-stat">
          <div className="mock-stat-label">清掃</div>
          <div className="mock-stat-val"><Count to={2} /><span className="unit">室 残り</span><span className="sub warn">15:00まで</span></div>
        </div>
        <div className="mock-stat">
          <div className="mock-stat-label">今夜の稼働</div>
          <div className="mock-stat-val"><Count to={7} /><span className="unit">/ 8室</span><span className="sub">残り1室 販売中</span></div>
        </div>
      </div>
      <div className="mock-today">
        <div className="mt-col">
          <div className="mt-head">今日の動き</div>
          {moves.map((m, i) => (
            <div key={i} className="mt-item" style={{ animationDelay: `${300 + i * 120}ms` }}>
              <span className="mt-time">{m.time}</span>
              <span className="mt-what">
                <strong>{m.label}</strong>
                <span className="mt-who">{m.who}</span>
              </span>
              <span className="mt-tags">
                {m.tags.map(([c, t], ti) => <em key={ti} className={`mt-tag ${c}`}>{t}</em>)}
              </span>
            </div>
          ))}
        </div>
        <div className="mt-col">
          <div className="mt-head">対応が必要</div>
          {todos.map((t, i) => (
            <div key={i} className="mt-item mt-todo" style={{ animationDelay: `${400 + i * 120}ms` }}>
              <span className={`mt-dot ${t.urgent ? 'urgent' : ''}`}></span>
              <span className="mt-what">
                <strong>{t.text}</strong>
                <span className="mt-who">{t.sub}</span>
              </span>
            </div>
          ))}
        </div>
      </div>
    </React.Fragment>
  );
}

function MockLedger() {
  const rooms = [
    { name: '松の間', type: 'デラックス和室' },
    { name: '竹の間', type: 'スタンダード和室' },
    { name: '梅の間', type: 'ツイン洋室' },
    { name: '桜の間', type: 'ファミリー和洋室' },
  ];
  const bookings = [
    { room: 0, start: 0, len: 3, name: '山田 様', type: 'green' },
    { room: 0, start: 4, len: 2, name: '伊藤 様', type: 'blue' },
    { room: 0, start: 7, len: 3, name: '佐藤 様', type: 'green' },
    { room: 1, start: 1, len: 2, name: 'Chen 様', type: 'yellow' },
    { room: 1, start: 3, len: 2, name: '新規予約', type: 'green', isNew: true },
    { room: 1, start: 5, len: 4, name: '田中 様', type: 'green' },
    { room: 2, start: 0, len: 4, name: '高橋 様', type: 'blue' },
    { room: 2, start: 6, len: 2, name: '小林 様', type: 'green' },
    { room: 3, start: 2, len: 3, name: 'Smith 様', type: 'yellow' },
    { room: 3, start: 7, len: 3, name: '中村 様', type: 'green' },
  ];
  const days = Array.from({ length: 10 }, (_, i) => {
    const d = new Date(2026, 3, 20 + i);
    return {
      num: d.getDate(),
      wk: ['日','月','火','水','木','金','土'][d.getDay()],
      isWeekend: d.getDay() === 0 || d.getDay() === 6,
      isToday: i === 0,
    };
  });
  return (
    <div className="mock-ledger">
      <div className="ml-grid" style={{ gridTemplateColumns: `96px repeat(${days.length}, 1fr)` }}>
        <div className="ml-corner">客室</div>
        {days.map((d, i) => (
          <div key={i} className={`ml-day ${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="ml-room">
              {r.name}
              <span className="type">{r.type}</span>
            </div>
            {days.map((d, i) => (
              <div key={i} className={`ml-cell ${d.isWeekend ? 'weekend' : ''}`}>
                {bookings.filter(b => b.room === rIdx && b.start === i).map((b, bi) => (
                  <div key={bi} className={`ml-booking ${b.type} ${b.isNew ? 'ml-new' : ''}`}
                    style={{ width: `calc(${b.len * 100}% - 5px)` }}>
                    {b.name}
                  </div>
                ))}
              </div>
            ))}
          </React.Fragment>
        ))}
      </div>
      <div className="ml-foot">
        <div className="ml-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>
  );
}

function MockCustomers() {
  const customers = [
    { initial: '田', name: '田中 さくら 様', area: '東京都 世田谷区', visits: '3回 · 3年連続', tags: [['#和食','green'],['#ファミリー','yellow']], repeat: true },
    { initial: '高', name: '高橋 誠 様', area: '札幌市 中央区', visits: '5回 · 毎冬', tags: [['#スキー','blue'],['#連泊','green']], repeat: true },
    { initial: 'C', name: 'Chen Wei 様', area: 'Taipei · EN', visits: '1回', tags: [['#海外','yellow'],['#写真','blue']], repeat: false },
    { initial: '小', name: '小林 直子 様', area: '旭川市', visits: '2回', tags: [['#夫婦','green']], repeat: false },
  ];
  return (
    <div className="mock-customers">
      {customers.map(c => (
        <div className="mc-row" key={c.name}>
          <div className="mc-avatar">{c.initial}</div>
          <div className="mc-main">
            <div className="mc-name">{c.name}{c.repeat && <span className="mc-repeat">★ リピーター</span>}</div>
            <div className="mc-area">{c.area} · 滞在 {c.visits}</div>
          </div>
          <div className="mc-tags">
            {c.tags.map(([t, col]) => <span key={t} className={`mc-tag ${col}`}>{t}</span>)}
          </div>
        </div>
      ))}
    </div>
  );
}

function MockBookingSite() {
  return (
    <div className="mb2">
      <div className="mb2-top">
        <span className="mb2-login">ログイン</span>
        <span className="mb2-logo"><img src="/tomarin/assets/clients/ensembles-trim.png" alt="ensembles" /></span>
        <span className="mb2-lang">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a13.5 13.5 0 0 1 0 18a13.5 13.5 0 0 1 0-18"/></svg>
          日本語 ▾
        </span>
      </div>
      <div className="mb2-filter">
        <div className="mb2-fcell">
          <span>部屋数／合計人数</span>
          <strong>1部屋／大人2人, 子供0人</strong>
        </div>
        <div className="mb2-fcell">
          <span>客室タイプ</span>
          <strong className="mute">未指定</strong>
        </div>
        <div className="mb2-fcell">
          <span>条件</span>
          <strong className="mute">未指定</strong>
        </div>
        <div className="mb2-fcell right">
          <span>チェックイン - チェックアウト</span>
          <strong>2026-07-09 〜 2026-07-10</strong>
        </div>
        <span className="mb2-search-ico">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>
        </span>
      </div>
      <div className="mb2-body">
        <div className="mb2-notice">
          半年先までのご予約が可能です。なお、オンライン予約にはクレジットカード番号が必要です。<br/>
          ※2026年4月1日より別途「北海道宿泊税」が導入されます。
        </div>
        <div className="mb2-room">
          <div className="mb2-room-name">A棟</div>
          <div className="mb2-room-desc">田園風景に囲まれた静かな環境で、気兼ねなく過ごせる一棟貸しタイプの客室です。最大6名まで宿泊できます。</div>
          <div className="mb2-plan">
            <div className="mb2-photo"></div>
            <div className="mb2-plan-main">
              <div className="mb2-plan-name">通常プラン</div>
              <div className="mb2-plan-price"><span className="num">30,000</span> 円（税込）</div>
              <div className="mb2-select">選択</div>
            </div>
          </div>
          <div className="mb2-thumbs"><i></i><i></i></div>
        </div>
      </div>
      <div className="mb2-foot"><strong>1</strong>部屋中 <strong>1</strong>室目を選択</div>
    </div>
  );
}

function MockMyPage() {
  return (
    <div className="mp2">
      <div className="mp2-nav">
        <img src="/tomarin/assets/clients/ensembles-trim.png" alt="ensembles" className="mp2-logo" />
        <span className="mp2-item">
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>
          新規予約 ▾
        </span>
        <span className="mp2-item active">
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><rect x="3" y="4" width="18" height="17" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="16" y1="2" x2="16" y2="6"/></svg>
          予約一覧
        </span>
        <span className="mp2-item">
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-6 8-6s8 2 8 6"/></svg>
          会員登録情報
        </span>
        <span className="mp2-user">田中 さくら 様 ▾&nbsp;&nbsp;·&nbsp;&nbsp;日本語 ▾</span>
      </div>
      <div className="mp2-body">
        <div className="mp2-title">予約一覧</div>
        <div className="mp2-tabs">
          <b>予約中</b>
          <span>チェックイン済</span>
          <span>宿泊済</span>
          <span>キャンセル済</span>
        </div>
        <div className="mp2-card">
          <div className="mp2-photo"></div>
          <div className="mp2-main">
            <div className="mp2-room">ensembles ケビン</div>
            <div className="mp2-dates">
              <span className="mp2-date"><span>チェックイン</span><strong>2026年4月25日（土）</strong></span>
              <span className="mp2-arrow">→</span>
              <span className="mp2-date"><span>チェックアウト</span><strong>2026年4月27日（月）</strong></span>
            </div>
            <div className="mp2-meta">予約番号：9823511253<br/>決済方法：オンライン決済</div>
          </div>
          <div className="mp2-detail">詳細確認</div>
        </div>
        <div className="mp2-member">
          <span className="mp2-member-title">会員登録情報</span>
          <span className="mp2-badge">東川町株主</span>
          <span className="mp2-valid">有効</span>
          <span className="mp2-member-meta">割引証（東川町株主）</span>
          <span className="mp2-member-meta" style={{ marginLeft: 'auto' }}>支払い方法：diners •••• 4102</span>
        </div>
      </div>
    </div>
  );
}

function ProductMock() {
  const [active, setActive] = React.useState('ダッシュボード');
  const [auto, setAuto] = React.useState(true);
  const [hover, setHover] = React.useState(false);
  const [todayBookings, setTodayBookings] = React.useState(12);

  React.useEffect(() => {
    const t = setInterval(() => setTodayBookings(b => b + 1), 9000);
    return () => clearInterval(t);
  }, []);

  React.useEffect(() => {
    if (!auto || hover) return;
    const t = setInterval(() => {
      setActive(a => MOCK_VIEWS[(MOCK_VIEWS.indexOf(a) + 1) % MOCK_VIEWS.length]);
    }, 4600);
    return () => clearInterval(t);
  }, [auto, hover]);

  const resumeRef = React.useRef(null);
  const select = (item) => {
    if (!MOCK_VIEWS.includes(item)) return;
    setAuto(false);
    setActive(item);
    clearTimeout(resumeRef.current);
    resumeRef.current = setTimeout(() => setAuto(true), 14000);
  };
  const step = (d) => {
    select(MOCK_VIEWS[(MOCK_VIEWS.indexOf(active) + d + MOCK_VIEWS.length) % MOCK_VIEWS.length]);
  };

  const titles = {
    'ダッシュボード': '本日 · 4月20日（月）',
    '宿泊台帳': '宿泊台帳',
    '顧客': '顧客台帳',
    '自社予約': '自社予約（ゲスト画面）',
    'マイページ': 'マイページ（ゲスト画面）',
  };
  const urls = {
    'ダッシュボード': 'app.tomarin.co / dashboard',
    '宿泊台帳': 'app.tomarin.co / ledger',
    '顧客': 'app.tomarin.co / customers',
    '自社予約': 'demo.tomarin-test.co / e-guesthouse',
    'マイページ': 'ensembles.tomarin.co / my/reservations',
  };

  const isGuest = GUEST_VIEWS.includes(active);
  const ADMIN_VIEWS = MOCK_VIEWS.filter(v => !GUEST_VIEWS.includes(v));

  return (
    <div className="mock-outer">
      <div className="mock-mode-tabs">
        <button className={!isGuest ? 'active' : ''} onClick={() => select('ダッシュボード')}>予約管理</button>
        <button className={isGuest ? 'active' : ''} onClick={() => select('自社予約')}>自社予約</button>
      </div>
    <div className="product-mock"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}>
      <div className="mock-chrome">
        <div className="mock-dots"><span /><span /><span /></div>
        <div className="mock-url">{urls[active]}</div>
        <div style={{ width: 40 }} />
      </div>
      {isGuest ? (
        <div className="mock-guest mock-view" key={active}>
          {active === '自社予約' ? <MockBookingSite /> : <MockMyPage />}
        </div>
      ) : (
      <div className="mock-grid">
        <aside className="mock-sidebar">
          <div className="mock-sidebar-brand">
            <BrandMark size={18} />
            <span>ensembles</span>
          </div>
          <div className="mock-sidebar-section">メイン</div>
          {['ダッシュボード', '宿泊台帳', '顧客', '客室・料金', '清掃'].map(item => (
            <div key={item}
              onClick={() => select(item)}
              className={`mock-nav-item ${active === item ? 'active' : ''} ${MOCK_VIEWS.includes(item) ? '' : 'dim'}`}>
              <span className="nav-dot" />
              {item}
            </div>
          ))}
          <div className="mock-sidebar-section">分析</div>
          {['売上', 'プラン', 'チーム'].map(item => (
            <div key={item} className="mock-nav-item dim">
              <span className="nav-dot" />
              {item}
            </div>
          ))}
        </aside>
        <div className="mock-main">
          <div className="mock-topbar">
            <div className="mock-title-jp">{titles[active]}</div>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
              <div className="ticker"><span className="ping" />本日チェックイン {todayBookings}件</div>
              <div className="mock-date-chip">Apr 2026</div>
            </div>
          </div>
          <div className="mock-view" key={active}>
            {active === 'ダッシュボード' && <MockDashboard todayBookings={todayBookings} />}
            {active === '宿泊台帳' && <MockLedger />}
            {active === '顧客' && <MockCustomers />}
          </div>
        </div>
      </div>
      )}
      <div className="mock-view-dots">
        {(isGuest ? GUEST_VIEWS : ADMIN_VIEWS).map(v => (
          <button key={v} className={`mvd ${active === v ? 'on' : ''}`} onClick={() => select(v)} aria-label={v} title={v}></button>
        ))}
      </div>
    </div>
    </div>
  );
}

// ====================== STRENGTHS — now Problem ======================
function Strengths() {
  const items = [
    { num: '#1', shape: <ShapeCircle color="#F5D938" />, cat: '集客 · CHANNEL', title: <React.Fragment>OTA頼みで、<br/>お客様の顔が見えない。</React.Fragment>, body: 'OTA経由では手数料10〜25%、顧客情報も宿に残らない。' },
    { num: '#2', shape: <ShapeTri color="#6FAF2A" />, cat: '運営 · OPERATION', title: <React.Fragment>事務作業に、<br/>時間を奪われている。</React.Fragment>, body: '繰り返しの業務が、おもてなしの時間を奪っている。' },
    { num: '#3', shape: <ShapeCircle color="#9ED4E2" />, cat: '再訪 · RETENTION', title: <React.Fragment>一度きりで、<br/>関係が途切れる。</React.Fragment>, body: '連絡手段がなく、関係はその日限りで途切れる。' },
  ];
  return (
    <section className="section" id="strengths">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <h2 className="section-title">地域の宿が、<br/>抱える3つの課題。</h2>
          </div>
        </Reveal>
        <div className="strengths-grid">
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 100}>
              <div className="strength-card">
                <div className="corner-mark">{it.shape}</div>
                <div className="num-mark">
                  <span className="num problem-num">{it.num}</span>
                  <span className="problem-cat">{it.cat}</span>
                </div>
                <h3>{it.title}</h3>
                <p>{it.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={400}>
          <p className="problem-closer">
            人口減少のいま、宿に必要なのは<br />
            <span className="serif">「一度きりの客」ではなく、「<span className="mark">何度も戻ってくる人</span>」。</span>
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// ====================== VALUE PILLARS — Solution: 3 animated cards ======================
function ValuePillars() {
  const cards = [
    {
      cat: '集客 · CHANNEL',
      title: '自社予約が、宿に残る。',
      body: 'OTA依存から、顧客データごと宿のものに。手数料の流出を止めます。',
      visual: (
        <div className="solx-visual">
          <div className="solx-chip solx-anim-pop">
            <span className="solx-avatar">田</span>
            <span>田中 様 · 自社予約</span>
            <em>手数料 ¥0</em>
          </div>
          <div className="solx-chip dim solx-anim-pop d2">
            <span className="solx-avatar blue">高</span>
            <span>高橋 様 · 自社予約</span>
            <em>手数料 ¥0</em>
          </div>
        </div>
      ),
    },
    {
      cat: '運営 · OPERATION',
      title: '繰り返しは、自動で。',
      body: '精算・メール・清掃指示まで tomarin が受け持ち、おもてなしの時間を返します。',
      visual: (
        <div className="solx-visual">
          {['チェックイン案内を送信', '宿泊税を自動算定', '清掃タスクを作成'].map((t, i) => (
            <div className={`solx-task solx-anim-check d${i}`} key={t}>
              <i>✓</i><span>{t}</span>
            </div>
          ))}
        </div>
      ),
    },
    {
      cat: '再訪 · RETENTION',
      title: '一度の出会いを、定宿に。',
      body: '顧客台帳が好みや履歴を覚え、「おかえりなさい」の接客を可能にします。',
      visual: (
        <div className="solx-visual">
          <div className="solx-profile">
            <span className="solx-avatar lg">田</span>
            <div>
              <div className="solx-name">田中 さくら 様</div>
              <div className="solx-meta">滞在3回 · ほうじ茶好き</div>
            </div>
            <span className="solx-badge solx-anim-pulse">★ リピーター</span>
          </div>
          <div className="solx-chip dim solx-anim-pop d2">
            <span>3年連続でご来訪</span>
            <em className="green">✓</em>
          </div>
        </div>
      ),
    },
  ];

  return (
    <section className="section" id="solution">
      <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>
          </div>
        </Reveal>
        <div className="solx-grid">
          {cards.map((c, i) => (
            <Reveal key={c.cat} delay={i * 120}>
              <div className="solx-card">
                {c.visual}
                <div className="solx-cat">{c.cat}</div>
                <h3 className="solx-title">{c.title}</h3>
                <p className="solx-body">{c.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { SiteNav, ScrollProgress, Hero, ProductMock, Strengths, ValuePillars });