/* eslint-disable react/prop-types */
/**
 * Philosophy · Sección 3 del Home · CREER + CREAR.
 * Brief 1 §3.1 Sección 3.
 *
 * - Pantalla completa (~80vh) con fondo cobre patinado SVG
 * - Título 120px desktop blanco ExtraBold
 * - Descripción max 580px blanco 90%
 * - Flecha animada (rebote 4px / 1.5s)
 *
 * IMPORTANTE: el cobre patinado va de fondo de la sección, NUNCA
 * encima del logo Prosperia.
 */

function Philosophy() {
  return (
    <section data-screen-label="03 Philosophy" style={philStyles.section}>
      <div style={philStyles.textureLayer} aria-hidden="true" />
      <div style={philStyles.vignette} aria-hidden="true" />
      <div className="container" style={philStyles.inner}>
        <h2 style={philStyles.title}>CREER + CREAR</h2>
        <p style={philStyles.desc}>
          Dos fuerzas inseparables: la convicción de lo que las ciudades pueden llegar a ser, y el método riguroso para hacerlo tangible. Una sin la otra no funciona — y por eso nadie más las junta.
        </p>
      </div>
      <div style={philStyles.arrow} aria-hidden="true">
        <svg width="32" height="40" viewBox="0 0 32 40" fill="none">
          <path d="M16 4v28M6 24l10 10 10-10" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
    </section>
  );
}

const philStyles = {
  section: {
    position: 'relative',
    minHeight: '80vh',
    display: 'flex',
    alignItems: 'center',
    overflow: 'hidden',
    paddingBlock: 'var(--space-3xl)',
    color: '#fff',
  },
  textureLayer: {
    position: 'absolute', inset: 0,
    backgroundImage: 'url("assets/textures/cobre-patinado.svg")',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  },
  vignette: {
    position: 'absolute', inset: 0,
    background: 'radial-gradient(ellipse at 30% 50%, transparent 0%, rgba(33,18,5,0.25) 70%, rgba(33,18,5,0.45) 100%)',
  },
  inner: {
    position: 'relative',
    zIndex: 2,
  },
  title: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(32px, 10vw, 120px)',
    lineHeight: 1.0,
    letterSpacing: '0.02em',
    color: '#fff',
    textShadow: '0 2px 12px rgba(0,0,0,0.18)',
    textWrap: 'balance',
  },
  desc: {
    margin: '32px 0 0',
    maxWidth: 580,
    color: 'rgba(255,255,255,0.92)',
    fontSize: 'clamp(18px, 1.7vw, 22px)',
    lineHeight: 1.55,
    textWrap: 'pretty',
  },
  arrow: {
    position: 'absolute',
    bottom: 32,
    left: '50%',
    transform: 'translateX(-50%)',
    animation: 'philArrowBounce 1.5s ease-in-out infinite',
    zIndex: 2,
  },
};

const philMQ = document.createElement('style');
philMQ.textContent = `
  @keyframes philArrowBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(4px); }
  }
  @media (min-width: 1024px) {
    section[data-screen-label="03 Philosophy"] { min-height: 80vh; }
  }
`;
document.head.appendChild(philMQ);

window.Philosophy = Philosophy;