/* SiteFooter — links, socials, policies, newsletter. */
function SiteFooter({ go }) {
  const col = { display: 'flex', flexDirection: 'column', gap: 12 };
  const h = { fontSize: 11, fontWeight: 500, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--sf-gold-hi)', marginBottom: 4 };
  const a = { fontSize: 13, fontWeight: 300, color: 'var(--sf-text-muted)', cursor: 'pointer', background: 'none', border: 0, padding: 0, textAlign: 'left', fontFamily: 'var(--font-body)' };
  const contactRow = { display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, fontWeight: 300, color: 'var(--sf-text-muted)', fontFamily: 'var(--font-body)', minWidth: 0, whiteSpace: 'nowrap' };
  const contactIcon = { color: 'var(--sf-gold-hi)', flexShrink: 0 };
  const IconMail = () => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style={contactIcon}><rect x="3" y="5" width="18" height="14" rx="2.5" stroke="currentColor" strokeWidth="1.6"/><path d="m4 6.5 8 6.5 8-6.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
  );
  const IconWhatsApp = () => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style={contactIcon}><path d="M12 3.5A8.5 8.5 0 0 0 4.7 16.7L3.5 20.5l3.9-1.2A8.5 8.5 0 1 0 12 3.5Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/><path d="M8.8 8.4c.1-.3.4-.5.7-.5h.9c.2 0 .4.1.5.3l.6 1.4c.1.2 0 .5-.1.6l-.6.6c.4.9 1.2 1.7 2.1 2.1l.6-.6c.2-.2.4-.2.6-.1l1.4.6c.2.1.3.3.3.5v.9c0 .3-.2.6-.5.7-.6.2-1.7.3-3.4-.6-1.4-.7-2.5-1.8-3.2-3.2-.9-1.7-.8-2.8-.6-3.4Z" fill="currentColor"/></svg>
  );
  const IconInsta = () => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style={contactIcon}><rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.6"/><circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.6"/><circle cx="17.2" cy="6.8" r="1" fill="currentColor"/></svg>
  );
  return (
    <footer style={{ background: 'var(--sf-surface)', borderTop: '1px solid var(--sf-border-soft)', marginTop: 64 }}>
      <div className="sf-footer-grid" style={{ maxWidth: 'var(--sf-maxw)', margin: '0 auto', padding: '56px var(--sf-gutter) 30px', display: 'grid', gridTemplateColumns: '1.3fr 1.2fr 0.9fr 0.8fr 1.1fr', gap: 24, alignItems: 'start', justifyContent: 'space-between' }}>
        <div style={col}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <window.SS.BrandMark size={24} color="var(--sf-gold-hi)" />
            <span className="sf-wordmark-text" style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18 }}>
              <span style={{ color: 'var(--color-wine)' }}>{window.SS_SITE.brandNameWine.toUpperCase()}</span> <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--sf-gold-hi)' }}>{window.SS_SITE.brandNameGold}</em>
            </span>
          </div>
          <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 14, color: 'var(--sf-text-muted)' }}>{window.SS_SITE.tagline} — {window.SS_SITE.taglineSub}</div>
        </div>
        <div style={col}>
          <div style={h}>Stay in the loop</div>
          <div style={{ position: 'relative', display: 'flex' }}>
            <input placeholder="sassy@you.com" style={{
              all: 'unset', boxSizing: 'border-box', width: '100%', minWidth: 0, padding: '12px 66px 12px 14px',
              borderRadius: 'var(--sf-radius-pill)', background: 'var(--sf-well)', color: 'var(--sf-text)',
              boxShadow: 'inset 0 0 0 1px var(--sf-border-soft)', fontSize: 12,
            }} />
            <button style={{
              all: 'unset', cursor: 'pointer', position: 'absolute', right: 4, top: 4, bottom: 4,
              padding: '0 16px', borderRadius: 'var(--sf-radius-pill)', background: 'var(--sf-gold)',
              color: 'var(--color-ink)', fontSize: 11, fontWeight: 600, letterSpacing: '.08em',
              display: 'flex', alignItems: 'center',
            }}>JOIN</button>
          </div>
        </div>
        <div style={col}>
          <div style={h}>Know More</div>
          <button style={a} onClick={() => go && go('faq')}>FAQ &amp; care guide</button>
          <button style={a} onClick={() => go && go('about')}>Our story</button>
        </div>
        <div style={col}>
          <div style={h}>Legal</div>
          <button style={a} onClick={() => go && go('privacy')}>Privacy Policy</button>
          <button style={a} onClick={() => go && go('terms')}>Terms</button>
          <button style={a}>Shipping</button>
        </div>
        <div style={col}>
          <div style={h}>Connect</div>
          <a href={window.SS_SITE.social.instagram.url} style={{ ...contactRow, textDecoration: 'none' }}><IconInsta />{window.SS_SITE.social.instagram.handle}</a>
          <a href={'https://wa.me/91' + window.SS_SITE.social.whatsapp.replace(/\D/g, '')} style={{ ...contactRow, textDecoration: 'none' }}><IconWhatsApp />{window.SS_SITE.social.whatsapp}</a>
          <div style={contactRow}><IconMail />{window.SS_SITE.email}</div>
        </div>
      </div>
      <div style={{ borderTop: '1px solid var(--sf-border-soft)', padding: '16px var(--sf-gutter)', maxWidth: 'var(--sf-maxw)', margin: '0 auto', display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--sf-text-faint)' }}>
        <span>© 2026 {window.SS_SITE.brandName}</span>
        <span>Privacy · Terms · {window.SS_SITE.social.instagram.handle}</span>
      </div>
    </footer>
  );
}