/* eslint-disable react/prop-types */
/**
 * ManifestoTeaser · Sección entre Philosophy y Focus en el Home.
 *
 * Tres tesis condensadas a una frase cada una, con CTA al manifiesto completo.
 * Tono propositivo y liberador: no culpa al lector ni a la industria.
 *
 * Visual: fondo navy oscuro, números grandes en copper estilo Apple,
 * tipografía generosa, mucho espacio respiratorio.
 */

const THESES = [
  {
    num: '01',
    text: 'Antes del primer metro cuadrado, una pregunta cambia todo el negocio: \u00BFquién va a vivir\u00A0aquí?',
  },
  {
    num: '02',
    text: 'Cuando se empieza por la persona, el negocio sigue\u00A0solo.',
  },
  {
    num: '03',
    text: 'Quien diseña dónde vivimos, diseña cómo\u00A0vivimos. Por eso la ciudad gana cuando los desarrolladores deciden con datos\u00A0correctos.',
  },
];

function ManifestoTeaser() {
  return (
    <section
      data-screen-label="03b Manifesto Teaser"
      style={mtStyles.section}
    >
      <div style={mtStyles.texture} aria-hidden="true" />

      <div className="container" style={mtStyles.inner}>
        <window.Reveal style={mtStyles.headerRow}>
          <span style={mtStyles.eyebrow}>TRES TESIS · NUESTRO ENFOQUE</span>
          <span style={mtStyles.eyebrowRule} aria-hidden="true" />
        </window.Reveal>

        <div style={mtStyles.thesesWrap}>
          {THESES.map((t, i) => (
            <window.Reveal as="article" key={t.num} delay={i * 140} style={mtStyles.thesis}>
              <span style={mtStyles.num}>{t.num}</span>
              <p style={mtStyles.text}>{t.text}</p>
            </window.Reveal>
          ))}
        </div>

        <window.Reveal delay={500} style={mtStyles.ctaRow}>
          <a
            href="/enfoque/NuestroEnfoque.html"
            className="btn"
            data-cursor="link"
            style={mtStyles.cta}
          >
            Leer el manifiesto completo
            <window.Icon name="arrow-right" size={16} stroke={1.8} />
          </a>
        </window.Reveal>
      </div>
    </section>
  );
}

const mtStyles = {
  section: {
    background: 'var(--color-navy-deep)',
    color: '#fff',
    paddingBlock: 'clamp(80px, 12vw, 160px)',
    position: 'relative',
    overflow: 'hidden',
  },
  texture: {
    position: 'absolute', inset: 0,
    backgroundImage: 'url("assets/textures/cobre-patinado.svg")',
    backgroundSize: '1200px 600px',
    backgroundRepeat: 'repeat',
    opacity: 0.04,
    mixBlendMode: 'screen',
    pointerEvents: 'none',
  },
  inner: {
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
    gap: 'clamp(48px, 6vw, 80px)',
  },
  headerRow: {
    display: 'flex',
    alignItems: 'center',
    gap: 20,
  },
  eyebrow: {
    fontWeight: 700,
    fontSize: 'clamp(12px, 0.9vw, 14px)',
    letterSpacing: '0.22em',
    textTransform: 'uppercase',
    color: 'var(--color-copper-fallback)',
    whiteSpace: 'nowrap',
  },
  eyebrowRule: {
    flex: 1,
    height: 1,
    background: 'rgba(168, 107, 45, 0.4)',
    maxWidth: 280,
  },
  thesesWrap: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 'clamp(40px, 5vw, 64px)',
    maxWidth: 1100,
  },
  thesis: {
    display: 'grid',
    gridTemplateColumns: 'auto 1fr',
    gap: 'clamp(20px, 3vw, 48px)',
    alignItems: 'start',
    paddingBlock: 'clamp(20px, 2vw, 32px)',
    borderTop: '1px solid rgba(255, 255, 255, 0.10)',
  },
  num: {
    fontFamily: 'ui-monospace, Menlo, Consolas, monospace',
    fontWeight: 800,
    fontSize: 'clamp(48px, 6vw, 88px)',
    lineHeight: 1.0,
    color: 'var(--color-copper-fallback)',
    letterSpacing: '-0.02em',
    paddingTop: 8,
  },
  text: {
    margin: 0,
    fontWeight: 700,
    fontSize: 'clamp(22px, 2.4vw, 34px)',
    lineHeight: 1.30,
    color: '#fff',
    letterSpacing: '-0.005em',
    textWrap: 'pretty',
    maxWidth: 880,
  },
  ctaRow: {
    display: 'flex',
    justifyContent: 'flex-start',
    marginTop: 'clamp(12px, 2vw, 24px)',
  },
  cta: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 12,
    paddingInline: 28,
    paddingBlock: 16,
    background: 'transparent',
    border: '1.5px solid rgba(255, 255, 255, 0.5)',
    color: '#fff',
    fontWeight: 700,
    fontSize: 14,
    letterSpacing: '0.08em',
    textTransform: 'uppercase',
    borderRadius: 2,
    transition: 'background 240ms ease, border-color 240ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1)',
  },
};

const mtMQ = document.createElement('style');
mtMQ.textContent = `
  section[data-screen-label="03b Manifesto Teaser"] a:hover {
    background: rgba(168, 107, 45, 0.18) !important;
    border-color: var(--color-copper-fallback) !important;
    transform: translateY(-2px);
  }
`;
document.head.appendChild(mtMQ);

window.ManifestoTeaser = ManifestoTeaser;