// Shared site components for itsguideai.com
// Used by all individual pages (about, projects, blog, project detail, blog post)

const NAV_ITEMS = [
  { href: "index.html", label: "Home", key: "home" },
  { href: "projects.html", label: "Work", key: "work" },
  { href: "blog.html", label: "Writing", key: "writing" },
  { href: "about.html", label: "About", key: "about" },
  { href: "contact.html", label: "Contact", key: "contact" },
];

function SiteHeader({ active }) {
  const [mobileOpen, setMobileOpen] = React.useState(false);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setMobileOpen(false); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, []);

  return (
    <header className="site-header">
      <div className="wrap">
        <a href="index.html" className="brand">
          <span className="dot"></span>
          <span className="brand-name">Guide</span>
          <span className="domain">itsguideai.com</span>
        </a>
        <nav className={`nav${mobileOpen ? " mobile-open" : ""}`}>
          {NAV_ITEMS.filter(n => n.key !== "home").map(n => (
            <a key={n.key} href={n.href}
               className={active === n.key ? "active" : ""}
               onClick={() => setMobileOpen(false)}>
              {n.label}
            </a>
          ))}
        </nav>
        <button
          className={`nav-toggle${mobileOpen ? " open" : ""}`}
          aria-label={mobileOpen ? "Close menu" : "Open menu"}
          onClick={() => setMobileOpen(o => !o)}>
          <span/><span/><span/>
        </button>
      </div>
    </header>
  );
}

function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="wrap">
        <div className="left">
          <span><span style={{color: "var(--accent)"}}>●</span> itsguideai.com</span>
          <span style={{color: "var(--ink-4)"}}>·</span>
          <span>© 2026 Guide</span>
        </div>
        <div className="right">
          <a href="mailto:hello@itsguideai.com" className="lnk">hello@itsguideai.com</a>
          <a href="https://www.linkedin.com/in/pawaridtupmongkol/" target="_blank" rel="noopener" className="lnk footer-social">
            <svg viewBox="0 0 24 24" width="13" height="13" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
            LinkedIn
          </a>
          <a href="https://github.com/guide" target="_blank" rel="noopener" className="lnk footer-social">
            <svg viewBox="0 0 24 24" width="13" height="13" aria-hidden="true"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
            GitHub
          </a>
        </div>
      </div>
    </footer>
  );
}

function CredsStrip() {
  return (
    <div className="creds">
      <span>M.S. Applied AI</span>
      <span className="dot-sep">●</span>
      <span>Anthropic CCA-F Certified</span>
      <span className="dot-sep">●</span>
      <span>Available for new engagements — Q3 2026</span>
    </div>
  );
}

function ProjectCard({ project, onOpen }) {
  return (
    <a href={`project.html?slug=${project.slug}`} className="project-card reveal" onClick={onOpen}>
      <div className="thumb">
        <span>{project.kicker} · screenshot</span>
      </div>
      <div className="body">
        <div className="meta">
          <span>{project.year}</span>
          <span className="sep">/</span>
          <span>{project.kicker}</span>
        </div>
        <h3>{project.title}</h3>
        <p>{project.summary}</p>
        <div className="tags">
          {project.tags.slice(0, 4).map(t => <span key={t} className="tag">{t}</span>)}
        </div>
        <div className="foot">
          <span>Case study</span>
          <span className="arr">View →</span>
        </div>
      </div>
    </a>
  );
}

function PostRow({ post }) {
  const d = new Date(post.date);
  const dateStr = d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
  return (
    <a href={`post.html?slug=${post.slug}`} className="post-row" style={{textDecoration: "none", color: "inherit", display: "grid", gridTemplateColumns: "130px 1fr auto", gap: 32, padding: "28px 0", borderTop: "1px solid var(--line)", alignItems: "baseline"}}>
      <div className="date">{dateStr}</div>
      <div>
        <h3>
          <span className={`kind-badge kind-${post.kind}`}>{post.kind}</span>
          {post.title}
        </h3>
        <p>{post.excerpt}</p>
      </div>
      <div className="read">{post.readTime}</div>
    </a>
  );
}

function ContactCard() {
  return (
    <section className="contact-card">
      <div>
        <div className="eyebrow" style={{color: "rgba(247,243,236,0.6)", marginBottom: 16}}>Let's work together</div>
        <h2>Have an AI problem worth solving?</h2>
        <p>I take on a small number of advisory and build engagements each quarter — typically with teams shipping production agents, or leaders trying to figure out where to start.</p>
      </div>
      <div className="links">
        <a href="mailto:hello@itsguideai.com">
          <span>hello@itsguideai.com</span>
          <span className="icon-badge icon-email" aria-label="Email">
            <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/></svg>
          </span>
        </a>
        <a href="#">
          <span>Book an intro call</span>
          <span className="icon-badge icon-phone" aria-label="Book a call">
            <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
          </span>
        </a>
        <a href="https://www.linkedin.com/in/pawaridtupmongkol/" target="_blank" rel="noopener">
          <span>LinkedIn</span>
          <span className="icon-badge icon-linkedin" aria-label="LinkedIn">
            <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </span>
        </a>
      </div>
    </section>
  );
}

// Scroll reveal with sibling stagger
function setupReveal() {
  const obs = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting) {
        e.target.classList.add("in");
        obs.unobserve(e.target);
      }
    });
  }, { threshold: 0.06, rootMargin: "0px 0px -32px 0px" });

  document.querySelectorAll(".reveal").forEach(el => {
    const siblings = Array.from(el.parentElement?.querySelectorAll(".reveal") ?? []);
    const idx = siblings.indexOf(el);
    if (idx > 0) el.style.setProperty("--reveal-delay", `${idx * 75}ms`);
    obs.observe(el);
  });
}

Object.assign(window, {
  SiteHeader, SiteFooter, CredsStrip, ProjectCard, PostRow, ContactCard, setupReveal, NAV_ITEMS
});