/* global React, Icon, Eyebrow, Flourish, Button, Section, Reveal, Tag, ClientLogos */
const { useState: useTallState } = React;

const scrollToId = (id) => {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 112, behavior: "smooth" });
};

function TallHero({ go }) {
  return (
    <section style={{ background: "var(--mp-ink)", color: "var(--mp-paper)", padding: "150px 28px 96px", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: "-15%", right: "6%", width: 560, height: 560, borderRadius: 999, background: "radial-gradient(circle, rgba(129,241,200,0.30), transparent 62%)", filter: "blur(30px)" }} />
      <div style={{ maxWidth: 1240, margin: "0 auto", position: "relative", maxWidth: 900 }}>
        <Reveal>
          <Eyebrow onDark style={{ marginBottom: 24 }}>Para empresas y equipos</Eyebrow>
          <h1 style={{ fontSize: "clamp(40px, 5.4vw, 82px)", fontWeight: 800, lineHeight: 1.0, letterSpacing: "-0.035em", margin: "0 0 22px", textWrap: "balance" }}>
            Llevamos el conocimiento <span style={{ fontStyle: "italic", color: "var(--mp-mint)" }}>donde está tu equipo.</span>
          </h1>
          <p style={{ fontSize: "clamp(17px, 1.5vw, 22px)", lineHeight: 1.55, color: "rgba(255,255,255,0.76)", maxWidth: 640, margin: "0 0 36px", textWrap: "pretty" }}>
            Conferencias, talleres presenciales y programas de formación corporativa diseñados a tu medida.
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 14 }}>
            <Button variant="mint" size="lg" icon="arrowRight" onClick={() => scrollToId("propuesta")}>Solicitar propuesta</Button>
            <Button variant="outlineWhite" size="lg" onClick={() => scrollToId("especialidades")}>Ver especialidades</Button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Formats() {
  const fmts = [
    { icon: "mic", t: "Conferencia magistral", meta: "1–2h · hasta 200 personas", d: "Una charla potente que enciende a toda tu organización con ideas accionables.", ideal: "Kick-offs, convenciones, eventos anuales" },
    { icon: "zap", t: "Taller intensivo", meta: "4–8h · grupos de 15–30", d: "Manos a la obra. Tu equipo sale con entregables construidos en la sesión.", ideal: "Equipos que necesitan aplicar ya" },
    { icon: "layers", t: "Programa corporativo", meta: "8–12 semanas · equipo completo", d: "Una transformación sostenida con acompañamiento, medición y seguimiento.", ideal: "Cambios de capacidad a largo plazo" },
  ];
  return (
    <Section bg="cloud" pad="96px 28px">
      <Reveal style={{ marginBottom: 48, maxWidth: 680 }}>
        <Eyebrow style={{ marginBottom: 18 }}>Formatos</Eyebrow>
        <h2 style={{ fontSize: "clamp(30px, 3.8vw, 52px)", fontWeight: 700, lineHeight: 1.06, letterSpacing: "-0.03em", margin: 0, textWrap: "balance" }}>
          <Flourish text="Tres formas de [activar] a tu equipo." />
        </h2>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }} className="mp-3grid">
        {fmts.map((f, i) => (
          <Reveal key={f.t} delay={i * 90}>
            <article onClick={() => scrollToId("propuesta")}
              style={{ height: "100%", background: "var(--mp-paper)", borderRadius: "var(--mp-radius-xl)", padding: 32, border: "1px solid var(--mp-border)", boxShadow: "var(--mp-shadow-sm)", display: "flex", flexDirection: "column", gap: 16, cursor: "pointer" }}>
              <div style={{ width: 58, height: 58, borderRadius: 18, background: "var(--mp-ink)", color: "var(--mp-mint)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name={f.icon} size={28} /></div>
              <div>
                <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", margin: "0 0 4px" }}>{f.t}</h3>
                <div style={{ fontSize: 12.5, color: "var(--mp-mint-deep)", fontWeight: 700, letterSpacing: "0.02em" }}>{f.meta}</div>
              </div>
              <p style={{ fontSize: 15, color: "var(--mp-fg-muted)", lineHeight: 1.55, margin: 0, flex: 1, textWrap: "pretty" }}>{f.d}</p>
              <div style={{ fontSize: 13, color: "var(--mp-fg-subtle)", borderTop: "1px solid var(--mp-border)", paddingTop: 14 }}>
                <span style={{ fontWeight: 700, color: "var(--mp-ink)" }}>Ideal para:</span> {f.ideal}
              </div>
              <button type="button" onClick={(ev) => { ev.stopPropagation(); scrollToId("propuesta"); }}
                style={{ alignSelf: "flex-start", display: "inline-flex", alignItems: "center", gap: 7, color: "var(--mp-ink)", fontWeight: 700, fontSize: 14, background: "transparent", border: 0, padding: 0, cursor: "pointer", fontFamily: "var(--mp-font-sans)" }}>
                Cotizar <Icon name="arrowRight" size={16} />
              </button>
            </article>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function Specialties() {
  const specs = [
    { icon: "chart", t: "Marketing Digital", d: "Estrategia, performance y analítica que mueve la aguja del negocio." },
    { icon: "sparkles", t: "IA Aplicada al negocio", d: "Herramientas de IA integradas en el día a día de tu operación." },
    { icon: "trendingUp", t: "Ventas Estratégicas", d: "Procesos y metodologías de cierre para equipos comerciales." },
    { icon: "briefcase", t: "Marca Corporativa", d: "Posicionamiento, voz y narrativa que diferencian a tu empresa." },
    { icon: "leaf", t: "Sostenibilidad ESG", d: "Estrategia ambiental y certificaciones para empresas responsables." },
    { icon: "workflow", t: "Sistematización y Automatización", d: "Flujos inteligentes que liberan a tu equipo del trabajo repetitivo." },
  ];
  return (
    <Section bg="paper" pad="96px 28px" id="especialidades">
      <Reveal style={{ marginBottom: 48, maxWidth: 680 }}>
        <Eyebrow style={{ marginBottom: 18 }}>Especialidades</Eyebrow>
        <h2 style={{ fontSize: "clamp(30px, 3.8vw, 52px)", fontWeight: 700, lineHeight: 1.06, letterSpacing: "-0.03em", margin: 0, textWrap: "balance" }}>
          Seis campos. Un mismo <span style={{ fontStyle: "italic", color: "var(--mp-mint-deep)" }}>estándar.</span>
        </h2>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }} className="mp-3grid">
        {specs.map((s, i) => (
          <Reveal key={s.t} delay={(i % 3) * 80}>
            <article style={{ height: "100%", background: "var(--mp-cloud)", borderRadius: "var(--mp-radius-lg)", padding: 28, display: "flex", flexDirection: "column", gap: 14 }}>
              <div style={{ width: 50, height: 50, borderRadius: 15, background: "var(--mp-paper)", color: "var(--mp-mint-deep)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "var(--mp-shadow-xs)" }}><Icon name={s.icon} size={25} /></div>
              <h3 style={{ fontSize: 19, fontWeight: 700, letterSpacing: "-0.015em", margin: 0 }}>{s.t}</h3>
              <p style={{ fontSize: 14.5, color: "var(--mp-fg-muted)", lineHeight: 1.55, margin: 0, textWrap: "pretty" }}>{s.d}</p>
            </article>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function WhyCompanies() {
  const bullets = [
    ["Expertos activos en la industria", "No académicos: profesionales que siguen ejerciendo lo que enseñan."],
    ["Metodología práctica", "Cada sesión termina con algo que tu equipo puede aplicar de inmediato."],
    ["Formatos flexibles", "Presencial, virtual o híbrido. Nos adaptamos a tu realidad."],
    ["Medición de resultados", "Indicadores claros antes, durante y después del programa."],
  ];
  return (
    <Section bg="ink" pad="96px 28px">
      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 0.8fr", gap: 48, alignItems: "center" }} className="mp-2col">
        <div>
          <Reveal>
            <Eyebrow onDark style={{ marginBottom: 18 }}>Por qué nosotros</Eyebrow>
            <h2 style={{ fontSize: "clamp(28px, 3.4vw, 46px)", fontWeight: 700, lineHeight: 1.08, letterSpacing: "-0.03em", margin: "0 0 36px", textWrap: "balance" }}>
              Lo que tu equipo aprende, <span style={{ fontStyle: "italic", color: "var(--mp-mint)" }}>lo usa.</span>
            </h2>
          </Reveal>
          <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            {bullets.map(([h, d], i) => (
              <Reveal key={h} delay={i * 70} style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                <span style={{ width: 30, height: 30, borderRadius: 999, background: "var(--mp-mint)", color: "var(--mp-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "0 0 auto", marginTop: 2 }}><Icon name="check" size={17} stroke={2.6} /></span>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 17.5, marginBottom: 4 }}>{h}</div>
                  <div style={{ fontSize: 14.5, color: "rgba(255,255,255,0.66)", lineHeight: 1.55 }}>{d}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
        <Reveal delay={120}>
          <div style={{ background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.12)", borderRadius: "var(--mp-radius-xl)", padding: 36, backdropFilter: "blur(18px) saturate(140%)", boxShadow: "inset 0 1px 0 rgba(255,255,255,0.1)" }}>
            {[["+50", "talleres realizados"], ["5", "industrias"], ["98%", "satisfacción"]].map(([k, v], i) => (
              <div key={v} style={{ padding: "18px 0", borderTop: i ? "1px solid rgba(255,255,255,0.1)" : "none", display: "flex", alignItems: "baseline", gap: 16 }}>
                <div style={{ fontSize: "clamp(40px, 5vw, 58px)", fontWeight: 800, color: "var(--mp-mint)", letterSpacing: "-0.03em", lineHeight: 1 }}>{k}</div>
                <div style={{ fontSize: 15, color: "rgba(255,255,255,0.72)", fontWeight: 500 }}>{v}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

function ContactForm() {
  const [sent, setSent] = useTallState(false);
  const [form, setForm] = useTallState({ nombre: "", email: "", telefono: "", servicio: "", personas: "", mensaje: "" });
  const upd = (k) => (ev) => setForm((f) => ({ ...f, [k]: ev.target.value }));
  const inp = { width: "100%", padding: "14px 16px", fontSize: 15, border: "1.5px solid var(--mp-border-strong)", borderRadius: "var(--mp-radius-md)", fontFamily: "var(--mp-font-sans)", background: "var(--mp-paper)", outline: "none", color: "var(--mp-ink)" };
  const lab = { fontSize: 12.5, fontWeight: 700, color: "var(--mp-ink)", marginBottom: 7, display: "block" };
  return (
    <Section bg="cloud" pad="96px 28px" id="propuesta">
      <div style={{ maxWidth: 640, margin: "0 auto" }}>
        <Reveal style={{ textAlign: "center", marginBottom: 36 }}>
          <Eyebrow style={{ marginBottom: 16, justifyContent: "center" }}>Hablemos</Eyebrow>
          <h2 style={{ fontSize: "clamp(28px, 3.6vw, 46px)", fontWeight: 700, letterSpacing: "-0.03em", margin: 0, lineHeight: 1.08, textWrap: "balance" }}>
            {sent
              ? <>Gracias por <span style={{ fontStyle: "italic", color: "var(--mp-mint-deep)" }}>escribirnos.</span></>
              : <>Cuéntanos sobre tu <span style={{ fontStyle: "italic", color: "var(--mp-mint-deep)" }}>proyecto.</span></>}
          </h2>
        </Reveal>
        <Reveal delay={100}>
          {sent ? (
            <div style={{ background: "var(--mp-paper)", borderRadius: "var(--mp-radius-xl)", padding: "48px 40px", boxShadow: "var(--mp-shadow-md)", border: "1px solid var(--mp-border)", textAlign: "center" }}>
              <div style={{ width: 64, height: 64, borderRadius: 999, background: "var(--mp-mint)", color: "var(--mp-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 24 }}>
                <Icon name="check" size={30} stroke={2.6} />
              </div>
              <h3 style={{ fontSize: 24, fontWeight: 800, letterSpacing: "-0.02em", margin: "0 0 12px" }}>
                ¡Gracias{form.nombre.trim() ? `, ${form.nombre.trim().split(" ")[0]}` : ""}!
              </h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--mp-fg-muted)", margin: "0 0 8px", textWrap: "pretty" }}>
                Recibimos tu solicitud. Un miembro del equipo de MarketProof te contactará
                {form.email.trim() ? <> en <strong style={{ color: "var(--mp-ink)" }}>{form.email.trim()}</strong></> : null} en menos de 24 horas.
              </p>
              <p style={{ fontSize: 14.5, color: "var(--mp-fg-subtle)", margin: "18px 0 24px" }}>
                ¿Es urgente? Escríbenos por WhatsApp y lo vemos hoy mismo.
              </p>
              <Button variant="outlineInk" icon="arrowRight" onClick={() => { setSent(false); setForm({ nombre: "", email: "", telefono: "", servicio: "", personas: "", mensaje: "" }); }}>
                Enviar otra solicitud
              </Button>
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ background: "var(--mp-paper)", borderRadius: "var(--mp-radius-xl)", padding: "36px 34px", boxShadow: "var(--mp-shadow-md)", border: "1px solid var(--mp-border)", display: "flex", flexDirection: "column", gap: 18 }}>
              <div><label style={lab}>Nombre y empresa</label><input style={inp} placeholder="Tu nombre · Empresa" required value={form.nombre} onChange={upd("nombre")} /></div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="mp-2col">
                <div><label style={lab}>Email</label><input type="email" style={inp} placeholder="tu@empresa.com" required value={form.email} onChange={upd("email")} /></div>
                <div><label style={lab}>Teléfono</label><input style={inp} placeholder="+502 0000 0000" value={form.telefono} onChange={upd("telefono")} /></div>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="mp-2col">
                <div><label style={lab}>¿Qué servicio buscas?</label>
                  <select style={inp} value={form.servicio} onChange={upd("servicio")}><option value="" disabled>Selecciona…</option><option>Conferencia magistral</option><option>Taller intensivo</option><option>Programa corporativo</option><option>No estoy seguro</option></select>
                </div>
                <div><label style={lab}>¿Cuántas personas?</label>
                  <select style={inp} value={form.personas} onChange={upd("personas")}><option value="" disabled>Selecciona…</option><option>10–20</option><option>20–50</option><option>50–100</option><option>+100</option></select>
                </div>
              </div>
              <div><label style={lab}>Cuéntanos más</label><textarea style={{ ...inp, minHeight: 110, resize: "vertical" }} placeholder="Objetivos, fechas tentativas, contexto del equipo…" value={form.mensaje} onChange={upd("mensaje")}></textarea></div>
              <Button type="submit" variant="mint" full size="lg" icon="arrowRight">Enviar solicitud</Button>
              <div style={{ textAlign: "center", fontSize: 12.5, color: "var(--mp-fg-subtle)", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8 }}>
                <Icon name="clock" size={14} /> Respondemos en menos de 24 horas
              </div>
            </form>
          )}
        </Reveal>
      </div>
    </Section>
  );
}

function Talleres({ go }) {
  return (
    <main>
      <TallHero go={go} />
      <Formats />
      <Specialties />
      <WhyCompanies />
      <ContactForm />
      <ClientLogos />
    </main>
  );
}

window.Talleres = Talleres;