// V3 — Terminal Cinematográfico (versión completa)
// Aesthetic: fondo grafito, mono + sans para títulos, verde fósforo.
// Mundo de DevOps/infra en su lenguaje nativo, con personalidad.

const { PROFILE, STACK, EXPERIENCE, PROJECTS, NUMBERS } = window.PORTFOLIO_DATA;

const SERVICES = [
  {
    code: "INFRA-01",
    title: "Arquitectura de infraestructura",
    desc: "Servidores, redes, virtualización (Proxmox/VMware), storage, alta disponibilidad. Diseño y operación de stacks que no dependen del fin de semana del técnico.",
    tags: ["Linux", "Proxmox", "pfSense", "Tailscale"],
  },
  {
    code: "AUTO-02",
    title: "Automatización de procesos",
    desc: "Si lo hacés más de tres veces al mes, lo automatizo. Flujos n8n, integraciones con APIs, IA aplicada a operación, scripts robustos con retries y alertas.",
    tags: ["n8n", "Python", "Bash", "GitHub Actions"],
  },
  {
    code: "PLAT-03",
    title: "Plataformas a medida",
    desc: "Producto full-stack cuando el SaaS genérico no alcanza. CRM, control de accesos, cartelería, gestión interna — todo conectado a tu infra.",
    tags: ["FastAPI", "React", "PostgreSQL", "WebSockets"],
  },
  {
    code: "OPS-04",
    title: "DevOps y operación",
    desc: "Pipelines CI/CD, despliegues con Docker, monitoreo con Grafana, backups que sí funcionan, runbooks que cualquier humano puede seguir a las 3 AM.",
    tags: ["Docker", "Grafana", "Cloudflare", "Nginx"],
  },
];

const PRINCIPLES = [
  ["01", "Lo manual se rompe.", "Si depende de que alguien se acuerde, va a fallar. La automatización buena es invisible — se nota cuando falta."],
  ["02", "Documentar es parte del trabajo.", "Un sistema sin runbook es un sistema con un único dueño. Eso no es robusto, es frágil disfrazado."],
  ["03", "Monitorear antes que reaccionar.", "Los servidores avisan antes de morir. Hay que saber escuchar — Grafana, Uptime Kuma, alertas a Telegram."],
  ["04", "El usuario final manda.", "La mejor infra del mundo no sirve si la persona que la usa no la entiende. Pensar en quien aprieta el botón."],
];

const NOW_PLAYING = [
  { label: "Trabajando en", value: "Avala v0.4 — flujo de escrow + KYC" },
  { label: "Aprendiendo", value: "Kubernetes en bare-metal con Talos" },
  { label: "Leyendo", value: "Designing Data-Intensive Applications" },
  { label: "Escuchando", value: "Synth + post-rock para deploys nocturnos" },
];

function V3Terminal({ accent = "#54c972", density = "comfy", dark = false, onToggleDark, time }) {
  // Scroll reveal — only first scroll triggers all on mobile
  React.useEffect(() => {
    const isMobile = window.matchMedia("(max-width: 820px)").matches;
    if (!isMobile) return;
    const root = document.querySelector(".v3-root");
    if (!root) return;
    root.classList.add("v3-pre-scroll");
    const reveal = () => {
      root.classList.remove("v3-pre-scroll");
      root.classList.add("v3-scrolled");
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("touchmove", reveal);
    };
    const onScroll = () => {
      if (window.scrollY > 4) reveal();
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("touchmove", reveal, { passive: true });
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("touchmove", reveal);
    };
  }, []);

  const bg = dark ? "#0A0C0A" : "#F5F2EA";
  const fg = dark ? "#E6E8E3" : "#0A0C0A";
  const muted = dark ? "rgba(230,232,227,0.55)" : "rgba(10,12,10,0.6)";
  const dim = dark ? "rgba(230,232,227,0.16)" : "rgba(10,12,10,0.16)";
  const panel = dark ? "#0F1410" : "#EBE7DA";
  const deep = dark ? "#070907" : "#E2DDCC";
  const warn = dark ? "#FFB85C" : "#A65A00";

  const pad = density === "tight" ? 40 : density === "loose" ? 96 : 64;
  const v = density === "tight" ? 56 : density === "loose" ? 128 : 88;

  const Mono = ({ children, style }) => (
    <span style={{ fontFamily: "'JetBrains Mono', monospace", ...style }}>{children}</span>
  );

  const Prompt = ({ children }) => (
    <span><span style={{ color: accent }}>$</span> <span style={{ color: muted }}>{children}</span></span>
  );

  const SectionTag = ({ num, name }) => (
    <div style={{
      display: "flex",
      alignItems: "center",
      gap: 14,
      fontSize: 11,
      textTransform: "uppercase",
      letterSpacing: "0.14em",
      color: accent,
      fontWeight: 600,
    }}>
      <span style={{ width: 28, height: 1, background: accent }}></span>
      <span>SECTION_{num}</span>
      <span style={{ color: muted, fontWeight: 400 }}>// {name}</span>
    </div>
  );

  const SansHeader = ({ children, size = "clamp(48px, 6vw, 88px)", style }) => (
    <h2 style={{
      fontFamily: "'Inter Tight', 'Helvetica Neue', sans-serif",
      fontWeight: 500,
      fontSize: size,
      lineHeight: 0.92,
      letterSpacing: "-0.035em",
      margin: 0,
      color: fg,
      ...style,
    }}>{children}</h2>
  );

  return (
    <div className="v3-root" style={{
      width: "100%",
      background: bg,
      color: fg,
      fontFamily: "'JetBrains Mono', 'SF Mono', monospace",
      fontSize: 14,
      lineHeight: 1.55,
      position: "relative",
      minHeight: "100vh",
    }}>
      {/* Scanlines */}
      <div style={{
        position: "fixed", inset: 0, pointerEvents: "none", zIndex: 1,
        background: `repeating-linear-gradient(0deg, transparent 0, transparent 2px, ${dark ? "rgba(255,255,255,0.014)" : "rgba(0,0,0,0.014)"} 2px, ${dark ? "rgba(255,255,255,0.014)" : "rgba(0,0,0,0.014)"} 3px)`,
      }}></div>
      {/* Vignette */}
      <div style={{
        position: "fixed", inset: 0, pointerEvents: "none", zIndex: 1,
        background: dark
          ? "radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.5) 100%)"
          : "radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.08) 100%)",
      }}></div>

      <div style={{ position: "relative", zIndex: 2 }}>
        {/* TOP STATUS BAR */}
        <header style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr 1fr",
          alignItems: "center",
          padding: `12px ${pad}px`,
          borderBottom: `1px solid ${dim}`,
          fontSize: 11,
          gap: 24,
          background: dark ? "rgba(10,12,10,0.7)" : "rgba(245,242,234,0.7)",
          backdropFilter: "blur(8px)",
          position: "sticky",
          top: 0,
          zIndex: 10,
        }}>
          <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
            <span style={{
              display: "inline-block", width: 9, height: 9, borderRadius: 99,
              background: accent, boxShadow: `0 0 12px ${accent}80`,
              animation: "pulse 2s ease-in-out infinite",
            }}></span>
            <span style={{ color: fg, fontWeight: 500 }}>yeiko@nova:~$</span>
            <span className="v3-mobile-hide-inline" style={{ color: muted }}>./portfolio --watch</span>
          </div>
          <div style={{ textAlign: "center", color: muted, display: "flex", justifyContent: "center", gap: 18 }}>
            <span>uptime <span style={{ color: fg }}>1247d</span></span>
            <span>cpu <span style={{ color: fg }}>3%</span></span>
            <span>mem <span style={{ color: fg }}>412M</span></span>
            <span>net <span style={{ color: accent }}>OK</span></span>
          </div>
          <nav style={{ display: "flex", gap: 22, justifyContent: "flex-end", color: muted, alignItems: "center" }} className="v3-nav">
            <a href="#whoami" style={{ color: "inherit", textDecoration: "none" }}>./whoami</a>
            <a href="#services" style={{ color: "inherit", textDecoration: "none" }}>./services</a>
            <a href="#work" style={{ color: "inherit", textDecoration: "none" }}>./work</a>
            <a href="#log" style={{ color: "inherit", textDecoration: "none" }}>./log</a>
            <a href="#contact" style={{ color: accent, textDecoration: "none" }}>./contact ↗</a>
            <button
              onClick={onToggleDark}
              aria-label="Cambiar tema"
              style={{
                marginLeft: 4,
                width: 28, height: 28,
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                background: "transparent",
                border: `1px solid ${dim}`,
                borderRadius: 4,
                color: fg,
                cursor: "pointer",
                fontSize: 12,
                fontFamily: "inherit",
                transition: "all 0.15s",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = accent; e.currentTarget.style.color = accent; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = dim; e.currentTarget.style.color = fg; }}
            >
              {dark ? "☀" : "☾"}
            </button>
          </nav>
        </header>

        {/* HERO */}
        <section className="v3-hero" style={{ padding: `${v * 0.55}px ${pad}px ${v * 0.55}px`, borderBottom: `1px solid ${dim}`, minHeight: "calc(100vh - 56px)", display: "flex", alignItems: "center" }} id="whoami">
          <div style={{ display: "grid", gridTemplateColumns: "1.55fr 1fr", gap: 80, alignItems: "start", width: "100%" }}>
            <div>
              {/* Boot sequence */}
              <div className="v3-mobile-hide" style={{ marginBottom: 28, color: muted, fontSize: 12.5, lineHeight: 1.7 }}>
                <div><Prompt>whoami</Prompt></div>
                <div style={{ paddingLeft: 16, color: fg }}>yeiko_nova</div>
                <div style={{ marginTop: 6 }}><Prompt>cat /etc/role</Prompt></div>
                <div style={{ paddingLeft: 16, color: fg }}>responsable_de_it_e_innovacion @ ort</div>
                <div style={{ marginTop: 6 }}><Prompt>echo $FOCUS</Prompt></div>
                <div style={{ paddingLeft: 16, color: fg, display: "flex", alignItems: "center", gap: 6 }}>
                  infraestructura · automatización · producto
                  <span style={{
                    display: "inline-block", width: "0.55em", height: "1.05em",
                    background: accent, marginLeft: 4, verticalAlign: "middle",
                    animation: "blink 1s steps(2) infinite",
                  }}></span>
                </div>
              </div>

              <h1 style={{
                fontFamily: "'Inter Tight', 'Helvetica Neue', sans-serif",
                fontWeight: 500,
                fontSize: "clamp(56px, 6.4vw, 108px)",
                lineHeight: 0.92,
                letterSpacing: "-0.045em",
                margin: 0,
                color: fg,
              }}>
                <span style={{ color: accent }}>&gt;</span> Construyo<br />
                <span style={{ color: muted, fontWeight: 300 }}>infraestructura</span><br />
                <span style={{ color: muted, fontWeight: 300 }}>que se siente</span><br />
                <span style={{ color: muted, fontStyle: "italic", fontWeight: 300 }}>como software.</span>
              </h1>

              <p style={{
                fontFamily: "'Inter Tight', sans-serif",
                fontSize: 18,
                lineHeight: 1.5,
                color: fg,
                margin: "28px 0 0",
                maxWidth: 580,
              }}>
                Estudiante de Infraestructura en <span style={{ color: accent }}>ORT</span>, Responsable de IT e Innovación. Conecto la estabilidad del networking clásico con la agilidad del DevOps moderno — porque tu operación no debería depender de un pendrive ni de un único técnico que sabe el secreto.
              </p>

              <div style={{ marginTop: 28, display: "flex", gap: 14, flexWrap: "wrap" }}>
                <a href="#work" style={{
                  display: "inline-flex", alignItems: "center", gap: 12,
                  padding: "14px 22px",
                  background: accent,
                  color: "#0A0C0A",
                  textDecoration: "none",
                  fontWeight: 600,
                  fontSize: 13,
                  letterSpacing: "0.04em",
                }}>
                  <span>./run --see-work</span>
                  <span>↘</span>
                </a>
                <a href="#contact" style={{
                  display: "inline-flex", alignItems: "center", gap: 12,
                  padding: "14px 22px",
                  border: `1px solid ${fg}`,
                  color: fg,
                  textDecoration: "none",
                  fontSize: 13,
                  letterSpacing: "0.04em",
                }}>
                  <span>./hire --status=available</span>
                </a>
              </div>
            </div>

            {/* RIGHT — profile.json + now playing */}
            <div className="v3-mobile-hide" style={{ display: "flex", flexDirection: "column", gap: 20, position: "sticky", top: 80 }}>
              {/* profile.json */}
              <div style={{ border: `1px solid ${dim}`, background: panel }}>
                <div style={{
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                  padding: "10px 16px", borderBottom: `1px solid ${dim}`,
                  fontSize: 11, color: muted,
                }}>
                  <div style={{ display: "flex", gap: 8 }}>
                    <span style={{ width: 10, height: 10, borderRadius: 99, background: "#FF5F56" }}></span>
                    <span style={{ width: 10, height: 10, borderRadius: 99, background: "#FFBD2E" }}></span>
                    <span style={{ width: 10, height: 10, borderRadius: 99, background: accent }}></span>
                  </div>
                  <span>~/profile.json</span>
                  <span style={{ color: accent }}>● 200</span>
                </div>
                <pre style={{
                  margin: 0, padding: 18, color: fg, fontSize: 12, lineHeight: 1.75,
                  whiteSpace: "pre-wrap", wordBreak: "break-word",
                }}>
{`{
  "name":      "Yeiko Nova",
  "role":      "Infra · Automation",
  "study":     "ORT — Infraestructura",
  "location":  "Montevideo, UY",
  "status":    `}<span style={{ color: accent }}>{`"available"`}</span>{`,
  "focus":     [
    "DevOps", "Networking",
    "Plataformas IoT"
  ],
  "obsessions": ["n8n", "escrow", "ws"],
  "version":    "v4.4.0"
}`}
                </pre>
              </div>

              {/* now playing */}
              <div style={{ border: `1px solid ${dim}`, background: panel, padding: 18 }}>
                <div style={{
                  display: "flex", justifyContent: "space-between",
                  fontSize: 11, color: muted, marginBottom: 14,
                  textTransform: "uppercase", letterSpacing: "0.1em",
                }}>
                  <span>// now playing</span>
                  <span style={{ color: accent }}>LIVE</span>
                </div>
                {NOW_PLAYING.map((n, i) => (
                  <div key={i} style={{
                    display: "grid", gridTemplateColumns: "100px 1fr",
                    gap: 14, fontSize: 12, padding: "8px 0",
                    borderTop: i > 0 ? `1px dashed ${dim}` : "none",
                  }}>
                    <span style={{ color: muted }}>{n.label}</span>
                    <span style={{ color: fg }}>{n.value}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* STATS STRIP — separate section so hero stays in viewport */}
        <section className="v3-mobile-hide" style={{
          padding: `${v * 0.6}px ${pad}px`,
          borderBottom: `1px solid ${dim}`,
          background: bg,
        }}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            border: `1px solid ${dim}`,
            background: panel,
          }}>
            {NUMBERS.map((n, i) => (
              <div key={i} style={{
                padding: "28px 32px",
                borderRight: i < 3 ? `1px solid ${dim}` : "none",
                position: "relative",
              }}>
                <div style={{
                  position: "absolute", top: 12, right: 12,
                  fontSize: 10, color: muted,
                }}>0{i+1}</div>
                <div style={{
                  fontFamily: "'Inter Tight', sans-serif",
                  fontSize: 64, fontWeight: 500,
                  letterSpacing: "-0.045em",
                  color: i === 0 ? accent : fg,
                  lineHeight: 1,
                }}>{n.value}</div>
                <div style={{
                  fontSize: 11, color: muted, marginTop: 14,
                  textTransform: "uppercase", letterSpacing: "0.1em",
                }}>{n.label}</div>
              </div>
            ))}
          </div>
        </section>

        {/* MARQUEE STACK */}
        <div className="v3-marquee" style={{
          padding: "20px 0", overflow: "hidden", whiteSpace: "nowrap",
          borderBottom: `1px solid ${dim}`,
          background: deep,
        }}>
          <div style={{
            display: "inline-flex", gap: 56, fontSize: 16,
            color: muted, animation: "marquee 50s linear infinite",
          }}>
            {[...STACK, ...STACK, ...STACK].map((s, i) => (
              <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 56 }}>
                <span style={{ color: fg }}>{s}</span>
                <span style={{ color: accent }}>◆</span>
              </span>
            ))}
          </div>
        </div>

        {/* ABOUT — log */}
        <section style={{ padding: `${v}px ${pad}px`, borderBottom: `1px solid ${dim}` }} id="about">
          <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 64, marginBottom: 56 }}>
            <div>
              <SectionTag num="02" name="sobre /yo/" />
              <SansHeader style={{ marginTop: 22 }} size="clamp(44px, 5vw, 76px)">
                Sobre /<span style={{ color: accent }}>yo</span>/.
              </SansHeader>
            </div>
            <div style={{ alignSelf: "end", color: muted, fontSize: 13, maxWidth: 480 }}>
              <Prompt>tail -f /var/log/about.log</Prompt>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
            {/* LOG */}
            <div>
              {[
                ["INFO", "2026-04-22T09:14:07", PROFILE.longBio[0]],
                ["INFO", "2026-04-23T11:02:14", PROFILE.longBio[1]],
                ["WARN", "2026-04-24T16:48:00", "Si tu operación todavía depende de un único técnico que sabe el secreto, eso no es un sistema — es una superstición."],
                ["OK",   "2026-04-25T08:31:55", "La automatización buena es invisible: se nota cuando falta. Cierro tickets, no los acumulo."],
              ].map(([level, ts, line], i) => (
                <div key={i} style={{
                  display: "grid",
                  gridTemplateColumns: "180px 60px 1fr",
                  gap: 16, padding: "20px 0",
                  borderTop: `1px solid ${dim}`,
                  fontSize: 14, alignItems: "start",
                }}>
                  <span style={{ color: muted, fontSize: 11 }}>{ts}</span>
                  <span style={{
                    color: level === "WARN" ? warn : level === "OK" ? accent : muted,
                    fontWeight: 600, fontSize: 11,
                  }}>[{level}]</span>
                  <span style={{
                    fontFamily: "'Inter Tight', sans-serif",
                    fontSize: 17, lineHeight: 1.55, color: fg,
                  }}>{line}</span>
                </div>
              ))}
            </div>

            {/* PRINCIPLES */}
            <div>
              <div style={{ color: muted, fontSize: 11, textTransform: "uppercase", letterSpacing: "0.12em", marginBottom: 18 }}>
                // principios.txt
              </div>
              {PRINCIPLES.map(([n, t, d], i) => (
                <div key={i} style={{
                  display: "grid", gridTemplateColumns: "auto 1fr",
                  gap: 18, padding: "18px 0",
                  borderTop: `1px solid ${dim}`,
                }}>
                  <span style={{ color: accent, fontSize: 14 }}>[{n}]</span>
                  <div>
                    <div style={{
                      fontFamily: "'Inter Tight', sans-serif",
                      fontSize: 19, fontWeight: 500,
                      letterSpacing: "-0.015em",
                      color: fg, marginBottom: 6,
                    }}>{t}</div>
                    <div style={{
                      fontFamily: "'Inter Tight', sans-serif",
                      fontSize: 14, lineHeight: 1.55, color: muted,
                    }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* SERVICES */}
        <section style={{ padding: `${v}px ${pad}px`, borderBottom: `1px solid ${dim}` }} id="services">
          <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 64, marginBottom: 56, alignItems: "end" }}>
            <SectionTag num="03" name="servicios activos" />
            <SansHeader size="clamp(48px, 6vw, 88px)">
              ./services <span style={{ color: muted }}>—</span> qué puedo hacer<br />por tu operación.
            </SansHeader>
          </div>

          <div style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            border: `1px solid ${dim}`,
          }} className="v3-services-grid">
            {SERVICES.map((s, i) => (
              <div key={s.code} className="v3-service-card" style={{
                padding: 36,
                background: panel,
                borderRight: i % 2 === 0 ? `1px solid ${dim}` : "none",
                borderBottom: i < 2 ? `1px solid ${dim}` : "none",
                display: "flex", flexDirection: "column", gap: 18,
                position: "relative",
              }}>
                <div style={{
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                  fontSize: 11, color: muted,
                }}>
                  <span style={{ color: accent }}>● {s.code}</span>
                  <span>active</span>
                </div>
                <div style={{
                  fontFamily: "'Inter Tight', sans-serif",
                  fontSize: 32, fontWeight: 500,
                  letterSpacing: "-0.025em",
                  color: fg, lineHeight: 1.05,
                }}>{s.title}</div>
                <p style={{
                  fontFamily: "'Inter Tight', sans-serif",
                  fontSize: 15, lineHeight: 1.55,
                  color: muted, margin: 0,
                  maxWidth: 460,
                }}>{s.desc}</p>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: "auto", paddingTop: 18 }}>
                  {s.tags.map(t => (
                    <span key={t} style={{
                      padding: "5px 9px",
                      border: `1px solid ${dim}`,
                      fontSize: 10, color: muted,
                      letterSpacing: "0.05em",
                    }}>{t}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* PROJECTS — service status list */}
        <section style={{ padding: `${v}px ${pad}px`, borderBottom: `1px solid ${dim}` }} id="work">
          <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 64, marginBottom: 56, alignItems: "end" }}>
            <SectionTag num="04" name="trabajos en producción" />
            <div>
              <SansHeader size="clamp(56px, 7vw, 104px)">
                ./work <span style={{ color: muted }}>—</span> 4 plataformas,<br />
                4 problemas resueltos.
              </SansHeader>
              <div style={{ marginTop: 24, color: muted, fontSize: 13, display: "flex", gap: 18, flexWrap: "wrap" }}>
                <Prompt>systemctl status portfolio.target</Prompt>
                <span><span style={{ color: accent }}>●</span> 4 active services, 0 failed</span>
              </div>
            </div>
          </div>

          {/* Project list — vertical */}
          <div className="v3-projects-list" style={{ display: "grid", gap: 0, border: `1px solid ${dim}` }}>
            {PROJECTS.map((p, i) => (
              <article key={p.slug} className="v3-project-card" style={{
                background: panel,
                borderTop: i > 0 ? `1px solid ${dim}` : "none",
                position: "relative",
                overflow: "hidden",
              }}>
                {/* Project header bar */}
                <div className="v3-mobile-hide" style={{
                  display: "grid",
                  gridTemplateColumns: "auto auto 1fr auto auto",
                  gap: 24,
                  padding: "18px 32px",
                  borderBottom: `1px solid ${dim}`,
                  background: deep,
                  fontSize: 12,
                  alignItems: "center",
                }}>
                  <span style={{ color: accent }}>●</span>
                  <span style={{ color: muted }}>service.{p.slug}</span>
                  <span style={{ color: fg, fontFamily: "'Inter Tight', sans-serif", fontSize: 14, fontWeight: 500 }}>
                    {p.title} <span style={{ color: muted }}>· {p.kicker}</span>
                  </span>
                  <span style={{ color: muted }}>uptime · {p.year}</span>
                  <span style={{ color: accent }}>● {p.live ? "live · production" : "demo · sandbox"}</span>
                </div>

                <div style={{
                  display: "grid",
                  gridTemplateColumns: "1.1fr 1.4fr 1fr",
                  gap: 0,
                }}>
                  {/* LEFT — title block */}
                  <div style={{ padding: 36, borderRight: `1px solid ${dim}`, display: "flex", flexDirection: "column", gap: 24 }}>
                    <div style={{
                      fontFamily: "'Inter Tight', sans-serif",
                      fontSize: "clamp(48px, 5vw, 80px)",
                      fontWeight: 500,
                      letterSpacing: "-0.04em",
                      lineHeight: 0.92,
                      color: fg,
                    }}>{p.title}</div>

                    <div style={{
                      fontFamily: "'Inter Tight', sans-serif",
                      fontSize: 18, color: muted, lineHeight: 1.4,
                      fontStyle: "italic",
                    }}>{p.kicker}</div>

                    <div className="v3-mobile-hide" style={{
                      display: "grid",
                      gridTemplateColumns: "auto 1fr",
                      gap: "10px 18px",
                      fontSize: 12,
                      color: muted,
                      marginTop: "auto",
                      paddingTop: 24,
                      borderTop: `1px dashed ${dim}`,
                    }}>
                      <span>id</span><span style={{ color: fg }}>#{p.n}</span>
                      <span>category</span><span style={{ color: fg }}>{p.tag}</span>
                      <span>year</span><span style={{ color: fg }}>{p.year}</span>
                      <span>role</span><span style={{ color: fg }}>{p.role}</span>
                    </div>
                  </div>

                  {/* MIDDLE — capabilities */}
                  <div style={{ padding: 36, borderRight: `1px solid ${dim}` }}>
                    <div style={{ fontSize: 11, color: muted, marginBottom: 16 }}>
                      <Prompt>./describe --capabilities</Prompt>
                    </div>
                    <p style={{
                      fontFamily: "'Inter Tight', sans-serif",
                      fontSize: 17, lineHeight: 1.5,
                      color: fg, margin: "0 0 24px",
                    }}>{p.summary}</p>

                    <div>
                      {p.features.map(([t, d], j) => (
                        <div key={j} style={{
                          padding: "14px 0",
                          borderTop: `1px solid ${dim}`,
                          display: "grid",
                          gridTemplateColumns: "32px 1fr",
                          gap: 14, alignItems: "start",
                        }}>
                          <span style={{ color: accent, fontSize: 11, paddingTop: 2 }}>
                            [{String(j+1).padStart(2,"0")}]
                          </span>
                          <div>
                            <div style={{
                              fontFamily: "'Inter Tight', sans-serif",
                              fontSize: 14, fontWeight: 500,
                              color: fg, marginBottom: 3,
                            }}>{t}</div>
                            <div style={{
                              fontFamily: "'Inter Tight', sans-serif",
                              fontSize: 13, color: muted, lineHeight: 1.5,
                            }}>{d}</div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* RIGHT — visual + stack */}
                  <div style={{ padding: 36, display: "flex", flexDirection: "column" }}>
                    <div className="v3-project-media" style={{
                      display: "flex", justifyContent: "space-between",
                      fontSize: 11, color: muted, marginBottom: 14,
                    }}>
                      <span>preview.png</span>
                      <span>{1280 + i*40}×{720 + i*22}</span>
                    </div>
                    <div className="v3-project-media" style={{
                      flex: 1,
                      minHeight: 280,
                      border: `1px solid ${dim}`,
                      background: deep,
                      position: "relative",
                      overflow: "hidden",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      padding: p.layout === "mobile" ? "20px 12px" : 12,
                    }}>
                      {/* corner crosshairs */}
                      {[[0,0], [1,0], [0,1], [1,1]].map(([r,b], k) => (
                        <span key={k} style={{
                          position: "absolute",
                          [r ? "right" : "left"]: 8,
                          [b ? "bottom" : "top"]: 8,
                          width: 14, height: 14,
                          borderTop: !b ? `1px solid ${accent}` : "none",
                          borderBottom: b ? `1px solid ${accent}` : "none",
                          borderLeft: !r ? `1px solid ${accent}` : "none",
                          borderRight: r ? `1px solid ${accent}` : "none",
                          zIndex: 2,
                        }}></span>
                      ))}
                      {p.image ? (
                        p.layout === "mobile" ? (
                          // Phone bezel
                          <div style={{
                            position: "relative",
                            background: "#0A0C0A",
                            borderRadius: 28,
                            padding: 6,
                            boxShadow: dark
                              ? `0 0 0 1px ${dim}, 0 30px 60px -20px rgba(0,0,0,0.8)`
                              : `0 0 0 1px rgba(0,0,0,0.2), 0 30px 60px -20px rgba(0,0,0,0.4)`,
                            maxHeight: "100%",
                            display: "flex",
                          }}>
                            {/* notch */}
                            <span style={{
                              position: "absolute",
                              top: 14, left: "50%", transform: "translateX(-50%)",
                              width: 50, height: 5, borderRadius: 99,
                              background: dark ? "#222" : "#333",
                              zIndex: 3,
                            }}></span>
                            <img src={p.image} alt={p.title} style={{
                              maxHeight: 320,
                              width: "auto",
                              borderRadius: 22,
                              display: "block",
                            }} />
                          </div>
                        ) : (
                          // Browser frame
                          <div style={{
                            background: dark ? "#0A0C0A" : "#fff",
                            border: dark ? `1px solid ${dim}` : "none",
                            borderRadius: 6,
                            overflow: "hidden",
                            width: "100%",
                            maxWidth: 480,
                            boxShadow: dark
                              ? `0 20px 50px -20px rgba(0,0,0,0.8)`
                              : `0 0 0 1px rgba(0,0,0,0.06), 0 20px 50px -20px rgba(0,0,0,0.18)`,
                          }}>
                            <div style={{
                              padding: "8px 12px",
                              borderBottom: dark ? `1px solid ${dim}` : "none",
                              display: "flex", alignItems: "center", gap: 6,
                              background: dark ? "#0F1410" : "#fff",
                            }}>
                              <span style={{ width: 9, height: 9, borderRadius: 99, background: "#FF5F56" }}></span>
                              <span style={{ width: 9, height: 9, borderRadius: 99, background: "#FFBD2E" }}></span>
                              <span style={{ width: 9, height: 9, borderRadius: 99, background: accent }}></span>
                              <span style={{
                                marginLeft: 14, fontSize: 10, color: muted,
                                fontFamily: "'JetBrains Mono', monospace",
                              }}>
                                {p.demoLabel || `${p.slug}.app`}
                              </span>
                            </div>
                            <img src={p.image} alt={p.title} style={{
                              width: "100%",
                              height: "auto",
                              display: "block",
                            }} />
                          </div>
                        )
                      ) : (
                        <div style={{ textAlign: "center" }}>
                          <div style={{
                            fontFamily: "'Inter Tight', sans-serif",
                            fontSize: 96, fontWeight: 500,
                            color: accent, opacity: 0.92,
                            letterSpacing: "-0.04em",
                            lineHeight: 1,
                          }}>{p.n}</div>
                        </div>
                      )}
                    </div>

                    <div style={{
                      marginTop: 18, fontSize: 11, color: muted, marginBottom: 8,
                      textTransform: "uppercase", letterSpacing: "0.1em",
                    }}>// stack</div>
                    <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                      {p.stack.map(s => (
                        <span key={s} style={{
                          padding: "5px 9px",
                          border: `1px solid ${dim}`,
                          fontSize: 10, color: muted,
                        }}>{s}</span>
                      ))}
                    </div>

                    <a href={p.demo || "#"} target="_blank" style={{
                      marginTop: 22,
                      display: "inline-flex", justifyContent: "space-between", alignItems: "center",
                      padding: "12px 16px",
                      border: `1px solid ${accent}`,
                      color: accent, textDecoration: "none",
                      fontSize: 12, letterSpacing: "0.05em",
                    }}>
                      <span>{p.live ? "./open --live" : "./open --demo"}</span>
                      <span>↗</span>
                    </a>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </section>

        {/* TIMELINE */}
        <section style={{ padding: `${v}px ${pad}px`, borderBottom: `1px solid ${dim}` }} id="log">
          <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 64, marginBottom: 56, alignItems: "end" }}>
            <SectionTag num="05" name="git log --uptime" />
            <SansHeader size="clamp(48px, 6vw, 88px)">
              ./log <span style={{ color: muted }}>—</span> trayectoria<br />
              en orden cronológico.
            </SansHeader>
          </div>

          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80,
          }}>
            <div>
              <div style={{ color: muted, fontSize: 12, marginBottom: 24 }}>
                <Prompt>git log --pretty=role</Prompt>
              </div>
              {EXPERIENCE.map((e, i) => (
                <div key={i} className="v3-timeline-row" style={{
                  display: "grid",
                  gridTemplateColumns: "180px 24px 1fr",
                  gap: 0, padding: "28px 0",
                  borderTop: `1px solid ${dim}`,
                }}>
                  <div className="v3-timeline-period" style={{ fontSize: 12, color: muted, paddingTop: 6 }}>{e.period}</div>
                  <div className="v3-timeline-dot" style={{ position: "relative", display: "flex", justifyContent: "center" }}>
                    <span style={{
                      width: 11, height: 11, borderRadius: 99,
                      background: accent, marginTop: 8,
                      boxShadow: `0 0 0 4px ${accent}25, 0 0 12px ${accent}80`,
                    }}></span>
                  </div>
                  <div>
                    <div style={{
                      fontFamily: "'Inter Tight', sans-serif",
                      fontSize: 24, fontWeight: 500,
                      letterSpacing: "-0.025em",
                      marginBottom: 4, color: fg,
                    }}>{e.role}</div>
                    <div style={{
                      fontSize: 11, color: muted, marginBottom: 12,
                      textTransform: "uppercase", letterSpacing: "0.1em",
                    }}>{e.org}</div>
                    <div style={{
                      fontFamily: "'Inter Tight', sans-serif",
                      fontSize: 14, lineHeight: 1.6,
                      color: fg, maxWidth: 480,
                    }}>{e.detail}</div>
                  </div>
                </div>
              ))}
            </div>

            {/* Stack as commits */}
            <div className="v3-mobile-hide">
              <div style={{ color: muted, fontSize: 12, marginBottom: 24 }}>
                <Prompt>git log --oneline --tools</Prompt>
              </div>
              <div style={{ border: `1px solid ${dim}`, background: panel }}>
                {STACK.map((s, i) => {
                  const hash = (i * 31 + 7).toString(16).padStart(7, "0").slice(0, 7);
                  const tag = ["feat", "fix", "ops", "chore"][i % 4];
                  return (
                    <div key={s} style={{
                      display: "grid",
                      gridTemplateColumns: "auto auto 1fr auto",
                      gap: 16,
                      padding: "11px 18px",
                      borderTop: i > 0 ? `1px solid ${dim}` : "none",
                      fontSize: 13,
                      alignItems: "center",
                    }}>
                      <span style={{ color: accent, fontSize: 11 }}>{hash}</span>
                      <span style={{
                        fontSize: 10, padding: "2px 6px",
                        border: `1px solid ${dim}`,
                        color: muted,
                        textTransform: "uppercase",
                        letterSpacing: "0.06em",
                      }}>{tag}</span>
                      <span style={{ color: fg }}>add support for <span style={{ color: accent }}>{s}</span></span>
                      <span style={{ fontSize: 10, color: muted }}>2024-{(i % 12 + 1).toString().padStart(2, "0")}-{(i*3 % 28 + 1).toString().padStart(2, "0")}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </section>

        {/* CONTACT */}
        <section style={{ padding: `${v}px ${pad}px ${v * 0.7}px` }} id="contact">
          <SectionTag num="06" name="open channel" />
          <div style={{ marginTop: 36, marginBottom: 64 }}>
            <SansHeader size="clamp(72px, 9vw, 168px)">
              <span style={{ color: accent }}>$</span> hablemos.<br />
              <span style={{ color: muted, fontWeight: 300, fontStyle: "italic" }}>
                /* aún hay slots libres en {new Date().getFullYear()} */
              </span>
            </SansHeader>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56, alignItems: "start" }}>
            <div className="v3-mobile-hide" style={{
              border: `1px solid ${dim}`,
              background: panel,
            }}>
              <div style={{
                padding: "12px 18px",
                borderBottom: `1px solid ${dim}`,
                display: "flex", justifyContent: "space-between",
                fontSize: 11, color: muted,
              }}>
                <span>~/contact.sh</span>
                <span style={{ color: accent }}>● ready</span>
              </div>
              <div style={{ padding: 28, display: "grid", gap: 0 }}>
                {PROFILE.social.map((s, i) => (
                  <a key={s.label} href={s.href} style={{
                    display: "grid",
                    gridTemplateColumns: "120px 1fr auto",
                    padding: "22px 0",
                    borderTop: i > 0 ? `1px solid ${dim}` : "none",
                    color: "inherit", textDecoration: "none",
                    alignItems: "center",
                    gap: 18,
                  }}>
                    <span style={{
                      fontSize: 11, color: muted,
                      textTransform: "uppercase", letterSpacing: "0.12em",
                    }}>./{s.label.toLowerCase()}</span>
                    <span style={{
                      fontFamily: "'Inter Tight', sans-serif",
                      fontSize: 22, fontWeight: 500,
                      letterSpacing: "-0.015em",
                      color: fg,
                    }}>{s.handle}</span>
                    <span style={{ fontSize: 18, color: accent }}>↗</span>
                  </a>
                ))}
              </div>
            </div>

            <div style={{ minHeight: 480 }}>
              <AIAgentChat
                accent={accent}
                fg={fg}
                muted={muted}
                dim={dim}
                panel={panel}
                deep={deep}
                dark={dark}
                warn={warn}
              />
            </div>
          </div>
        </section>

        {/* FOOTER */}
        <footer className="v3-footer" style={{
          padding: `28px ${pad}px`,
          borderTop: `1px solid ${dim}`,
          display: "grid",
          gridTemplateColumns: "1fr 1fr 1fr",
          fontSize: 11, color: muted,
          background: deep,
        }}>
          <span><span style={{ color: accent }}>●</span> process exited 0 — OK</span>
          <span className="v3-mobile-hide" style={{ textAlign: "center" }}>built with care · zero downtime</span>
          <span style={{ textAlign: "right" }}>© {new Date().getFullYear()} · yeiko_nova</span>
        </footer>
      </div>

      <style>{`
        @keyframes blink { 50% { opacity: 0; } }
        @keyframes pulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.6; transform: scale(0.85); }
        }
        @keyframes marquee {
          from { transform: translateX(0); }
          to   { transform: translateX(-33.333%); }
        }
        a:hover { opacity: 0.85; }

        /* RESPONSIVE — mobile */
        @media (max-width: 820px) {
          .v3-root section,
          .v3-root header { padding-left: 16px !important; padding-right: 16px !important; }

          /* Top status bar — single line */
          .v3-root header {
            display: flex !important;
            grid-template-columns: none !important;
            justify-content: space-between !important;
            align-items: center !important;
            gap: 10px !important;
            padding-top: 10px !important;
            padding-bottom: 10px !important;
          }
          .v3-root header > div:nth-child(2) { display: none !important; }
          .v3-root header > div:first-child { gap: 8px !important; }
          .v3-root header > div:first-child > span:nth-child(3) { display: none !important; }
          .v3-nav { gap: 10px !important; flex-wrap: nowrap !important; }
          .v3-nav a { font-size: 10.5px; }
          .v3-nav a[href="#about"], .v3-nav a[href="#log"], .v3-nav a[href="#services"], .v3-nav a[href="#whoami"], .v3-nav a[href="#work"] { display: none; }
          .v3-nav button { width: 24px !important; height: 24px !important; font-size: 11px !important; margin-left: 0 !important; }

          /* Collapse 2-col grids to 1 col */
          .v3-root [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 24px !important; }

          /* Scroll reveal — hide everything below hero until first scroll */
          .v3-root.v3-pre-scroll section:not(:nth-of-type(1)),
          .v3-root.v3-pre-scroll .v3-marquee,
          .v3-root.v3-pre-scroll footer {
            opacity: 0;
            transform: translateY(40px);
            pointer-events: none;
          }
          .v3-root.v3-scrolled section,
          .v3-root.v3-scrolled .v3-marquee,
          .v3-root.v3-scrolled footer {
            opacity: 1;
            transform: none;
            transition: opacity 0.9s ease, transform 0.9s ease;
          }
          /* Stagger reveal on scrolled state */
          .v3-root.v3-scrolled .v3-marquee { transition-delay: 0s; }
          .v3-root.v3-scrolled section:nth-of-type(2) { transition-delay: 0.05s; }
          .v3-root.v3-scrolled section:nth-of-type(3) { transition-delay: 0.12s; }
          .v3-root.v3-scrolled section:nth-of-type(4) { transition-delay: 0.18s; }
          .v3-root.v3-scrolled section:nth-of-type(5) { transition-delay: 0.24s; }
          .v3-root.v3-scrolled section:nth-of-type(6) { transition-delay: 0.30s; }
          .v3-root.v3-scrolled footer { transition-delay: 0.36s; }

          /* Hero — full viewport on mobile */
          .v3-hero {
            min-height: calc(100vh - 56px) !important;
            display: flex !important;
            align-items: center !important;
            padding-top: 32px !important;
            padding-bottom: 32px !important;
          }

          /* Hero title */
          .v3-root h1 { font-size: clamp(48px, 11vw, 72px) !important; }

          /* Timeline — keep dot column on the left in mobile */
          .v3-root .v3-timeline-row { grid-template-columns: 20px 1fr !important; gap: 14px !important; padding: 18px 0 !important; }
          .v3-root .v3-timeline-period { grid-column: 1 / -1 !important; padding-left: 34px !important; }

          /* Footer single line */
          .v3-footer {
            display: flex !important;
            justify-content: space-between !important;
            grid-template-columns: none !important;
            font-size: 10px !important;
            padding: 16px !important;
            gap: 10px !important;
          }

          /* Service cards — separated with gap on mobile */
          .v3-services-grid { gap: 14px !important; border: none !important; grid-template-columns: 1fr !important; }
          .v3-service-card { border: 1px solid rgba(120,120,120,0.18) !important; }

          /* Project cards — separated with gap on mobile */
          .v3-projects-list { gap: 14px !important; border: none !important; }
          .v3-project-card { border-top: 1px solid currentColor !important; border-color: rgba(120,120,120,0.18) !important; outline: 1px solid rgba(120,120,120,0.18); outline-offset: -1px; }

          /* Hide profile.json card on mobile */
          .v3-mobile-hide { display: none !important; }
          .v3-mobile-hide-inline { display: none !important; }

          /* Project images — hide on mobile */
          .v3-project-media { display: none !important; }

          /* Marquee/stack bar — make smaller */
          .v3-root [class*="marquee"] { font-size: 11px !important; }
        }
      `}</style>
    </div>
  );
}

window.V3Terminal = V3Terminal;