/* global React, Icon */

const AGENCY_METRICS = [
  { value: 3, label: "etapas de trabajo", detail: "Descubrimiento, implantación y evolución." },
  { value: 4, label: "soluciones iniciales", detail: "Software, web y apps, automatización e integraciones." },
  { value: 1, label: "equipo directo", detail: "Hablas con quienes entienden, diseñan y construyen." },
];

const AGENCY_SERVICES = [
  {
    icon: "code",
    number: "01",
    title: "Software a medida",
    text: "Centralizamos procesos, roles y datos en plataformas propias que eliminan hojas paralelas y se adaptan a tu operación.",
    href: "/service/software-a-medida/",
    outcomes: ["Procesos centralizados", "Roles y trazabilidad"],
  },
  {
    icon: "mobile",
    number: "02",
    title: "Experiencias web y aplicaciones",
    text: "Creamos sitios, portales y aplicaciones rápidos que comunican confianza, convierten visitas y facilitan servicios digitales.",
    href: "/service/desarrollo-webs/",
    outcomes: ["Conversión y confianza", "Responsive y rendimiento"],
  },
  {
    icon: "sparkle2",
    number: "03",
    title: "Automatización e IA aplicada",
    text: "Conectamos tareas, documentos y decisiones para reducir trabajo repetitivo, conservando control y supervisión humana.",
    href: "/service/automatizaciones/",
    outcomes: ["Menos tareas manuales", "Flujos medibles"],
  },
  {
    icon: "api",
    number: "04",
    title: "WhatsApp oficial e integraciones",
    text: "Integramos atención, notificaciones y procesos guiados mediante APIs oficiales, trazabilidad y derivación al equipo.",
    href: "/service/whatsapp-oficial/",
    outcomes: ["Canal oficial", "Bot y equipo humano"],
  },
  {
    icon: "chat",
    number: "05",
    title: "STAM Connect",
    text: "Producto propio para organizar atención, catálogo, proformas, agenda y automatizaciones conversacionales desde un solo panel.",
    href: "stam-connect.html",
    outcomes: ["Catálogo y proformas", "Agenda y ventas"],
  },
];

const AGENCY_PROCESS = [
  {
    step: "01",
    title: "Descubrimiento",
    text: "Entendemos el negocio, detectamos el cuello de botella y delimitamos una primera versión útil.",
    image: "assets/projects/consultorio-medico.webp",
    alt: "Interfaz digital para la gestión de un consultorio médico",
  },
  {
    step: "02",
    title: "Desarrollo e implantación",
    text: "Diseñamos, construimos, probamos e integramos la solución en el trabajo diario de tu equipo.",
    image: "assets/projects/empresa-paqueteria.webp",
    alt: "Sistema digital para la operación de una empresa de paquetería",
  },
  {
    step: "03",
    title: "Soporte y evolución",
    text: "Acompañamos el uso real, resolvemos incidencias y priorizamos mejoras a partir de evidencia.",
    image: "assets/projects/laboratorio-clinico.webp",
    alt: "Plataforma digital para la gestión de un laboratorio clínico",
  },
];

const AUTOMATION_TOOLS = [
  [
    { slug: "whatsapp", name: "WhatsApp", short: "WA", color: "25D366" },
    { slug: "googlesheets", name: "Google Sheets", short: "GS", color: "34A853" },
    { slug: "googlecalendar", name: "Google Calendar", short: "GC", color: "4285F4" },
    { slug: "gmail", name: "Gmail", short: "GM", color: "EA4335" },
    { slug: "slack", name: "Slack", short: "SL", color: "E01E5A" },
    { slug: "telegram", name: "Telegram", short: "TG", color: "26A5E4" },
    { slug: "microsoftteams", name: "Microsoft Teams", short: "MT", color: "6264A7" },
  ],
  [
    { slug: "n8n", name: "n8n", short: "n8", color: "EA4B71" },
    { slug: "hubspot", name: "HubSpot", short: "HS", color: "FF7A59" },
    { slug: "notion", name: "Notion", short: "NO", color: "FFFFFF" },
    { slug: "stripe", name: "Stripe", short: "ST", color: "635BFF" },
    { slug: "shopify", name: "Shopify", short: "SH", color: "7AB55C" },
    { slug: "meta", name: "Meta", short: "ME", color: "0866FF" },
    { slug: "openai", name: "OpenAI", short: "AI", color: "FFFFFF" },
  ],
];

const AGENCY_FAQS = [
  {
    question: "¿Trabajan con una solución estándar o a medida?",
    answer: "Partimos del problema y del contexto de cada empresa. Podemos construir una solución desde cero o integrar herramientas existentes cuando eso sea más eficiente.",
  },
  {
    question: "¿Cómo se define el alcance del proyecto?",
    answer: "En descubrimiento ordenamos objetivos, usuarios, procesos e integraciones. Con esa información delimitamos entregables, prioridades y una primera etapa verificable.",
  },
  {
    question: "¿Pueden conectar un sistema que ya utilizamos?",
    answer: "Sí, siempre que el sistema disponga de una API o un mecanismo de integración viable. Antes de comprometer el alcance revisamos su documentación y restricciones técnicas.",
  },
  {
    question: "¿STAM Connect es el servicio de agencia?",
    answer: "No. STAM Connect es un producto creado por STAMINEX para automatización y atención empresarial. La agencia desarrolla proyectos e integraciones a medida.",
  },
  {
    question: "¿Qué ocurre después de publicar la solución?",
    answer: "Podemos continuar con soporte y evolución: observamos el uso, atendemos incidencias y acordamos mejoras según el impacto que tengan en la operación.",
  },
];

function AgencyCount({ value }) {
  const ref = React.useRef(null);
  const frame = React.useRef(0);
  const [current, setCurrent] = React.useState(0);

  React.useEffect(() => {
    const node = ref.current;
    if (!node) return undefined;

    const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion || !("IntersectionObserver" in window)) {
      setCurrent(value);
      return undefined;
    }

    const observer = new IntersectionObserver((entries) => {
      if (!entries[0].isIntersecting) return;
      observer.disconnect();
      const startedAt = performance.now();
      const animate = (now) => {
        const progress = Math.min((now - startedAt) / 900, 1);
        setCurrent(Math.round(value * (1 - Math.pow(1 - progress, 3))));
        if (progress < 1) frame.current = requestAnimationFrame(animate);
      };
      frame.current = requestAnimationFrame(animate);
    }, { threshold: 0.55 });

    observer.observe(node);
    return () => {
      observer.disconnect();
      cancelAnimationFrame(frame.current);
    };
  }, [value]);

  return <strong className="ag-metric__value" ref={ref}>{current}</strong>;
}

function AgencyAbout() {
  return (
    <section className="ag-section ag-about" id="agencia" aria-labelledby="ag-about-title">
      <div className="ag-container ag-about__grid">
        <div className="ag-about__visual reveal">
          <img src="assets/projects/staminex-equipo.webp" alt="Equipo de STAMINEX colaborando en un proyecto digital" />
          <span className="ag-about__stamp" aria-hidden="true">STAMINEX<br />ESTUDIO DIGITAL</span>
        </div>
        <div className="ag-about__copy reveal d2">
          <span className="ag-kicker">Sobre STAMINEX</span>
          <h2 className="ag-title" id="ag-about-title">Tecnología que se adapta al negocio, no al revés.</h2>
          <p className="ag-lead">STAMINEX es un equipo de soluciones digitales que diseña y desarrolla software, sitios, aplicaciones y automatizaciones para empresas.</p>
          <p>Trabajamos de forma directa: primero entendemos cómo opera tu negocio y después construimos la tecnología necesaria para simplificar procesos, conectar herramientas y crear mejores experiencias.</p>
          <div className="ag-about__note">
            <Icon name="spark" size={20} />
            <span>Diseño, desarrollo e implantación con un mismo equipo.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function AgencyMetrics() {
  return (
    <section className="ag-section ag-metrics" aria-label="Cómo trabaja STAMINEX">
      <div className="ag-container">
        <div className="ag-metrics__panel reveal">
          <div className="ag-metrics__intro">
            <span className="ag-kicker ag-kicker--light">Una estructura clara</span>
            <h2>Lo concreto antes que las cifras de escaparate.</h2>
            <p>Estos números describen nuestro modelo de trabajo y nuestra oferta inicial, no resultados inventados.</p>
          </div>
          <div className="ag-metrics__list">
            {AGENCY_METRICS.map((metric, index) => (
              <article className={"ag-metric reveal d" + (index + 1)} key={metric.label}>
                <AgencyCount value={metric.value} />
                <h3>{metric.label}</h3>
                <p>{metric.detail}</p>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function AgencyServices() {
  return (
    <section className="ag-section ag-services" id="servicios-agencia" aria-labelledby="ag-services-title">
      <div className="ag-container">
        <header className="ag-heading reveal">
          <span className="ag-kicker">Soluciones STAMINEX Tech</span>
          <h2 className="ag-title" id="ag-services-title">Tecnología diseñada para resolver, conectar y crecer.</h2>
          <p>Partimos del resultado que necesita tu empresa y combinamos producto, automatización e integración sin forzar procesos dentro de una plantilla.</p>
        </header>
        <div className="ag-services__grid">
          {AGENCY_SERVICES.map((service, index) => (
            <article className={"ag-service reveal d" + ((index % 3) + 1)} key={service.title}>
              <div className="ag-service__top">
                <span className="ag-service__icon"><Icon name={service.icon} size={24} /></span>
                <span className="ag-service__number">{service.number}</span>
              </div>
              <h3>{service.title}</h3>
              <p>{service.text}</p>
              <ul className="ag-service__outcomes" aria-label={"Resultados de " + service.title}>
                {service.outcomes.map((outcome) => <li key={outcome}><Icon name="check" size={12} /> {outcome}</li>)}
              </ul>
              {service.href && <a className="ag-service__link" href={service.href}>{service.number === "05" ? "Conocer el producto" : "Ver servicio"} <Icon name="arrow" size={16} /></a>}
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function AgencyProcess() {
  return (
    <section className="ag-section ag-process" id="proceso-agencia" aria-labelledby="ag-process-title">
      <div className="ag-container">
        <header className="ag-heading ag-heading--split reveal">
          <div>
            <span className="ag-kicker">Proceso</span>
            <h2 className="ag-title" id="ag-process-title">De la conversación a una herramienta en uso.</h2>
          </div>
          <p>Avanzamos por etapas comprensibles, con decisiones visibles y una solución que puede seguir evolucionando.</p>
        </header>
        <div className="ag-process__grid">
          {AGENCY_PROCESS.map((item, index) => (
            <article className={"ag-process-card ag-process-card--" + (index + 1) + " reveal d" + (index + 1)} key={item.step}>
              <img src={item.image} alt={item.alt} />
              <div className="ag-process-card__shade" />
              <div className="ag-process-card__content">
                <span>{item.step} / 03</span>
                <h3>{item.title}</h3>
                <p>{item.text}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function AgencyAutomation() {
  return (
    <section className="ag-section ag-automation" aria-labelledby="ag-automation-title">
      <div className="ag-container ag-automation__head reveal">
        <span className="ag-kicker">Automatizaciones</span>
        <h2 className="ag-title" id="ag-automation-title">Conectamos las herramientas que ya mueven tu negocio.</h2>
        <p>Diseñamos flujos entre atención, datos, agenda, pagos y operación para que la información avance sin tareas repetitivas.</p>
      </div>
      <div className="ag-automation-stage reveal d2" aria-label="Herramientas que STAMINEX puede conectar">
        <div className="ag-tool-streams">
          {AUTOMATION_TOOLS.map((row, rowIndex) => {
          const repeated = row.concat(row);
          return (
            <div className={"ag-tool-stream ag-tool-stream--" + (rowIndex === 0 ? "forward" : "reverse")} key={rowIndex}>
              <div className="ag-tool-stream__track">
                {repeated.map((tool, index) => (
                  <span className="ag-tool" aria-hidden={index >= row.length ? "true" : undefined} key={tool.slug + index} title={tool.name}>
                    <img
                      src={`https://cdn.simpleicons.org/${tool.slug}/${tool.color}`}
                      alt=""
                      loading="lazy"
                      onError={(event) => event.currentTarget.parentElement.classList.add("is-fallback")}
                    />
                    <span className="ag-tool__fallback" aria-hidden="true">{tool.short}</span>
                    <small>{tool.name}</small>
                  </span>
                ))}
              </div>
            </div>
          );
        })}
        </div>
        <div className="ag-automation-core" aria-label="STAMINEX centraliza tus automatizaciones">
          <span className="ag-automation-core__ring ag-automation-core__ring--outer" />
          <span className="ag-automation-core__ring ag-automation-core__ring--inner" />
          <span className="ag-automation-core__orbit"><i /><i /><i /></span>
          <span className="ag-automation-core__logo"><img src="assets/staminex-mark.png" alt="STAMINEX Tech" /></span>
          <strong>STAMINEX</strong>
          <small>Automatizaciones</small>
        </div>
      </div>
    </section>
  );
}

function StamConnectProduct() {
  return (
    <section className="ag-section ag-product" aria-labelledby="ag-product-title">
      <div className="ag-container">
        <div className="ag-product__card reveal">
          <div className="ag-product__copy">
            <span className="ag-product__label"><Icon name="sparkle2" size={16} /> Producto STAMINEX</span>
            <h2 id="ag-product-title">STAM <span>Connect</span></h2>
            <p>Una plataforma creada por STAMINEX para automatizar atención y procesos conversacionales. Es un producto propio, distinto de nuestro servicio de agencia y desarrollo a medida.</p>
            <a className="ag-product__cta" href="stam-connect.html">Conocer STAM Connect <Icon name="arrow" size={18} /></a>
          </div>
          <div className="ag-product__visual" aria-hidden="true">
            <div className="ag-product__orb"><Icon name="chat" size={48} /></div>
            <span className="ag-product__chip ag-product__chip--one"><Icon name="bot" size={18} /> Atención</span>
            <span className="ag-product__chip ag-product__chip--two"><Icon name="bolt" size={18} /> Automatización</span>
            <span className="ag-product__chip ag-product__chip--three"><Icon name="bars" size={18} /> Seguimiento</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function AgencyFAQ() {
  const [openIndex, setOpenIndex] = React.useState(0);
  const baseId = React.useId().replace(/:/g, "");

  return (
    <section className="ag-section ag-faq" id="preguntas-agencia" aria-labelledby={baseId + "-title"}>
      <div className="ag-container ag-faq__layout">
        <header className="ag-faq__head reveal">
          <span className="ag-kicker">Preguntas frecuentes</span>
          <h2 className="ag-title" id={baseId + "-title"}>Antes de empezar, hablemos claro.</h2>
          <p>Algunas respuestas sobre el alcance, la integración y la relación entre la agencia y STAM Connect.</p>
        </header>
        <div className="ag-faq__list reveal d2">
          {AGENCY_FAQS.map((item, index) => {
            const isOpen = openIndex === index;
            const buttonId = baseId + "-question-" + index;
            const panelId = baseId + "-answer-" + index;
            return (
              <div className={"ag-faq__item" + (isOpen ? " is-open" : "")} key={item.question}>
                <h3>
                  <button
                    type="button"
                    id={buttonId}
                    aria-expanded={isOpen}
                    aria-controls={panelId}
                    onClick={() => setOpenIndex(isOpen ? -1 : index)}
                  >
                    <span>{item.question}</span>
                    <span className="ag-faq__plus" aria-hidden="true" />
                  </button>
                </h3>
                <div className="ag-faq__answer" id={panelId} role="region" aria-labelledby={buttonId} hidden={!isOpen}>
                  <p>{item.answer}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  AgencyAbout,
  AgencyMetrics,
  AgencyServices,
  AgencyProcess,
  AgencyAutomation,
  StamConnectProduct,
  AgencyFAQ,
});