// Pretty Rare Boutique — Footer (responsive, real contact info)

function SiteFooter({ onJump }) {
  const mobile = useMobile();

  const link = {
    fontFamily: 'var(--font-sans)', fontSize: 11, letterSpacing: '0.22em',
    textTransform: 'uppercase', fontWeight: 500,
    color: 'var(--fg-muted)', cursor: 'pointer',
    textDecoration: 'none', lineHeight: 2.4,
  };

  const wordmark = (
    <div onClick={() => onJump('top')} style={{ cursor: 'pointer', textAlign: 'center', lineHeight: 0 }}>
      <img src="assets/logo.jpg" alt="Pretty Rare Boutique" style={{ height: 64, width: 'auto', borderRadius: 4 }} />
      <p style={{ marginTop: 16, fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--fg-muted)', letterSpacing: '0.04em', lineHeight: 1.7, textAlign: 'center' }}>
        Palm Beach, Gold Coast<br />hello@prettyrareboutique.com
      </p>
    </div>
  );

  if (mobile) {
    return (
      <footer style={{ borderTop: '1px solid var(--border)', padding: '48px 0 32px', background: 'var(--bg)' }}>
        <div className="wrap" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 40 }}>
          {wordmark}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px 40px', width: '100%' }}>
            {[{ key: 'treatments', label: 'Treatments' }, { key: 'experience', label: 'Experience' }, { key: 'about', label: 'About' }, { key: 'visit', label: 'Visit' }].map(({ key, label }) => (
              <a key={key} style={link} onClick={() => onJump(key)}>{label}</a>
            ))}
          </div>
          <div style={{ paddingTop: 24, borderTop: '1px solid var(--border-soft)', width: '100%', textAlign: 'center', fontFamily: 'var(--font-sans)', fontSize: 11, letterSpacing: '0.06em', color: 'var(--fg-faint)' }}>
            &copy; {new Date().getFullYear()} Pretty Rare Boutique
          </div>
        </div>
      </footer>
    );
  }

  return (
    <footer style={{ borderTop: '1px solid var(--border)', padding: '56px 0 40px', background: 'var(--bg)' }}>
      <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'start', gap: 48 }}>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {[{ key: 'treatments', label: 'Treatments' }, { key: 'experience', label: 'Experience' }, { key: 'about', label: 'About' }, { key: 'visit', label: 'Visit' }].map(({ key, label }) => (
            <a key={key} style={link} onClick={() => onJump(key)}>{label}</a>
          ))}
        </div>
        {wordmark}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
          <a href="sms:+61450466052" style={{ ...link, textAlign: 'right' }}>Text 0450 466 052</a>
          <a href="https://www.instagram.com/prettyrareboutique" target="_blank" rel="noopener noreferrer" style={{ ...link, textAlign: 'right' }}>@prettyrareboutique</a>
          <a style={{ ...link, textAlign: 'right' }}>Privacy policy</a>
        </div>
      </div>
      <div style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid var(--border-soft)', textAlign: 'center', fontFamily: 'var(--font-sans)', fontSize: 11, letterSpacing: '0.06em', color: 'var(--fg-faint)' }}>
        &copy; {new Date().getFullYear()} Pretty Rare Boutique. All rights reserved.
      </div>
    </footer>
  );
}

window.SiteFooter = SiteFooter;