/* construccion-sections-2.jsx — Sistema (3 pilares), Agentes (casos),
   Caso H. Terrats, Proceso, Objeciones                                  */

/* ============================================================ */
/*  SISTEMA · TRES PILARES                                       */
/* ============================================================ */

function Sistema() {
  const pilares = [
    {
      n: "01", code: "CONSULTOR", icon: "user-round-check",
      title: "Un especialista asignado a tu cuenta",
      body: "Una persona que conoce tu operación de obra, prioriza las mejoras, las implanta y mide resultados. Tienes capacidad de datos e IA sin contratar un responsable interno.",
      points: ["Reunión recurrente contigo", "Prioriza por impacto", "Implanta y mide"]
    },
    {
      n: "02", code: "AGENTES", icon: "bot",
      title: "Agentes de IA a medida de tu operativa",
      body: "Comparan ofertas de proveedores, capturan partes por voz, interpretan e imputan facturas, generan certificaciones y detectan desviaciones para avisarte a tiempo.",
      points: ["Sobre tus procesos reales", "Trabajan solos, tú validas", "Se amplían por fases"]
    },
    {
      n: "03", code: "PLATAFORMA", icon: "layout-dashboard",
      title: "Una plataforma donde vive toda la obra",
      body: "Presupuestos, compras, planificación, ejecución, costes, certificaciones y facturación. Datos conectados y fiables en tiempo real. Una sola fuente de verdad.",
      points: ["Del presupuesto a la factura", "Tiempo real", "Datos fiables y conectados"]
    }
  ];
  return (
    <section id="sistema" style={{ background: "var(--bone)", borderTop: "1px solid var(--line-light)", borderBottom: "1px solid var(--line-light)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "104px 32px" }}>
        <div style={{ maxWidth: 760, marginBottom: 52 }}>
          <Eyebrow>Cómo lo resolvemos</Eyebrow>
          <h2 className="display-m" style={{ margin: "16px 0 14px" }}>
            Un sistema vivo. <span style={{ color: "var(--steel)" }}>No un software suelto, no una consultoría puntual.</span>
          </h2>
          <p className="lede" style={{ margin: 0 }}>
            Tres pilares que funcionan juntos. Esa suma es lo que nos diferencia de comprar otra herramienta
            o contratar un proyecto que se entrega y se acaba.
          </p>
        </div>

        <div className="grid-3-md" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16 }}>
          {pilares.map((p) => (
            <div key={p.n} className="card-hover" style={{
              background: "#FBF8F2", border: "1px solid var(--line-light)", borderRadius: "var(--r-3)",
              boxShadow: "var(--shadow-1)", padding: "28px 26px", display: "flex", flexDirection: "column"
            }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20 }}>
                <span style={{
                  width: 46, height: 46, borderRadius: 3, background: "var(--ink)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center"
                }}>
                  <Icon name={p.icon} size={22} color="var(--copper)" />
                </span>
                <span className="mono" style={{ fontSize: 10, color: "var(--steel)", letterSpacing: "0.1em", textTransform: "uppercase" }}>
                  {p.n} · {p.code}
                </span>
              </div>
              <h3 style={{ fontSize: 19, fontWeight: 500, lineHeight: 1.25, letterSpacing: "-0.014em", margin: "0 0 12px" }}>{p.title}</h3>
              <p style={{ margin: "0 0 18px", fontSize: 14.5, lineHeight: 1.6, color: "var(--steel)", flex: 1 }}>{p.body}</p>
              <div style={{ borderTop: "1px dashed var(--line-light)", paddingTop: 16, display: "grid", gap: 8 }}>
                {p.points.map((pt) => (
                  <div key={pt} style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 13, color: "var(--ink-3)" }}>
                    <Icon name="check" size={13} color="var(--copper)" />
                    {pt}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ */
/*  AGENTES · CASOS CONCRETOS                                    */
/* ============================================================ */

function Agentes() {
  const casos = [
    {
      icon: "scale", tag: "Compras",
      title: "Comparativo de proveedores",
      antes: "Pedir ofertas y compararlas a mano: días de emails y hojas de cálculo.",
      ahora: "Reúne las ofertas, las compara por precio, plazo y condiciones y recomienda la mejor en minutos."
    },
    {
      icon: "mic", tag: "Campo",
      title: "Partes por voz desde la obra",
      antes: "El operario apunta horas en papel o no las apunta; alguien las pasa a Excel.",
      ahora: "El operario manda una nota de voz por WhatsApp y el agente imputa horas e incidencias a la obra."
    },
    {
      icon: "receipt", tag: "Administración",
      title: "Facturas interpretadas e imputadas",
      antes: "Teclear cada factura y adivinar a qué obra y partida va.",
      ahora: "Lee la factura del correo, extrae los datos y la imputa a su proyecto y partida para que solo valides."
    },
    {
      icon: "file-check", tag: "Facturación",
      title: "Certificaciones generadas",
      antes: "Montar la certificación a mano cruzando avance, partes y contrato.",
      ahora: "Compone la certificación, la contrasta con el contrato y deja la factura lista para emitir."
    },
    {
      icon: "trending-down", tag: "Control",
      title: "Desviaciones detectadas a tiempo",
      antes: "Descubrir que una obra perdía dinero al cerrarla.",
      ahora: "Cruza presupuesto, costes y horas, detecta la desviación y avisa mientras aún puedes corregir."
    },
    {
      icon: "calendar-clock", tag: "Planificación",
      title: "Planificación siempre al día",
      antes: "Un Gantt que se queda obsoleto a la semana de empezar.",
      ahora: "Reproyecta hitos y dependencias con lo que pasa en obra y avisa de lo que se mueve."
    }
  ];
  return (
    <section id="agentes" style={{ maxWidth: 1280, margin: "0 auto", padding: "104px 32px" }}>
      <div className="grid-2-md" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", alignItems: "flex-end", gap: 32, marginBottom: 52 }}>
        <div>
          <Eyebrow>Agentes en acción</Eyebrow>
          <h2 className="display-m" style={{ margin: "16px 0 0" }}>
            Problemas resueltos, <span style={{ color: "var(--copper)" }}>no "IA" en abstracto.</span>
          </h2>
        </div>
        <p className="lede" style={{ margin: 0 }}>
          Cada agente ataca una tarea concreta que hoy os come horas. Empezamos por la que más duele
          y vamos sumando.
        </p>
      </div>

      <div className="grid-3-md" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16 }}>
        {casos.map((c, i) => (
          <div key={i} className="card-hover" style={{
            background: "#FBF8F2", border: "1px solid var(--line-light)", borderRadius: "var(--r-2)",
            boxShadow: "var(--shadow-1)", padding: "22px 22px 20px", display: "flex", flexDirection: "column"
          }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
              <span style={{
                width: 36, height: 36, borderRadius: 2, background: "var(--bone-2)", border: "1px solid var(--line-light)",
                display: "inline-flex", alignItems: "center", justifyContent: "center"
              }}>
                <Icon name={c.icon} size={18} color="var(--ink)" />
              </span>
              <span className="mono" style={{
                fontSize: 9.5, color: "var(--copper)", letterSpacing: "0.07em", textTransform: "uppercase",
                background: "var(--copper-soft)", padding: "3px 8px", borderRadius: 2, fontWeight: 500
              }}>{c.tag}</span>
            </div>
            <h3 style={{ fontSize: 16, fontWeight: 500, letterSpacing: "-0.012em", margin: "0 0 14px" }}>{c.title}</h3>
            <div style={{ display: "grid", gap: 8 }}>
              <div style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 10, alignItems: "baseline" }}>
                <span className="mono" style={{ fontSize: 9.5, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--steel)" }}>Antes</span>
                <span style={{ fontSize: 12.5, lineHeight: 1.5, color: "var(--steel)" }}>{c.antes}</span>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 10, alignItems: "baseline", paddingTop: 8, borderTop: "1px dashed var(--line-light)" }}>
                <span className="mono" style={{ fontSize: 9.5, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--copper)" }}>Ahora</span>
                <span style={{ fontSize: 12.5, lineHeight: 1.5, color: "var(--ink)" }}>{c.ahora}</span>
              </div>
            </div>
          </div>
        ))}
      </div>

      <p style={{ marginTop: 36, textAlign: "center", fontSize: 19, lineHeight: 1.5, color: "var(--steel)", maxWidth: 720, marginLeft: "auto", marginRight: "auto", letterSpacing: "-0.01em" }}>
        Estos son <strong style={{ color: "var(--ink)", fontWeight: 600 }}>ejemplos</strong>. Diseñamos cada agente a la medida de
        <strong style={{ color: "var(--ink)", fontWeight: 600 }}> tu operativa</strong>, no al revés.
      </p>
    </section>
  );
}

/* ============================================================ */
/*  CASO H. TERRATS                                              */
/* ============================================================ */

function CasoTerrats() {
  return (
    <section id="caso" className="on-ink" style={{ background: "var(--ink)", color: "var(--bone)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "104px 32px", position: "relative" }}>
        <div style={{
          position: "absolute", top: 40, right: 0, width: 480, height: 360,
          background: "radial-gradient(50% 50% at 70% 40%, rgba(184,136,74,0.20), transparent 70%)", pointerEvents: "none"
        }} />
        <div className="grid-2-md" style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
          <div>
            <Eyebrow tone="dark">Caso real · construcción</Eyebrow>
            <div style={{ display: "flex", alignItems: "center", gap: 14, margin: "22px 0 26px" }}>
              <TriazTile size={40} bg="var(--bone)" fg="var(--ink)" radius={3} />
              <div>
                <div style={{ fontSize: 17, fontWeight: 500, color: "var(--bone)" }}>H. Terrats</div>
                <div className="mono" style={{ fontSize: 10.5, color: "var(--steel-2)", letterSpacing: "0.05em", textTransform: "uppercase" }}>Construcción</div>
              </div>
            </div>
            <blockquote style={{ margin: 0, fontSize: 26, fontWeight: 500, lineHeight: 1.32, letterSpacing: "-0.02em", color: "var(--bone)" }}>
              "Hemos recuperado el control de los proyectos y de la empresa. Gracias a Triaz ahora sí podemos
              decir que <span style={{ color: "var(--copper)" }}>usamos IA de verdad</span> en nuestras operaciones."
            </blockquote>
            <div style={{ marginTop: 22, fontSize: 14, color: "var(--steel-2)" }}>
              <strong style={{ color: "var(--bone)", fontWeight: 600 }}>Ángel Baleato</strong> · CEO, H. Terrats
            </div>
          </div>

          {/* the proveedores agent story */}
          <div style={{ background: "var(--ink-2)", border: "1px solid var(--ink-3)", borderRadius: "var(--r-3)", padding: 28 }}>
            <div className="mono" style={{ fontSize: 10.5, color: "var(--copper)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 18 }}>
              Agente · comparativo de proveedores
            </div>
            <div style={{ display: "grid", gap: 14 }}>
              {[
                ["mail", "Reúne las ofertas", "Recoge los presupuestos que llegan por email y los normaliza."],
                ["scale", "Las compara", "Pone precio, plazo y condiciones de cada proveedor lado a lado."],
                ["badge-check", "Recomienda", "Sugiere la mejor opción con el criterio que tú definas."]
              ].map(([icon, t, d], i) => (
                <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                  <span style={{
                    width: 34, height: 34, borderRadius: 2, background: "rgba(184,136,74,0.16)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0
                  }}>
                    <Icon name={icon} size={16} color="var(--copper)" />
                  </span>
                  <div>
                    <div style={{ fontSize: 14.5, fontWeight: 500, color: "var(--bone)" }}>{t}</div>
                    <div style={{ fontSize: 12.5, color: "var(--steel-2)", lineHeight: 1.5, marginTop: 2 }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{
              marginTop: 22, paddingTop: 18, borderTop: "1px solid var(--ink-3)",
              display: "flex", alignItems: "center", justifyContent: "space-between"
            }}>
              <span className="mono" style={{ fontSize: 10.5, color: "var(--steel-2)", letterSpacing: "0.05em", textTransform: "uppercase" }}>Antes: días</span>
              <Icon name="arrow-right" size={15} color="var(--copper)" />
              <span className="mono" style={{ fontSize: 11, color: "var(--copper)", letterSpacing: "0.05em", textTransform: "uppercase", fontWeight: 500 }}>Ahora: minutos</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ */
/*  PROCESO · CÓMO EMPEZAMOS                                     */
/* ============================================================ */

function Proceso() {
  const steps = [
    { n: "01", icon: "search",      t: "Diagnóstico",   b: "Miramos tu operación de obra y detectamos dónde se pierde tiempo y dinero: compras, partes, facturas, costes, certificaciones…" },
    { n: "02", icon: "target",      t: "Priorización",  b: "Elegimos contigo por dónde empezar: lo que más duele y antes da resultado. Sin proyectos eternos." },
    { n: "03", icon: "sparkles",    t: "Implantación",  b: "Conectamos datos y ponemos en marcha los primeros agentes sobre la plataforma. En días, no meses." },
    { n: "04", icon: "refresh-cw",  t: "Escalado",      b: "Cada mes revisamos resultados, ajustamos y sumamos nuevas automatizaciones por fases." }
  ];
  return (
    <section id="proceso" style={{ background: "var(--bone-2)", borderTop: "1px solid var(--line-light)", borderBottom: "1px solid var(--line-light)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "104px 32px" }}>
        <div className="grid-2-md" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", alignItems: "flex-end", gap: 32, marginBottom: 56 }}>
          <div>
            <Eyebrow>Cómo empezamos</Eyebrow>
            <h2 className="display-m" style={{ margin: "16px 0 0" }}>
              En marcha en <span style={{ color: "var(--copper)" }}>días, no meses</span>.
            </h2>
          </div>
          <p className="lede" style={{ margin: 0 }}>
            Empezamos por lo que más duele y escalamos por fases. Sin parar tu operación y sin
            obligarte a cambiar tu ERP.
          </p>
        </div>

        <div className="grid-4-md" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 18, position: "relative" }}>
          <div style={{ position: "absolute", top: 32, left: 32, right: 32, height: 1, background: "var(--line-light)", zIndex: 0 }} />
          {steps.map((s, i) => (
            <div key={s.n} style={{ position: "relative", zIndex: 1 }}>
              <div style={{
                width: 64, height: 64, borderRadius: 3,
                background: i === 0 ? "var(--copper)" : "#FBF8F2",
                border: i === 0 ? "none" : "1px solid var(--line-light)",
                display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 22
              }}>
                <Icon name={s.icon} size={22} color={i === 0 ? "var(--ink)" : "var(--copper)"} />
              </div>
              <div className="mono" style={{ fontSize: 10.5, color: "var(--copper)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 8 }}>Paso {s.n}</div>
              <h3 style={{ fontSize: 19, fontWeight: 500, letterSpacing: "-0.016em", margin: "0 0 10px" }}>{s.t}</h3>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "var(--steel)" }}>{s.b}</p>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 44, display: "flex", flexWrap: "wrap", gap: 12, alignItems: "center", justifyContent: "center"
        }}>
          {[
            ["plug-zap", "Convive con tu ERP actual"],
            ["zap", "Primeros resultados en días"],
            ["layers", "Escala por fases, sin big bang"]
          ].map(([icon, t]) => (
            <span key={t} style={{
              display: "inline-flex", alignItems: "center", gap: 9, padding: "9px 16px",
              background: "#FBF8F2", border: "1px solid var(--line-light)", borderRadius: "var(--r-pill)",
              fontSize: 13, fontWeight: 500, color: "var(--ink)"
            }}>
              <Icon name={icon} size={14} color="var(--copper)" />
              {t}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ */
/*  OBJECIONES                                                   */
/* ============================================================ */

function Objeciones() {
  const items = [
    {
      q: "\"Ya tenemos software.\"",
      a: "El problema no es tener software, es que los datos están dispersos y nadie evoluciona la forma de trabajar. Nos conectamos a lo que ya usáis y le damos vida con datos e IA."
    },
    {
      q: "\"Ya trabajamos con consultoras.\"",
      a: "No entregamos un proyecto y nos vamos. Dejamos un sistema vivo con un especialista que acompaña cada mes, ajusta y suma mejoras de forma continua."
    },
    {
      q: "\"Estamos viendo empresas de IA.\"",
      a: "La mayoría hace agentes sueltos sobre datos desordenados. Nosotros nos ocupamos de la operación completa. Por eso la IA aquí sí da resultados."
    }
  ];
  return (
    <section style={{ maxWidth: 1280, margin: "0 auto", padding: "104px 32px" }}>
      <div style={{ maxWidth: 720, marginBottom: 48 }}>
        <Eyebrow>Lo que sueles pensar</Eyebrow>
        <h2 className="display-m" style={{ margin: "16px 0 0" }}>
          Probablemente ya estés pensando esto.
        </h2>
      </div>
      <div style={{ display: "grid", gap: 0, borderTop: "1px solid var(--line-light)" }}>
        {items.map((it, i) => (
          <div key={i} className="grid-2-md" style={{
            display: "grid", gridTemplateColumns: "0.9fr 1.4fr", gap: 40,
            padding: "30px 0", borderBottom: "1px solid var(--line-light)", alignItems: "flex-start"
          }}>
            <h3 style={{ fontSize: 21, fontWeight: 500, letterSpacing: "-0.018em", color: "var(--ink)" }}>{it.q}</h3>
            <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
              <Icon name="corner-down-right" size={18} color="var(--copper)" style={{ marginTop: 3, flexShrink: 0 }} />
              <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6, color: "var(--steel)" }}>{it.a}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Sistema, Agentes, CasoTerrats, Proceso, Objeciones });