/* Nubel site — app shell.
   Direction: Editorial hero, Light theme, Warm copy.
   Accent color is TBD — change --nb-accent in styles/site.css (or override
   --nubel-orange in tokens.css) to swap.
*/
const { useState, useEffect } = React;

// Final copy — warm tone
const copy = {
  sub: "Nubel is a video-first hiring platform for entry-level talent. Answer a few short questions on video, and employers meet the person — not a PDF of you.",
  manifesto: "We started Nubel because hiring broke somewhere along the way. Resumes got longer, decisions got faster, and the people behind them got invisible. So we're building a platform where candidates and companies meet as humans first.",
};

// Nav
const Nav = () => (
  <header className="nb-nav">
    <div className="nb-wrap nb-nav-inner">
      <a href="#" style={{display:"flex", alignItems:"center", gap:10}}>
        <img src="./assets/nubel-logo-full-hires.png" alt="nubel" style={{height:24}}/>
      </a>
      <nav className="nb-nav-links">
        <a href="#how">How it works</a>
        <a href="#fields">Fields</a>
        <a href="#about">About</a>
        <a href="#employers">For employers</a>
      </nav>
      <a href="https://app.nubel.ca/how-it-works" className="btn btn-primary btn-sm">
        Join pilot <Icon name="arrow" size={12} stroke={2.4}/>
      </a>
    </div>
  </header>
);

const App = () => (
  <>
    <Nav/>
    <main>
      <HeroA copy={copy}/>
      <Manifesto copy={copy}/>
      <div id="how"><HowItWorks/></div>
      <div id="fields"><Fields/></div>
      <div id="employers"><ForEmployers/></div>
      <About/>
      <FinalCTA/>
    </main>
    <Footer/>
  </>
);

window.App = App;