/* eslint-disable react/prop-types */
/**
 * PageHero · Hero compacto reusable para las 3 páginas de Sobre Nosotros.
 *
 * Props:
 *   eyebrow    string ("EL EQUIPO", "LA HISTORIA", "RESPONSABILIDAD")
 *   crumb      string (breadcrumb derecho, default "SOBRE NOSOTROS")
 *   title      string · acepta \n para break manual
 *   intro      string
 *   imgSrc     opcional · URL del fondo
 *   imgTone    'urban' | 'people' | etc.
 *   accent     opcional · texto que aparece en cobre text-clip
 *   variant    'image' | 'cobre' (default 'image')
 */

const { useState: uS_Ph, useEffect: uE_Ph } = React;

function PageHero({
  eyebrow, crumb = 'SOBRE NOSOTROS', title, intro,
  imgSrc, imgTone = 'urban', accent, variant = 'image',
  imgLabel = 'IMAGEN · 16:9',
}) {
  const [loaded, setLoaded] = uS_Ph(false);
  uE_Ph(() => { const t = setTimeout(() => setLoaded(true), 60); return () => clearTimeout(t); }, []);

  const cobreVariant = variant === 'cobre';

  return (
    <section data-screen-label={`01 Hero · ${eyebrow}`} style={{
      ...phStyles.section,
      background: cobreVariant ? '#3a2410' : 'var(--color-navy-deep)',
    }}>
      {cobreVariant ? (
        <React.Fragment>
          <div style={phStyles.cobreLayer} aria-hidden="true" />
          <div style={phStyles.cobreVignette} aria-hidden="true" />
        </React.Fragment>
      ) : (
        <div style={phStyles.imgWrap}>
          <window.ImagePlaceholder
            src={imgSrc}
            alt={imgLabel}
            label={imgLabel}
            tone={imgTone}
            ratio="auto"
            style={{ width: '100%', height: '100%', aspectRatio: 'auto' }}
            overlay
            overlayOpacity={0.55}
          />
        </div>
      )}
      <div style={phStyles.bottomGradient} aria-hidden="true" />

      <div className="container" style={phStyles.inner}>
        <div style={{
          ...phStyles.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={phStyles.eyebrowDot} aria-hidden="true" />
          <span style={phStyles.eyebrow}>{eyebrow}</span>
          <span style={phStyles.crumb}>{crumb}</span>
        </div>

        <h1 style={{
          ...phStyles.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',
        }}>
          {title.split('\n').map((line, i) =>
            <React.Fragment key={i}>{i > 0 && <br/>}{line}</React.Fragment>
          )}
          {accent && (
            <React.Fragment>{' '}<span style={phStyles.accent}>{accent}</span></React.Fragment>
          )}
        </h1>

        {intro && (
          <p style={{
            ...phStyles.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',
          }}>
            {intro}
          </p>
        )}
      </div>
    </section>
  );
}

const phStyles = {
  section: {
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'flex-end',
    minHeight: '60vh',
    paddingTop: 160,
    paddingBottom: 80,
    overflow: 'hidden',
    color: '#fff',
  },
  imgWrap: { position: 'absolute', inset: 0 },
  cobreLayer: {
    position: 'absolute', inset: 0,
    backgroundImage: 'url("assets/textures/cobre-patinado.svg")',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  },
  cobreVignette: {
    position: 'absolute', inset: 0,
    background: 'radial-gradient(ellipse at 20% 50%, rgba(33,18,5,0.15) 0%, rgba(33,18,5,0.55) 75%, rgba(15,8,2,0.7) 100%)',
  },
  bottomGradient: {
    position: 'absolute', left: 0, right: 0, bottom: 0,
    height: 240,
    background: 'linear-gradient(180deg, transparent 0%, rgba(15,27,35,0.88) 100%)',
    zIndex: 1, pointerEvents: 'none',
  },
  inner: { position: 'relative', zIndex: 2 },
  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,
    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(36px, 5.5vw, 68px)',
    lineHeight: 1.06,
    color: '#fff',
    letterSpacing: '-0.005em',
    maxWidth: 1100,
    textWrap: 'balance',
  },
  accent: {
    background: 'url("assets/textures/cobre-patinado.svg") center/cover',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
    color: 'transparent',
  },
  intro: {
    margin: '24px 0 0',
    maxWidth: 720,
    fontSize: 'clamp(16px, 1.5vw, 19px)',
    lineHeight: 1.6,
    color: 'rgba(255,255,255,0.92)',
    textWrap: 'pretty',
  },
};

const phMQ = document.createElement('style');
phMQ.textContent = `
  @media (min-width: 1024px) {
    section[data-screen-label^="01 Hero · "] { min-height: 65vh !important; padding-top: 180px; padding-bottom: 96px; }
  }
`;
document.head.appendChild(phMQ);

window.PageHero = PageHero;