// Sidebar.jsx — cream sticky right column with news, newsletter,
// tags, partners.

const Sidebar = ({ news = defaultNews, tags = defaultTags, partners = defaultPartners, onSubscribe = () => {} }) => {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  return (
    <aside style={sbStyles.root}>
      <Block title="Новости">
        <div style={sbStyles.newsList}>
          {news.map((n, i) => (
            <React.Fragment key={i}>
              <a href="#" style={sbStyles.newsItem}>
                {n.body} {n.link && <span style={sbStyles.newsLink}>{n.link}</span>}
              </a>
              {i < news.length - 1 && <div style={sbStyles.div} />}
            </React.Fragment>
          ))}
        </div>
      </Block>
      <div style={sbStyles.divThick} />
      <Block title="Подписка на новости">
        <form onSubmit={(e) => { e.preventDefault(); onSubscribe({ name, email }); setName(""); setEmail(""); }} style={sbStyles.form}>
          <Field label="Имя" value={name} onChange={setName} />
          <Field label="Email" value={email} onChange={setEmail} type="email" />
          <button type="submit" style={sbStyles.submit}>ПОДПИСАТЬСЯ</button>
        </form>
      </Block>
      <div style={sbStyles.divThick} />
      <Block title="Метки">
        <div style={sbStyles.tags}>
          {tags.map((t, i) => (
            <span key={i} style={{ ...sbStyles.tag, ...(t.accent ? sbStyles.tagAccent : {}) }}>{t.label}</span>
          ))}
        </div>
      </Block>
      <div style={sbStyles.divThick} />
      <Block title={<>Партнёры проекта<br /><span style={sbStyles.partnersSub}>Keren Aliza Project</span></>}>
        <p style={sbStyles.partnersBody}>Приглашаются к партнёрству и поддержке музыкальных проектов:</p>
        <ul style={sbStyles.partnersList}>
          {partners.map((p, i) => (
            <li key={i} style={sbStyles.partnerItem}>
              <Icon name="check" size={20} /> {p}
            </li>
          ))}
        </ul>
      </Block>
    </aside>
  );
};

const Block = ({ title, children }) => (
  <section style={sbStyles.block}>
    <h3 style={sbStyles.h3}>{title}</h3>
    {children}
  </section>
);

const Field = ({ label, value, onChange, type = "text" }) => (
  <label style={sbStyles.field}>
    <span style={sbStyles.lbl}>{label}<span style={sbStyles.req}>*</span></span>
    <input
      type={type}
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder={`Введите ваш${label === "Email" ? "" : "е "}${label.toLowerCase()}`}
      style={sbStyles.input}
      onFocus={(e) => { e.currentTarget.style.borderColor = "#EE077D"; e.currentTarget.style.boxShadow = "0 0 0 3px rgba(238,7,125,0.12)"; }}
      onBlur={(e) => { e.currentTarget.style.borderColor = "#DADAE0"; e.currentTarget.style.boxShadow = "none"; }}
    />
  </label>
);

const defaultNews = [
  { body: "5 мая 2022. Онлайн‑семинар «Здоровье рук музыкантов» — педагогам, студентам, оркестрантам." },
  { body: "10 мая 2022. Онлайн‑концерт «Скрипка, играющая оперетту».", link: " Слушать" },
  { body: "22 мая 2022. Онлайн‑семинар для родителей «Как научить ребёнка петь»." },
  { body: "5 мая 2022. Онлайн‑семинар «Здоровье рук музыкантов» — педагогам, студентам, оркестрантам." },
  { body: "22 мая 2022. Онлайн‑семинар для родителей «Как научить ребёнка петь»." },
];
const defaultTags = [
  { label: "Все статьи" }, { label: "Как играть на скрипке" },
  { label: "Руки музыканта" }, { label: "Как учиться музыке" },
  { label: "Импровизация и джаз", accent: true }, { label: "О скрипке, музыке и музыкантах" },
];
const defaultPartners = ["Продюсеры", "Фестивали", "Организации", "Любители музыки"];

const sbStyles = {
  root: {
    width: 315,
    background: "#FEEECC",
    borderRadius: 16,
    padding: "32px 16px",
    boxSizing: "border-box",
    display: "flex",
    flexDirection: "column",
    gap: 0,
    position: "sticky",
    top: 16,
    height: "fit-content",
    fontFamily: "'Nunito Sans', sans-serif",
  },
  block: { padding: "0 8px" },
  h3: { margin: "0 0 14px", fontFamily: "'Nunito Sans', sans-serif", fontSize: 20, fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.04em", color: "#171717" },
  newsList: { display: "flex", flexDirection: "column" },
  newsItem: { fontFamily: "'Lato', serif", fontSize: 13, lineHeight: 1.55, color: "#171717", textDecoration: "none", padding: "10px 0" },
  newsLink: { color: "#EE077D", fontWeight: 700 },
  div: { height: 1, background: "#FFFFFF" },
  divThick: { height: 1, background: "#FFFFFF", margin: "24px 8px" },

  form: { display: "flex", flexDirection: "column", gap: 12 },
  field: { display: "flex", flexDirection: "column", gap: 4 },
  lbl: { fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 12, color: "#171717" },
  req: { color: "#EE077D", marginLeft: 2 },
  input: {
    height: 50, padding: "12px 16px",
    fontFamily: "'Nunito Sans', sans-serif", fontSize: 14,
    borderRadius: 12, border: "1px solid #DADAE0", background: "#FFFFFF",
    outline: "none", boxSizing: "border-box",
    transition: "border-color .2s, box-shadow .2s",
  },
  submit: {
    background: "#EE077D", color: "#FFFFFF",
    border: 0, borderRadius: 12, padding: "12px 20px",
    fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 13,
    letterSpacing: "0.04em", cursor: "pointer", marginTop: 4,
  },

  tags: { display: "flex", flexWrap: "wrap", gap: 8 },
  tag: { fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 12, padding: "6px 12px", borderRadius: 9999, background: "#FFFFFF", color: "#171717" },
  tagAccent: { background: "#EE077D", color: "#FFFFFF" },

  partnersSub: { fontFamily: "'Nunito Sans', sans-serif", fontSize: 16, color: "#171717", fontWeight: 700, letterSpacing: "-0.02em" },
  partnersBody: { margin: "0 0 12px", fontFamily: "'Nunito Sans', sans-serif", fontSize: 13, color: "#171717", lineHeight: 1.55 },
  partnersList: { listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 },
  partnerItem: { display: "flex", alignItems: "center", gap: 10, fontFamily: "'Nunito Sans', sans-serif", fontSize: 14, color: "#171717" },
};

window.Sidebar = Sidebar;