// Garabato: original artwork compositions and shared calls to action.
const GarabatoBG = ({ height = 480, className = '', absolute = false, children }) => (
  <div className={'gbg gbg--original ' + (absolute ? 'gbg--absolute ' : '') + className} style={{height: absolute ? undefined : height, background: '#f7f7f7'}}>
    <div className="brand-band" aria-hidden="true">{['curl', 'ring', 'hook', 'dash'].map(v => <Squiggle key={v} variant={v} size="lg"/>)}</div>
    {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,
  animatedPair = false,
  inverse = true,    // texto blanco por defecto
}) => {
  const traceRoot = React.useRef(null);
  const traceTimeline = React.useRef({epoch: 0, visible: false});
  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 ref={traceRoot} className={`gbg-cta gbg-cta--clean ${animatedPair ? 'gbg-cta--trace-pair' : ''} ${inverse ? 'gbg-cta--inverse' : ''}`} style={{ background: bgColor, minHeight: height }}>
      {animatedPair ? <div className="gbg-cta__art" aria-hidden="true">
        <div className="gbg-cta__yellow"><GraphicTrace variant="curl" size="lg" duration={1100} timeline={traceTimeline} triggerRef={traceRoot} cycle={4800}/></div>
        <div className="gbg-cta__magenta"><GraphicTrace variant="ring" size="lg" delay={1200} duration={1100} timeline={traceTimeline} triggerRef={traceRoot} cycle={4800}/></div>
      </div> : <>
      <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 = ({ height = 80, className = '' }) => <div className={'gbg-line brand-divider ' + className} style={{height}}><Squiggle variant="dash" size="md"/></div>;

// One project invitation is shared by the home and every client case study.
const ProjectCTA = ({home = false}) => <GarabatoCTA
  animatedPair
  bg="violet"
  eyebrow="&iquest;Ten&eacute;s un proyecto?"
  title="Hablemos en serio."
  subtitle="Veinte minutos, sin compromiso. Te contamos c&oacute;mo trabajamos y vemos si encaja."
  primary={{label:'Agendar llamada',href:home?'#contact':'index.html#contact'}}
  secondary={{label:'Ver portfolio',href:'portfolio.html'}}
/>;
window.ProjectCTA = ProjectCTA;

// Keep reading areas quiet; the original pieces provide the accents.
const GarabatoAmbient = () => null;



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