// ============================================================
// GARABATO · GarabatoBG — fondo animado con líneas y squiggles
// TODAS las líneas se mueven: las "estáticas" flotan + rotan
// dentro de capas independientes; las "moving" recorren el
// path con stroke-dashoffset.
//
// Variantes:
//   dense    — fondo principal, muchas curvas (hero / footer)
//   loose    — líneas largas atravesando, ritmo abierto
//   horizon  — ondas horizontales tipo paisaje
//   minimal  — 2-3 líneas finas, sin trazos en movimiento
//              (acento dentro de secciones existentes)
// ============================================================

const GarabatoBG = ({
  height = 480,
  bg = 'violet',
  strokeColors,
  variant = 'dense',
  className = '',
  absolute = false,        // true = position:absolute, fill el padre
  children,
}) => {
  const palette = {
    violet:  '#6800FF', magenta: '#FF0068', yellow: '#FFD000',
    orange:  '#FF9800', ink:     '#0A0A0F', paper:  '#FAFAF7',
    transparent: 'transparent',
  };
  const bgColor = palette[bg] || bg;

  const defaultStrokes = {
    violet:  ['#FFD000', '#FF0068', '#FF9800', '#FFD000'],
    magenta: ['#FFD000', '#6800FF', '#FF9800', '#FFD000'],
    yellow:  ['#FF0068', '#6800FF', '#FF9800', '#0A0A0F'],
    orange:  ['#FFD000', '#6800FF', '#FF0068', '#0A0A0F'],
    ink:     ['#FFD000', '#FF0068', '#6800FF', '#FF9800'],
    paper:   ['#6800FF', '#FF0068', '#FFD000', '#FF9800'],
    transparent: ['#6800FF', '#FF0068', '#FFD000', '#FF9800'],
  };
  const [c1, c2, c3, c4] = strokeColors || defaultStrokes[bg] || defaultStrokes.violet;

  const paths = {
    dense: {
      a: 'M -70 255 C 120 120, 220 120, 315 255 C 382 350, 345 470, 258 514 C 165 560, 92 505, 102 432 C 114 335, 208 320, 252 392 C 304 476, 244 608, 122 640 C -10 674, 6 812, 190 855',
      b: 'M 220 90 C 430 -38, 625 78, 625 255 C 625 420, 462 526, 326 503 C 244 489, 205 548, 246 620 C 305 723, 472 728, 565 642 C 640 572, 716 545, 840 558 C 1002 576, 1098 474, 1068 332',
      c: 'M 382 705 C 520 688, 650 732, 770 720 C 885 708, 1002 650, 1115 665 C 1265 685, 1360 640, 1510 520',
      d: 'M 980 -60 C 1080 40, 1215 90, 1285 200 C 1365 330, 1325 455, 1205 490 C 1115 517, 1045 575, 1070 650',
      e: 'M 820 940 C 930 760, 1090 700, 1220 760 C 1335 810, 1450 780, 1620 620',
    },
    loose: {
      a: 'M -50 600 C 150 480, 320 540, 480 460 C 640 380, 820 460, 1000 380 C 1180 300, 1380 360, 1620 240',
      b: 'M -50 200 C 200 320, 420 240, 620 320 C 820 400, 1020 320, 1220 400 C 1420 480, 1560 400, 1620 460',
      c: 'M 200 -50 C 280 120, 220 260, 380 360 C 540 460, 660 380, 720 540 C 780 700, 640 820, 800 940',
      d: 'M 1100 -50 C 1180 140, 1080 260, 1240 380 C 1400 500, 1280 620, 1420 760 C 1500 840, 1480 900, 1620 940',
      e: 'M 600 940 C 700 800, 820 760, 980 820 C 1140 880, 1280 820, 1420 920',
    },
    horizon: {
      a: 'M -50 450 C 200 350, 400 550, 600 450 C 800 350, 1000 550, 1200 450 C 1400 350, 1500 450, 1620 420',
      b: 'M -50 520 C 250 420, 450 620, 700 520 C 950 420, 1150 620, 1400 520 C 1500 480, 1580 510, 1620 500',
      c: 'M -50 380 C 200 280, 450 480, 700 380 C 950 280, 1200 480, 1450 380 C 1550 340, 1600 360, 1620 360',
      d: 'M 200 50 C 320 180, 280 280, 400 360',
      e: 'M 1100 880 C 1220 760, 1340 720, 1500 760',
    },
    minimal: {
      // sólo 2-3 líneas largas, finas, opening
      a: 'M -60 480 C 240 360, 540 540, 820 420 C 1080 310, 1340 460, 1660 340',
      b: 'M -60 620 C 280 520, 600 700, 920 580 C 1220 470, 1420 580, 1660 540',
      c: 'M 200 -40 C 320 200, 240 360, 460 480 C 660 590, 800 740, 940 940',
    },
  }[variant];

  // —— Render ——
  // Cada path va en su propio <g> con animación distinta para que
  // todo se mueva con cadencias intencionalmente desfasadas.
  if (variant === 'minimal') {
    return (
      <div className={`gbg gbg--minimal ${absolute ? 'gbg--absolute' : ''} ${className}`}
           style={{ height: absolute ? undefined : height, background: bgColor }}>
        <svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
          <g className="gbg-layer">
            <path className="gbg-static" stroke={c1} strokeWidth="14" d={paths.a}/>
          </g>
          <g className="gbg-layer gbg-layer--two">
            <path className="gbg-static gbg-static--alt" stroke={c2} strokeWidth="10" d={paths.b}/>
          </g>
          <g className="gbg-layer gbg-layer--three">
            <path className="gbg-static gbg-static--alt-2" stroke={c3} strokeWidth="8" d={paths.c}/>
          </g>
        </svg>
        {children && <div className="gbg__content">{children}</div>}
      </div>
    );
  }

  return (
    <div className={`gbg gbg--${variant} ${absolute ? 'gbg--absolute' : ''} ${className}`}
         style={{ height: absolute ? undefined : height, background: bgColor }}>
      <svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
        {/* Trazos gruesos — cada uno en su propia capa para que floten distinto */}
        <g className="gbg-layer">
          <path className="gbg-static" stroke={c1} strokeWidth="34" d={paths.a}/>
          <path className="gbg-static gbg-static--alt" stroke={c2} strokeWidth="40" d={paths.b}/>
        </g>
        <g className="gbg-layer gbg-layer--two">
          <path className="gbg-static" stroke={c3} strokeWidth="22" d={paths.c}/>
          <path className="gbg-static gbg-static--alt-2" stroke={c1} strokeWidth="22" d={paths.d}/>
        </g>
        <g className="gbg-layer gbg-layer--three" opacity="0.9">
          <path className="gbg-static" stroke={c2} strokeWidth="18" d={paths.e}/>
        </g>
        {/* Dashes en movimiento sobre los caminos principales */}
        <path className="gbg-moving" stroke={c1} strokeWidth="12" d={paths.b}/>
        <path className="gbg-moving gbg-moving--two" stroke={c3} strokeWidth="12" d={paths.a}/>
        <path className="gbg-moving gbg-moving--three" stroke={c4} strokeWidth="10" d={paths.c}/>
      </svg>
      {children && <div className="gbg__content">{children}</div>}
    </div>
  );
};

// Banda angosta entre secciones
const GarabatoBand = ({ height = 160, bg = 'yellow', variant = 'horizon', children }) => (
  <GarabatoBG height={height} bg={bg} variant={variant} className="gbg--band">{children}</GarabatoBG>
);

// Acento minimalista — fondo absoluto detrás de contenido existente
const GarabatoAccent = ({ bg = 'transparent', strokeColors, className = '' }) => (
  <GarabatoBG
    absolute
    bg={bg}
    strokeColors={strokeColors}
    variant="minimal"
    className={`gbg--accent ${className}`}
  />
);

// ──────────────────────────────────────────────────────────
// CTA (Call to Action) — bloque grande con fondo animado
// y un mensaje + botón centrados.
// ──────────────────────────────────────────────────────────
const GarabatoCTA = ({
  bg = 'violet',
  variant = 'dense',   // (compat — ya no se usa)
  eyebrow,
  title,
  subtitle,
  primary,           // { label, href }
  secondary,         // { label, href }
  height = 540,
  inverse = true,    // texto blanco por defecto
}) => {
  const fg = inverse ? '#fff' : 'var(--ink-900)';
  const bgMap = { violet: 'var(--brand-violet)', magenta: 'var(--brand-magenta)', yellow: 'var(--brand-yellow)', orange: 'var(--brand-orange)', ink: 'var(--ink-900)', paper: 'var(--paper)' };
  const bgColor = bgMap[bg] || bg;
  return (
    <section className={`gbg-cta gbg-cta--clean ${inverse ? 'gbg-cta--inverse' : ''}`} style={{ background: bgColor, minHeight: height }}>
      <SquiggleScatter draw items={[
        { variant: 'ring',     color: 'yellow',  size: 'lg', top: '12%', left: '6%',  rotate: -12, parallax: 1.2 },
        { variant: 'curl',     color: 'magenta', size: 'md', bottom: '14%', left: '14%', rotate: 8, float: true },
        { variant: 'coil',     color: 'orange',  size: 'lg', top: '20%', right: '6%', rotate: 8, parallax: 1.4 },
        { variant: 'hook',     color: 'yellow',  size: 'md', bottom: '12%', right: '15%', rotate: -6, float: true },
        { variant: 'dots',     color: 'magenta', size: 'md', top: '64%', left: '40%' },
      ]}/>
      <div className="gbg-cta__inner">
        {eyebrow && <div className="t-eyebrow gbg-cta__eyebrow" style={{ color: 'var(--brand-yellow)' }}>{eyebrow}</div>}
        {title && <h2 className="t-display-lg gbg-cta__title" style={{ color: fg }}>{title}</h2>}
        {subtitle && <p className="t-body-lg gbg-cta__subtitle" style={{ color: fg, opacity: 0.85 }}>{subtitle}</p>}
        {(primary || secondary) && (
          <div className="gbg-cta__actions">
            {primary && (
              <a href={primary.href || '#'} className="gbg-cta__btn gbg-cta__btn--primary">
                {primary.label}
              </a>
            )}
            {secondary && (
              <a href={secondary.href || '#'} className="gbg-cta__btn gbg-cta__btn--secondary" style={{ color: fg, borderColor: fg }}>
                {secondary.label}
              </a>
            )}
          </div>
        )}
      </div>
    </section>
  );
};

// ──────────────────────────────────────────────────────────
// GarabatoLine — UNA línea animada que cruza el contenedor.
// Útil como separador inline entre dos elementos cualquiera.
// Props: color, weight, height (alto del contenedor), variant
// ('wave' | 'curl' | 'flat')
// ──────────────────────────────────────────────────────────
const GarabatoLine = ({
  color = '#FF0068',
  weight = 6,
  height = 80,
  variant = 'wave',
  className = '',
}) => {
  const paths = {
    wave:  'M -20 50 C 200 -10, 380 110, 600 50 C 820 -10, 1000 110, 1220 50 C 1440 -10, 1620 110, 1820 50',
    curl:  'M -20 60 C 120 20, 220 90, 340 50 C 480 8, 540 110, 700 60 C 880 8, 940 90, 1080 50 C 1240 10, 1320 90, 1500 50 C 1640 20, 1740 70, 1820 50',
    flat:  'M -20 50 L 1820 50',
  };
  return (
    <div className={`gbg-line ${className}`} style={{ height }}>
      <svg viewBox="0 0 1800 100" preserveAspectRatio="none" aria-hidden="true">
        <path
          className="gbg-line__path"
          d={paths[variant] || paths.wave}
          stroke={color}
          strokeWidth={weight}
          fill="none"
          strokeLinecap="round"
        />
      </svg>
    </div>
  );
};

// ──────────────────────────────────────────────────────────
// GarabatoAmbient — versión MINIMALISTA del background animado.
// Misma mecánica que el ejemplo del usuario (1-2 líneas que
// flotan + 1 dash corriendo), pero con muchas menos formas.
// Pensada para usarse como fondo ambiente en MUCHAS secciones
// sin robarle protagonismo al contenido.
//
// Props:
//   palette  — 'violet' | 'magenta' | 'yellow' | 'orange'
//              | 'paper' | 'ink' | 'auto' (transparente, usa
//              colores del brand sobre el fondo del padre)
//   mode     — 'corner' | 'cross' | 'arc' (composiciones)
//   density  — 'low' (1+1) | 'med' (2+1) | 'high' (3+2)
//   opacity  — 0..1, default 1
//   absolute — true (default) → position:absolute fill padre
// ──────────────────────────────────────────────────────────
const GarabatoAmbient = ({
  palette = 'auto',
  mode = 'corner',
  density = 'low',
  opacity = 1,
  absolute = true,
  className = '',
}) => {
  // Paletas de trazos por fondo
  const palettes = {
    violet:  ['#FFD000', '#FF0068', '#FF9800'],
    magenta: ['#FFD000', '#6800FF', '#FF9800'],
    yellow:  ['#6800FF', '#FF0068', '#0A0A0F'],
    orange:  ['#6800FF', '#FF0068', '#0A0A0F'],
    paper:   ['#6800FF', '#FF0068', '#FFD000'],
    ink:     ['#FFD000', '#FF0068', '#6800FF'],
    auto:    ['#6800FF', '#FF0068', '#FFD000'],
  };
  const [c1, c2, c3] = palettes[palette] || palettes.auto;

  // Composiciones por modo — pocas líneas, layout intencional
  const compositions = {
    // Esquina superior izquierda + cola en inferior derecha
    corner: {
      thick: [
        { d: 'M -80 180 C 80 60, 220 80, 280 220 C 320 320, 220 400, 140 360 C 80 330, 90 250, 160 240', w: 28, c: c1 },
        { d: 'M 1100 760 C 1240 700, 1380 740, 1520 660 C 1620 600, 1680 660, 1700 720', w: 22, c: c2 },
      ],
      thin: [
        { d: 'M 200 -60 C 380 80, 520 60, 720 200 C 880 320, 1020 280, 1180 380', w: 8, c: c3 },
      ],
    },
    // Cruzando la sección de izquierda a derecha (decorativo lateral)
    cross: {
      thick: [
        { d: 'M -60 600 C 200 480, 460 560, 720 480 C 980 400, 1240 480, 1660 360', w: 26, c: c1 },
        { d: 'M -60 280 C 220 200, 480 320, 760 240', w: 20, c: c2 },
      ],
      thin: [
        { d: 'M 100 80 C 320 220, 540 180, 760 320 C 980 460, 1200 420, 1640 560', w: 7, c: c3 },
      ],
    },
    // Arco superior — apto para tops de sección
    arc: {
      thick: [
        { d: 'M -60 200 C 320 60, 720 60, 1100 180 C 1380 260, 1520 200, 1680 240', w: 24, c: c1 },
      ],
      thin: [
        { d: 'M -60 320 C 320 200, 720 200, 1100 300 C 1380 360, 1520 320, 1680 340', w: 6, c: c2 },
      ],
    },
  };

  const comp = compositions[mode] || compositions.corner;

  // Recortar según density
  const thickN = density === 'high' ? 3 : density === 'med' ? 2 : 1;
  const thinN  = density === 'high' ? 2 : 1;
  const thicks = comp.thick.slice(0, thickN);
  const thins  = comp.thin.slice(0, thinN);

  return (
    <div className={`gbg gbg--ambient ${absolute ? 'gbg--absolute' : ''} ${className}`}
         style={{ opacity }}>
      <svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
        {/* Capa que flota — cada thick lleva su drift suave */}
        <g className="gbg-layer">
          {thicks.map((p, i) => (
            <path key={i}
              className={`gbg-static ${i === 1 ? 'gbg-static--alt' : ''}`}
              stroke={p.c} strokeWidth={p.w} d={p.d}/>
          ))}
        </g>
        {/* Dashes corriendo */}
        {thins.map((p, i) => (
          <path key={i}
            className={`gbg-moving ${i === 0 ? '' : 'gbg-moving--two'}`}
            stroke={p.c} strokeWidth={p.w} d={p.d}/>
        ))}
      </svg>
    </div>
  );
};

Object.assign(window, { GarabatoBG, GarabatoBand, GarabatoAccent, GarabatoCTA, GarabatoLine, GarabatoAmbient });