/* global React, Icon, BrandIcon */

function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="footer-brand-row">
              <span className="footer-mark">D</span>
              <div>
                <div className="footer-name">Dhany Indraswara</div>
                <div className="footer-role">Data · AI · Automation · Digital Product</div>
              </div>
            </div>
            <p className="footer-tag">
              Helping businesses, teams, and professionals make smarter decisions
              through data analytics, BI, AI workflows, and modern digital
              products.
            </p>
            <div className="footer-social">
              <a href="#" aria-label="Instagram"><BrandIcon name="instagram" size={18} /></a>
              <a href="#" aria-label="LinkedIn"><BrandIcon name="linkedin" size={18} /></a>
              <a href="#" aria-label="TikTok"><BrandIcon name="tiktok" size={18} /></a>
              <a href="#" aria-label="X / Twitter"><BrandIcon name="x" size={18} /></a>
              <a href="#" aria-label="Facebook"><BrandIcon name="facebook" size={18} /></a>
              <a href="#" aria-label="YouTube"><BrandIcon name="youtube" size={18} /></a>
            </div>
          </div>

          <div className="footer-col">
            <h4>Explore</h4>
            <ul>
              <li><a href="#about">About</a></li>
              <li><a href="#expertise">Expertise</a></li>
              <li><a href="#journey">Journey</a></li>
              <li><a href="#projects">Projects</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h4>Work</h4>
            <ul>
              <li><a href="#services">Services</a></li>
              <li><a href="#workshops">Workshops</a></li>
              <li><a href="#certs">Certifications</a></li>
              <li><a href="#creator">Content</a></li>
            </ul>
          </div>

          <div className="footer-col last">
            <h4>Contact</h4>
            <ul>
              <li><a href="#">hello@dhanyindraswara.com</a></li>
              <li><a href="#">WhatsApp</a></li>
              <li><a href="#">Book a call</a></li>
              <li><a href="#">Press kit</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-base">
          <span>© {year} Dhany Indraswara · Made in Jakarta, Indonesia</span>
          <span>Open for collaborations · Q2–Q3 2026</span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;