/* ARKHAM — pages: Register (cotizar/speaker/visitar/newsletter), Premios, Tienda */
const { useState: pgS, useContext: pgC } = React;

/* ===================== REGISTER / LANDING FORMS ===================== */
const REG_CONFIG = {
  contacto: {
    kicker: "Contacto",
    title: "Hablemos de tu próximo proyecto",
    intro: "Cotizar una obra, invitar a Min a tu evento o agendar una visita al estudio — todo desde un mismo lugar. Déjanos tus datos y el equipo de ARKHAM te contactará.",
    bullets: ["Respuesta en menos de 48 horas", "Un solo formulario para todo", "Atención directa del estudio"],
    fields: [
      { name: "nombre", label: "Nombre completo", type: "text" },
      { name: "correo", label: "Correo electrónico", type: "email" },
      { name: "tel", label: "Teléfono", type: "tel" },
      { name: "motivo", label: "Motivo de contacto", type: "select", options: ["Cotizar un proyecto", "Contratar a Min Peniche como speaker", "Agendar una visita al estudio", "Prensa / medios", "Otro"] },
      { name: "mensaje", label: "Cuéntanos más", type: "textarea" }
    ],
    submit: "Enviar mensaje",
    done: "¡Gracias por escribirnos! El equipo de ARKHAM te contactará muy pronto."
  },
  newsletter: {
    kicker: "Newsletter",
    title: "No te pierdas nada",
    intro: "Recibe primero los nuevos proyectos, las fechas de conferencias y los lanzamientos de la tienda. Sin spam, solo lo bueno.",
    bullets: ["Nuevos proyectos y avances de obra", "Conferencias y eventos del estudio", "Lanzamientos de objetos y productos"],
    fields: [
      { name: "correo", label: "Correo electrónico", type: "email" },
      { name: "intereses", label: "¿Qué te interesa?", type: "checks", options: ["Nuevos proyectos", "Conferencias", "Eventos", "Tienda"] }
    ],
    submit: "Suscribirme",
    done: "¡Bienvenido! Ya formas parte de la lista de ARKHAM. Nos vemos en tu bandeja de entrada."
  }
};

function RegisterScreen({ type }) {
  const ctx = pgC(AppCtx);
  const cfg = REG_CONFIG[type] || REG_CONFIG.contacto;
  const [vals, setVals] = pgS({});
  const [submitted, setSubmitted] = pgS(false);

  const setVal = (n, v) => setVals((s) => ({ ...s, [n]: v }));
  const toggleCheck = (n, opt) => setVals((s) => {
    const cur = s[n] || [];
    return { ...s, [n]: cur.includes(opt) ? cur.filter((x) => x !== opt) : [...cur, opt] };
  });

  return (
    <div className="reg">
      <div className="reg-bg" />
      <div className="reg-tex" />
      <button className="reg-close" onClick={ctx.closeRegister}><Icon.Close s={20} /></button>

      <div className="reg-shell">
        <aside className="reg-aside">
          <img className="reg-iso" src="assets/arkham-iso-white.png" alt="ARKHAM" />
          <div className="reg-kicker">{cfg.kicker}</div>
          <h1 className="reg-title">{cfg.title}</h1>
          <p className="reg-intro">{cfg.intro}</p>
          <ul className="reg-bullets">
            {cfg.bullets.map((b) => <li key={b}><Icon.Check s={15} /> {b}</li>)}
          </ul>
        </aside>

        <div className="reg-formcard">
          {!submitted ? (
            <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
              <div className="reg-form-head">Completa tus datos</div>
              {cfg.fields.map((f) => (
                <div className={"reg-field" + (f.type === "textarea" || f.type === "checks" ? " full" : "")} key={f.name}>
                  <label>{f.label}</label>
                  {f.type === "select" ? (
                    <select required value={vals[f.name] || ""} onChange={(e) => setVal(f.name, e.target.value)}>
                      <option value="" disabled>Selecciona…</option>
                      {f.options.map((o) => <option key={o} value={o}>{o}</option>)}
                    </select>
                  ) : f.type === "textarea" ? (
                    <textarea rows="3" value={vals[f.name] || ""} onChange={(e) => setVal(f.name, e.target.value)} placeholder="Escribe aquí…" />
                  ) : f.type === "checks" ? (
                    <div className="reg-checks">
                      {f.options.map((o) => (
                        <button type="button" key={o}
                          className={"reg-chip" + ((vals[f.name] || []).includes(o) ? " on" : "")}
                          onClick={() => toggleCheck(f.name, o)}>{o}</button>
                      ))}
                    </div>
                  ) : (
                    <input type={f.type} required={f.type === "email"} value={vals[f.name] || ""} onChange={(e) => setVal(f.name, e.target.value)} />
                  )}
                </div>
              ))}
              <button className="reg-submit" type="submit">{cfg.submit}</button>
              <p className="reg-legal">Al enviar aceptas el aviso de privacidad de ARKHAM Projects.</p>
            </form>
          ) : (
            <div className="reg-done">
              <div className="reg-done-mark"><Icon.Check s={34} /></div>
              <h2>¡Gracias!</h2>
              <p>{cfg.done}</p>
              <div className="reg-done-actions">
                <button className="btn btn-play" onClick={ctx.closeRegister}>Volver al inicio</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ============================== PREMIOS ============================== */
function PremiosScreen() {
  const ctx = pgC(AppCtx);
  const awards = window.ARKHAM.awards;
  const total = awards.length;
  const ganados = awards.filter((a) => /ganador|winner/i.test(a.prize)).length;
  const noms = total - ganados;
  const years = [...new Set(awards.map((a) => a.year))].sort((a, b) => b - a);

  return (
    <div className="browse premios">
      <div className="premios-head">
        <Icon.Trophy s={30} />
        <div>
          <h1 className="browse-title">Premios y reconocimientos</h1>
          <span className="browse-sub">El trabajo del estudio, reconocido dentro y fuera de México.</span>
        </div>
      </div>

      <div className="premios-stats">
        <div className="premios-stat"><b>{total}</b><span>reconocimientos</span></div>
        <div className="premios-stat"><b>{ganados}</b><span>premios ganados</span></div>
        <div className="premios-stat"><b>{noms}</b><span>nominaciones y selecciones</span></div>
      </div>

      {years.map((y) => (
        <div className="premios-year" key={y}>
          <div className="premios-year-label">{y}</div>
          <div className="premios-list">
            {awards.filter((a) => a.year === y).map((a, k) => {
              const proj = a.projectId ? window.ARKHAM.byId[a.projectId] : null;
              const won = /ganador|winner/i.test(a.prize);
              return (
                <div className={"premios-row" + (proj ? " link" : "")} key={k}
                  onClick={() => proj && ctx.openDetail(proj.id)}>
                  <div className={"premios-medal" + (won ? " won" : "")}><Icon.Trophy s={18} /></div>
                  <div className="premios-main">
                    <div className="premios-org">{a.org}</div>
                    <div className="premios-prize">{a.prize}</div>
                  </div>
                  <div className="premios-proj">{proj ? proj.title : "Estudio ARKHAM"}</div>
                </div>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}

/* =============================== TIENDA =============================== */
const STORE_ITEMS = [
  { id: "s1", name: "Banco MUL", cat: "Mobiliario", hue: 28, sat: 18 },
  { id: "s2", name: "Lámpara WÓO", cat: "Iluminación", hue: 18, sat: 16 },
  { id: "s3", name: "Mesa AKÚ", cat: "Mobiliario", hue: 130, sat: 14 },
  { id: "s4", name: "Jarrón BLAS", cat: "Objeto", hue: 30, sat: 12 },
  { id: "s5", name: "Lámina CIENFUEGOS", cat: "Arte / Print", hue: 18, sat: 28 },
  { id: "s6", name: "Maqueta ALPHA", cat: "Edición limitada", hue: 210, sat: 12 }
];

function TiendaScreen() {
  const ctx = pgC(AppCtx);
  return (
    <div className="browse tienda">
      <div className="browse-head">
        <h1 className="browse-title">Tienda</h1>
        <span className="browse-sub">Objetos, mobiliario y piezas de autor diseñadas por ARKHAM.</span>
      </div>

      <div className="tienda-banner">
        <div className="tienda-banner-tex" />
        <div className="tienda-banner-inner">
          <div className="hero-kicker">Próximamente</div>
          <h2 className="tienda-banner-title">La tienda ARKHAM está por abrir</h2>
          <p>Estamos terminando la primera colección. Suscríbete y serás de los primeros en conocerla.</p>
          <button className="btn btn-play" onClick={() => ctx.openRegister("newsletter")}><Icon.Mail s={18} /> Avísame del lanzamiento</button>
        </div>
      </div>

      <div className="tienda-grid">
        {STORE_ITEMS.map((it) => (
          <div className="tienda-card" key={it.id}>
            <div className="tienda-poster">
              <div className="tienda-poster-bg" style={{ background: `linear-gradient(150deg, hsl(${it.hue} ${it.sat}% 16%), hsl(${it.hue} ${Math.max(it.sat-6,4)}% 6%))` }} />
              <div className="poster-tex" />
              <div className="vs-ph-tag">foto de producto</div>
              <span className="tienda-soon">Próximamente</span>
            </div>
            <div className="tienda-foot">
              <div className="tienda-name">{it.name}</div>
              <div className="tienda-cat">{it.cat}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { RegisterScreen, PremiosScreen, TiendaScreen });