// ─── Developer & affiliate logos ───────────────────────────────────
// Centralized logo renderer. Some uploaded source SVGs contain external image
// references, so F&F and Durex use clean inline wordmarks to guarantee they
// render everywhere on Hostinger.
const LOGO_BASE = 'assets/logos/';

const DEVELOPER_LOGOS = {
  'TheVelopers': { src: LOGO_BASE + 'thevelopers.svg', alt: 'TheVelopers' },
  'Thevelopers': { src: LOGO_BASE + 'thevelopers.svg', alt: 'TheVelopers' },
  'Pacific Developers': { src: LOGO_BASE + 'pacific-developers.svg', alt: 'Pacific Developers' },
  'Playa Escondida': { src: LOGO_BASE + 'ocean-reef.svg', alt: 'Playa Escondida' },
  'Ocean Reef': { src: LOGO_BASE + 'ocean-reef.svg', alt: 'Ocean Reef' },
  'Sartoriale': { src: LOGO_BASE + 'sartoriale.png', alt: 'Sartoriale' },
  'Urbania': { src: LOGO_BASE + 'urbania.png', alt: 'Urbania' },
  'F&F': { wordmark: 'F&F', alt: 'F&F' },
  'Durex': { wordmark: 'DUREX', alt: 'Durex' },
  'GK Developers': { src: LOGO_BASE + 'gk-properties.svg', alt: 'GK Developers' },
  'GK Properties': { src: LOGO_BASE + 'gk-properties.svg', alt: 'GK Properties' },
  'BERN': { src: LOGO_BASE + 'bern.svg', alt: 'BERN' },
  'Mallol': { src: LOGO_BASE + 'mallol.svg', alt: 'Mallol' },
  'Santa Maria': { src: LOGO_BASE + 'santa-maria.svg', alt: 'Santa Maria' },
  'Grupo Paseo Sendero': { src: LOGO_BASE + 'grupo-paseo-sendero.svg', alt: 'Grupo Paseo Sendero' },
  'Grupo Paseo del Sendero': { src: LOGO_BASE + 'grupo-paseo-sendero.svg', alt: 'Grupo Paseo del Sendero' },
};

const ALLY_LOGOS = [
  { name: 'TheVelopers', src: LOGO_BASE + 'thevelopers.svg', type: 'Developer' },
  { name: 'Mallol', src: LOGO_BASE + 'mallol.svg', type: 'Ally' },
  { name: 'Ocean Reef', src: LOGO_BASE + 'ocean-reef.svg', type: 'Ally' },
  { name: 'Pacific Developers', src: LOGO_BASE + 'pacific-developers.svg', type: 'Developer' },
  { name: 'Santa Maria', src: LOGO_BASE + 'santa-maria.svg', type: 'Ally' },
  { name: 'BERN', src: LOGO_BASE + 'bern.svg', type: 'Developer' },
  { name: 'F&F', wordmark: 'F&F', type: 'Developer' },
  { name: 'Durex', wordmark: 'DUREX', type: 'Developer' },
  { name: 'Grupo Paseo Sendero', src: LOGO_BASE + 'grupo-paseo-sendero.svg', type: 'Ally' },
  { name: 'Sartoriale', src: LOGO_BASE + 'sartoriale.png', type: 'Developer' },
  { name: 'GK Developers', src: LOGO_BASE + 'gk-properties.svg', type: 'Developer' },
  { name: 'Urbania', src: LOGO_BASE + 'urbania.png', type: 'Developer' },
  { name: 'ACOBIR', src: LOGO_BASE + 'acobir.svg', type: 'Affiliation' },
  { name: 'FIABCI', src: LOGO_BASE + 'fiabci.svg', type: 'Affiliation' },
  { name: 'Lonja de Propiedad Raíz', src: LOGO_BASE + 'lonja.svg', type: 'Affiliation' },
  { name: 'Realtor', src: LOGO_BASE + 'realtor.svg', type: 'Affiliation' },
];

const logoFilter = (variant) => variant === 'light'
  ? 'brightness(0) invert(1) grayscale(1) contrast(1.2)'
  : 'brightness(0) grayscale(1) contrast(1.25)';

const LogoWordmark = ({ name, variant = 'dark', height = 44, carousel = false }) => {
  const color = variant === 'light' ? '#F4F1EC' : '#2C2C2A';
  const h = Number(height) || 44;
  const isFF = String(name).toLowerCase().includes('f&f');
  const isDurex = String(name).toLowerCase().includes('durex');
  return React.createElement('span', {
    className: `dp-logo-wordmark ${isFF ? 'dp-logo-wordmark--ff' : ''} ${isDurex ? 'dp-logo-wordmark--durex' : ''}`,
    style: {
      minHeight: h,
      minWidth: carousel ? 190 : Math.max(120, h * 3.2),
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      color,
      fontFamily: isFF ? "'Cormorant Garamond',serif" : "'DM Mono',monospace",
      fontSize: isFF ? Math.max(42, h * 1.18) : Math.max(30, h * 0.88),
      fontWeight: isFF ? 400 : 500,
      letterSpacing: isFF ? '-0.04em' : '0.16em',
      lineHeight: 1,
      textTransform: 'uppercase',
    },
  }, isFF ? 'F&F' : 'DUREX');
};

const LogoVisual = ({ item, name, variant = 'dark', height = 44, compact = false, maxWidth, carousel = false }) => {
  const logo = item || DEVELOPER_LOGOS[name];
  const actualHeight = Number(height) || 44;
  const actualMaxWidth = maxWidth || (compact ? 230 : 300);
  if (!logo) return null;
  if (logo.wordmark) return React.createElement(LogoWordmark, { name: logo.wordmark, variant, height: actualHeight, carousel });
  return React.createElement('img', {
    className: 'dp-developer-logo__img',
    src: logo.src,
    alt: logo.alt || name,
    loading: 'lazy',
    style: {
      display: 'block',
      width: 'auto',
      height: actualHeight,
      maxWidth: actualMaxWidth,
      objectFit: 'contain',
      filter: logoFilter(variant),
      opacity: 1,
    },
  });
};

const DeveloperLogo = ({ name, variant = 'dark', height = 44, compact = false, maxWidth }) => {
  const normalized = name === 'Thevelopers' ? 'TheVelopers' : name;
  const logo = DEVELOPER_LOGOS[normalized] || DEVELOPER_LOGOS[name];
  const actualHeight = Number(height) || 44;
  if (!logo) {
    return React.createElement('span', {
      className: 'dp-developer-logo dp-developer-logo--text',
      style: {
        minHeight: actualHeight, display: 'inline-flex', alignItems: 'center',
        fontFamily: "'DM Mono',monospace", fontSize: compact ? 9 : 11,
        letterSpacing: '0.14em', textTransform: 'uppercase',
        color: variant === 'light' ? 'rgba(244,241,236,0.86)' : '#2C2C2A',
      },
    }, normalized || 'Developer');
  }
  return React.createElement('span', {
    title: normalized,
    className: 'dp-developer-logo',
    style: {
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      minWidth: 0, minHeight: actualHeight, verticalAlign: 'middle', width: '100%',
    },
  }, React.createElement(LogoVisual, { item: logo, name: normalized, variant, height: actualHeight, compact, maxWidth }));
};

const LogoMarquee = ({ variant = 'dark' }) => {
  const items = ALLY_LOGOS.concat(ALLY_LOGOS);
  return React.createElement('div', {
    className: 'logo-marquee',
    style: {
      overflow: 'hidden', borderTop: `1px solid ${variant === 'light' ? 'rgba(244,241,236,0.1)' : 'rgba(44,44,42,0.12)'}`,
      borderBottom: `1px solid ${variant === 'light' ? 'rgba(244,241,236,0.1)' : 'rgba(44,44,42,0.12)'}`,
      background: variant === 'light' ? 'rgba(244,241,236,0.03)' : 'rgba(44,44,42,0.02)',
    },
  },
    React.createElement('div', { className: 'logo-marquee__track' },
      items.map((l, i) => React.createElement('div', {
        key: i, className: 'logo-marquee__item',
        style: { borderRight: `1px solid ${variant === 'light' ? 'rgba(244,241,236,0.08)' : 'rgba(44,44,42,0.08)'}` },
      },
        React.createElement('div', { className: 'logo-marquee__visual' },
          React.createElement(LogoVisual, { item: l, name: l.name, variant, height: l.name === 'Mallol' ? 92 : 78, maxWidth: l.name === 'Mallol' ? 260 : 230, carousel: true })
        ),
        React.createElement('span', null, l.type)
      ))
    )
  );
};

Object.assign(window, { DEVELOPER_LOGOS, ALLY_LOGOS, DeveloperLogo, LogoMarquee });