/* eslint-disable react/prop-types */
/**
 * LogoWall · Sección 9 del Home · JUNTO A QUIENES LO HEMOS HECHO.
 * Brief 1 §3.1 Sección 9 + §4 (referido).
 *
 * - Tabs horizontales sticky de categoría
 * - 3 filas de marquee infinito, velocidades alternadas
 * - Logos tratados monocromáticamente en navy oscuro (placeholders
 *   con wordmarks genéricos, el cliente reemplaza con SVGs reales)
 * - Footer: +1,720 organizaciones más a lo largo de 18 años.
 */

const { useState: uS_LW } = React;

const CATEGORIES_LW = ['Todos', 'Desarrolladores', 'Capital', 'Retail', 'Industrial', 'Hotelería', 'Educación', 'Salud', 'Gobierno'];

/* Placeholders de logos: wordmarks genéricos en monocromo navy.
   El cliente sustituye cada uno por el SVG real del logo del cliente.
   Categorías por logo para que los tabs filtren.

   Campo opcional `logo`: ruta a SVG real desde `home/`. Si está presente,
   el LogoCell renderiza la imagen SVG en lugar del wordmark tipográfico.
   Cuando no hay logo SVG, cae al texto formateado (serif/sans/mono). */
const LOGOS = [
  // Desarrolladores
  { name: 'GRUPO GIM',          cat: 'Desarrolladores', style: 'serif' },
  { name: 'ASTRA',              cat: 'Desarrolladores', style: 'sans' },
  { name: 'GRUPO GENTOR',       cat: 'Desarrolladores', style: 'sans' },
  { name: 'ARTHA CAPITAL',      cat: 'Capital',         style: 'serif' },
  { name: 'ONE DEVELOPMENT',    cat: 'Desarrolladores', style: 'mono' },
  { name: 'CAPITAL NATURAL',    cat: 'Capital',         style: 'serif' },
  { name: 'GM CAPITAL',         cat: 'Capital',         style: 'sans' },
  { name: 'LANDO',              cat: 'Desarrolladores', style: 'sans' },
  // Capital
  { name: 'FIBRA UNO',          cat: 'Capital',         style: 'mono' },
  { name: 'PROMECAP',           cat: 'Capital',         style: 'sans' },
  { name: 'PLANIGRUPO',         cat: 'Capital',         style: 'serif' },
  { name: 'WALTON STREET',      cat: 'Capital',         style: 'serif' },
  // Retail
  { name: 'CHEDRAUI',           cat: 'Retail',          style: 'sans', logo: 'assets/logos-clientes/chedraui.svg' },
  { name: 'SORIANA',            cat: 'Retail',          style: 'sans', logo: 'assets/logos-clientes/soriana.svg' },
  { name: 'CINÉPOLIS',          cat: 'Retail',          style: 'sans' },
  { name: 'LIVERPOOL',          cat: 'Retail',          style: 'serif' },
  { name: 'PALACIO DE HIERRO',  cat: 'Retail',          style: 'serif' },
  // Industrial
  { name: 'FORD',               cat: 'Industrial',      style: 'sans', logo: 'assets/logos-clientes/ford.svg' },
  { name: 'NEMAK',              cat: 'Industrial',      style: 'mono' },
  { name: 'KATCON',             cat: 'Industrial',      style: 'sans' },
  { name: 'METALSA',            cat: 'Industrial',      style: 'mono' },
  // Hotelería
  { name: 'GRUPO POSADAS',      cat: 'Hotelería',       style: 'serif' },
  { name: 'CITY EXPRESS',       cat: 'Hotelería',       style: 'sans' },
  { name: 'NH HOTELES',         cat: 'Hotelería',       style: 'mono' },
  // Educación
  { name: 'TEC DE MONTERREY',   cat: 'Educación',       style: 'serif' },
  { name: 'UDEM',               cat: 'Educación',       style: 'mono' },
  { name: 'UANL',               cat: 'Educación',       style: 'serif' },
  // Salud
  { name: 'HOSPITAL ZAMBRANO',  cat: 'Salud',           style: 'serif' },
  { name: 'CHRISTUS MUGUERZA',  cat: 'Salud',           style: 'sans' },
  { name: 'OCA HOSPITAL',       cat: 'Salud',           style: 'sans' },
  // Gobierno
  { name: 'GOBIERNO NL',        cat: 'Gobierno',        style: 'serif' },
  { name: 'GOBIERNO CDMX',      cat: 'Gobierno',        style: 'serif' },
  { name: 'MONTERREY',          cat: 'Gobierno',        style: 'sans' },
  { name: 'SAN PEDRO',          cat: 'Gobierno',        style: 'sans' },
];

const STYLE_FONT = {
  serif: { fontFamily: '"Georgia", serif',     fontWeight: 700, letterSpacing: '0.04em' },
  sans:  { fontFamily: 'var(--font-sans)',      fontWeight: 800, letterSpacing: '0.04em' },
  mono:  { fontFamily: 'ui-monospace, Menlo, Consolas, monospace', fontWeight: 700, letterSpacing: '0.18em' },
};

/* Path resolver — LogoWall solo se usa en Home, así que asumimos
   ruta relativa desde home/. Si en el futuro se reusa el componente
   desde otra página, este resolver lo adapta. */
function resolveLogoUrl(rel) {
  if (!rel) return null;
  if (rel.startsWith('/') || rel.startsWith('http')) return rel;
  if (window.location.pathname.includes('/home/')) return rel;
  return `../home/${rel}`;
}

function LogoCell({ logo, dim }) {
  const url = resolveLogoUrl(logo.logo);
  return (
    <div style={{
      ...lwStyles.cell,
      opacity: dim ? 0.18 : 1,
      transition: 'opacity 300ms ease',
    }}>
      {url ? (
        /* SVG real — tinte navy via CSS filter. Si el SVG ya es del color
           correcto el filter no hace daño visible. */
        <img
          src={url}
          alt={logo.name}
          style={lwStyles.logoImg}
          loading="lazy"
        />
      ) : (
        /* Fallback tipográfico — wordmark monocromo navy */
        <span style={{
          ...lwStyles.wordmark,
          ...STYLE_FONT[logo.style],
        }}>
          {logo.name}
        </span>
      )}
    </div>
  );
}

function MarqueeRow({ logos, speed, reverse, active }) {
  /* Duplicado para loop continuo */
  const doubled = [...logos, ...logos];
  return (
    <div style={lwStyles.rowMask} data-cursor="drag" data-cursor-label="WALL">
      <div style={{
        ...lwStyles.rowTrack,
        animation: `lwMarquee ${speed}s linear infinite ${reverse ? 'reverse' : 'normal'}`,
      }}>
        {doubled.map((l, i) => (
          <LogoCell key={i} logo={l} dim={active !== 'Todos' && l.cat !== active} />
        ))}
      </div>
    </div>
  );
}

function LogoWall() {
  const [active, setActive] = uS_LW('Todos');

  /* Repartir en 3 filas asegurando suficientes elementos por fila */
  const base = LOGOS;
  const row1 = base.filter((_, i) => i % 3 === 0);
  const row2 = base.filter((_, i) => i % 3 === 1);
  const row3 = base.filter((_, i) => i % 3 === 2);

  return (
    <section data-screen-label="09 Logo Wall" style={lwStyles.section}>
      <div className="container">
        <div style={lwStyles.header}>
          <span className="eyebrow">CLIENTES</span>
          <h2 style={lwStyles.title}>Junto a quienes lo hemos hecho.</h2>
          <p style={lwStyles.intro}>
            +180 organizaciones nos han contratado para originar sus negocios inmobiliarios. Estas son algunas.
          </p>
        </div>

        <div style={lwStyles.tabs} role="tablist" aria-label="Categorías de clientes">
          {CATEGORIES_LW.map((c) => (
            <button
              key={c}
              role="tab"
              aria-selected={active === c}
              onClick={() => setActive(c)}
              data-cursor="link"
              style={{
                ...lwStyles.tab,
                color: active === c ? '#fff' : 'var(--color-navy-deep)',
                background: active === c ? 'var(--color-navy-deep)' : 'transparent',
                borderColor: active === c ? 'var(--color-navy-deep)' : 'rgba(33,52,64,0.18)',
              }}
            >
              {c}
            </button>
          ))}
        </div>
      </div>

      <div style={lwStyles.rowsWrap}>
        <MarqueeRow logos={row1} speed={60} reverse={false} active={active} />
        <MarqueeRow logos={row2} speed={80} reverse={true}  active={active} />
        <MarqueeRow logos={row3} speed={70} reverse={false} active={active} />
      </div>

      <div className="container" style={lwStyles.footerNote}>
        +1,720 organizaciones más a lo largo de 18 años.
      </div>
    </section>
  );
}

const lwStyles = {
  section: {
    background: 'var(--color-cream)',
    paddingBlock: 'var(--space-3xl)',
    overflow: 'hidden',
  },
  header: { maxWidth: 820, marginBottom: 32 },
  title: {
    margin: '12px 0 16px',
    fontWeight: 800,
    fontSize: 'clamp(28px, 3.5vw, 40px)',
    lineHeight: 1.1,
    color: 'var(--color-navy-deep)',
    letterSpacing: '0.02em',
    textWrap: 'balance',
  },
  intro: {
    margin: 0,
    fontSize: 17,
    color: 'var(--color-navy-medium)',
  },
  tabs: {
    display: 'flex',
    flexWrap: 'wrap',
    gap: 8,
    marginBottom: 48,
    position: 'sticky',
    top: 80,
    zIndex: 2,
    paddingBlock: 8,
  },
  tab: {
    fontFamily: 'inherit',
    fontWeight: 700,
    fontSize: 12,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    padding: '8px 14px',
    border: '1px solid',
    borderRadius: 999,
    cursor: 'pointer',
    transition: 'all 200ms ease-out',
  },
  rowsWrap: {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
    marginBottom: 48,
  },
  rowMask: {
    overflow: 'hidden',
    maskImage: 'linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%)',
    WebkitMaskImage: 'linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%)',
  },
  rowTrack: {
    display: 'flex',
    gap: 56,
    width: 'max-content',
    padding: '24px 28px',
  },
  cell: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    minWidth: 180,
    height: 64,
    padding: '0 8px',
    borderLeft: '1px solid rgba(33,52,64,0.12)',
  },
  wordmark: {
    fontSize: 18,
    color: 'var(--color-navy-deep)',
    textTransform: 'uppercase',
    whiteSpace: 'nowrap',
  },
  logoImg: {
    /* Tinte navy oscuro vía filtro CSS — funciona con cualquier SVG
       monocromo. Si el SVG es multicolor, se ve mejor sin filtro;
       en ese caso elimina la línea `filter:` siguiente. */
    maxHeight: 40,
    maxWidth: 140,
    width: 'auto',
    height: 'auto',
    objectFit: 'contain',
    filter: 'brightness(0) saturate(100%) invert(17%) sepia(13%) saturate(1247%) hue-rotate(160deg) brightness(94%) contrast(89%)',
    /* approx of navy #213440. Si Prosperia tiene logos en color,
       basta con quitar este filter. */
  },
  footerNote: {
    margin: 0,
    fontSize: 14,
    color: 'var(--color-navy-medium)',
    fontStyle: 'italic',
    textAlign: 'center',
  },
};

const lwMQ = document.createElement('style');
lwMQ.textContent = `
  @keyframes lwMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  section[data-screen-label="09 Logo Wall"] div[data-cursor="drag"]:hover > div {
    animation-play-state: paused;
  }
  section[data-screen-label="09 Logo Wall"] button[role="tab"]:not([aria-selected="true"]):hover {
    border-color: var(--color-copper-fallback) !important;
    color: var(--color-copper-fallback) !important;
  }
`;
document.head.appendChild(lwMQ);

window.LogoWall = LogoWall;