/* ============================================================
   CIEN — componentes compartidos
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* Los ítems con `ext` no son rutas de la SPA: son páginas propias del sitio.
   El monitor de la mora es una app aparte (Vite + D3) servida en /mora/, así que
   sale de la SPA con un <a href> real en vez de mover el hash. */
const NAV = [
  { id:"", label:"Inicio" },
  { id:"institucional", label:"Institucional" },
  { id:"informes", label:"Informes" },
  { id:"actividades", label:"Actividades" },
  { id:"medios", label:"Medios" },
  { id:"mora", label:"Mora", ext:"/mora/" },
];

function go(hash){
  window.location.hash = hash;
  window.scrollTo({ top:0, behavior:"instant" in window ? "instant" : "auto" });
}

function Arrow({ d="r" }){
  const path = d==="r" ? "M5 12h14M13 6l6 6-6 6" : "M19 12H5M11 18l-6-6 6-6";
  return (
    <svg className="arr" width="17" height="17" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d={path}/>
    </svg>
  );
}

function Eyebrow({ children, className="", rule=true }){
  return <span className={"eyebrow "+(rule?"":"no-rule ")+className}>{children}</span>;
}

function BarAccent(){
  return (
    <div className="bar-accent" aria-hidden="true">
      <span></span><span></span><span></span><span></span><span></span>
    </div>
  );
}

/* franja-gráfico: serie de barras (dato económico) que separa secciones.
   Crece al entrar en pantalla (animación de scroll). */
const SERIES = [50,57,44,62,48,40,55,66,52,45,38,49,60,53,43,58,68,50,42,54,47,61,70,55,46,52,63,49,39,57,65,48,44,59,51,42,56,67,53,46,60,50,41,55,64,49,45,58];
function BarChartRule({ dark=false }){
  return (
    <div className={"chart-rule-wrap"+(dark?" on-dark":"")}>
      <div className="wrap">
        <div className="chart-rule" aria-hidden="true">
          {SERIES.map((v,i)=>(
            <span key={i} style={{height:v+"%", transitionDelay:(i*11)+"ms"}}></span>
          ))}
        </div>
      </div>
    </div>
  );
}

/* Fondo temático fijo: skyline de barras (serie económica) que recorre
   todo el sitio. Las alturas base evocan una serie de datos; el movimiento
   con scroll lo aplica useParallax (onda que recorre las barras). */
const BACKDROP_SERIES = [
  38,52,46,60,71,55,42,49,63,77,58,44,51,68,82,61,47,55,70,88,
  64,49,57,73,90,66,50,58,75,84,60,46,53,67,79,57,43,50,62,72,
  54,41,48,59,69,52,39,46,57,66,49
];
function DataBackdrop(){
  return (
    <div className="data-backdrop" aria-hidden="true">
      <div className="bars">
        {BACKDROP_SERIES.map((v,i)=>(
          <span key={i} className={"b"+(i%4===2?" alt":"")} style={{height:v+"%"}}></span>
        ))}
      </div>
    </div>
  );
}

/* Hero — serie económica que fluye en tiempo continuo (línea + área).
   Distinto del skyline de barras del fondo; se anima sola con rAF. */
function HeroChart(){
  const lineRef  = React.useRef(null);
  const line2Ref = React.useRef(null);
  const areaRef  = React.useRef(null);
  const dotRef   = React.useRef(null);
  const pulseRef = React.useRef(null);
  React.useEffect(()=>{
    const W=440, H=580, N=84;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const yfor=(x,t,amp,base,f1,f2,ph)=>
      base - amp*(0.62*Math.sin(x*f1 + t + ph) + 0.38*Math.sin(x*f2 + t*1.7 + ph));
    const build=(t,amp,base,f1,f2,ph)=>{
      let d=""; let last=[0,0];
      for(let i=0;i<=N;i++){
        const x=W*i/N, y=yfor(x,t,amp,base,f1,f2,ph);
        d += (i?"L":"M")+x.toFixed(1)+" "+y.toFixed(1);
        last=[x,y];
      }
      return { d, last };
    };
    let t=0, raf=0;
    const frame=()=>{
      const main = build(t,        H*0.205, H*0.46, 0.020, 0.052, 0);
      const sec  = build(t*0.82+2, H*0.130, H*0.64, 0.027, 0.061, 1.4);
      if(lineRef.current)  lineRef.current.setAttribute("d", main.d);
      if(line2Ref.current) line2Ref.current.setAttribute("d", sec.d);
      if(areaRef.current)  areaRef.current.setAttribute("d", main.d+`L${W} ${H}L0 ${H}Z`);
      const [lx,ly]=main.last;
      [dotRef.current, pulseRef.current].forEach(el=>{
        if(el){ el.setAttribute("cx", lx.toFixed(1)); el.setAttribute("cy", ly.toFixed(1)); }
      });
      if(!reduce){ t+=0.013; raf=requestAnimationFrame(frame); }
    };
    frame();
    return ()=> cancelAnimationFrame(raf);
  },[]);
  return (
    <div className="hero-chart" aria-hidden="true">
      <svg viewBox="0 0 440 580" preserveAspectRatio="none">
        <defs>
          <linearGradient id="heroFill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="rgba(115,169,203,.26)"/>
            <stop offset="1" stopColor="rgba(115,169,203,0)"/>
          </linearGradient>
        </defs>
        {[0.18,0.40,0.62,0.84].map((p,i)=>(
          <line key={i} className="grid" x1="0" x2="440" y1={580*p} y2={580*p}/>
        ))}
        <path ref={areaRef}  className="area"  d=""/>
        <path ref={line2Ref} className="line2" d=""/>
        <path ref={lineRef}  className="line"  d=""/>
        <circle ref={pulseRef} className="dot-pulse" r="5"/>
        <circle ref={dotRef}   className="dot"       r="4.5"/>
      </svg>
    </div>
  );
}

function Header({ route }){
  const [open, setOpen] = useState(false);
  const base = route.split("/")[0];
  return (
    <header className="site-head">
      <div className="bar">
        <div className="brand" onClick={()=>{go("");setOpen(false);}}
             role="link" tabIndex={0} aria-label="CIEN — Centro de Investigación de Economía Nacional"
             onKeyDown={e=>{ if(e.key==="Enter"||e.key===" "){ e.preventDefault(); go(""); setOpen(false); } }}>
          {/* alt vacío a propósito: el nombre lo dice el texto de al lado, no hay que
              anunciarlo dos veces. */}
          <img src="assets/brand/cien-100-blue.png" alt=""/>
          <div className="wm">
            <span>Centro de Investigación</span>
            <span>de Economía Nacional</span>
          </div>
        </div>
        <nav className="nav">
          {NAV.map(n=> n.ext
            ? <a key={n.id} href={n.ext}>{n.label}</a>
            : <a key={n.id} className={base===n.id?"active":""}
                 onClick={()=>go(n.id)}>{n.label}</a>
          )}
        </nav>
        <button className="menu-btn" onClick={()=>setOpen(o=>!o)}>{open?"Cerrar":"Menú"}</button>
      </div>
      <div className={"drawer"+(open?" open":"")}>
        <nav>
          {NAV.map(n=> n.ext
            ? <a key={n.id} href={n.ext}>{n.label}</a>
            : <a key={n.id} className={base===n.id?"active":""}
                 onClick={()=>{go(n.id);setOpen(false);}}>{n.label}</a>
          )}
        </nav>
      </div>
    </header>
  );
}

function Footer(){
  return (
    <footer className="site-foot">
      <div className="wrap top">
        <div>
          <img className="logo" src="assets/brand/cien-100-white.png" alt="CIEN"/>
          <div className="lede">Economía política con rigor, para el debate público argentino.</div>
        </div>
        <div>
          <h5>Secciones</h5>
          {NAV.slice(1).map(n=> n.ext
            ? <a key={n.id} className="fl" href={n.ext}>{n.label}</a>
            : <a key={n.id} className="fl" onClick={()=>go(n.id)}>{n.label}</a>
          )}
        </div>
        <div>
          <h5>Contacto</h5>
          <a className="fl" href="mailto:cien@rethinkeconomics.org">cien@rethinkeconomics.org</a>
          <a className="fl" href="https://instagram.com/cien.centro" target="_blank" rel="noreferrer">Instagram · @cien.centro</a>
          <a className="fl" href="https://twitter.com/cien_centro" target="_blank" rel="noreferrer">X / Twitter · @cien_centro</a>
          <a className="fl">Facultad de Ciencias Económicas — UBA</a>
        </div>
      </div>
      <div className="wrap member">
        <a href="https://www.rethinkeconomics.org" target="_blank" rel="noreferrer">
          <img className="re-logo" src="assets/brand/rethinking-economics.svg" alt="Rethinking Economics"/>
        </a>
        <div className="mtxt">
          <p>Somos miembro y contamos con el apoyo de <b>Rethinking Economics</b>, la red internacional de estudiantes, académicos y profesionales que impulsa una economía plural en las aulas y en el debate público.</p>
        </div>
      </div>
      <div className="wrap bottom">
        <span>© {new Date().getFullYear()} CIEN — Centro de Investigación de Economía Nacional</span>
        <span>FCE · Universidad de Buenos Aires</span>
      </div>
    </footer>
  );
}

// --- figura para artículos ----------------------------------
function Figure({ src, num, cap, source }){
  return (
    <figure className="figure">
      <div className="frame">
        <img src={src} alt={cap||("Gráfico "+num)} loading="lazy"/>
      </div>
      <figcaption>
        {num && <span className="fnum">Gráfico {num}</span>}
        {cap && <span className="fcap">{cap}</span>}
        {source && <span className="fsrc">Fuente: {source}</span>}
      </figcaption>
    </figure>
  );
}

// gráfico no disponible en esta versión (placeholder honesto)
function FigurePH({ num, cap, source }){
  return (
    <figure className="figure">
      <div className="figph">
        <span className="pi">▱ gráfico {num}</span>
        <span className="pt">{cap}</span>
      </div>
      <figcaption>
        <span className="fnum">Gráfico {num}</span>
        {source && <span className="fsrc">Fuente: {source}</span>}
      </figcaption>
    </figure>
  );
}

function Pull({ children }){ return <p className="pullquote">{children}</p>; }

/* Descarga compacta para la cabecera del informe. Vive en la línea de metadatos
   (junto a la fecha) y usa su mismo registro monoespaciado: el que entra y no
   piensa leer en pantalla se lleva el PDF sin bajar hasta el pie. El bloque
   grande del final sigue estando, para el que sí terminó de leer. */
function DownloadChip({ pages, href="#", filename }){
  return (
    <a className="dl-chip" href={href} download={filename}
       onClick={e=>{ if(href==="#") e.preventDefault(); }}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12M7 10l5 5 5-5M5 21h14"/></svg>
      Descargar PDF{pages ? " · " + pages + " págs" : ""}
    </a>
  );
}

function DownloadBlock({ title, pages, href="#", filename }){
  return (
    <a className="dl" href={href} download={filename} onClick={e=>{ if(href==="#") e.preventDefault(); }}>
      <div className="l">
        <div className="k">Documento original</div>
        <div className="t">{title}</div>
        <div className="s">PDF · {pages} páginas</div>
      </div>
      <span className="btn btn-green">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12M7 10l5 5 5-5M5 21h14"/></svg>
        Descargar PDF
      </span>
    </a>
  );
}

Object.assign(window, { NAV, go, Arrow, Eyebrow, BarAccent, BarChartRule, DataBackdrop, HeroChart, Header, Footer, Figure, FigurePH, Pull, DownloadBlock, DownloadChip });