// LP SiteChrome — 全ページ共通のヘッダー（タブナビ）・フッター・ページ枠。
// ルート(/)は Hero 内に独自ナビを持つため、サブページ(/guide 等)で本ヘッダーを使う。
// worker は未知のマーケティングURLを LP(index.html)へフォールバックするので、
// /guide /company /terms /privacy /tokushoho は同じ index.html がパスを見て出し分ける。
const { Button: YLButton } = window.EateryEngineDesignSystem_599215 || {};

const YL_APP_URL = '/app';   // ログイン・新規登録（認証アプリ）
const YL_DEMO_URL = '/try';  // 登録不要の公開デモ

// ヘッダーのタブ
const YL_TABS = [
  { label: 'ホーム', href: '/' },
  { label: '使い方', href: '/guide' },
  { label: '料金', href: '/pricing' },
  { label: '運営者情報', href: '/company' },
];

// フッターのリンク群
const YL_FOOTER_GROUPS = [
  {
    heading: 'プロダクト',
    links: [
      { label: '使い方・機能', href: '/guide' },
      { label: '料金', href: '/pricing' },
      { label: '無料デモ', href: YL_DEMO_URL },
      { label: 'ログイン', href: YL_APP_URL },
    ],
  },
  {
    heading: '運営',
    links: [
      { label: '運営者情報', href: '/company' },
      { label: 'お問い合わせ', href: '/company#contact' },
    ],
  },
  {
    heading: '規約・法令',
    links: [
      { label: '利用規約', href: '/terms' },
      { label: 'プライバシーポリシー', href: '/privacy' },
      { label: '特定商取引法に基づく表記', href: '/tokushoho' },
    ],
  },
];

// 現在のパス（末尾スラッシュを除去、空なら '/'）
function ylCurrentPath() {
  return (window.location.pathname.replace(/\/+$/, '') || '/');
}

// テキストリンク（現在地はアクティブ表示）
function YLTab({ label, href }) {
  const path = ylCurrentPath();
  const target = href.split('#')[0].replace(/\/+$/, '') || '/';
  const active = target === path;
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={href}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        flex: 'none',
        padding: '8px 2px',
        fontFamily: 'var(--font-body)',
        fontWeight: 700,
        fontSize: 14,
        letterSpacing: '0.04em',
        color: active ? 'var(--flame)' : 'var(--ink)',
        textDecoration: 'none',
        borderBottom: `2px solid ${active ? 'var(--flame)' : hover ? 'var(--ink)' : 'transparent'}`,
        whiteSpace: 'nowrap',
        transition: 'border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)',
      }}
    >
      {label}
    </a>
  );
}

// 共通ヘッダー（上段: ロゴ + CTA / 下段: タブ）。sticky。
function YLSiteHeader() {
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'var(--paper)', borderBottom: '2px solid var(--ink)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, maxWidth: 'var(--content-max)', margin: '0 auto', padding: '12px var(--content-pad)' }}>
        <a href="/" style={{ display: 'flex', alignItems: 'center', flex: 'none' }} aria-label="ホームへ">
          <img src="../../assets/logo-full-ink.png" alt="EATERY ENGINE" style={{ height: 32 }} />
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          {YLButton && <YLButton variant="secondary" size="sm" onClick={() => { window.location.href = YL_APP_URL; }}>ログイン</YLButton>}
          {YLButton && <YLButton variant="primary" size="sm" onClick={() => { window.location.href = YL_DEMO_URL; }}>デモ</YLButton>}
        </div>
      </div>
      <nav style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--content-pad)' }}>
        <div className="no-scrollbar" style={{ display: 'flex', gap: 22, overflowX: 'auto' }}>
          {YL_TABS.map((t) => <YLTab key={t.href} {...t} />)}
        </div>
      </nav>
    </header>
  );
}

// フッターのリンク列（onDark で配色切替）
function YLFooterLinks({ onDark = false }) {
  const head = onDark ? 'rgba(244,239,230,0.55)' : 'var(--ink-soft)';
  const link = onDark ? 'rgba(244,239,230,0.92)' : 'var(--ink)';
  return (
    <div className="lp-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 28 }}>
      {YL_FOOTER_GROUPS.map((g) => (
        <div key={g.heading} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <p style={{ margin: 0, fontFamily: 'var(--font-display-en)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: head }}>{g.heading}</p>
          {g.links.map((l) => (
            <a key={l.href} href={l.href} style={{ fontSize: 14, fontWeight: 700, color: link, textDecoration: 'none', lineHeight: 1.4 }}>{l.label}</a>
          ))}
        </div>
      ))}
    </div>
  );
}

// サブページ用フッター（生成り地）
function YLSiteFooter() {
  return (
    <footer className="ee-grain" style={{ background: 'var(--paper-warm)', borderTop: '2px solid var(--ink)' }}>
      <div style={{ position: 'relative', zIndex: 2, maxWidth: 'var(--content-max)', margin: '0 auto', padding: 'var(--space-10) var(--content-pad)' }}>
        <YLFooterLinks onDark={false} />
        <div className="lp-footer-row" style={{ marginTop: 44, paddingTop: 24, borderTop: '1px solid rgba(28,26,23,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14 }}>
          <a href="/"><img src="../../assets/logo-full-ink.png" alt="EATERY ENGINE" style={{ height: 28 }} /></a>
          <p style={{ margin: 0, fontSize: 12, color: 'var(--ink-soft)', letterSpacing: '0.06em' }}>© EateryEngine — eatery branch</p>
        </div>
      </div>
    </footer>
  );
}

// サブページの外枠（タイトルを document.title に反映し、ヘッダー＋本文＋フッターで包む）
function YLPageShell({ title, children }) {
  React.useEffect(() => {
    if (title) document.title = `${title} | eatery branch`;
  }, [title]);
  return (
    <div style={{ background: 'var(--paper)', minHeight: '100vh' }}>
      <YLSiteHeader />
      <main>{children}</main>
      <YLSiteFooter />
    </div>
  );
}

// 公開前の確認・記入を促す注意バナー（法務・会社情報のドラフト用）
function YLNote({ children }) {
  return (
    <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', background: 'var(--paper-warm)', border: '2px solid var(--ink)', borderRadius: 'var(--radius-lg)', padding: '14px 18px', fontSize: 13.5, lineHeight: 1.7, color: 'var(--ink-soft)' }}>
      <window.YLIcon name="editNote" size={18} color="var(--ink)" style={{ marginTop: 1 }} />
      <span>{children}</span>
    </div>
  );
}

window.YLSiteHeader = YLSiteHeader;
window.YLFooterLinks = YLFooterLinks;
window.YLSiteFooter = YLSiteFooter;
window.YLPageShell = YLPageShell;
window.YLNote = YLNote;