/* atoms.jsx — small reusable atoms */

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const Logo = ({ size = 26 }) => (
  <a href="#top" className="logo" aria-label="Laburo">
    <span className="logo-mark" style={{ width: size, height: size }}>
      <span className="d"></span><span></span><span></span>
      <span className="d"></span><span></span><span></span>
      <span className="d"></span><span className="d"></span><span className="d"></span>
    </span>
    <span className="logo-text">laburo</span>
  </a>
);

const Arrow = ({ size = 14 }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M2 7H12M12 7L7 2M12 7L7 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const ArrowDown = ({ size = 14 }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M7 2V12M7 12L2 7M7 12L12 7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Eyebrow = ({ children }) => <span className="eyebrow">{children}</span>;

const SectionHead = ({ num, eyebrow, title, sub }) => (
  <div className="section-head">
    <div className="num">{num}</div>
    <div>
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      <h2 className="h1" style={{ marginTop: eyebrow ? 16 : 0, marginBottom: sub ? 16 : 0 }}>{title}</h2>
      {sub && <p className="body-l" style={{ maxWidth: 760, color: 'var(--bone-mute)' }}>{sub}</p>}
    </div>
  </div>
);

/* ============================================================
   LaburoMatrix — 3×3 logo-pattern grid, animated.
   Refined: smaller, with laburo wordmark above.
   ============================================================ */
function LaburoMatrix() {
  // Base pattern (1 = lime, 0 = dark) following the laburo mark
  const base = [
    [0, 1, 1],
    [0, 1, 1],
    [0, 0, 0],
  ];

  const labels = [
    { t: 'Estrategia', s: 'Business → marketing' },
    { t: 'Datos',      s: 'Reporting centralizado' },
    { t: 'Medios',     s: 'Multi-plataforma' },
    { t: 'Analytics',  s: 'Reporting en vivo' },
    { t: 'Creatividad',s: 'Producción nativa' },
    { t: 'Performance',s: 'Optimización continua' },
    { t: 'CRM',        s: 'Pipeline conectado' },
    { t: 'AI',         s: 'Agentes + automation' },
    { t: 'Crédito',    s: 'Pauta sin fricciones' },
  ];

  const [active, setActive] = useStateA(null);
  const [pulse, setPulse] = useStateA(null);
  useEffectA(() => {
    let alive = true;
    const tick = () => {
      if (!alive) return;
      const idx = Math.floor(Math.random() * 9);
      setPulse(idx);
      setTimeout(() => alive && setPulse(null), 700);
    };
    const id = setInterval(tick, 1600);
    tick();
    return () => { alive = false; clearInterval(id); };
  }, []);

  return (
    <div className="lmatrix" aria-label="Sistema laburo">
      <div className="lmatrix-header">
        <div className="lmatrix-brand">
          <div className="lmatrix-wordmark">laburo</div>
          <div className="lmatrix-tag">/ sistema operativo</div>
        </div>
        <div className="lmatrix-status">
          <span className="lmatrix-status-dot"></span>
          09 módulos activos
        </div>
      </div>
      <div className="lmatrix-grid">
        {Array.from({ length: 9 }, (_, i) => {
          const r = Math.floor(i / 3);
          const c = i % 3;
          const isLime = base[r][c] === 1;
          const isPulse = pulse === i;
          const isActive = active === i;
          return (
            <button
              key={i}
              className={`lmatrix-cell ${isLime ? 'lime' : 'dark'} ${isPulse ? 'pulse' : ''} ${isActive ? 'active' : ''}`}
              onMouseEnter={() => setActive(i)}
              onMouseLeave={() => setActive(curr => curr === i ? null : curr)}
              onFocus={() => setActive(i)}
              onBlur={() => setActive(curr => curr === i ? null : curr)}
              aria-label={labels[i].t}
              type="button"
            >
              <span className="lmatrix-num">{String(i + 1).padStart(2, '0')}</span>
              <span className="lmatrix-label">
                <span className="lmatrix-label-t">{labels[i].t}</span>
                <span className="lmatrix-label-s">{labels[i].s}</span>
              </span>
            </button>
          );
        })}
      </div>
      <div className="lmatrix-caption">
        <span className="lmatrix-caption-tag">MOD · {active !== null ? String(active + 1).padStart(2, '0') : '—'}</span>
        <span className="lmatrix-caption-val">
          {active !== null ? labels[active].t : 'pasá el mouse'}
        </span>
      </div>
    </div>
  );
}

/* Legacy export name kept for the Hero import */
function ConnectionTriad() { return <LaburoMatrix />; }

/* ============================================================
   Mini connection — small inline motif for use elsewhere
   ============================================================ */
function MiniTriad() {
  return (
    <svg width="64" height="64" viewBox="0 0 64 64" className="mini-triad" aria-hidden="true">
      <circle cx="32" cy="10" r="3.5" fill="var(--lime)" />
      <circle cx="11" cy="50" r="3.5" fill="var(--lime)" />
      <circle cx="53" cy="50" r="3.5" fill="var(--lime)" />
      <line x1="32" y1="10" x2="11" y2="50" stroke="var(--lime)" strokeWidth="1" strokeDasharray="2 4" className="flow flow-1" />
      <line x1="11" y1="50" x2="53" y2="50" stroke="var(--lime)" strokeWidth="1" strokeDasharray="2 4" className="flow flow-2" />
      <line x1="53" y1="50" x2="32" y2="10" stroke="var(--lime)" strokeWidth="1" strokeDasharray="2 4" className="flow flow-3" />
    </svg>
  );
}

/* ============================================================
   Platform "logo chips" — stylized monogram marks for the stack
   ============================================================ */
function PlatformMark({ name, color = 'var(--lime)' }) {
  const colorMap = {
    Meta: '#1877F2',
    Google: '#4285F4',
    TikTok: '#25F4EE',
    MELI: '#FFE600',
    Pinterest: '#E60023',
    GA4: '#E37400',
    Looker: '#4285F4',
    DV360: '#F9AB00',
    Claude: '#D97757',
    Detrics: '#C4FB2B',
    WhatsApp: '#25D366',
    Pixel: '#1877F2',
  };
  const bg = colorMap[name] || color;
  const letter = name[0];
  // contrast pick
  const dark = ['#FFE600', '#25F4EE', '#C4FB2B', '#F9AB00'].includes(bg);
  return (
    <span className="pmark" title={name}>
      <span className="pmark-dot" style={{ background: bg, color: dark ? '#032112' : '#fff' }}>{letter}</span>
      <span className="pmark-name">{name}</span>
    </span>
  );
}

Object.assign(window, {
  Logo, Arrow, ArrowDown, Eyebrow, SectionHead,
  ConnectionTriad, LaburoMatrix, MiniTriad, PlatformMark,
});