// ============================================================
// NAVBAR + FOOTER
// ============================================================

const NAV_ITEMS = [
{ id: 'home', label: 'Home' },
{ id: 'propfirms', label: 'Prop Firms' },
{ id: 'basics', label: 'Trading Basics' },
{ id: 'about', label: 'About Tyrone' },
{ id: 'member', label: 'Member Area' },
{ id: 'live', label: 'Live Arena', soon: true },
{ id: 'elite', label: 'Elite Plan' }];


const Logo = ({ size = 36 }) =>
<a
  href="#home"
  onClick={(e) => {e.preventDefault();window.__nav('home');}}
  style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: 'inherit' }}
  aria-label="Tyrone Trading — home">
  
    <div className="brand-mark" style={{ ...{
      width: size, height: size, borderRadius: Math.round(size * 0.28),
      background: '#FFFFFF',
      display: 'grid', placeItems: 'center',
      boxShadow: '0 0 14px rgba(183,255,26,0.35), inset 0 1px 0 rgba(255,255,255,0.6), 0 0 0 1px rgba(255,255,255,0.08)',
      position: 'relative',
      overflow: 'hidden'
    }, height: "30px", width: "30px" }}>
      <img src="assets/logo.png" alt="Tyrone Trading"
    style={{ width: '78%', height: '78%', display: 'block', objectFit: 'contain' }} />
    </div>
  </a>;


const Navbar = ({ current, onNav, onLogin, isLoggedIn, user }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobile, setMobile] = React.useState(false);
  const [userMenuOpen, setUserMenuOpen] = React.useState(false);
  const userMenuRef = React.useRef(null);

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

  // Close user menu on outside click / Escape
  React.useEffect(() => {
    if (!userMenuOpen) return;
    const onDocClick = (e) => {
      if (userMenuRef.current && !userMenuRef.current.contains(e.target)) setUserMenuOpen(false);
    };
    const onKey = (e) => { if (e.key === 'Escape') setUserMenuOpen(false); };
    document.addEventListener('mousedown', onDocClick);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDocClick);
      document.removeEventListener('keydown', onKey);
    };
  }, [userMenuOpen]);

  const isAdmin = user?.role === 'admin';
  const visibleItems = isAdmin
    ? [...NAV_ITEMS, { id: 'admin', label: 'Admin', adminOnly: true }]
    : NAV_ITEMS;

  const roleColor = user?.role === 'admin' ? 'acid' : user?.role === 'elite' ? 'gold' : 'cyan';

  // Mobile burger morphs the pill from rounded-full → rounded-xl while open;
  // keep the previous shape briefly after close so the transition feels smooth.
  const [shapeClass, setShapeClass] = React.useState('nav-shape-pill');
  const shapeTimerRef = React.useRef(null);
  React.useEffect(() => {
    if (shapeTimerRef.current) clearTimeout(shapeTimerRef.current);
    if (mobile) {
      setShapeClass('nav-shape-rounded');
    } else {
      shapeTimerRef.current = setTimeout(() => setShapeClass('nav-shape-pill'), 280);
    }
    return () => shapeTimerRef.current && clearTimeout(shapeTimerRef.current);
  }, [mobile]);

  return (
    <header className={`nav ${shapeClass}`}>
      <div className="nav-row">
        <Logo size={28} />

        <nav className="nav-links" aria-label="Primary">
          {visibleItems.map((item) => {
            const active = current === item.id;
            return (
              <a
                key={item.id}
                href={`#${item.id}`}
                className={`nav-link ${active ? 'active' : ''}`}
                onClick={(e) => {e.preventDefault();onNav(item.id);}}>
                <span className="nav-link-roll">
                  <span className="nav-link-text">{item.label}</span>
                  <span className="nav-link-text nav-link-text-hover">{item.label}</span>
                </span>
                {item.soon && <span className="nav-soon">SOON</span>}
                {item.adminOnly && <span className="nav-admin">ADMIN</span>}
                {active && <span className="nav-dot" />}
              </a>);
          })}
        </nav>

        <div className="nav-right">
          {isLoggedIn ?
            <div className="user-menu-wrap" ref={userMenuRef}>
              <button
                className={`btn btn-ghost btn-sm user-menu-trigger ${userMenuOpen ? 'open' : ''}`}
                onClick={() => setUserMenuOpen(o => !o)}
                style={{ paddingRight: 10 }}
                aria-haspopup="menu"
                aria-expanded={userMenuOpen}>
                <div className="user-avatar"><Icon name="user" size={14} /></div>
                <span style={{ marginRight: 6, maxWidth: 120, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {user?.name || 'Member'}
                </span>
                <Icon name="chevDown" size={12} stroke={2.5} />
              </button>

              {userMenuOpen && (
                <div className="user-menu" role="menu">
                  <div className="user-menu-head">
                    <div className="user-menu-avatar"><Icon name="user" size={18} /></div>
                    <div style={{ minWidth: 0, flex: 1 }}>
                      <div className="user-menu-name">{user?.name || 'Member'}</div>
                      <div className="user-menu-email">{user?.email}</div>
                    </div>
                    <span className={`tag ${roleColor}`} style={{ padding: '3px 8px', fontSize: 10, textTransform: 'uppercase' }}>
                      {user?.role}
                    </span>
                  </div>

                  <button className="user-menu-item" role="menuitem"
                          onClick={() => { setUserMenuOpen(false); onNav('member'); }}>
                    <Icon name="layout" size={14} /><span>Member Area</span>
                  </button>

                  {isAdmin && (
                    <button className="user-menu-item" role="menuitem"
                            onClick={() => { setUserMenuOpen(false); onNav('admin'); }}>
                      <Icon name="settings" size={14} /><span>Admin Panel</span>
                    </button>
                  )}

                  <div className="user-menu-divider" />

                  <button className="user-menu-item user-menu-logout" role="menuitem"
                          onClick={() => { setUserMenuOpen(false); onLogin(); }}>
                    <Icon name="arrowUR" size={14} /><span>Logout</span>
                  </button>
                </div>
              )}
            </div>
            :
            <Button variant="ghost" size="sm" onClick={onLogin} icon="arrow">Login</Button>
          }
        </div>

        <button className="nav-burger" onClick={() => setMobile(!mobile)} aria-label="Menu">
          <Icon name={mobile ? 'x' : 'menu'} size={20} />
        </button>
      </div>

      <div className={`nav-mobile-panel ${mobile ? 'is-open' : ''}`}>
        <nav className="nav-mobile-nav">
          {visibleItems.map((item) =>
            <a key={item.id} href={`#${item.id}`}
              className={`nav-mobile-link ${current === item.id ? 'active' : ''}`}
              onClick={(e) => {e.preventDefault();onNav(item.id);setMobile(false);}}>
              {item.label}
              {item.soon && <span className="tag" style={{ padding: '3px 8px', fontSize: 10 }}>SOON</span>}
              {item.adminOnly && <span className="tag acid" style={{ padding: '3px 8px', fontSize: 10 }}>ADMIN</span>}
            </a>
          )}
        </nav>
        <div className="nav-mobile-cta">
          <Button variant="ghost" onClick={onLogin}>Login</Button>
        </div>
      </div>

      <style>{`
        /* ============================================================
           FLOATING PILL NAVBAR — fixed at the top, centered, glass.
           ============================================================ */
        .nav {
          position: fixed;
          top: 22px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 50;
          display: flex; flex-direction: column;
          padding: 10px 18px;
          background: rgba(31, 31, 31, 0.62);
          border: 1px solid #333;
          backdrop-filter: blur(14px) saturate(140%);
          -webkit-backdrop-filter: blur(14px) saturate(140%);
          box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
          transition: border-radius 0s ease-in-out;
          width: auto;
          max-width: calc(100% - 2rem);
        }
        .nav-shape-pill    { border-radius: 999px; }
        .nav-shape-rounded { border-radius: 18px; }

        .nav-row {
          display: flex; align-items: center;
          gap: 26px;
          width: 100%;
        }
        .nav-links {
          display: flex; align-items: center;
          gap: 20px;
        }

        /* Animated slide-up nav link text (two stacked copies, group-hover translate) */
        .nav-link {
          position: relative;
          font-size: 13px;
          font-weight: 500;
          text-decoration: none;
          color: rgba(209, 213, 219, 1);   /* gray-300 */
          display: inline-flex; align-items: center; gap: 6px;
          padding: 4px 6px;
          white-space: nowrap;
          transition: color 0.2s ease;
        }
        .nav-link-roll {
          display: flex; flex-direction: column;
          overflow: hidden;
          height: 20px;
          line-height: 20px;
          transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .nav-link-text {
          color: rgba(209, 213, 219, 1);
        }
        .nav-link-text-hover { color: #ffffff; }
        .nav-link:hover .nav-link-roll {
          transform: translateY(-50%);
        }
        .nav-link.active .nav-link-text { color: #ffffff; }
        .nav-link.active .nav-link-text-hover { color: #ffffff; }
        .nav-dot {
          width: 5px; height: 5px; border-radius: 50%;
          background: var(--acid); box-shadow: 0 0 8px var(--acid-glow);
          animation: pulse-dot 2s infinite;
        }
        @keyframes pulse-dot {
          0%,100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.5; transform: scale(0.7); }
        }
        .nav-soon {
          font-family: 'JetBrains Mono', monospace;
          font-size: 9px;
          letter-spacing: 0.1em;
          padding: 2px 6px;
          border-radius: 999px;
          color: var(--blue);
          background: rgba(90,200,255,0.1);
          border: 1px solid rgba(90,200,255,0.3);
        }
        .nav-admin {
          font-family: 'JetBrains Mono', monospace;
          font-size: 9px;
          letter-spacing: 0.1em;
          padding: 2px 6px;
          border-radius: 999px;
          color: var(--acid);
          background: rgba(183,255,26,0.1);
          border: 1px solid rgba(183,255,26,0.35);
        }
        .nav-right { display: flex; align-items: center; gap: 10px; }
        .user-avatar {
          width: 26px; height: 26px; border-radius: 50%;
          background: rgba(183,255,26,0.18);
          color: var(--acid);
          display: grid; place-items: center;
        }
        .user-menu-wrap { position: relative; }
        .user-menu-trigger svg:last-child {
          transition: transform 0.18s;
        }
        .user-menu-trigger.open svg:last-child { transform: rotate(180deg); }
        .user-menu {
          position: absolute;
          top: calc(100% + 8px);
          right: 0;
          min-width: 260px;
          padding: 8px;
          background: rgba(10,10,10,0.96);
          border: 1px solid var(--line-2);
          border-radius: 16px;
          box-shadow: 0 24px 60px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.04);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          z-index: 60;
          animation: user-menu-in 0.18s cubic-bezier(.2,.7,.2,1);
        }
        @keyframes user-menu-in {
          from { opacity: 0; transform: translateY(-6px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        .user-menu-head {
          display: flex; align-items: center; gap: 10px;
          padding: 12px 12px 14px;
          border-bottom: 1px solid var(--line);
          margin-bottom: 6px;
        }
        .user-menu-avatar {
          width: 36px; height: 36px; border-radius: 50%;
          background: rgba(183,255,26,0.14);
          color: var(--acid);
          display: grid; place-items: center;
          flex-shrink: 0;
        }
        .user-menu-name {
          font-size: 13px; font-weight: 600;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .user-menu-email {
          font-family: 'JetBrains Mono', monospace;
          font-size: 11px; color: var(--text-mute);
          margin-top: 2px;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .user-menu-item {
          display: flex; align-items: center; gap: 10px;
          width: 100%;
          padding: 10px 12px;
          background: transparent;
          border: none;
          border-radius: 10px;
          color: var(--text-dim);
          font-family: inherit; font-size: 13px; font-weight: 500;
          cursor: pointer; text-align: left;
          transition: background 0.18s, color 0.18s;
        }
        .user-menu-item:hover { background: rgba(255,255,255,0.05); color: var(--text); }
        .user-menu-item svg { flex-shrink: 0; opacity: 0.7; }
        .user-menu-item:hover svg { opacity: 1; }
        .user-menu-divider {
          height: 1px; margin: 6px 4px;
          background: var(--line);
        }
        .user-menu-logout { color: #F87171; }
        .user-menu-logout:hover {
          background: rgba(244,63,94,0.08);
          color: #FF8585;
        }
        .nav-right { display: flex; align-items: center; gap: 10px; margin-left: 4px; }

        .nav-burger {
          display: none;
          background: transparent;
          border: none;
          color: rgba(209, 213, 219, 1);
          width: 32px; height: 32px;
          border-radius: 8px;
          cursor: pointer;
          align-items: center;
          justify-content: center;
        }
        .nav-burger:hover { color: #fff; }

        /* Mobile panel — inside the same header, animates open/close */
        .nav-mobile-panel {
          width: 100%;
          max-height: 0;
          opacity: 0;
          overflow: hidden;
          pointer-events: none;
          transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
          padding-top: 0;
        }
        .nav-mobile-panel.is-open {
          max-height: 700px;
          opacity: 1;
          pointer-events: auto;
          padding-top: 14px;
        }
        .nav-mobile-nav {
          display: flex; flex-direction: column;
          align-items: stretch; gap: 6px;
        }
        .nav-mobile-link {
          padding: 10px 14px;
          color: rgba(209, 213, 219, 1);
          text-decoration: none;
          border-radius: 10px;
          font-size: 14px;
          font-weight: 500;
          display: flex; justify-content: space-between; align-items: center;
          transition: background 0.2s, color 0.2s;
        }
        .nav-mobile-link:hover { background: rgba(255,255,255,0.05); color: #fff; }
        .nav-mobile-link.active { color: var(--acid); background: rgba(183,255,26,0.05); }
        .nav-mobile-cta {
          margin-top: 12px;
          display: flex;
          justify-content: stretch;
        }
        .nav-mobile-cta > * { flex: 1; }

        /* User menu position — anchor to button container */
        .user-menu-wrap { position: relative; }

        /* Responsive — under 980px, hide nav links + show burger */
        @media (max-width: 980px) {
          .nav-links { display: none; }
          .nav-right { display: none; }
          .nav-burger { display: inline-flex; }
          .nav { padding: 8px 14px; width: calc(100% - 2rem); }
        }
        @media (min-width: 981px) {
          .nav-burger { display: none; }
        }
      `}</style>
    </header>);

};

// ============================================================
// FOOTER
// ============================================================
const Footer = ({ onNav }) =>
<footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <Logo size={42} />
          <p style={{ marginTop: 18, maxWidth: 320, fontSize: 14, color: 'var(--text-mute)' }}>
            Trading real, payout-uri transparente. Comunitate românească dedicată NASDAQ futures și prop firms.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
            <a href="#" className="footer-social" aria-label="Discord"><Icon name="discord" size={18} /></a>
            <a href="#" className="footer-social" aria-label="YouTube"><Icon name="youtube" size={18} /></a>
            <a href="#" className="footer-social" aria-label="Email"><Icon name="mail" size={18} /></a>
          </div>
        </div>

        <div>
          <div className="footer-title">Navigation</div>
          {NAV_ITEMS.map((i) =>
        <a key={i.id} className="footer-link" href={`#${i.id}`}
        onClick={(e) => {e.preventDefault();onNav(i.id);}}>
              {i.label}
            </a>
        )}
        </div>

        <div>
          <div className="footer-title">Resources</div>
          <a className="footer-link" href="#">Apex Trader Funding</a>
          <a className="footer-link" href="#">Tradeify</a>
          <a className="footer-link" href="#">FundedNext</a>
          <a className="footer-link" href="#">FN Markets</a>
          <a className="footer-link" href="#">Free Discord</a>
        </div>

        <div>
          <div className="footer-title">Legal</div>
          <a className="footer-link" href="#">Termeni și condiții</a>
          <a className="footer-link" href="#">Privacy Policy</a>
          <a className="footer-link" href="#">Risk Disclaimer</a>
          <a className="footer-link" href="#">Contact</a>
        </div>
      </div>

      <div className="footer-bottom">
        <div className="footer-disclaimer">
          <Icon name="warn" size={14} style={{ flexShrink: 0, marginTop: 2, color: 'var(--text-mute)' }} />
          <span>
            Trading-ul și prop firm-urile implică risc. Informațiile de pe acest site sunt strict educaționale și nu reprezintă sfat financiar. Rezultatele anterioare nu garantează rezultate viitoare.
          </span>
        </div>
        <div className="footer-meta">
          <span>© 2026 Tyrone Trading. All rights reserved.</span>
          <span className="mono" style={{ color: 'var(--text-faint)' }}>v.2026.05</span>
        </div>
      </div>
    </div>
    <style>{`
      .footer {
        margin-top: 100px;
        padding: 80px 0 40px;
        border-top: 1px solid var(--line);
        background: linear-gradient(180deg, transparent, rgba(0,0,0,0.5));
        position: relative;
      }
      .footer::before {
        content: ''; position: absolute; top: -1px; left: 25%; right: 25%; height: 1px;
        background: linear-gradient(90deg, transparent, var(--acid), transparent);
        opacity: 0.4;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
        gap: 50px;
        margin-bottom: 64px;
      }
      .footer-title {
        font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
        color: var(--text-mute); margin-bottom: 18px; font-family: 'JetBrains Mono', monospace;
      }
      .footer-link {
        display: block; padding: 6px 0;
        color: var(--text-dim); text-decoration: none; font-size: 14px;
        transition: color 0.2s, transform 0.2s;
      }
      .footer-link:hover { color: var(--acid); transform: translateX(3px); }
      .footer-social {
        width: 38px; height: 38px; border-radius: 12px;
        background: rgba(255,255,255,0.04);
        border: 1px solid var(--line);
        color: var(--text-dim);
        display: grid; place-items: center;
        transition: all 0.2s;
      }
      .footer-social:hover {
        color: var(--acid); border-color: var(--acid);
        background: rgba(183,255,26,0.08);
        transform: translateY(-2px);
      }
      .footer-bottom {
        border-top: 1px solid var(--line);
        padding-top: 28px;
        display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap;
      }
      .footer-disclaimer {
        max-width: 720px; font-size: 12px; color: var(--text-mute); line-height: 1.6;
        display: flex; gap: 10px;
      }
      .footer-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-mute); white-space: nowrap; }
      @media (max-width: 880px) {
        .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
      }
    `}</style>
  </footer>;


Object.assign(window, { Navbar, Footer, Logo, NAV_ITEMS });