// SiteFooter.jsx — minimal navigation: Home / ACCESS / Meet the Founder.
const SiteFooter = () => {
  const isMobile = useIsMobile();
  return (
  <footer style={{
    background: 'var(--ld-navy)',
    color: 'var(--ld-pearl-100)',
    paddingTop: isMobile ? 56 : 96,
    paddingBottom: isMobile ? 36 : 56,
  }}>
    <div className="container" style={{
      display: 'grid',
      gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr',
      gap: isMobile ? 40 : 64,
      alignItems: 'start',
    }}>
      {/* Left — institutional mark + statement */}
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 14 : 18, marginBottom: isMobile ? 20 : 28 }}>
          <img src="assets/crest-simple-gold.png" alt="" style={{ height: isMobile ? 44 : 56, width: 'auto' }} />
          <div style={{
            fontFamily: 'Cormorant Garamond, serif',
            fontVariantCaps: 'all-small-caps',
            letterSpacing: '0.1em',
            fontSize: isMobile ? 18 : 22,
            fontWeight: 400,
            color: 'var(--ld-pearl-100)',
            lineHeight: 1.15,
          }}>
            The Art of Living Digitally
            <sup style={{ fontSize: 10, marginLeft: 1, fontVariant: 'normal', letterSpacing: 0, color: 'var(--ld-gold)' }}>™</sup>
          </div>
        </div>
        <p style={{
          fontFamily: 'Cormorant Garamond, serif',
          fontStyle: 'italic',
          fontSize: isMobile ? 15 : 17, lineHeight: 1.6,
          color: 'rgba(235,221,197,0.78)',
          maxWidth: 460, margin: 0,
        }}>
          Digital literacy as inheritance, not interruption.
        </p>
      </div>

      {/* Right — three navigation links */}
      <nav>
        <div className="eyebrow-gold" style={{ marginBottom: 24 }}>Index</div>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 16 }}>
          {[
            { label: 'Home', href: '/' },
            { label: 'ACCESS™', href: '/access' },
            { label: 'Meet the Founder', href: '/founder' },
          ].map((item) => (
            <li key={item.label}>
              <a href={item.href} style={{
                display: 'inline-flex', alignItems: 'baseline', gap: 14,
                fontFamily: 'Cormorant Garamond, serif',
                fontSize: isMobile ? 20 : 24, fontWeight: 400,
                color: 'var(--ld-pearl-100)',
                borderBottom: 'none',
                lineHeight: 1.3,
              }}>
                <span style={{
                  fontFamily: 'Montserrat, sans-serif', fontWeight: 600,
                  fontSize: 10, letterSpacing: '0.22em',
                  color: 'var(--ld-gold)', minWidth: 24,
                }}>—</span>
                {item.label}
              </a>
            </li>
          ))}
        </ul>
      </nav>
    </div>

    <hr style={{
      border: 'none', borderTop: '1px solid rgba(235,221,197,0.18)',
      maxWidth: 1240, margin: isMobile ? '40px auto 20px' : '72px auto 28px',
    }} />

    <div className="container" style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      gap: isMobile ? 12 : 24, flexWrap: 'wrap',
    }}>
      <span style={{
        fontFamily: 'Montserrat, sans-serif', fontSize: isMobile ? 11 : 12,
        letterSpacing: '0.04em',
        color: 'rgba(235,221,197,0.55)',
      }}>
        © 2026 The Art of Living Digitally™. All rights reserved.
      </span>
      <span style={{
        fontFamily: 'Montserrat, sans-serif', fontWeight: 600,
        fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: 'rgba(235,221,197,0.55)',
      }}>
        theartoflivingdigitally.com
      </span>
    </div>
  </footer>
  );
};

window.SiteFooter = SiteFooter;