/* global React */

function Clients() {
  const t = window.useT();

  React.useEffect(() => {
    const els = document.querySelectorAll('.founder-reveal');
    if (!els.length) return;
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach(el => observer.observe(el));
    return () => observer.disconnect();
  }, []);

  const logos = [
    { name: 'Aedas Homes', src: 'assets/clients/aedas-homes.webp' },
    { name: 'Neinor Homes', src: 'assets/clients/neinor-homes.webp' },
    { name: 'Antima Homes', src: 'assets/clients/antima-homes.webp' },
    { name: 'BD Capital Real Estate', src: 'assets/clients/bd-capital.png' },
    { name: 'RMZ Invest', src: 'assets/clients/rmz-invest.webp' },
    { name: 'Cano y Escario Arquitectura', src: 'assets/clients/cano-y-escario.webp' },
    { name: 'Pepe Cabrera', src: 'assets/clients/pepe-cabrera.webp' },
    { name: 'NH Hoteles', src: 'assets/clients/nh-hoteles.webp' },
    { name: 'Vía Célere', src: 'assets/clients/via-celere.webp' },
    { name: 'Gestilar', src: 'assets/clients/gestilar.webp' },
    { name: 'Grupo Insur', src: 'assets/clients/insur.webp' },
    { name: 'Taylor Wimpey España', src: 'assets/clients/taylor-wimpey.webp' },
  ];

  return (
    <section id="confianza" data-screen-label="05 Garantía" className="clients-section" style={{
      background: 'var(--lr-cal-blanca)',
      padding: '160px 56px 140px',
      borderTop: '1px solid var(--border-subtle)',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        {/* Header */}
        <div className="clients-header" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 96, alignItems: 'flex-end', marginBottom: 96,
        }}>
          <div>
            <div style={{
              fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 11,
              letterSpacing: '0.32em', textTransform: 'uppercase',
              color: 'var(--lr-terracota)', marginBottom: 18,
            }}>{t('clients.header.label')}</div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 400,
              fontSize: 'clamp(40px, 5vw, 76px)', lineHeight: 1.04,
              letterSpacing: '-0.024em',
              color: 'var(--lr-tierra-profunda)', margin: 0,
            }}>
              {t('clients.header.title').replace(t('clients.header.subtitle'), '')}
              <br />
              <em style={{
                fontFamily: 'var(--font-italic)', fontStyle: 'italic',
                color: 'var(--lr-terracota)',
              }}>{t('clients.header.subtitle')}</em>
            </h2>
          </div>
          <div style={{ paddingBottom: 8 }}>
            <p style={{
              fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6,
              color: 'var(--lr-tierra-500)', margin: 0,
              maxWidth: 460,
            }}>
              {(() => {
                const desc = t('clients.header.description');
                const splitAt = desc.indexOf('. ');
                const italic = splitAt !== -1 ? desc.slice(0, splitAt + 1) : desc;
                const rest = splitAt !== -1 ? desc.slice(splitAt + 2) : '';
                return (
                  <>
                    <em style={{
                      fontFamily: 'var(--font-italic)', fontStyle: 'italic',
                      color: 'var(--lr-tierra-profunda)',
                    }}>{italic}</em>
                    {rest ? ' ' + rest : null}
                  </>
                );
              })()}
            </p>
          </div>
        </div>

        {/* Logo grid */}
        <div className="clients-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(6, 1fr)',
          gap: '32px 48px',
        }}>
          {logos.map((logo, i) => (
            <div key={i} className="clients-cell" style={{
              aspectRatio: '16 / 9',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              padding: 0,
              position: 'relative',
              overflow: 'hidden',
              transition: 'background 360ms ease',
            }}>
              <img src={logo.src} alt={logo.name}
                loading="lazy"
                style={{
                  width: '100%',
                  height: '100%',
                  objectFit: 'contain',
                  display: 'block',
                  filter: 'grayscale(1)',
                  opacity: 0.7,
                  transition: 'transform 480ms cubic-bezier(0.2, 0.7, 0.15, 1), filter 400ms ease, opacity 400ms ease',
                }} />
            </div>
          ))}
        </div>

        {/* Founder bio block */}
        <div className="founder-reveal founder-block" style={{
          marginTop: 'clamp(96px, 10vw, 160px)',
          borderTop: '1px solid var(--border-subtle)',
          paddingTop: 'clamp(64px, 7vw, 96px)',
        }}>
          <div className="founder-grid" style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 'clamp(48px, 6vw, 96px)',
            alignItems: 'center',
          }}>
            {/* LEFT: text */}
            <div>
              {/* Eyebrow */}
              <div style={{
                fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 11,
                letterSpacing: '0.32em', textTransform: 'uppercase',
                color: 'var(--lr-terracota)', marginBottom: 24,
              }}>{t('founder.eyebrow')}</div>

              {/* Title h3 */}
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 400,
                fontSize: 'clamp(34px, 4vw, 56px)', lineHeight: 1.06,
                letterSpacing: '-0.022em',
                color: 'var(--lr-tierra-profunda)',
                marginBottom: 32, marginTop: 0,
                maxWidth: 540,
              }}>
                {(() => {
                  const title = t('founder.title');
                  const emphasis = t('founder.title.emphasis');
                  const idx = title.lastIndexOf(emphasis);
                  if (idx === -1) return title;
                  return (
                    <>
                      {title.slice(0, idx)}
                      <em style={{ fontFamily: 'var(--font-italic)', fontStyle: 'italic', color: 'var(--lr-terracota)' }}>
                        {emphasis}
                      </em>
                      {title.slice(idx + emphasis.length)}
                    </>
                  );
                })()}
              </h3>

              {/* Body paragraphs */}
              <p style={{
                fontFamily: 'var(--font-body)', fontSize: 'clamp(16px, 1.1vw, 17px)', lineHeight: 1.65,
                color: 'var(--lr-tierra-500)', maxWidth: 540, marginBottom: 24, marginTop: 0,
              }}>{t('founder.body1')}</p>
              <p style={{
                fontFamily: 'var(--font-body)', fontSize: 'clamp(16px, 1.1vw, 17px)', lineHeight: 1.65,
                color: 'var(--lr-tierra-500)', maxWidth: 540, marginBottom: 0, marginTop: 0,
              }}>{t('founder.body2')}</p>

              {/* Signature */}
              <div style={{
                marginTop: 32,
                paddingTop: 24,
                borderTop: '1px solid var(--border-subtle)',
              }}>
                <div style={{
                  fontFamily: 'var(--font-italic)', fontStyle: 'italic',
                  fontSize: 22, color: 'var(--lr-tierra-profunda)',
                }}>{t('founder.signature.name')}</div>
                <div style={{
                  fontFamily: 'var(--font-ui)', fontSize: 11,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: 'var(--lr-tierra-500)', marginTop: 6,
                }}>{t('founder.signature.role')}</div>
                <div style={{
                  fontFamily: 'var(--font-ui)', fontSize: 11,
                  letterSpacing: '0.32em', textTransform: 'uppercase',
                  color: 'var(--lr-tierra-500)', marginTop: 4,
                }}>{t('founder.signature.location')}</div>
              </div>
            </div>

            {/* RIGHT: photo */}
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <div className="founder-photo-wrap" style={{
                aspectRatio: '4 / 5',
                maxWidth: 480,
                width: '100%',
                maxHeight: 600,
                overflow: 'hidden',
                background: 'var(--lr-tierra-profunda)',
              }}>
                <img
                  src="images/founder/kino.webp?v=2"
                  alt="Joaquin · Director creativo de EIDORA"
                  loading="lazy"
                  style={{
                    width: '100%',
                    height: '100%',
                    objectFit: 'cover',
                    objectPosition: 'center',
                    display: 'block',
                    filter: 'grayscale(0.05)',
                    transition: 'transform 600ms ease',
                  }}
                />
              </div>
            </div>
          </div>
        </div>

      </div>

      <style>{`
        /* Founder photo hover */
        .founder-photo-wrap:hover img {
          transform: scale(1.02);
        }

        /* Scroll-reveal */
        .founder-reveal {
          opacity: 0;
          transform: translateY(32px);
          transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        .founder-reveal.is-visible {
          opacity: 1;
          transform: translateY(0);
        }

        @media (prefers-reduced-motion: reduce) {
          .founder-reveal {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
          }
          .founder-photo-wrap:hover img { transform: none !important; }
          .clients-cell img { transition: none !important; }
        }

        /* Founder responsive */
        @media (max-width: 768px) {
          .founder-grid {
            grid-template-columns: 1fr !important;
          }
          .founder-photo-wrap {
            max-width: 100% !important;
            max-height: 480px !important;
          }
        }
        @media (max-width: 480px) {
          .founder-grid h3 {
            font-size: clamp(26px, 7vw, 32px) !important;
            max-width: 100% !important;
          }
          .founder-grid p {
            max-width: 100% !important;
          }
        }

        .clients-grid:hover .clients-cell img {
          opacity: 0.45;
          filter: grayscale(1);
          transition: opacity var(--duration-base) var(--ease-standard), filter var(--duration-base) var(--ease-standard);
        }
        .clients-cell:hover img,
        .clients-cell:focus-within img {
          transform: scale(1.08);
          filter: grayscale(0) !important;
          opacity: 1 !important;
        }
        @media (max-width: 1280px) {
          .clients-grid {
            grid-template-columns: repeat(5, 1fr) !important;
          }
        }
        @media (max-width: 1024px) {
          .clients-grid {
            grid-template-columns: repeat(4, 1fr) !important;
          }
        }
        @media (max-width: 767px) {
          .clients-section {
            padding: 120px 24px 80px !important;
          }
          .clients-header {
            grid-template-columns: 1fr !important;
            gap: 32px !important;
          }
          .clients-grid {
            gap: 20px 24px !important;
          }
          .clients-cell img {
            opacity: 0.72 !important;
          }
        }
        @media (max-width: 640px) {
          .clients-grid {
            grid-template-columns: repeat(3, 1fr) !important;
          }
        }
        @media (max-width: 560px) {
          .clients-grid {
            grid-template-columns: repeat(3, 1fr) !important;
          }
        }
        @media (max-width: 479px) {
          .clients-section {
            padding: 88px 16px 60px !important;
          }
          .clients-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 16px 16px !important;
          }
        }
      `}</style>
    </section>
  );
}

window.Clients = Clients;