/* ============================================================
   SECTIONS 1 — Nav, Hero, Disciplinas
   ============================================================ */

/* ---------- Nav ---------- */
function Nav({ onNav, active }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 64);
    window.addEventListener('scroll', fn, { passive: true });
    fn();
    return () => window.removeEventListener('scroll', fn);
  }, []);
  const links = [
    { id: 'disciplinas', label: 'Disciplinas' },
    { id: 'sobre', label: 'Sobre mí' },
    { id: 'proyectos', label: 'Proyectos' },
    { id: 'trayectoria', label: 'Trayectoria' },
    { id: 'contacto', label: 'Contacto' },
  ];
  const onDark = !scrolled;
  return (
    <header style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 60,
      background: scrolled ? 'rgba(250,249,246,0.86)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(140%) blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(140%) blur(12px)' : 'none',
      borderBottom: `1px solid ${scrolled ? 'var(--color-border)' : 'transparent'}`,
      transition: 'background var(--dur-base), border-color var(--dur-base)' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '15px clamp(20px, 4vw, 44px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#top" onClick={(e) => { e.preventDefault(); onNav('top'); }} style={{ display: 'flex', alignItems: 'center', gap: 11, textDecoration: 'none' }}>
          <span style={{ fontWeight: 'var(--weight-black)', fontSize: 17, letterSpacing: '0.02em', textTransform: 'uppercase', color: onDark ? 'var(--white)' : 'var(--color-heading)', transition: 'color var(--dur-base)' }}>Yan Trotta</span>
          <span style={{ width: 22, height: 3, background: 'var(--color-accent)' }} />
        </a>
        <nav className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
          {links.map((l) => (
            <NavLink key={l.id} label={l.label} active={active === l.id} onDark={onDark} onClick={() => onNav(l.id)} />
          ))}
          <Button size="sm" variant={onDark ? 'inverse' : 'primary'} iconRight={<Icon name="arrow-down" size={13} />} onClick={() => onNav('contacto')}>Contactar</Button>
        </nav>
        <button className="nav-burger" onClick={() => setOpen((o) => !o)} aria-label="Menú" style={{ display: 'none', alignItems: 'center', justifyContent: 'center', width: 42, height: 42, border: 'none', background: 'transparent', color: onDark ? 'var(--white)' : 'var(--color-heading)', cursor: 'pointer' }}>
          <Icon name={open ? 'x' : 'menu'} size={24} />
        </button>
      </div>
      {open ? (
        <div style={{ background: 'var(--color-primary)', padding: '8px clamp(20px,4vw,44px) 20px', display: 'flex', flexDirection: 'column', gap: 4 }}>
          {links.map((l) => (
            <a key={l.id} href={'#' + l.id} onClick={(e) => { e.preventDefault(); setOpen(false); onNav(l.id); }}
              style={{ color: 'var(--white)', textDecoration: 'none', fontWeight: 600, fontSize: 15, padding: '12px 0', borderBottom: '1px solid var(--color-border-inverse)' }}>{l.label}</a>
          ))}
        </div>
      ) : null}
    </header>
  );
}

function NavLink({ label, onClick, onDark, active }) {
  const [h, setH] = React.useState(false);
  const accent = active || h;
  return (
    <a href="#" onClick={(e) => { e.preventDefault(); onClick(); }} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ position: 'relative', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-medium)', textDecoration: 'none',
        color: accent ? 'var(--color-accent)' : (onDark ? 'rgba(255,255,255,0.92)' : 'var(--color-text)'),
        transition: 'color var(--dur-fast)', whiteSpace: 'nowrap' }}>
      {label}
      <span style={{ position: 'absolute', left: 0, right: 0, bottom: -6, height: 2, background: 'var(--color-accent)', transform: active ? 'scaleX(1)' : 'scaleX(0)', transformOrigin: 'left', transition: 'transform var(--dur-base) var(--ease-out)' }} />
    </a>
  );
}

/* ---------- Hero ---------- */
function Hero({ onNav, tweaks }) {
  const heroImg = 'assets/img/hds-villa-dusk.jpg';
  const ov = (tweaks && tweaks.heroOverlay) || 'Medio';
  const overlays = {
    'Sutil':   'linear-gradient(180deg, rgba(10,21,29,0.48) 0%, rgba(10,21,29,0.06) 32%, rgba(10,21,29,0.14) 60%, rgba(10,21,29,0.70) 100%)',
    'Medio':   'linear-gradient(180deg, rgba(10,21,29,0.62) 0%, rgba(10,21,29,0.18) 32%, rgba(10,21,29,0.30) 60%, rgba(10,21,29,0.86) 100%)',
    'Intenso': 'linear-gradient(180deg, rgba(10,21,29,0.78) 0%, rgba(10,21,29,0.40) 32%, rgba(10,21,29,0.52) 60%, rgba(10,21,29,0.94) 100%)',
  };
  const showStats = !tweaks || tweaks.mostrarStats !== false;
  return (
    <section id="top" style={{ position: 'relative', minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${heroImg})`, backgroundSize: 'cover', backgroundPosition: 'center', transform: 'scale(1.04)' }} />
      <div style={{ position: 'absolute', inset: 0, background: overlays[ov] || overlays['Medio'], transition: 'background var(--dur-base)' }} />
      <div style={{ position: 'relative', width: '100%', maxWidth: 1240, margin: '0 auto', padding: '0 clamp(20px, 4vw, 44px) clamp(40px, 6vh, 72px)' }}>
        <Reveal y={22}>
          <p style={{ margin: 0, fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--color-accent)' }}>
            Interior &amp; Set Designer · Project Manager
          </p>
        </Reveal>
        <Reveal y={26} delay={90}>
          <h1 style={{ margin: '20px 0 0', fontWeight: 'var(--weight-light)', fontSize: 'clamp(40px, 6vw, 82px)', lineHeight: 1.0, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--white)' }}>
            Yan <span style={{ fontWeight: 'var(--weight-semibold)' }}>Trotta</span>
          </h1>
        </Reveal>
        <Reveal y={20} delay={180}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 'clamp(20px, 4vw, 56px)', marginTop: 26, flexWrap: 'wrap' }}>
            <span style={{ width: 64, height: 3, background: 'var(--color-accent)', marginTop: 12, flexShrink: 0 }} />
            <p style={{ margin: 0, maxWidth: 560, fontWeight: 'var(--weight-light)', fontSize: 'clamp(15px, 1.5vw, var(--text-lg))', lineHeight: 'var(--leading-relaxed)', color: 'rgba(255,255,255,0.94)' }}>
              Más de <strong style={{ fontWeight: 'var(--weight-semibold)' }}>20 años</strong> entre Argentina y España en escenografía para TV, interiorismo, reformas y coordinación de obra. Te comparto aquí una selección de mis trabajos.
            </p>
          </div>
        </Reveal>
        <Reveal y={18} delay={260}>
          <div style={{ display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap' }}>
            <Button variant="accent" size="lg" iconRight={<Icon name="arrow-right" size={16} />} onClick={() => onNav('proyectos')}>Ver proyectos</Button>
            <Button variant="inverse" size="lg" onClick={() => onNav('sobre')}>Sobre mí</Button>
          </div>
        </Reveal>
      </div>
      <div style={{ position: 'relative', width: '100%', maxWidth: 1240, margin: '0 auto', padding: '0 clamp(20px, 4vw, 44px)' }}>
        {showStats ? (
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.18)', display: 'flex', gap: 'clamp(20px, 5vw, 64px)', padding: '22px 0 30px', flexWrap: 'wrap' }}>
          {[['20+', 'Años de experiencia'], ['ARG · ESP', 'Dos mercados'], ['3', 'Áreas clave'], ['TV · Obra', 'Diseño y ejecución']].map(([n, l]) => (
            <div key={l}>
              <div style={{ fontWeight: 'var(--weight-bold)', fontSize: 'clamp(18px, 2vw, var(--text-xl))', letterSpacing: 'var(--tracking-tight)', color: 'var(--white)' }}>{n}</div>
              <div style={{ fontSize: 'var(--text-2xs)', color: 'rgba(255,255,255,0.66)', marginTop: 4, letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase' }}>{l}</div>
            </div>
          ))}
        </div>
        ) : <div style={{ height: 30 }} />}
      </div>
    </section>
  );
}

/* ---------- Disciplinas ---------- */
function Disciplinas({ refMap, onNav }) {
  return (
    <section id="disciplinas" ref={(el) => { if (refMap) refMap.current['disciplinas'] = el; }} style={{ background: 'var(--color-bg)', padding: 'clamp(64px, 9vh, 112px) 0' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 clamp(20px, 4vw, 44px)' }}>
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', marginBottom: 'clamp(36px, 5vh, 56px)' }}>
            <SectionHead eyebrow="En qué trabajo" title={<span>Tres áreas,<br />un mismo método</span>} />
            <p style={{ margin: 0, maxWidth: 360, fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-relaxed)', color: 'var(--color-text-muted)' }}>
              Un perfil transversal que une diseño y ejecución: del concepto y el presupuesto a la coordinación de obra y la entrega final.
            </p>
          </div>
        </Reveal>
        <div className="disc-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(290px, 1fr))', gap: 20 }}>
          {DISCIPLINAS.map((d, i) => <DisciplinaCard key={d.id} d={d} i={i} onNav={onNav} />)}
        </div>
      </div>
    </section>
  );
}

function DisciplinaCard({ d, i, onNav }) {
  const [h, setH] = React.useState(false);
  return (
    <Reveal delay={i * 70} style={{ height: '100%' }}>
      <a href="#proyectos" onClick={(e) => { e.preventDefault(); onNav('proyectos'); }}
        onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ display: 'flex', flexDirection: 'column', height: '100%', textDecoration: 'none',
          background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-lg)', overflow: 'hidden',
          boxShadow: h ? 'var(--shadow-md)' : 'var(--shadow-xs)', transform: h ? 'translateY(-3px)' : 'none',
          transition: 'box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out)' }}>
        <div style={{ position: 'relative', aspectRatio: '4 / 3', overflow: 'hidden', background: 'var(--navy-800)' }}>
          {d.image ? (
            <img src={d.image} alt={d.label} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transform: h ? 'scale(1.05)' : 'scale(1)', transition: 'transform var(--dur-slow) var(--ease-out)' }} />
          ) : (
            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10, background: 'linear-gradient(160deg, var(--navy-700), var(--navy-900))', color: 'rgba(255,255,255,0.6)' }}>
              <Icon name="image" size={26} stroke={1.6} />
              <span style={{ fontSize: 9, fontWeight: 600, letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase' }}>Fotos próximamente</span>
            </div>
          )}
          <span style={{ position: 'absolute', top: 12, left: 12, fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-black)', fontSize: 14, letterSpacing: '0.02em', color: 'var(--white)', background: 'rgba(10,21,29,0.55)', backdropFilter: 'blur(4px)', borderRadius: 'var(--radius-sm)', padding: '4px 9px' }}>{d.n}</span>
        </div>
        <div style={{ padding: '20px 20px 22px', display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
            <h3 style={{ margin: 0, fontWeight: 'var(--weight-bold)', fontSize: 'var(--text-lg)', letterSpacing: 'var(--tracking-tight)', color: 'var(--color-heading)' }}>{d.label}</h3>
            <Icon name="arrow-up-right" size={16} style={{ color: h ? 'var(--color-accent)' : 'var(--color-text-subtle)', transition: 'color var(--dur-fast)' }} />
          </div>
          <p style={{ margin: 0, fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-normal)', color: 'var(--color-text-muted)', flex: 1 }}>{d.desc}</p>
          <p style={{ margin: '6px 0 0', fontSize: 10, fontWeight: 600, letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--color-accent)' }}>{d.meta}</p>
        </div>
      </a>
    </Reveal>
  );
}

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