/* Silya — site footer. The close of every page, in the register of the
   great houses: first the Threshold — a full-bleed passage of matter in
   half-light, mute, crossed by a single poetic line — then a quiet page
   of hairline columns, and the monumental wordmark as the last image
   the visitor sees. */
function Footer({ onNav }) {
  const cols = [
    { h: t('foot.c_collections'), items: [[t('foot.signature'), 'signature'], [t('foot.bespoke'), 'bespoke'], [t('foot.materials'), 'materials'], ['Tufted', 'tufted']] },
    { h: t('foot.c_maison'), items: [[t('foot.philosophy'), 'philosophy'], [t('foot.craftsmanship'), 'craftsmanship'], [t('foot.process'), 'process'], [t('foot.journal'), 'journal']] },
    { h: t('foot.c_clients'), items: [[t('foot.designers'), 'bespoke'], [t('foot.private'), 'bespoke'], [t('foot.contact'), 'contact']] },
  ];
  return (
    <React.Fragment>
      {/* The Threshold — matter in half-light, one line, no caption */}
      <section data-norv style={{ position: 'relative', height: 'clamp(320px, 56vh, 600px)', background: C('deep-black'), overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(media/hero.jpg)', backgroundSize: 'cover', backgroundPosition: 'center 72%' }}></div>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(13,11,8,0.62), rgba(13,11,8,0.18) 42%, rgba(13,11,8,0.55) 76%, rgba(13,11,8,0.97))' }}></div>
        <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 30, textAlign: 'center', padding: '0 clamp(1.5rem,6vw,4rem)' }}>
          <span style={{ width: 5, height: 5, background: C('accent'), rotate: '45deg', display: 'block' }}></span>
          <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontStyle: 'italic', fontSize: 'clamp(1.6rem,3vw,2.6rem)', lineHeight: 1.4, letterSpacing: '-0.01em', color: C('ivory'), maxWidth: 680, margin: 0, textShadow: '0 2px 30px rgba(0,0,0,0.45)' }}>
            {t('foot.veil')}
          </p>
        </div>
      </section>

    <footer style={{ background: C('deep-black'), color: C('ink-inverse'), padding: 'clamp(6.5rem,13vh,10.5rem) clamp(1.5rem,5vw,4rem) 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', position: 'relative' }}>

        {/* The last word — one quiet line */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <span style={{ width: 5, height: 5, background: C('accent'), rotate: '45deg', display: 'block', flex: 'none' }}></span>
          <span style={{ fontFamily: C('font-sans'), fontSize: 10, letterSpacing: '0.34em', textTransform: 'uppercase', color: C('champagne') }}>Maison Silya</span>
          <span style={{ flex: 1, height: 1, background: C('line-inverse') }}></span>
        </div>
        <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontStyle: 'italic', fontSize: 'clamp(1.7rem,3vw,2.5rem)', lineHeight: 1.35, letterSpacing: '-0.01em', color: C('ivory'), maxWidth: 760, margin: '34px 0 0' }}>
          {t('foot.tagline')}
        </p>

        {/* Columns */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48, alignItems: 'start', marginTop: 'clamp(4rem,8vh,6.5rem)' }} className="ms-foot-grid">
          <div>
            <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.26em', textTransform: 'uppercase', color: C('ink-inverse-secondary') }}>{t('foot.correspondence')}</div>
            <a href="mailto:contact@silyaparis.com" style={{ display: 'inline-block', fontFamily: C('font-serif'), fontSize: 17, color: C('ivory'), textDecoration: 'none', borderBottom: `1px solid ${C('line-inverse')}`, paddingBottom: 6, marginTop: 18, opacity: 0.85, transition: 'opacity 400ms var(--ms-ease)' }}
              onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
              onMouseLeave={(e) => e.currentTarget.style.opacity = '0.85'}>contact@silyaparis.com</a>
            <div style={{ fontFamily: C('font-sans'), fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: C('ink-inverse-secondary'), marginTop: 26 }}>Paris</div>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.26em', textTransform: 'uppercase', color: C('ink-inverse-secondary'), marginBottom: 22 }}>{c.h}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
                {c.items.map(([it, route]) => (
                  <li key={it}><button onClick={() => onNav && onNav(route)}
                    onMouseEnter={(e) => e.currentTarget.style.color = C('ivory')}
                    onMouseLeave={(e) => e.currentTarget.style.color = C('ink-inverse-secondary')}
                    style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left',
                      fontFamily: C('font-serif'), fontSize: 17, color: C('ink-inverse-secondary'), transition: C('transition') }}>{it}</button></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Legal */}
        <div style={{ height: 1, background: C('line-inverse'), margin: 'clamp(3.5rem,7vh,5.5rem) 0 26px' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
          <span style={{ fontFamily: C('font-sans'), fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: C('ink-inverse-secondary') }}>{t('foot.rights')}</span>
          <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap' }}>
            {[[t('foot.legal'), 'legal'], [t('foot.privacy'), 'privacy'], [t('foot.cgv'), 'cgv']].map(([label, r]) => (
              <button key={r} onClick={() => onNav(r)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: C('font-sans'), fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: C('ink-inverse-secondary'), transition: 'color 400ms var(--ms-ease)' }}
                onMouseEnter={(e) => e.currentTarget.style.color = C('ivory')}
                onMouseLeave={(e) => e.currentTarget.style.color = C('ink-inverse-secondary')}>{label}</button>
            ))}
            <a href="https://www.instagram.com/maison_silya/" target="_blank" rel="noreferrer" style={{ fontFamily: C('font-sans'), fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: C('ink-inverse-secondary'), textDecoration: 'none', transition: 'color 400ms var(--ms-ease)' }}
              onMouseEnter={(e) => e.currentTarget.style.color = C('ivory')}
              onMouseLeave={(e) => e.currentTarget.style.color = C('ink-inverse-secondary')}>Instagram</a>
          </div>
        </div>
      </div>

      {/* The monument — the wordmark as the final image */}
      <div style={{ position: 'relative', maxWidth: 1440, margin: '0 auto', textAlign: 'center', padding: 'clamp(4rem,9vh,7rem) 0 clamp(2.5rem,5vh,4rem)' }}>
        <div style={{ position: 'absolute', inset: '-30% -10% 0', background: 'radial-gradient(55% 70% at 50% 100%, rgba(166,136,90,0.10), rgba(166,136,90,0) 70%)', pointerEvents: 'none' }}></div>
        <div style={{ position: 'relative', fontFamily: C('font-sans'), fontWeight: 300, fontSize: 'clamp(3rem,10.5vw,9.5rem)', letterSpacing: '0.36em', paddingLeft: '0.36em', textTransform: 'uppercase', lineHeight: 1, color: C('ivory') }}>Silya</div>
        <div style={{ position: 'relative', fontFamily: C('font-sans'), fontSize: 'clamp(0.6rem,1.1vw,0.85rem)', letterSpacing: '0.92em', paddingLeft: '0.92em', textTransform: 'uppercase', color: C('champagne'), marginTop: 'clamp(12px,2vh,22px)' }}>Paris</div>
      </div>
    </footer>
    </React.Fragment>
  );
}
Object.assign(window, { Footer });