// Hero — "The video that breaks the ad" background + glassmorphic Nav

const { useEffect, useRef, useState, useMemo } = React;

// ====== Old-ad fragments — abstract banners, popups, CTAs ======
// These live in the background and react to the hero video card's progress
// by fading, sliding away, and breaking apart — "real content pushing
// bad advertising out of the feed".

const AD_FRAGMENTS = [
  // type: 'banner' | 'popup' | 'cta' | 'box'
  { type:'banner', x: 8,  y: 18, w: 280, h: 60, label:'BRAND AWARENESS', delay: 0.0 },
  { type:'banner', x: 70, y: 14, w: 240, h: 52, label:'CAMPAÑA 360',     delay: 0.6 },
  { type:'popup',  x: 78, y: 36, w: 180, h: 90, label:'SKIP AD',         delay: 1.1 },
  { type:'cta',    x: 14, y: 60, w: 160, h: 44, label:'COMPRA AHORA',    delay: 0.3 },
  { type:'box',    x: 60, y: 76, w: 200, h: 70, label:'POST APROBADO',   delay: 1.4 },
  { type:'banner', x: 36, y: 88, w: 260, h: 50, label:'AD · 728 × 90',   delay: 0.9 },
  { type:'cta',    x: 88, y: 64, w: 130, h: 40, label:'CLICK HERE',      delay: 1.8 },
  { type:'popup',  x: 4,  y: 38, w: 160, h: 96, label:'×  ANUNCIO',      delay: 2.0 },
];

// ====== Floating glass metric badges ======
const METRIC_BADGES = [
  { x: 14, y: 28, label: '+38% recall',     tone: '#E60000' },
  { x: 80, y: 24, label: '4.1× ROAS',       tone: '#FF5A1F' },
  { x: 22, y: 78, label: 'UGC ready',       tone: '#FF2D7A' },
  { x: 76, y: 72, label: 'hook test',       tone: '#FF5A1F' },
  { x: 56, y: 18, label: 'creator fit 92%', tone: '#E60000' },
];

// ====== Old Ad Fragment ======
// progress: 0..1 across one cycle of the hero card's diagonal pass.
// Each fragment has its own delay and "break point" where it shatters/fades.
const AdFragment = ({ frag, progress }) => {
  // local progress per fragment, normalized + delayed
  const lp = ((progress + frag.delay) % 1);
  // base float y
  const floatY = Math.sin((lp + frag.delay) * Math.PI * 2) * 4;

  // break window: between 0.45 and 0.85 of cycle, fragment "fractures"
  const inBreak = lp > 0.45 && lp < 0.85;
  const breakAmt = inBreak ? (lp - 0.45) / 0.4 : 0; // 0..1
  const skewX = breakAmt * 8 * (frag.x > 50 ? 1 : -1);
  const offX  = breakAmt * 60 * (frag.x > 50 ? 1 : -1);
  const offY  = breakAmt * -20;
  const opacity = lp < 0.45
    ? 0.55
    : lp < 0.85
      ? 0.55 * (1 - breakAmt)
      : 0.55 * ((lp - 0.85) / 0.15); // fade back in

  const blur = breakAmt * 4;

  // visual variants
  const baseStyle = {
    position:'absolute',
    left:`${frag.x}%`, top:`${frag.y}%`,
    width: frag.w, height: frag.h,
    transform: `translate(-50%, -50%) translate(${offX}px, ${floatY + offY}px) skewX(${skewX}deg)`,
    opacity,
    filter: `blur(${blur}px)`,
    transition:'none',
    fontFamily:'var(--font-display-tight)',
    fontWeight: 800, fontSize: 11,
    letterSpacing:'0.18em', textTransform:'uppercase',
    color:'rgba(255,255,255,0.55)',
    display:'flex', alignItems:'center', justifyContent:'center',
    pointerEvents:'none',
    willChange:'transform,opacity',
  };

  if (frag.type === 'banner') {
    return (
      <div style={{
        ...baseStyle,
        background:'rgba(20,20,22,0.5)',
        border:'1px dashed rgba(255,255,255,0.18)',
        borderRadius: 4,
      }}>
        <span style={{
          position:'absolute', top:4, left:6,
          fontSize:8, color:'rgba(255,255,255,0.35)', letterSpacing:'0.2em',
        }}>AD</span>
        {frag.label}
      </div>
    );
  }
  if (frag.type === 'popup') {
    return (
      <div style={{
        ...baseStyle,
        background:'rgba(15,15,17,0.65)',
        border:'1px solid rgba(255,255,255,0.12)',
        borderRadius: 6, flexDirection:'column', gap: 8,
      }}>
        <div style={{
          position:'absolute', top:6, right:8, width:14, height:14,
          display:'grid', placeItems:'center',
          background:'rgba(255,255,255,0.08)', borderRadius:3,
          fontSize:9, color:'rgba(255,255,255,0.5)',
        }}>×</div>
        {frag.label}
        <div style={{
          width:'70%', height: 1, background:'rgba(255,255,255,0.15)',
        }}/>
      </div>
    );
  }
  if (frag.type === 'cta') {
    return (
      <div style={{
        ...baseStyle,
        background:'rgba(230,0,0,0.18)',
        border:'1px solid rgba(230,0,0,0.4)',
        borderRadius: 999,
        color:'rgba(255,180,180,0.7)',
      }}>{frag.label} ›</div>
    );
  }
  // box (sponsored post placeholder)
  return (
    <div style={{
      ...baseStyle,
      background:'rgba(20,20,22,0.55)',
      border:'1px solid rgba(255,255,255,0.1)',
      borderRadius: 8, padding: 10,
      flexDirection:'column', alignItems:'flex-start', justifyContent:'space-between',
    }}>
      <div style={{display:'flex', gap:6, alignItems:'center'}}>
        <span style={{width:14, height:14, borderRadius:999, background:'rgba(255,255,255,0.12)'}}/>
        <span style={{fontSize:9, letterSpacing:'0.18em'}}>SPONSORED</span>
      </div>
      <div style={{fontSize: 10, color:'rgba(255,255,255,0.65)'}}>{frag.label}</div>
    </div>
  );
};

// ====== The Hero Video Card — protagonist of the background ======
// Drifts diagonally from bottom-right toward center-left in a smooth loop.
// progress: 0..1
const HeroVideoCard = ({ progress }) => {
  // Position interpolation. Start: bottom-right (off-screen). End: center-left.
  // Use eased curve so it lingers near the center.
  const ease = (t) => 0.5 - 0.5 * Math.cos(t * Math.PI); // smooth in/out
  const t = ease(progress);
  // From x: 110%, y: 110%   -> to x: 28%, y: 50%
  const x = 110 + (28 - 110) * t;
  const y = 110 + (50 - 110) * t;
  const rot = -6 + 4 * t; // slight rotation shift
  const scale = 0.92 + 0.08 * Math.sin(progress * Math.PI); // breathes

  return (
    <div style={{
      position:'absolute',
      left:`${x}%`, top:`${y}%`,
      transform:`translate(-50%, -50%) rotate(${rot}deg) scale(${scale})`,
      width: 'clamp(220px, 26vw, 360px)',
      aspectRatio: '9/16',
      borderRadius: 18,
      overflow:'hidden',
      pointerEvents:'none',
      boxShadow: `
        0 40px 120px rgba(230,0,0,0.35),
        0 0 80px rgba(255,45,122,0.25),
        0 0 0 1px rgba(255,255,255,0.06) inset
      `,
      background: `
        linear-gradient(165deg, rgba(255,45,122,0.7) 0%, rgba(20,4,12,0.95) 70%),
        radial-gradient(circle at 32% 22%, rgba(255,90,31,0.55), transparent 55%)
      `,
      willChange:'transform',
      zIndex: 2,
    }}>
      {/* video grain / scanlines */}
      <div style={{
        position:'absolute', inset:0,
        background:'repeating-linear-gradient(0deg, transparent 0, transparent 5px, rgba(255,255,255,0.03) 5px, rgba(255,255,255,0.03) 6px)'
      }}/>
      {/* subtle frame border */}
      <div style={{
        position:'absolute', inset: 6, borderRadius: 14,
        border:'1px solid rgba(255,255,255,0.1)',
      }}/>

      {/* progress bar (top) */}
      <div style={{
        position:'absolute', top: 12, left: 12, right: 12, height: 2,
        background:'rgba(255,255,255,0.18)', borderRadius: 999, overflow:'hidden',
      }}>
        <div style={{
          height:'100%',
          width: `${Math.min(100, progress * 130)}%`,
          background:'#fff',
          borderRadius: 999,
        }}/>
      </div>

      {/* top-left LIVE / top-right plus */}
      <div style={{
        position:'absolute', top: 22, left: 12, right: 12,
        display:'flex', justifyContent:'space-between', alignItems:'flex-start',
      }}>
        <span style={{
          display:'inline-flex', alignItems:'center', gap:5,
          background:'rgba(230,0,0,0.92)', color:'#fff',
          fontFamily:'var(--font-display-tight)', fontWeight:800,
          fontSize: 9, letterSpacing:'0.18em',
          padding:'3px 7px', borderRadius: 3,
        }}>
          <span className="live-dot"/>LIVE
        </span>
        <span style={{
          width: 22, height: 22, borderRadius: 6, background:'#E60000',
          display:'grid', placeItems:'center',
          fontFamily:'var(--font-display)', fontWeight: 900, fontSize: 14,
          color:'#fff', lineHeight: 1,
        }}>+</span>
      </div>

      {/* center play ring */}
      <div style={{
        position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%)',
        width: 56, height: 56, borderRadius: 999,
        border:'1.5px solid rgba(255,255,255,0.55)',
        background:'rgba(255,255,255,0.06)',
        backdropFilter:'blur(6px)',
        display:'grid', placeItems:'center',
        color:'#fff', fontSize: 16, paddingLeft: 4,
      }}>▶</div>

      {/* bottom captions / UI */}
      <div style={{
        position:'absolute', left:0, right:0, bottom: 0,
        padding:'48px 14px 14px',
        background:'linear-gradient(180deg, transparent, rgba(0,0,0,0.9))',
      }}>
        <div style={{
          fontFamily:'var(--font-mono)', fontSize: 9.5,
          color:'rgba(255,255,255,0.85)', letterSpacing:'0.04em',
        }}>@_creator.real</div>
        <div style={{
          fontFamily:'var(--font-display-tight)', fontWeight: 800,
          fontSize: 13, marginTop: 4, lineHeight: 1.2, color:'#fff',
        }}>Real story · No script.</div>
        {/* engagement row */}
        <div style={{
          marginTop: 10, display:'flex', gap: 14,
          fontFamily:'var(--font-mono)', fontSize: 9.5,
          color:'rgba(255,255,255,0.7)',
        }}>
          <span>♥ 24.1k</span>
          <span>↗ 1.8k</span>
          <span style={{color:'#FF5A1F'}}>+38% recall</span>
        </div>
      </div>
    </div>
  );
};

// ====== Glass Metric Badge ======
const MetricBadge = ({ b, progress }) => {
  // gentle bob + slight horizontal drift
  const phase = (progress * Math.PI * 2) + (b.x / 20);
  const dx = Math.sin(phase) * 4;
  const dy = Math.cos(phase * 0.8) * 5;
  return (
    <div style={{
      position:'absolute',
      left:`${b.x}%`, top:`${b.y}%`,
      transform:`translate(-50%, -50%) translate(${dx}px, ${dy}px)`,
      pointerEvents:'none',
      zIndex: 3,
    }}>
      <div style={{
        display:'inline-flex', alignItems:'center', gap: 7,
        padding:'7px 11px', borderRadius: 999,
        background:'rgba(15,15,17,0.55)',
        backdropFilter:'blur(14px) saturate(140%)',
        WebkitBackdropFilter:'blur(14px) saturate(140%)',
        border:`1px solid ${b.tone}55`,
        boxShadow:`0 10px 30px ${b.tone}33, 0 0 0 1px rgba(255,255,255,0.05) inset`,
        fontFamily:'var(--font-mono)', fontSize: 11,
        color:'rgba(255,255,255,0.92)', letterSpacing:'-0.01em',
        opacity: 0.85,
      }}>
        <span style={{
          width: 5, height: 5, borderRadius:999, background: b.tone,
          boxShadow:`0 0 10px ${b.tone}`,
        }}/>
        {b.label}
      </div>
    </div>
  );
};

// ====== Hero Background — looped MP4 ======
const HeroBackground = () => {
  return (
    <div aria-hidden style={{
      position:'absolute', inset: 0, overflow:'hidden', pointerEvents:'none',
      background:'#050505',
    }}>
      <video
        autoPlay loop muted playsInline
        src="assets/hero-bg.mp4"
        style={{
          position:'absolute', top:0, left:0,
          width:'100%', height:'100%',
          objectFit:'cover',
          zIndex: 0,
        }}
      />

      {/* metric badges over the video */}
      <div className="hero-badges">
        {METRIC_BADGES.map((b, i) => (
          <MetricBadge key={i} b={b} progress={0.5}/>
        ))}
      </div>

      {/* readability gradient — anchors headline to bottom-left */}
      <div style={{
        position:'absolute', inset: 0,
        background:`
          linear-gradient(100deg, rgba(5,5,5,0.78) 0%, rgba(5,5,5,0.45) 38%, rgba(5,5,5,0.1) 70%),
          linear-gradient(180deg, transparent 55%, rgba(5,5,5,0.6) 100%)
        `,
        zIndex: 4,
      }}/>

      <style>{`
        @media (max-width: 880px) {
          .hero-badges > div:nth-child(n+3) { display: none; }
        }
      `}</style>
    </div>
  );
};

// ====== Glassmorphic Nav (kept) ======
const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav style={{
      position:'fixed', top:0, left:0, right:0, zIndex: 60,
      background: scrolled ? 'rgba(5,5,5,0.55)' : 'rgba(5,5,5,0.4)',
      backdropFilter:'blur(24px) saturate(140%)',
      WebkitBackdropFilter:'blur(24px) saturate(140%)',
      borderBottom:'1px solid rgba(255,255,255,0.08)',
      transition:'background 240ms ease',
    }}>
      <div className="container" style={{
        display:'flex', alignItems:'center', justifyContent:'space-between',
        height:72, gap:24,
      }}>
        <a href="#top" style={{display:'flex', alignItems:'center', gap:10}}>
          <span style={{
            width:28, height:28, borderRadius:7, background:'#E60000',
            display:'grid', placeItems:'center',
            fontFamily:'var(--font-display)', fontWeight:900, fontSize:18,
            color:'#fff', lineHeight:1,
          }}>+</span>
          <span style={{
            fontFamily:'var(--font-display)', fontSize:16, letterSpacing:'-0.02em',
          }}>contentders</span>
        </a>
        <div className="nav-links" style={{
          display:'flex', gap:36,
          fontFamily:'var(--font-display-tight)', fontWeight:600, fontSize:13,
          color:'rgba(255,255,255,0.78)',
        }}>
          <a href="#metodo" className="nav-a">Método</a>
          <a href="#servicios" className="nav-a">Servicios</a>
          <a href="#casos" className="nav-a">Casos</a>
          <a href="#resonancia" className="nav-a">Resonancia</a>
        </div>
        <button className="cta-primary" style={{padding:'11px 14px 11px 18px', fontSize:13}}>
          Quiero una campaña <span className="plus" style={{width:20,height:20,fontSize:13}}>+</span>
        </button>
      </div>
      <style>{`
        .nav-a { transition: color 200ms ease; position: relative; }
        .nav-a:hover { color: #fff; }
        .nav-a:hover::after {
          content:''; position:absolute; left:0; right:0; bottom:-6px; height:1.5px; background:#E60000;
        }
        @media (max-width: 880px) { .nav-links { display: none; } }
      `}</style>
    </nav>
  );
};

// ====== Hero ======
const Hero = () => {
  return (
    <section id="top" style={{
      position:'relative', minHeight:'100vh',
      display:'flex', alignItems:'center', justifyContent:'flex-start',
      overflow:'hidden', paddingTop: 80,
    }}>
      <HeroBackground/>

      <div className="container" style={{position:'relative', zIndex: 5, width:'100%'}}>
        <div className="reveal in" style={{maxWidth: 1100}}>
          <div className="eyebrow" style={{marginBottom: 28}}>
            <span className="plus-square">+</span>
            MARCAS AUTÉNTICAS · INFLUENCIA REAL
          </div>
          <h1 className="h-hero">
            Si parece publicidad,<br/>
            <span className="grad-heat">ya perdiste.</span>
          </h1>
          <p className="lead" style={{marginTop: 36, fontSize: 20, maxWidth: '52ch'}}>
            Creamos contenido, influencia y estrategia para que las marcas
            dejen de interrumpir y empiecen a importar.
          </p>
          <div style={{display:'flex', gap:14, marginTop: 44, flexWrap:'wrap'}}>
            <button className="cta-primary">
              Quiero una campaña
              <span className="plus">+</span>
            </button>
            <button className="cta-ghost">Ver qué hacemos →</button>
          </div>

          <div style={{
            display:'flex', gap:32, marginTop: 80, flexWrap:'wrap',
            fontFamily:'var(--font-mono)', fontSize:12,
            color:'rgba(255,255,255,0.5)', letterSpacing:'-0.01em',
          }}>
            <div><span style={{color:'#FF5A1F'}}>↗</span> +32% recall promedio</div>
            <div><span style={{color:'#FF2D7A'}}>×</span> 4.1 ROAS en performance</div>
            <div><span style={{color:'#E60000'}}>●</span> 7 mercados LATAM activos</div>
          </div>
        </div>
      </div>

      <div style={{
        position:'absolute', bottom: 30, left:'50%', transform:'translateX(-50%)',
        zIndex: 6,
        fontFamily:'var(--font-display-tight)', fontWeight:600,
        fontSize:10, letterSpacing:'0.22em', textTransform:'uppercase',
        color:'rgba(255,255,255,0.45)',
        display:'flex', alignItems:'center', gap:8,
      }}>
        
        <span style={{
          width: 1, height: 28, background:'rgba(255,255,255,0.4)',
          display:'inline-block',
        }}/>
      </div>
    </section>
  );
};

Object.assign(window, { Nav, Hero, HeroBackground });