/* Footer */

function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer className="site-footer">
      <div className="container footer-grid">
        <div className="footer-brand">
          <div className="footer-logo"><Wordmark size={44} color="var(--paper)" /></div>
          <p>A two-person studio building reliable websites for small businesses. Based in Ireland, serving the EU.</p>
        </div>
        <div className="footer-col">
          <span className="footer-h">Services</span>
          <a href="#services">Website design</a>
          <a href="#services">SEO &amp; AEO</a>
          <a href="#services">Hosting &amp; email</a>
          <a href="#pricing">Pricing</a>
        </div>
        <div className="footer-col">
          <span className="footer-h">Studio</span>
          <a href="#about">About us</a>
          <a href="#portfolio">Selected work</a>
          <a href="#faq">FAQ</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="footer-col">
          <span className="footer-h">Get in touch</span>
          <a href="mailto:hello@sonalstudio.in">hello@sonalstudio.in</a>
          <span className="footer-quiet">Ireland · EU</span>
          <a href="#contact" className="btn btn-primary btn-sm" style={{marginTop: 10}}>Get a quote</a>
        </div>
      </div>
      <div className="footer-base container">
        <span>© {year} Sonal Studio · sonalstudio.in</span>
                <span className="script-accent footer-flourish">sonalstudio.in</span>
        <span><a href="#">Privacy</a> · <a href="#">Terms</a></span>
      </div>
      <style>{`
        .site-footer { background: var(--ink); color: var(--paper); padding: 80px 0 32px; margin-top: 0; }
        .footer-grid {
          display: grid;
          grid-template-columns: 1.4fr 1fr 1fr 1fr;
          gap: 48px;
          padding-bottom: 48px;
          border-bottom: 1px solid rgba(255, 251, 245, 0.12);
        }
        @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
        @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
        .footer-brand .footer-logo { margin-bottom: 22px; }
        .footer-brand p { font-size: 14px; line-height: 1.6; color: rgba(255, 251, 245, 0.7); margin: 0; max-width: 320px; }
        .footer-col { display: flex; flex-direction: column; gap: 10px; }
        .footer-h {
          font-family: var(--font-body); font-weight: 700; font-size: 11px;
          letter-spacing: 0.16em; text-transform: uppercase;
          color: rgba(255, 251, 245, 0.5); margin-bottom: 6px;
        }
        .footer-col a { color: rgba(255, 251, 245, 0.85); text-decoration: none; font-size: 14.5px; transition: color var(--dur-fast); }
        .footer-col a:hover { color: var(--paper); }
        .footer-quiet { color: rgba(255, 251, 245, 0.5); font-size: 14px; }
        .footer-base {
          display: flex; justify-content: space-between; align-items: center;
          padding-top: 24px; font-size: 13px; color: rgba(255, 251, 245, 0.55);
          flex-wrap: wrap; gap: 12px;
        }
        .footer-base a { color: inherit; text-decoration: none; }
        .footer-base a:hover { color: var(--paper); }
        .footer-flourish { color: var(--accent); font-size: 22px; line-height: 1; font-family: var(--font-display); font-style: italic; }
      `}</style>
    </footer>
  );
}

window.Footer = Footer;