// MobileFooter.jsx — navy footer with centered full logo lockup,
// stacked sitemap, contacts and copyright. Matches FooterMob frame.

const MobileFooter = () => (
  <footer style={mfStyles.root}>
    <div style={mfStyles.logo}>
      <img src="../../assets/logo.svg" alt="Keren Aliza Project" style={{ width: 180 }} />
    </div>

    <ul style={mfStyles.sitemap}>
      {["Ализа Керен", "Слушать онлайн", "Музыкальный магазин", "Творческие новости", "Статьи о скрипке", "Уроки и курсы"].map((l, i) => (
        <li key={i}><a href="#" style={mfStyles.link}>{l}</a></li>
      ))}
    </ul>

    <h4 style={mfStyles.h4}>Пишите</h4>
    <ul style={mfStyles.contactList}>
      <li style={mfStyles.contactItem}><Icon name="mail" size={16} color="#EE077D" /> keren.aliza.pr@gmail.com</li>
      <li style={mfStyles.contactItem}><Icon name="whatsapp" size={16} color="#EE077D" /> +972 54‑537‑0545</li>
      <li style={mfStyles.contactItem}><Icon name="pin" size={16} color="#EE077D" /> Mevaseret Zion, Israel</li>
    </ul>

    <div style={mfStyles.socials}>
      <a href="#" style={mfStyles.social}><Icon name="facebook" size={20} color="#FFFFFF" /></a>
      <span style={mfStyles.div} />
      <a href="#" style={mfStyles.social}><Icon name="instagram" size={20} color="#FFFFFF" /></a>
      <span style={mfStyles.div} />
      <a href="#" style={mfStyles.social}><Icon name="youtube" size={20} color="#FFFFFF" /></a>
      <span style={mfStyles.div} />
      <a href="#" style={mfStyles.social}><Icon name="linkedin" size={20} color="#FFFFFF" /></a>
    </div>

    <p style={mfStyles.copy}>
      Aliza Keren © 2005–2025 Использование материалов только с письменного разрешения автора и со ссылкой на сайт СКРИПКА*ТВОРЧЕСТВО*ИМПРОВИЗАЦИЯ
    </p>
    <a href="#" style={mfStyles.policy}>Политика конфиденциальности</a>
  </footer>
);

const mfStyles = {
  root: { background: "#190E83", color: "#FFFFFF", padding: "32px 20px 24px", display: "flex", flexDirection: "column", gap: 22, alignItems: "stretch", fontFamily: "'Nunito Sans', sans-serif" },
  logo: { display: "flex", justifyContent: "center" },
  sitemap: { listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 },
  link: { color: "#FFFFFF", textDecoration: "none", fontWeight: 700, fontSize: 15, letterSpacing: "-0.02em" },
  h4: { margin: 0, fontWeight: 700, fontSize: 16, letterSpacing: "-0.02em" },
  contactList: { listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 },
  contactItem: { display: "flex", alignItems: "center", gap: 10, fontSize: 13 },
  socials: { display: "flex", alignItems: "center", justifyContent: "center", gap: 18, marginTop: 6 },
  social: { color: "#FFFFFF" },
  div: { width: 1, height: 22, background: "#FFFFFF", opacity: 0.3 },
  copy: { margin: 0, fontSize: 12, color: "rgba(255,255,255,0.64)", lineHeight: 1.6, textAlign: "center" },
  policy: { color: "rgba(255,255,255,0.64)", textDecoration: "none", fontSize: 12, textAlign: "center" },
};

window.MobileFooter = MobileFooter;