/* eslint-disable react/prop-types */
/**
 * Services · Sección 6 del Home · DOS FORMAS DE TRABAJAR JUNTOS.
 * Brief 1 §3.1 Sección 6.  Look estilo gehlpeople.com:
 *  - Ken Burns sutil en idle (zoom + drift muy lento)
 *  - Hover: scale 1.06, overlay aclara, número de eyebrow se desliza
 *  - Caption se levanta y se revela un caption secundario debajo
 *  - Badge cobre con flecha arriba-derecha
 */

const { useState: uS_Sv } = React;

const SERVICES = [
  {
    img: 'assets/images/prosperia-originacion-card-portrait.jpg',
    tone: 'urban',
    label: 'PLANNING · LECTURA DE POLÍGONO · 4:5',
    eyebrow: '01 · ANTES DEL PROYECTO',
    title: 'ORIGINACIÓN',
    subtitle: 'De la lectura del polígono al diseño del negocio.',
    extra: 'Inteligencia de mercado · Definición de producto · Estructuración · Arrendamiento institucional',
    href: '/servicios/Servicios.html#originacion',
  },
  {
    img: 'assets/images/prosperia-co-desarrollo-card-portrait.jpg',
    tone: 'construction',
    label: 'EQUIPO EN SITIO · OPERACIÓN · 4:5',
    eyebrow: '02 · DURANTE LA EJECUCIÓN',
    title: 'CO-DESARROLLO',
    subtitle: 'De la ejecución a la operación, contigo.',
    extra: 'Coordinación de equipos · Supervisión de rentabilidad · Gestión de cambios · Dirección comercial',
    href: '/servicios/Servicios.html#co-desarrollo',
  },
];

function Services() {
  const [hover, setHover] = uS_Sv(null);

  return (
    <section data-screen-label="06 Services" style={servStyles.section}>
      <div className="container">
        <div style={servStyles.header}>
          <span className="eyebrow">SERVICIOS</span>
          <h2 style={servStyles.title}>DOS FORMAS DE TRABAJAR JUNTOS</h2>
          <p style={servStyles.descLg}>
            Acompañamos a nuestros socios desde la idea hasta la operación. Dos ejes que cubren todo el ciclo de un negocio inmobiliario.
          </p>
          <p style={servStyles.descSm}>
            Nuestra oferta se divide en dos grandes ejes de colaboración:
          </p>
        </div>

        <div style={servStyles.grid}>
          {SERVICES.map((s, i) => {
            const active = hover === i;
            return (
              <a
                key={i}
                href={s.href}
                onMouseEnter={() => setHover(i)}
                onMouseLeave={() => setHover(null)}
                data-cursor="view"
                data-cursor-label={s.title.trim()}
                style={servStyles.card}
              >
                <div style={{
                  ...servStyles.imgWrap,
                  transform: active ? 'scale(1.06)' : 'scale(1.02)',
                  filter: active ? 'brightness(1.04)' : 'brightness(1.0)',
                }}>
                  <window.ImagePlaceholder
                    src={s.img}
                    alt={s.label}
                    label={s.label}
                    tone={s.tone}
                    ratio="auto"
                    style={{ width: '100%', height: '100%', aspectRatio: 'auto' }}
                  />
                </div>
                <div style={{
                  ...servStyles.overlay,
                  opacity: active ? 0.92 : 0.85,
                }} aria-hidden="true" />

                <div style={{
                  ...servStyles.arrowBadge,
                  transform: active ? 'translate(0, 0) rotate(0)' : 'translate(12px, -12px) rotate(-12deg)',
                  opacity: active ? 1 : 0,
                }}>
                  <window.Icon name="arrow-up-right" size={18} stroke={1.8} />
                </div>

                <div style={servStyles.cardContent}>
                  <span style={{
                    ...servStyles.cardEyebrow,
                    opacity: active ? 1 : 0.85,
                    transform: active ? 'translateY(0)' : 'translateY(2px)',
                  }}>{s.eyebrow}</span>
                  <h3 style={{
                    ...servStyles.cardTitle,
                    transform: active ? 'translateY(-8px)' : 'translateY(0)',
                  }}>{s.title}</h3>
                  <p style={{
                    ...servStyles.cardSubtitle,
                    transform: active ? 'translateY(-8px)' : 'translateY(0)',
                  }}>{s.subtitle}</p>

                  <div style={{
                    ...servStyles.cardExtra,
                    maxHeight: active ? 80 : 0,
                    opacity: active ? 1 : 0,
                    transform: active ? 'translateY(0)' : 'translateY(8px)',
                  }}>
                    <span style={servStyles.divider} aria-hidden="true" />
                    <span style={servStyles.extraText}>{s.extra}</span>
                  </div>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

const servStyles = {
  section: {
    background: 'var(--color-cream)',
    paddingBlock: 'var(--space-3xl)',
  },
  header: {
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
    marginBottom: 64,
    maxWidth: 880,
  },
  title: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(32px, 5vw, 56px)',
    lineHeight: 1.08,
    color: 'var(--color-navy-deep)',
    letterSpacing: '0.02em',
    textWrap: 'balance',
  },
  descLg: {
    margin: 0,
    fontSize: 'clamp(16px, 1.5vw, 19px)',
    lineHeight: 1.6,
    color: 'var(--color-navy-deep)',
  },
  descSm: {
    margin: 0,
    fontSize: 16,
    color: 'var(--color-navy-medium)',
    fontStyle: 'italic',
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 24,
  },
  card: {
    position: 'relative',
    aspectRatio: '4 / 5',
    overflow: 'hidden',
    borderRadius: 4,
    display: 'block',
    color: '#fff',
    transition: 'box-shadow 400ms',
  },
  imgWrap: {
    position: 'absolute', inset: 0,
    transition: 'transform 1200ms cubic-bezier(0.16, 1, 0.3, 1), filter 400ms ease',
    animation: 'kenBurns 24s ease-in-out infinite alternate',
  },
  overlay: {
    position: 'absolute', inset: 0,
    background: 'linear-gradient(180deg, rgba(33,52,64,0.05) 0%, rgba(33,52,64,0.30) 45%, rgba(20,32,40,0.92) 100%)',
    transition: 'opacity 600ms cubic-bezier(0.16,1,0.3,1)',
  },
  arrowBadge: {
    position: 'absolute',
    top: 24, right: 24,
    width: 48, height: 48,
    borderRadius: 999,
    backgroundImage: 'url("assets/textures/cobre-patinado.svg")',
    backgroundSize: 'cover',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    transition: 'transform 600ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms ease',
    color: '#fff',
    boxShadow: '0 8px 20px rgba(168, 107, 45, 0.32)',
  },
  cardContent: {
    position: 'absolute',
    left: 32, right: 32, bottom: 32,
    display: 'flex',
    flexDirection: 'column',
    gap: 10,
  },
  cardEyebrow: {
    fontSize: 11,
    fontWeight: 700,
    letterSpacing: '0.22em',
    textTransform: 'uppercase',
    color: 'var(--color-copper-fallback)',
    transition: 'all 500ms cubic-bezier(0.16,1,0.3,1)',
  },
  cardTitle: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(32px, 4vw, 48px)',
    lineHeight: 1.0,
    color: '#fff',
    letterSpacing: '0.03em',
    transition: 'transform 600ms cubic-bezier(0.16,1,0.3,1)',
  },
  cardSubtitle: {
    margin: 0,
    color: 'rgba(255,255,255,0.92)',
    fontSize: 18,
    lineHeight: 1.45,
    fontWeight: 400,
    transition: 'transform 600ms cubic-bezier(0.16,1,0.3,1)',
  },
  cardExtra: {
    overflow: 'hidden',
    transition: 'max-height 600ms cubic-bezier(0.16,1,0.3,1), opacity 400ms ease, transform 600ms cubic-bezier(0.16,1,0.3,1)',
    display: 'flex',
    flexDirection: 'column',
    gap: 14,
  },
  divider: {
    display: 'block',
    width: 40, height: 1,
    background: 'rgba(255,255,255,0.4)',
    marginTop: 8,
  },
  extraText: {
    fontSize: 13,
    lineHeight: 1.6,
    color: 'rgba(255,255,255,0.78)',
    letterSpacing: '0.02em',
  },
};

const servMQ = document.createElement('style');
servMQ.textContent = `
  @media (min-width: 900px) {
    section[data-screen-label="06 Services"] .container > div:nth-of-type(2) {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
  @keyframes kenBurns {
    0%   { transform: scale(1.02) translate(0, 0); }
    100% { transform: scale(1.08) translate(-2%, -1%); }
  }
`;
document.head.appendChild(servMQ);

window.Services = Services;