// Nav + Footer + shared bits

function Nav({ route, go }) {
  const links = [
    { id: "home", label: "Home" },
    { id: "about", label: "About" },
    { id: "resume", label: "Resume" },
    { id: "projects", label: "Projects" },
    { id: "blog", label: "Writing" },
    { id: "gallery", label: "Gallery" },
  ];
  return (
    <nav className="nav" data-screen-label="Nav">
      <div className="nav-inner">
        <div className="nav-brand" onClick={() => go("home")}>
          <div className="nav-avatar"><span>S</span></div>
          <div className="nav-name">Satya <em>Dillikar</em></div>
        </div>
        <div className="nav-links">
          {links.map(l => (
            <div
              key={l.id}
              className={"nav-link" + (route === l.id ? " active" : "")}
              onClick={() => go(l.id)}
            >{l.label}</div>
          ))}
        </div>
        <a className="nav-cta" href={window.SITE.links.linkedin} target="_blank" rel="noreferrer">
          Get in touch ↗
        </a>
      </div>
    </nav>
  );
}

function Footer({ go }) {
  const S = window.SITE;
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="footer-inner">
        <div>
          <span className="label">A virtual home</span>
          <div className="sig">Satya <em>Dillikar</em>.</div>
          <div style={{marginTop: 12, fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em'}}>
            © {new Date().getFullYear()} · softbuild.dev
          </div>
        </div>
        <div className="col">
          <span className="label">Elsewhere</span>
          <a href={S.links.linkedin} target="_blank" rel="noreferrer">LinkedIn ↗</a>
          <a href={S.links.github} target="_blank" rel="noreferrer">GitHub ↗</a>
          <a href={S.links.twitter} target="_blank" rel="noreferrer">Twitter ↗</a>
          <a href={S.links.email}>Email ↗</a>
        </div>
        <div className="col">
          <span className="label">Pages</span>
          <a onClick={() => go("home")}>Home</a>
          <a onClick={() => go("about")}>About</a>
          <a onClick={() => go("resume")}>Resume</a>
          <a onClick={() => go("projects")}>Projects</a>
          <a onClick={() => go("blog")}>Writing</a>
          <a onClick={() => go("gallery")}>Gallery</a>
        </div>
      </div>
    </footer>
  );
}

function ConnectStrip() {
  const S = window.SITE;
  const rows = [
    { platform: "LinkedIn",  handle: "satya-dillikar",  href: S.links.linkedin },
    { platform: "GitHub",    handle: "satya-dillikar",  href: S.links.github },
    { platform: "Email",     handle: "satya@softbuild", href: S.links.email },
    { platform: "Twitter",   handle: "SatyaDillikar",   href: S.links.twitter },
  ];
  return (
    <div className="connect-grid">
      {rows.map(r => (
        <a key={r.platform} className="connect-cell" href={r.href} target="_blank" rel="noreferrer">
          <span className="platform">{r.platform}</span>
          <div className="handle">{r.handle}</div>
          <span className="arrow">↗</span>
        </a>
      ))}
    </div>
  );
}

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