/* FUMO — shared website chrome (wordmark, header, hero, footer) */

function Icon({ name, size = 18, color = 'currentColor', strokeWidth = 1.6, style = {} }) {
  // Lucide icon, rendered via data-lucide and hydrated by lucide.createIcons()
  return <i data-lucide={name} style={{ width: size, height: size, color, display: 'inline-flex', ...style }} data-stroke={strokeWidth}></i>;
}

function useIsNarrow(bp = 680) {
  const get = () => (typeof window !== 'undefined' ? window.innerWidth <= bp : false);
  const [narrow, setNarrow] = React.useState(get);
  React.useEffect(() => {
    const onR = () => setNarrow(get());
    window.addEventListener('resize', onR);
    onR();
    return () => window.removeEventListener('resize', onR);
  }, [bp]);
  return narrow;
}

function Wordmark({ tone = 'light', size = 1 }) {
  const ink = tone === 'light' ? 'var(--ink-900)' : '#fff';
  const gold = tone === 'light' ? 'var(--gold-600)' : 'var(--gold-500)';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 * size, lineHeight: 1 }}>
      <span style={{ font: 'var(--weight-semibold) ' + (28 * size) + 'px/0.9 var(--font-display)', letterSpacing: '0.22em', textIndent: '0.22em', color: ink }}>FUMO</span>
      <span style={{ height: 1, width: 24 * size, background: gold, opacity: 0.85 }} />
      <span style={{ font: 'var(--weight-semibold) ' + (8.5 * size) + 'px/1 var(--font-body)', letterSpacing: '0.30em', textIndent: '0.30em', color: gold }}>BAR BISTRO</span>
    </div>
  );
}

function LangToggle({ lang, setLang }) {
  const langs = ['EN', 'SQ', 'IT'];
  return (
    <div style={{ display: 'inline-flex', border: '1px solid rgba(249,248,246,0.55)', borderRadius: 'var(--radius-pill)', padding: 2, gap: 2 }}>
      {langs.map((l) => {
        const active = l === lang;
        return (
          <button key={l} type="button" onClick={() => setLang(l)} style={{
            appearance: 'none', cursor: 'pointer', border: 0, borderRadius: 'var(--radius-pill)',
            padding: '5px 11px', font: 'var(--weight-semibold) 11px/1 var(--font-body)', letterSpacing: '0.08em',
            background: active ? 'rgba(249,248,246,0.95)' : 'transparent', color: active ? 'var(--ink-900)' : '#f9f8f6',
            transition: 'background var(--dur-fast), color var(--dur-fast)',
          }}>{l}</button>
        );
      })}
    </div>
  );
}

function SiteHeader({ lang, setLang, t, onReserve }) {
  const [scrolled, setScrolled] = React.useState(false);
  const narrow = useIsNarrow(680);
  React.useEffect(() => {
    const el = document.querySelector('[data-scroll-root]') || window;
    const onScroll = () => setScrolled((el.scrollTop || window.scrollY || 0) > 40);
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => el.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 30,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: narrow ? '13px 16px' : '18px 28px',
      marginBottom: narrow ? -61 : -66, // hero photo slides under the bar
      // image-tone fill (sampled from the hero photo ≈ #af7b68): soft fade on top of the photo, solid once scrolled
      background: scrolled ? 'rgba(156,106,90,0.97)' : 'linear-gradient(180deg, rgba(120,78,64,0.62) 0%, rgba(120,78,64,0) 100%)',
      backdropFilter: scrolled ? 'saturate(140%) blur(10px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(249,248,246,0.18)' : '1px solid transparent',
      transition: 'padding var(--dur-base) var(--ease-soft), background var(--dur-base), border-color var(--dur-base)',
    }}>
      {narrow ? (
        <button type="button" onClick={onReserve} style={{
          appearance: 'none', cursor: 'pointer', border: '1px solid rgba(249,248,246,0.8)', background: 'transparent',
          color: '#f9f8f6', borderRadius: 'var(--radius-pill)', padding: '7px 13px', flex: '0 0 auto',
          font: 'var(--weight-semibold) 11px/1 var(--font-body)', letterSpacing: '0.1em', textTransform: 'uppercase',
        }}>{t.reserve}</button>
      ) : (
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: '#f9f8f6' }}>
          <Icon name="utensils" size={15} />
          <span style={{ font: 'var(--weight-semibold) 11px/1 var(--font-body)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>Bar Bistro</span>
        </div>
      )}
      <div style={narrow
        ? { flex: '1 1 auto', display: 'flex', justifyContent: 'center', minWidth: 0 }
        : { position: 'absolute', left: '50%', transform: 'translateX(-50%)' }}>
        <Wordmark tone="dark" size={narrow ? 0.78 : 1} />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <LangToggle lang={lang} setLang={setLang} />
        {narrow ? null : (
          <button type="button" onClick={onReserve} style={{
            appearance: 'none', cursor: 'pointer', border: '1px solid rgba(249,248,246,0.8)', background: 'transparent',
            color: '#f9f8f6', borderRadius: 'var(--radius-pill)', padding: '8px 16px',
            font: 'var(--weight-semibold) 11px/1 var(--font-body)', letterSpacing: '0.1em', textTransform: 'uppercase',
          }}>{t.reserve}</button>
        )}
      </div>
    </header>
  );
}

function Hero({ t, lang, onReserve }) {
  const narrow = useIsNarrow(680);
  // Photo only (sign stays clear): title sits on the sky at the top. Opening info + countdown live in the cream band below.
  return (
    <React.Fragment>
      <section style={{ position: 'relative', overflow: 'hidden', color: '#fff', textAlign: 'center', height: narrow ? 461 : 'calc(clamp(420px, 58vh, 580px) + 66px)', background: '#6f5140' }}>
        <div aria-hidden="true" style={{ position: 'absolute', inset: 0, backgroundImage: 'url(../../assets/brand/fumo-hero-wide.jpg)', backgroundSize: 'cover', backgroundPosition: narrow ? '49% 50%' : 'center 55%' }} />
        <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background:
          'linear-gradient(180deg, rgba(50,32,22,0.45) 0%, rgba(50,32,22,0.22) 30%, rgba(50,32,22,0) 48%)' }} />
        <h1 style={{ position: 'relative', margin: 0, padding: narrow ? '95px 20px 0' : '110px 24px 0', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(32px, 6.5vw, 60px)', lineHeight: 1.05, letterSpacing: '0.01em', textShadow: '0 2px 16px rgba(40,26,18,0.7)', textWrap: 'balance' }}>{t.heroTitle}</h1>
      </section>
      <Countdown lang={lang} onReserve={onReserve} />
    </React.Fragment>
  );
}

// TODO(FUMO): fill in real details — empty lines are hidden from the footer.
const FUMO_INFO = {
  address: [{ text: 'Rruga Ramazan Topoja', href: 'https://www.google.com/maps/place/FUMO/@41.2969916,19.831635,17z/data=!4m6!3m5!1s0x135031d7af98b4c5:0x3e1050df934298de!8m2!3d41.2957019!4d19.8328259' }, 'Tiranë 1001, Albania'],
  hours: ['Every day · 09:00 – 01:00', 'Kitchen until 23:00'],
  contact: [{ text: '+355 69 532 3123', href: 'tel:+355695323123' }, { text: '@fumo_tirane', href: 'https://instagram.com/fumo_tirane' }],

};

function SiteFooter({ t }) {
  const cols = [
    { h: t.footFind, lines: FUMO_INFO.address, icon: 'map-pin' },
    { h: t.footHours, lines: FUMO_INFO.hours, icon: 'clock' },
    { h: t.footReach, lines: FUMO_INFO.contact, icon: 'phone' },
  ].filter((c) => c.lines.length);
  return (
    <footer style={{ background: 'var(--surface-deep-2)', color: 'var(--slate-600)', padding: '64px 28px 40px' }}>
      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', display: 'grid', gap: 40, gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', alignItems: 'start' }}>
        <div><Wordmark tone="light" size={1.1} /></div>
        {cols.map((c) => (
          <div key={c.h}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--gold-600)', font: 'var(--weight-semibold) 11px/1 var(--font-body)', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 14 }}>
              <Icon name={c.icon} size={14} /> {c.h}
            </div>
            {c.lines.map((l, i) => <div key={i} style={{ font: 'var(--weight-regular) 14px/1.7 var(--font-body)' }}>{l.href ? <a href={l.href} target={l.href.startsWith('http') ? '_blank' : undefined} rel="noopener" style={{ color: 'inherit', textDecoration: 'underline', textUnderlineOffset: 3 }}>{l.text}</a> : l}</div>)}
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 'var(--container-wide)', margin: '40px auto 0', paddingTop: 24, borderTop: '1px solid var(--line-300)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, font: '12px/1.6 var(--font-body)', color: 'var(--slate-400)' }}>
        <span>© {new Date().getFullYear()} Fumo Bar Bistro</span>
        <span>{t.footNote}</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Icon, Wordmark, LangToggle, SiteHeader, Hero, SiteFooter });