/* eslint-disable react/prop-types */
/**
 * ServiciosHero · hero compacto (60vh) de la página Servicios.
 * Brief 1 §3.3 Hero.
 *
 * - Eyebrow + título grande + intro
 * - Foto evocativa (urban planning con personas)
 * - Overlay navy 50%
 * - Anchors pills al pie (Originación · Co-Desarrollo · DIGO®)
 *   con scroll-to-section + iconos
 */

const { useState: uS_SvH, useEffect: uE_SvH } = React;

const ANCHORS = [
  { id: 'originacion',  label: 'Originación',  num: '01', icon: 'compass' },
  { id: 'co-desarrollo', label: 'Co-Desarrollo', num: '02', icon: 'people' },
  { id: 'digo',         label: 'DIGO®',         num: '03', icon: 'target' },
];

function ServiciosHero() {
  const [loaded, setLoaded] = uS_SvH(false);
  uE_SvH(() => { const t = setTimeout(() => setLoaded(true), 60); return () => clearTimeout(t); }, []);

  const scrollTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <section id="top" data-screen-label="01 Servicios Hero" style={shStyles.section}>
      <div style={shStyles.imgWrap}>
        <window.ImagePlaceholder
          src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1920&q=80&auto=format&fit=crop"
          alt="Lectura de polígono · planning urbano"
          label="PLANNING · LECTURA DE POLÍGONO · 16:9"
          tone="urban"
          ratio="auto"
          style={{ width: '100%', height: '100%', aspectRatio: 'auto' }}
          overlay
          overlayOpacity={0.55}
        />
      </div>
      <div style={shStyles.bottomGradient} aria-hidden="true" />

      <div className="container" style={shStyles.inner}>
        <div style={{
          ...shStyles.eyebrowRow,
          opacity: loaded ? 1 : 0,
          transform: loaded ? 'translateY(0)' : 'translateY(8px)',
          transition: 'opacity 700ms ease 200ms, transform 700ms cubic-bezier(0.16,1,0.3,1) 200ms',
        }}>
          <span style={shStyles.eyebrowDot} aria-hidden="true" />
          <span style={shStyles.eyebrow}>SERVICIOS</span>
          <span style={shStyles.crumb}>NUESTRO TRABAJO</span>
        </div>

        <h1 style={{
          ...shStyles.title,
          opacity: loaded ? 1 : 0,
          transform: loaded ? 'translateY(0)' : 'translateY(16px)',
          transition: 'opacity 900ms ease 350ms, transform 900ms cubic-bezier(0.16,1,0.3,1) 350ms',
        }}>
          Empezar por la persona.<br/>Terminar por el negocio.
        </h1>

        <p style={{
          ...shStyles.intro,
          opacity: loaded ? 1 : 0,
          transform: loaded ? 'translateY(0)' : 'translateY(12px)',
          transition: 'opacity 900ms ease 500ms, transform 900ms cubic-bezier(0.16,1,0.3,1) 500ms',
        }}>
          Acompañamos a nuestros socios desde la lectura del polígono hasta la operación. Cada fase se contrata por separado; cada una está calibrada por +1,900 proyectos.
        </p>

        <nav style={{
          ...shStyles.anchorRow,
          opacity: loaded ? 1 : 0,
          transform: loaded ? 'translateY(0)' : 'translateY(12px)',
          transition: 'opacity 900ms ease 650ms, transform 900ms cubic-bezier(0.16,1,0.3,1) 650ms',
        }} aria-label="Bloques de servicio">
          {ANCHORS.map((a) => (
            <a
              key={a.id}
              href={`#${a.id}`}
              onClick={scrollTo(a.id)}
              data-cursor="link"
              style={shStyles.anchorChip}
            >
              <span style={shStyles.anchorNum}>{a.num}</span>
              <window.Icon name={a.icon} size={18} stroke={1.6} />
              <span>{a.label}</span>
              <span style={shStyles.anchorArrow}>
                <window.Icon name="arrow-down" size={14} stroke={1.8} />
              </span>
            </a>
          ))}
        </nav>
      </div>
    </section>
  );
}

const shStyles = {
  section: {
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'flex-end',
    minHeight: '70vh',
    paddingTop: 140,
    paddingBottom: 72,
    overflow: 'hidden',
    background: 'var(--color-navy-deep)',
    color: '#fff',
  },
  imgWrap: { position: 'absolute', inset: 0 },
  bottomGradient: {
    position: 'absolute', left: 0, right: 0, bottom: 0,
    height: 320,
    background: 'linear-gradient(180deg, transparent 0%, rgba(15,27,35,0.88) 100%)',
    zIndex: 1, pointerEvents: 'none',
  },
  inner: {
    position: 'relative',
    zIndex: 2,
    display: 'flex',
    flexDirection: 'column',
  },
  eyebrowRow: {
    display: 'inline-flex', alignItems: 'center', gap: 12,
    marginBottom: 24,
    paddingInline: 14, paddingBlock: 8,
    background: 'rgba(15,27,35,0.5)',
    border: '1px solid rgba(255,255,255,0.18)',
    borderRadius: 999,
    backdropFilter: 'blur(6px)',
    WebkitBackdropFilter: 'blur(6px)',
    alignSelf: 'flex-start',
  },
  eyebrowDot: {
    width: 6, height: 6, borderRadius: 999,
    background: 'var(--color-copper-fallback)',
    boxShadow: '0 0 12px rgba(168,107,45,0.7)',
  },
  eyebrow: {
    fontWeight: 700, fontSize: 11,
    letterSpacing: '0.22em',
    color: '#fff',
    textTransform: 'uppercase',
  },
  crumb: {
    fontWeight: 500, fontSize: 11,
    letterSpacing: '0.22em',
    color: 'rgba(255,255,255,0.5)',
    textTransform: 'uppercase',
    paddingLeft: 12,
    borderLeft: '1px solid rgba(255,255,255,0.2)',
  },
  title: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(28px, 6vw, 72px)',
    lineHeight: 1.05,
    letterSpacing: '-0.005em',
    color: '#fff',
    maxWidth: 1000,
    textWrap: 'balance',
  },
  intro: {
    margin: '24px 0 0',
    maxWidth: 720,
    fontSize: 'clamp(17px, 1.5vw, 19px)',
    lineHeight: 1.6,
    color: 'rgba(255,255,255,0.92)',
    textWrap: 'pretty',
  },
  anchorRow: {
    marginTop: 48,
    display: 'flex',
    flexWrap: 'wrap',
    gap: 12,
  },
  anchorChip: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 10,
    padding: '12px 18px',
    background: 'rgba(255,255,255,0.07)',
    border: '1px solid rgba(255,255,255,0.18)',
    borderRadius: 999,
    backdropFilter: 'blur(6px)',
    WebkitBackdropFilter: 'blur(6px)',
    color: '#fff',
    fontWeight: 700,
    fontSize: 13,
    letterSpacing: '0.06em',
    whiteSpace: 'nowrap',
    transition: 'background 240ms ease, border-color 240ms ease, transform 360ms cubic-bezier(0.16,1,0.3,1)',
  },
  anchorNum: {
    fontFamily: 'ui-monospace, Menlo, Consolas, monospace',
    fontSize: 10, color: 'var(--color-copper-fallback)',
    letterSpacing: '0.18em',
    paddingRight: 8,
    borderRight: '1px solid rgba(255,255,255,0.18)',
  },
  anchorArrow: {
    color: 'var(--color-copper-fallback)',
    display: 'inline-flex',
    marginLeft: 4,
  },
};

const shMQ = document.createElement('style');
shMQ.textContent = `
  section[data-screen-label="01 Servicios Hero"] a[href^="#"]:hover {
    background: rgba(255,255,255,0.14) !important;
    border-color: rgba(255,255,255,0.32) !important;
    transform: translateY(-2px);
  }
  @media (min-width: 1024px) {
    section[data-screen-label="01 Servicios Hero"] { min-height: 80vh !important; padding-top: 180px; padding-bottom: 96px; }
  }
`;
document.head.appendChild(shMQ);

window.ServiciosHero = ServiciosHero;