import { VIEWBOX_SIMBOLO, LINEAS_SIMBOLO } from '@/lib/simbolo';

// The manual's philosophy — Complejidad → Enfoque → Claridad — as the
// document's own furniture instead of as an illustration parked in a corner.
// Each section carries one step of it in the margin column, so the reader walks
// the tangle resolving into the ≡ by scrolling.
//
// Static: the interpolation happens at render, there is no animation and no
// client JavaScript. The geometry it resolves into comes from lib/simbolo.ts,
// the same source the wordmark traces, so the mark it produces is provably the
// brand's and not a lookalike.

export const PASOS = 6;

// Hand-placed rather than random, so the mark is identical on every render and
// between server and client. Three lines per bar of the ≡.
const DISPERSAS = [
  { x1: 4, y1: 10, x2: 44, y2: 4, barra: 0 },
  { x1: 18, y1: 3, x2: 58, y2: 22, barra: 0 },
  { x1: 6, y1: 24, x2: 50, y2: 12, barra: 0 },
  { x1: 3, y1: 30, x2: 56, y2: 26, barra: 1 },
  { x1: 14, y1: 40, x2: 52, y2: 20, barra: 1 },
  { x1: 8, y1: 34, x2: 60, y2: 38, barra: 1 },
  { x1: 5, y1: 46, x2: 47, y2: 60, barra: 2 },
  { x1: 22, y1: 62, x2: 58, y2: 44, barra: 2 },
  { x1: 10, y1: 56, x2: 54, y2: 52, barra: 2 },
];

// One line per group survives to become a bar; the other six fade out as the
// page converges — many/disordered becomes few/aligned, per the manual.
const SOBREVIVE = [0, 3, 6];

const GROSOR_DISPERSO = 2;

export function MarcaSeccion({ paso, className = '' }: { paso: number; className?: string }) {
  const t = Math.min(1, Math.max(0, paso / (PASOS - 1)));
  const mezcla = (a: number, b: number) => a + (b - a) * t;

  return (
    <svg viewBox={VIEWBOX_SIMBOLO} className={className} aria-hidden="true" focusable="false">
      {DISPERSAS.map((d, i) => {
        const destino = LINEAS_SIMBOLO[d.barra];
        const sobrevive = SOBREVIVE.includes(i);
        return (
          <line
            key={i}
            x1={mezcla(d.x1, destino.x1)}
            y1={mezcla(d.y1, destino.y1)}
            x2={mezcla(d.x2, destino.x2)}
            y2={mezcla(d.y2, destino.y2)}
            stroke="currentColor"
            strokeWidth={sobrevive ? mezcla(GROSOR_DISPERSO, destino.grosor) : GROSOR_DISPERSO}
            strokeLinecap="round"
            opacity={sobrevive ? 1 : 1 - t}
          />
        );
      })}
    </svg>
  );
}