/* eslint-disable react/prop-types */
/**
 * CreerCrear · Tesis 04 del manifiesto + CTA final.
 * Brief 1 §3.4 Sección 4 + CTA.
 *
 * Pieza central del manifiesto. Tratamiento split-screen:
 *  - Mitad izquierda: CREER · ÉTICA · navy oscuro
 *  - Mitad derecha:   CREAR · DISCIPLINA · cobre patinado
 *  - Mientras se hace scroll, las dos mitades convergen visualmente
 *  - Cierre con la frase del manifiesto + CTA hacia /servicios
 */

function CreerCrear() {
  return (
    <React.Fragment>
      <section id="creer-crear" data-screen-label="05 Creer + Crear" style={ccStyles.section}>
        <div className="container">
          <div style={ccStyles.head}>
            <window.Reveal style={ccStyles.chapNumber}>
              <span style={ccStyles.chapNumDigit}>04</span>
              <span style={ccStyles.chapNumLine} />
            </window.Reveal>

            <window.Reveal delay={120} style={ccStyles.headBody}>
              <span className="eyebrow">TESIS 04 · LA FILOSOFÍA OPERACIONAL</span>
              <h2 style={ccStyles.bigTitle}>
                CREER es nuestra ética.<br/>
                CREAR es nuestra disciplina.
              </h2>
            </window.Reveal>
          </div>

          <div style={ccStyles.split}>
            {/* CREER */}
            <window.Reveal delay={120} as="article" style={{ ...ccStyles.panel, ...ccStyles.creerPanel }}>
              <div style={ccStyles.panelEyebrow}>
                <span style={ccStyles.panelLetter}>C</span>
                <div style={ccStyles.panelMeta}>
                  <span style={ccStyles.panelLabel}>ÉTICA</span>
                  <span style={ccStyles.panelSubtitle}>La convicción</span>
                </div>
              </div>

              <h3 style={ccStyles.panelTitle}>CREER</h3>

              <p style={ccStyles.panelBody}>
                <strong style={ccStyles.creerBold}>CREER</strong> en lo extraordinario que pueden llegar a ser nuestras ciudades — y por extensión, las vidas que van a vivir en ellas.
              </p>
              <p style={ccStyles.panelTag}>Es la convicción.</p>
            </window.Reveal>

            {/* CREAR */}
            <window.Reveal delay={220} as="article" style={{ ...ccStyles.panel, ...ccStyles.crearPanel }}>
              <div style={ccStyles.crearTexture} aria-hidden="true" />
              <div style={ccStyles.crearOverlay} aria-hidden="true" />

              <div style={{ ...ccStyles.panelEyebrow, position: 'relative', zIndex: 2 }}>
                <span style={{ ...ccStyles.panelLetter, color: '#fff', opacity: 0.92 }}>C</span>
                <div style={ccStyles.panelMeta}>
                  <span style={{ ...ccStyles.panelLabel, color: 'rgba(255,255,255,0.78)' }}>DISCIPLINA</span>
                  <span style={{ ...ccStyles.panelSubtitle, color: 'rgba(255,255,255,0.92)' }}>El método</span>
                </div>
              </div>

              <h3 style={{ ...ccStyles.panelTitle, color: '#fff', position: 'relative', zIndex: 2 }}>CREAR</h3>

              <p style={{ ...ccStyles.panelBody, color: 'rgba(255,255,255,0.92)', position: 'relative', zIndex: 2 }}>
                <strong style={{ ...ccStyles.creerBold, color: '#fff' }}>CREAR</strong> lo extraordinario que nadie ve todavía: el outlier que rompe el paradigma de mercado, el proyecto que después todos quieren imitar.
              </p>
              <p style={{ ...ccStyles.panelTag, color: 'rgba(255,255,255,0.85)', position: 'relative', zIndex: 2 }}>Es la disciplina.</p>
            </window.Reveal>
          </div>

          <window.Reveal delay={320} style={ccStyles.synthesis}>
            <div style={ccStyles.synthesisRule} aria-hidden="true" />
            <p style={ccStyles.synthesisText}>
              Una sin la otra no funciona. <strong>La convicción sin método es sermón. El método sin convicción es máquina.</strong> Por eso somos las dos al mismo tiempo.
            </p>
            <div style={ccStyles.synthesisRule} aria-hidden="true" />
          </window.Reveal>
        </div>
      </section>

      {/* CTA final */}
      <section id="cta-final" data-screen-label="06 CTA Final" style={ccStyles.ctaSection}>
        <div style={ccStyles.ctaTexture} aria-hidden="true" />
        <div style={ccStyles.ctaOverlay} aria-hidden="true" />

        <div className="container" style={ccStyles.ctaInner}>
          <window.Reveal style={ccStyles.ctaContent}>
            <span style={ccStyles.ctaEyebrow}>¿Y AHORA?</span>
            <h2 style={ccStyles.ctaTitle}>
              ¿Te interesa cómo aplicamos esto a un proyecto concreto?
            </h2>
            <p style={ccStyles.ctaDesc}>
              Tres servicios, una sola disciplina. Originación. Co-Desarrollo. DIGO®.
            </p>

            <div style={ccStyles.ctaActions}>
              <a href="../servicios/Servicios.html" className="btn btn-copper" data-cursor="link">
                Ver nuestros servicios
                <window.Icon name="arrow-right" size={16} stroke={1.8} />
              </a>
              <a href="#contacto" className="btn btn-navy-outline" data-cursor="link"
                 style={{ borderColor: 'rgba(255,255,255,0.6)', color: '#fff' }}>
                Habla con Prosperia
                <window.Icon name="arrow-right" size={16} stroke={1.8} />
              </a>
            </div>
          </window.Reveal>
        </div>
      </section>
    </React.Fragment>
  );
}

const ccStyles = {
  section: {
    background: 'var(--color-cream)',
    padding: 'var(--space-3xl) 0',
  },
  head: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 32,
    marginBottom: 64,
  },
  chapNumber: {
    display: 'flex',
    alignItems: 'center',
    gap: 16,
  },
  chapNumDigit: {
    fontFamily: 'ui-monospace, Menlo, Consolas, monospace',
    fontSize: 'clamp(36px, 8vw, 96px)',
    fontWeight: 700,
    lineHeight: 0.85,
    letterSpacing: '-0.02em',
    background: 'url("assets/textures/cobre-patinado.svg") center/cover',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
    color: 'transparent',
  },
  chapNumLine: {
    flex: 1, height: 1,
    background: 'rgba(33,52,64,0.18)',
    maxWidth: 120,
  },
  headBody: {
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
  },
  bigTitle: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(32px, 5vw, 60px)',
    lineHeight: 1.08,
    color: 'var(--color-navy-deep)',
    letterSpacing: '-0.005em',
    textWrap: 'balance',
    maxWidth: 920,
  },

  split: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 16,
    marginBottom: 48,
  },
  panel: {
    position: 'relative',
    padding: 'clamp(32px, 4vw, 56px)',
    borderRadius: 4,
    minHeight: 380,
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
    overflow: 'hidden',
  },
  creerPanel: {
    background: 'var(--color-navy-deep)',
    color: '#fff',
  },
  crearPanel: {
    background: '#3a2410',
    color: '#fff',
  },
  crearTexture: {
    position: 'absolute', inset: 0,
    backgroundImage: 'url("assets/textures/cobre-patinado.svg")',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  },
  crearOverlay: {
    position: 'absolute', inset: 0,
    background: 'radial-gradient(ellipse at 20% 20%, transparent 0%, rgba(33,18,5,0.35) 70%, rgba(33,18,5,0.55) 100%)',
  },
  panelEyebrow: {
    display: 'flex',
    alignItems: 'center',
    gap: 16,
  },
  panelLetter: {
    fontWeight: 800,
    fontSize: 40,
    lineHeight: 1.0,
    color: 'var(--color-copper-fallback)',
    fontFamily: 'ui-monospace, Menlo, Consolas, monospace',
    opacity: 0.92,
  },
  panelMeta: {
    display: 'flex',
    flexDirection: 'column',
    gap: 2,
  },
  panelLabel: {
    fontSize: 11,
    fontWeight: 700,
    letterSpacing: '0.22em',
    color: 'var(--color-copper-fallback)',
    textTransform: 'uppercase',
  },
  panelSubtitle: {
    fontSize: 13,
    color: 'rgba(255,255,255,0.85)',
    fontStyle: 'italic',
  },
  panelTitle: {
    margin: '24px 0 0',
    fontSize: 'clamp(32px, 7vw, 96px)',
    fontWeight: 800,
    lineHeight: 0.92,
    letterSpacing: '0.04em',
    color: '#fff',
  },
  panelBody: {
    margin: 'auto 0 0',
    fontSize: 'clamp(16px, 1.5vw, 19px)',
    lineHeight: 1.65,
    color: 'rgba(255,255,255,0.92)',
    maxWidth: 520,
  },
  creerBold: {
    color: 'var(--color-copper-fallback)',
    fontWeight: 800,
    letterSpacing: '0.04em',
  },
  panelTag: {
    margin: 0,
    fontSize: 14,
    fontStyle: 'italic',
    color: 'rgba(255,255,255,0.78)',
    letterSpacing: '0.04em',
  },

  synthesis: {
    display: 'flex',
    alignItems: 'center',
    gap: 24,
    paddingBlock: 16,
  },
  synthesisRule: {
    flex: 1,
    height: 1,
    background: 'rgba(33,52,64,0.18)',
  },
  synthesisText: {
    margin: 0,
    fontSize: 'clamp(18px, 1.7vw, 22px)',
    lineHeight: 1.5,
    color: 'var(--color-navy-deep)',
    textAlign: 'center',
    maxWidth: 760,
    textWrap: 'balance',
    fontStyle: 'italic',
  },

  ctaSection: {
    position: 'relative',
    overflow: 'hidden',
    color: '#fff',
    padding: 'var(--space-3xl) 0',
    background: '#0E1B23',
  },
  ctaTexture: {
    position: 'absolute', inset: 0,
    backgroundImage: 'url("assets/textures/cobre-patinado.svg")',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    opacity: 0.15,
  },
  ctaOverlay: {
    position: 'absolute', inset: 0,
    background: 'radial-gradient(ellipse at 50% 30%, rgba(33,52,64,0.45) 0%, rgba(14,27,35,0.94) 80%)',
  },
  ctaInner: { position: 'relative', zIndex: 2 },
  ctaContent: {
    display: 'flex',
    flexDirection: 'column',
    gap: 20,
    maxWidth: 880,
    margin: '0 auto',
    textAlign: 'center',
    alignItems: 'center',
  },
  ctaEyebrow: {
    fontWeight: 700, fontSize: 11,
    letterSpacing: '0.28em',
    color: 'var(--color-copper-fallback)',
    textTransform: 'uppercase',
  },
  ctaTitle: {
    margin: 0,
    fontSize: 'clamp(28px, 4vw, 48px)',
    fontWeight: 800,
    lineHeight: 1.15,
    color: '#fff',
    textWrap: 'balance',
  },
  ctaDesc: {
    margin: 0,
    fontSize: 'clamp(15px, 1.4vw, 17px)',
    color: 'rgba(255,255,255,0.85)',
    maxWidth: 600,
  },
  ctaActions: {
    marginTop: 24,
    display: 'flex',
    flexWrap: 'wrap',
    gap: 16,
    justifyContent: 'center',
  },
};

const ccMQ = document.createElement('style');
ccMQ.textContent = `
  @media (min-width: 900px) {
    section[data-screen-label="05 Creer + Crear"] .container > div:nth-of-type(2) {
      grid-template-columns: 1fr 1fr !important;
      gap: 24px !important;
    }
  }
  @media (min-width: 1024px) {
    section[data-screen-label="05 Creer + Crear"] .container > div:first-child {
      grid-template-columns: 160px 1fr !important;
      gap: 48px !important;
      align-items: start !important;
    }
  }
  section[data-screen-label="06 CTA Final"] a.btn-navy-outline:hover {
    background: rgba(255,255,255,0.95) !important;
    color: var(--color-navy-deep) !important;
    border-color: rgba(255,255,255,0.95) !important;
  }
`;
document.head.appendChild(ccMQ);

window.CreerCrear = CreerCrear;