// app.jsx — Margen newsletter landing (Swiss minimal, v2)
// Audience: tech/developers. Voice: opinionated, conversational.
// Aesthetic: strict grid, sans-serif, white, single accent, mono labels.
//
// Two tweak dimensions only — typography pair and hero layout. No palette
// shuffling, no invented metrics, no testimonial wall.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "typePair": "tight",
  "heroLayout": "index"
}/*EDITMODE-END*/;

// Pairings tuned for tech editorial. "Tight" is the default Swiss look;
// "neue" leans Akzidenz / Helvetica via system Helvetica-Neue; "mono"
// commits hard to a terminal-zine feel for the loud option.
const TYPE_PAIRS = {
  tight: {
    display: "'Inter Tight', sans-serif",
    body:    "'Inter Tight', sans-serif",
    mono:    "'JetBrains Mono', monospace",
    displayWeight: 600,
    displayTracking: "-0.03em",
  },
  neue: {
    display: "'Helvetica Neue', Helvetica, Arial, sans-serif",
    body:    "'Helvetica Neue', Helvetica, Arial, sans-serif",
    mono:    "'JetBrains Mono', monospace",
    displayWeight: 700,
    displayTracking: "-0.025em",
  },
  mono: {
    display: "'JetBrains Mono', monospace",
    body:    "'Inter Tight', sans-serif",
    mono:    "'JetBrains Mono', monospace",
    displayWeight: 600,
    displayTracking: "-0.04em",
  },
};

// ── Sample data ──────────────────────────────────────────────────────────
// Top four are real posts the author wrote — kept their titles verbatim.
// The rest extend the same axes (búsqueda de trabajo / carrera / ansiedad
// del trabajo con IA / el "quilombo" humano detrás de la productividad de
// la IA) so the archive reads as one consistent voice.
const ISSUES = [
  { n: "004", date: "2026-05-12", title: "Buscar trabajo en Tech en 2026: ¿qué haría si necesitara aplicar actualmente?", dek: "El playbook completo que usaría hoy — no el de hace dos años. Qué cambió, qué dejó de funcionar, y dónde están las puertas que nadie está mirando.", tag: "Carrera", min: 12, url: "https://nicomlopez.substack.com/p/buscar-trabajo-en-tech-en-2026-que" },
  { n: "003", date: "2026-05-05", title: "Carreras no lineales: por qué los que se mueven mejor terminan ganando en IA", dek: "La carrera lineal era una ficción incluso antes de la IA. Ahora es una desventaja medible. Una defensa larga del zigzag bien diseñado.", tag: "Carrera", min: 11, url: "https://nicomlopez.substack.com/p/carreras-no-lineales-por-que-los" },
  { n: "002", date: "2026-04-28", title: "La ansiedad silenciosa de la era AI", dek: "Nadie te dice que está perdido. Pero si escuchás bien, casi todos lo están. Sobre la sensación nueva de no saber qué se supone que sepas.", tag: "Trabajo", min: 9, url: "https://nicomlopez.substack.com/p/la-ansiedad-silenciosa-de-la-era" },
  { n: "001", date: "2026-04-21", title: "La IA escribe más rápido… pero alguien tiene que bancarse el quilombo después", dek: "El \"10x productivity\" no desaparece — se transfiere. Hablemos del trabajo invisible que aparece cuando la generación es gratis.", tag: "Producto", min: 10, url: "https://nicomlopez.substack.com/p/la-ia-escribe-mas-rapido-pero-alguien" },
];

// ── App root ─────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const pair = TYPE_PAIRS[t.typePair] || TYPE_PAIRS.tight;

  const rootStyle = {
    "--display": pair.display,
    "--body": pair.body,
    "--mono": pair.mono,
    "--display-weight": pair.displayWeight,
    "--display-tracking": pair.displayTracking,
  };

  return (
    <div className="page" style={rootStyle}>
      <Nav />
      <Hero layout={t.heroLayout} />
      <About />
      <Issues />
      <Footer />
      <TweaksUI t={t} setTweak={setTweak} />
    </div>
  );
}

Object.assign(window, { App, TYPE_PAIRS, ISSUES });