const { Button, IconButton, Lockup, InfoRow, Rule } = window.WhiskyNoirTheValleyBarbershop_c4fed7;
const A = '../../assets/';

function Nav({ screen, go, lang, switchLang }) {
  const T = (zh, en) => lang === 'en' ? en : zh;
  return (
    <header className="vb-nav">
      <div className="vb-nav-inner">
        <a href="#" onClick={e => { e.preventDefault(); go('home'); }} style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)', textDecoration: 'none' }}>
          <Lockup mark="badge" assetBase="../../" size={44} />
          <img src={A + 'people/owner-avatar.jpg'} alt={T('Owen · 創辦人', 'Owen · Founder')} title={T('Owen · 創辦人', 'Owen · Founder')}
            style={{ width: 38, height: 38, borderRadius: 'var(--radius-full, 999px)', border: '1px solid var(--line-strong)', objectFit: 'cover' }} />
        </a>
        <nav className="vb-links">
          {window.VALLEY.nav.map(item => (
            <a key={item.id} href="#" onClick={e => { e.preventDefault(); go(item.id); }}
              style={{ display: 'grid', gap: 2, textDecoration: 'none', justifyItems: 'center' }}>
              <span style={{
                fontFamily: lang === 'en' ? 'var(--font-label)' : 'var(--font-han)', fontSize: 'var(--text-sm)', letterSpacing: '.14em',
                textTransform: lang === 'en' ? 'uppercase' : 'none',
                color: screen === item.id ? 'var(--accent)' : 'var(--bone-500)', transition: 'var(--transition-ui)'
              }}>{T(item.han, item.en)}</span>
              <span className="nav-en" style={{
                font: 'var(--type-eyebrow)', letterSpacing: 'var(--tracking-label)', textTransform: lang === 'en' ? 'none' : 'uppercase',
                color: screen === item.id ? 'var(--accent)' : 'var(--text-faint)'
              }}>{T(item.en, item.han)}</span>
            </a>
          ))}
        </nav>
        <div className="vb-cluster">
          <div role="group" aria-label="Language" style={{ display: 'flex', border: '1px solid var(--line-hairline)', borderRadius: 'var(--radius-xs)', overflow: 'hidden' }}>
            {[['zh', '中'], ['en', 'EN']].map(([code, label]) => (
              <button key={code} onClick={() => switchLang(code)} style={{
                font: 'var(--type-eyebrow)', letterSpacing: '.12em', cursor: 'pointer', padding: '8px 12px',
                border: 'none', background: lang === code ? 'var(--accent)' : 'transparent',
                color: lang === code ? 'var(--ink-900)' : 'var(--text-metal)', transition: 'var(--transition-ui)'
              }}>{label}</button>
            ))}
          </div>
          <span className="vb-ig"><IconButton label="Instagram" href={window.VALLEY.contact.ig}><i data-lucide="instagram" style={{ width: 18, height: 18 }}></i></IconButton></span>
          <Button variant="primary" href={window.VALLEY.contact.tel}>{T('立即預約', 'Book now')}</Button>
        </div>
      </div>
    </header>
  );
}

function Footer({ go, lang }) {
  const c = window.VALLEY.contact;
  const T = (zh, en) => lang === 'en' ? en : zh;
  return (
    <footer style={{ position: 'relative', borderTop: '1px solid var(--line-hairline)', background: 'var(--ink-800)', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'url(' + A + 'atmosphere/haze-02.png) center/cover', mixBlendMode: 'screen', opacity: .35, pointerEvents: 'none' }} />
      <div className="g3" style={{ position: 'relative', maxWidth: 'var(--content-max)', margin: '0 auto', padding: 'var(--space-9) var(--gutter-inline) var(--space-7)', gap: 'var(--space-8)' }}>
        <div style={{ display: 'grid', gap: 'var(--space-5)', justifyItems: 'start' }}>
          <Lockup mark="badge" assetBase="../../" size={72} layout="stack" showName={false} />
          <p style={{ font: 'var(--type-body-han)', color: 'var(--text-muted)', margin: 0, maxWidth: '22em' }}>{T('醉漢理髮店，是屬於每一個「努力生活的男人」的避風港。', 'The Valley Barbershop — a safe harbor for every man who works hard at life.')}</p>
          <div style={{ display: 'flex', gap: 'var(--space-3)' }}>
            <IconButton label="Phone" href={c.tel}><i data-lucide="phone" style={{ width: 18, height: 18 }}></i></IconButton>
            <IconButton label="Facebook" href={c.fb}><i data-lucide="facebook" style={{ width: 18, height: 18 }}></i></IconButton>
            <IconButton label="Instagram" href={c.ig}><i data-lucide="instagram" style={{ width: 18, height: 18 }}></i></IconButton>
            <IconButton label="Email" href={'mailto:' + c.email}><i data-lucide="mail" style={{ width: 18, height: 18 }}></i></IconButton>
            <IconButton label="Map" href={c.map}><i data-lucide="map-pin" style={{ width: 18, height: 18 }}></i></IconButton>
          </div>
        </div>
        <div>
          <InfoRow label="Hours">{T(c.hours, c.hoursEn)}</InfoRow>
          <InfoRow label="Phone" href={c.tel}>{c.phone}</InfoRow>
          <InfoRow label="Email" href={'mailto:' + c.email}>{c.email}</InfoRow>
          <InfoRow label="Address" href={c.map}>{T(c.address, c.addressEn)}</InfoRow>
          <p style={{ font: 'var(--type-small)', color: 'var(--text-faint)', marginTop: 'var(--space-4)' }}>{T(c.booking, c.bookingEn)}</p>
        </div>
        <nav style={{ display: 'grid', gap: 'var(--space-3)', alignContent: 'start' }}>
          {window.VALLEY.nav.map(i => (
            <a key={i.id} href="#" onClick={e => { e.preventDefault(); go(i.id); }} style={{ display: 'flex', gap: 10, alignItems: 'baseline', textDecoration: 'none' }}>
              <span style={{ font: 'var(--type-eyebrow)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-metal)', width: 92 }}>{T(i.en, i.han)}</span>
              <span style={{ fontFamily: 'var(--font-han)', fontSize: 'var(--text-sm)', letterSpacing: '.12em', color: 'var(--bone-500)' }}>{T(i.han, i.en)}</span>
            </a>
          ))}
        </nav>
      </div>
      <div style={{ position: 'relative', maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--gutter-inline) var(--space-7)' }}>
        <Rule />
        <p style={{ font: 'var(--type-small)', color: 'var(--text-faint)', marginTop: 'var(--space-4)', marginBottom: 0 }}>© 2026 The Valley Barbershop 醉漢理髮店 · Zhongshan, Taipei · LGBTQIA+ friendly · Created by <a href="https://cmsolutions.tech" target="_blank" rel="noopener" style={{ color: 'var(--text-faint)' }}>CM Solutions</a> · <a href="../../admin.html" style={{ color: 'var(--text-faint)' }}>{T('店主後台', 'Owner backend')}</a></p>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Footer, VALLEY_ASSETS: A });