// Shared chrome: Header, Footer, section helpers, page hero
const fontJP = '"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif';
const fontEN = '"Inter", system-ui, sans-serif';
const fontMono = 'ui-monospace, "SF Mono", Menlo, monospace';
const fontDisp = '"Fraunces", "Noto Serif JP", Georgia, serif';

// Today/now status helpers — derived from clinic hours
const dayIdx = () => (new Date().getDay() + 6) % 7; // Mon=0..Sun=6
const isOpenNow = () => {
  const now = new Date();
  const d = dayIdx();
  const m = now.getHours() * 60 + now.getMinutes();
  // AM 9:00–12:30 (Mon-Fri all, Sat 1st&3rd only — show generic ●)
  // PM 13:30–17:00 Mon, Thu, Fri; Tue till 19:00; Wed/Sat/Sun closed PM
  const am = (d <= 5) && m >= 540 && m <= 750;
  let pmEnd = 0;
  if (d === 0 || d === 3 || d === 4) pmEnd = 1020;       // Mon Thu Fri 17:00
  else if (d === 1) pmEnd = 1140;                          // Tue 19:00
  const pm = pmEnd && m >= 810 && m <= pmEnd;
  return am || pm;
};

const Header = ({ lang, t, page, go, setLang }) => {
  const T = TOKENS;
  const items = [
    { id: 'home',   l: lang === 'jp' ? 'ホーム' : 'Home' },
    { id: 'depts',  l: t.nav.depts },
    { id: 'doctors',l: lang === 'jp' ? '医師紹介' : 'Doctors' },
    { id: 'facil',  l: lang === 'jp' ? '院内紹介' : 'Facilities' },
    { id: 'news',   l: t.nav.news },
    { id: 'access', l: t.nav.access },
  ];
  const open = isOpenNow();
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: T.paper, borderBottom: `1px solid ${T.hairline}` }}>
      <div style={{ background: T.primaryDeep, color: '#dbe7f5', fontSize: 12.5 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 40px', maxWidth: 1480, margin: '0 auto', gap: 16, flexWrap: 'nowrap' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, minWidth: 0, flex: '1 1 auto' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
              <span style={{ width: 7, height: 7, borderRadius: 4, background: open ? '#5fd296' : '#e08a8a', boxShadow: open ? '0 0 0 3px rgba(95,210,150,0.18)' : 'none' }}></span>
              <span style={{ fontWeight: 600 }}>{open ? (lang === 'jp' ? '本日 診療中' : 'Open now') : (lang === 'jp' ? '休診中' : 'Closed')}</span>
            </span>
            <span style={{ opacity: 0.4, flexShrink: 0 }}>·</span>
            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.phoneNote}</span>
          </div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14, flexShrink: 0 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap' }}>{Icon.pin(12, '#dbe7f5')} {t.address.split(' ')[1] || t.address}</span>
            <span style={{ opacity: 0.4 }}>|</span>
            <button onClick={() => setLang(lang === 'jp' ? 'en' : 'jp')} style={{ background: 'transparent', border: 'none', color: '#dbe7f5', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12.5 }}>
              {Icon.globe(12, '#dbe7f5')}
              <span style={{ fontWeight: lang === 'jp' ? 700 : 400, opacity: lang === 'jp' ? 1 : 0.6 }}>JP</span>
              <span style={{ opacity: 0.35 }}>/</span>
              <span style={{ fontWeight: lang === 'en' ? 700 : 400, opacity: lang === 'en' ? 1 : 0.6 }}>EN</span>
            </button>
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 40px', maxWidth: 1480, margin: '0 auto' }}>
        <button onClick={() => go('home')} style={{ display: 'flex', alignItems: 'center', gap: 14, background: 'transparent', border: 'none', cursor: 'pointer', padding: 0 }}>
          <div style={{ display: 'grid', placeItems: 'center', padding: '4px 6px' }}>
            {Icon.cross(28, T.primary)}
          </div>
          <div style={{ textAlign: 'left' }}>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: 1, color: T.ink }}>{t.clinicName}</div>
            <div style={{ fontSize: 11.5, color: T.muted, marginTop: 2, letterSpacing: 0.5 }}>{t.clinicNameSub}</div>
          </div>
        </button>
        <nav style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
          {items.map((it) => (
            <button key={it.id} onClick={() => go(it.id)} style={{
              background: 'transparent', border: 'none', cursor: 'pointer',
              padding: '8px 14px', fontSize: 14, color: page === it.id ? T.primary : T.body,
              fontWeight: page === it.id ? 700 : 500,
              borderBottom: page === it.id ? `2px solid ${T.primary}` : '2px solid transparent',
              fontFamily: 'inherit',
            }}>{it.l}</button>
          ))}
          <a href={`tel:${t.phone.replace(/-/g,'')}`} style={{
            marginLeft: 14, padding: '11px 18px', background: T.primary, color: '#fff',
            fontWeight: 700, fontSize: 13, borderRadius: 4, display: 'inline-flex', alignItems: 'center', gap: 8,
            textDecoration: 'none',
          }}>{Icon.phone(12, '#fff')} {t.phone}</a>
        </nav>
      </div>
    </header>
  );
};

const Footer = ({ lang, t, go }) => {
  const T = TOKENS;
  return (
    <footer style={{ background: T.primaryDeep, color: '#cfdcec' }}>
      <div style={{ maxWidth: 1480, margin: '0 auto', padding: '48px 40px 32px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 38, height: 38, borderRadius: 4, background: '#fff', color: T.primary, display: 'grid', placeItems: 'center' }}>{Icon.cross(16, T.primary)}</div>
          <div>
            <div style={{ fontSize: 19, fontWeight: 700, color: '#fff', letterSpacing: 1 }}>{t.clinicName}</div>
            <div style={{ fontSize: 11.5, marginTop: 2, opacity: 0.7 }}>{t.clinicNameSub}</div>
          </div>
        </div>
        <div style={{ fontSize: 13, marginTop: 20, lineHeight: 1.95, color: '#cfdcec' }}>
          {t.address}<br />Tel. <span style={{ fontFamily: fontMono }}>{t.phone}</span><br />
          {t.fax}
        </div>

        <div style={{ marginTop: 40, paddingTop: 22, borderTop: '1px solid rgba(255,255,255,0.12)', fontSize: 12, color: '#8aa1bf', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <div>{t.footer.copy} · {new Date().getFullYear()}</div>
          <button onClick={() => go('privacy')} style={{
            background: 'transparent', border: 'none', color: '#cfdcec', cursor: 'pointer',
            padding: 0, fontSize: 12, fontFamily: 'inherit', textDecoration: 'underline', textUnderlineOffset: 3,
          }}>
            {lang === 'jp' ? 'プライバシーポリシー' : 'Privacy Policy'}
          </button>
        </div>
      </div>
    </footer>
  );
};

const SectionHead = ({ lang, kicker, title, action, onAction, align = 'between' }) => {
  const T = TOKENS;
  return (
    <div style={{ display: 'flex', justifyContent: align === 'center' ? 'center' : 'space-between', alignItems: 'flex-end', textAlign: align === 'center' ? 'center' : 'left' }}>
      <div>
        {kicker && (
          <div style={{ fontSize: 11.5, color: T.primary, fontWeight: 700, letterSpacing: 2, marginBottom: 14, fontFamily: fontMono, textTransform: 'uppercase' }}>{kicker}</div>
        )}
        <h2 style={{ fontSize: 36, fontWeight: 700, color: T.ink, margin: 0, letterSpacing: lang === 'jp' ? 1 : -0.5, lineHeight: 1.25 }}>{title}</h2>
      </div>
      {action && (
        <button onClick={onAction} style={{ background: 'transparent', border: 'none', cursor: 'pointer', fontSize: 13, color: T.primary, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 8, padding: 0, fontFamily: 'inherit' }}>
          {action} {Icon.arrow(13, T.primary)}
        </button>
      )}
    </div>
  );
};

const PageHero = ({ lang, t, kicker, title, subtitle, crumbs = [], go }) => {
  const T = TOKENS;
  return (
    <section style={{ background: T.bgWarm, borderBottom: `1px solid ${T.hairline}` }}>
      <div style={{ maxWidth: 1480, margin: '0 auto', padding: '40px 40px 56px' }}>
        <div style={{ fontSize: 12, color: T.muted, display: 'flex', gap: 8, alignItems: 'center', marginBottom: 28 }}>
          <button onClick={() => go('home')} style={{ background: 'transparent', border: 'none', color: T.muted, cursor: 'pointer', padding: 0, fontFamily: 'inherit', fontSize: 12 }}>
            {lang === 'jp' ? 'ホーム' : 'Home'}
          </button>
          {crumbs.map((c, i) => (
            <React.Fragment key={i}>
              <span style={{ opacity: 0.4 }}>/</span>
              <span style={{ color: i === crumbs.length - 1 ? T.ink : T.muted, fontWeight: i === crumbs.length - 1 ? 600 : 400 }}>{c}</span>
            </React.Fragment>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'flex-end' }}>
          <div>
            {kicker && (
              <div style={{ fontSize: 11.5, color: T.primary, fontWeight: 700, letterSpacing: 2, marginBottom: 14, fontFamily: fontMono }}>{kicker}</div>
            )}
            <h1 style={{ fontSize: 48, fontWeight: 700, margin: 0, color: T.ink, letterSpacing: lang === 'jp' ? 2 : -0.5, lineHeight: 1.25 }}>{title}</h1>
          </div>
          {subtitle && (
            <p style={{ fontSize: 15, lineHeight: 1.95, color: T.body, margin: 0, paddingBottom: 6 }}>{subtitle}</p>
          )}
        </div>
      </div>
    </section>
  );
};

const NoticeBar = ({ lang, t }) => (
  <div style={{
    background: '#fff7e8', borderTop: `1px solid #f0d9aa`, borderBottom: `1px solid #f0d9aa`,
    padding: '14px 40px',
  }}>
    <div style={{ display: 'flex', alignItems: 'flex-start', flexWrap: 'wrap', gap: '6px 14px', maxWidth: 1480, margin: '0 auto', fontSize: 13.5, color: '#855616' }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 700, flexShrink: 0 }}>
        <span style={{ width: 22, height: 22, borderRadius: 11, background: '#d39233', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 700, flexShrink: 0 }}>!</span>
        {lang === 'jp' ? '重要なお知らせ' : 'Important'}
      </span>
      <span style={{ color: '#7a5418', lineHeight: 1.7 }}>{t.notice}</span>
    </div>
  </div>
);

const InfoRow = ({ icon, label, value }) => {
  const T = TOKENS;
  return (
    <div style={{ display: 'flex', gap: 16, padding: '16px 0', borderBottom: `1px solid ${T.hairline}` }}>
      <div style={{ width: 36, height: 36, borderRadius: 18, background: T.accentSoft, display: 'grid', placeItems: 'center', flexShrink: 0 }}>{icon}</div>
      <div>
        <div style={{ fontSize: 11, color: T.muted, letterSpacing: 1.2, fontWeight: 700, textTransform: 'uppercase' }}>{label}</div>
        <div style={{ fontSize: 14.5, color: T.ink, marginTop: 4, lineHeight: 1.7 }}>{value}</div>
      </div>
    </div>
  );
};

Object.assign(window, { Header, Footer, SectionHead, PageHero, NoticeBar, InfoRow, fontJP, fontEN, fontMono, fontDisp, isOpenNow });