/* Takotasks — shared shell components: TopNav, Footer, page transitions. */

function TopNav({ current = "home", dark = false }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 4);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
  { id: "how-we-work", href: "how-we-work.html", label: "How we work" },
  { id: "active-projects", href: "active-projects.html", label: "Active projects" },
  { id: "contact", href: "contact.html", label: "Contact" }]


  return (
    <nav className={cx("tt-nav", scrolled && "tt-nav--scrolled", dark && "tt-nav--dark")}>
      <div className="tt-container tt-nav__inner">
        <a href="index.html" style={{ borderBottom: "none", textDecoration: "none" }}>
          <Wordmark light={dark} />
        </a>

        <div className="tt-nav__links tt-nav__links--desktop">
          {links.map((l) =>
          <a
            key={l.id}
            href={l.href}
            className={cx("tt-nav__link", current === l.id && "tt-nav__link--active")}
            style={{ textDecoration: "none", borderBottom: "none", color: dark ? "var(--tt-on-dark)" : undefined }}>
            
              {l.label}
            </a>
          )}
        </div>

        <div className="tt-nav__cta">
          <Button variant={dark ? "on-dark" : "primary"} href="contact.html">
            Apply now <Icon name="arrow-right" size={16} />
          </Button>
          <button
            className="tt-nav__burger"
            onClick={() => setOpen((o) => !o)}
            aria-label="Menu"
            style={{
              display: "none",
              border: "none", background: "none",
              cursor: "pointer", padding: 8,
              color: dark ? "var(--tt-on-dark)" : "var(--tt-ink)"
            }}>
            
            <Icon name={open ? "x" : "menu"} size={24} />
          </button>
        </div>
      </div>

      {open &&
      <div className="tt-nav__mobile">
          {links.map((l) =>
        <a key={l.id} href={l.href} className={cx("tt-nav__mobile-link", current === l.id && "is-active")}>
              {l.label}
            </a>
        )}
        </div>
      }

      <style>{`
        .tt-nav__cta { display: flex; align-items: center; gap: 12px; }
        @media (max-width: 768px) {
          .tt-nav__links--desktop { display: none !important; }
          .tt-nav__burger { display: inline-flex !important; }
          .tt-nav__cta .tt-btn { display: none; }
        }
        .tt-nav__mobile {
          position: absolute; top: 72px; left: 0; right: 0;
          background: ${dark ? "var(--tt-surface-dark)" : "var(--tt-canvas)"};
          padding: 24px;
          display: flex; flex-direction: column; gap: 8px;
          border-bottom: 1px solid ${dark ? "rgba(255,255,255,0.1)" : "var(--tt-hairline)"};
        }
        .tt-nav__mobile-link {
          padding: 14px 0;
          font-size: 20px;
          font-family: var(--tt-font-display); font-weight: 500;
          color: ${dark ? "var(--tt-on-dark)" : "var(--tt-ink)"};
          text-decoration: none; border-bottom: none;
        }
        .tt-nav__mobile-link.is-active { color: var(--tt-primary); }
      `}</style>
    </nav>);

}

function Footer() {
  const cols = [
  { h: "Company", links: [
    { t: "How we work", href: "how-we-work.html" },
    { t: "Active projects", href: "active-projects.html" },
    { t: "Contact", href: "contact.html" }]
  },
  { h: "For taskers", links: [
    { t: "Apply for work", href: "contact.html" },
    { t: "How vetting works", href: "how-we-work.html#vetting" },
    { t: "Getting paid", href: "how-we-work.html#payment" },
    { t: "Contact us", href: "contact.html" }]
  }];

  return (
    <footer className="tt-footer">
      <div className="tt-container">
        <div className="tt-footer__grid">
          <div className="tt-footer__brand">
            <Wordmark light />
            <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--tt-on-dark-soft)" }}>
              Real remote work, found for you. We place pre-vetted taskers from the Philippines,
              Kenya and Ecuador in roles that match their skills. Apply once —
              we reach out when the right fit comes up.
            </p>
            <div className="tt-footer-meta">
              <span>Remote-first since 2023</span>
            </div>
          </div>
          {cols.map((c) =>
          <div className="tt-footer__col" key={c.h}>
              <h5>{c.h}</h5>
              <ul>
                {c.links.map((l) => <li key={l.t}><a href={l.href}>{l.t}</a></li>)}
              </ul>
            </div>
          )}
        </div>
        <div className="tt-footer__base">
          <span>© Takotasks {new Date().getFullYear()} · Remote talent, calmly handled.</span>
          <span style={{ display: "flex", gap: 24 }}>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
          </span>
        </div>
      </div>
    </footer>);

}

/* ---------- Marquee ---------- */
function Marquee({ items }) {
  // duplicate items so the loop is seamless
  const repeated = [...items, ...items];
  return (
    <div className="tt-marquee">
      <div className="tt-marquee__track">
        {repeated.map((it, i) =>
        <span key={i} className="tt-marquee__item">
            {it}
            <span className="tt-marquee__star" aria-hidden="true" />
          </span>
        )}
      </div>
    </div>);

}

/* ---------- Page-load fade ---------- */
function PageFade({ children }) {
  const [ready, setReady] = React.useState(false);
  React.useEffect(() => {
    const t = requestAnimationFrame(() => setReady(true));
    return () => cancelAnimationFrame(t);
  }, []);
  // NOTE: opacity-only fade. A `transform` here would create a containing
  // block and trap any `position: fixed` descendant (e.g. the role modal).
  return (
    <div style={{
      opacity: ready ? 1 : 0,
      transition: "opacity 480ms cubic-bezier(0.22, 0.61, 0.36, 1)"
    }}>
      {children}
    </div>);

}

/* ---------- Cursor halo (subtle) ---------- */
function CursorHalo() {
  React.useEffect(() => {
    const halo = document.createElement("div");
    halo.style.cssText = `
      position: fixed; left: 0; top: 0;
      width: 360px; height: 360px;
      pointer-events: none;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(196,30,74,0.10), transparent 60%);
      transform: translate(-50%, -50%);
      transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 240ms;
      z-index: 1; mix-blend-mode: multiply;
      opacity: 0;
    `;
    document.body.appendChild(halo);

    const move = (e) => {
      halo.style.opacity = "1";
      halo.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
    };
    const leave = () => {halo.style.opacity = "0";};
    window.addEventListener("pointermove", move);
    window.addEventListener("pointerleave", leave);
    return () => {
      window.removeEventListener("pointermove", move);
      window.removeEventListener("pointerleave", leave);
      halo.remove();
    };
  }, []);
  return null;
}

window.TopNav = TopNav;
window.Footer = Footer;
window.Marquee = Marquee;
window.PageFade = PageFade;
window.CursorHalo = CursorHalo;