// Quiz: ¿qué trámite necesitás?

const QUIZ_FLOW = {
  start: {
    title: "¿Qué tipo de actividad tenés?",
    subtitle: "Te guiamos en menos de un minuto.",
    options: [
      { label: "Comercio o local", icon: "comercio", next: "comercio" },
      { label: "Industria o fábrica", icon: "industria", next: "industria" },
      { label: "Empresa de servicios", icon: "equipo", next: "servicios" },
      { label: "Generación de residuos", icon: "reciclaje", next: "residuos_q" },
    ],
  },
  comercio: {
    title: "¿Tu local ya está habilitado?",
    options: [
      { label: "Todavía no, recién abrimos", next: "result_hab" },
      { label: "Sí, pero vence o cambió algo", next: "result_hab_renew" },
    ],
  },
  industria: {
    title: "¿Cuál es la prioridad ahora?",
    options: [
      { label: "Estudio de Impacto Ambiental", next: "result_amb" },
      { label: "Plan de Higiene y Seguridad", next: "result_hys" },
      { label: "Inspección o auditoría próxima", next: "result_audit" },
      { label: "Habilitación industrial", next: "result_hab" },
    ],
  },
  servicios: {
    title: "¿Qué necesitás resolver?",
    options: [
      { label: "Habilitación municipal", next: "result_hab" },
      { label: "Higiene y seguridad laboral", next: "result_hys" },
      { label: "Auditoría mensual / cumplimiento", next: "result_audit" },
    ],
  },
  residuos_q: {
    title: "¿De qué tipo de residuos hablamos?",
    options: [
      { label: "Residuos sólidos urbanos (gran generador)", next: "result_residuos" },
      { label: "Residuos peligrosos", next: "result_residuos" },
      { label: "Residuos patógenos", next: "result_residuos" },
      { label: "No estoy seguro/a", next: "result_residuos" },
    ],
  },
  result_hab: {
    result: true,
    title: "Habilitación comercial / industrial",
    desc: "Definición de riesgo, relevamiento, gestión municipal y provincial hasta el certificado final.",
    items: ["Definición de Riesgo y requisitos", "Apto Eléctrico", "Informe de Higiene y Seguridad", "Certificado de Bomberos", "Gestión completa hasta la habilitación"],
  },
  result_hab_renew: {
    result: true,
    title: "Renovación o modificación de habilitación",
    desc: "Si tu habilitación venció, cambió la actividad o sumaste superficie, revisamos y gestionamos los ajustes.",
    items: ["Auditoría del estado actual", "Ajuste de documentación", "Gestión municipal", "Nuevo certificado"],
  },
  result_certs: {
    result: true,
    title: "Certificados específicos",
    desc: "Apto Eléctrico, informe de Higiene y Seguridad, Bomberos. Coordinamos profesionales matriculados y los trámites.",
    items: ["Apto Eléctrico", "Informe de Higiene y Seguridad", "Certificado de Bomberos", "Mediciones laborales"],
  },
  result_amb: {
    result: true,
    title: "Gestión ambiental integral",
    desc: "Cumplimiento ambiental con visitas mensuales, planes de gestión y certificaciones ISO.",
    items: ["Autorización Ambiental Municipal", "Estudios de Impacto Ambiental", "Planes de Gestión Ambiental", "ISO 14001/15", "Capacitaciones"],
  },
  result_hys: {
    result: true,
    title: "Higiene y seguridad laboral",
    desc: "Servicio mensual de asesoramiento y representación frente a ART, Min. de Trabajo y SRT.",
    items: ["Relevamiento de agentes de riesgo", "Asesoramiento mensual", "Mediciones laborales", "Capacitaciones", "Programas de seguridad"],
  },
  result_audit: {
    result: true,
    title: "Auditorías y acompañamiento mensual",
    desc: "Verificación sistemática, periódica y documentada del cumplimiento de tus planes de gestión.",
    items: ["Visitas mensuales a tu establecimiento", "Informes técnicos", "Representación frente a organismos", "Plan de mejora continua"],
  },
  result_residuos: {
    result: true,
    title: "Gran generador de residuos",
    desc: "Plan de gestión, capacitaciones y tramitación del Certificado ante el IPAA.",
    items: ["Relevamiento del establecimiento", "Plan de gestión de residuos", "Implementación", "Capacitaciones", "Certificado IPAA"],
  },
};

const Quiz = () => {
  const [step, setStep] = React.useState("start");
  const [path, setPath] = React.useState([]);

  const node = QUIZ_FLOW[step];
  const total = 3;
  const idx = path.length;

  const reset = () => { setStep("start"); setPath([]); };

  const goTo = (next) => { setPath([...path, step]); setStep(next); };

  return (
    <section id="quiz" style={{ padding: "100px 0", background: "var(--ink)", color: "white", position: "relative", overflow: "hidden" }}>
      {/* deco */}
      <div style={{ position: "absolute", top: 60, right: -80, width: 280, height: 280, opacity: .12 }} aria-hidden="true">
        <Icon name="brote" color="#40C1AC" size={280}/>
      </div>
      <div style={{ position: "absolute", bottom: -60, left: -60, width: 200, height: 200, opacity: .08 }} aria-hidden="true">
        <Icon name="isotipo" color="#D4EB8E" size={200}/>
      </div>

      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 60, alignItems: "center" }} className="quiz-grid">
          <div>
            <div className="eyebrow reveal" style={{ color: "var(--green-mint)", marginBottom: 14 }}>Mini-asesoramiento</div>
            <h2 className="reveal" style={{ fontSize: "clamp(34px, 4vw, 56px)", marginBottom: 18, color: "white" }}>
              ¿No sabés qué<br/>trámite necesitás?
            </h2>
            <p className="reveal" style={{ fontSize: 18, color: "rgba(255,255,255,.75)", maxWidth: 420, marginBottom: 24 }}>
              Respondé 2 o 3 preguntas y te decimos exactamente cómo te podemos ayudar.
              Sin compromiso, sin letra chica.
            </p>
            <div style={{ display: "flex", gap: 10, alignItems: "center", color: "rgba(255,255,255,.6)", fontSize: 14 }}>
              <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: 999, background: "var(--green-mint)" }}></span>
              Privado · No guardamos datos hasta que lo decidas
            </div>
          </div>

          <div style={{
            background: "white", color: "var(--ink)", borderRadius: 28,
            padding: "40px 36px", boxShadow: "0 30px 80px rgba(0,0,0,.4)",
            position: "relative", overflow: "hidden"
          }}>
            {/* progress */}
            {!node.result && (
              <div style={{ display: "flex", gap: 6, marginBottom: 28 }}>
                {[0,1,2].map(i => (
                  <div key={i} style={{
                    flex: 1, height: 5, borderRadius: 999,
                    background: i <= idx ? "var(--green-primary)" : "rgba(14,42,36,.08)",
                    transition: "background .4s"
                  }}/>
                ))}
              </div>
            )}

            {!node.result ? (
              <div key={step} style={{ animation: "fadeIn .4s ease" }}>
                <h3 style={{ fontSize: 26, marginBottom: 6 }}>{node.title}</h3>
                {node.subtitle && <p style={{ color: "var(--ink-soft)", marginTop: 0, marginBottom: 22 }}>{node.subtitle}</p>}
                <div style={{ display: "grid", gap: 10 }}>
                  {node.options.map((opt, i) => (
                    <button key={i} onClick={() => goTo(opt.next)} style={{
                      display: "flex", alignItems: "center", justifyContent: "space-between",
                      padding: "16px 18px", borderRadius: 14,
                      border: "1.5px solid rgba(14,42,36,.1)", background: "white",
                      textAlign: "left", fontSize: 16, fontWeight: 500,
                      transition: "all .2s"
                    }}
                      onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--green-primary)"; e.currentTarget.style.background = "#F4FBF7"; }}
                      onMouseLeave={e => { e.currentTarget.style.borderColor = "rgba(14,42,36,.1)"; e.currentTarget.style.background = "white"; }}>
                      <span style={{ display: "flex", alignItems: "center", gap: 14 }}>
                        {opt.icon && (
                          <span style={{ width: 36, height: 36, borderRadius: 10, background: "rgba(0,151,117,.08)",
                            display: "flex", alignItems: "center", justifyContent: "center" }}>
                            <Icon name={opt.icon} color="var(--green-primary)" size={22}/>
                          </span>
                        )}
                        {opt.label}
                      </span>
                      <IconArrow size={16} color="var(--green-primary)"/>
                    </button>
                  ))}
                </div>
                {path.length > 0 && (
                  <button onClick={() => { const prev = path[path.length-1]; setStep(prev); setPath(path.slice(0,-1)); }}
                    style={{ marginTop: 18, background: "transparent", color: "var(--ink-soft)", fontSize: 14, fontWeight: 500 }}>
                    ← Volver
                  </button>
                )}
              </div>
            ) : (
              <div key={step} style={{ animation: "fadeIn .5s ease" }}>
                <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 12px",
                  background: "rgba(0,151,117,.1)", color: "var(--green-primary)", borderRadius: 999,
                  fontSize: 12, fontWeight: 600, marginBottom: 16 }}>
                  <IconCheck size={14}/> Recomendado para vos
                </div>
                <h3 style={{ fontSize: 26, marginBottom: 10 }}>{node.title}</h3>
                <p style={{ color: "var(--ink-soft)", marginBottom: 18 }}>{node.desc}</p>
                <div style={{ background: "#F4FBF7", padding: "16px 18px", borderRadius: 14, marginBottom: 22 }}>
                  <div style={{ fontSize: 12, fontWeight: 600, color: "var(--green-primary)", marginBottom: 8, letterSpacing: ".1em" }}>INCLUYE</div>
                  {node.items.map((it, i) => (
                    <div key={i} style={{ display: "flex", gap: 8, alignItems: "flex-start", marginBottom: 6, fontSize: 14 }}>
                      <IconCheck size={16}/> <span>{it}</span>
                    </div>
                  ))}
                </div>
                <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                  <a href={`https://walink.co/a546fc`} target="_blank" className="btn btn-primary" style={{ fontSize: 15 }}>
                    <IconWhatsapp size={18}/> Hablar con un experto
                  </a>
                  <button onClick={reset} className="btn btn-ghost" style={{ fontSize: 15 }}>
                    Empezar de nuevo
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
      <style>{`
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        @media (max-width: 900px) { .quiz-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

Object.assign(window, { Quiz });