Validaciones mandatorias — Sección 8 — IDs concretos

components/consent-screen.tsx

@@ -0,0 +1,109 @@
+'use client'
+import { useState } from 'react'
+import type { BrandConfig } from '@/lib/types'
+
+interface ConsentScreenProps {
+  brandConfig: BrandConfig | null
+  onAccept: (consentOperativo: boolean, consentMacroN1: boolean) => void
+}
+
+export function ConsentScreen({ brandConfig, onAccept }: ConsentScreenProps) {
+  const [operativo, setOperativo] = useState(false)
+  const [macroN1, setMacroN1] = useState(false)
+
+  const orgName = brandConfig?.org_name ?? 'tu empresa'
+
+  return (
+    <div className="consent-container" role="main">
+      <h1 className="consent-title">Antes de comenzar</h1>
+
+      <section className="consent-section" aria-labelledby="consent-intro-heading">
+        <h2 id="consent-intro-heading" className="consent-section-title">
+          ¿Qué vamos a hacer con tus respuestas?
+        </h2>
+        <p>
+          Esta encuesta tiene dos propósitos que podés autorizar por separado:
+        </p>
+        <ol className="consent-list">
+          <li>
+            <strong>Diagnóstico interno de {orgName}:</strong> tus respuestas ayudan a la empresa
+            a entender la realidad de las personas que cuidan a familiares con discapacidad o adultos
+            mayores, para diseñar apoyos más adecuados. Solo se trabaja con{' '}
+            <strong>datos agregados</strong> — nunca accede a respuestas individuales.
+          </li>
+          <li>
+            <strong>Estudio país (opcional):</strong> tus respuestas anonimizadas contribuyen a un
+            mapeo nacional sobre la economía del cuidado en Paraguay. Los datos se procesan de
+            forma irreversiblemente desvinculada de cualquier empresa o persona.
+          </li>
+        </ol>
+      </section>
+
+      {/* Párrafo OBLIGATORIO: anonimato y no-revocación (ADR-003) */}
+      <section className="consent-anon-box" role="note" aria-label="Sobre el anonimato">
+        <p>
+          <strong>Esta encuesta es completamente anónima.</strong> No guardamos ningún dato que
+          te identifique (nombre, número de documento, correo ni ningún otro identificador personal).
+          Por ser anónima, <strong>no es posible revocar ni eliminar tu respuesta una vez enviada</strong>,
+          ya que no habría forma de encontrarla entre las demás.
+        </p>
+      </section>
+
+      <section className="consent-checkboxes" aria-labelledby="consent-choices-heading">
+        <h2 id="consent-choices-heading" className="consent-section-title">
+          Tus decisiones
+        </h2>
+
+        {/* Checkbox 1: operativo — REQUERIDO */}
+        <label className="consent-checkbox-label" htmlFor="consent-operativo">
+          <input
+            type="checkbox"
+            id="consent-operativo"
+            checked={operativo}
+            onChange={(e) => setOperativo(e.target.checked)}
+            aria-required="true"
+            className="consent-checkbox-input"
+          />
+          <span className="consent-checkbox-text">
+            <strong>Acepto</strong> que mis respuestas se usen para el diagnóstico interno de{' '}
+            {orgName} sobre cuidado y discapacidad.{' '}
+            <span className="consent-required-badge">Requerido para continuar</span>
+          </span>
+        </label>
+
+        {/* Checkbox 2: macro_n1 — OPCIONAL */}
+        <label className="consent-checkbox-label" htmlFor="consent-macro">
+          <input
+            type="checkbox"
+            id="consent-macro"
+            checked={macroN1}
+            onChange={(e) => setMacroN1(e.target.checked)}
+            className="consent-checkbox-input"
+          />
+          <span className="consent-checkbox-text">
+            <strong>También acepto</strong> que mis respuestas anonimizadas contribuyan al estudio
+            país sobre economía del cuidado (sin identificarme en ningún caso).{' '}
+            <span className="consent-optional-badge">Opcional</span>
+          </span>
+        </label>
+      </section>
+
+      <div className="consent-footer">
+        <button
+          type="button"
+          disabled={!operativo}
+          onClick={() => onAccept(operativo, macroN1)}
+          className={`btn ${operativo ? 'btn-primary' : 'btn-primary btn-disabled'}`}
+          aria-disabled={!operativo}
+        >
+          Comenzar la encuesta
+        </button>
+        {!operativo && (
+          <p className="consent-required-hint" role="status" aria-live="polite">
+            Necesitás marcar el primer checkbox para continuar.
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}