// Footer.jsx
function Footer() {
  return (
    <footer className="mys-footer">
      <div className="mys-page" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <svg viewBox="0 0 100 130" style={{ height: 100 }}>
            <path d="M 10 50 A 40 40 0 0 1 90 50 L 90 120 A 5 5 0 0 1 85 125 L 15 125 A 5 5 0 0 1 10 120 Z" fill="none" stroke="#F5EFE6" strokeWidth="2"/>
            <path d="M 15 50 A 35 35 0 0 1 85 50 L 85 120 L 15 120 Z" fill="none" stroke="#F5EFE6" strokeWidth="1"/>
            <circle cx="50" cy="25" r="5" fill="none" stroke="#F5EFE6" strokeWidth="1.5"/>
            <line x1="50" y1="10" x2="50" y2="15" stroke="#F5EFE6" strokeWidth="1"/>
            <text x="50" y="65" textAnchor="middle" fill="#F5EFE6" style={{ fontFamily: "'Cormorant Garamond','EB Garamond',Georgia,serif", fontStyle: 'italic', fontWeight: 600, fontSize: 24 }}>Made</text>
            <text x="50" y="88" textAnchor="middle" fill="#F5EFE6" style={{ fontFamily: "'Cormorant Garamond','EB Garamond',Georgia,serif", fontStyle: 'italic', fontWeight: 600, fontSize: 24 }}>Yours</text>
            <line x1="30" y1="102" x2="70" y2="102" stroke="#C8956C" strokeWidth="1.5"/>
            <text x="50" y="112" textAnchor="middle" fill="#C8956C" style={{ fontFamily: "'Inter',system-ui,sans-serif", fontWeight: 500, fontSize: 7, letterSpacing: '1px' }}>EST. 2026</text>
          </svg>
          <p style={{ fontSize: 13, lineHeight: 1.7, color: 'rgba(245,239,230,0.7)', maxWidth: 260, marginTop: 14 }}>
            Made-to-order engraved goods from a one-person studio in Ottawa, Ontario.
          </p>
        </div>
        <div>
          <p style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', fontWeight: 600, margin: '6px 0 12px', color: 'var(--ember)' }}>Studio</p>
          <a>About</a><a>Process</a><a>Contact</a>
        </div>
        <div>
          <p style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', fontWeight: 600, margin: '6px 0 12px', color: 'var(--ember)' }}>Elsewhere</p>
          <a>Instagram</a><a>Email me</a>
        </div>
      </div>
      <div className="mys-page" style={{ borderTop: '0.5px solid rgba(245,239,230,0.15)', marginTop: 44, paddingTop: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase', color: 'rgba(245,239,230,0.5)' }}>
          Est. 2026 · Ottawa, ON
        </span>
        <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 14, color: 'rgba(245,239,230,0.7)' }}>
          Not made for everyone. Made for you.
        </span>
      </div>
    </footer>
  );
}

window.Footer = Footer;