/* Shared UI, exported to window for the page scripts. */
const { useState, useEffect, useRef } = React;

/* ---- tiny inline icons (simple strokes only) ---- */
function Icon({ d, size = 16, sw = 1.6, fill }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill || "none"}
         stroke={fill ? "none" : "currentColor"} strokeWidth={sw}
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {Array.isArray(d) ? d.map((p, i) => <path key={i} d={p} />) : <path d={d} />}
    </svg>
  );
}
const ICONS = {
  arrow: "M5 12h14M13 6l6 6-6 6",
  arrowUpRight: "M7 17 17 7M8 7h9v9",
  mail: ["M3 6h18v12H3z", "m3 7 9 6 9-6"],
  linkedin: ["M6 9v9M6 5.5v.01M10 18v-5a2 2 0 0 1 4 0v5M14 18v-4a3 3 0 0 0-4-2.8"],
  shield: "M12 3l7 3v5c0 4.2-2.8 7.6-7 9-4.2-1.4-7-4.8-7-9V6l7-3z",
  check: "M5 12.5l4.5 4.5L19 7",
  clock: ["M12 7v5l3 2", "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z"],
  menu: "M4 7h16M4 12h16M4 17h16",
};

/* ---- brand mark: personal cyber-cowboy logo ---- */
function BrandMark({ dark }) {
  return (
    <span style={{
      display: "grid", placeItems: "center", flex: "none",
      width: dark ? 40 : 44, height: dark ? 40 : 44,
      borderRadius: dark ? 9 : 0,
      background: dark ? "#fff" : "transparent",
      boxShadow: dark ? "0 1px 3px rgba(0,0,0,0.18)" : "none",
    }}>
      <img src="assets/img/logo.png" alt="Richard Vallejo logo"
        style={{ width: dark ? 34 : 44, height: dark ? 34 : 44, objectFit: "contain", display: "block" }} />
    </span>
  );
}

/* ---- placeholder media ---- */
function Placeholder({ label, dark, style, ratio }) {
  const s = Object.assign({}, style);
  if (ratio) s.aspectRatio = ratio;
  return (
    <div className={"ph" + (dark ? " on-dark" : "")} style={s}>
      <span className="ph-label">{label}</span>
    </div>
  );
}

/* ---- real photo (object-fit cover, fixed aspect) ---- */
function Photo({ src, alt, ratio, position, style }) {
  const wrap = Object.assign({ overflow: "hidden", borderRadius: "var(--radius-lg)", background: "var(--paper-2)" }, style);
  if (ratio) wrap.aspectRatio = ratio;
  return (
    <div style={wrap}>
      <img src={src} alt={alt || ""}
        style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: position || "center", display: "block" }} />
    </div>
  );
}

/* ---- nav ---- */
function Nav({ route, go, dark, tagline }) {
  const links = [
    ["home", "Home"],
    ["about", "About"],
    ["notes", "Field Notes"],
    ["contact", "Contact"],
  ];
  const base = route === "article" ? "notes" : route;
  return (
    <header className={"nav" + (dark ? " on-dark" : "")}>
      <div className="wrap nav-inner">
        <div className="brand" onClick={() => go("home")}>
          <BrandMark dark={dark} />
          <span style={{ lineHeight: 1.05 }}>
            <span className="brand-name" style={{ display: "block" }}>{SITE.name}</span>
            <span className="brand-sub">{tagline || SITE.tagline}</span>
          </span>
        </div>
        <nav className="nav-links">
          {links.filter(([k]) => k !== "contact").map(([k, label]) => (
            <span key={k}
              className={"nav-link" + (base === k ? " active" : "")}
              onClick={() => go(k)}>{label}</span>
          ))}
          <button className="btn btn-primary" style={{ marginLeft: 8 }}
            onClick={() => go("contact")}>
            Contact <Icon d={ICONS.arrow} size={15} />
          </button>
        </nav>
      </div>
    </header>
  );
}

/* ---- footer ---- */
function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 40, alignItems: "start" }}
             className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 16 }}>
              <BrandMark dark />
              <span className="brand-name" style={{ fontSize: 20 }}>{SITE.name}</span>
            </div>
            <p className="serif" style={{ fontSize: 22, lineHeight: 1.25, color: "var(--navy-ink)", margin: "0 0 6px", maxWidth: 340 }}>
              Building resilience.
            </p>
            <p style={{ color: "var(--navy-ink-2)", fontSize: 14, maxWidth: 360 }}>{SITE.bioShort}</p>
          </div>
          <div>
            <p className="eyebrow on-dark" style={{ marginBottom: 14 }}>Navigate</p>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 9 }}>
              {[["home","Home"],["about","About"],["notes","Field Notes"],["contact","Contact"]].map(([k,l]) => (
                <li key={k}><span style={{ cursor: "pointer", color: "var(--navy-ink-2)" }} onClick={() => go(k)}>{l}</span></li>
              ))}
            </ul>
          </div>
          <div>
            <p className="eyebrow on-dark" style={{ marginBottom: 14 }}>Connect</p>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 9 }}>
              <li style={{ display: "flex", alignItems: "center", gap: 9, color: "var(--navy-ink-2)" }}>
                <Icon d={ICONS.mail} size={15} /> {SITE.email}</li>
              <li>
                <a href={SITE.linkedinUrl} target="_blank" rel="noopener" style={{ display: "flex", alignItems: "center", gap: 9, color: "var(--navy-ink-2)", textDecoration: "none" }}>
                  <Icon d={ICONS.linkedin} size={15} /> {SITE.linkedin}</a></li>
            </ul>
          </div>
        </div>
        <div style={{ height: 1, background: "var(--navy-line)", margin: "40px 0 22px" }} />
        <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12, color: "var(--navy-ink-2)", fontSize: 13, fontFamily: "var(--font-mono)" }}>
          <span>© {new Date().getFullYear()} {SITE.name}. All rights reserved.</span>
          <span>Built to defend.</span>
        </div>
      </div>
    </footer>
  );
}

/* ---- section header ---- */
function SectionHead({ eyebrow, title, intro, action }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 20, marginBottom: 38 }}>
      <div style={{ maxWidth: 620 }}>
        {eyebrow && <p className="eyebrow kicker-line" style={{ marginBottom: 16 }}>{eyebrow}</p>}
        <h2 className="display" style={{ fontSize: "clamp(28px, 3.4vw, 40px)", margin: 0 }}>{title}</h2>
        {intro && <p className="lede" style={{ marginTop: 14 }}>{intro}</p>}
      </div>
      {action}
    </div>
  );
}

/* ---- article card (used in lists) ---- */
function ArticleRow({ a, go }) {
  return (
    <article className="article-row" onClick={() => go("article", a.id)}>
      <div className="article-meta" style={{ marginBottom: 4 }}>
        <span>{a.date}</span>
        <span className="article-dot" />
        <span>{a.read} read</span>
        <span className="article-dot" />
        <span style={{ color: "var(--accent-ink)" }}>{a.tags[0]}</span>
      </div>
      <h3 className="article-title">{a.title}</h3>
      <p className="lede" style={{ fontSize: 16, marginTop: 4, maxWidth: 660 }}>{a.dek}</p>
      <span className="link-arrow" style={{ marginTop: 10, fontSize: 14 }}>
        Read note <Icon className="arr" d={ICONS.arrow} size={15} />
      </span>
    </article>
  );
}

function useScrollTop(dep) {
  useEffect(() => { window.scrollTo({ top: 0, behavior: "auto" }); }, [dep]);
}

Object.assign(window, {
  Icon, ICONS, BrandMark, Placeholder, Photo, Nav, Footer, SectionHead, ArticleRow, useScrollTop,
  useState, useEffect, useRef,
});