/* Layout components: NavBar, Footer, FadeIn, useRoute */
const { useState, useEffect, useRef } = React;

function useRoute() {
  const [route, setRoute] = useState(() =>
    window.location.pathname.replace(/^\//, "") || "home"
  );
  useEffect(() => {
    const onPop = () => setRoute(window.location.pathname.replace(/^\//, "") || "home");
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);
  return [route, (r) => {
    window.history.pushState({}, "", "/" + (r === "home" ? "" : r));
    setRoute(r || "home");
    window.scrollTo({ top: 0, behavior: "instant" });
  }];
}

function NavBar({ route, go }) {
  const isAbout    = ["about", "story", "team", "portfolio"].includes(route);
  const isInvest   = ["investors", "approach", "criteria"].includes(route);
  const isCareers  = ["careers"].includes(route);
  const isContact  = ["contact"].includes(route);

  return (
    <nav className="nav" data-screen-label="Nav">
      <div className="nav-inner">
        <div className="brand" onClick={() => go("home")} role="button" tabIndex={0}>
          <span className="brand-text">Erdem Holdings</span>
        </div>
        <div className="nav-links">
          <div className="nav-dd">
            <span className={"nav-link" + (isAbout ? " active" : "")} onClick={() => go("about")}>About</span>
            <div className="nav-dd-panel">
              <div className="nav-dd-item" onClick={() => go("about")}>
                Story <span className="small">Origin & operating heritage</span>
              </div>
              <div className="nav-dd-item" onClick={() => go("portfolio")}>
                Portfolio <span className="small">Operating footprint & map</span>
              </div>
              <div className="nav-dd-item" onClick={() => go("team")}>
                Team <span className="small">Leadership & analysts</span>
              </div>
            </div>
          </div>
          <div className="nav-dd">
            <span className={"nav-link" + (isInvest ? " active" : "")} onClick={() => go("investors")}>Investors</span>
            <div className="nav-dd-panel">
              <div className="nav-dd-item" onClick={() => go("investors")}>
                Investment Approach <span className="small">Philosophy & process</span>
              </div>
              <div className="nav-dd-item" onClick={() => go("criteria")}>
                Criteria <span className="small">Target profile</span>
              </div>
            </div>
          </div>
          <div className="nav-dd">
            <span className={"nav-link" + (isCareers ? " active" : "")} onClick={() => go("careers")}>Careers</span>
            <div className="nav-dd-panel">
              <div className="nav-dd-item" onClick={() => go("careers")}>
                Open Roles <span className="small">Internships & EA</span>
              </div>
            </div>
          </div>
          <span className={"nav-link" + (isContact ? " active" : "")} onClick={() => go("contact")}>Contact</span>
        </div>
      </div>
    </nav>
  );
}

function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="brand-text" style={{ color: "#f3efe1" }}>Erdem Holdings</div>
            <p className="body" style={{ color: "#a8a397", maxWidth: 320, fontSize: 14, marginTop: 16 }}>
              A U.S. acquisition platform built on a European family operating heritage in service businesses since 2007.
            </p>
          </div>
          <div>
            <h4>About</h4>
            <span className="footer-link" onClick={() => go("about")}>Story</span>
            <span className="footer-link" onClick={() => go("portfolio")}>Portfolio</span>
            <span className="footer-link" onClick={() => go("team")}>Team</span>
          </div>
          <div>
            <h4>Investors</h4>
            <span className="footer-link" onClick={() => go("investors")}>Investment Approach</span>
            <span className="footer-link" onClick={() => go("criteria")}>Criteria</span>
          </div>
          <div>
            <h4>Get in touch</h4>
            <span className="footer-link" onClick={() => go("careers")}>Careers</span>
            <span className="footer-link" onClick={() => go("contact")}>Contact</span>
            <span className="footer-link">contact@erdemholdings.com</span>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2007 Erdem Holdings</span>
          <span>New York</span>
        </div>
      </div>
    </footer>
  );
}

function FadeIn({ children, delay = 0, as = "div", ...rest }) {
  const ref = useRef(null);
  const [vis, setVis] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const check = () => {
      const r = el.getBoundingClientRect();
      const inView = r.top < window.innerHeight && r.bottom > 0;
      if (inView) { setTimeout(() => setVis(true), delay); return true; }
      return false;
    };
    if (check()) return;
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) { setTimeout(() => setVis(true), delay); io.disconnect(); return; }
      }
    }, { threshold: 0 });
    io.observe(el);
    const timer = setTimeout(() => setVis(true), 1200 + delay);
    return () => { io.disconnect(); clearTimeout(timer); };
  }, [delay]);
  const Tag = as;
  return <Tag ref={ref} className={"fade-in" + (vis ? " in" : "") + (rest.className ? " " + rest.className : "")} {...rest}>{children}</Tag>;
}

function PageHeader({ eyebrow, title, lede, screen }) {
  return (
    <section className="section" style={{ paddingTop: 96, paddingBottom: 56 }} data-screen-label={screen}>
      <div className="wrap">
        <div className="kicker" style={{ marginBottom: 24 }}>{eyebrow}</div>
        <h1 className="h-display serif" style={{ maxWidth: "20ch", margin: 0 }}>{title}</h1>
        {lede && <p className="lede" style={{ marginTop: 28, maxWidth: "60ch" }}>{lede}</p>}
      </div>
    </section>
  );
}

function SectionLink({ go, to, label }) {
  return (
    <section className="section" style={{ paddingTop: 0, paddingBottom: 88 }}>
      <div className="wrap" style={{ borderTop: "1px solid var(--rule)", paddingTop: 32 }}>
        <span className="link-arrow" onClick={() => go(to)}>{label} <span className="arr">→</span></span>
      </div>
    </section>
  );
}

Object.assign(window, { useRoute, NavBar, Footer, FadeIn, PageHeader, SectionLink });