// App root — assembles every section and mounts the Nav

function Nav(){
  return (
    <nav className="nav">
      <a className="logo" href="#top">Excelsa</a>
      <ul>
        <li><a href="#species">Species</a></li>
        <li><a href="#science">Science</a></li>
        <li><a href="#history">History</a></li>
        <li><a href="#farm">Farm</a></li>
        <li><a href="#chemistry">Chemistry</a></li>
        <li><a href="#cupping">Cupping</a></li>
        <li><a href="#map">Origin</a></li>
        <li><a href="#buyers" style={{ color:"var(--copper-hi)" }}>Shop</a></li>
      </ul>
    </nav>
  );
}

function App(){
  return (
    <>
      <Nav/>
      <Hero/>

      {/* marquee transition */}
      <Marquee speed={50} items={[
        "Coffea excelsa",
        "The third species of cultivated coffee",
        "Climate-resilient",
        "Low mycotoxin",
        "Regenerative agroforestry",
        "Excelsa Coffee Co. · est. Sulu",
      ]}/>

      <Species/>
      <Science/>
      <History/>
      <Farm/>
      <Supply/>
      <Chemistry/>
      <Cupping/>
      <Comparison/>
      <Globe/>

      <Marquee dark speed={60} items={[
        "Now pouring →",
        "Quang Tri Highland · 88.00",
        "Batangas Barako · 85.50",
        "Mindanao Wildwood · 87.25",
        "Buyers guide below ↓",
      ]}/>

      <Buyers/>
      <FAQ/>
      <Newsletter/>
      <Footer/>
    </>
  );
}

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