// Footer.jsx — full navy footer with logo, sitemap links, search,
// contacts, social row, copyright.

const Footer = () => {
  const [q, setQ] = React.useState("");
  return (
    <footer style={ftStyles.root}>
      <div style={ftStyles.inner}>
        <div style={ftStyles.logoCol}>
          <img src="../../assets/logo.svg" alt="Keren Aliza Project" style={{ width: 200, height: "auto" }} />
        </div>

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

        <div style={ftStyles.contactCol}>
          <form onSubmit={(e) => { e.preventDefault(); }} style={ftStyles.search}>
            <input
              value={q}
              onChange={(e) => setQ(e.target.value)}
              placeholder="Поиск"
              style={ftStyles.searchInput}
            />
            <button type="submit" style={ftStyles.searchBtn} aria-label="Search">
              <Icon name="search" size={20} color="#EE077D" />
            </button>
          </form>

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

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

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

const ftStyles = {
  root: { background: "#190E83", color: "#FFFFFF", padding: "56px 60px 24px", fontFamily: "'Nunito Sans', sans-serif" },
  inner: { display: "grid", gridTemplateColumns: "260px 1fr 1fr", gap: 40, alignItems: "flex-start", maxWidth: 1320, margin: "0 auto" },

  logoCol: { display: "flex", justifyContent: "flex-start" },

  sitemap: { listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 16 },
  link: { color: "#FFFFFF", textDecoration: "none", fontWeight: 700, fontSize: 16, letterSpacing: "-0.02em" },

  contactCol: { display: "flex", flexDirection: "column", gap: 22 },
  search: { position: "relative", width: "100%", maxWidth: 380 },
  searchInput: {
    width: "100%", boxSizing: "border-box",
    padding: "16px 56px 16px 22px",
    borderRadius: 9999, border: 0, background: "#FFFFFF",
    fontFamily: "'Nunito Sans', sans-serif", fontSize: 14, color: "#171717",
    outline: "none",
  },
  searchBtn: { position: "absolute", right: 10, top: "50%", transform: "translateY(-50%)", border: 0, background: "transparent", cursor: "pointer", padding: 8 },

  h4: { margin: 0, fontWeight: 700, fontSize: 18, letterSpacing: "-0.02em" },
  contactList: { listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 },
  contactItem: { display: "flex", alignItems: "center", gap: 12, fontSize: 14 },

  socials: { display: "flex", alignItems: "center", gap: 18 },
  social: { color: "#FFFFFF" },
  socialDiv: { width: 1, height: 22, background: "#FFFFFF", opacity: 0.3 },

  bottom: {
    maxWidth: 1320, margin: "40px auto 0",
    display: "flex", justifyContent: "space-between", gap: 24,
    fontSize: 12, color: "rgba(255,255,255,0.55)", lineHeight: 1.6,
  },
  policy: { color: "rgba(255,255,255,0.65)", textDecoration: "none", whiteSpace: "nowrap" },
};

window.Footer = Footer;