// PC Screen Gallery — horizontal scrolling rail of all app screens.
// On PC we show ~4-5 phones at once and let scroll/arrow keys reveal more.

const GALLERY_SCREENS_PC = [
  { key: 'onboarding', label: 'はじめてのご挨拶', latin: 'Welcome', Screen: ScreenOnboarding },
  { key: 'home',       label: 'ホーム',           latin: 'Home',    Screen: ScreenHome },
  { key: 'menu',       label: '占いメニュー',      latin: 'Menu',    Screen: ScreenMenu },
  { key: 'today',      label: '今日の運勢',        latin: 'Today',   Screen: ScreenTodayResult },
  { key: 'dreamIn',    label: '夢占い入力',        latin: 'Dream',   Screen: ScreenDreamInput },
  { key: 'dreamOut',   label: '夢占い結果',        latin: 'Reading', Screen: ScreenDreamResult },
  { key: 'tarot',      label: 'タロット',          latin: 'Tarot',   Screen: ScreenTarot },
  { key: 'mypage',     label: 'マイページ',        latin: 'Mine',    Screen: ScreenMypage },
  { key: 'paid',       label: '占い師に相談',      latin: 'Readers', Screen: ScreenPaidMenu },
  { key: 'counselor',  label: '占い師プロフィール', latin: 'Profile', Screen: ScreenCounselor },
];

const ScreenGalleryPC = ({ theme }) => {
  const t = getAppTheme(theme);
  const railRef = React.useRef(null);
  const [active, setActive] = React.useState(0);

  const onScroll = React.useCallback(() => {
    const rail = railRef.current;
    if (!rail) return;
    const cardW = rail.firstChild?.offsetWidth || 280;
    const idx = Math.round(rail.scrollLeft / (cardW + 32));
    setActive(Math.min(GALLERY_SCREENS_PC.length - 1, Math.max(0, idx)));
  }, []);

  const scrollBy = (dir) => {
    const rail = railRef.current;
    if (!rail) return;
    const cardW = rail.firstChild?.offsetWidth || 280;
    rail.scrollBy({ left: dir * (cardW + 32) * 2, behavior: 'smooth' });
  };

  return (
    <section style={{ paddingBottom: 60 }}>
      <div className="container">
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          marginBottom: 40, gap: 40,
        }}>
          <div>
            <div className="eyebrow">— Inside Mirise —</div>
            <h2 className="section-title">
              実際の画面を、<em>すこし覗いてみる。</em>
            </h2>
            <p style={{
              fontSize: 15, color: 'var(--ink-soft)',
              letterSpacing: '0.1em', marginTop: 16, lineHeight: 1.9,
            }}>
              登録時の案内から占いメニュー、結果画面や相談画面まで確認できます。
            </p>
          </div>

          <div style={{ display: 'flex', gap: 12 }}>
            <ArrowButtonPC onClick={() => scrollBy(-1)} dir="left"/>
            <ArrowButtonPC onClick={() => scrollBy(1)} dir="right"/>
          </div>
        </div>
      </div>

      {/* Rail — uses full viewport width with padding to align first item with container */}
      <div
        ref={railRef}
        className="rail"
        onScroll={onScroll}
        style={{
          display: 'flex', gap: 32,
          overflowX: 'auto', overflowY: 'visible',
          padding: '24px max(64px, calc((100vw - 1280px) / 2 + 64px)) 40px',
          scrollSnapType: 'x mandatory',
          WebkitOverflowScrolling: 'touch',
        }}
      >
        {GALLERY_SCREENS_PC.map(({ key, label, latin, Screen }, i) => (
          <div key={key} style={{
            flex: '0 0 auto',
            scrollSnapAlign: 'start',
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            gap: 18,
          }}>
            <div style={{
              padding: 8,
              borderRadius: 38,
              background: 'rgba(255, 255, 255, 0.5)',
              border: '1px solid rgba(203, 168, 104, 0.3)',
              boxShadow: '0 28px 56px -28px rgba(150, 100, 130, 0.4)',
              backdropFilter: 'blur(8px)',
            }}>
              <PhoneScaled scale={0.78}>
                <Screen t={t}/>
              </PhoneScaled>
            </div>
            <div style={{ textAlign: 'center' }}>
              <div className="latin" style={{
                fontSize: 11, color: 'var(--gold)',
                letterSpacing: '0.32em',
              }}>{`${String(i + 1).padStart(2, '0')} · ${latin}`}</div>
              <div style={{
                fontFamily: 'var(--title-font)', fontSize: 15,
                letterSpacing: '0.1em', color: 'var(--ink)', marginTop: 6,
              }}>{label}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Dots */}
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        gap: 8, marginTop: 12,
      }}>
        {GALLERY_SCREENS_PC.map((_, i) => (
          <div key={i} style={{
            width: i === active ? 24 : 6, height: 6,
            borderRadius: 3,
            background: i === active ? 'var(--accent-deep)' : 'rgba(167, 137, 98, 0.4)',
            transition: 'all 0.3s ease',
          }}/>
        ))}
      </div>
    </section>
  );
};

const ArrowButtonPC = ({ onClick, dir }) => (
  <button onClick={onClick} style={{
    width: 48, height: 48, borderRadius: '50%',
    background: 'rgba(255, 255, 255, 0.8)',
    border: '1px solid rgba(203, 168, 104, 0.4)',
    color: 'var(--ink)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    cursor: 'pointer',
    backdropFilter: 'blur(8px)',
    transition: 'transform 0.2s ease, background 0.2s ease',
  }}
  onMouseEnter={(e) => {
    e.currentTarget.style.background = '#fff';
    e.currentTarget.style.transform = 'translateY(-2px)';
  }}
  onMouseLeave={(e) => {
    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.8)';
    e.currentTarget.style.transform = 'translateY(0)';
  }}>
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
      <path d={dir === 'left' ? 'M14 6l-6 6 6 6' : 'M10 6l6 6-6 6'}
        stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  </button>
);

window.ScreenGalleryPC = ScreenGalleryPC;