// Brand — Logo de Atica (dos personas en forma de corazón) · HCM Atica
// Reconstrucción SVG inline del isotipo del manual de marca: dos siluetas
// (cabeza + cuerpo en arco) que juntas trazan un corazón hueco — una cielo
// a la izquierda, una berenjena a la derecha — con un círculo (niño/a),
// una hoja y un punto anidados en el hueco central. Aproximación a mano
// de la ilustración de marca — primera versión, sujeta a ajuste visual.
// Convención del proyecto: sin imágenes externas, todo SVG inline.

// Isotipo suelto: dos personas en corazón. Colores configurables (misma
// API que la versión anterior, para no romper los ~10 usos existentes).
//   tri  = color de la persona derecha/berenjena (default: hereda currentColor)
//   leaf = color de la persona izquierda/cielo (default: Atica Sky)
function AticaMark({ size = 28, tri = 'currentColor', leaf = 'var(--sky-500)', className }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      className={className}
      role="img"
      aria-label="Atica"
      style={{ display: 'block' }}
    >
      {/* Cuerpo — persona cielo (izquierda) */}
      <path
        d="M50 92 C22 66 10 46 10 30 C10 12 28 6 42 18 C46 22 48 26 50 31 C44 45 56 55 50 68 C45 78 55 84 50 92 Z"
        fill={leaf}
        stroke="#fff"
        strokeWidth="1.5"
      />
      {/* Cuerpo — persona berenjena (derecha) */}
      <path
        d="M50 92 C55 84 45 78 50 68 C56 55 44 45 50 31 C52 26 54 22 58 18 C72 6 90 12 90 30 C90 46 78 66 50 92 Z"
        fill={tri}
        stroke="#fff"
        strokeWidth="1.5"
      />
      {/* Hueco central (corazón blanco, deja el cuerpo en forma de anillo) */}
      <path
        d="M50 78 C36 66 30 56 30 47 C30 38 39 34 46 40 C48 42 49 44 50 46 C51 44 52 42 54 40 C61 34 70 38 70 47 C70 56 64 66 50 78 Z"
        fill="#fff"
      />
      {/* Cabeza — persona cielo */}
      <circle cx="33" cy="20" r="12" fill={leaf} />
      {/* Cabeza — persona berenjena */}
      <circle cx="67" cy="18" r="13" fill={tri} />
      {/* Círculo central (niño/a) */}
      <circle cx="46" cy="54" r="9" fill="var(--teal-800)" />
      {/* Hoja */}
      <path d="M56 50 C64 54 64 66 54 70 C56 62 54 56 56 50 Z" fill={leaf} />
      {/* Punto */}
      <circle cx="37" cy="74" r="3" fill={tri} />
    </svg>
  );
}

// Tile cuadrado tipo "app icon": fondo blanco (contraste máximo con el
// corazón cielo/berenjena) con la marca a color natural.
function AticaTile({ size = 32, radius = 9 }) {
  return (
    <span
      style={{
        width: size, height: size, borderRadius: radius,
        background: '#FFFFFF',
        display: 'grid', placeItems: 'center', flexShrink: 0,
        boxShadow: 'inset 0 0 0 1px var(--border)',
      }}
    >
      <AticaMark size={Math.round(size * 0.78)} tri="var(--aubergine-800)" leaf="var(--sky-500)" />
    </span>
  );
}

// Wordmark: isotipo + "tica" (la marca completa lee "Atica").
//   tone = 'ink'  -> berenjena (fondos claros)
//          'light'-> blanco/cielo (fondos oscuros)
function AticaWordmark({ size = 22, tone = 'ink' }) {
  const triColor  = tone === 'light' ? '#FFFFFF' : 'var(--aubergine-800)';
  const leafColor = 'var(--sky-500)';
  const textColor = tone === 'light' ? '#FFFFFF' : 'var(--aubergine-800)';
  return (
    <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 1 }}>
      <AticaMark size={size} tri={triColor} leaf={leafColor} />
      <span
        style={{
          fontFamily: 'var(--font-display)',
          fontWeight: 800,
          fontSize: size,
          lineHeight: 1,
          letterSpacing: '-0.02em',
          color: textColor,
        }}
      >
        tica
      </span>
    </span>
  );
}

window.AticaMark = AticaMark;
window.AticaTile = AticaTile;
window.AticaWordmark = AticaWordmark;