frontend/components/Documentation.tsx

"use client";

import { translations, Language } from "../lib/translations";

type Props = {
  lang: Language;
};

export default function Documentation({ lang }: Props) {
  const t = translations[lang];

  const sections = [
    {
      title: lang === "en" ? "1. Dashboard: Global Intelligence" : "1. Dashboard: Inteligencia Global",
      desc: lang === "en" 
        ? "The strategic heart of the platform. Monitor market health and synchronization status."
        : "El corazón estratégico de la plataforma. Monitorea la salud del mercado y el estado de sincronización.",
      steps: lang === "en" ? [
        "**Global Sync**: Use the 'Sync' button to download real-time data from Mercado Público. This is essential for fresh intelligence.",
        "**ESG Analytics**: View your environmental and social compliance scores. Higher scores here mean better chances in modern public bids.",
        "**Regional Heatmap**: Identify where the highest volume of tenders is concentrated to optimize your geographical reach."
      ] : [
        "**Sincronización Global**: Usa el botón 'Sync' para descargar datos en tiempo real de Mercado Público. Es esencial para inteligencia fresca.",
        "**Analítica ESG**: Visualiza tus puntajes de cumplimiento ambiental y social. Puntajes altos significan mejores oportunidades en licitaciones modernas.",
        "**Mapa de Calor Regional**: Identifica dónde se concentra el mayor volumen de licitaciones para optimizar tu alcance geográfico."
      ]
    },
    {
      title: lang === "en" ? "2. Tender Search: Opportunity Discovery" : "2. Tender Search: Descubrimiento de Oportunidades",
      desc: lang === "en"
        ? "Advanced filtering engine to find the perfect match for your business."
        : "Motor de filtrado avanzado para encontrar el ajuste perfecto para tu negocio.",
      steps: lang === "en" ? [
        "**Keyword Precision**: Search by specific products, services, or Tender ID (e.g., 1234-56-LP24).",
        "**Sector Filtering**: Narrow down results by industry (Tech, Health, Infrastructure) to avoid noise.",
        "**Direct Links**: Access the official Mercado Público portal or 'Compra Ágil' directly from each card."
      ] : [
        "**Precisión de Palabras Clave**: Busca por productos específicos, servicios o ID de Licitación (ej. 1234-56-LP24).",
        "**Filtrado por Sector**: Reduce resultados por industria (Tecnología, Salud, Infraestructura) para evitar ruido.",
        "**Enlaces Directos**: Accede al portal oficial de Mercado Público o 'Compra Ágil' directamente desde cada tarjeta."
      ]
    },
    {
      title: lang === "en" ? "3. My Portfolio: Asset Management" : "3. My Portfolio: Gestión de Activos",
      desc: lang === "en"
        ? "Your curated list of followed opportunities and saved analysis."
        : "Tu lista curada de oportunidades seguidas y análisis guardados.",
      steps: lang === "en" ? [
        "**Follow/Unfollow**: Star tenders to track them. This keeps them prioritized in your dashboard.",
        "**Pre-Analysis**: View high-level summaries of followed tenders before committing to a full agentic deep-dive."
      ] : [
        "**Seguir/Dejar de seguir**: Marca con estrella las licitaciones para rastrearlas. Esto las mantiene priorizadas en tu dashboard.",
        "**Pre-Análisis**: Visualiza resúmenes de alto nivel de las licitaciones seguidas antes de comprometerse con un análisis agéntico profundo."
      ]
    },
    {
      title: lang === "en" ? "4. Market Monitor: OC Tracking" : "4. Market Monitor: Rastreo de OCs",
      desc: lang === "en"
        ? "Real-time surveillance of Purchase Orders (Órdenes de Compra) across the country."
        : "Vigilancia en tiempo real de Órdenes de Compra (OC) en todo el país.",
      steps: lang === "en" ? [
        "**Live Feed**: See what institutions are buying *right now*. This reveals hidden spending patterns.",
        "**Buyer Profiling**: Click on institutions to see their historical buying frequency and top providers.",
        "**Date Filtering**: Analyze seasonal trends to anticipate future tender cycles."
      ] : [
        "**Feed en Vivo**: Mira qué están comprando las instituciones *ahora mismo*. Esto revela patrones de gasto ocultos.",
        "**Perfil del Comprador**: Haz clic en instituciones para ver su frecuencia de compra histórica y sus principales proveedores.",
        "**Filtrado por Fecha**: Analiza tendencias estacionales para anticipar futuros ciclos de licitación."
      ]
    },
    {
      title: lang === "en" ? "5. Company Profile: AI Contextualization" : "5. Company Profile: Contextualización de IA",
      desc: lang === "en"
        ? "Teach the AI about your company to receive personalized recommendations."
        : "Enseña a la IA sobre tu empresa para recibir recomendaciones personalizadas.",
      steps: lang === "en" ? [
        "**Profile Setup**: Fill in your industry, services, and experience. Our AI uses this to calculate 'Strategic Fit'.",
        "**Keyword Optimization**: Add specific terms your company excels in (e.g., 'Cloud Infrastructure', 'Cybersecurity').",
        "**Persistence**: Your profile is stored locally and securely, guiding every agent's analysis."
      ] : [
        "**Configuración de Perfil**: Completa tu industria, servicios y experiencia. Nuestra IA usa esto para calcular el 'Ajuste Estratégico'.",
        "**Optimización de Keywords**: Añade términos específicos en los que tu empresa destaca (ej. 'Infraestructura Cloud').",
        "**Persistencia**: Tu perfil se guarda local y de forma segura, guiando el análisis de cada agente."
      ]
    },
    {
      title: lang === "en" ? "6. The War Room: Multi-Agent Analysis" : "6. War Room: Análisis Multi-Agente",
      desc: lang === "en"
        ? "Elite parallel processing using AMD Instinct™ MI300X hardware."
        : "Procesamiento paralelo de élite usando hardware AMD Instinct™ MI300X.",
      steps: lang === "en" ? [
        "**Expert Trio**: Orchestrate three agents: **Legal** (Admin/Rules), **Tech** (Specs/Arch), and **Strategy** (ROI/Risk).",
        "**ROCm Acceleration**: When selecting models, choosing the AMD-Instinct node unlocks ultra-fast document processing.",
        "**Comprehensive Report**: Get a unified 'Consensus Score' that evaluates if the tender is worth your time."
      ] : [
        "**Trío de Expertos**: Orquestar tres agentes: **Legal** (Administración/Reglas), **Técnico** (Especificaciones) y **Estratega** (ROI/Riesgo).",
        "**Aceleración ROCm**: Al seleccionar modelos, elegir el nodo AMD-Instinct desbloquea el procesamiento ultra-rápido de documentos.",
        "**Reporte Integral**: Obtén un 'Puntaje de Consenso' unificado que evalúa si la licitación vale tu tiempo."
      ]
    },
    {
      title: lang === "en" ? "7. Proposal Draft & Reports" : "7. Borradores y Reportes",
      desc: lang === "en"
        ? "Transform AI analysis into winning technical proposals."
        : "Transforma el análisis de IA en propuestas técnicas ganadoras.",
      steps: lang === "en" ? [
        "**Auto-Drafting**: Once analysis is done, the system generates a formal technical proposal draft.",
        "**Targeted Scoring**: The draft is optimized to hit the specific evaluation criteria mentioned in the bidding documents."
      ] : [
        "**Auto-Borrador**: Una vez terminado el análisis, el sistema genera un borrador formal de propuesta técnica.",
        "**Puntaje Dirigido**: El borrador se optimiza para cumplir con los criterios de evaluación específicos mencionados en las bases."
      ]
    },
    {
      title: lang === "en" ? "8. History: The Audit Trail" : "8. History: El Rastro de Auditoría",
      desc: lang === "en"
        ? "Review every analysis you've ever run. Track your strategic evolution."
        : "Revisa cada análisis que hayas realizado. Rastrea tu evolución estratégica.",
      steps: lang === "en" ? [
        "**Flashback**: Revisit past tender reports to see why you decided to bid (or not).",
        "**Data Export**: Use historical data to build long-term business intelligence reports."
      ] : [
        "**Flashback**: Vuelve a visitar reportes de licitaciones pasadas para ver por qué decidiste postular (o no).",
        "**Exportación de Datos**: Usa datos históricos para construir reportes de inteligencia de negocios a largo plazo."
      ]
    },
    {
      title: lang === "en" ? "9. Database: Local Integrity" : "9. Database: Integridad Local",
      desc: lang === "en"
        ? "Manage your local intelligence storage. Lightning-fast and private."
        : "Gestiona tu almacenamiento de inteligencia local. Ultra-rápido y privado.",
      steps: lang === "en" ? [
        "**Search History**: Re-run recent searches without re-syncing.",
        "**Buyer Registry**: Maintain a local cache of top-performing public institutions."
      ] : [
        "**Historial de Búsqueda**: Vuelve a ejecutar búsquedas recientes sin volver a sincronizar.",
        "**Registro de Compradores**: Mantén un caché local de las instituciones públicas con mejor desempeño."
      ]
    },
    {
      title: lang === "en" ? "10. System Info: AMD Telemetry" : "10. System Info: Telemetría AMD",
      desc: lang === "en"
        ? "Hardware monitoring and founder credentials."
        : "Monitoreo de hardware y credenciales del fundador.",
      steps: lang === "en" ? [
        "**MI300X Pulse**: Real-time monitoring of VRAM, Temperature, and Power on your AMD node.",
        "**Inference Settings**: Link your custom API endpoints for local LLM orchestration."
      ] : [
        "**MI300X Pulse**: Monitoreo en tiempo real de VRAM, Temperatura y Energía en tu nodo AMD.",
        "**Inference Settings**: Vincula tus endpoints de API personalizados para orquestación local de LLMs."
      ]
    }
  ];

  return (
    <div className="space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-24 text-left max-w-6xl mx-auto">
      <div className="text-center space-y-4 mb-16">
        <h2 className="text-5xl font-black text-white tracking-tighter uppercase">{t.documentation}</h2>
        <p className="text-slate-400 text-xl max-w-3xl mx-auto leading-relaxed">
          {lang === "en" 
            ? "Your complete tactical guide to dominating public procurement with AMD-powered intelligence." 
            : "Tu guía táctica completa para dominar las compras públicas con inteligencia potenciada por AMD."}
        </p>
        <div className="h-1.5 w-32 bg-gradient-to-r from-purple-500 via-cyan-500 to-purple-500 mx-auto rounded-full mt-8 animate-pulse" />
      </div>

      <div className="grid gap-12">
        {sections.map((section, idx) => (
          <div key={idx} className="glass-card rounded-[2.5rem] p-10 md:p-14 border border-white/10 bg-white/[0.02] relative overflow-hidden group hover:border-cyan-500/30 transition-all duration-700 shadow-2xl">
            <div className="absolute -right-20 -top-20 h-80 w-80 rounded-full bg-cyan-500/5 blur-[120px] group-hover:bg-cyan-500/10 transition-all" />
            
            <div className="relative z-10 space-y-10">
              <div className="space-y-2">
                <div className="text-xs font-black uppercase tracking-[0.4em] text-cyan-400 mb-2">Protocol Layer 0{idx + 1}</div>
                <h3 className="text-3xl md:text-4xl font-black text-white tracking-tight">
                  {section.title}
                </h3>
                <p className="text-xl text-slate-400 font-medium italic">
                  {section.desc}
                </p>
              </div>

              <div className="space-y-6">
                 {section.steps.map((step, sIdx) => (
                   <div key={sIdx} className="flex gap-6 items-start group/step">
                      <div className="flex-shrink-0 w-8 h-8 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-xs font-bold text-slate-500 group-hover/step:bg-cyan group-hover/step:text-black group-hover/step:border-cyan transition-all duration-300">
                        {sIdx + 1}
                      </div>
                      <div className="space-y-1 flex-1">
                        <p className="text-slate-200 leading-relaxed text-lg" dangerouslySetInnerHTML={{ __html: step.replace(/\*\*(.*?)\*\*/g, '<b class="text-cyan">$1</b>') }} />
                      </div>
                   </div>
                 ))}
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="glass-card rounded-3xl p-10 border border-purple-500/20 bg-purple-500/[0.03] mt-12 relative overflow-hidden">
        <div className="absolute top-0 right-0 p-8 text-5xl opacity-20">🎯</div>
        <h4 className="text-xl font-bold text-white mb-4">
          {lang === "en" ? "Note for the Jury" : "Nota para el Jurado"}
        </h4>
        <p className="text-slate-400 leading-relaxed italic text-lg">
          {lang === "en"
            ? "AndesOps AI is not just a demo; it is a fully functional data pipeline designed for high-performance computing. Every decision made by the agents is backed by localized inference on AMD Instinct™ hardware, ensuring data privacy and enterprise-grade reliability."
            : "AndesOps AI no es solo una demo; es un pipeline de datos plenamente funcional diseñado para cómputo de alto rendimiento. Cada decisión tomada por los agentes está respaldada por inferencia localizada en hardware AMD Instinct™, asegurando privacidad de datos y confiabilidad de grado empresarial."}
        </p>
      </div>
    </div>
  );
}