// 22K hi-fi — Sections 07–08: Portfólio (use cases) + Entregáveis.

function Portfolio() {
  // All use cases — real 22K work, framed with the registration-mark system.
  const cases = PROJECTS;
  return (
    <section
      id="trabalhos"
      className="r-sec"
      style={{ background: "var(--ink)", color: "var(--text)", padding: "180px 36px" }}
    >
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "baseline",
          paddingBottom: 28,
          borderBottom: "1px solid var(--line-strong)",
          marginBottom: 110
        }}>
          <span className="mono" style={{ color: "var(--text-mute)", fontSize: 11 }}>[ Portfólio ]</span>
          <a href="#trabalhos" className="mono" style={{ color: "var(--text)", fontSize: 11, borderBottom: "1px solid var(--text)", paddingBottom: 2 }}>Ver todos →</a>
        </div>

        <div
          className="r-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            columnGap: "clamp(56px, 6vw, 96px)",
            rowGap: 120,
          }}
        >
          {cases.map((p, i) => (
            <a
              key={i}
              href={`projeto.html?p=${p.slug}`}
              style={{ display: "block", color: "inherit" }}
              onMouseEnter={(e) => {
                const im = e.currentTarget.querySelector(".cf-img");
                if (im) im.style.transform = "scale(1.04)";
              }}
              onMouseLeave={(e) => {
                const im = e.currentTarget.querySelector(".cf-img");
                if (im) im.style.transform = "scale(1)";
              }}
            >
              <CinematicFrame
                image={p.image}
                caption={`${p.client} · ${p.year}`}
                code={`22K — ${String(i + 1).padStart(2, "0")}`}
                variant={i}
                aspect="3/2"
                paper={false}
                grayscale={false}
              />
              <div style={{ marginTop: 12, display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
                <h3 style={{
                  margin: 0,
                  fontFamily: "'Helvetica Neue', Helvetica, sans-serif",
                  fontSize: 20, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--text)",
                }}>
                  {p.title}
                </h3>
                <span className="mono" style={{ fontSize: 10, color: "var(--text-mute)", whiteSpace: "nowrap" }}>{p.kind}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Entregaveis() {
  const frameVariants = [3, 4, 2];
  return (
    <section
      className="r-sec"
      style={{
        background: "var(--paper)",
        color: "var(--ink)",
        padding: "180px 36px",
      }}
    >
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "baseline",
          paddingBottom: 28,
          borderBottom: "1px solid rgba(0,0,0,.14)",
          marginBottom: 96
        }}>
          <span className="mono" style={{ color: "#6f6a5d", fontSize: 11 }}>[ Entregáveis ]</span>
          <span className="mono" style={{ color: "#6f6a5d", fontSize: 11 }}>(08)</span>
        </div>

        <div className="r-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "clamp(56px, 6vw, 96px)" }}>
          {DELIVERABLES.map((col, ci) => (
            <div
              key={ci}
              style={{
                display: "flex", flexDirection: "column", gap: 0,
              }}
            >
              {/* Image, framed with the registration-mark system */}
              <div style={{ marginBottom: 28 }}>
                <CinematicFrame
                  image={STILLS.deliverables[ci]}
                  code={`22K — 08`}
                  variant={frameVariants[ci % frameVariants.length]}
                  aspect="4/5"
                  paper={true}
                />
              </div>

              {/* Bucket label */}
              <span className="mono" style={{ fontSize: 10, color: "#6f6a5d", marginBottom: 14 }}>
                [ {col.bucket} ]
              </span>

              {/* Items list — text directly on paper, no rules */}
              {col.items.map((it, i) => (
                <div
                  key={i}
                  style={{
                    padding: i === 0 ? "0 0 20px" : "20px 0",
                    display: "flex", flexDirection: "column", gap: 6,
                  }}
                >
                  <h4 style={{
                    margin: 0,
                    fontFamily: "'Helvetica Neue', Helvetica, sans-serif",
                    fontSize: 15, fontWeight: 700, letterSpacing: "-0.015em",
                    display: "flex", alignItems: "center", gap: 8,
                    color: "var(--ink)",
                  }}>
                    {it.title}
                    {it.soon && (
                      <span
                        className="mono"
                        style={{
                          fontSize: 8, padding: "2px 7px",
                          border: "1px solid var(--accent)",
                          color: "var(--accent)",
                          borderRadius: 999,
                          letterSpacing: "0.1em",
                        }}
                      >em breve</span>
                    )}
                  </h4>
                  <p style={{ margin: 0, fontSize: 13, lineHeight: 1.55, color: "#6f6a5d" }}>{it.desc}</p>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Portfolio, Entregaveis });