// ============================================================
// GARABATO · Pages — Portfolio / Services / Studio / Journal
//                    / Project / Article / Legal / NotFound
// Datos: window.CONTENT (data/content.js)
// ============================================================

const C = window.CONTENT;
const isLight = (hex) => hex === '#FFD000' || hex === '#FF9800';
const setTitle = (t) => { document.title = t ? `${t} — Garabato` : 'Garabato'; };

// ─────────────────────────────────────────────
// PORTFOLIO
// ─────────────────────────────────────────────
const PortfolioPage = () => {
  const all = C.PROJECTS;
  const cats = ['Todos', ...new Set(all.map(p => p.cat))];
  const [filter, setFilter] = React.useState('Todos');
  const filtered = filter === 'Todos' ? all : all.filter(p => p.cat === filter);

  return (
    <>
      <PageHeader
        eyebrow="Portfolio"
        title={<>{C.PROJECTS.length} sitios.<br/>{C.COUNTRIES.length} países.<br/><em style={{ fontStyle: 'normal', color: 'var(--brand-magenta)' }}>Un solo trazo.</em></>}
        subtitle="Todos están en línea: podés entrar a cada uno. Cada proyecto sale con capacitación, documentación y 30 días de soporte."
        squiggles={[
          { variant: 'ring', color: 'magenta', size: 'xl',  top: '20%', right: '5%',  rotate: -10, float: true },
          { variant: 'hook', color: 'violet',  size: 'lg',  bottom: '15%', right: '20%', rotate: 12 },
          { variant: 'curl', color: 'yellow',  size: 'xxl', bottom: '-15%', left: '-5%', rotate: 8, float: true },
        ]}
      />

      <section className="hp-section hp-section--wide">
        <GarabatoAmbient palette="auto" mode="cross" density="low" opacity={0.4}/>
        <div className="hp-section__inner">
          <div className="pf-filters" role="group" aria-label="Filtrar por disciplina">
            {cats.map(c => (
              <button
                key={c}
                type="button"
                className={`pf-filter ${filter === c ? 'is-active' : ''}`}
                aria-pressed={filter === c}
                onClick={() => setFilter(c)}
              >{c}{c !== 'Todos' && <span style={{ opacity: 0.6, marginLeft: 6 }}>{all.filter(p => p.cat === c).length}</span>}</button>
            ))}
            <div className="pf-filters__count" aria-live="polite">
              Mostrando {filtered.length} de {all.length} proyectos
            </div>
          </div>
          <div className="pf-grid" style={{ marginTop: 40 }}>
            {filtered.map((p, i) => (
              <a key={p.slug} className={`pf-card pf-card--${p.size}`} href={C.projectUrl(p)} style={{ background: p.color }} aria-label={`${p.t}: ${p.cat}`}>
                <div className="pf-card__art">
                  <SquiggleScatter items={[
                    { variant: p.variant, color: p.darkText ? 'ink' : 'yellow', size: 'xxl', top: '15%', left: '20%', rotate: i * 20 },
                    { variant: 'dash', color: p.darkText ? 'ink' : 'magenta', size: 'sm', bottom: '20%', right: '15%', rotate: -8 },
                  ]}/>
                </div>
                <div className="pf-card__meta" style={{ color: p.darkText ? '#0A0A0F' : '#fff' }}>
                  <div className="pf-card__cat">{p.cat}{p.year ? ` · ${p.year}` : ''}</div>
                  <div className="pf-card__title">{p.short || p.t}</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

// ─────────────────────────────────────────────
// SERVICES
// ─────────────────────────────────────────────
const ServicesPage = () => {
  const services = C.SERVICES;
  return (
    <>
      <PageHeader
        bg="yellow"
        eyebrow="Servicios"
        title={<>Cuatro disciplinas.<br/>Un solo trazo.</>}
        subtitle="Tomamos cinco proyectos por trimestre. Nunca más. Por eso cada entrega tiene la cabeza de todo el estudio adentro."
        squiggles={[
          { variant: 'ring', color: 'violet',  size: 'xl', top: '15%', right: '8%',  rotate: 18, float: true },
          { variant: 'curl', color: 'magenta', size: 'xl', bottom: '10%', left: '5%', rotate: -8, float: true },
          { variant: 'hook', color: 'ink',     size: 'md', top: '55%', left: '45%' },
        ]}
      />

      <section className="hp-section">
        <GarabatoAmbient palette="auto" mode="arc" density="low" opacity={0.5}/>
        <div className="hp-section__inner">
          <div className="t-eyebrow" style={{ color: 'var(--fg-muted)' }}>Al vuelo</div>
          <h2 className="t-display-md" style={{ marginTop: 12, maxWidth: 800 }}>
            Cuatro formas de trabajar con nosotros.
          </h2>
          <div className="svc-hero-grid">
            {services.map(s => (
              <a key={s.n} href={`#svc-${s.n}`} className="svc-tile" style={{ borderTop: `6px solid ${s.c}` }}>
                <div className="svc-tile__n" style={{ color: s.c }}>{s.n}</div>
                <div className="svc-tile__title">{s.title}</div>
                <div className="svc-tile__sub">{s.time} · {s.price}</div>
                <Icon name="arrow-down" size={18} color={s.c}/>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="hp-section">
        <div className="hp-section__inner">
          {services.map(s => (
            <article key={s.n} className="svc-detail" id={`svc-${s.n}`}>
              <div className="svc-detail__head">
                <div>
                  <div className="svc-detail__n" style={{ color: s.c }} aria-hidden="true">{s.n}</div>
                  <h3 className="t-display-sm" style={{ marginTop: 8 }}>{s.title}</h3>
                </div>
                <p className="t-body-lg" style={{ color: 'var(--fg-muted)' }}>{s.desc}</p>
              </div>
              <div className="svc-detail__body">
                <div>
                  <div className="t-eyebrow" style={{ color: 'var(--fg-muted)' }}>Qué incluye</div>
                  <ul className="svc-items" style={{ marginTop: 20 }}>
                    {s.items.map(it => (
                      <li key={it}><Icon name="check" size={16} color={s.c}/> {it}</li>
                    ))}
                  </ul>
                </div>
                <div className="svc-specs">
                  <div className="svc-spec__row">
                    <span className="t-caption">Tiempo</span>
                    <span className="t-h4">{s.time}</span>
                  </div>
                  <div className="svc-spec__row">
                    <span className="t-caption">Inversión</span>
                    <span className="t-h4">{s.price}</span>
                  </div>
                  <div className="svc-spec__row">
                    <span className="t-caption">Empieza con</span>
                    <span className="t-label" style={{ textAlign: 'right' }}>{s.starts}</span>
                  </div>
                  <a href="index.html#contact" className="btn btn--lg btn--primary" style={{ justifyContent: 'center', marginTop: 12 }}>
                    Consultar {s.title} <Icon name="arrow-right" size={14}/>
                  </a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="hp-process" id="process" style={{ background: 'var(--brand-violet)' }}>
        <SquiggleScatter items={[
          { variant: 'ring', color: 'yellow',  size: 'xl', top: '15%', right: '10%', rotate: 20 },
          { variant: 'curl', color: 'magenta', size: 'xl', bottom: '15%', left: '5%',  rotate: -8 },
        ]}/>
        <div className="hp-process__inner">
          <div className="t-eyebrow" style={{ color: 'var(--brand-yellow)' }}>Cómo trabajamos</div>
          <h2 className="t-display-lg" style={{ marginTop: 16, color: '#fff', maxWidth: 900 }}>
            Un proceso simple.<br/>Con tiempo para pensar.
          </h2>
          <ol className="hp-process__steps">
            {C.PROCESS.map(s => (
              <li key={s.n} className="hp-process-step">
                <div className="hp-process-step__n" style={{ color: 'var(--brand-yellow)' }} aria-hidden="true">{s.n}</div>
                <div className="t-h2" style={{ marginTop: 12, color: '#fff' }}>{s.t}</div>
                <p className="t-body-lg" style={{ marginTop: 12, color: 'rgba(255,255,255,0.86)', maxWidth: 320 }}>{s.d}</p>
              </li>
            ))}
          </ol>
        </div>
      </section>
    </>
  );
};

// ─────────────────────────────────────────────
// STUDIO
// ─────────────────────────────────────────────
const StudioPage = () => (
  <>
    <PageHeader
      bg="magenta"
      eyebrow="Estudio"
      title={<>Somos ocho.<br/>Y un gato.</>}
      subtitle={`Equipo chico en un mismo estudio de ${C.SITE.neighborhood}, ${C.SITE.city}, con la calma de poder decir que no. Empezamos en ${C.SITE.founded}; seguimos siendo los mismos.`}
      squiggles={[
        { variant: 'ring', color: 'yellow', size: 'xxl', top: '5%',    right: '2%',  rotate: 10 },
        { variant: 'curl', color: 'violet', size: 'xxl', bottom: '-15%', left: '-5%', rotate: -12 },
      ]}
    />

    <section className="hp-section" id="manifesto">
      <GarabatoAmbient palette="auto" mode="corner" density="med" opacity={0.5}/>
      <div className="hp-section__inner">
        <div className="studio-split">
          <div>
            <div className="t-eyebrow" style={{ color: 'var(--brand-magenta)' }}>Manifiesto</div>
            <div className="studio-quote" style={{ marginTop: 32 }}>
              Creemos que el<br/>
              diseño pulido<br/>
              muchas veces es<br/>
              <em style={{ fontStyle: 'normal', color: 'var(--brand-magenta)' }}>diseño cobarde.</em>
            </div>
          </div>
          <div>
            <p className="t-body-lg" style={{ color: 'var(--fg-muted)' }}>
              Preferimos un trazo con carácter a una geometría perfecta. Una decisión incómoda
              a tres opciones correctas. Un sistema que respira a un manual que nadie abre.
            </p>
            <p className="t-body" style={{ color: 'var(--fg-muted)', marginTop: 20 }}>
              Trabajamos con marcas que ya saben lo que quieren decir. No fabricamos personalidad:
              la ayudamos a encontrar su forma.
            </p>
            <p className="t-body" style={{ color: 'var(--fg-muted)', marginTop: 20 }}>
              Y nos tomamos el tiempo que haga falta. Cinco proyectos por trimestre, nunca más.
            </p>
            <div style={{ marginTop: 32 }}>
              <div className="t-caption" style={{ color: 'var(--fg-muted)' }}>Firmado por el equipo · {C.SITE.founded}</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section className="hp-section hp-section--ink50" id="values">
      <div className="hp-section__inner">
        <div className="t-eyebrow" style={{ color: 'var(--fg-muted)' }}>Valores</div>
        <h2 className="t-display-md" style={{ marginTop: 12, marginBottom: 48, maxWidth: 800 }}>
          Tres cosas que no negociamos.
        </h2>
        <div className="studio-values">
          {C.VALUES.map(v => (
            <div key={v.n} className="studio-value">
              <div className="studio-value__n" style={{ color: v.c }} aria-hidden="true">{v.n}</div>
              <h3 className="t-h3">{v.t}</h3>
              <p className="t-body" style={{ color: 'var(--fg-muted)' }}>{v.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    <section className="hp-section" id="team">
      <GarabatoAmbient palette="auto" mode="corner" density="low" opacity={0.4}/>
      <div className="hp-section__inner">
        <div className="t-eyebrow" style={{ color: 'var(--fg-muted)' }}>Equipo</div>
        <h2 className="t-display-md" style={{ marginTop: 12, marginBottom: 48 }}>Ocho personas. Y Pelusa.</h2>
        <ul className="studio-team">
          {C.TEAM.map(p => (
            <li key={p.n}>
              <div className="studio-team__avatar" style={{ background: p.c }} aria-hidden="true">
                {p.pet ? <Icon name="smile" size={42} color="#FFD000"/> : C.initials(p.n)}
              </div>
              <div className="t-label">{p.n}</div>
              <div className="t-caption">{p.r}</div>
            </li>
          ))}
        </ul>
      </div>
    </section>

    <section className="hp-section hp-section--ink50" id="history">
      <GarabatoAmbient palette="auto" mode="cross" density="low" opacity={0.45}/>
      <div className="hp-section__inner">
        <div className="t-eyebrow" style={{ color: 'var(--fg-muted)' }}>Historia</div>
        <h2 className="t-display-md" style={{ marginTop: 12, marginBottom: 48 }}>
          {C.SITE.yearsLabel[0].toUpperCase() + C.SITE.yearsLabel.slice(1)} años. Contados.
        </h2>
        <ol className="studio-timeline-list">
          {C.TIMELINE.map(r => (
            <li key={r.y} className="studio-timeline">
              <div className="studio-timeline__year">{r.y}</div>
              <div className="studio-timeline__body">
                <h3>{r.t}</h3>
                <p>{r.d}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  </>
);

// ─────────────────────────────────────────────
// JOURNAL
// ─────────────────────────────────────────────
const JournalPage = () => {
  const feature = C.ARTICLES.find(a => a.feature) || C.ARTICLES[0];
  const recent = C.ARTICLES.filter(a => a !== feature).slice(0, 3);
  const archive = C.ARTICLES.filter(a => a !== feature).slice(3);

  return (
    <>
      <PageHeader
        eyebrow="Diario"
        title={<>Algo de lo que<br/>pensamos.</>}
        subtitle="Textos cortos y largos del equipo. Sobre proceso, tipografía, cultura de estudio y cosas que aprendimos haciendo proyectos reales."
        squiggles={[
          { variant: 'ring', color: 'violet',  size: 'xl', top: '20%', right: '10%', rotate: 15 },
          { variant: 'dash', color: 'orange',  size: 'sm', bottom: '20%', left: '40%', rotate: -10 },
          { variant: 'curl', color: 'yellow',  size: 'xl', bottom: '-10%', right: '-5%', rotate: -10 },
        ]}
      />

      <section className="hp-section">
        <GarabatoAmbient palette="auto" mode="corner" density="low" opacity={0.5}/>
        <div className="hp-section__inner">
          <div className="t-eyebrow" style={{ color: 'var(--brand-magenta)' }}>Destacado</div>
          <a href={C.articleUrl(feature)} className="jrn-feature">
            <div>
              <div className="t-caption">{feature.cat} · {feature.au} · {feature.time} · <time dateTime={feature.iso}>{feature.date}</time></div>
              <h2 className="t-display-md" style={{ marginTop: 16 }}>{feature.t}</h2>
              <p className="t-body-lg" style={{ color: 'var(--fg-muted)', marginTop: 20 }}>{feature.excerpt}</p>
              <div style={{ marginTop: 32, display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 600 }}>
                Leer el artículo completo <Icon name="arrow-right" size={14}/>
              </div>
            </div>
            <div className="jrn-feature__cover" style={{ background: feature.color }}>
              <SquiggleScatter items={[
                { variant: feature.variant, color: 'yellow', size: 'xxl', top: '20%', left: '25%', rotate: 20 },
                { variant: 'dash', color: 'magenta', size: 'md',  bottom: '15%', right: '15%', rotate: -6 },
              ]}/>
            </div>
          </a>

          <div className="jrn-grid">
            {recent.map(a => (
              <a key={a.slug} href={C.articleUrl(a)} className="hp-journal-card">
                <div className="hp-journal-card__cover" style={{ background: a.color }}>
                  <SquiggleScatter items={[
                    { variant: a.variant, color: isLight(a.color) ? 'ink' : 'yellow', size: 'xl', top: '20%', left: '25%', rotate: 10 },
                    { variant: 'dash', color: 'ink', size: 'sm', bottom: '15%', right: '15%' },
                  ]}/>
                </div>
                <div className="hp-journal-card__body">
                  <div className="t-caption">{a.cat} · {a.au} · {a.time}</div>
                  <h3 className="t-h3" style={{ marginTop: 10 }}>{a.t}</h3>
                  <div className="hp-journal-card__more">Leer <Icon name="arrow-right" size={12}/></div>
                </div>
              </a>
            ))}
          </div>

          <div className="jrn-list" style={{ marginTop: 48 }}>
            <div className="t-eyebrow" style={{ color: 'var(--fg-muted)', marginBottom: 12 }}>Archivo</div>
            {archive.map(a => (
              <a key={a.slug} href={C.articleUrl(a)} className="jrn-list-item">
                <time className="t-caption" style={{ color: 'var(--fg-muted)' }} dateTime={a.iso}>{a.date}</time>
                <div>
                  <div className="t-h4" style={{ marginBottom: 2 }}>{a.t}</div>
                  <div className="t-caption" style={{ color: 'var(--fg-muted)' }}>{a.cat}</div>
                </div>
                <div className="t-caption" style={{ color: 'var(--fg-muted)' }}>por {a.au}</div>
                <Icon name="arrow-right" size={18}/>
              </a>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

// ─────────────────────────────────────────────
// PROJECT (caso de estudio) — project.html?p=slug
// ─────────────────────────────────────────────
const ProjectPage = () => {
  const slug = C.getParam('p');
  const p = C.project(slug);
  React.useEffect(() => { if (p) setTitle(p.t); }, [p]);
  if (!p) return <NotFoundPage what="proyecto" back={{ href: 'portfolio.html', label: 'Ver el portfolio' }}/>;

  const idx = C.PROJECTS.indexOf(p);
  const next = C.PROJECTS[(idx + 1) % C.PROJECTS.length];
  const light = p.darkText;
  const fg = light ? '#0A0A0F' : '#fff';

  return (
    <>
      <PageHeader
        bg={p.color}
        eyebrow={p.year ? `${p.cat} · ${p.year}` : p.cat}
        title={p.t}
        subtitle={p.summary}
        squiggles={[
          { variant: p.variant, color: light ? 'ink' : 'yellow',  size: 'xxl', top: '-4%', right: '-2%', rotate: 12, float: true, opacity: 0.92 },
          { variant: 'dash',    color: light ? 'ink' : 'magenta', size: 'sm',  bottom: '10%', right: '8%', rotate: -8 },
        ]}
      >
        <dl className="prj-meta" style={{ color: fg }}>
          <div><dt>Cliente</dt><dd>{p.client}</dd></div>
          <div><dt>Tipo</dt><dd>{p.cat}</dd></div>
          <div><dt>País</dt><dd>{p.country}</dd></div>
          <div><dt>Sitio</dt><dd><a href={p.url} target="_blank" rel="noopener noreferrer" className="prj-meta__link">{p.url.replace(/^https?:\/\//, '').replace(/\/$/, '')} <Icon name="external" size={14}/></a></dd></div>
        </dl>
        <a href={p.url} target="_blank" rel="noopener noreferrer" className={`btn btn--lg ${light ? 'btn--primary' : 'btn--yellow'}`} style={{ marginTop: 40 }}>
          Visitar el sitio <Icon name="arrow-up-right" size={16}/>
        </a>
      </PageHeader>

      <section className="hp-section">
        <GarabatoAmbient palette="auto" mode="corner" density="low" opacity={0.4}/>
        <div className="hp-section__inner prj-body">
          <article className="prj-text">
            <h2 className="t-eyebrow" style={{ color: 'var(--brand-magenta)' }}>El reto</h2>
            <p className="t-body-lg">{p.challenge}</p>
            <h2 className="t-eyebrow" style={{ color: 'var(--brand-violet)', marginTop: 48 }}>Lo que hicimos</h2>
            <p className="t-body-lg">{p.approach}</p>
            <h2 className="t-eyebrow" style={{ color: 'var(--brand-orange)', marginTop: 48 }}>Resultado</h2>
            <p className="t-body-lg">{p.result}</p>
          </article>
          <aside className="prj-side">
            <dl className="prj-facts">
              {p.facts.map(([k, v]) => (
                <div key={k} className="prj-fact">
                  <dt className="t-caption">{k}</dt>
                  <dd className="t-h4" style={{ margin: 0 }}>{v}</dd>
                </div>
              ))}
              <div className="prj-fact">
                <dt className="t-caption">URL</dt>
                <dd style={{ margin: 0 }}><a href={p.url} target="_blank" rel="noopener noreferrer" className="prj-fact__link">{p.url.replace(/^https?:\/\//, '').replace(/\/$/, '')}</a></dd>
              </div>
            </dl>
            <div className="t-eyebrow" style={{ color: 'var(--fg-muted)', marginTop: 40 }}>Entregables</div>
            <ul className="svc-items" style={{ marginTop: 16, gridTemplateColumns: '1fr' }}>
              {p.deliverables.map(d => <li key={d}><Icon name="check" size={16} color={p.color === '#0A0A0F' ? 'var(--brand-magenta)' : p.color}/> {d}</li>)}
            </ul>
          </aside>
        </div>
      </section>

      {/* Pieza visual grande: espacio para las imágenes reales del caso */}
      <section className="prj-art" style={{ background: p.color }} aria-hidden="true">
        <SquiggleScatter draw items={[
          { variant: p.variant, color: light ? 'ink' : 'yellow',  size: 'xxl', top: '10%', left: '8%', rotate: -8 },
          { variant: 'hook',    color: light ? 'violet' : 'yellow', size: 'lg', top: '20%', right: '12%', rotate: 10 },
          { variant: 'ring',    color: light ? 'ink' : 'magenta', size: 'xl', bottom: '8%', right: '30%', rotate: -14 },
          { variant: 'dash',    color: light ? 'ink' : 'yellow',  size: 'md', bottom: '20%', left: '40%', rotate: 6 },
        ]}/>
      </section>

      <section className="hp-section hp-section--ink50">
        <div className="hp-section__inner prj-next">
          <div>
            <div className="t-eyebrow" style={{ color: 'var(--fg-muted)' }}>Siguiente proyecto</div>
            <a href={C.projectUrl(next)} className="prj-next__link t-display-sm">{next.t} <Icon name="arrow-right" size={28}/></a>
            <div className="t-caption" style={{ color: 'var(--fg-muted)', marginTop: 8 }}>{next.tags}</div>
          </div>
          <a href="portfolio.html" className="btn btn--lg btn--secondary">Todos los proyectos</a>
        </div>
      </section>

      <GarabatoCTA
        bg="violet"
        eyebrow="¿Necesitás un sitio así?"
        title="Hablemos en serio."
        subtitle="Veinte minutos, sin compromiso. Te contamos cómo trabajamos y vemos si encaja."
        primary={{ label: 'Empezar un proyecto', href: 'index.html#contact' }}
        secondary={{ label: 'Ver servicios', href: 'services.html' }}
      />
    </>
  );
};

// ─────────────────────────────────────────────
// ARTICLE — article.html?a=slug
// ─────────────────────────────────────────────
const ArticlePage = () => {
  const slug = C.getParam('a');
  const a = C.article(slug);
  React.useEffect(() => { if (a) setTitle(a.t); }, [a]);
  if (!a) return <NotFoundPage what="artículo" back={{ href: 'journal.html', label: 'Ver el diario' }}/>;

  const idx = C.ARTICLES.indexOf(a);
  const related = C.ARTICLES.filter((x, i) => i !== idx && x.cat === a.cat).slice(0, 2)
    .concat(C.ARTICLES.filter((x, i) => i !== idx && x.cat !== a.cat)).slice(0, 2);
  const author = C.TEAM.find(t => t.n === a.au);

  return (
    <>
      <section className="hp-page-header hp-page-header--paper art-header">
        <SquiggleScatter items={[
          { variant: a.variant, color: 'auto', size: 'xl', top: '12%', right: '6%', rotate: 12, float: true },
          { variant: 'dash', color: 'orange', size: 'sm', bottom: '20%', right: '30%', rotate: -10 },
        ]}/>
        <div className="hp-page-header__inner art-header__inner">
          <a href="journal.html" className="art-back"><Icon name="arrow-left" size={14}/> Diario</a>
          <div className="t-eyebrow" style={{ color: 'var(--brand-magenta)', marginTop: 24 }}>{a.cat}</div>
          <h1 className="t-display-lg" style={{ marginTop: 20 }}>{a.full || a.t}</h1>
          <p className="t-body-lg" style={{ color: 'var(--fg-muted)', marginTop: 24, maxWidth: 720 }}>{a.excerpt}</p>
          <div className="art-byline">
            <div className="hp-testimonial__avatar" style={{ background: author ? author.c : 'var(--ink-900)' }} aria-hidden="true">{C.initials(a.au)}</div>
            <div>
              <div className="t-label">{a.au}</div>
              <div className="t-caption" style={{ color: 'var(--fg-muted)' }}>{author ? author.r : 'Garabato'} · <time dateTime={a.iso}>{a.date}</time> · {a.time} de lectura</div>
            </div>
          </div>
        </div>
      </section>

      <div className="art-cover" style={{ background: a.color }} aria-hidden="true">
        <SquiggleScatter draw items={[
          { variant: a.variant, color: isLight(a.color) ? 'ink' : 'yellow', size: 'xxl', top: '10%', left: '15%', rotate: -6 },
          { variant: 'dash', color: isLight(a.color) ? 'ink' : 'magenta', size: 'md', bottom: '18%', right: '18%', rotate: 8 },
        ]}/>
      </div>

      <article className="hp-section art-body">
        <div className="art-body__inner">
          {a.body.map((para, i) => <p key={i} className="art-p">{para}</p>)}
          <div className="art-end" aria-hidden="true"><Squiggle variant="dash" color="orange" size="sm"/></div>
        </div>
      </article>

      <section className="hp-section hp-section--ink50">
        <div className="hp-section__inner">
          <div className="t-eyebrow" style={{ color: 'var(--fg-muted)', marginBottom: 24 }}>Seguir leyendo</div>
          <div className="jrn-list">
            {related.map(r => (
              <a key={r.slug} href={C.articleUrl(r)} className="jrn-list-item">
                <time className="t-caption" style={{ color: 'var(--fg-muted)' }} dateTime={r.iso}>{r.date}</time>
                <div>
                  <div className="t-h4" style={{ marginBottom: 2 }}>{r.t}</div>
                  <div className="t-caption" style={{ color: 'var(--fg-muted)' }}>{r.cat}</div>
                </div>
                <div className="t-caption" style={{ color: 'var(--fg-muted)' }}>por {r.au}</div>
                <Icon name="arrow-right" size={18}/>
              </a>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

// ─────────────────────────────────────────────
// LEGAL — legal.html (#privacidad, #terminos)
// ─────────────────────────────────────────────
const LegalPage = () => {
  const S = C.SITE;
  return (
    <>
      <PageHeader
        eyebrow="Legal"
        title={<>Privacidad<br/>y términos.</>}
        subtitle="Lo que hacemos con tus datos y las condiciones de uso de este sitio. En castellano, sin letra chica."
        squiggles={[{ variant: 'dash', color: 'orange', size: 'md', top: '30%', right: '10%', rotate: -8 }, { variant: 'hook', color: 'violet', size: 'lg', bottom: '10%', right: '25%', rotate: 10 }]}
      />
      <section className="hp-section">
        <div className="legal">
          <article id="privacidad">
            <h2 className="t-display-sm">Política de privacidad</h2>
            <p className="t-caption" style={{ color: 'var(--fg-muted)' }}>Última actualización: septiembre de 2026</p>
            <h3 className="t-h4">Quiénes somos</h3>
            <p>{S.legalName} (NIT {S.nit}), con domicilio en {S.address}, {S.neighborhood}, {S.city}, {S.country}, es responsable del tratamiento de los datos personales que recogemos a través de {S.url.replace('https://', '')}.</p>
            <h3 className="t-h4">Qué datos recogemos y para qué</h3>
            <p>Solo los que nos das en el formulario de contacto: nombre, email, empresa, tipo de proyecto, presupuesto estimado y el mensaje. Los usamos exclusivamente para responder tu consulta y, si avanzamos, para preparar una propuesta. No enviamos newsletters ni compartimos tus datos con terceros con fines comerciales.</p>
            <h3 className="t-h4">Cookies y analítica</h3>
            <p>Este sitio no usa cookies de seguimiento ni herramientas de analítica de terceros. Las fuentes tipográficas se cargan desde Google Fonts, que puede registrar tu dirección IP según su propia política de privacidad.</p>
            <h3 className="t-h4">Cuánto tiempo los guardamos</h3>
            <p>Los mensajes de contacto se conservan mientras dure la conversación comercial y hasta dos años después, salvo que nos pidas borrarlos antes.</p>
            <h3 className="t-h4">Tus derechos</h3>
            <p>De acuerdo con la Ley 1581 de 2012 y el Decreto 1377 de 2013 de Colombia, podés conocer, actualizar, rectificar y suprimir tus datos, o revocar la autorización, escribiendo a <a href={`mailto:${S.email}`}>{S.email}</a>. Respondemos en un máximo de quince días hábiles.</p>
          </article>
          <article id="terminos" style={{ marginTop: 80 }}>
            <h2 className="t-display-sm">Términos de uso</h2>
            <p className="t-caption" style={{ color: 'var(--fg-muted)' }}>Última actualización: septiembre de 2026</p>
            <h3 className="t-h4">Contenido</h3>
            <p>Los textos, marcas, ilustraciones y trabajos mostrados en este sitio pertenecen a {S.legalName} o a los clientes que aparecen en cada caso, y se publican con su autorización. No pueden reproducirse con fines comerciales sin permiso escrito.</p>
            <h3 className="t-h4">Información orientativa</h3>
            <p>Los tiempos, rangos de inversión y alcances publicados en la sección de servicios son orientativos. Cada proyecto se cotiza con una propuesta específica que prevalece sobre lo que dice este sitio.</p>
            <h3 className="t-h4">Design system</h3>
            <p>El design system publicado en este sitio se comparte con fines de documentación. Podés inspirarte, pero los squiggles y el isotipo son marcas registradas del estudio.</p>
            <h3 className="t-h4">Ley aplicable</h3>
            <p>Estos términos se rigen por las leyes de la República de Colombia. Cualquier diferencia se resolverá ante los jueces de {S.city}.</p>
          </article>
        </div>
      </section>
    </>
  );
};

// ─────────────────────────────────────────────
// 404
// ─────────────────────────────────────────────
const NotFoundPage = ({ what, back }) => {
  React.useEffect(() => { setTitle('Página no encontrada'); }, []);
  return (
    <section className="hp-page-header hp-page-header--paper nf">
      <SquiggleScatter draw items={[
        { variant: 'ring', color: 'magenta', size: 'xxl', top: '5%', right: '5%', rotate: 20, float: true },
        { variant: 'curl', color: 'yellow',  size: 'xl', bottom: '5%', left: '5%', rotate: -10, float: true },
        { variant: 'hook', color: 'violet',  size: 'lg', top: '50%', left: '55%', rotate: 8 },
        { variant: 'dash', color: 'orange',  size: 'md', bottom: '25%', right: '30%', rotate: -6 },
      ]}/>
      <div className="hp-page-header__inner" style={{ textAlign: 'center' }}>
        <div className="t-eyebrow" style={{ color: 'var(--brand-magenta)' }}>Error 404</div>
        <h1 className="t-display-xl" style={{ marginTop: 24 }}>Este garabato<br/>no existe.</h1>
        <p className="t-body-lg" style={{ color: 'var(--fg-muted)', marginTop: 24, maxWidth: 560, margin: '24px auto 0' }}>
          {what ? `No encontramos ese ${what}. Puede que el enlace esté viejo o que lo hayamos movido.` : 'La página que buscás no está acá. Puede que el enlace esté viejo o que la hayamos movido.'}
        </p>
        <div style={{ marginTop: 40, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href={back ? back.href : 'index.html'} className="btn btn--lg btn--primary">{back ? back.label : 'Volver al inicio'} <Icon name="arrow-right" size={14}/></a>
          {back && <a href="index.html" className="btn btn--lg btn--ghost">Volver al inicio</a>}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { PortfolioPage, ServicesPage, StudioPage, JournalPage, ProjectPage, ArticlePage, LegalPage, NotFoundPage });