/* Main page sections + page composition */

const Nav = ({ active, onNav }) => {
  const [compact, setCompact] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setCompact(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'inicio', label: 'Inicio' },
    { id: 'que-es', label: 'Qué es' },
    { id: 'principios', label: 'Principios' },
  ];

  return (
    <>
      <nav className={`nav ${compact ? 'compact' : ''}`}>
        <div className="nav__brand" onClick={() => { window.location.href = '/'; }}>
          <div className="nav__brand-mark">
            <img src="assets/conecta-rugby-mark.png" alt="" />
          </div>
          <div className="nav__brand-text">
            <div className="nav__brand-name">Conecta<span>.</span>rugby</div>
            <div className="nav__brand-tag">UN PROGRAMA DE LA UAR</div>
          </div>
        </div>

        <div className="nav__links">
          {links.map(l => (
            <div
              key={l.id}
              className={`nav__link ${active === l.id ? 'active' : ''}`}
              onClick={() => onNav(l.id)}
            >{l.label}</div>
          ))}
        </div>

        <a href="https://app.conecta.rugby/login?redirect=%2F" className="nav__login">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ width: 14, height: 14 }}>
            <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
            <polyline points="10 17 15 12 10 7" />
            <line x1="15" y1="12" x2="3" y2="12" />
          </svg>
          <span>Ingresar</span>
        </a>

        <button className="nav__burger" onClick={() => setMobileOpen(true)}>
          <Icons.menu style={{ width: 18, height: 18 }} />
        </button>
      </nav>

      <div className={`mobile-menu ${mobileOpen ? 'open' : ''}`}>
        <button
          onClick={() => setMobileOpen(false)}
          style={{
            position: 'absolute', top: 20, right: 20,
            width: 40, height: 40, borderRadius: 999,
            border: '1px solid var(--hairline-strong)', background: 'transparent',
            color: 'var(--ink)', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
          <Icons.close style={{ width: 18, height: 18 }} />
        </button>
        {links.map(l => (
          <div key={l.id} className="nav__link"
            onClick={() => { onNav(l.id); setMobileOpen(false); }}>{l.label}</div>
        ))}
        <a href="https://app.conecta.rugby/login?redirect=%2F" className="nav__login nav__login--mobile" onClick={() => setMobileOpen(false)}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ width: 16, height: 16 }}>
            <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
            <polyline points="10 17 15 12 10 7" />
            <line x1="15" y1="12" x2="3" y2="12" />
          </svg>
          <span>Ingresar</span>
        </a>
      </div>
    </>
  );
};

const Hero = ({ onNav, onAppClick }) => (
  <section data-section="inicio" className="hero" id="inicio">
    <div className="hero__inner">
      <div className="hero__copy">
        <div className="eyebrow reveal">PROGRAMA UAR · 2025</div>
        <h1 className="hero__title reveal">
          Conecta<span className="dot">.</span>
          <span className="rugby">rugby</span>
        </h1>
        <p className="hero__sub reveal">
          Datos, formación y gestión integrados para transformar el juego.
        </p>
        <p className="hero__small reveal">
          Un programa <strong style={{ color: 'var(--ink)' }}>gratuito y federal</strong> de la UAR
          que acompaña a clubes y uniones de todo el país con herramientas de
          aprendizaje, intercambio y desarrollo.
        </p>
        <div className="hero__ctas reveal">
          <button className="btn btn--primary btn--lg" onClick={() => onNav('que-es')}>
            Conocer el programa
            <Icons.arrow style={{ width: 16, height: 16 }} />
          </button>

        </div>
      </div>

      <div className="reveal">
        <Ecosystem size="hero" onAppClick={onAppClick} />
      </div>
    </div>

    <div className="hero__meta">
      <div className="hero__meta-item">
        <span className="dot"></span>
        ECOSISTEMA OPERATIVO · 24 UNIONES PROVINCIALES
      </div>
      <div className="hero__scroll">
        SCROLL
        <div className="hero__scroll-line"></div>
      </div>
      <div className="hero__meta-item">
        v.2025.04 / RELEASE FEDERAL
      </div>
    </div>
  </section>
);

const QueEs = () => (
  <section data-section="que-es" id="que-es" className="what">
    <div className="container">
      {/* Intro + audiencias */}
      <div className="what__grid">
        <div>
          <div className="eyebrow reveal">QUÉ ES CONECTA RUGBY</div>
          <h2 className="section-title reveal">Un ecosistema integrado para todo el rugby argentino.</h2>

          <div className="what__copy reveal" style={{ marginTop: 8 }}>
            <p>
              <strong style={{ color: 'var(--ink)' }}>Conecta Rugby</strong> es la
              estrategia de datos de la UAR: información precisa, formación y gestión
              integradas para transformar el juego. Sobre un{' '}
              <strong style={{ color: 'var(--ink)' }}>Core común</strong> —la BD UAR
              que registra a cada jugador, sus pases y su trayectoria— operan tres
              aplicaciones que organizan partidos, formación y alto rendimiento.
            </p>
          </div>
        </div>

        <div className="what__copy reveal">
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 12,
            marginTop: 8,
          }}>
            {[
              ['Entrenadores', 'cuerpo médico y preparadores físicos'],
              ['Referees', 'oficiales de desarrollo'],
              ['Managers', 'y dirigentes de club'],
              ['Jugadores', 'desde infantiles hasta primera'],
              ['Administrativos', 'de clubes y uniones'],
              ['Centros de rugby', 'staff UAR y referentes'],
            ].map(([t, s]) => (
              <div key={t} style={{
                display: 'flex', alignItems: 'flex-start', gap: 12,
                padding: '14px 16px',
                borderRadius: 12,
                border: '1px solid var(--hairline)',
                background: 'rgba(0, 22, 32,0.3)',
              }}>
                <div style={{
                  width: 24, height: 24, borderRadius: 7,
                  background: 'rgba(200, 146, 17,0.12)',
                  color: 'var(--accent)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0, marginTop: 1,
                }}>
                  <Icons.check style={{ width: 12, height: 12 }} />
                </div>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 600, fontFamily: 'var(--font-display)' }}>{t}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-mute)', marginTop: 2, fontFamily: 'var(--font-gotham)' }}>{s}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Stats — números reales del programa */}
      <div className="reveal" style={{ marginTop: 64 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 0,
          border: '1px solid var(--hairline)',
          borderRadius: 'var(--radius-lg)',
          overflow: 'hidden',
          background: 'rgba(0, 22, 32,0.35)',
        }} className="stats-grid">
          {[
            { n: '+100.000', l: 'Jugadores registrados por año', tag: 'CORE · BD UAR' },
            { n: '+4.000', l: 'Usuarios por semana en Partidos', tag: 'PARTIDOS' },
            { n: '+100.000', l: 'Cursos aprobados', tag: 'CURSOS' },
            { n: '+500', l: 'Jugadores en academias y centros', tag: 'ALTO RENDIMIENTO' },
          ].map((s, i) => (
            <div key={s.l} style={{
              padding: '32px 28px',
              borderRight: i < 3 ? '1px solid var(--hairline)' : 'none',
              position: 'relative',
            }} className="stat-cell">
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 10,
                color: 'var(--accent)', letterSpacing: '0.18em',
                marginBottom: 14,
              }}>{s.tag}</div>
              <div style={{
                fontFamily: 'var(--font-display)', fontWeight: 700,
                fontSize: 'clamp(32px, 4vw, 44px)',
                letterSpacing: '-0.02em', lineHeight: 1, color: 'var(--ink)',
              }}>{s.n}</div>
              <div style={{
                fontSize: 12, color: 'var(--ink-dim)',
                letterSpacing: '0.04em',
                marginTop: 10, fontFamily: 'var(--font-gotham)',
              }}>{s.l}</div>
            </div>
          ))}
        </div>
        <style>{`
          @media (max-width: 880px) {
            .stats-grid { grid-template-columns: 1fr 1fr !important; }
            .stat-cell:nth-child(2) { border-right: none !important; }
            .stat-cell:nth-child(1), .stat-cell:nth-child(2) { border-bottom: 1px solid var(--hairline); }
          }
          @media (max-width: 540px) {
            .stats-grid { grid-template-columns: 1fr !important; }
            .stat-cell { border-right: none !important; }
            .stat-cell:not(:last-child) { border-bottom: 1px solid var(--hairline); }
          }
        `}</style>
      </div>

    </div>
  </section>
);

const Principios = () => {
  const principles = [
    { t: 'Gratuito y federal', d: 'Disponible para todos los clubes del país, con propuestas para entrenadores, cuerpo médico, preparadores físicos, referees, dirigentes y managers.' },
    { t: 'Plataforma educativa', d: 'Diseñada para facilitar el acceso a la información mediante cursos online y módulos virtuales.' },
    { t: 'Red de intercambio', d: 'Una estructura colaborativa que conecta uniones, clubes y referentes de todo el país.' },
    { t: 'Inversión en educación', d: 'Los recursos humanos, económicos y tecnológicos de la UAR al servicio del desarrollo de más y mejores habilidades.' },
  ];

  return (
    <section data-section="principios" id="principios" className="how">
      <div className="container">
        <div className="how__head">
          <div>
            <div className="eyebrow reveal">PRINCIPIOS DEL PROGRAMA</div>
            <h2 className="section-title reveal">Los pilares de Conecta Rugby.</h2>
          </div>
          <p className="section-lead reveal">
            Las bases que ordenan la propuesta y la mantienen alineada con la
            misión institucional de la UAR.
          </p>
        </div>

        <div className="principles__grid reveal">
          {principles.map((p, i) => (
            <div key={p.t} className="principle">
              <div className="principle__num">P · 0{i + 1}</div>
              <h3 className="principle__title">{p.t}</h3>
              <p className="principle__text">{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const EcoSection = ({ onAppClick }) => {
  const apps = [
    { id: 'partidos', tag: 'APP 01', title: 'Partidos', text: 'Más de 1.000 partidos por semana administrados de forma digital: ficha electrónica, disciplina, incidencias y bienestar del jugador.' },
    { id: 'cursos', tag: 'APP 02', title: 'Coaching', text: 'Plataforma central de formación continua para jugadores, entrenadores y referís de toda Sudamérica. +50 cursos activos, contenidos UAR y World Rugby.' },
    { id: 'rendimiento', tag: 'APP 03', title: 'Alto Rendimiento', text: 'Seguimiento del jugador en academias y centros nacionales. 25 academias, +500 jugadores y +80 profesionales (técnico, físico, médico, nutricional, psicológico).' },
  ];

  return (
    <section data-section="ecosistema" id="ecosistema" className="eco-section">
      <div className="container">
        <div className="eco-section__head">
          <div className="eyebrow reveal">APLICACIONES</div>
          <h2 className="section-title reveal">Aplicaciones</h2>
          <p className="section-lead reveal">
            Tres aplicaciones que comparten el mismo Core. Hacé clic para acceder
            a la plataforma o descargar la app.
          </p>
        </div>

        <div className="eco-stage">
          <div className="eco-stage__left reveal">
            {[apps[0]].map(a => (
              <EcoAppCard key={a.id} a={a} onClick={() => onAppClick(a.id)} />
            ))}
          </div>

          <div className="eco-stage__viz reveal">
            <Ecosystem size="big" onAppClick={onAppClick} />
          </div>

          <div className="eco-stage__right reveal">
            {apps.slice(1).map(a => (
              <EcoAppCard key={a.id} a={a} onClick={() => onAppClick(a.id)} />
            ))}
          </div>
        </div>

        <div className="eco-mobile-cards" style={{ marginTop: 32 }}>
          <style>{`
            .eco-mobile-cards { display: none; }
            @media (max-width: 980px) {
              .eco-mobile-cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
            }
          `}</style>
          {apps.map(a => (
            <EcoAppCard key={a.id} a={a} onClick={() => onAppClick(a.id)} />
          ))}
        </div>
      </div>
    </section>
  );
};

const EcoAppCard = ({ a, onClick }) => (
  <div className="eco-app-card" onClick={onClick}>
    <div className="eco-app-card__head">
      <span className="eco-app-card__dot"></span>
      <span className="eco-app-card__tag">{a.tag}</span>
    </div>
    <div className="eco-app-card__title">
      {a.title}
      <span className="eco-app-card__arrow">
        <Icons.arrow style={{ width: 12, height: 12 }} />
      </span>
    </div>
    <div className="eco-app-card__text">{a.text}</div>
  </div>
);

const Closing = () => (
  <section className="close">
    <div className="container">
      <div className="close__inner reveal">
        <div className="eyebrow" style={{ justifyContent: 'center', display: 'inline-flex' }}>CIERRE</div>
        <h2 className="close__title" style={{ marginTop: 18 }}>
          Un rugby <em>más conectado</em>,<br />federal y preparado.
        </h2>
        <p className="close__text">
          Conecta.rugby pone la educación, la tecnología y el trabajo colaborativo
          al servicio de los clubes y uniones de todo el país.
        </p>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="footer__brand">
      <img src="assets/conecta-rugby-mark.png" alt="" />
      <div>
        <div style={{ fontWeight: 700, color: 'var(--ink)', fontSize: 14 }}>Conecta<span style={{ color: 'var(--accent)' }}>.</span>rugby</div>
        <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 3 }}>Programa UAR · {new Date().getFullYear()}</div>
      </div>
    </div>
    <div className="footer__links">
      <span className="footer__link">Términos</span>
      <span className="footer__link">Privacidad</span>
      <span className="footer__link">Accesibilidad</span>
    </div>
  </footer>
);

const AppModal = ({ appId, onClose }) => {
  const meta = {
    partidos: { title: 'Partidos', tag: 'APP 01 · GESTIÓN', Icon: Icons.partidos, Screen: PartidosScreen },
    cursos: { title: 'Cursos', tag: 'APP 02 · CAPACITACIÓN', Icon: Icons.cursos, Screen: CursosScreen },
    rendimiento: { title: 'Alto Rendimiento', tag: 'APP 03 · DESARROLLO', Icon: Icons.rendimiento, Screen: RendimientoScreen },
  };

  React.useEffect(() => {
    if (!appId) return;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onKey);
    };
  }, [appId, onClose]);

  const m = appId && meta[appId];
  return (
    <div className={`modal-backdrop ${appId ? 'open' : ''}`} onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal__head">
          <div className="modal__head-title">
            {m && (
              <>
                <div className="modal__head-icon"><m.Icon style={{ width: 18, height: 18 }} /></div>
                <div>
                  <div className="modal__head-name">{m.title}</div>
                  <div className="modal__head-tag">{m.tag}</div>
                </div>
              </>
            )}
          </div>
          <button className="modal__close" onClick={onClose}>
            <Icons.close style={{ width: 16, height: 16 }} />
          </button>
        </div>
        <div className="modal__body">
          {m && <AccessScreen appId={appId} PreviewScreen={m.Screen} IconCmp={m.Icon} />}
        </div>
      </div>
    </div>
  );
};

/* ─── ROOT APP ─── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "amarillo"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = {
  amarillo: { name: 'Amarillo UAR',  hex: '#c89211', soft: '#e2c771' },
  celeste:  { name: 'Celeste UAR',   hex: '#6aaae4', soft: '#94b3de' },
  amarilloSoft: { name: 'Amarillo soft', hex: '#e2c771', soft: '#f0dca0' },
  celesteSoft:  { name: 'Celeste soft',  hex: '#94b3de', soft: '#b8cce8' },
};

const App = () => {
  const [active, setActive] = React.useState('inicio');
  const [modalApp, setModalApp] = React.useState(null);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useReveal();

  React.useEffect(() => {
    const opt = ACCENT_OPTIONS[tweaks.accentColor] || ACCENT_OPTIONS.amarillo;
    document.documentElement.style.setProperty('--accent', opt.hex);
    document.documentElement.style.setProperty('--accent-soft', opt.soft);
  }, [tweaks.accentColor]);

  React.useEffect(() => {
    const sections = document.querySelectorAll('[data-section]');
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setActive(e.target.dataset.section);
        }
      });
    }, { rootMargin: '-40% 0px -50% 0px', threshold: 0 });
    sections.forEach(s => io.observe(s));
    return () => io.disconnect();
  }, []);

  const handleNav = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const handleAppClick = (appId) => {
    if (appId === 'cursos') {
      window.location.href = '/cursos';
      return;
    }
    setModalApp(appId);
  };

  return (
    <div className="app">
      <Nav active={active} onNav={handleNav} />

      <Hero onNav={handleNav} onAppClick={handleAppClick} />
      <QueEs />
      <Principios />
      <Closing />
      <Footer />

      <AppModal appId={modalApp} onClose={() => setModalApp(null)} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Color de acento" subtitle="Paleta institucional UAR">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
            {Object.entries(ACCENT_OPTIONS).map(([k, v]) => (
              <button
                key={k}
                onClick={() => setTweak('accentColor', k)}
                style={{
                  aspectRatio: 1,
                  borderRadius: 12,
                  border: tweaks.accentColor === k ? `2px solid ${v.hex}` : '1px solid rgba(255,255,255,0.12)',
                  background: 'rgba(0, 22, 32,0.4)',
                  cursor: 'pointer',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  position: 'relative',
                }}
                title={v.name}
              >
                <div style={{
                  width: '60%', height: '60%',
                  borderRadius: '50%',
                  background: `radial-gradient(circle at 30% 30%, ${v.soft}, ${v.hex})`,
                  boxShadow: tweaks.accentColor === k ? `0 0 20px ${v.hex}88` : 'none',
                }} />
              </button>
            ))}
          </div>
          <div style={{ marginTop: 12, fontSize: 11, opacity: 0.6, textAlign: 'center' }}>
            {ACCENT_OPTIONS[tweaks.accentColor]?.name}
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);