// Alpha Z · Chrome components
// Nav, Footer, SectionLabel, Button, AppCard, SideIndex, ScrollProgress

function SectionLabel({ children, id }) {
  return (
    <div className="section-label-wrap">
      <div className="section-label-rule"></div>
      <span className="t-label section-label" id={id}>{children}</span>
    </div>
  );
}

function Button({ variant = "primary", href, onClick, children, ariaLabel }) {
  const cls = "btn " + (variant === "primary" ? "btn-primary" : "btn-ghost");
  return (
    <a className={cls} href={href} onClick={onClick} aria-label={ariaLabel}>
      <span>{children}</span>
      <span className="btn-arrow" aria-hidden="true">→</span>
    </a>
  );
}

function Nav({ route }) {
  const onHome = route === "home";
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Close the <details> drawer when a link inside it is tapped.
  const closeDrawer = (e) => {
    const d = e.currentTarget.closest("details");
    if (d) d.removeAttribute("open");
  };

  return (
    <header className={"nav" + (scrolled ? " is-scrolled" : "")}>
      <div className="container-wide nav-inner">
        <a className="nav-logo" href="#/" aria-label="Alpha Z — Home">
          <span className="nav-logo-lockup" role="img" aria-label="Alpha Z"></span>
          <span className="nav-logo-mark" aria-hidden="true"></span>
        </a>

        {/* Desktop nav — hidden below 768px via CSS */}
        <nav className="nav-links" aria-label="Primary">
          <a className="nav-link" href="#/#approach">Approach</a>
          <a className="nav-link" href="#/#applications">Applications</a>
          <a className={"nav-link" + (route === "careers" ? " active" : "")} href="#/careers">Careers</a>
        </nav>

        {/* Mobile nav — native <details> drawer; shown below 768px via CSS */}
        <details className="nav-mobile">
          <summary className="nav-mobile-trigger" aria-label="Open menu">
            <span className="t-label">Menu</span>
            <span className="nav-mobile-bars" aria-hidden="true">
              <span></span><span></span>
            </span>
          </summary>
          <nav className="nav-mobile-panel" aria-label="Mobile">
            <a className="nav-mobile-link" href="#/#approach" onClick={closeDrawer}>Approach</a>
            <a className="nav-mobile-link" href="#/#applications" onClick={closeDrawer}>Applications</a>
            <a className={"nav-mobile-link" + (route === "careers" ? " active" : "")} href="#/careers" onClick={closeDrawer}>Careers</a>
          </nav>
        </details>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container-wide">
        <div className="footer-grid">
          <div className="footer-lockup">
            <span className="footer-lockup-img" role="img" aria-label="Alpha Z"></span>
            <p className="t-body-s" style={{ marginTop: 24, color: "rgba(245,245,240,0.6)", maxWidth: "32ch" }}>
              The decision layer for complex problems. Answers you can derive, reproduce, and verify.
            </p>
          </div>
          <div className="footer-col">
            <h4>Site</h4>
            <ul>
              <li><a href="#/#approach">Approach</a></li>
              <li><a href="#/#applications">Applications</a></li>
              <li><a href="#/careers">Careers</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Resources</h4>
            <ul>
              <li><a href="mailto:contact@alpha-z.io">Contact</a></li>
              <li>
                <a href="https://www.linkedin.com/company/alpha-z-sg/" target="_blank" rel="noopener noreferrer" className="social-link">
                  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2zM8 19H5v-9h3v9zM6.5 8.25A1.75 1.75 0 1 1 8.25 6.5 1.75 1.75 0 0 1 6.5 8.25zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0 0 13 14.19V19h-3v-9h2.9v1.3a3.11 3.11 0 0 1 2.7-1.4c1.55 0 3.36.86 3.36 3.66V19z"/>
                  </svg>
                  <span>LinkedIn</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div className="footer-signature">
          <span className="meta">ALPHA Z · WEBSITE V1.0 · ISSUED MAY 2026 · alpha-z.io</span>
        </div>
      </div>
    </footer>
  );
}

function AppCard({ num, title, desc, slug }) {
  return (
    <a className="app-card" href={`#/applications/${slug}`}>
      <div className="t-label app-card-label">Use case · {num}</div>
      <h3 className="t-h3 app-card-title">{title}</h3>
      <p className="t-body-s app-card-desc">{desc}</p>
      <div className="app-card-cta">
        <span>Open scenario</span>
        <span className="btn-arrow" aria-hidden="true">→</span>
      </div>
    </a>
  );
}

/* Side index — 01..07 with current section highlighted */
function SideIndex({ items, current }) {
  return (
    <nav className="side-index" aria-label="Section index">
      {items.map(item => {
        const isActive = current === item.id;
        return (
          <a key={item.id} href={"#" + item.id} className={isActive ? "active" : ""}>
            <span className="num">{item.num}</span>
            <span className="tick"></span>
            {isActive ? <span className="label">{item.label}</span> : null}
          </a>
        );
      })}
    </nav>
  );
}

/* Scroll progress on right edge */
function ScrollProgress() {
  const [pct, setPct] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      const doc = document.documentElement;
      const max = doc.scrollHeight - window.innerHeight;
      setPct(max > 0 ? Math.min(1, Math.max(0, window.scrollY / max)) : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, []);
  return (
    <>
      <div className="scroll-progress" aria-hidden="true">
        <div className="scroll-progress-bar" style={{ height: (pct * 100) + "%" }}></div>
      </div>
      <div className="scroll-progress-meta">
        {String(Math.round(pct * 100)).padStart(2, "0")} / 100
      </div>
    </>
  );
}

Object.assign(window, { SectionLabel, Button, Nav, Footer, AppCard, SideIndex, ScrollProgress });