// Top navigation — page-aware: swaps links, logo, and CTAs based on which page we're on.
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  // Page detection — matches /sequencing, /sequencing/, or legacy Sequencing.html
  const isSequencing = /\/sequencing\/?$|sequencing\.html$/i.test(window.location.pathname);
  const isHome = !isSequencing;

  const HOME_PAGE = '/';
  const SEQ_PAGE  = '/sequencing';

  // Links adapt per page — anchors point to that page's section IDs.
  const homeLinks = [
    ['Technology', '#technology'],
    ['Assays', '#assays'],
    ['Pricing', '#pricing'],
    ['Quality', '#quality'],
  ];
  const seqLinks = [
    ['How it works', '#how'],
    ['Platforms', '#platforms'],
    ['Pricing', '#bundle'],
    ['Timeline', '#deliverables'],
  ];
  const links = isSequencing ? seqLinks : homeLinks;

  // Logo: NGI on home, NGI+ on sequencing (with the + as a small superscript-ish accent)
  const Logo = () => (
    <a href={isSequencing ? SEQ_PAGE + '#top' : '#top'} style={{
      display: 'flex', alignItems: 'baseline', gap: 2,
      textDecoration: 'none', color: 'var(--ink)',
      flexShrink: 0,
    }}>
      <span className="serif" style={{
        fontFamily: 'var(--serif)',
        fontWeight: 400,
        fontSize: 22,
        letterSpacing: '-0.01em',
        lineHeight: 1,
      }}>NGI</span>
      {isSequencing && (
        <span className="serif" style={{
          fontFamily: 'var(--serif)',
          fontWeight: 400,
          fontSize: 22,
          lineHeight: 1,
          letterSpacing: '-0.01em',
          color: 'var(--accent)',
          marginLeft: 1,
        }}>+</span>
      )}
    </a>
  );

  // Right-side CTAs: primary CTA + Log in.
  // The cross-page link (Add Sequencing / Back to Prep) lives in the center link list.
  const RightCTAs = () => {
    const primary = isSequencing
      ? { href: '#demo', label: 'Get bundled quote' }
      : { href: '#demo', label: 'Request a demo' };

    return (
      <>
        <a href={primary.href} className="btn btn-primary nav-cta" style={{
          padding: '10px 18px', fontSize: 13, whiteSpace: 'nowrap',
        }}>
          {primary.label}
          <span className="arrow"></span>
        </a>
      </>
    );
  };

  // The cross-page link as it appears in the center nav list.
  const CrossPageLink = () => {
    if (isSequencing) {
      return (
        <a href={HOME_PAGE} className="nav-cross" style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 6,
          padding: '7px 12px',
          fontFamily: 'var(--sans)',
          fontSize: 13,
          fontWeight: 450,
          color: 'var(--ink-soft)',
          background: 'transparent',
          border: '1px solid var(--rule)',
          borderRadius: 999,
          textDecoration: 'none',
          whiteSpace: 'nowrap',
          transition: 'all 180ms cubic-bezier(.2,.6,.2,1)',
        }}
        onMouseEnter={e => {
          e.currentTarget.style.borderColor = 'var(--ink)';
          e.currentTarget.style.color = 'var(--ink)';
        }}
        onMouseLeave={e => {
          e.currentTarget.style.borderColor = 'var(--rule)';
          e.currentTarget.style.color = 'var(--ink-soft)';
        }}>
          <span style={{
            fontFamily: 'var(--mono)', fontSize: 14, lineHeight: 1,
          }}>←</span>
          Back to Prep
        </a>
      );
    }

    return (
      <a href={SEQ_PAGE} className="nav-cross" style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 6,
        padding: '7px 12px',
        fontFamily: 'var(--sans)',
        fontSize: 13,
        fontWeight: 500,
        letterSpacing: '-0.005em',
        color: 'var(--ink)',
        background: 'var(--accent-soft)',
        border: '1px solid var(--accent-soft)',
        borderRadius: 999,
        textDecoration: 'none',
        whiteSpace: 'nowrap',
        transition: 'all 180ms cubic-bezier(.2,.6,.2,1)',
      }}
      onMouseEnter={e => {
        e.currentTarget.style.background = 'var(--accent)';
        e.currentTarget.style.color = 'var(--bone)';
        e.currentTarget.style.borderColor = 'var(--accent)';
      }}
      onMouseLeave={e => {
        e.currentTarget.style.background = 'var(--accent-soft)';
        e.currentTarget.style.color = 'var(--ink)';
        e.currentTarget.style.borderColor = 'var(--accent-soft)';
      }}>
        <span style={{
          fontFamily: 'var(--mono)', fontSize: 14, lineHeight: 1, opacity: 0.9,
        }}>+</span>
        Add Sequencing
        <span style={{
          fontFamily: 'var(--mono)',
          fontSize: 9,
          fontWeight: 500,
          letterSpacing: '0.08em',
          textTransform: 'uppercase',
          padding: '2px 6px',
          marginLeft: 2,
          borderRadius: 999,
          background: 'rgba(0,0,0,0.06)',
          color: 'var(--ink-soft)',
          lineHeight: 1,
        }}>Soon</span>
      </a>
    );
  };

  return (
    <>
      <nav className="nav-bar" style={{
        position: 'fixed',
        top: 0, left: 0, right: 0,
        zIndex: 100,
        padding: scrolled ? '14px 32px' : '20px 32px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 16,
        transition: 'all 300ms cubic-bezier(.2,.6,.2,1)',
        backdropFilter: scrolled ? 'blur(14px) saturate(1.2)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(1.2)' : 'none',
        background: scrolled ? 'rgba(242, 238, 230, 0.78)' : 'transparent',
        borderBottom: scrolled ? '1px solid var(--rule-soft)' : '1px solid transparent',
      }}>
        <Logo/>

        {/* Desktop center links — absolutely centered for visual balance */}
        <div className="nav-links" style={{
          position: 'absolute',
          left: '50%',
          top: '50%',
          transform: 'translate(-50%, -50%)',
          display: 'flex',
          alignItems: 'center',
          gap: 28,
          padding: '6px 8px',
          fontFamily: 'var(--sans)',
          fontSize: 13.5,
          fontWeight: 450,
        }}>
          {links.map(([label, href]) => (
            <a key={href} href={href} style={{
              color: 'var(--ink-soft)',
              textDecoration: 'none',
              transition: 'color 200ms',
              whiteSpace: 'nowrap',
            }}
            onMouseEnter={e => e.target.style.color = 'var(--ink)'}
            onMouseLeave={e => e.target.style.color = 'var(--ink-soft)'}>
              {label}
            </a>
          ))}
          <CrossPageLink/>
        </div>

        {/* Right CTA cluster */}
        <div className="nav-right" style={{
          display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0,
        }}>
          <RightCTAs/>
        </div>

        {/* Mobile menu toggle */}
        <button
          aria-label={menuOpen ? "Close menu" : "Open menu"}
          aria-expanded={menuOpen}
          className="nav-toggle"
          onClick={() => setMenuOpen(o => !o)}
          style={{
            display: 'none',
            background: 'transparent',
            border: '1px solid var(--rule)',
            borderRadius: 999,
            padding: '8px 12px',
            cursor: 'pointer',
            color: 'var(--ink)',
            alignItems: 'center',
            gap: 8,
            fontFamily: 'var(--mono)',
            fontSize: 11,
            letterSpacing: '0.06em',
            textTransform: 'uppercase',
          }}>
          <span style={{
            width: 16, height: 10, position: 'relative', display: 'inline-block',
          }}>
            <span style={{
              position: 'absolute', left: 0, right: 0, height: 1.2, background: 'currentColor',
              top: menuOpen ? '50%' : 0,
              transform: menuOpen ? 'translateY(-50%) rotate(45deg)' : 'none',
              transition: 'all 220ms cubic-bezier(.2,.6,.2,1)',
            }}></span>
            <span style={{
              position: 'absolute', left: 0, right: 0, height: 1.2, background: 'currentColor',
              top: '50%', transform: 'translateY(-50%)',
              opacity: menuOpen ? 0 : 1,
              transition: 'opacity 160ms',
            }}></span>
            <span style={{
              position: 'absolute', left: 0, right: 0, height: 1.2, background: 'currentColor',
              bottom: menuOpen ? 'auto' : 0,
              top: menuOpen ? '50%' : 'auto',
              transform: menuOpen ? 'translateY(-50%) rotate(-45deg)' : 'none',
              transition: 'all 220ms cubic-bezier(.2,.6,.2,1)',
            }}></span>
          </span>
          {menuOpen ? 'Close' : 'Menu'}
        </button>
      </nav>

      {/* Mobile drawer */}
      <div
        className="nav-drawer"
        aria-hidden={!menuOpen}
        style={{
          position: 'fixed',
          inset: 0,
          zIndex: 99,
          background: 'var(--bone)',
          padding: '88px 24px 32px',
          display: 'none',
          flexDirection: 'column',
          gap: 0,
          opacity: menuOpen ? 1 : 0,
          pointerEvents: menuOpen ? 'auto' : 'none',
          transform: menuOpen ? 'translateY(0)' : 'translateY(-8px)',
          transition: 'opacity 240ms cubic-bezier(.2,.6,.2,1), transform 240ms cubic-bezier(.2,.6,.2,1)',
        }}>
        {links.map(([label, href], i) => (
          <a
            key={href}
            href={href}
            onClick={() => setMenuOpen(false)}
            style={{
              display: 'flex',
              alignItems: 'baseline',
              justifyContent: 'space-between',
              padding: '24px 4px',
              borderBottom: '1px solid var(--rule-soft)',
              borderTop: i === 0 ? '1px solid var(--rule-soft)' : 'none',
              fontFamily: 'var(--serif)',
              fontSize: 28,
              fontWeight: 380,
              letterSpacing: '-0.02em',
              color: 'var(--ink)',
              textDecoration: 'none',
            }}>
            <span>{label}</span>
            <span className="mono" style={{
              fontSize: 11, color: 'var(--ink-mute)',
              letterSpacing: '0.04em',
            }}>{String(i + 1).padStart(2, '0')}</span>
          </a>
        ))}

        {/* Cross-page link: differs per page */}
        {isSequencing ? (
          <a
            href={HOME_PAGE}
            onClick={() => setMenuOpen(false)}
            style={{
              marginTop: 24,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              padding: '20px 22px',
              background: 'transparent',
              border: '1px solid var(--rule)',
              borderRadius: 14,
              color: 'var(--ink)',
              textDecoration: 'none',
            }}>
            <span style={{
              fontFamily: 'var(--serif)', fontSize: 20, fontWeight: 380, letterSpacing: '-0.02em',
            }}>← Back to Prep</span>
            <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-mute)', letterSpacing: '0.06em' }}>HOME</span>
          </a>
        ) : (
          <a
            href={SEQ_PAGE}
            onClick={() => setMenuOpen(false)}
            style={{
              marginTop: 24,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              padding: '20px 22px',
              background: 'var(--accent-soft)',
              border: '1px solid var(--accent)',
              borderRadius: 14,
              color: 'var(--ink)',
              textDecoration: 'none',
            }}>
            <span style={{
              fontFamily: 'var(--serif)', fontSize: 20, fontWeight: 380, letterSpacing: '-0.02em',
            }}>+ Add Sequencing</span>
            <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-mute)', letterSpacing: '0.06em' }}>SOON</span>
          </a>
        )}

        <a
          href="#demo"
          onClick={() => setMenuOpen(false)}
          className="btn btn-primary"
          style={{
            marginTop: 32,
            justifyContent: 'center',
            padding: '16px 22px',
            fontSize: 14,
          }}>
          {isSequencing ? 'Get bundled quote' : 'Request a quote'}
          <span className="arrow"></span>
        </a>
      </div>

      <style>{`
        @media (max-width: 1180px) {
          .nav-links { gap: 22px !important; }
          .nav-cross { padding: 6px 10px !important; font-size: 12.5px !important; }
        }
        @media (max-width: 1040px) {
          .nav-links { display: none !important; }
        }
        @media (max-width: 900px) {
          .nav-bar { padding: 14px 20px !important; }
          .nav-links, .nav-cta, .nav-right, .nav-login { display: none !important; }
          .nav-toggle { display: inline-flex !important; }
          .nav-drawer { display: flex !important; }
        }
      `}</style>
    </>
  );
};

window.Nav = Nav;