// GuerrerosCR — Services + Projects + Process
const SERVICES = [
  {
    id: "apps", icon: "app", num: "01",
    title: "Aplicaciones web a la medida",
    short: "Plataformas internas con login, roles, formularios, dashboards e integraciones.",
    desc: "Diseñamos y desarrollamos aplicaciones web personalizadas para resolver necesidades específicas de su empresa: inicio de sesión, roles de usuario, formularios, flujos de aprobación, carga de archivos, dashboards, reportes y conexión con bases de datos.",
    ideal: "Empresas que necesitan dejar de depender de archivos de Excel, correos o procesos manuales para gestionar información importante.",
    tags: ["Solicitudes internas", "Aprobaciones", "Tickets y soporte", "Gestión documental", "Control de inventarios", "Viáticos y reembolsos", "Portales de colaboradores"],
  },
  {
    id: "auto", icon: "bolt", num: "02",
    title: "Automatización de procesos",
    short: "Convertimos tareas repetitivas en flujos digitales con notificaciones y reportes.",
    desc: "Automatizamos procesos repetitivos para que su equipo se enfoque en lo importante. Analizamos cómo trabaja hoy su empresa y diseñamos flujos digitales que reducen errores, tiempos de espera y seguimiento manual.",
    ideal: "Empresas que mueven aprobaciones, reportes o tareas operativas por correo, Excel o chats.",
    tags: ["Formularios con aprobación", "Envío automático de correos", "Generación de reportes", "Recordatorios internos", "Historial y auditoría", "Flujos por monto / rol"],
  },
  {
    id: "integ", icon: "link", num: "03",
    title: "Integraciones con ERP y bases de datos",
    short: "Conectamos sistemas, datos y plataformas para que la información fluya entre departamentos.",
    desc: "Conectamos sistemas administrativos, bases de datos y herramientas empresariales para que la información se consulte, analice y aproveche desde un solo lugar. No reemplazamos sus sistemas: los conectamos mejor.",
    ideal: "Empresas que trabajan con ERP, SQL Server, MySQL, Softland u otros sistemas administrativos.",
    tags: ["SQL Server", "MySQL", "Integración con ERP", "APIs REST", "Validaciones cruzadas", "Extracción para dashboards"],
  },
  {
    id: "web", icon: "globe", num: "04",
    title: "Desarrollo web profesional",
    short: "Sitios modernos, rápidos y orientados a conversión, listos para celular.",
    desc: "Creamos sitios web profesionales que transmiten confianza, explican sus servicios y convierten visitantes en contactos comerciales. Comunicación clara, carga rápida y diseño responsive.",
    ideal: "Empresas que necesitan una presencia digital seria, clara y confiable.",
    tags: ["Diseño responsive", "SEO básico", "Estructura de servicios", "Formularios", "WhatsApp integrado", "Rendimiento móvil"],
  },
  {
    id: "dash", icon: "chart", num: "05",
    title: "Dashboards y reportes",
    short: "Paneles para visualizar indicadores clave y tomar mejores decisiones.",
    desc: "Convertimos datos operativos en información visual y útil. Desarrollamos dashboards para analizar indicadores clave, dar seguimiento a procesos y detectar oportunidades de mejora.",
    ideal: "Gerencias y áreas que necesitan visibilidad de operación, ventas, soporte o finanzas.",
    tags: ["Reportes de ventas", "Indicadores de soporte", "Reportes financieros", "Seguimiento de solicitudes", "Métricas por área", "KPIs en tiempo real"],
  },
  {
    id: "consult", icon: "shield", num: "06",
    title: "Consultoría y soporte IT",
    short: "Acompañamiento técnico en infraestructura, hosting, correos y seguridad básica.",
    desc: "Acompañamos a empresas que necesitan tomar mejores decisiones tecnológicas: evaluar herramientas, definir arquitectura, revisar sistemas existentes o planificar una solución paso a paso.",
    ideal: "Empresas sin equipo IT interno o con necesidad de criterio externo en proyectos clave.",
    tags: ["Bases de datos", "Infraestructura web", "Hosting y dominios", "Correos corporativos", "Seguridad básica", "Mejora de procesos"],
  },
];
window.SERVICES = SERVICES;

const SERVICES_EN = [
  {
    id: "apps", icon: "app", num: "01",
    title: "Custom web applications",
    short: "Internal platforms with login, roles, forms, dashboards, and integrations.",
    desc: "We design and build custom web applications for your company's specific needs: user login, roles, forms, approval flows, file uploads, dashboards, reports, and database connectivity.",
    ideal: "Companies that need to stop depending on shared spreadsheets, email chains, or manual processes to manage critical information.",
    tags: ["Internal requests", "Approvals", "Support tickets", "Document management", "Inventory control", "Expense reports", "Employee portals"],
  },
  {
    id: "auto", icon: "bolt", num: "02",
    title: "Process automation",
    short: "We turn repetitive tasks into digital workflows with notifications and reports.",
    desc: "We automate repetitive processes so your team can focus on what matters. We analyze how your company works today and design digital workflows that reduce errors, waiting time, and manual follow-up.",
    ideal: "Companies that handle approvals, reports, or operational tasks through email, Excel, or chat.",
    tags: ["Approval forms", "Automated emails", "Report generation", "Internal reminders", "Audit history", "Amount/role-based flows"],
  },
  {
    id: "integ", icon: "link", num: "03",
    title: "ERP and database integrations",
    short: "We connect systems, data, and platforms so information flows across departments.",
    desc: "We connect administrative systems, databases, and business tools so information can be accessed, analyzed, and leveraged from a single place. We don't replace your systems — we connect them better.",
    ideal: "Companies that work with ERP, SQL Server, MySQL, Softland, or other administrative systems.",
    tags: ["SQL Server", "MySQL", "ERP integration", "REST APIs", "Cross-system validation", "Dashboard data extraction"],
  },
  {
    id: "web", icon: "globe", num: "04",
    title: "Professional web development",
    short: "Modern, fast, conversion-focused websites ready for mobile.",
    desc: "We create professional websites that communicate trust, explain your services, and turn visitors into business contacts. Clear messaging, fast loading, and responsive design.",
    ideal: "Companies that need a serious, clear, and trustworthy digital presence.",
    tags: ["Responsive design", "Basic SEO", "Service structure", "Contact forms", "WhatsApp integration", "Mobile performance"],
  },
  {
    id: "dash", icon: "chart", num: "05",
    title: "Dashboards and reports",
    short: "Panels to visualize key indicators and make better decisions.",
    desc: "We turn operational data into visual, actionable information. We develop dashboards to analyze key indicators, track processes, and identify improvement opportunities.",
    ideal: "Management teams and departments that need visibility into operations, sales, support, or finance.",
    tags: ["Sales reports", "Support KPIs", "Financial reports", "Request tracking", "Area-specific metrics", "Real-time KPIs"],
  },
  {
    id: "consult", icon: "shield", num: "06",
    title: "IT consulting and support",
    short: "Technical guidance on infrastructure, hosting, email, and basic security.",
    desc: "We support companies that need to make better technology decisions: evaluating tools, defining architecture, reviewing existing systems, or planning a solution step by step.",
    ideal: "Companies without an in-house IT team or needing external expertise on key projects.",
    tags: ["Databases", "Web infrastructure", "Hosting and domains", "Corporate email", "Basic security", "Process improvement"],
  },
];
window.SERVICES_EN = SERVICES_EN;

function Services() {
  const isEn = window.location.pathname.startsWith("/en");
  const svc = isEn ? SERVICES_EN : SERVICES;
  const [active, setActive] = useState(svc[0].id);
  const cur = svc.find(s => s.id === active);
  return (
    <section id="servicios" className="section">
      <div className="sec-head">
        <div>
          <span className="eyebrow"><span className="dot"></span>{isEn ? "Services" : "Servicios"}</span>
          <h2 style={{ marginTop: 20 }}>
            {isEn ? "Digital solutions that connect operations with business goals." : "Soluciones digitales que conectan la operación con los objetivos."}
          </h2>
        </div>
        <p className="side">
          {isEn ? "We don't build for the sake of it. Every solution has a clear purpose: save time, improve control, and enable better decisions." : "No desarrollamos por moda. Cada solución tiene un propósito claro: ahorrar tiempo, mejorar el control y facilitar la toma de decisiones."}
        </p>
      </div>

      <div className="services-grid">
        {svc.map((s) => (
          <button
            key={s.id}
            className="service-card"
            onClick={() => {
              setActive(s.id);
              setTimeout(() => {
                const el = document.getElementById("service-detail");
                if (el) el.scrollIntoView({ behavior: "smooth", block: "nearest" });
              }, 50);
            }}
          >
            <div className="service-num">{s.num} / 06</div>
            <div className="service-icon"><Icon name={s.icon} size={22} /></div>
            <h3>{s.title}</h3>
            <p>{s.short}</p>
            <span className="more">{isEn ? "View details" : "Ver detalle"}</span>
          </button>
        ))}
      </div>

      <div id="service-detail" className="service-detail">
        <div className="service-tabs">
          {svc.map(s => (
            <button
              key={s.id}
              className={`service-tab ${s.id === active ? "active" : ""}`}
              onClick={() => setActive(s.id)}
            >
              <span className="service-tab-num">{s.num}</span>
              <span>{s.title}</span>
            </button>
          ))}
        </div>
        <div className="detail-content">
          <span className="eyebrow green"><span className="dot"></span>{cur.num} · {cur.title.split(" ")[0]}</span>
          <h3 style={{ marginTop: 14 }}>{cur.title}</h3>
          <p>{cur.desc}</p>
          <div className="detail-ideal">
            <b>{isEn ? "Ideal for:" : "Ideal para:"}</b> {cur.ideal}
          </div>
          <div style={{ marginBottom: 10, fontSize: 12, color: "var(--muted)", fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: 600 }}>
            {isEn ? "Examples / Support areas" : "Ejemplos / Áreas de apoyo"}
          </div>
          <div className="detail-examples">
            {cur.tags.map((t, i) => <span key={i} className="tag">{t}</span>)}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Services = Services;

// === Process ===
function Process() {
  const isEn = window.location.pathname.startsWith("/en");
  const STEPS = isEn ? [
    { n: "01", t: "Diagnosis", d: "We listen to your needs, understand the current process, and identify improvement points." },
    { n: "02", t: "Proposal", d: "We define a clear solution, with scope, modules, estimated timelines, and priorities." },
    { n: "03", t: "Design & development", d: "We build the solution with modern technologies and a structure designed to grow." },
    { n: "04", t: "Testing", d: "We validate functionality, review real-world scenarios, and fine-tune before launch." },
    { n: "05", t: "Implementation", d: "We put the tool into operation and support the adoption process." },
    { n: "06", t: "Continuous improvement", d: "We keep optimizing, adding modules, or adjusting based on new needs." },
  ] : [
    { n: "01", t: "Diagnóstico", d: "Escuchamos su necesidad, entendemos el proceso actual y detectamos los puntos de mejora." },
    { n: "02", t: "Propuesta", d: "Definimos una solución clara, con alcance, módulos, tiempos estimados y prioridades." },
    { n: "03", t: "Diseño y desarrollo", d: "Construimos la solución con tecnologías modernas y una estructura pensada para crecer." },
    { n: "04", t: "Pruebas", d: "Validamos el funcionamiento, revisamos escenarios reales y ajustamos antes de publicar." },
    { n: "05", t: "Implementación", d: "Ponemos la herramienta en funcionamiento y acompañamos el proceso de adopción." },
    { n: "06", t: "Mejora continua", d: "Seguimos optimizando, agregando módulos o ajustando según nuevas necesidades." },
  ];
  return (
    <section className="section section-tight" style={{ background: "var(--bg-2)", maxWidth: "100%", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "0 28px" }}>
        <div className="sec-head">
          <div>
            <span className="eyebrow"><span className="dot"></span>{isEn ? "Process" : "Proceso"}</span>
            <h2 style={{ marginTop: 20 }}>{isEn ? "From real needs to solutions in production." : "De la necesidad real a la solución en producción."}</h2>
          </div>
          <p className="side">{isEn ? "A clear process with constant communication and measurable deliverables at every stage." : "Un proceso claro, con comunicación constante y entregas medibles en cada etapa."}</p>
        </div>
        <div className="process-grid">
          {STEPS.map((s, i) => (
            <div key={s.n} className={`process-step ${i === 0 ? "active" : ""}`}>
              <div className="process-step-num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Process = Process;

// === Projects ===
function Projects() {
  const isEn = window.location.pathname.startsWith("/en");
  return (
    <section id="proyectos" className="section">
      <div className="sec-head">
        <div>
          <span className="eyebrow"><span className="dot"></span>{isEn ? "Use cases" : "Casos de uso"}</span>
          <h2 style={{ marginTop: 20 }}>{isEn ? "Projects and solutions we can develop." : "Proyectos y soluciones que podemos desarrollar."}</h2>
        </div>
        <p className="side">{isEn ? "Every company has different processes. We build solutions tailored to each operation." : "Cada empresa tiene procesos distintos. Trabajamos con soluciones adaptadas a la realidad de cada operación."}</p>
      </div>

      <div className="projects-grid">
        {/* Tickets */}
        <div className="project-card large">
          <div className="project-tag">{isEn ? "Case 01 · Internal application" : "Caso 01 · Aplicación interna"}</div>
          <h3>{isEn ? "Support ticket system" : "Sistema de soporte y tickets"}</h3>
          <p>{isEn ? "Registration, classification, assignment, and tracking of technical support, maintenance, or operations tickets with resolution metrics." : "Registro, clasificación, asignación y seguimiento de tickets de soporte técnico, mantenimiento u operaciones con métricas de resolución."}</p>
          <div className="project-benefits">
            <span className="tag">{isEn ? "Open case control" : "Control de casos abiertos"}</span>
            <span className="tag">{isEn ? "Assignee routing" : "Asignación de responsables"}</span>
            <span className="tag">{isEn ? "History" : "Historial"}</span>
            <span className="tag">{isEn ? "SLA metrics" : "Métricas SLA"}</span>
          </div>
          <div className="proj-visual">
            <div className="viz-tickets">
              <div className="viz-ticket-row green">
                <span className="dot"></span>
                <span className="name">#1042 · {isEn ? "ERP sync error" : "Error sincronización ERP"}</span>
                <span className="meta">2h 12m</span>
                <span className="pill">{isEn ? "Resolved" : "Resuelto"}</span>
              </div>
              <div className="viz-ticket-row">
                <span className="dot"></span>
                <span className="name">#1041 · {isEn ? "Purchasing module access" : "Acceso a módulo de compras"}</span>
                <span className="meta">45m</span>
                <span className="pill">{isEn ? "In progress" : "En curso"}</span>
              </div>
              <div className="viz-ticket-row amber">
                <span className="dot"></span>
                <span className="name">#1040 · {isEn ? "Monthly report not loading" : "Reporte mensual no carga"}</span>
                <span className="meta">3h 20m</span>
                <span className="pill">{isEn ? "Pending" : "Pendiente"}</span>
              </div>
              <div className="viz-ticket-row green">
                <span className="dot"></span>
                <span className="name">#1039 · {isEn ? "Domain password change" : "Cambio de contraseña dominio"}</span>
                <span className="meta">8m</span>
                <span className="pill">{isEn ? "Resolved" : "Resuelto"}</span>
              </div>
            </div>
          </div>
        </div>

        {/* Approvals flow */}
        <div className="project-card small">
          <div className="project-tag">{isEn ? "Case 02 · Automation" : "Caso 02 · Automatización"}</div>
          <h3>{isEn ? "Digital approvals" : "Aprobaciones digitales"}</h3>
          <p>{isEn ? "Internal forms with approval flows by amount, role, or department. Automated notifications and full traceability." : "Formularios internos con flujos de aprobación por monto, rol o departamento. Notificaciones automáticas y trazabilidad completa."}</p>
          <div className="proj-visual">
            <div className="viz-flow">
              <div className="viz-flow-node">
                <span className="ico"><Icon name="send" size={12} /></span>
                <span>{isEn ? "Employee submits request" : "Colaborador envía solicitud"}</span>
              </div>
              <div className="viz-flow-arrow"></div>
              <div className="viz-flow-node">
                <span className="ico"><Icon name="users" size={12} /></span>
                <span>{isEn ? "Manager approves (amount < $500)" : "Jefatura aprueba (monto &lt; $500)"}</span>
              </div>
              <div className="viz-flow-arrow"></div>
              <div className="viz-flow-node ok">
                <span className="ico"><Icon name="check" size={12} /></span>
                <span>{isEn ? "Notification + history log" : "Notificación + registro en historial"}</span>
              </div>
            </div>
          </div>
        </div>

        {/* Dashboard */}
        <div className="project-card third">
          <div className="project-tag">{isEn ? "Case 03 · Dashboard" : "Caso 03 · Dashboard"}</div>
          <h3>{isEn ? "Management panel" : "Panel gerencial"}</h3>
          <p>{isEn ? "Key indicators connected to databases for faster decision-making." : "Indicadores clave conectados a base de datos para decisiones más rápidas."}</p>
          <div className="proj-visual">
            <div className="viz-chart">
              <div className="viz-chart-head">{isEn ? "Sales by channel " : "Ventas por canal "}<span>Q1 2026</span></div>
              <div className="viz-bars">
                <div className="viz-bar" style={{ height: "40%" }}></div>
                <div className="viz-bar" style={{ height: "62%" }}></div>
                <div className="viz-bar" style={{ height: "55%" }}></div>
                <div className="viz-bar" style={{ height: "78%" }}></div>
                <div className="viz-bar" style={{ height: "70%" }}></div>
                <div className="viz-bar" style={{ height: "92%" }}></div>
                <div className="viz-bar" style={{ height: "85%" }}></div>
              </div>
            </div>
          </div>
        </div>

        {/* Integration */}
        <div className="project-card third">
          <div className="project-tag">{isEn ? "Case 04 · ERP Integration" : "Caso 04 · Integración ERP"}</div>
          <h3>{isEn ? "System connectivity" : "Conexión con sistemas"}</h3>
          <p>{isEn ? "Query ERP or SQL data to feed reports and validate information." : "Consulta de información desde ERP o SQL para alimentar reportes y validar datos."}</p>
          <div className="proj-visual">
            <div className="viz-integrations">
              <div className="viz-integ-row">
                <span className="viz-integ-chip">ERP</span>
                <span className="viz-integ-line"></span>
                <span className="viz-integ-pill">API</span>
                <span className="viz-integ-chip">{isEn ? "Web app" : "App web"}</span>
              </div>
              <div className="viz-integ-row">
                <span className="viz-integ-chip">SQL</span>
                <span className="viz-integ-line"></span>
                <span className="viz-integ-pill">Query</span>
                <span className="viz-integ-chip">Dashboard</span>
              </div>
              <div className="viz-integ-row">
                <span className="viz-integ-chip">CSV</span>
                <span className="viz-integ-line"></span>
                <span className="viz-integ-pill">ETL</span>
                <span className="viz-integ-chip">{isEn ? "Report" : "Reporte"}</span>
              </div>
            </div>
          </div>
        </div>

        {/* Corp site */}
        <div className="project-card third">
          <div className="project-tag">{isEn ? "Case 05 · Corporate site" : "Caso 05 · Sitio corporativo"}</div>
          <h3>{isEn ? "Digital presence" : "Presencia digital"}</h3>
          <p>{isEn ? "Modern sites to communicate services, build trust, and attract new clients." : "Sitios modernos para comunicar servicios, generar confianza y captar nuevos clientes."}</p>
          <div className="proj-visual viz-web">
            <div className="viz-web-bar">
              <span></span><span></span><span></span>
              <span className="url">empresa.cr</span>
            </div>
            <div className="viz-web-body">
              <h4>{isEn ? "Your company, structured." : "Su empresa, ordenada."}</h4>
              <p>{isEn ? "Professional site + WhatsApp + contact forms" : "Sitio profesional + WhatsApp + formularios"}</p>
              <span className="mini-btn">{isEn ? "Get a quote →" : "Cotizar →"}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Projects = Projects;