// ReservAI Landing — Navbar responsive (pill + hamburger mobile)
const { useState, useEffect } = React;

const BLUE = '#0983d6';
const LINKS = [
  { label: 'Beneficios',     id: 'beneficios' },
  { label: 'Cómo funciona',  id: 'como-funciona' },
  { label: 'Pruébalo',       id: 'pruebalo' },
  { label: 'Planes',         id: 'precios' },
  { label: 'FAQ',            id: 'faq' },
  { label: 'Contacto',       id: 'contacto' },
];

function useIsMobile() {
  const [m, setM] = React.useState(window.innerWidth < 768);
  React.useEffect(() => {
    const h = () => setM(window.innerWidth < 768);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);
  return m;
}

function Navbar({ onNav }) {
  const [scrolled, setScrolled] = useState(false);
  const [scrollPct, setScrollPct] = useState(0);
  const [hov, setHov] = useState(null);
  const [active, setActive] = useState(null);
  const [menuOpen, setMenuOpen] = useState(false);
  const isMobile = useIsMobile();

  useEffect(() => {
    const el = document.querySelector('#landing-scroll') || window;
    const onScroll = () => {
      const top = el === window ? window.scrollY : el.scrollTop;
      const max = el === window
        ? document.documentElement.scrollHeight - window.innerHeight
        : el.scrollHeight - el.clientHeight;
      setScrolled(top > 30);
      setScrollPct(max > 0 ? (top / max) * 100 : 0);
    };
    el.addEventListener('scroll', onScroll);
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => {
    if (!isMobile) setMenuOpen(false);
  }, [isMobile]);

  const handleNav = (link) => {
    setActive(link.label);
    setMenuOpen(false);
    onNav && onNav(link.id);
  };

  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 100,
      padding: isMobile ? '10px 16px' : (scrolled ? '12px 20px' : '20px 20px'),
      transition: 'padding .35s ease',
      pointerEvents: 'none',
    }}>
      {/* Main pill */}
      <div style={{
        maxWidth: isMobile ? '100%' : (scrolled ? 1100 : 1240),
        margin: '0 auto',
        pointerEvents: 'auto',
        background: scrolled || isMobile ? 'rgba(0,0,0,.95)' : 'rgba(0,0,0,.45)',
        backdropFilter: 'blur(18px)',
        border: `1px solid ${scrolled || isMobile ? 'rgba(9,131,214,.3)' : 'rgba(255,255,255,.09)'}`,
        borderRadius: isMobile ? 18 : (scrolled ? 56 : 22),
        padding: isMobile ? '12px 18px' : (scrolled ? '12px 24px' : '18px 32px'),
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
        transition: 'all .4s cubic-bezier(.4,0,.2,1)',
        boxShadow: scrolled || isMobile ? '0 8px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(9,131,214,.08)' : 'none',
        position: 'relative', overflow: 'hidden',
      }}>
        {/* Progress bar */}
        <div style={{ position:'absolute', bottom:0, left:0, height:2, width:`${scrollPct}%`, background:`linear-gradient(90deg,${BLUE},#00AEEF)`, transition:'width .1s', borderRadius:'0 1px 0 0', pointerEvents:'none' }} />

        {/* Logo */}
        <img src="assets/ReservAI-wordmark.png" alt="ReservAI"
          style={{ height: isMobile ? 30 : (scrolled ? 34 : 42), width: 'auto', transition: 'height .35s ease', flexShrink: 0 }} />

        {isMobile ? (
          /* Hamburger button */
          <button
            onClick={() => setMenuOpen(o => !o)}
            aria-label="Menú"
            style={{
              background: 'transparent', border: 'none', cursor: 'pointer',
              padding: 6, display: 'flex', flexDirection: 'column',
              gap: 4, alignItems: 'center', justifyContent: 'center',
            }}
          >
            <span style={{ display:'block', width:20, height:2, background:'#fff', borderRadius:1, transition:'all .25s', transform: menuOpen ? 'translateY(6px) rotate(45deg)' : 'none' }} />
            <span style={{ display:'block', width:20, height:2, background:'#fff', borderRadius:1, transition:'opacity .25s', opacity: menuOpen ? 0 : 1 }} />
            <span style={{ display:'block', width:20, height:2, background:'#fff', borderRadius:1, transition:'all .25s', transform: menuOpen ? 'translateY(-6px) rotate(-45deg)' : 'none' }} />
          </button>
        ) : (
          <>
            {/* Desktop Links */}
            <div style={{ display: 'flex', alignItems: 'center', gap: scrolled ? 4 : 6 }}>
              {LINKS.map(link => {
                const l = link.label;
                return (
                  <button key={l}
                    onClick={() => handleNav(link)}
                    onMouseEnter={() => setHov(l)}
                    onMouseLeave={() => setHov(null)}
                    style={{
                      background: active === l ? 'rgba(9,131,214,.14)' : hov === l ? 'rgba(255,255,255,.05)' : 'transparent',
                      border: 'none',
                      color: active === l ? '#fff' : hov === l ? '#fff' : 'rgba(255,255,255,.62)',
                      padding: scrolled ? '8px 14px' : '10px 16px',
                      borderRadius: 40,
                      fontWeight: active === l ? 600 : 400,
                      fontSize: scrolled ? '.88rem' : '.95rem',
                      cursor: 'pointer', fontFamily: 'inherit',
                      transition: 'all .2s ease',
                      position: 'relative',
                      display: 'flex', alignItems: 'center', gap: 5,
                    }}>
                    <div style={{
                      width: 5, height: 5, borderRadius: '50%', background: BLUE, flexShrink: 0,
                      opacity: active === l ? 1 : 0,
                      transform: active === l ? 'scale(1)' : 'scale(0)',
                      transition: 'all .25s ease',
                    }} />
                    {l}
                    <div style={{
                      position: 'absolute', bottom: 3, left: 12, right: 12, height: 1.5,
                      background: `linear-gradient(90deg, ${BLUE}, #00AEEF)`,
                      borderRadius: 1,
                      transform: `scaleX(${hov === l && active !== l ? 1 : 0})`,
                      transformOrigin: 'left',
                      transition: 'transform .25s ease',
                    }} />
                  </button>
                );
              })}
            </div>

            {/* Desktop CTA */}
            <button onClick={() => handleNav({ label: 'Contacto', id: 'contacto' })} style={{
              background: BLUE, color: '#fff', border: 'none',
              padding: scrolled ? '11px 22px' : '13px 26px',
              borderRadius: 40, fontWeight: 700,
              fontSize: scrolled ? '.88rem' : '.95rem',
              cursor: 'pointer', transition: 'all .35s ease', fontFamily: 'inherit', flexShrink: 0,
              boxShadow: '0 4px 14px rgba(9,131,214,.35)',
              whiteSpace: 'nowrap',
            }}>Obtener ReservAI</button>
          </>
        )}
      </div>

      {/* Mobile dropdown */}
      {isMobile && menuOpen && (
        <div style={{
          pointerEvents: 'auto',
          background: 'rgba(5,5,5,.98)',
          backdropFilter: 'blur(18px)',
          border: '1px solid rgba(9,131,214,.25)',
          borderRadius: 18,
          padding: '10px 10px 14px',
          marginTop: 8,
        }}>
          {LINKS.map(link => (
            <button key={link.label}
              onClick={() => handleNav(link)}
              style={{
                display: 'block', width: '100%', textAlign: 'left',
                background: 'transparent', border: 'none',
                color: active === link.label ? '#fff' : 'rgba(255,255,255,.75)',
                padding: '13px 16px', borderRadius: 10,
                fontSize: '.95rem', fontWeight: active === link.label ? 600 : 400,
                cursor: 'pointer', fontFamily: 'inherit',
              }}
            >
              {link.label}
            </button>
          ))}
          <div style={{ padding: '6px 6px 0' }}>
            <button
              onClick={() => handleNav({ label: 'Contacto', id: 'contacto' })}
              style={{
                display: 'block', width: '100%', background: BLUE, color: '#fff',
                border: 'none', padding: '14px 16px', borderRadius: 12,
                fontWeight: 700, fontSize: '1rem', cursor: 'pointer', fontFamily: 'inherit',
              }}
            >
              Obtener ReservAI →
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Navbar });