// Hero.jsx — 3 variants: 'bold' (imagen grande dominante), 'split' (contenido + imagen), 'video' (bg cinemático)

const useParallax = () => {
  const [y, setY] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => setY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return y;
};

const HeroStats = ({ dark }) => {
  const color = dark ? '#fff' : '#0d1b3e';
  const muted = dark ? 'rgba(255,255,255,0.5)' : '#636e87';
  const items = [['10K +', 'Estudiantes fotografiados'], ['+ 10', 'Años de experiencia'], ['100%', 'Escuelas satisfechas'], ['4.8/5', 'Calificación promedio']];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 28, marginTop: 56, paddingTop: 36, borderTop: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(13,27,62,0.08)' }}>
      {items.map(([n, l]) => (
        <div key={l}>
          <div style={{ fontFamily: "'GCarturm', sans-serif", fontSize: 30, fontWeight: 700, color, letterSpacing: '-0.02em', lineHeight: 1 }}>
            {n.slice(0, -1) && /\d/.test(n[n.length-1]) ? n : <>{n.slice(0,-1)}<span style={{ color: 'var(--accent)' }}>{n.slice(-1)}</span></>}
          </div>
          <div style={{ fontSize: 11, color: muted, marginTop: 8, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{l}</div>
        </div>
      ))}
    </div>
  );
};

const HeroBold = ({ onContact, onServices }) => {
  const y = useParallax();
  const s = {
    section: { background: '#0a0e1f', minHeight: '100vh', padding: '140px 5% 80px', display: 'flex', alignItems: 'center', position: 'relative', overflow: 'hidden' },
    bg: { position: 'absolute', inset: 0, background: "radial-gradient(ellipse 55% 70% at 80% 35%, rgba(46,203,177,0.22) 0%, transparent 60%), radial-gradient(ellipse 45% 55% at 15% 85%, rgba(139,92,246,0.14) 0%, transparent 65%)", pointerEvents: 'none' },
    photo: {
      position: 'absolute', right: 0, top: 0, bottom: 0, width: '62%',
      backgroundImage: 'url(assets/photo-slider.jpg)', backgroundSize: 'cover', backgroundPosition: 'center',
      maskImage: 'linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.15) 20%, rgba(0,0,0,0.6) 45%, #000 75%)',
      WebkitMaskImage: 'linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.15) 20%, rgba(0,0,0,0.6) 45%, #000 75%)',
      opacity: 0.9, transform: `translateY(${y * 0.25}px) scale(1.05)`,
    },
    photoOverlay: {
      position: 'absolute', right: 0, top: 0, bottom: 0, width: '62%',
      background: 'linear-gradient(90deg, #0a0e1f 0%, rgba(10,14,31,0.85) 15%, rgba(13,27,62,0.35) 45%, transparent 85%)',
      pointerEvents: 'none',
    },
    scan: { position: 'absolute', inset: 0, background: 'repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px)', pointerEvents: 'none' },
    inner: { maxWidth: 1220, margin: '0 auto', width: '100%', position: 'relative', zIndex: 2 },
    content: { maxWidth: 680 },
    eyebrow: {
      display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px',
      border: '1px solid rgba(46,203,177,0.35)', borderRadius: 9999,
      background: 'rgba(46,203,177,0.08)', marginBottom: 32,
      fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 500,
      letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)',
    },
    dot: { width: 7, height: 7, borderRadius: '50%', background: '#C6FF00', boxShadow: '0 0 8px #C6FF00', animation: 'pulse 1.6s ease-in-out infinite' },
    h1: { fontFamily: "'GCarturm', sans-serif", fontWeight: 700, fontSize: 'clamp(48px, 6.2vw, 88px)', color: '#fff', lineHeight: 1.02, letterSpacing: '-0.03em', marginBottom: 28, textTransform: 'uppercase' },
    accent: { background: 'linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' },
    sub: { fontSize: 19, color: 'rgba(255,255,255,0.72)', lineHeight: 1.65, marginBottom: 40, maxWidth: 560 },
    btns: { display: 'flex', gap: 14, flexWrap: 'wrap' },
  };
  return (
    <section style={s.section}>
      <div style={s.bg}></div>
      <div style={s.photo}></div>
      <div style={s.photoOverlay}></div>
      <div style={s.scan}></div>
      <div style={s.inner}>
        <div style={s.content}>
          <div style={s.eyebrow}><span style={s.dot}></span>#PHOTODAY · CICLO ESCOLAR 2026 — AGENDA ABIERTA</div>
          <h1 style={s.h1}>Fotografía escolar<br/><span style={s.accent}>que deja huella.</span></h1>
          <p style={s.sub}>Fotógrafos profesionales en Tijuana y Baja California. 10 años capturando retratos, graduaciones y eventos para escuelas privadas. Entregas en tiempo, calidad de estudio, logística sin estrés para la dirección.</p>
          <div style={s.btns}>
            <button className="btn btn-primary btn-lg" onClick={onContact}>Agenda tu visita</button>
            <button className="btn btn-ghost-light btn-lg" onClick={onServices}>Ver servicios →</button>
          </div>
          <HeroStats dark />
        </div>
      </div>
    </section>
  );
};

const HeroSplit = ({ onContact, onServices }) => {
  const y = useParallax();
  const s = {
    section: { background: '#fff', minHeight: '100vh', padding: '140px 5% 80px', display: 'flex', alignItems: 'center', position: 'relative', overflow: 'hidden' },
    bg: { position: 'absolute', inset: 0, background: "radial-gradient(ellipse 40% 50% at 90% 10%, rgba(46,203,177,0.12) 0%, transparent 60%)", pointerEvents: 'none' },
    inner: { maxWidth: 1320, margin: '0 auto', width: '100%', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(460px, 1fr))', gap: 60, alignItems: 'center', position: 'relative', zIndex: 2 },
    left: {},
    eyebrow: {
      display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px',
      border: '1px solid rgba(46,203,177,0.4)', borderRadius: 9999,
      background: 'rgba(46,203,177,0.06)', marginBottom: 28,
      fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 600,
      letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent-dark)',
    },
    dot: { width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', boxShadow: '0 0 8px var(--accent)' },
    h1: { fontFamily: "'GCarturm', sans-serif", fontWeight: 700, fontSize: 'clamp(44px, 5.8vw, 76px)', color: '#0d1b3e', lineHeight: 1.02, letterSpacing: '-0.03em', marginBottom: 24, textTransform: 'uppercase' },
    accent: { color: 'var(--accent-dark)' },
    sub: { fontSize: 18, color: '#44506a', lineHeight: 1.65, marginBottom: 36, maxWidth: 540 },
    btns: { display: 'flex', gap: 14, flexWrap: 'wrap' },
    right: { position: 'relative', aspectRatio: '4/5', maxHeight: 640 },
    photoFrame: { position: 'absolute', inset: 0, borderRadius: 20, overflow: 'hidden', boxShadow: '0 30px 80px rgba(13,27,62,0.25)' },
    photo: { width: '100%', height: '100%', objectFit: 'cover', transform: `translateY(${y * 0.08}px) scale(1.08)` },
    frameBg: { position: 'absolute', top: -30, right: -30, bottom: 60, left: 40, background: 'var(--accent)', borderRadius: 20, zIndex: -1, opacity: 0.15 },
    floatCard: { position: 'absolute', bottom: 28, left: -28, background: '#fff', padding: '18px 22px', borderRadius: 14, boxShadow: '0 16px 40px rgba(13,27,62,0.18)', display: 'flex', alignItems: 'center', gap: 14, maxWidth: 280, transform: `translateY(${-y * 0.04}px)` },
    avatar: { width: 44, height: 44, borderRadius: '50%', background: 'linear-gradient(135deg, #2ecbb1, #8b5cf6)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 14, flexShrink: 0 },
  };
  return (
    <section style={s.section}>
      <div style={s.bg}></div>
      <div style={s.inner}>
        <div style={s.left}>
          <div style={s.eyebrow}><span style={s.dot}></span>#PHOTODAY · 10 AÑOS EN BAJA CALIFORNIA</div>
          <h1 style={s.h1}>Cada sonrisa merece <span style={s.accent}>quedar para siempre.</span></h1>
          <p style={s.sub}>Fotografía escolar profesional para instituciones privadas en Tijuana, Rosarito, Tecate, Ensenada y Mexicali. Retratos, graduaciones, credenciales y eventos con la calidad que tus padres de familia esperan.</p>
          <div style={s.btns}>
            <button className="btn btn-primary btn-lg" onClick={onContact}>Agenda tu visita</button>
            <button className="btn btn-ghost-dark btn-lg" onClick={onServices}>Ver servicios →</button>
          </div>
          <HeroStats />
        </div>
        <div style={s.right}>
          <div style={s.frameBg}></div>
          <div style={s.photoFrame}>
            <img src="assets/photo-portrait.jpg" alt="Retrato escolar profesional PhotoDay Tijuana" style={s.photo} />
          </div>
          <div style={s.floatCard}>
            <div style={s.avatar}>CV</div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#0d1b3e' }}>Colegio Verdad</div>
              <div style={{ fontSize: 11, color: '#636e87', marginTop: 2 }}>"Impecables y puntuales"</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const HeroVideo = ({ onContact, onServices }) => {
  const y = useParallax();
  const s = {
    section: { background: '#0d1b3e', minHeight: '100vh', padding: '140px 5% 80px', display: 'flex', alignItems: 'center', position: 'relative', overflow: 'hidden' },
    bg: {
      position: 'absolute', inset: 0,
      backgroundImage: 'url(assets/photo-classroom.jpg)',
      backgroundSize: 'cover', backgroundPosition: 'center',
      transform: `translateY(${y * 0.3}px) scale(1.1)`,
      filter: 'blur(1px) saturate(1.1)',
    },
    overlay: {
      position: 'absolute', inset: 0,
      background: 'radial-gradient(ellipse at 50% 60%, rgba(13,27,62,0.3) 0%, rgba(13,27,62,0.92) 80%)',
    },
    glow: {
      position: 'absolute', inset: 0,
      background: 'radial-gradient(ellipse 60% 50% at 70% 30%, rgba(46,203,177,0.18) 0%, transparent 60%)',
    },
    scan: { position: 'absolute', inset: 0, background: 'repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.015) 3px, rgba(255,255,255,0.015) 4px)', pointerEvents: 'none' },
    inner: { maxWidth: 1220, margin: '0 auto', width: '100%', position: 'relative', zIndex: 2, textAlign: 'center' },
    eyebrow: {
      display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px',
      border: '1px solid rgba(46,203,177,0.35)', borderRadius: 9999,
      background: 'rgba(46,203,177,0.08)', marginBottom: 32,
      fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 500,
      letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)',
    },
    dot: { width: 7, height: 7, borderRadius: '50%', background: '#C6FF00', boxShadow: '0 0 8px #C6FF00' },
    h1: { fontFamily: "'GCarturm', sans-serif", fontWeight: 700, fontSize: 'clamp(52px, 7.2vw, 112px)', color: '#fff', lineHeight: 0.98, letterSpacing: '-0.035em', marginBottom: 32, textTransform: 'uppercase' },
    accent: { background: 'linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text', display: 'block' },
    sub: { fontSize: 20, color: 'rgba(255,255,255,0.75)', lineHeight: 1.55, marginBottom: 44, maxWidth: 640, marginLeft: 'auto', marginRight: 'auto' },
    btns: { display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' },
    playBtn: { position: 'absolute', bottom: 40, left: '50%', transform: 'translateX(-50%)', display: 'flex', alignItems: 'center', gap: 14, color: 'rgba(255,255,255,0.6)', fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', fontFamily: "'JetBrains Mono', monospace" },
  };
  return (
    <section style={s.section}>
      <div style={s.bg}></div>
      <div style={s.overlay}></div>
      <div style={s.glow}></div>
      <div style={s.scan}></div>
      <div style={s.inner}>
        <div style={s.eyebrow}><span style={s.dot}></span>#PHOTODAY · TEMPORADA 2026 · CUPOS LIMITADOS</div>
        <h1 style={s.h1}>Recuerdos<br/><span style={s.accent}>para toda la vida.</span></h1>
        <p style={s.sub}>El estudio de fotografía escolar más confiable de Baja California. Cubrimos escuelas privadas de preescolar a preparatoria desde 2015.</p>
        <div style={s.btns}>
          <button className="btn btn-primary btn-lg" onClick={onContact}>Solicita propuesta</button>
          <button className="btn btn-ghost-light btn-lg" onClick={onServices}>Ver servicios →</button>
        </div>
      </div>
      <div style={s.playBtn}>
        <div style={{ width: 2, height: 40, background: 'linear-gradient(180deg, transparent, rgba(255,255,255,0.6))', animation: 'scrollDown 2.2s ease-in-out infinite' }}></div>
        <span>Scroll</span>
      </div>
      <style>{`@keyframes scrollDown { 0%,100% { transform: scaleY(0.3); transform-origin: top } 50% { transform: scaleY(1) } }`}</style>
    </section>
  );
};

const PDHero = ({ variant = 'bold', onContact, onServices }) => {
  if (variant === 'split') return <HeroSplit onContact={onContact} onServices={onServices} />;
  if (variant === 'video') return <HeroVideo onContact={onContact} onServices={onServices} />;
  return <HeroBold onContact={onContact} onServices={onServices} />;
};
Object.assign(window, { PDHero });