// sections.jsx — Deep Principles sections (Swiss minimal, v2)

// ── Nav ──────────────────────────────────────────────────────────────────
// Thin top rule. The grid number on the left signals "we take grids
// seriously" without saying it. Brand mark is a single black bar.
function Nav() {
  return (
    <nav className="nav">
      <a href="#top" className="nav__brand">
        <img className="nav__logo" src="assets/deep-principles-mark.svg" alt="" aria-hidden="true" />
        <span className="nav__name">Deep Principles</span>
        <span className="nav__by">/ Nico&nbsp;López</span>
      </a>
      <div className="nav__links">
        <a href="#archive">Archivo</a>
        <a href="#about">Sobre</a>
        <a href="#subscribe" className="nav__cta">
          Suscribirme <span className="arrow" aria-hidden="true">→</span>
        </a>
      </div>
    </nav>);

}

// ── Hero ─────────────────────────────────────────────────────────────────
// Three layouts:
//   index   — big left-aligned headline, mono index column on the right
//   center  — centered headline, form below, minimal chrome
//   split   — headline left, terminal-style sample preview right
// The headline and form are the same in all three; only composition changes.
function Hero({ layout }) {
  return (
    <section id="top" className={"hero hero--" + layout}>
      <HeroEyebrow />
      
      <h1 className="hero__title">
        <em>Construir</em> una carrera, un producto y una mente más clara en la era de la IA.
      </h1>
      <p className="hero__lede" style={{ fontSize: "18.5px", fontWeight: 600 }}>
        Deep Principles es una newsletter para gente de tech que quiere entender cómo cambia el trabajo, el producto y la carrera con la llegada de la IA.
      </p>
      <div className="hero__form-wrap">
        <SubscribeForm id="hero-form" />
        <p className="hero__hint">
          Email, no spam. Cancelas con un clic. No vendo nada.
        </p>
      </div>

      {layout === "index" && <HeroIndex />}
      {layout === "split" && <HeroSample />}
    </section>);

}

function HeroEyebrow() {
  return (
    <div className="eyebrow">
      <span className="eyebrow__num">N° 005</span>
      <span className="eyebrow__sep">/</span>
      <span>Esta semana</span>
      <span className="eyebrow__sep">·</span>
      <span className="eyebrow__live"><i className="dot" />Próxima edición: viernes 20:00</span>
    </div>);

}

// Right column for the "index" layout — looks like a specimen sheet's
// numbered index. Hovering an entry pulls it left a touch.
function HeroIndex() {
  const lines = [
  ["01", "Carrera & búsqueda", "https://nicomlopez.substack.com/p/buscar-trabajo-en-tech-en-2026-que"],
  ["02", "Trabajo en la era AI", "https://nicomlopez.substack.com/p/la-ansiedad-silenciosa-de-la-era"],
  ["03", "Producto & equipos", "https://nicomlopez.substack.com/p/la-ia-escribe-mas-rapido-pero-alguien"]];

  return (
    <aside className="hero-index">
      <div className="hero-index__head">
        <span>Índice</span>
        <span>2026</span>
      </div>
      <ol className="hero-index__list">
        {lines.map(([n, label, url]) =>
        <li key={n}>
            <a className="hero-index__link" href={url} target="_blank" rel="noopener noreferrer">
            <span className="hero-index__n">{n}</span>
            <span className="hero-index__label">{label}</span>
            <span className="hero-index__rule" />
            </a>
          </li>
        )}
      </ol>
      <div className="hero-index__foot">
        <span>Lectura · 7 — 14 min</span>
        <span>Semanal</span>
      </div>
    </aside>);

}

// Right column for the "split" layout — a small terminal window showing
// the kind of voice the newsletter uses. Reinforces the "for developers"
// positioning without resorting to a "</> code" icon trope.
function HeroSample() {
  return (
    <aside className="hero-sample">
      <div className="term">
        <div className="term__bar">
          <span className="term__dots"><i /><i /><i /></span>
          <span className="term__title">deep-principles — 004.md</span>
        </div>
        <pre className="term__body">
{`# Buscar trabajo en Tech en 2026

> Qué haría si necesitara aplicar
> actualmente. El playbook completo —
> no el de hace dos años.

La búsqueda que funcionaba en 2022 hoy
no funciona. La que funcionaba en 2024
ya tampoco. Y lo más incómodo: nadie te
lo dice, porque nadie quiere admitir
que su última entrevista fue antes de
que todo esto cambiara.

Voy a contar lo que veo desde adentro...`}
        </pre>
        <div className="term__foot">
          <span>·  Lectura · 12 min</span>
          <span>12 May  →</span>
        </div>
      </div>
    </aside>);

}

// ── Subscribe form ───────────────────────────────────────────────────────
function SubscribeForm({ id }) {
  const [email, setEmail] = React.useState("");
  const [state, setState] = React.useState("idle"); // idle | err | ok
  const [err, setErr] = React.useState("");
  const inputRef = React.useRef(null);

  const onSubmit = (e) => {
    e.preventDefault();
    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
    if (!ok) {
      setErr("Ese correo no parece válido.");
      setState("err");
      inputRef.current?.focus();
      return;
    }
    setErr("");
    setState("ok");
  };

  if (state === "ok") {
    return (
      <div id={id} className="subscribe subscribe--ok" role="status">
        <span className="ok__mark" aria-hidden="true">✓</span>
        <div className="ok__text">
          <b>Listo.</b> Te escribí a <span className="ok__email">{email}</span> —
          confirma el correo y nos vemos el viernes.
        </div>
      </div>);

  }

  return (
    <form id={id}
    className={"subscribe" + (state === "err" ? " subscribe--err" : "")}
    onSubmit={onSubmit} noValidate>
      <label className="subscribe__lbl" htmlFor={id + "-email"}>
        Email
      </label>
      <input
        id={id + "-email"}
        ref={inputRef}
        className="subscribe__input"
        type="email"
        placeholder="tu@correo.com"
        autoComplete="email"
        value={email}
        onChange={(e) => {setEmail(e.target.value);if (state === "err") setState("idle");}} />
      
      <button className="subscribe__btn" type="submit">
        Suscribirme
        <span className="arrow" aria-hidden="true">→</span>
      </button>
      {state === "err" && <div className="subscribe__err">{err}</div>}
    </form>);

}

// ── About ────────────────────────────────────────────────────────────────
// Two-column "colophon" style. Left is a labels-and-values table; right
// is body copy. Reads like the back matter of a well-made book — not a
// LinkedIn bio.
function About() {
  return (
    <section id="about" className="about">
      <SectionHead num="01" label="Sobre el autor" title="Quién escribe esto" />
      <div className="about__grid">
        <dl className="about__meta">
          <div><dt>Nombre</dt><dd>Nico López</dd></div>
          <div><dt>Base</dt><dd>Buenos Aires</dd></div>
          <div><dt>Día</dt><dd>Tech, producto, IA aplicada</dd></div>
          <div><dt>Años adentro</dt><dd>5+ entre startups y scale-ups</dd></div>
          <div><dt>Escribe sobre</dt><dd>Carrera, IA, trabajo</dd></div>
          <div><dt>Frecuencia</dt><dd>Un artículo, cada viernes</dd></div>
        </dl>
        <div className="about__body">
          <p>Llevo varios años trabajando en tech, entre QA, automatización, producto e inteligencia artificial. Vi de cerca cómo se construyen sistemas reales, cómo se rompen, cómo se testean y cómo muchas veces el problema no es la herramienta, sino la falta de criterio.



Deep Principles es donde escribo sobre eso: IA, foco, carrera técnica, escritura, automatización y construcción de productos reales.



Me interesa menos hablar de la IA como tendencia y más entender qué cambia cuando la usás en serio: cómo trabajamos, cómo aprendemos, cómo pensamos, cómo construimos y qué ansiedad aparece cuando todo parece moverse más rápido de lo que podemos procesar.</p>
          <p>
            Escribo ideas que me hubiera servido leer antes: cuando estaba
            aprendiendo testing, cuando empecé a automatizar, cuando quise
            construir productos propios, cuando sentí que había demasiadas
            herramientas y poca dirección.
          </p>
        </div>
      </div>
    </section>);}
// ── Issues ───────────────────────────────────────────────────────────────
// Strict archive — table-like, mono numbers, big sans titles. Hover
// reveals the dek. No cards. Cards would feel content-marketing-y.
function Issues() {
  return (
    <section id="archive" className="issues">
      <SectionHead num="02" label="Archivo" title="Todas las ediciones" />
      <div className="archive">
        <div className="archive__header" aria-hidden="true">
          <span>N°</span>
          <span>Fecha</span>
          <span>Título</span>
          <span>Sección</span>
        </div>
        <ol className="archive__list">
          {ISSUES.map((it) =>
          <li key={it.n} className="archive__row">
              <a href={it.url} className="archive__link" target="_blank" rel="noopener noreferrer">
                <span className="archive__n">{it.n}</span>
                <span className="archive__date">{it.date}</span>
                <span className="archive__title-col">
                  <span className="archive__t">{it.title}</span>
                  <span className="archive__dek">{it.dek}</span>
                </span>
                <span className="archive__tag">{it.tag}</span>
                <span className="archive__arr" aria-hidden="true">→</span>
              </a>
            </li>
          )}
        </ol>
      </div>
    </section>);

}

// ── Section head (reused) ────────────────────────────────────────────────
function SectionHead({ num, label, title, right }) {
  return (
    <header className="sect-head">
      <div className="sect-head__meta">
        <span className="sect-head__num">§ {num}</span>
        <span className="sect-head__label">{label}</span>
      </div>
      <h2 className="sect-head__title">{title}</h2>
      {right && <div className="sect-head__right">{right}</div>}
    </header>);

}

// ── Footer ───────────────────────────────────────────────────────────────
// Closing CTA lives in the footer — we already showed the form in the
// hero. No giant "Subscribe!" block in the middle; the page earns the
// click by being good, not by repeating itself.
function Footer() {
  return (
    <footer id="subscribe" className="footer">
      <div className="footer__cta">
        <h3 className="footer__h">
          Un artículo. Cada viernes. Sin vueltas.
        </h3>
        <SubscribeForm id="footer-form" />
      </div>
      <div className="footer__rule" />
      <div className="footer__row">
        <span className="footer__brand">
          <img className="footer__logo" src="assets/deep-principles-mark.svg" alt="" aria-hidden="true" />
          <span>Deep Principles — Nico López</span>
        </span>
        <span className="footer__links">
          <a href="https://x.com/nicomlopez4" target="_blank" rel="noopener noreferrer">X(Twitter)</a>
          <a href="https://substack.com/@nicomlopez" target="_blank" rel="noopener noreferrer">Substack</a>
        </span>
      </div>
      <div className="footer__row footer__row--fine">
        <span>© 2026 · Buenos Aires</span>
        <span>v.004 — actualizada los viernes a las 20:00</span>
      </div>
    </footer>);
}

// ── Tweaks UI ────────────────────────────────────────────────────────────
function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Tipografía">
        <TweakRadio
          label="Pareja"
          value={t.typePair}
          options={[
          { value: "tight", label: "Tight" },
          { value: "neue", label: "Neue" },
          { value: "mono", label: "Mono" }]
          }
          onChange={(v) => setTweak("typePair", v)} />
        
      </TweakSection>
      <TweakSection label="Hero">
        <TweakRadio
          label="Layout"
          value={t.heroLayout}
          options={[
          { value: "index", label: "Index" },
          { value: "center", label: "Center" },
          { value: "split", label: "Split" }]
          }
          onChange={(v) => setTweak("heroLayout", v)} />
        
      </TweakSection>
    </TweaksPanel>);

}

Object.assign(window, {
  Nav, Hero, HeroEyebrow, HeroIndex, HeroSample, SubscribeForm,
  About, Issues, SectionHead, Footer, TweaksUI
});