// Shared tokens, layout primitives, and content data
// Variant A — Modern Academic

const TOKENS = {
  fontSans: "'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif",
  fontMono: "'JetBrains Mono', ui-monospace, monospace",
  fontSerif: "'Source Serif 4', Georgia, serif",
};

// Persisted, host-editable defaults
const DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#9b1c1c",
  "fontPairing": "inter-mono",
  "density": "regular",
  "darkMode": false
}/*EDITMODE-END*/;

const ACCENT_PRESETS = [
  { id: "crimson", label: "Crimson", value: "#9b1c1c" },
  { id: "ink",     label: "Ink",     value: "#1e3a8a" },
  { id: "forest",  label: "Forest",  value: "#1f4d3a" },
  { id: "amber",   label: "Amber",   value: "#a8590a" },
  { id: "graphite",label: "Graphite",value: "#3a3a3a" },
];

const FONT_PAIRINGS = {
  "inter-mono":   { sans: "'Inter', sans-serif", body: "'Inter', sans-serif", mono: "'JetBrains Mono', ui-monospace, monospace", label: "Inter / JetBrains Mono" },
  "serif-sans":   { sans: "'Inter', sans-serif", body: "'Source Serif 4', Georgia, serif", mono: "'JetBrains Mono', ui-monospace, monospace", label: "Inter + Source Serif" },
  "serif-only":   { sans: "'Source Serif 4', Georgia, serif", body: "'Source Serif 4', Georgia, serif", mono: "'JetBrains Mono', ui-monospace, monospace", label: "Source Serif throughout" },
};

const DENSITY_SCALE = {
  airy:    { padX: 96, padY: 96, gap: 80, sectionPad: 72, lineHeight: 1.7,  bodySize: 16 },
  regular: { padX: 64, padY: 56, gap: 64, sectionPad: 56, lineHeight: 1.6,  bodySize: 15 },
  compact: { padX: 48, padY: 36, gap: 44, sectionPad: 40, lineHeight: 1.55, bodySize: 14.5 },
};

// Theme builder
const buildTheme = (t) => {
  const fp = FONT_PAIRINGS[t.fontPairing] || FONT_PAIRINGS["inter-mono"];
  const d  = DENSITY_SCALE[t.density] || DENSITY_SCALE.regular;
  const dark = !!t.darkMode;
  return {
    accent: t.accent,
    fontSans: fp.sans, fontBody: fp.body, fontMono: fp.mono,
    ...d,
    paper:  dark ? "#0f0f10" : "#fafaf9",
    paper2: dark ? "#16161a" : "#ffffff",
    ink:    dark ? "#ece8e1" : "#1a1a1a",
    body:   dark ? "#cfc8bd" : "#374151",
    muted:  dark ? "#857f76" : "#6b7280",
    line:   dark ? "#252428" : "#e5e7eb",
    lineSoft: dark ? "#1d1c20" : "#eeeae5",
    chip:   dark ? "#1d1c20" : "#f0ece5",
  };
};

// ---------- Layout primitives ----------

const Container = ({ theme, children, style }) => (
  <div style={{
    width: "100%", maxWidth: 1280, margin: "0 auto",
    paddingLeft: theme.padX, paddingRight: theme.padX,
    ...style,
  }}>{children}</div>
);

const Eyebrow = ({ theme, children, color }) => (
  <div style={{
    fontFamily: theme.fontMono, fontSize: 11,
    color: color || theme.muted,
    letterSpacing: "0.12em", textTransform: "uppercase",
  }}>{children}</div>
);

const SectionTitle = ({ theme, kicker, title, lede }) => (
  <div style={{
    display: "grid", gridTemplateColumns: "220px 1fr",
    gap: theme.gap, marginBottom: 36,
  }}>
    <Eyebrow theme={theme}>{kicker}</Eyebrow>
    <div>
      <h2 style={{
        fontFamily: theme.fontSans, fontSize: 28, fontWeight: 500,
        letterSpacing: "-0.015em", margin: 0, marginBottom: lede ? 12 : 0,
        color: theme.ink, lineHeight: 1.2,
      }}>{title}</h2>
      {lede && <p style={{
        fontSize: 17, lineHeight: 1.55, color: theme.body,
        margin: 0, maxWidth: 720, fontFamily: theme.fontBody,
      }}>{lede}</p>}
    </div>
  </div>
);

const Divider = ({ theme }) => (
  <div style={{ borderTop: `1px solid ${theme.line}` }} />
);

// ---------- Nav ----------

const Nav = ({ theme, current, setRoute }) => {
  const items = [
    { id: "home", label: "Home" },
    { id: "research", label: "Research" },
    { id: "writing", label: "Writing" },
    { id: "industry", label: "Industry" },
    { id: "personal", label: "Personal" },
  ];
  return (
    <header style={{
      borderBottom: `1px solid ${theme.line}`,
      background: theme.paper,
      position: "sticky", top: 0, zIndex: 10,
      backdropFilter: "saturate(140%) blur(10px)",
    }}>
      <Container theme={theme} style={{
        display: "flex", alignItems: "baseline", justifyContent: "space-between",
        padding: "20px 0",
      }}>
        <a onClick={() => setRoute("home")} style={{ display: "flex", alignItems: "baseline", gap: 14, textDecoration: "none" }}>
          <div style={{ fontFamily: theme.fontSans, fontWeight: 600, fontSize: 16, color: theme.ink, letterSpacing: "-0.01em" }}>
            Fuad Al Abir
          </div>
          <div style={{ fontFamily: theme.fontMono, fontSize: 10.5, color: theme.muted, letterSpacing: "0.06em", textTransform: "uppercase" }}>
            iSchool · UMD · Fall 2026
          </div>
        </a>
        <nav style={{ display: "flex", gap: 28, fontSize: 14, fontFamily: theme.fontSans }}>
          {items.map((it) => {
            const active = it.id === current;
            return (
              <a key={it.id} onClick={() => setRoute(it.id)}
                 style={{
                   color: active ? theme.ink : theme.muted,
                   textDecoration: "none",
                   borderBottom: active ? `1.5px solid ${theme.accent}` : "1.5px solid transparent",
                   paddingBottom: 3,
                 }}>{it.label}</a>
            );
          })}
          <a href="#cv" onClick={(e) => { e.preventDefault(); setRoute("home"); }}
             style={{ color: theme.muted, textDecoration: "none", paddingBottom: 3 }}>CV</a>
        </nav>
      </Container>
    </header>
  );
};

const Footer = ({ theme }) => (
  <footer style={{ borderTop: `1px solid ${theme.line}`, marginTop: 80 }}>
    <Container theme={theme} style={{
      display: "flex", justifyContent: "space-between", padding: "28px 0",
      fontFamily: theme.fontMono, fontSize: 11, color: theme.muted, letterSpacing: "0.04em",
    }}>
      <div>© 2026 Fuad Al Abir</div>
      <div>Last updated · Apr 2026 · College Park, MD</div>
    </Container>
  </footer>
);

Object.assign(window, {
  TOKENS, DEFAULTS, ACCENT_PRESETS, FONT_PAIRINGS, DENSITY_SCALE,
  buildTheme, Container, Eyebrow, SectionTitle, Divider, Nav, Footer,
});