"use client";

import { useEffect, useState } from "react";

type ClaimCategory = "metafisica" | "prediccion" | "ciencia" | "psicologia";

const claims: Array<{
  category: ClaimCategory;
  index: string;
  title: string;
  statement: string;
  reading: string;
  label: string;
  source: string;
}> = [
  {
    category: "metafisica",
    index: "A-01",
    title: "Tres seres hablan a través de él",
    statement: "Ayala se presenta como canalizador consciente de tres entidades de otro plano.",
    reading: "Es una afirmación central y pública, pero no existe una prueba independiente que permita separar entidad externa, experiencia subjetiva y performance.",
    label: "Afirmado · no verificable",
    source: "https://www.youtube.com/@victorayalaylostresguias",
  },
  {
    category: "prediccion",
    index: "A-02",
    title: "2025–2027: tres años de luz",
    statement: "El discurso anuncia una transición extraordinaria concentrada en ese periodo.",
    reading: "Una predicción sólo rinde cuentas si fija criterios previos y medibles. Sin ellos, cualquier terremoto, aurora o telediario con cafeína puede cobrarse como acierto.",
    label: "Afirmado · ventana abierta",
    source: "https://www.youtube.com/watch?v=D9Kbe6FsqFg",
  },
  {
    category: "ciencia",
    index: "A-03",
    title: "Del carbono al silicio",
    statement: "En una entrevista se plantea una transición del cuerpo humano hacia una configuración de silicio.",
    reading: "La vida basada en silicio es una hipótesis astrobiológica muy restringida; no hay evidencia de una conversión próxima de la bioquímica humana. La tabla periódica no es un vestidor de Zara.",
    label: "Afirmado · sin respaldo biomédico",
    source: "https://pmc.ncbi.nlm.nih.gov/articles/PMC7345352/",
  },
  {
    category: "metafisica",
    index: "A-04",
    title: "La reencarnación terminó",
    statement: "Una aparición pública promociona la posibilidad de que ya no haya futuras encarnaciones.",
    reading: "La proposición es metafísica y no admite prueba empírica disponible. Sí admite una función narrativa: urgencia. Última vida, última llamada, favor de abordar.",
    label: "Afirmado · no falsable",
    source: "https://open.spotify.com/episode/49DNe0reuR25dgofErmI2t",
  },
  {
    category: "psicologia",
    index: "A-05",
    title: "El casco periférico",
    statement: "Un sistema de voces críticas o programas internos sería instalado para drenar energía y frenar la conciencia.",
    reading: "Sus ejercicios se parecen funcionalmente a técnicas conocidas: observar pensamientos, tomar distancia, reformular y practicar autocompasión. Parecido no prueba plagio; sí desmonta la exclusividad cósmica.",
    label: "Concepto propio · técnicas conocidas",
    source: "https://pubmed.ncbi.nlm.nih.gov/19716550/",
  },
];

const equivalences = [
  ["Perfeccionista", "Estándares inflexibles / hipercrítica", "Presión, ansiedad, dificultad para descansar"],
  ["Controlador", "Sobrecontrol e inhibición emocional", "Rigidez y miedo a perder el control"],
  ["Capataz", "Autoexigencia / adicción al trabajo", "Producción aun a costa del cuerpo"],
  ["Saboteador", "Esquema de fracaso / evitación", "Parálisis ante la posibilidad de fallar"],
  ["Destructor", "Autocrítica punitiva", "Vergüenza, desvalor y diálogo interno hostil"],
  ["Chantajista emocional", "Autosacrificio", "Culpa al priorizar necesidades propias"],
  ["Moldeador", "Subyugación / búsqueda de aprobación", "Identidad adaptada para evitar rechazo"],
];

const sources = [
  { n: "01", title: "Sitio y tienda oficial", note: "Eventos, talleres, cursos y precios observados al corte.", kind: "Fuente primaria", href: "https://www.victorayalaylostresguias.com/" },
  { n: "02", title: "Canal oficial en YouTube", note: "Autodescripción y archivo audiovisual del proyecto.", kind: "Fuente primaria", href: "https://www.youtube.com/@victorayalaylostresguias" },
  { n: "03", title: "Los Tres Guías — ficha bibliográfica", note: "ISBN, autoría, formato, precio y descripción editorial.", kind: "Registro comercial", href: "https://www.todostuslibros.com/libros/los-tres-guias_978-84-09-74613-2" },
  { n: "04", title: "Biografía artística de Víctor Ayala", note: "Trayectoria y exposiciones declaradas en su sitio de artista.", kind: "Autopublicado", href: "https://arteayala70.wixsite.com/victorayalar/about" },
  { n: "05", title: "Sistema de Información Cultural", note: "Registro gubernamental de Ayala en Artes Visuales, Colima.", kind: "Registro público", href: "https://sic.cultura.gob.mx/lista.php?estado_id=6&municipio_id=-1&table=estimulo_feca" },
  { n: "06", title: "Transición de tres años de luz", note: "Entrevista pública que incluye carbono/silicio y 2025–2027.", kind: "Declaración pública", href: "https://www.youtube.com/watch?v=D9Kbe6FsqFg" },
  { n: "07", title: "Víctor Ayala revela los próximos tres años", note: "Promoción pública de la tesis sobre reencarnación y tiempo.", kind: "Declaración pública", href: "https://open.spotify.com/episode/49DNe0reuR25dgofErmI2t" },
  { n: "08", title: "Silicon as a Building Block for Life", note: "Revisión científica sobre los límites de una bioquímica de silicio.", kind: "Revisión científica", href: "https://pmc.ncbi.nlm.nih.gov/articles/PMC7345352/" },
  { n: "09", title: "Cognitive defusion and negative thoughts", note: "Estudio experimental sobre distancia cognitiva y pensamientos autorreferenciales.", kind: "Investigación clínica", href: "https://pubmed.ncbi.nlm.nih.gov/19716550/" },
  { n: "10", title: "Schema Therapy — conceptos centrales", note: "Definiciones de estándares inflexibles, autosacrificio y otros esquemas.", kind: "Referencia profesional", href: "https://schematherapysociety.org/Schema-Therapy" },
  { n: "11", title: "Terapia cognitivo-conductual", note: "Descripción clínica del trabajo con patrones de pensamiento.", kind: "Referencia clínica", href: "https://www.mayoclinic.org/tests-procedures/cognitive-behavioral-therapy/about/pac-20384610" },
  { n: "12", title: "Increasing Self-Compassion", note: "Revisión de literatura e intervenciones de autocompasión.", kind: "Revisión científica", href: "https://pmc.ncbi.nlm.nih.gov/articles/PMC10653232/" },
  { n: "13", title: "Documento de trabajo recibido", note: "Informe base aportado para este dossier; no sustituye fuentes primarias.", kind: "Material editorial", href: "/media/documento-base-analisis-victor-ayala.pdf" },
];

const correctionTemplate = "RECTIFICACIÓN — DOSSIER 001\nAfirmación a corregir:\nDocumento o fuente primaria:\nCorrección propuesta:\nNombre y relación con el asunto:\nFecha:";

export default function Home() {
  const [menuOpen, setMenuOpen] = useState(false);
  const [progress, setProgress] = useState(0);
  const [claimFilter, setClaimFilter] = useState<"todas" | ClaimCategory>("todas");
  const [copied, setCopied] = useState(false);
  const [manualCopy, setManualCopy] = useState(false);

  const visibleClaims = claimFilter === "todas"
    ? claims
    : claims.filter((claim) => claim.category === claimFilter);

  const copyCorrectionTemplate = async () => {
    try {
      if (!navigator.clipboard?.writeText) throw new Error("Clipboard unavailable");
      await navigator.clipboard.writeText(correctionTemplate);
      setCopied(true);
      window.setTimeout(() => setCopied(false), 2200);
    } catch {
      setManualCopy(true);
    }
  };

  useEffect(() => {
    const updateProgress = () => {
      const scrollable = document.documentElement.scrollHeight - window.innerHeight;
      setProgress(scrollable > 0 ? (window.scrollY / scrollable) * 100 : 0);
    };
    updateProgress();
    window.addEventListener("scroll", updateProgress, { passive: true });
    return () => window.removeEventListener("scroll", updateProgress);
  }, []);

  return (
    <main>
      <div className="scroll-progress" style={{ width: `${progress}%` }} aria-hidden="true" />

      <header className="site-header">
        <a className="brand" href="#inicio" aria-label="Charlatain Shark, inicio">
          <img src="/media/charlatain-shark-icon.png" alt="" />
          <span className="brand-type">
            <b>CHARLATAIN</b>
            <small><i />SHARK<i /></small>
          </span>
        </a>

        <button
          className="menu-toggle"
          type="button"
          aria-expanded={menuOpen}
          aria-controls="main-nav"
          onClick={() => setMenuOpen((open) => !open)}
        >
          <span />
          <span />
          <span />
          <span className="sr-only">Abrir navegación</span>
        </button>

        <nav id="main-nav" className={menuOpen ? "main-nav is-open" : "main-nav"} aria-label="Navegación principal">
          <a href="#perfil" onClick={() => setMenuOpen(false)}>Perfil</a>
          <a href="#afirmaciones" onClick={() => setMenuOpen(false)}>Afirmaciones</a>
          <a href="#negocio" onClick={() => setMenuOpen(false)}>Negocio</a>
          <a href="#fuentes" onClick={() => setMenuOpen(false)}>Fuentes</a>
          <a href="#metodo" onClick={() => setMenuOpen(false)}>Método</a>
        </nav>

        <div className="open-badge"><span /> Abierto · v1.0</div>
      </header>

      <section className="hero" id="inicio">
        <div className="hero-grid" aria-hidden="true" />
        <div className="hero-copy">
          <p className="eyebrow"><span /> Dossier abierto 001</p>
          <h1>VÍCTOR<br />AYALA</h1>
          <p className="hero-deck">El vidente bajo la lupa</p>
          <p className="hero-intro">
            Afirma conversar con tres inteligencias de otro plano. Lo extraordinario
            exige algo más que buena dicción: exige evidencia. Abrimos el expediente.
          </p>
          <div className="hero-actions">
            <a className="button button-primary" href="#expediente">Entrar al dossier <span>↓</span></a>
            <a className="button button-secondary" href="#metodo">Ver metodología <span>↗</span></a>
          </div>
        </div>

        <figure className="hero-portrait">
          <img src="/media/victor-ayala-claroscuro.jpeg" alt="Retrato en blanco y negro de Víctor Ayala con iluminación dividida" />
          <div className="focus-corner corner-a" aria-hidden="true" />
          <div className="focus-corner corner-b" aria-hidden="true" />
          <div className="portrait-axis" aria-hidden="true" />
          <figcaption>
            <span>Evidencia visual 001</span>
            Retrato aportado al expediente
          </figcaption>
        </figure>

        <div className="side-index" aria-hidden="true">
          <span>Análisis en curso</span><i />
        </div>

        <div className="evidence-rail" aria-label="Estado del expediente">
          <div><span className="rail-dot" /><small>Estatus</small><b>Investigación abierta</b></div>
          <div><small>Corte editorial</small><b>16 · 07 · 2026</b></div>
          <div><small>Fuentes iniciales</small><b>13 indexadas</b></div>
          <div className="rail-legend"><span><i className="verified" />Documentado</span><span><i className="claim" />Afirmado</span><span><i className="analysis" />Análisis</span></div>
        </div>
      </section>

      <section className="opening" id="expediente">
        <p className="section-index">00 / APERTURA</p>
        <div>
          <p className="kicker">La pregunta incómoda</p>
          <h2>¿Faro de luz, narrador brillante o negocio con Wi‑Fi?</h2>
          <p className="lede">
            No podemos auditar el más allá. Sí podemos auditar lo que dejó recibo:
            biografía, afirmaciones públicas, lenguaje persuasivo, productos, precios
            y evidencia disponible. El universo podrá ser infinito; la carga de la
            prueba, qué pena, no.
          </p>
        </div>
        <div className="opening-cards" id="hallazgos">
          <article><span>01</span><b>Trayectoria real</b><p>Arquitecto, artista plástico y figura pública con huella documental.</p></article>
          <article><span>02</span><b>Relato extraordinario</b><p>Tres guías, canalización consciente y una cosmología sin verificación independiente.</p></article>
          <article><span>03</span><b>Modelo comercial</b><p>Libros, talleres, eventos y cursos: la eternidad también encontró carrito de compra.</p></article>
        </div>
      </section>

      <section className="profile-section" id="perfil">
        <div className="section-heading">
          <p className="section-index">01 / PERFIL PÚBLICO</p>
          <div>
            <p className="kicker">Antes del oráculo, el currículum</p>
            <h2>Una trayectoria terrenal bastante más interesante que la coartada celeste.</h2>
          </div>
        </div>

        <div className="profile-layout">
          <figure className="art-portrait">
            <img src="/media/victor-ayala-artista.jpeg" alt="Víctor Ayala sostiene una obra pictórica de figura humana rodeada por luz amarilla" loading="lazy" />
            <figcaption><span>FIG. 02</span> Ayala en su faceta de artista plástico · imagen aportada</figcaption>
          </figure>

          <div className="timeline" aria-label="Cronología pública">
            <article>
              <time>Trayectoria previa</time>
              <h3>Arquitectura y artes visuales</h3>
              <p>Su perfil artístico lo presenta como arquitecto colimense, pintor y escultor. El Sistema de Información Cultural lo registra en Artes Visuales en Colima.</p>
              <span className="evidence-tag verified-tag">Documentado</span>
            </article>
            <article>
              <time>2007–2008</time>
              <h3>Selecciones internacionales</h3>
              <p>Su propia biografía refiere concursos en Granada y selección en la Galería Lessedra de Sofía. Es una declaración biográfica pública; no la inflamos hasta convertirla en auditoría independiente.</p>
              <span className="evidence-tag self-tag">Autodeclarado</span>
            </article>
            <article>
              <time>Más de una década</time>
              <h3>La reconversión en canalizador</h3>
              <p>La ficha editorial de su libro lo describe como exprofesor universitario de arquitectura y canalizador de Los Tres Guías desde hace más de diez años.</p>
              <span className="evidence-tag source-tag">Perfil editorial</span>
            </article>
            <article>
              <time>2025–2026</time>
              <h3>Libro, giras y tienda digital</h3>
              <p>El proyecto se consolida como ecosistema: 116 videos convertidos en libro, canal propio, eventos presenciales, talleres grabados y cursos.</p>
              <span className="evidence-tag verified-tag">Registro comercial</span>
            </article>
          </div>

          <aside className="profile-record">
            <p>Ficha rápida</p>
            <dl>
              <div><dt>Nombre</dt><dd>Víctor Gabriel Ayala Rodríguez</dd></div>
              <div><dt>Oficios públicos</dt><dd>Arquitecto · artista plástico · canalizador</dd></div>
              <div><dt>Base documentada</dt><dd>Colima, México</dd></div>
              <div><dt>Proyecto</dt><dd>Víctor Ayala y Los Tres Guías</dd></div>
              <div><dt>Producto editorial</dt><dd>Los Tres Guías · ISBN 978-84-09-74613-2</dd></div>
            </dl>
            <p className="record-note">La biografía no valida la canalización. Sólo evita la caricatura del improvisado: aquí hay oficio, cultura visual y cálculo comunicativo.</p>
          </aside>
        </div>
      </section>

      <section className="doctrine-section">
        <div className="section-heading">
          <p className="section-index">02 / ARQUITECTURA DEL RELATO</p>
          <div>
            <p className="kicker">El pitch deck del cosmos</p>
            <h2>Una doctrina con puertas, pasillos y salida directa a la tienda.</h2>
          </div>
        </div>
        <div className="doctrine-grid">
          <article><span>01</span><h3>Autoridad invisible</h3><p>La información no nace del expositor: llega de tres entidades superiores. Excelente blindaje; el autor habla y la fuente no acepta entrevistas.</p><small>Lectura analítica</small></article>
          <article><span>02</span><h3>Problema total</h3><p>El “casco periférico” explica crítica interna, miedo, culpa, perfeccionismo y agotamiento. Si la llave abre todas las puertas, conviene revisar si no es una ganzúa narrativa.</p><small>Concepto declarado</small></article>
          <article><span>03</span><h3>Solución exclusiva</h3><p>El mismo sistema que diagnostica el bloqueo ofrece el lenguaje para disolverlo. Primero bautiza el malestar; luego administra el mapa de salida.</p><small>Lectura analítica</small></article>
          <article><span>04</span><h3>Reloj escatológico</h3><p>2025–2027, cambio biológico, última encarnación. La eternidad, curiosamente, trabaja mejor cuando le ponen fecha de cierre.</p><small>Afirmaciones públicas</small></article>
        </div>
      </section>

      <section className="claims-section" id="afirmaciones">
        <div className="section-heading">
          <p className="section-index">03 / DETECTOR DE HUMO</p>
          <div>
            <p className="kicker">Afirmación ≠ evidencia</p>
            <h2>Cinco claims entran. La carga de la prueba decide cuáles salen caminando.</h2>
          </div>
        </div>

        <div className="claim-filters" aria-label="Filtrar afirmaciones">
          {(["todas", "metafisica", "prediccion", "ciencia", "psicologia"] as const).map((filter) => (
            <button
              type="button"
              key={filter}
              className={claimFilter === filter ? "is-active" : ""}
              aria-pressed={claimFilter === filter}
              onClick={() => setClaimFilter(filter)}
            >
              {filter === "todas" ? "Todas" : filter === "metafisica" ? "Metafísica" : filter === "prediccion" ? "Predicción" : filter === "ciencia" ? "Ciencia" : "Psicología"}
            </button>
          ))}
        </div>

        <div className="claims-grid" aria-live="polite">
          {visibleClaims.map((item) => (
            <article className={`claim-card category-${item.category}`} key={item.index}>
              <div className="claim-meta"><span>{item.index}</span><b>{item.category}</b></div>
              <h3>{item.title}</h3>
              <p className="claim-statement">{item.statement}</p>
              <div className="claim-reading"><small>Lectura editorial</small><p>{item.reading}</p></div>
              <div className="claim-footer"><span>{item.label}</span><a href={item.source} target="_blank" rel="noreferrer">Abrir contraste ↗</a></div>
            </article>
          ))}
        </div>
      </section>

      <section className="science-section">
        <div className="science-lead">
          <p className="section-index">04 / PSICOLOGÍA SIN AUREOLA</p>
          <p className="kicker">El destello genuino</p>
          <h2>Cuando funciona, no necesariamente funciona por la razón que vende.</h2>
          <p>Tomar distancia de una voz autocrítica, detectar exigencias imposibles y practicar autocompasión puede ayudar. La investigación psicológica estudia esas herramientas desde hace décadas. Llamarlas “casco” puede volverlas memorables; no las vuelve descargadas del servidor central del universo.</p>
        </div>

        <div className="equivalence-wrap">
          <div className="table-note"><span>Comparación funcional</span><p>No demuestra copia ni intención fraudulenta. Demuestra que las piezas no son inéditas.</p></div>
          <div className="equivalence-table" role="table" aria-label="Comparación entre voces del casco y conceptos psicológicos">
            <div className="equivalence-row table-head" role="row"><b>Voz del casco</b><b>Paralelo psicológico</b><b>Núcleo compartido</b></div>
            {equivalences.map(([voice, parallel, core]) => (
              <div className="equivalence-row" role="row" key={voice}><strong>{voice}</strong><span>{parallel}</span><span>{core}</span></div>
            ))}
          </div>
        </div>
      </section>

      <section className="business-section" id="negocio">
        <div className="business-visual">
          <img src="/media/canalizacion-buenos-aires.jpeg" alt="Cartel de canalización grupal de Víctor Ayala en Buenos Aires" loading="lazy" />
          <span>FIG. 03 / Gira internacional</span>
        </div>
        <div className="business-copy">
          <p className="section-index">05 / ECONOMÍA DEL MÁS ALLÁ</p>
          <p className="kicker">La revelación encontró checkout</p>
          <h2>Fe, formato y margen.</h2>
          <p className="business-intro">Cobrar por una actividad espiritual no prueba fraude. Pero el precio, la escasez y el reciclaje de contenido sí son hechos comerciales analizables. Hasta el cuerpo de luz necesita flujo de caja.</p>

          <div className="price-ledger">
            <article><span>Canalizaciones grupales</span><b>$600–780</b><small>MXN · preventa observada</small></article>
            <article><span>Talleres en video</span><b>$2,999</b><small>MXN · tienda oficial</small></article>
            <article><span>Libro · 326 páginas</span><b>€35</b><small>Transcripción de 116 videos</small></article>
          </div>

          <div className="business-verdict">
            <span>Dato duro</span>
            <p>La ficha bibliográfica dice, sin necesidad de ouija contable, que el libro es la transcripción de 116 videos ya publicados. El valor puede residir en ordenar el archivo; la originalidad material no es precisamente una aparición mariana.</p>
            <a href="https://www.todostuslibros.com/libros/los-tres-guias_978-84-09-74613-2" target="_blank" rel="noreferrer">Ver ficha del libro ↗</a>
          </div>
        </div>
      </section>

      <section className="persuasion-section">
        <div className="section-heading">
          <p className="section-index">06 / MECÁNICA PERSUASIVA</p>
          <div><p className="kicker">Cómo habla el personaje</p><h2>La autenticidad también tiene dirección de escena.</h2></div>
        </div>
        <div className="persuasion-list">
          <article><b>El mensajero renuente</b><p>La autocrítica y el apodo coloquial reducen la sospecha de ego mesiánico: “si se burla de sí mismo, debe ser genuino”. No necesariamente; también puede ser una vacuna narrativa.</p><span>Análisis de retórica</span></article>
          <article><b>La voz con salvoconducto</b><p>Si el contenido acierta, hablan los guías. Si tropieza, queda disponible la traducción humana. Una estructura elegante: la autoridad sube y la responsabilidad baja.</p><span>Análisis de estructura</span></article>
          <article><b>La profanidad carismática</b><p>El lenguaje directo rompe el perfume New Age y produce cercanía. El cielo deja el arpa, se arremanga y habla como compadre; la audiencia baja la guardia.</p><span>Análisis de estilo</span></article>
          <article><b>Urgencia con terciopelo</b><p>“Última vida”, “tres años”, “transición”. El miedo llega vestido de paz. Es escasez temporal aplicada al sentido de la existencia: Black Friday escatológico.</p><span>Análisis de incentivo</span></article>
        </div>
      </section>

      <section className="verdict-section">
        <p className="section-index">07 / DICTAMEN PROVISIONAL</p>
        <div className="verdict-title"><p className="kicker">Sin hoguera. Sin halo.</p><h2>El veredicto que permite la evidencia.</h2></div>
        <div className="verdict-grid">
          <article className="light"><span>Destellos</span><h3>Hay talento real.</h3><p>Capital cultural, oficio visual, facilidad verbal y consejos psicológicos que pueden resultar útiles. Negarlo sería crítica de bar, no análisis.</p></article>
          <article className="shadow"><span>Sombras</span><h3>La prueba no llega.</h3><p>Entidades, silicio, cronología cósmica y fin de la reencarnación permanecen sin verificación independiente y, en varios casos, fuera de lo falsable.</p></article>
          <article className="mask"><span>La máscara</span><h3>Un narrador de significado.</h3><p>La figura más defendible no es “vidente probado” ni “delincuente probado”, sino empresario espiritual sofisticado que monetiza un relato extraordinario.</p></article>
        </div>
        <blockquote>“No hay base empírica pública para aceptar la canalización como hecho. Sí hay base documental para reconocer una narrativa hábil, útil por momentos y comercial de cabo a rabo.”<cite>— Dictamen editorial, versión 1.0</cite></blockquote>
        <p className="legal-line">Este dossier no documenta una imputación penal contra Ayala ni pretende certificar la inexistencia de expedientes desconocidos. “Charlatain Shark” es una rúbrica editorial satírica, no una resolución judicial. César necesita pruebas; Twitter se conforma con mayúsculas.</p>
      </section>

      <section className="method-section" id="metodo">
        <div className="section-heading">
          <p className="section-index">08 / MÉTODO</p>
          <div><p className="kicker">Cuatro etiquetas. Cero incienso probatorio.</p><h2>Cómo se construyó este expediente.</h2></div>
        </div>
        <div className="method-grid">
          <article><i className="verified" /><b>Documentado</b><p>Dato respaldado por registro oficial, ficha bibliográfica, sitio del proyecto o material público directo.</p></article>
          <article><i className="claim" /><b>Afirmado</b><p>Lo dijo Ayala, su plataforma o un anfitrión que lo cita. Se registra como declaración, no como realidad demostrada.</p></article>
          <article><i className="analysis" /><b>Análisis</b><p>Inferencia editorial explícita sobre estructura, incentivos o retórica. Puede discutirse y debe argumentarse.</p></article>
          <article><i className="unknown" /><b>Indeterminado</b><p>No hay material suficiente para concluir. El hueco no se rellena con sospecha; se marca como hueco.</p></article>
        </div>
        <div className="method-rules"><p>Reglas del expediente</p><ol><li>Priorizar fuentes primarias.</li><li>Distinguir biografía declarada de registro independiente.</li><li>No usar ausencia de prueba como prueba de fraude.</li><li>Actualizar cuando aparezcan documentos mejores.</li><li>Ofrecer rectificación documentada.</li></ol></div>
      </section>

      <section className="sources-section" id="fuentes">
        <div className="section-heading">
          <p className="section-index">09 / FUENTES</p>
          <div><p className="kicker">La trastienda, con las luces encendidas</p><h2>Lea, contraste y encuentre dónde nos equivocamos.</h2></div>
        </div>
        <div className="sources-list">
          {sources.map((source) => (
            <a href={source.href} target="_blank" rel="noreferrer" key={source.n}>
              <span>{source.n}</span><div><b>{source.title}</b><p>{source.note}</p></div><small>{source.kind}</small><i>↗</i>
            </a>
          ))}
        </div>
      </section>

      <section className="correction-section">
        <div><p className="kicker">Dossier abierto</p><h2>¿Tiene una corrección documentada?</h2><p>Una refutación con fuente primaria no amenaza el proyecto: lo mejora. Un “yo siento que” será tratado con el respeto ceremonial que merece y devuelto a su altar.</p></div>
        <div className="correction-action">
          <button type="button" onClick={copyCorrectionTemplate}>{copied ? "Formato copiado ✓" : manualCopy ? "Seleccione y copie el formato" : "Copiar formato de rectificación"}</button>
          {manualCopy && <textarea aria-label="Formato de rectificación" readOnly value={correctionTemplate} onFocus={(event) => event.currentTarget.select()} />}
        </div>
      </section>

      <footer>
        <a className="brand footer-brand" href="#inicio"><img src="/media/charlatain-shark-icon.png" alt="" /><span className="brand-type"><b>CHARLATAIN</b><small><i />SHARK<i /></small></span></a>
        <p>Dossier 001 · Víctor Ayala · Corte 16 julio 2026 · Código AGPL</p>
        <div><button type="button" onClick={() => window.print()}>Imprimir / PDF</button><a href="#fuentes">Fuentes</a><a href="#metodo">Método</a><a href="/charlatain-shark-source-v1.0.0.zip" download>Código abierto ↓</a><a href="/licencias.txt" target="_blank" rel="noreferrer">Licencias</a></div>
      </footer>
    </main>
  );
}
