// レストラン総合ページ用 共通スタイル＋ヘッダー/フッター
const rStyles = {
  bg:    '#FDFBF5',
  cream: '#F2EFE8',
  fg:    '#1A1A1A',
  mute:  'rgba(26,26,26,0.6)',
  line:  'rgba(26,26,26,0.12)',
  accent:'#D33718',
  dark:  '#1A1A1A',
  paper: '#FDFBF5',
  sans:    '"Noto Sans JP", "Inter", "Helvetica Neue", sans-serif',
  display: '"Noto Serif JP", "Fraunces", serif',
  displayEn:'"Fraunces", "Cormorant Garamond", serif',
  mono:    '"JetBrains Mono", ui-monospace, monospace',
};

function inferBasePath() {
  if (typeof window === 'undefined') return '';
  return /\/restaurants\//.test(window.location.pathname) ? '../' : '';
}

const CORPORATE_SITE_URL = '#'; // TODO: 本社コーポレートサイトURLに差し替え

function buildNavGroups(basePath) {
  return [
    { label: 'ジャンル', items: [
      { name: '中華',           href: `${basePath}restaurants/genre.html?g=chinese` },
      { name: '和食',           href: `${basePath}restaurants/genre.html?g=washoku` },
      { name: '洋食',           href: `${basePath}restaurants/genre.html?g=yoshoku` },
      { name: '焼肉・鉄板',     href: `${basePath}restaurants/genre.html?g=yakiniku` },
    ]},
    { label: 'ブランド一覧',  href: `${basePath}restaurants/brands.html` },
    { label: 'エリアで探す',  href: `${basePath}restaurants/area.html` },
    { label: '条件で絞り込む', href: `${basePath}restaurants/search.html` },
    { label: 'お知らせ',       href: `${basePath}news.html` },
    { label: 'コーポレートサイト', href: CORPORATE_SITE_URL, external: true },
  ];
}

const REST_NAV_GROUPS = buildNavGroups('');

function RHeaderMobileMenu({ open, onClose, navGroups, basePath }) {
  const [mounted, setMounted] = React.useState(false);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    if (open) {
      setMounted(true);
      document.body.style.overflow = 'hidden';
      requestAnimationFrame(() => setVisible(true));
    } else {
      setVisible(false);
      document.body.style.overflow = '';
      const t = setTimeout(() => setMounted(false), 300);
      return () => clearTimeout(t);
    }
  }, [open]);

  if (!mounted) return null;

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 200,
      background: rStyles.bg,
      color: rStyles.fg,
      display: 'flex', flexDirection: 'column', overflowY: 'auto',
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateX(0)' : 'translateX(100%)',
      transition: 'opacity 0.26s ease, transform 0.26s ease',
    }}>
      {/* ヘッダー行 */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 24px', borderBottom: `1px solid ${rStyles.line}`, flexShrink: 0 }}>
        <a href={`${basePath}index.html`} onClick={onClose} style={{ textDecoration: 'none', fontFamily: rStyles.displayEn, fontSize: 22, fontWeight: 500, letterSpacing: -0.8, color: rStyles.fg }}>
          Kiwa<span style={{ color: rStyles.accent }}>.</span>
        </a>
        <button onClick={onClose} aria-label="閉じる" style={{ background: 'none', border: 'none', padding: 8, cursor: 'pointer', color: rStyles.fg, lineHeight: 1 }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M18 6L6 18M6 6l12 12"/></svg>
        </button>
      </div>

      {/* ナビゲーション */}
      <nav style={{ padding: '0 24px', flex: 1 }}>
        {navGroups.map(g => (
          <div key={g.label} style={{ borderBottom: `1px solid ${rStyles.line}` }}>
            {g.items ? (
              <div style={{ padding: '14px 0' }}>
                <div style={{ fontFamily: rStyles.mono, fontSize: 9, letterSpacing: 2.5, color: rStyles.mute, marginBottom: 8 }}>◦ GENRE</div>
                <div style={{ fontFamily: rStyles.display, fontSize: 20, fontWeight: 500, letterSpacing: -0.5, color: rStyles.fg, marginBottom: 10 }}>{g.label}</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px 16px' }}>
                  {g.items.map(it => (
                    <a key={it.name} href={it.href} onClick={onClose} style={{ color: rStyles.fg, textDecoration: 'none', fontSize: 14, fontFamily: rStyles.sans, padding: '5px 0', display: 'block' }}>
                      {it.name} →
                    </a>
                  ))}
                </div>
              </div>
            ) : (
              <a href={g.href} onClick={onClose}
                 target={g.external ? '_blank' : undefined}
                 rel={g.external ? 'noopener noreferrer' : undefined}
                 style={{ color: rStyles.fg, textDecoration: 'none', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 0' }}>
                <span style={{ fontFamily: rStyles.display, fontSize: 20, fontWeight: 500, letterSpacing: -0.5, color: rStyles.fg }}>
                  {g.label}
                  {g.external && <span style={{ fontSize: 12, marginLeft: 6, opacity: 0.55 }}>↗</span>}
                </span>
                <span style={{ fontFamily: rStyles.mono, fontSize: 13, color: rStyles.mute }}>→</span>
              </a>
            )}
          </div>
        ))}
      </nav>

      {/* フッターアクション */}
      <div style={{ padding: '12px 24px 20px', flexShrink: 0 }}>
        <a href={`${basePath}contact.html`} onClick={onClose} style={{
          display: 'block', padding: '12px 20px',
          background: rStyles.accent, color: '#fff',
          textDecoration: 'none', textAlign: 'center',
          fontFamily: rStyles.sans, fontSize: 13, fontWeight: 600,
          borderRadius: 2,
        }}>
          お問い合わせ →
        </a>
      </div>
    </div>
  );
}

function RHeader({ tone = 'light' }) {
  // tone: light = on cream bg / dark = on photo
  const basePath = inferBasePath();
  const navGroups = React.useMemo(() => buildNavGroups(basePath), [basePath]);
  const homeHref = `${basePath}index.html`;
  const [open, setOpen] = React.useState(false);
  const isDark = tone === 'dark';
  const fg   = isDark ? '#fff' : rStyles.fg;
  const mute = isDark ? 'rgba(255,255,255,0.7)' : rStyles.mute;
  const line = isDark ? 'rgba(255,255,255,0.18)' : rStyles.line;
  const bg   = isDark ? 'rgba(26,26,26,0.55)' : 'rgba(253,251,245,0.92)';
  return (
    <React.Fragment>
      <header style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50, background: bg, backdropFilter: 'blur(12px)', borderBottom: `1px solid ${line}` }}>
        <div className="kw-header-inner" style={{ maxWidth: 1500, margin: '0 auto', padding: '16px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <a href={homeHref} style={{ color: fg, textDecoration: 'none', fontFamily: rStyles.displayEn, fontSize: 26, fontWeight: 500, letterSpacing: -1 }}>Kiwa<span style={{ color: rStyles.accent }}>.</span></a>
            <span className="vc-header-tag" style={{ paddingLeft: 14, marginLeft: 4, borderLeft: `1px solid ${line}`, color: mute, fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2 }}>RESTAURANTS / 際 飲食</span>
          </div>
          <nav className="vc-nav" style={{ display: 'flex', gap: 28, fontSize: 13, fontWeight: 500 }}>
            {navGroups.map(g => (
              g.items ? (
                <div key={g.label} className="vc-nav-item" style={{ position: 'relative' }}>
                  <a href="#" style={{ color: fg, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 4, padding: '8px 0' }}>
                    {g.label}
                    <span style={{ fontSize: 9, opacity: 0.5 }}>▾</span>
                  </a>
                  <div className="vc-nav-dropdown" style={{ position: 'absolute', top: '100%', left: -16, paddingTop: 8, opacity: 0, visibility: 'hidden', transition: 'opacity 0.18s, visibility 0.18s', pointerEvents: 'none' }}>
                    <div style={{ background: rStyles.paper, border: `1px solid ${rStyles.line}`, borderRadius: 4, minWidth: 220, padding: '8px 0', boxShadow: '0 8px 32px rgba(26,26,26,0.08)' }}>
                      <div style={{ padding: '6px 20px 8px', fontFamily: rStyles.mono, fontSize: 9, letterSpacing: 2, color: rStyles.mute, borderBottom: `1px solid ${rStyles.line}`, marginBottom: 4 }}>◦ {g.label.toUpperCase()}</div>
                      {g.items.map(it => (
                        <a key={it.name} href={it.href} style={{ display: 'block', padding: '10px 20px', color: rStyles.fg, textDecoration: 'none', fontSize: 13, fontWeight: 400 }}>{it.name}</a>
                      ))}
                    </div>
                  </div>
                </div>
              ) : (
                <a key={g.label} href={g.href}
                   target={g.external ? '_blank' : undefined}
                   rel={g.external ? 'noopener noreferrer' : undefined}
                   style={{ color: fg, textDecoration: 'none', padding: '8px 0', display: 'inline-flex', alignItems: 'center', gap: 3 }}>
                  {g.label}
                  {g.external && <span style={{ fontSize: 9, opacity: 0.65, verticalAlign: 'top', marginTop: 1 }}>↗</span>}
                </a>
              )
            ))}
          </nav>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
            <a href="restaurants/search.html" aria-label="検索" className="vc-search-pill" style={{ color: fg, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 12px', borderRadius: 999, border: `1px solid ${line}` }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <span className="vc-search-label" style={{ fontFamily: rStyles.mono, fontSize: 11, letterSpacing: 1 }}>SEARCH</span>
            </a>
            <a href={`${basePath}restaurants/brands.html`} className="r-brand-cta" style={{ padding: '10px 18px', background: 'transparent', color: fg, fontSize: 12, fontWeight: 600, borderRadius: 999, border: `1px solid ${line}`, textDecoration: 'none', whiteSpace: 'nowrap' }}>ブランドを見る →</a>
            <a href="#" target="_blank" rel="noopener noreferrer" className="vc-cta-pill" style={{ padding: '10px 18px', background: rStyles.accent, color: '#fff', fontSize: 12, fontWeight: 600, borderRadius: 999, textDecoration: 'none' }}>お問い合わせ</a>
            <button className="vc-burger" onClick={() => setOpen(true)} aria-label="メニューを開く" style={{ display: 'none', background: 'none', border: 'none', padding: '6px 2px 6px 6px', cursor: 'pointer', color: fg, flexShrink: 0 }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
            </button>
          </div>
        </div>
      </header>
      <RHeaderMobileMenu open={open} onClose={() => setOpen(false)} navGroups={navGroups} basePath={basePath} />
    </React.Fragment>
  );
}

function RFooter() {
  const basePath = inferBasePath();
  return (
    <footer className="kw-footer" style={{ padding: '80px 40px 32px', background: rStyles.cream, borderTop: `1px solid ${rStyles.line}` }}>
      <div style={{ maxWidth: 1500, margin: '0 auto' }}>
        <div className="kw-footer-big" style={{ fontFamily: rStyles.displayEn, fontSize: 'clamp(72px, 14vw, 200px)', lineHeight: 0.85, fontWeight: 500, letterSpacing: -6, marginBottom: 20 }}>
          Restaurants<span style={{ color: rStyles.accent }}>.</span>
        </div>
        <div style={{ fontFamily: rStyles.mono, fontSize: 11, letterSpacing: 2, color: rStyles.mute, marginBottom: 48 }}>
          ◦ 100+ BRANDS / 280+ STORES — 際 KIWA RESTAURANTS
        </div>
        <div className="kw-footer-cols" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 40, paddingTop: 32, borderTop: `1px solid ${rStyles.line}`, fontSize: 13 }}>
          {[
            ['ジャンル', GENRES.map(g => [g.jp, `#genre-${g.key}`])],
            ['シーンで探す', SCENES.map(s => [s.jp, `#scene-${s.key}`])],
            ['エリア', AREAS.slice(0,8).map(a => [a.jp, `#area-${a.key}`])],
            ['その他', [['お知らせ',`${basePath}news.html`],['テイクアウト','#takeout'],['ギフト・優待','#gift'],['よくある質問','#faq'],['お問い合わせ',`${basePath}contact.html`]]],
          ].map(([t, items]) => (
            <div key={t}>
              <div style={{ fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2, color: rStyles.mute, marginBottom: 12 }}>◦ {String(t).toUpperCase()}</div>
              <div style={{ lineHeight: 2 }}>{items.map(([n, h]) => <div key={n}><a href={h} style={{ color: rStyles.fg, textDecoration: 'none' }}>{n}</a></div>)}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 40, paddingTop: 24, borderTop: `1px solid ${rStyles.line}`, fontSize: 13, lineHeight: 1.9 }}>
          <div style={{ fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2, color: rStyles.mute, marginBottom: 8 }}>◦ OPERATING COMPANY</div>
          <div>際コーポレーション株式会社　東京都目黒区大橋2-22-8 いちご池尻ビル</div>
          <a href={CORPORATE_SITE_URL} target="_blank" rel="noopener noreferrer"
             style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 10, fontSize: 12, fontFamily: rStyles.mono, letterSpacing: 1.5, color: rStyles.mute, textDecoration: 'none', borderBottom: `1px solid ${rStyles.line}`, paddingBottom: 1 }}>
            コーポレートサイト <span style={{ fontSize: 10 }}>↗</span>
          </a>
        </div>
        <div className="kw-footer-bottom" style={{ marginTop: 24, paddingTop: 20, borderTop: `1px solid ${rStyles.line}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2, color: rStyles.mute, flexWrap: 'wrap', gap: 16 }}>
          <span>© 2026 KIWA RESTAURANTS</span>
          <span><a href={`${basePath}privacy.html`} style={{ color: rStyles.mute, textDecoration: 'none' }}>PRIVACY</a> / <a href={`${basePath}terms.html`} style={{ color: rStyles.mute, textDecoration: 'none' }}>TERMS</a> / <a href={`${basePath}contact.html`} style={{ color: rStyles.mute, textDecoration: 'none' }}>CONTACT</a></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { rStyles, RHeader, RFooter, REST_NAV_GROUPS, inferBasePath, buildNavGroups });

// ── Breadcrumb ───────────────────────────────────────────
function RBreadcrumb({ items }) {
  // items: [{ label, href }, ...]; last is current.
  return (
    <nav className="r-breadcrumb" style={{ padding: '120px 40px 32px', maxWidth: 1500, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: rStyles.mono, fontSize: 10, letterSpacing: 2, color: rStyles.mute, flexWrap: 'wrap' }}>
        {items.map((it, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span style={{ opacity: 0.4 }}>/</span>}
            {it.href && i < items.length - 1 ? (
              <a href={it.href} style={{ color: rStyles.mute, textDecoration: 'none' }}>{it.label}</a>
            ) : (
              <span style={{ color: rStyles.fg }}>{it.label}</span>
            )}
          </React.Fragment>
        ))}
      </div>
    </nav>
  );
}

// ── PageHero — シンプル下層ページヘッダー ────────────────
function RPageHero({ num, en, jp, sub, accent, image }) {
  const ac = accent || rStyles.accent;
  return (
    <section className="r-pagehero-section" style={{ padding: '40px 40px 80px', borderBottom: `1px solid ${rStyles.line}` }}>
      <div style={{ maxWidth: 1500, margin: '0 auto', display: 'grid', gridTemplateColumns: image ? '1fr 1fr' : '1fr', gap: 60, alignItems: 'end' }} className="r-pagehero">
        <div>
          <div style={{ fontFamily: rStyles.mono, fontSize: 11, letterSpacing: 3, color: ac, marginBottom: 24 }}>◦ {num} / {en.toUpperCase()}</div>
          <h1 style={{ fontFamily: rStyles.display, fontSize: 'clamp(40px, 6.5vw, 110px)', fontWeight: 500, letterSpacing: -3, lineHeight: 1.02, margin: 0 }}>
            {jp}
          </h1>
          <div style={{ fontFamily: rStyles.displayEn, fontStyle: 'italic', fontSize: 'clamp(20px, 2.4vw, 32px)', color: rStyles.mute, marginTop: 12 }}>{en}</div>
          {sub && <p style={{ marginTop: 28, fontSize: 16, lineHeight: 1.95, color: 'rgba(26,26,26,0.78)', maxWidth: 540 }}>{sub}</p>}
        </div>
        {image && (
          <div style={{ height: 360, overflow: 'hidden', borderRadius: 2 }}>
            <img src={image} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
        )}
      </div>
    </section>
  );
}

// ── 簡易ページ用 SectionHead ────────────────────────────
function RSectionHead({ num, en, jp, sub, inline, accent }) {
  const ac = accent || rStyles.accent;
  return (
    <div style={{ display: inline ? 'block' : 'block' }}>
      <div style={{ fontFamily: rStyles.mono, fontSize: 11, letterSpacing: 3, color: ac, marginBottom: 14 }}>◦ {num} / {en.toUpperCase()}</div>
      <h2 style={{ fontFamily: rStyles.display, fontSize: 'clamp(28px, 4vw, 56px)', fontWeight: 500, letterSpacing: -1.5, lineHeight: 1.08, margin: 0 }}>{jp}</h2>
      {sub && <p style={{ marginTop: 16, fontSize: 14.5, lineHeight: 1.85, color: rStyles.mute, maxWidth: 580 }}>{sub}</p>}
    </div>
  );
}

Object.assign(window, { RBreadcrumb, RPageHero, RSectionHead });