// WHOLESALE — Artesanías Chepe — formulario de cotización

const Wholesale = ({ onNav }) => {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({
    name: "", company: "", email: "", phone: "",
    type: "Hotel / Restaurante", volume: "25 – 50 piezas",
    interest: [], message: "", date: "",
  });
  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const toggleInterest = (i) => setForm(f => ({
    ...f, interest: f.interest.includes(i) ? f.interest.filter(x => x !== i) : [...f.interest, i],
  }));

  if (sent) {
    return (
      <div className="page" data-screen-label="06 Mayoreo · enviado">
        <div style={{ padding: "40px 24px 0", textAlign: "center" }}>
          <div style={{ width: 80, height: 80, borderRadius: 999, background: "var(--clay)", color: "var(--bone)", display: "grid", placeItems: "center", margin: "0 auto", animation: "popIn .5s cubic-bezier(.2,1.4,.4,1)" }}>
            <Icon name="check" size={36} stroke={2} />
          </div>
          <style>{`@keyframes popIn { from { transform: scale(.4); opacity:0;} to { transform: scale(1); opacity:1;} }`}</style>
          <h1 className="display" style={{ fontSize: 44, margin: "26px 0 12px" }}>
            Recibimos <span className="italic" style={{ color: "var(--clay)" }}>tu solicitud</span>.
          </h1>
          <p style={{ color: "var(--ink-80)", fontSize: 15, lineHeight: 1.55, maxWidth: 340, margin: "0 auto" }}>
            Te respondemos en menos de 24 h hábiles con un catálogo de mayoreo y una primera propuesta.
          </p>
          <button className="btn btn-primary" style={{ marginTop: 26 }} onClick={() => onNav("home")}>
            Volver al inicio <Icon name="arrow" size={16} />
          </button>
        </div>
        <Footer onNav={onNav} />
      </div>
    );
  }

  return (
    <div className="page" data-screen-label="06 Mayoreo">
      <section style={{ padding: "20px 20px 0" }}>
        <div className="eyebrow">Para tu negocio</div>
        <h1 className="display" style={{ fontSize: "clamp(48px, 13vw, 80px)", margin: "10px 0 14px", lineHeight: 0.98 }}>
          <span className="italic" style={{ color: "var(--clay)" }}>Mayoreo</span> &<br />
          proyectos.
        </h1>
        <p style={{ color: "var(--ink-80)", fontSize: 16, lineHeight: 1.55, maxWidth: 380 }}>
          Catálogo con precios especiales desde <strong>25 piezas</strong>. Para tiendas, hoteles, restaurantes, decoradores y proyectos.
        </p>
      </section>

      {/* Beneficios */}
      <section className="container" style={{ paddingTop: 32 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          {[
            { i: "spark",  t: "Hasta -40%",      s: "Según volumen" },
            { i: "clock",  t: "Producción 6–8 sem.", s: "Tiempos claros" },
            { i: "shield", t: "Garantía extendida", s: "Estructura 5 años" },
            { i: "ship",   t: "Entrega nacional", s: "Tarima o paqueteo" },
          ].map((b, i) => (
            <div key={i} className="card hair" style={{ padding: 16, borderRadius: 14 }}>
              <Icon name={b.i} size={22} stroke={1.4} />
              <div style={{ fontSize: 14, fontWeight: 600, marginTop: 10 }}>{b.t}</div>
              <div className="mono" style={{ fontSize: 9, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-60)", marginTop: 4 }}>{b.s}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Formulario */}
      <section className="container" style={{ paddingTop: 48 }}>
        <SectionHead eyebrow="Solicita catálogo" title="Cuéntanos del proyecto" />
        <div className="stack-4">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
            <div className="field"><label>Nombre</label>
              <input value={form.name} onChange={e => upd("name", e.target.value)} placeholder="Mariana V." />
            </div>
            <div className="field"><label>Empresa</label>
              <input value={form.company} onChange={e => upd("company", e.target.value)} placeholder="Hotel Ixchel" />
            </div>
          </div>
          <div className="field"><label>Correo</label>
            <input type="email" value={form.email} onChange={e => upd("email", e.target.value)} placeholder="tu@correo.mx" />
          </div>
          <div className="field"><label>WhatsApp</label>
            <input value={form.phone} onChange={e => upd("phone", e.target.value)} placeholder="999 123 4567" />
          </div>
          <div className="field"><label>Tipo de negocio</label>
            <select value={form.type} onChange={e => upd("type", e.target.value)}>
              <option>Hotel / Restaurante</option>
              <option>Tienda / Retail</option>
              <option>Decorador / Arquitecto</option>
              <option>Casa / Residencia</option>
              <option>Otro</option>
            </select>
          </div>
          <div className="field"><label>Volumen estimado</label>
            <select value={form.volume} onChange={e => upd("volume", e.target.value)}>
              <option>25 – 50 piezas</option>
              <option>50 – 100 piezas</option>
              <option>100 – 300 piezas</option>
              <option>+ 300 piezas</option>
            </select>
          </div>

          <div>
            <div className="eyebrow" style={{ marginBottom: 10 }}>Categorías de interés</div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {window.CATEGORIES.map(c => (
                <button key={c.id}
                  onClick={() => toggleInterest(c.name)}
                  className={"chip " + (form.interest.includes(c.name) ? "is-active" : "")}>
                  {c.name}
                </button>
              ))}
            </div>
          </div>

          <div className="field"><label>Fecha objetivo (opcional)</label>
            <input value={form.date} onChange={e => upd("date", e.target.value)} placeholder="Septiembre 2026" />
          </div>

          <div className="field"><label>Cuéntanos</label>
            <textarea rows={4} value={form.message} onChange={e => upd("message", e.target.value)}
              placeholder="Espacio, paleta, referencias visuales, presupuesto aproximado..." />
          </div>

          <button className="btn btn-primary btn-block" style={{ height: 54 }} onClick={() => setSent(true)}>
            Enviar solicitud <Icon name="arrow" size={16} />
          </button>
          <p className="mono" style={{ fontSize: 10, letterSpacing: "0.1em", color: "var(--ink-60)", textAlign: "center" }}>
            Responde un asesor real en menos de 24h hábiles.
          </p>
        </div>
      </section>

      <Footer onNav={onNav} />
    </div>
  );
};

window.Wholesale = Wholesale;