/* triaz-sections.jsx — Nav, Hero, HeroMock, PlataformaMock */

/* ============================================================ */
/*  NAV                                                          */
/* ============================================================ */

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav style={{
      position: "sticky", top: 0, zIndex: 50, height: 68,
      display: "flex", alignItems: "center", padding: "0 32px",
      background: scrolled ? "rgba(242,238,231,0.86)" : "transparent",
      backdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
      borderBottom: scrolled ? "1px solid var(--line-light)" : "1px solid transparent",
      transition: "all 220ms var(--ease-out)",
    }}>
      <a href="/" style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <TriazWordmark height={22} fill="var(--ink)" />
        <span style={{
          paddingLeft: 14, borderLeft: "1px solid var(--line-light)",
          fontFamily: "var(--font-mono)", fontSize: 11,
          color: "var(--steel)", letterSpacing: "0.08em", textTransform: "uppercase",
        }}>
          IA aplicada a tu operación
        </span>
      </a>
      <div style={{ flex: 1 }} />
      <ul className="hide-md" style={{ display: "flex", gap: 32, listStyle: "none", margin: 0, padding: 0 }}>
        {[
          ["Servicio",     "#servicio"],
          ["Casos de uso", "#casos"],
          ["Plataforma",   "#plataforma"],
          ["Proceso",      "#proceso"],
          ["Pilares",      "#pilares"],
        ].map(([l, href]) => (
          <li key={l}>
            <a href={href} className="nav-link" style={{
              fontSize: 13.5, fontWeight: 500, color: "var(--ink)",
            }}>{l}</a>
          </li>
        ))}
      </ul>
      <div style={{ display: "flex", gap: 10, marginLeft: 32 }}>
        <a href="#cta" className="btn btn-primary btn-sm">
          Solicitar diagnóstico
          <Icon name="arrow-right" size={13} />
        </a>
      </div>
    </nav>
  );
}

/* ============================================================ */
/*  HERO — split layout: copy left, app preview right            */
/* ============================================================ */

function Hero() {
  return (
    <section style={{ position: "relative" }}>
      {/* faint warm halo — replaces the blue gradient */}
      <div style={{
        position: "absolute", inset: "-80px 0 -40px", pointerEvents: "none", zIndex: 0,
        background:
          "radial-gradient(38% 48% at 24% 28%, rgba(184,136,74,0.10), transparent 65%), " +
          "radial-gradient(40% 50% at 80% 70%, rgba(184,136,74,0.06), transparent 70%)",
      }} />

      <div className="grid-2-md" style={{
        position: "relative", zIndex: 1,
        maxWidth: 1280, margin: "0 auto",
        padding: "84px 32px 60px",
        display: "grid", gridTemplateColumns: "1fr 1.1fr",
        gap: 60, alignItems: "center",
      }}>
        {/* Left: copy */}
        <div>
          <Eyebrow>Triaz · IA aplicada a tu operación</Eyebrow>
          <h1 className="display-l" style={{ margin: "22px 0 22px", maxWidth: "14ch" }}>
            Inteligencia artificial, <em style={{ fontStyle: "normal", color: "var(--copper)" }}>aplicada</em> en tu empresa.
          </h1>
          <p className="lede" style={{ margin: "0 0 28px", maxWidth: 540 }}>
            Un experto a tu lado, una plataforma única y agentes de IA que se encargan
            del trabajo repetitivo del día a día. Todo en un mismo sitio, fácil de usar
            y pensado para tu negocio.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 24 }}>
            <a href="#cta" className="btn btn-primary btn-lg">
              Solicitar diagnóstico
              <Icon name="arrow-right" size={15} />
            </a>
            <a href="#cta" className="btn btn-secondary btn-lg">
              Hablar con un especialista
            </a>
          </div>

        </div>

        {/* Right: app preview */}
        <HeroMock />
      </div>

      {/* Logos strip */}
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 32px 96px", position: "relative", zIndex: 1 }}>
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "center",
          gap: 40, paddingTop: 28,
          borderTop: "1px solid var(--line-light)",
          flexWrap: "wrap",
        }}>
          <span className="mono" style={{
            fontSize: 11, color: "var(--steel)",
            letterSpacing: "0.08em", textTransform: "uppercase",
          }}>
            Operan con Triaz
          </span>
          {["HTERRATS CONSTRUCCIONES", "TR COOLING", "VECTOR HORIZONTE", "GRUPO LIÑAGAR", "ROOM GLOBAL"].map(n => (
            <span key={n} style={{
              fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 13,
              letterSpacing: "0.18em", color: "var(--steel)",
            }}>{n}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ */
/*  HERO MOCK — compact app preview                              */
/* ============================================================ */

function HeroMock() {
  const events = [
    { dot: "var(--copper)",  agent: "A6 · facturas", msg: "3 facturas vinculadas a proyecto y partida",       time: "hace 4 min"  },
    { dot: "#B8884A",        agent: "A8 · control",  msg: "Aviso: desviación +1,4% en 03 Cerramientos",       time: "hace 12 min", tone: "warn" },
    { dot: "#4F7A4A",        agent: "A2 · presup.",  msg: "Borrador v.07 listo — 12 partidas reaprovechadas", time: "hace 1 h"    },
    { dot: "var(--steel)",   agent: "A7 · cert.",    msg: "Cert. #09 contrastada vs. contrato C-0411",        time: "hace 2 h"    },
  ];
  return (
    <div style={{ position: "relative" }}>
      <div style={{
        position: "absolute", inset: "-30px -16px",
        background: "radial-gradient(45% 50% at 50% 45%, rgba(184,136,74,0.14), transparent 70%)",
        pointerEvents: "none", zIndex: 0,
      }} />

      <div style={{
        position: "relative", zIndex: 1,
        background: "#FBF8F2",
        border: "1px solid var(--line-light)",
        borderRadius: "var(--r-3)",
        boxShadow: "var(--shadow-3)",
        overflow: "hidden",
      }}>
        {/* title bar — window controls only */}
        <div style={{
          display: "flex", alignItems: "center", gap: 6,
          padding: "10px 14px",
          background: "var(--bone-2)",
          borderBottom: "1px solid var(--line-light)",
        }}>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: "#9A3A2E" }} />
          <span style={{ width: 8, height: 8, borderRadius: 999, background: "#B8884A" }} />
          <span style={{ width: 8, height: 8, borderRadius: 999, background: "#4F7A4A" }} />
        </div>

        <div style={{ padding: "18px 20px", display: "flex", flexDirection: "column", gap: 16 }}>
          {/* breadcrumb */}
          <div style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--steel)",
          }}>
            <span>obras &nbsp;›&nbsp; <span style={{ color: "var(--ink)", fontWeight: 500 }}>Av. Diagonal 421</span></span>
            <span style={{
              display: "inline-flex", alignItems: "center", gap: 6,
              padding: "3px 10px", borderRadius: 2,
              background: "var(--copper-soft)", color: "#76542A",
              fontSize: 10, fontWeight: 500, letterSpacing: "0.06em", textTransform: "uppercase",
            }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--copper)" }} />
              4 agentes activos
            </span>
          </div>

          {/* project header */}
          <div>
            <h3 style={{ fontSize: 17, fontWeight: 500, color: "var(--ink)", letterSpacing: "-0.012em" }}>
              Certificación #09 — mayo 2026
            </h3>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--steel)", marginTop: 4 }}>
              cliente Promotora S · contrato C-0411 · día 47 / 120
            </div>
          </div>

          {/* KPI tiles */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
            {[
              { l: "Avance",          v: "74%",   tone: "ok"      },
              { l: "Coste / presup.", v: "62%",   tone: "neutral" },
              { l: "Desviación",      v: "+1,4%", tone: "warn"    },
            ].map((k, i) => (
              <div key={i} style={{
                background: "var(--bone)", border: "1px solid var(--line-light)",
                borderRadius: "var(--r-2)", padding: "10px 12px",
              }}>
                <div className="mono" style={{
                  fontSize: 9.5, color: "var(--steel)",
                  letterSpacing: "0.06em", textTransform: "uppercase",
                }}>{k.l}</div>
                <div className="num" style={{
                  fontSize: 20, fontWeight: 500, letterSpacing: "-0.015em", marginTop: 2,
                  color: k.tone === "warn" ? "#9A3A2E" : k.tone === "ok" ? "#4F7A4A" : "var(--ink)",
                }}>{k.v}</div>
              </div>
            ))}
          </div>

          {/* agent feed */}
          <div>
            <div className="mono" style={{
              fontSize: 10, color: "var(--steel)",
              letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 8,
            }}>
              Actividad de agentes
            </div>
            <div style={{
              background: "var(--bone)", border: "1px solid var(--line-light)",
              borderRadius: "var(--r-2)",
            }}>
              {events.map((e, i) => (
                <div key={i} style={{
                  display: "grid", gridTemplateColumns: "10px 92px 1fr auto",
                  gap: 10, alignItems: "center",
                  padding: "9px 12px",
                  borderTop: i === 0 ? "none" : "1px solid var(--line-light)",
                }}>
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: e.dot }} />
                  <span className="mono" style={{ fontSize: 11, color: "var(--ink)", fontWeight: 500 }}>{e.agent}</span>
                  <span style={{ fontSize: 12.5, color: "var(--ink)",
                    whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{e.msg}</span>
                  <span className="mono" style={{ fontSize: 10, color: "var(--steel)" }}>{e.time}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* floating chip — consultant indicator */}
      <div style={{
        position: "absolute", top: -16, right: -16, zIndex: 2,
        display: "inline-flex", alignItems: "center", gap: 8,
        padding: "7px 14px",
        background: "var(--ink)", color: "var(--bone)",
        borderRadius: 2, boxShadow: "var(--shadow-2)",
        fontFamily: "var(--font-mono)", fontSize: 10.5,
        letterSpacing: "0.06em", textTransform: "uppercase",
      }}>
        <span style={{
          width: 7, height: 7, borderRadius: 999, background: "var(--copper)",
          boxShadow: "0 0 0 3px rgba(184,136,74,0.22)",
        }} />
        consultor revisando
      </div>

      {/* floating mini-card — review meeting */}
      <div style={{
        position: "absolute", bottom: -20, left: -20, zIndex: 2,
        background: "#FBF8F2",
        border: "1px solid var(--line-light)",
        borderRadius: "var(--r-2)",
        boxShadow: "var(--shadow-2)",
        padding: "12px 14px",
        display: "flex", alignItems: "center", gap: 10,
        maxWidth: 250,
      }}>
        <TriazTile size={32} bg="var(--ink)" fg="var(--copper)" radius={2} />
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink)" }}>M. Vidal — Triaz</div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--steel)" }}>review mensual · lun 09:30</div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================ */
/*  PLATAFORMA MOCK — full platform preview                      */
/* ============================================================ */

function PlataformaMock() {
  const nav = [
    { icon: "layout-dashboard", l: "Inicio",            a: false },
    { icon: "file-search",      l: "Estudios",          a: false },
    { icon: "wallet",           l: "Presupuestos",      a: false },
    { icon: "truck",            l: "Proveedores",       a: false },
    { icon: "calendar-clock",   l: "Planificación",     a: false },
    { icon: "clipboard-list",   l: "Partes",            a: false },
    { icon: "receipt",          l: "Facturas",          a: false },
    { icon: "shield-check",     l: "Certificaciones",   a: true  },
    { icon: "trending-up",      l: "Control económico", a: false },
    { icon: "folder",           l: "Documentación",     a: false },
  ];
  const kpis = [
    { l: "Coste real / presup.", v: "62%",     d: "al día",            tone: "neutral" },
    { l: "Avance",               v: "74%",     d: "+3 pp esta semana", tone: "ok"      },
    { l: "Desviación acum.",     v: "+1,4%",   d: "dentro del umbral", tone: "warn"    },
    { l: "Pendiente certificar", v: "€ 18,4k", d: "cert. #09",         tone: "neutral" },
  ];
  const events = [
    { dot: "var(--copper)", agent: "A7 · cert.",     msg: "Contrastó partida 03.2 vs. contrato C-0411 — OK",     time: "hace 4 min" },
    { dot: "#9A3A2E",       agent: "A8 · control",   msg: "Aviso: desviación +1,4% en 03 Cerramientos",          time: "hace 12 min" },
    { dot: "#4F7A4A",       agent: "A6 · facturas",  msg: "3 facturas vinculadas a proyecto y partida",          time: "hace 1 h" },
    { dot: "var(--copper)", agent: "A3 · prov.",     msg: "Recibidas 4 ofertas para 04.1 — listas para comparar", time: "hace 2 h" },
  ];
  return (
    <section id="plataforma" style={{ position: "relative", padding: "96px 32px 96px", background: "var(--bg-1)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative" }}>

        <div style={{ marginBottom: 36, textAlign: "center", maxWidth: 780, marginLeft: "auto", marginRight: "auto" }}>
          <Eyebrow>La plataforma</Eyebrow>
          <h2 className="display-m" style={{ margin: "16px 0 14px", letterSpacing: "-0.025em" }}>
            Toda la operación<br/><span style={{ color: "var(--copper)" }}>en un mismo lugar.</span>
          </h2>
          <p className="lede" style={{ margin: "0 auto", color: "var(--steel)", maxWidth: "none" }}>
            Estudios, presupuestos, proveedores, planificación, partes, facturas, certificaciones, control<br/>
            económico y documentación. Una sola vista por proyecto o unidad de negocio. Sin ERP, sin software de terceros.
          </p>
        </div>

        <div style={{
          background: "#FBF8F2",
          border: "1px solid var(--line-light)",
          borderRadius: "var(--r-3)",
          boxShadow: "var(--shadow-3)",
          overflow: "hidden",
        }}>
          <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", minHeight: 560 }}>
            {/* Sidebar */}
            <aside style={{
              background: "var(--bone-2)",
              borderRight: "1px solid var(--line-light)",
              padding: "18px 12px",
              display: "flex", flexDirection: "column", gap: 4,
            }}>
              <div style={{
                display: "flex", alignItems: "center", gap: 10,
                padding: "4px 8px 16px",
                borderBottom: "1px solid var(--line-light)", marginBottom: 12,
              }}>
                <TriazTile size={22} bg="var(--ink)" fg="var(--copper)" radius={2} />
                <TriazWordmark height={12} fill="var(--ink)" />
                <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--steel)" }}>v2.4</span>
              </div>
              <div className="mono" style={{
                fontSize: 10, color: "var(--steel)",
                letterSpacing: "0.08em", textTransform: "uppercase", padding: "0 8px 6px",
              }}>
                Operación
              </div>
              {nav.map((n, i) => (
                <a key={i} href="#" style={{
                  display: "flex", alignItems: "center", gap: 10,
                  padding: "7px 10px", borderRadius: 2,
                  fontSize: 13, fontWeight: n.a ? 500 : 400,
                  color: n.a ? "var(--ink)" : "var(--steel)",
                  background: n.a ? "var(--copper-soft)" : "transparent",
                  borderLeft: n.a ? "2px solid var(--copper)" : "2px solid transparent",
                  paddingLeft: n.a ? 12 : 14,
                  marginLeft: n.a ? -2 : 0,
                }}>
                  <Icon name={n.icon} size={14} color={n.a ? "var(--ink)" : "var(--steel)"} />
                  {n.l}
                </a>
              ))}
              <div className="mono" style={{
                fontSize: 10, color: "var(--steel)",
                letterSpacing: "0.08em", textTransform: "uppercase",
                padding: "14px 8px 6px",
              }}>
                Tu equipo
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "6px 8px" }}>
                <div style={{
                  width: 26, height: 26, borderRadius: 999,
                  background: "var(--copper-soft)", color: "#76542A",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontSize: 11, fontWeight: 500,
                }}>MR</div>
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink)" }}>Marta R.</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--steel)" }}>PM · Diagonal 421</div>
                </div>
              </div>
            </aside>

            {/* Main */}
            <div style={{ padding: "20px 24px", display: "flex", flexDirection: "column", gap: 18 }}>
              {/* Topbar */}
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div className="mono" style={{
                  display: "flex", alignItems: "center", gap: 8,
                  fontSize: 11.5, color: "var(--steel)",
                }}>
                  <span>obras</span>
                  <Icon name="chevron-right" size={11} color="var(--steel-2)" />
                  <span style={{ color: "var(--ink)", fontWeight: 500 }}>Av. Diagonal 421</span>
                  <Icon name="chevron-right" size={11} color="var(--steel-2)" />
                  <span>certificaciones</span>
                </div>
                <div style={{
                  display: "inline-flex", alignItems: "center", gap: 8,
                  padding: "5px 12px",
                  border: "1px solid var(--line-light)",
                  borderRadius: 2,
                  background: "var(--bone)",
                  fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--steel)",
                }}>
                  <Icon name="search" size={12} color="var(--steel)" />
                  Buscar partida, factura, parte…
                  <span style={{
                    fontFamily: "var(--font-mono)", fontSize: 10,
                    padding: "2px 6px", background: "#FFFFFF",
                    border: "1px solid var(--line-light)", borderRadius: 2,
                  }}>⌘K</span>
                </div>
              </div>

              {/* Project header */}
              <div style={{
                display: "flex", alignItems: "flex-end", justifyContent: "space-between",
                gap: 14, paddingBottom: 14, borderBottom: "1px solid var(--line-light)",
              }}>
                <div>
                  <h3 style={{ fontSize: 22, fontWeight: 500, color: "var(--ink)", letterSpacing: "-0.018em" }}>
                    Certificación #09 — mayo 2026
                  </h3>
                  <div className="mono" style={{ fontSize: 11.5, color: "var(--steel)", marginTop: 4 }}>
                    obra Diagonal 421 · cliente Promotora S · contrato C-0411 · día 47 / 120
                  </div>
                </div>
                <div style={{
                  display: "inline-flex", alignItems: "center", gap: 8,
                  padding: "5px 12px", borderRadius: 2,
                  background: "var(--copper-soft)", color: "#76542A",
                  fontFamily: "var(--font-mono)", fontSize: 10.5,
                  letterSpacing: "0.06em", textTransform: "uppercase",
                }}>
                  <span style={{
                    width: 7, height: 7, borderRadius: 999, background: "var(--copper)",
                    boxShadow: "0 0 0 3px rgba(184,136,74,0.22)",
                  }} />
                  agente A7 validando
                </div>
              </div>

              {/* KPIs */}
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
                {kpis.map((k, i) => (
                  <div key={i} style={{
                    background: "var(--bone)",
                    border: "1px solid var(--line-light)",
                    borderRadius: "var(--r-2)",
                    padding: "12px 14px",
                  }}>
                    <div className="mono" style={{
                      fontSize: 10, color: "var(--steel)",
                      letterSpacing: "0.06em", textTransform: "uppercase",
                    }}>{k.l}</div>
                    <div className="num" style={{
                      fontSize: 26, fontWeight: 500, letterSpacing: "-0.02em", marginTop: 4,
                      color: k.tone === "warn" ? "#9A3A2E" : k.tone === "ok" ? "#4F7A4A" : "var(--ink)",
                    }}>{k.v}</div>
                    <div style={{
                      fontSize: 11.5, marginTop: 2,
                      color: k.tone === "ok" ? "#4F7A4A" : k.tone === "warn" ? "#9A3A2E" : "var(--steel)",
                    }}>{k.d}</div>
                  </div>
                ))}
              </div>

              {/* Gantt strip */}
              <div>
                <div className="mono" style={{
                  fontSize: 10, color: "var(--steel)",
                  letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 10,
                }}>
                  Planificación — hitos próximos
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", rowGap: 8, columnGap: 14 }}>
                  {[
                    ["Estructura",    { l: 4,  w: 32, c: "#4F7A4A" }],
                    ["Cerramientos",  { l: 28, w: 34, c: "var(--copper)" }],
                    ["Instalaciones", { l: 50, w: 38, c: "var(--ink)" }],
                    ["Acabados",      { l: 70, w: 28, c: "var(--steel)" }],
                  ].map(([label, b], i) => (
                    <React.Fragment key={i}>
                      <span style={{ fontSize: 12, color: "var(--ink)" }}>{label}</span>
                      <div style={{
                        position: "relative", height: 12,
                        background: "var(--bone-2)", border: "1px solid var(--line-light)",
                      }}>
                        <span style={{
                          position: "absolute", top: 0, bottom: 0,
                          left: b.l + "%", width: b.w + "%",
                          background: b.c,
                        }} />
                      </div>
                    </React.Fragment>
                  ))}
                </div>
              </div>

              {/* Agent feed */}
              <div>
                <div className="mono" style={{
                  fontSize: 10, color: "var(--steel)",
                  letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 8,
                }}>
                  Actividad de agentes
                </div>
                <div style={{
                  background: "var(--bone)",
                  border: "1px solid var(--line-light)",
                  borderRadius: "var(--r-2)",
                }}>
                  {events.map((e, i) => (
                    <div key={i} className="ink-feed-line" style={{
                      display: "grid", gridTemplateColumns: "12px 110px 1fr auto",
                      gap: 14, alignItems: "center",
                      padding: "10px 14px",
                    }}>
                      <span style={{ width: 7, height: 7, borderRadius: 999, background: e.dot }} />
                      <span className="mono" style={{ fontSize: 11.5, color: "var(--ink)", fontWeight: 500 }}>{e.agent}</span>
                      <span style={{ fontSize: 13, color: "var(--ink)" }}>{e.msg}</span>
                      <span className="mono" style={{ fontSize: 11, color: "var(--steel)" }}>{e.time}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, HeroMock, PlataformaMock });