const { useState } = React;

function Nav() {
  return (
    <nav className="sl-nav">
      <div className="sl-nav-inner">
        <a href="#top" className="sl-nav-brand">
          <img src="assets/spice-icon.svg" alt="" className="sl-nav-icon" />
          <span className="sl-nav-wordmark">Spice Labs<sup>™</sup></span>
        </a>
        <div className="sl-nav-links">
          <a href="#work">Work</a>
          <a href="#open-source">Open source</a>
          <a href="#philosophy">Philosophy</a>
        </div>
      </div>
    </nav>
  );
}

function Industries() {
  return (
    <section className="sl-industries">
      <div className="sl-container sl-industries-inner">
        <div className="sl-industries-label">Industries served</div>
        <div className="sl-industries-list">
          <span>Entertainment</span>
          <span>Architecture</span>
          <span>Engineering</span>
          <span>Construction</span>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer className="sl-footer-outro">
      <div className="sl-footer-outro-inner">
        <div>
          <p className="sl-footer-belief">
            We believe the best software <em>gets out of your way</em> — so the people using it can do the work only they can do.
          </p>
          <p className="sl-footer-kicker">
            Every tool we ship starts with a person and a problem. Then the craft. Then, quietly, a better Tuesday.
          </p>
        </div>

        <div className="sl-footer-sig">
          <div>
            <div className="sl-footer-sig-label">Start a conversation</div>
            <a href="tel:+18667147742" className="sl-footer-sig-phone">866.714.SPICE</a>
          </div>
          <a href="https://github.com/SpiceLabsHQ" target="_blank" rel="noopener" className="sl-footer-sig-github">
            github.com/SpiceLabsHQ →
          </a>
        </div>
      </div>

      <div className="sl-footer-mark">
        <div className="sl-footer-mark-inner">
          <img src="assets/spice-wordmark-white.svg" alt="Spice" className="sl-footer-wordmark-big" />
        </div>
      </div>

      <div className="sl-footer-bar-v2">
        <div className="sl-footer-bar-v2-left">
          <span>© {year} Spice Labs, a venture of Spice Holdings</span>
        </div>
        <div className="sl-footer-bar-v2-right">
          <a href="#work">Work</a>
          <span className="sl-footer-dot">·</span>
          <a href="#open-source">Open source</a>
          <span className="sl-footer-dot">·</span>
          <a href="#philosophy">Philosophy</a>
          <span className="sl-footer-dot">·</span>
          <a href="https://github.com/SpiceLabsHQ" target="_blank" rel="noopener">GitHub</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Industries, Footer });