import { Link } from 'react-router-dom';
import modules from '../data/modules';
import { ModuleMark } from './EcosystemIcons';

const half1 = modules.slice(0, 4);
const half2 = modules.slice(4);

export default function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div>
            <Link to="/" style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
              <img
                src="/assets/logo/anindhaloka-icon.png"
                alt="Anindhaloka"
                style={{ height: 28, width: 'auto', display: 'block' }}
              />
              <span className="footer__brand-logo" style={{ margin: 0 }}>anindhaloka</span>
            </Link>
            <p className="footer__brand-desc">
              Ekosistem digital gaya hidup berkesadaran yang menghubungkan pangan, sandang, olah diri, dan komunitas dalam satu perjalanan yang bermakna.
            </p>
            <div className="footer__socials" style={{ marginTop: 24 }}>
              <a href="#" className="footer__social" aria-label="Instagram">📷</a>
              <a href="#" className="footer__social" aria-label="Facebook">📘</a>
              <a href="#" className="footer__social" aria-label="YouTube">▶️</a>
              <a href="#" className="footer__social" aria-label="WhatsApp">💬</a>
            </div>
          </div>

          <div>
            <p className="footer__heading">Ekosistem I</p>
            <ul className="footer__links">
              {half1.map(m => (
                <li key={m.id}>
                  <Link to={m.path} className="footer__link" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <ModuleMark id={m.id} size={18} withBadge />{m.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <p className="footer__heading">Ekosistem II</p>
            <ul className="footer__links">
              {half2.map(m => (
                <li key={m.id}>
                  <Link to={m.path} className="footer__link" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <ModuleMark id={m.id} size={18} withBadge />{m.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <p className="footer__heading">Informasi</p>
            <ul className="footer__links">
              <li><Link to="/tentang" className="footer__link">Tentang Kami</Link></li>
              <li><Link to="/bergabung" className="footer__link">Bergabung & Berkolaborasi</Link></li>
              <li><Link to="/kontak" className="footer__link">Kontak</Link></li>
              <li><a href="#" className="footer__link">Kebijakan Privasi</a></li>
              <li><a href="#" className="footer__link">Syarat & Ketentuan</a></li>
              <li>
                <Link
                  to="/admin"
                  className="footer__link"
                  style={{ opacity: 0.3, fontSize: '0.75rem' }}
                >
                  Admin
                </Link>
              </li>
            </ul>
            <div style={{ marginTop: 24 }}>
              <p className="footer__heading">Kontak</p>
              <p style={{ fontSize: '.875rem', color: 'rgba(255,255,255,.5)', lineHeight: 1.7 }}>
                +62 815 7330 5808 (Welin Cakra)<br />
                @anindhaloka_id
              </p>
            </div>
          </div>
        </div>

        <div className="footer__bottom">
          <span>© 2025 Anindhaloka. Dibuat dengan cinta untuk bumi dan komunitas.</span>
          <span>🌿 Conscious Living Ecosystem</span>
        </div>
      </div>
    </footer>
  );
}