// Footer — logo, closing line, contact, hours summary, socials
const footDS = window.ThaiVillageCuisineDesignSystem_bfe0b3;

function Footer() {
  const { Logo } = footDS;
  const { NAP } = window;
  const { PhoneIcon, MapPinIcon, FacebookIcon, InstagramIcon } = window;
  const social = [['Facebook', FacebookIcon, 'https://www.facebook.com/thaivillagetulsa'], ['Instagram', InstagramIcon, 'https://www.instagram.com/thethaivillage']];
  return (
    <footer style={{ background: 'var(--char-900)', color: 'var(--cream-100)', paddingTop: 'clamp(3rem, 2rem + 4vw, 5rem)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div style={{ display: 'grid', gap: 'clamp(28px, 4vw, 56px)', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', paddingBottom: 'clamp(2.5rem, 4vw, 4rem)' }}>
          <div>
            <Logo wordmarkColor="var(--cream-50)" size={46} markSrc="images/logo-mark.png" />
            <p style={{ fontFamily: 'var(--font-display)', fontSize: '1.7rem', color: 'var(--cream-50)', margin: '22px 0 0', lineHeight: 1.1 }}>
              Got Spice? <span style={{ color: 'var(--gold-500)' }}>We Do.</span>
            </p>
            <p style={{ color: 'rgba(251,243,228,0.6)', fontSize: '0.9rem', marginTop: 10, maxWidth: 280 }}>
              Spice up your life — one bite at a time. Established 2009, Tulsa, Oklahoma.
            </p>
          </div>

          <div>
            <h4 style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: '0.8rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--gold-300)', margin: '0 0 16px' }}>Find Us</h4>
            <a href={NAP.tel} style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--cream-100)', fontSize: '1rem', marginBottom: 12 }}>
              <span style={{ color: 'var(--gold-500)', display: 'inline-flex' }}><PhoneIcon /></span> {NAP.phone}
            </a>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, color: 'rgba(251,243,228,0.78)', fontSize: '0.95rem' }}>
              <span style={{ color: 'var(--gold-500)', display: 'inline-flex', marginTop: 2 }}><MapPinIcon /></span>
              <span>{NAP.address}</span>
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
              {social.map(([label, Icon, href]) => (
                <a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label} style={{
                  width: 42, height: 42, borderRadius: 'var(--radius-pill)',
                  border: '1px solid rgba(251,243,228,0.25)', color: 'var(--cream-100)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18,
                }}><Icon /></a>
              ))}
            </div>
          </div>

          <div>
            <h4 style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: '0.8rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--gold-300)', margin: '0 0 16px' }}>Hours</h4>
            {window.HOURS.map(([d, h]) => (
              <div key={d} style={{ display: 'flex', justifyContent: 'space-between', gap: 16, padding: '6px 0', borderBottom: '1px solid rgba(251,243,228,0.1)', fontSize: '0.9rem' }}>
                <span style={{ color: 'rgba(251,243,228,0.7)' }}>{d}</span>
                <span style={{ color: 'var(--cream-50)', fontVariantNumeric: 'tabular-nums' }}>{h}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(251,243,228,0.12)', padding: '20px 0 28px', display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'space-between', color: 'rgba(251,243,228,0.5)', fontSize: '0.82rem' }}>
          <span>© {new Date().getFullYear()} Thai Village Cuisine · Tulsa, OK</span>
          <span>Fresh · Flavorful · Authentic</span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;