/* global React, Carosello, dominio */

/* ════════════════ DIREZIONE A — GRIGLIA ════════════════ */
function LayoutGriglia({ progetti }) {
  return (
    <div className="griglia">
      {progetti.map((p, i) => (
        <a key={i} className="card" href={p.url} target="_blank" rel="noopener noreferrer">
          <Carosello progetto={p} aspect="4 / 3" />
          <div className="card-body">
            <div className="card-top">
              <h2 className="card-titolo">{p.titolo}</h2>
              <span className="card-anno">{p.anno}</span>
            </div>
            {p.categoria && <span className="tag">{p.categoria}</span>}
            <p className="card-desc">{p.descrizione}</p>
            <span className="card-url">
              {dominio(p.url)} <span className="arr">↗</span>
            </span>
          </div>
        </a>
      ))}
    </div>
  );
}

/* ════════════════ DIREZIONE B — INDICE / LISTA ════════════════ */
function LayoutIndice({ progetti }) {
  return (
    <div className="indice">
      {progetti.map((p, i) => (
        <a key={i} className="riga" href={p.url} target="_blank" rel="noopener noreferrer">
          <span className="riga-num">{String(i + 1).padStart(2, "0")}</span>
          <div className="riga-main">
            <h2 className="riga-titolo">{p.titolo}</h2>
            <div className="riga-meta">
              {p.categoria && <span className="tag">{p.categoria}</span>}
              <span className="riga-anno">{p.anno}</span>
            </div>
          </div>
          <p className="riga-desc">{p.descrizione}</p>
          <div className="riga-thumb">
            <Carosello progetto={p} aspect="16 / 10" />
          </div>
          <span className="riga-url">
            {dominio(p.url)} <span className="arr">↗</span>
          </span>
        </a>
      ))}
    </div>
  );
}

/* ════════════════ DIREZIONE C — EDITORIALE GRANDE ════════════════ */
function LayoutEditoriale({ progetti }) {
  return (
    <div className="editoriale">
      {progetti.map((p, i) => (
        <a
          key={i}
          className={"spread" + (i % 2 ? " spread-rev" : "")}
          href={p.url}
          target="_blank"
          rel="noopener noreferrer"
        >
          <div className="spread-media">
            <Carosello progetto={p} aspect="16 / 10" />
          </div>
          <div className="spread-text">
            <span className="spread-indice">{String(i + 1).padStart(2, "0")} — {p.anno}</span>
            <h2 className="spread-titolo">{p.titolo}</h2>
            <p className="spread-desc">{p.descrizione}</p>
            <span className="spread-url">
              {p.categoria && <span className="tag">{p.categoria}</span>}
              <span className="spread-link">{dominio(p.url)} <span className="arr">↗</span></span>
            </span>
          </div>
        </a>
      ))}
    </div>
  );
}

Object.assign(window, { LayoutGriglia, LayoutIndice, LayoutEditoriale });