// MobileSubscribe.jsx — cream subscription card with two fields and
// magenta CTA. MobileTags.jsx — wrapped tag pills.
// MobilePartners.jsx — cream "Партнёры" block with bullet checks.

const MobileSubscribe = ({ onSubmit = () => {} }) => {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  return (
    <form
      onSubmit={(e) => { e.preventDefault(); onSubmit({ name, email }); setName(""); setEmail(""); }}
      style={subStyles.card}
    >
      <h3 style={subStyles.h3}>Подписка на новости</h3>
      <Field label="Имя" value={name} onChange={setName} />
      <Field label="Email" value={email} onChange={setEmail} type="email" />
      <button type="submit" style={subStyles.submit}>ПОДПИСАТЬСЯ</button>
    </form>
  );
};

const Field = ({ label, value, onChange, type = "text" }) => (
  <label style={subStyles.field}>
    <span style={subStyles.lbl}>{label}<span style={subStyles.req}>*</span></span>
    <input
      type={type}
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder={label === "Email" ? "Введите ваш email" : "Введите ваше имя"}
      style={subStyles.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 subStyles = {
  card: { margin: "0 16px", background: "#FEEECC", borderRadius: 14, padding: "20px 18px", display: "flex", flexDirection: "column", gap: 12, fontFamily: "'Nunito Sans', sans-serif" },
  h3: { margin: 0, fontWeight: 700, fontSize: 16, color: "#171717", letterSpacing: "-0.04em" },
  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: 46, padding: "12px 14px", fontFamily: "'Nunito Sans', sans-serif", fontSize: 14, borderRadius: 10, 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: 10, padding: "12px 18px", fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 13, letterSpacing: "0.04em", cursor: "pointer", marginTop: 4 },
};

const MobileTags = ({ items = defaultMobTags }) => (
  <section style={mtStyles.card}>
    <h3 style={mtStyles.h3}>Метки</h3>
    <div style={mtStyles.tags}>
      {items.map((t, i) => (
        <span key={i} style={{ ...mtStyles.tag, ...(t.accent ? mtStyles.accent : {}) }}>{t.label}</span>
      ))}
    </div>
  </section>
);

const defaultMobTags = [
  { label: "Все статьи" }, { label: "Как играть на скрипке" },
  { label: "Руки музыканта" }, { label: "Как учиться музыке" },
  { label: "Импровизация и джаз", accent: true }, { label: "О скрипке, музыке и музыкантах" },
];

const mtStyles = {
  card: { margin: "0 16px", background: "#FEEECC", borderRadius: 14, padding: "20px 18px", display: "flex", flexDirection: "column", gap: 12, fontFamily: "'Nunito Sans', sans-serif" },
  h3: { margin: 0, fontWeight: 700, fontSize: 16, color: "#171717", letterSpacing: "-0.04em" },
  tags: { display: "flex", flexWrap: "wrap", gap: 8 },
  tag: { fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 11, padding: "6px 10px", borderRadius: 9999, background: "#FFFFFF", color: "#171717" },
  accent: { background: "#EE077D", color: "#FFFFFF" },
};

const MobilePartners = ({ items = defaultMobPartners }) => (
  <section style={mpStyles.card}>
    <h3 style={mpStyles.h3}>Партнёры проекта<br /><span style={mpStyles.sub}>Keren Aliza Project</span></h3>
    <p style={mpStyles.body}>Приглашаются к партнёрству и поддержке музыкальных проектов:</p>
    <ul style={mpStyles.list}>
      {items.map((p, i) => (
        <li key={i} style={mpStyles.item}><Icon name="check" size={18} /> {p}</li>
      ))}
    </ul>
  </section>
);

const defaultMobPartners = ["Продюсеры", "Фестивали", "Организации", "Любители музыки"];

const mpStyles = {
  card: { margin: "0 16px", background: "#FEEECC", borderRadius: 14, padding: "20px 18px", display: "flex", flexDirection: "column", gap: 10, fontFamily: "'Nunito Sans', sans-serif" },
  h3: { margin: 0, fontWeight: 700, fontSize: 15, color: "#171717", letterSpacing: "-0.04em", lineHeight: 1.25 },
  sub: { fontSize: 14, fontWeight: 700, color: "#171717" },
  body: { margin: 0, fontFamily: "'Nunito Sans', sans-serif", fontSize: 13, color: "#171717", lineHeight: 1.5 },
  list: { listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 },
  item: { display: "flex", alignItems: "center", gap: 10, fontFamily: "'Nunito Sans', sans-serif", fontSize: 13, color: "#171717" },
};

window.MobileSubscribe = MobileSubscribe;
window.MobileTags = MobileTags;
window.MobilePartners = MobilePartners;