/* global React, FramerMotion, LogoMark, SoundWave, Icon, PALETTE */
/* eslint-disable */

// ============================================================
// Taide Collective — Navbar + Hero
// ============================================================

const { useState: tcUseStateTop, useEffect: tcUseEffectTop, useRef: tcUseRefTop } = React;
const {
  motion: motionTop,
  AnimatePresence: APTop,
  useScroll: useScrollTop,
  useTransform: useTransformTop,
} = FramerMotion;

// ------------------------------------------------------------
// Navbar
// ------------------------------------------------------------
const NAV_LINKS = [
  { label: 'Inicio',    id: 'inicio' },
  { label: 'Sistemas',  id: 'sistemas' },
  { label: 'Música',    id: 'musica' },
  { label: 'Contenido', id: 'contenido' },
  { label: 'Sobre mí',  id: 'sobre' },
];

function Navbar() {
  const [scrolled, setScrolled] = tcUseStateTop(false);
  const [menuOpen, setMenuOpen] = tcUseStateTop(false);
  const [active, setActive] = tcUseStateTop('inicio');

  tcUseEffectTop(() => {
    const fn = () => setScrolled(window.scrollY > 20);
    fn();
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);

  tcUseEffectTop(() => {
    const fn = () => {
      const y = window.scrollY + 200;
      const ids = ['inicio', 'sistemas', 'musica', 'contenido', 'sobre'];
      for (let i = ids.length - 1; i >= 0; i--) {
        const el = document.getElementById(ids[i]);
        if (el && el.offsetTop <= y) { setActive(ids[i]); return; }
      }
    };
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);

  const goTo = (id) => {
    setMenuOpen(false);
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
  };

  return (
    <>
      <motionTop.div
        className="fixed top-0 left-0 right-0 z-50 flex justify-center"
        initial={{ y: -40, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
      >
        <motionTop.nav
          animate={{
            marginTop: scrolled ? 14 : 22,
            width: scrolled ? '92%' : '100%',
            maxWidth: scrolled ? 1180 : 1440,
            paddingLeft: scrolled ? 22 : 32,
            paddingRight: scrolled ? 14 : 32,
            paddingTop: scrolled ? 10 : 18,
            paddingBottom: scrolled ? 10 : 18,
            borderRadius: scrolled ? 999 : 0,
          }}
          transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
          className={'flex items-center justify-between ' + (scrolled ? 'liquid-glass' : '')}
        >
          {/* Logo */}
          <a
            href="#inicio"
            onClick={(e) => { e.preventDefault(); goTo('inicio'); }}
            className="flex items-center gap-3 shrink-0"
          >
            <LogoMark size={36} />
            <div className="leading-tight">
              <div className="text-[11px] text-white font-poppins" style={{ letterSpacing: '0.3em', fontWeight: 300 }}>
                TAIDE
              </div>
              <div className="text-[10px] font-poppins" style={{ letterSpacing: '0.4em', color: PALETTE.aquaLight, fontWeight: 300 }}>
                COLLECTIVE
              </div>
            </div>
          </a>

          {/* Center links */}
          <div className="hidden lg:flex items-center gap-9">
            {NAV_LINKS.map((l) => (
              <a
                key={l.id}
                href={'#' + l.id}
                onClick={(e) => { e.preventDefault(); goTo(l.id); }}
                className={
                  'nav-underline text-[12px] font-poppins font-light tracking-[0.18em] uppercase transition-colors ' +
                  (active === l.id ? 'text-white active' : 'text-white/55 hover:text-white')
                }
              >
                {l.label}
              </a>
            ))}
          </div>

          {/* Right: access */}
          <div className="flex items-center gap-3">
            <motionTop.button
              whileHover={{ scale: 1.03 }}
              whileTap={{ scale: 0.97 }}
              className="focus-pill px-5 py-2 rounded-full text-[12px] font-poppins tracking-[0.22em] uppercase text-white flex items-center gap-2"
            >
              Acceso
              <Icon name="arrow-up-right" size={14} />
            </motionTop.button>
            <button
              aria-label="Menú"
              className="lg:hidden text-white/80 hover:text-white p-2"
              onClick={() => setMenuOpen(true)}
            >
              <Icon name="menu" size={22} />
            </button>
          </div>
        </motionTop.nav>
      </motionTop.div>

      {/* Mobile drawer */}
      <APTop>
        {menuOpen && (
          <motionTop.div
            key="mobile-menu"
            className="lg:hidden"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            <div
              className="fixed inset-0 z-[60] bg-black/60 backdrop-blur-sm"
              onClick={() => setMenuOpen(false)}
            />
            <motionTop.aside
              className="fixed top-0 right-0 bottom-0 z-[70] w-[82%] max-w-[360px] liquid-glass"
              style={{ borderRadius: 0, background: 'rgba(10,10,10,0.92)' }}
              initial={{ x: '100%' }}
              animate={{ x: 0 }}
              exit={{ x: '100%' }}
              transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
            >
              <div className="flex items-center justify-between p-6">
                <div className="flex items-center gap-3">
                  <LogoMark size={32} />
                  <div className="text-[11px] tracking-[0.3em]">TAIDE</div>
                </div>
                <button onClick={() => setMenuOpen(false)} className="text-white/80 hover:text-white p-2" aria-label="Cerrar">
                  <Icon name="x" size={22} />
                </button>
              </div>
              <nav className="flex flex-col gap-1 px-6">
                {NAV_LINKS.map((l, i) => (
                  <motionTop.button
                    key={l.id}
                    initial={{ opacity: 0, x: 20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.06 + i * 0.05 }}
                    onClick={() => goTo(l.id)}
                    className="text-left py-4 border-b border-white/5 text-white/80 hover:text-white font-poppins"
                    style={{ letterSpacing: '0.05em' }}
                  >
                    <span className="text-2xl font-light">{l.label}</span>
                  </motionTop.button>
                ))}
              </nav>
              <div className="px-6 pt-8">
                <button className="focus-pill px-5 py-3 rounded-full text-[12px] tracking-[0.22em] uppercase w-full">
                  Acceso ↗
                </button>
              </div>
            </motionTop.aside>
          </motionTop.div>
        )}
      </APTop>
    </>
  );
}

// ------------------------------------------------------------
// Hero — parallax y/opacity, two CTA buttons, full-width sound wave
// ------------------------------------------------------------
function Hero() {
  const ref = tcUseRefTop(null);
  const { scrollY } = useScrollTop();
  const y = useTransformTop(scrollY, [0, 700], [0, 100]);
  const opacity = useTransformTop(scrollY, [0, 500], [1, 0]);

  return (
    <section
      id="inicio"
      ref={ref}
      data-screen-label="01 Hero"
      className="relative min-h-screen flex items-center pt-32 pb-20 overflow-hidden"
    >
      <div className="hero-spotlight" />

      {/* Two floating glass orbs (md+) */}
      <motionTop.div
        aria-hidden="true"
        className="hidden md:block absolute left-[6%] top-[28%] w-44 h-44 rounded-full liquid-glass"
        animate={{ y: [0, -18, 0], rotate: [0, 8, 0] }}
        transition={{ duration: 12, repeat: Infinity, ease: 'easeInOut' }}
        style={{ borderRadius: '999px' }}
      >
        <div className="absolute inset-0 rounded-full" style={{
          background: 'radial-gradient(circle at 35% 30%, rgba(110,231,209,0.35), transparent 60%)',
        }} />
      </motionTop.div>
      <motionTop.div
        aria-hidden="true"
        className="hidden md:block absolute right-[7%] bottom-[18%] w-28 h-28 rounded-full liquid-glass"
        animate={{ y: [0, 22, 0], rotate: [0, -10, 0] }}
        transition={{ duration: 16, repeat: Infinity, ease: 'easeInOut' }}
        style={{ borderRadius: '999px' }}
      >
        <div className="absolute inset-0 rounded-full" style={{
          background: 'radial-gradient(circle at 60% 40%, rgba(200,255,240,0.4), transparent 60%)',
        }} />
      </motionTop.div>

      <motionTop.div
        style={{ y, opacity }}
        className="relative z-10 w-full max-w-7xl mx-auto px-6"
      >
        {/* Status pill */}
        <motionTop.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.2, ease: [0.22, 1, 0.36, 1] }}
          className="mx-auto mb-8 flex items-center justify-center gap-3 px-5 py-2 rounded-full focus-pill w-fit"
        >
          <span className="relative inline-block w-2 h-2 rounded-full" style={{
            background: PALETTE.aquaLight,
            boxShadow: '0 0 12px ' + PALETTE.aquaPrimary + ', 0 0 4px #fff',
          }} />
          <span className="text-[11px] font-mont tracking-[0.32em] text-white/80">
            SISTEMAS · CREATIVIDAD · EJECUCIÓN
          </span>
        </motionTop.div>

        {/* Headline */}
        <motionTop.h1
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.9, delay: 0.35, ease: [0.22, 1, 0.36, 1] }}
          className="text-center font-poppins font-light text-white"
          style={{
            fontSize: 'clamp(48px, 9.5vw, 8rem)',
            lineHeight: 0.95,
            letterSpacing: '-0.04em',
          }}
        >
          <span className="block">Diseña tu sistema.</span>
          <span className="shiny-text block" style={{ fontWeight: 500 }}>Crea tu mundo.</span>
        </motionTop.h1>

        {/* Subtext */}
        <motionTop.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.55, ease: [0.22, 1, 0.36, 1] }}
          className="mt-8 mx-auto max-w-2xl text-center font-mont text-white/55 text-base md:text-lg"
          style={{ lineHeight: 1.65 }}
        >
          Un ecosistema creativo que integra productividad, música y estilo de vida
          para ayudarte a organizar ideas, crear sin límites y ejecutar con claridad.
        </motionTop.p>

        {/* Buttons */}
        <motionTop.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.7, ease: [0.22, 1, 0.36, 1] }}
          className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4"
        >
          <button
            className="group relative px-7 py-4 rounded-full text-sm font-poppins tracking-[0.18em] uppercase text-white transition-transform hover:scale-[1.02] active:scale-[0.98]"
            style={{
              background: 'linear-gradient(135deg, #14B8A6 0%, #0D2B2A 100%)',
              boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.2), 0 14px 40px -8px rgba(20,184,166,0.5)',
            }}
          >
            <span className="flex items-center gap-3">
              Explorar sistemas
              <Icon name="arrow-right" size={16} />
            </span>
          </button>
          <button className="liquid-glass px-7 py-4 rounded-full text-sm font-poppins tracking-[0.18em] uppercase text-white transition-transform hover:scale-[1.02] active:scale-[0.98] flex items-center gap-3">
            <Icon name="play" size={14} />
            Escuchar música
          </button>
        </motionTop.div>

        {/* Sound wave + meta */}
        <motionTop.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 1.2, delay: 1.0 }}
          className="mt-16 max-w-5xl mx-auto"
        >
          <SoundWave bars={80} height={70} intensity={1} />
          <div className="mt-5 flex items-center justify-center gap-5 text-[10px] font-mont tracking-[0.3em] uppercase text-white/40 flex-wrap">
            <span style={{ color: PALETTE.aquaLight }}>00:00</span>
            <span>·</span>
            <span>Now playing</span>
            <span>·</span>
            <span>Live mix 2026</span>
            <span>·</span>
            <span>04:23</span>
          </div>
        </motionTop.div>
      </motionTop.div>
    </section>
  );
}

Object.assign(window, { Navbar, Hero });