// Main app composition + nav + footer
const { useEffect, useState } = React;

function Nav() {
  const [active, setActive] = useState('home');
  const tabs = [
    { id: 'home',       label: 'home'       },
    { id: 'about',      label: 'about'      },
    { id: 'skills',     label: 'skills'     },
    { id: 'projects',   label: 'projects'   },
    { id: 'experience', label: 'work'       },
    { id: 'organizations', label: 'orgs'    },
    { id: 'education',  label: 'education'  },
    { id: 'contact',    label: 'contact'    },
  ];
  useEffect(() => {
    const onScroll = () => {
      let cur = 'home';
      for (const t of tabs) {
        const el = document.getElementById(t.id);
        if (!el) continue;
        const r = el.getBoundingClientRect();
        if (r.top <= 140) cur = t.id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  function go(id, e) {
    e.preventDefault();
    const el = document.getElementById(id);
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.scrollY - 80;
    window.scrollTo({ top: y, behavior: 'smooth' });
  }
  return (
    <nav className="sticky top-3 z-40 px-3 md:px-5">
      <div className="max-w-6xl mx-auto">
        <div className="win flex items-center gap-2 px-3 py-2" style={{borderRadius: 999}}>
          <a href="#home" onClick={(e)=>go('home',e)} className="flex items-center gap-2 pl-2 pr-3" >
            <span className="w-7 h-7 rounded-full flex items-center justify-center text-sm font-bold text-plum" style={{background:'linear-gradient(135deg,#C4B5FD,#FBCFE8,#FED7AA)'}}>Z</span>
            <span className="font-round font-bold text-plum hidden sm:inline">zarrah.os</span>
          </a>
          <div className="flex-1 overflow-x-auto">
            <div className="flex items-center gap-1 px-1">
              {tabs.map(t => (
                <a
                  key={t.id}
                  href={`#${t.id}`}
                  onClick={(e)=>go(t.id, e)}
                  className={`navtab whitespace-nowrap ${active === t.id ? 'active' : ''}`}
                >
                  {t.label}
                </a>
              ))}
            </div>
          </div>
          <a href="mailto:zarrahexekiel@gmail.com" className="hidden md:inline-flex pill pill-primary" style={{padding:'8px 14px', fontSize:13}}>
            say hi ✉
          </a>
        </div>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="max-w-6xl mx-auto px-5 md:px-8 pb-16 pt-6">
      <div className="win px-6 py-5 flex items-center justify-between flex-wrap gap-3">
        <div className="flex items-center gap-3">
          <span className="w-9 h-9 rounded-full flex items-center justify-center font-bold text-plum" style={{background:'linear-gradient(135deg,#C4B5FD,#FBCFE8,#FED7AA)'}}>Z</span>
          <div>
            <div className="font-round font-bold text-plum text-sm">zarrah exekiel cinco valles</div>
            <div className="mono-label">© 2026 · made with ♡ in pasig city</div>
          </div>
        </div>
        <div className="flex items-center gap-2 flex-wrap">
          <a href="https://github.com/zazazzz-exe" target="_blank" rel="noopener noreferrer" className="pill pill-ghost" style={{padding:'8px 14px', fontSize:13}}>github ↗</a>
          <a href="https://www.linkedin.com/in/zarrah-exekiel-valles-596837388/" target="_blank" rel="noopener noreferrer" className="pill pill-ghost" style={{padding:'8px 14px', fontSize:13}}>linkedin ↗</a>
          <a href="mailto:zarrahexekiel@gmail.com" className="pill pill-ghost" style={{padding:'8px 14px', fontSize:13}}>email ✉</a>
        </div>
      </div>
    </footer>
  );
}

function App() {
  return (
    <div data-screen-label="01 Portfolio">
      <Nav />
      <main>
        <Hero />
        <About />
        <Skills />
        <Projects />
        <Experience />
        <Organizations />
        <Education />
        <Contact />
      </main>
      <Footer />
    </div>
  );
}

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