// Reusable presentational components.
const { useState, useEffect, useRef, useMemo } = React;

/* ---------- Monogram ---------- */
function Monogram({ size = 36 }) {
  return (
    <div
      style={{
        width: size, height: size,
        display: "grid", placeItems: "center",
        position: "relative",
      }}
      aria-label="ts monogram"
    >
      <svg viewBox="0 0 40 40" width={size} height={size} style={{ display: "block" }}>
        <defs>
          <linearGradient id="mg" x1="0" x2="1" y1="0" y2="1">
            <stop offset="0" stopColor="#efece4" />
            <stop offset="1" stopColor="#a5a59c" />
          </linearGradient>
        </defs>
        {/* angled bracket frame */}
        <path d="M3 6 L3 3 L14 3" stroke="url(#mg)" strokeWidth="1.4" fill="none" />
        <path d="M37 34 L37 37 L26 37" stroke="url(#mg)" strokeWidth="1.4" fill="none" />
        {/* T */}
        <path d="M8 12 H22 M15 12 V30" stroke="url(#mg)" strokeWidth="2.4" fill="none" strokeLinecap="square" />
        {/* S (geometric) */}
        <path
          d="M32 14 H26 a3 3 0 0 0 0 6 h3 a3 3 0 0 1 0 6 H23"
          stroke="url(#mg)" strokeWidth="2.4" fill="none" strokeLinecap="square"
        />
      </svg>
    </div>
  );
}

/* ---------- Nav ---------- */
const NAV_ITEMS = [
  { id: "home",     label: "Home" },
  { id: "about",    label: "About" },
  { id: "speaking", label: "Speaking" },
  { id: "projects", label: "Projects" },
  { id: "gallery",  label: "Gallery" },
  { id: "watch",    label: "Watch" },
  { id: "buzz",     label: "Buzz" },
  { id: "contact",  label: "Contact" },
];

function Nav({ current, onNav }) {
  return (
    <header
      style={{
        position: "sticky", top: 0, zIndex: 50,
        backdropFilter: "blur(16px) saturate(140%)",
        background: "rgba(7,8,10,0.72)",
        borderBottom: "1px solid var(--line)",
      }}
    >
      <div
        style={{
          maxWidth: 1320, margin: "0 auto",
          padding: "18px 32px",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 24,
        }}
      >
        <button
          onClick={() => onNav("home")}
          style={{
            background: "transparent", border: 0, padding: 0,
            display: "flex", alignItems: "center", gap: 12,
          }}
        >
          <Monogram size={32} />
        </button>

        <nav style={{ display: "flex", alignItems: "center", gap: 4, flexWrap: "wrap" }}>
          {NAV_ITEMS.slice(1).map(item => {
            const active = current === item.id;
            return (
              <button
                key={item.id}
                onClick={() => onNav(item.id)}
                style={{
                  background: "transparent", border: 0,
                  padding: "8px 14px",
                  fontFamily: "var(--mono)",
                  fontSize: 11, letterSpacing: "0.18em",
                  textTransform: "uppercase",
                  color: active ? "var(--ink)" : "var(--ink-mute)",
                  position: "relative",
                  transition: "color 200ms ease",
                }}
                onMouseEnter={(e) => { if (!active) e.currentTarget.style.color = "var(--ink-dim)"; }}
                onMouseLeave={(e) => { if (!active) e.currentTarget.style.color = "var(--ink-mute)"; }}
              >
                {item.label}
                {active && (
                  <span
                    style={{
                      position: "absolute", left: 14, right: 14, bottom: 2,
                      height: 1, background: "var(--accent)",
                    }}
                  />
                )}
              </button>
            );
          })}
        </nav>
      </div>
    </header>
  );
}

/* ---------- Layout ---------- */
function Page({ children, label, title, kicker }) {
  return (
    <main
      style={{
        maxWidth: 1320, margin: "0 auto",
        padding: "72px 32px 120px",
        minHeight: "calc(100vh - 73px)",
      }}
    >
      {label && (
        <div
          style={{
            fontFamily: "var(--mono)",
            fontSize: 11, letterSpacing: "0.22em",
            textTransform: "uppercase",
            color: "var(--accent)",
            marginBottom: 16,
          }}
        >
          {label}
        </div>
      )}
      {title && (
        <h1
          style={{
            fontFamily: "var(--serif)",
            fontWeight: 500,
            fontSize: "clamp(56px, 8vw, 112px)",
            lineHeight: 0.95,
            letterSpacing: "-0.02em",
            margin: "0 0 24px",
          }}
        >
          {title}
        </h1>
      )}
      {kicker && (
        <p
          style={{
            fontFamily: "var(--serif)",
            fontStyle: "italic",
            fontSize: 22,
            color: "var(--ink-dim)",
            margin: "0 0 56px",
            maxWidth: 760,
          }}
        >
          {kicker}
        </p>
      )}
      {children}
    </main>
  );
}

/* ---------- Buttons ---------- */
function Btn({ children, variant = "primary", onClick, href }) {
  const base = {
    fontFamily: "var(--mono)",
    fontSize: 12, letterSpacing: "0.18em",
    textTransform: "uppercase",
    padding: "14px 22px",
    border: 0,
    cursor: "pointer",
    display: "inline-flex", alignItems: "center", gap: 10,
    transition: "transform 180ms ease, background 180ms ease, color 180ms ease",
  };
  const styles = variant === "primary"
    ? { ...base, background: "var(--accent)", color: "#0a0a14" }
    : { ...base, background: "transparent", color: "var(--ink-dim)" };

  const Comp = href ? "a" : "button";
  return (
    <Comp
      href={href} onClick={onClick}
      style={styles}
      onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-1px)"; if (variant !== "primary") e.currentTarget.style.color = "var(--ink)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; if (variant !== "primary") e.currentTarget.style.color = "var(--ink-dim)"; }}
    >
      {children}
    </Comp>
  );
}

/* ---------- Placeholder image ---------- */
function PlaceholderImage({ ratio = "16/9", label = "photo", tone = "ink", fill = false }) {
  const bg = tone === "accent"
    ? "linear-gradient(135deg, oklch(0.66 0.18 275 / 0.18), oklch(0.66 0.18 275 / 0.05))"
    : "linear-gradient(135deg, #1a1d24, #0f1116)";
  return (
    <div
      style={{
        ...(fill ? { width: "100%", height: "100%" } : { aspectRatio: ratio, width: "100%" }),
        background: bg,
        border: "1px solid var(--line)",
        position: "relative",
        overflow: "hidden",
        display: "grid", placeItems: "center",
      }}
    >
      {/* diagonal stripe pattern */}
      <div
        style={{
          position: "absolute", inset: 0,
          backgroundImage:
            "repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,0.018) 18px 19px)",
        }}
      />
      <div
        style={{
          fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.22em",
          textTransform: "uppercase", color: "var(--ink-mute)",
          position: "relative", padding: "4px 10px",
          border: "1px solid var(--line-2)",
        }}
      >
        {label}
      </div>
    </div>
  );
}

Object.assign(window, { Monogram, Nav, Page, Btn, PlaceholderImage, NAV_ITEMS });