// Shared primitives for vladtudor.com
const { useState, useEffect, useMemo, useRef } = React;

function Placeholder({ label, ratio, style, className }) {
  const inline = { ...(style || {}) };
  if (ratio) inline.aspectRatio = ratio;
  return (
    <div className={"placeholder " + (className || "")} style={inline}>
      <span className="placeholder__label">{label}</span>
    </div>);

}

function Photo({ src, alt, ratio, style, className, position }) {
  const inline = { overflow: "hidden", ...(style || {}) };
  if (ratio) inline.aspectRatio = ratio;
  return (
    <div className={"photo " + (className || "")} style={inline}>
      <img
        src={src}
        alt={alt || ""}
        loading="lazy"
        style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: position || "center", display: "block" }} />
      
    </div>);

}

function VideoLoop({ src, ratio, style, className, poster }) {
  const inline = { overflow: "hidden", background: "var(--bg-soft)", ...(style || {}) };
  if (ratio) inline.aspectRatio = ratio;
  return (
    <div className={"photo " + (className || "")} style={inline}>
      <video
        src={src}
        autoPlay
        muted
        loop
        playsInline
        preload="metadata"
        poster={poster}
        style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      
    </div>);

}

function Eyebrow({ children }) {
  return <span className="eyebrow" data-comment-anchor="e4ad4660fa-span-49-10">{children}</span>;
}

function Btn({ kind = "primary", href, children, onClick }) {
  const cls = "btn btn--" + kind;
  if (href) {
    const isExternal = /^https?:\/\//.test(href) || /^mailto:/.test(href);
    const handleInternalClick = (e) => {
      e.preventDefault();
      history.pushState({}, "", href);
      window.dispatchEvent(new PopStateEvent("popstate"));
      window.scrollTo({ top: 0, behavior: "instant" });
      if (onClick) onClick(e);
    };
    return (
      <a
        className={cls}
        href={href}
        onClick={isExternal ? onClick : handleInternalClick}
        target={isExternal ? "_blank" : undefined}
        rel={isExternal ? "noopener" : undefined}>
        {children} <span className="btn__arrow">→</span>
      </a>);

  }
  return (
    <button className={cls} onClick={onClick}>
      {children} <span className="btn__arrow">→</span>
    </button>);

}

function SectionHead({ label, title, children }) {
  return (
    <div className={"section__head " + (label ? "" : "section__head--centered")}>
      {label && <div className="section__label">{label}</div>}
      <div>
        <h2 className="section__title">{title}</h2>
        {children}
      </div>
    </div>);

}

function Status({ text }) {
  return (
    <span className="status">
      <span className="status__dot"></span>
      {text}
    </span>);

}

function Nav({ page, setPage, copy }) {
  const n = copy.nav;
  const [isOpen, setIsOpen] = useState(false);

  const links = [
  { id: "sapio", label: n.sapio, href: "https://sapio.ro", external: true },
  { id: "workshops", label: n.workshops },
  { id: "media", label: n.media },
  { id: "work", label: n.cv }];

  // Close overlay on route change
  useEffect(() => {
    const close = () => setIsOpen(false);
    window.addEventListener("popstate", close);
    return () => window.removeEventListener("popstate", close);
  }, []);

  // Body scroll lock while overlay is open
  useEffect(() => {
    document.body.style.overflow = isOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [isOpen]);

  // Escape key closes overlay
  useEffect(() => {
    if (!isOpen) return;
    const onKey = (e) => { if (e.key === "Escape") setIsOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [isOpen]);

  const handleInternalNav = (e, id) => {
    e.preventDefault();
    setPage(id);
    setIsOpen(false);
  };

  return (
    <React.Fragment>
      <nav className="nav">
        <div className="page">
          <div className="nav__inner">
            <a className="brand" href="/" onClick={(e) => { e.preventDefault(); setPage("home"); setIsOpen(false); }}>
              <span className="brand__dot"></span>
              <span>Vlad Tudor</span>
            </a>
            <div className="nav__links">
              {links.map((l) =>
              l.external ?
              <a
                key={l.id}
                href={l.href}
                target="_blank"
                rel="noopener"
                className="nav__link">
                {l.label} <span aria-hidden="true" style={{ opacity: 0.6 }}>↗</span>
              </a> :
              <a
                key={l.id}
                href={"/" + l.id}
                className={"nav__link " + (page === l.id ? "nav__link--active" : "")}
                onClick={(e) => { e.preventDefault(); setPage(l.id); }}>
                {l.label}
              </a>
              )}
            </div>
            <div className="nav__right">
              <a className="nav__link" href="https://www.linkedin.com/in/vlad-tudor-18090a1a2" target="_blank" rel="noopener" style={{ fontFamily: "var(--font-mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em" }}>
                Get in touch ↗
              </a>
              <button
                className="nav__burger"
                aria-label={isOpen ? "Close menu" : "Open menu"}
                aria-expanded={isOpen}
                onClick={() => setIsOpen((o) => !o)}>
                <span className="nav__burger__bar"></span>
                <span className="nav__burger__bar"></span>
                <span className="nav__burger__bar"></span>
              </button>
            </div>
          </div>
        </div>
      </nav>

      <div className={"nav__overlay" + (isOpen ? " is-open" : "")} aria-hidden={!isOpen}>
        {links.map((l) =>
          l.external ?
          <a
            key={l.id}
            href={l.href}
            target="_blank"
            rel="noopener"
            className="nav__overlay-link"
            onClick={() => setIsOpen(false)}>
            {l.label}
            <span className="nav__overlay-arrow" aria-hidden="true">↗</span>
          </a> :
          <a
            key={l.id}
            href={"/" + l.id}
            className={"nav__overlay-link" + (page === l.id ? " nav__overlay-link--active" : "")}
            onClick={(e) => handleInternalNav(e, l.id)}>
            {l.label}
            <span className="nav__overlay-arrow" aria-hidden="true">→</span>
          </a>
        )}
        <a
          href="https://www.linkedin.com/in/vlad-tudor-18090a1a2"
          target="_blank"
          rel="noopener"
          className="nav__overlay-link"
          onClick={() => setIsOpen(false)}>
          Get in touch
          <span className="nav__overlay-arrow" aria-hidden="true">↗</span>
        </a>
      </div>
    </React.Fragment>);

}

function Footer({ copy, setPage, lang }) {
  const f = copy.footer;
  const n = copy.nav;
  const year = new Date().getFullYear();
  const copyrightLine = (f.copyright || "").replace(/2026/, year);
  const internal = [
    { id: "workshops", label: n.workshops },
    { id: "media", label: n.media },
    { id: "work", label: n.cv },
  ];
  const external = [
    { label: "LinkedIn", href: "https://www.linkedin.com/in/vlad-tudor-18090a1a2" },
    { label: n.sapio, href: "https://sapio.ro" },
    { label: "ai-aflat.ro", href: "https://ai-aflat.ro" },
  ];

  return (
    <footer className="footer footer--bar">
      <div className="page">
        <div className="footer__bar">
          <a className="brand footer__brand-link" href="/" onClick={(e) => { e.preventDefault(); setPage("home"); }}>
            <span className="brand__dot"></span>
            <span>Vlad Tudor</span>
          </a>

          <nav className="footer__links" aria-label="Site">
            {internal.map((l) => (
              <a key={l.id} href={"/" + l.id} onClick={(e) => { e.preventDefault(); setPage(l.id); }}>
                {l.label}
              </a>
            ))}
            <span className="footer__sep" aria-hidden="true">·</span>
            {external.map((l) => (
              <a key={l.label} href={l.href} target="_blank" rel="noopener">
                {l.label} <span aria-hidden="true">↗</span>
              </a>
            ))}
          </nav>

          <div className="footer__meta">
            <span>{copyrightLine}</span>
            <span className="footer__meta-sep" aria-hidden="true">·</span>
            <span>{lang === "ro" ? "București, România" : "Bucharest, Romania"}</span>
          </div>
        </div>
      </div>
    </footer>);

}

// Export to window
Object.assign(window, { Placeholder, Photo, VideoLoop, Eyebrow, Btn, SectionHead, Status, Nav, Footer });