// Manifesto + tape
function Tape() {
  const items = ["Software a medida", "Productos propios", "Sprints cortos", "Sin demos largas", "Código que no da vergüenza"];
  const repeated = [...items, ...items, ...items];
  return (
    <div className="tape" aria-hidden="true">
      <div className="tape-track">
        {repeated.map((t, i) => (
          <span key={i} className="tape-item">
            <span>{t}</span>
            <span className="tape-slash">/</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function Manifesto() {
  const cells = [
    {
      n: "01 / DELIVERY",
      title: "Sprints semanales",
      desc: "Releases reales, no slides. Cada semana ves un nuevo commit andando en producción.",
    },
    {
      n: "02 / EQUIPO",
      title: "Senior por defecto",
      desc: "Sin escala de juniors haciendo tu producto. Ingenieros que ya rompieron y arreglaron lo mismo antes.",
    },
    {
      n: "03 / STACK",
      title: "Boring y rápido",
      desc: "TypeScript, Postgres, Next, Python. Tecnología que aburre a propósito — porque escala.",
    },
    {
      n: "04 / DISEÑO",
      title: "Hi-fi antes que código",
      desc: "Prototipo navegable y validado primero. Si no se siente bien, no se construye.",
    },
    {
      n: "05 / IA",
      title: "Aplicada, no decorativa",
      desc: "Embeddings, copilots, agentes — donde mueven la aguja, no como tag de marketing.",
    },
    {
      n: "06 / SOPORTE",
      title: "Quedamos después del ship",
      desc: "Operamos lo que construimos. Métricas, on-call y mejora continua post-launch.",
    },
  ];

  return (
    <>
      <Tape />
      <section className="manifesto" id="about">
        <div className="container">
          <div className="manifesto-head">
            <span className="eyebrow">/ qué hacemos</span>
            <h2 className="manifesto-text">
              <span>Diseñamos y construimos software a medida</span>{" "}
              <span className="dim">para empresas que necesitan ir rápido sin romper nada.</span>{" "}
              <span className="serif">No vendemos horas:</span>{" "}
              <span>vendemos productos que funcionan.</span>
            </h2>
          </div>

          <div className="manifesto-grid">
            {cells.map((c, i) => (
              <div className="manifesto-cell" key={i}>
                <div className="manifesto-cell-num">{c.n}</div>
                <div className="manifesto-cell-title">{c.title}</div>
                <div className="manifesto-cell-desc">{c.desc}</div>
                <div className="manifesto-cell-mark">/</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

window.Manifesto = Manifesto;