const Footer = () => {
  const year = new Date().getFullYear();
  return (
    <>
      <div className="footer-wordmark">arogyabite</div>
      <footer className="footer" id="contact">
        <div className="container">
          <div className="footer-grid">
            <div>
              <div className="brand" style={{ marginBottom: 16 }}>
                <div className="brand-mark"><span>A</span></div>
                <div className="brand-text">
                  <span className="brand-name">Arogya Bite</span>
                  <span className="brand-tag">Preventive health, intelligently.</span>
                </div>
              </div>
              <p style={{ color: 'var(--muted)', fontSize: 14, maxWidth: '36ch', margin: '0 0 20px' }}>
                Building the AI-powered preventive healthcare layer for India.
              </p>
              <a href="#signup" className="btn btn-secondary btn-sm">
                Join the beta <Icon name="arrowUpRight" size={14}/>
              </a>
            </div>

            <div className="footer-col">
              <h5>Product</h5>
              <ul>
                <li><a href="#features">Features</a></li>
                <li><a href="#how">How it works</a></li>
                <li><a href="#ecosystem">Ecosystem</a></li>
                <li><a href="#roadmap">Roadmap</a></li>
              </ul>
            </div>

            <div className="footer-col">
              <h5>Company</h5>
              <ul>
                <li><a href="#">About</a></li>
                <li><a href="#">Build in public</a></li>
                <li><a href="#">Careers</a></li>
                <li><a href="mailto:hello@arogyabite.com">Contact</a></li>
              </ul>
            </div>

            <div className="footer-col">
              <h5>Legal</h5>
              <ul>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Terms</a></li>
                <li><a href="#">Health data</a></li>
                <li><a href="#">Press kit</a></li>
              </ul>
            </div>
          </div>

          <div className="footer-bottom">
            <div>© {year} Arogya Bite. Made in India.</div>
            <div className="socials">
              <a href="#" aria-label="Twitter"><Icon name="twitter" size={15}/></a>
              <a href="#" aria-label="Instagram"><Icon name="instagram" size={15}/></a>
              <a href="#" aria-label="LinkedIn"><Icon name="linkedin" size={15}/></a>
              <a href="#" aria-label="GitHub"><Icon name="github" size={15}/></a>
            </div>
          </div>
        </div>
      </footer>
    </>
  );
};

Object.assign(window, { Footer });