// 22K hi-fi — Photo + Text editorial modules.
// Inspired by feedback: more "respiros" (breathing room), like a paspartu/matboard
// framing the work. Generous margins, narrow type columns, hairline rules.

// ─────────────────────────────────────────────────────────────────────────
// CinematicFrame — the "sala de corte" registration-mark design system.
// A photo wrapped in thin hairlines that overhang the image edges, plus a
// mono caption (bottom-left) and a rotated mono code (right edge).
// Derived from the Figma "example" node (84:22) / Captação section.
//
// The number AND placement of lines varies by `variant` so no two photos
// look identical — keeps the page feeling hand-composed, not templated.
// ─────────────────────────────────────────────────────────────────────────

// Each variant is a list of hairlines. Geometry is expressed with CSS
// box offsets relative to the image box (negative = overhang outward).
const FRAME_VARIANTS = [
  // v0 — faithful to the Figma example: long top line overhanging left,
  // bottom line, tall right edge, twin left uppers, one far-right lower.
  [
    { o: "h", top: "-1px",        left: "-46px", right: "10%" },
    { o: "h", bottom: "-1px",     left: "-22px", right: "-3%" },
    { o: "v", left: "100%",       top: "-52px",  bottom: "-92px" },
    { o: "v", left: "calc(100% + 40px)", top: "46%", bottom: "-40px" },
    { o: "v", left: "0px",        top: "-52px",  bottom: "52%" },
    { o: "v", left: "-22px",      top: "-52px",  bottom: "52%" },
  ],
  // v1 — sparse: single top overhang-right + one left vertical lower.
  [
    { o: "h", top: "-1px",        left: "12%",   right: "-44px" },
    { o: "v", left: "0px",        top: "40%",    bottom: "-70px" },
    { o: "v", left: "-26px",      top: "58%",    bottom: "-30px" },
  ],
  // v2 — bottom-weighted: bottom line overhanging both, right vertical lower,
  // a short top-right vertical.
  [
    { o: "h", bottom: "-1px",     left: "-40px", right: "-40px" },
    { o: "v", left: "100%",       top: "44%",    bottom: "-84px" },
    { o: "v", left: "calc(100% + 36px)", top: "-46px", bottom: "62%" },
    { o: "h", top: "-1px",        left: "60%",   right: "-1px" },
  ],
  // v3 — left-weighted crop: top + two left verticals + far-left.
  [
    { o: "h", top: "-1px",        left: "-50px", right: "40%" },
    { o: "v", left: "0px",        top: "-50px",  bottom: "-50px" },
    { o: "v", left: "-24px",      top: "-50px",  bottom: "55%" },
    { o: "h", bottom: "30%",      left: "-50px", right: "100%" },
  ],
  // v4 — minimal corner brackets (top-left + bottom-right).
  [
    { o: "h", top: "-1px",        left: "-38px", right: "70%" },
    { o: "v", left: "0px",        top: "-38px",  bottom: "72%" },
    { o: "h", bottom: "-1px",     left: "70%",   right: "-38px" },
    { o: "v", left: "100%",       top: "72%",    bottom: "-38px" },
  ],
  // v5 — busy/asymmetric: top overhang-right, bottom overhang-left,
  // right tall, far-right mid, left short.
  [
    { o: "h", top: "-1px",        left: "20%",   right: "-46px" },
    { o: "h", bottom: "-1px",     left: "-46px", right: "24%" },
    { o: "v", left: "100%",       top: "-48px",  bottom: "-48px" },
    { o: "v", left: "calc(100% + 38px)", top: "30%", bottom: "30%" },
    { o: "v", left: "0px",        top: "-48px",  bottom: "66%" },
  ],
];

function CinematicFrame({
  image,
  caption,            // mono text, bottom-left  e.g. "[ Tegra Singular · 2025 ]"
  code,               // mono rotated text, right edge e.g. "22K — 07"
  variant = 0,
  aspect = "4/5",
  paper = true,       // light background → dark hairlines
  grayscale = true,
}) {
  const lineColor = paper ? "rgba(0,0,0,0.15)" : "rgba(255,255,255,0.15)";
  const mute = paper ? "#6f6a5d" : "var(--text-mute)";
  const lines = FRAME_VARIANTS[variant % FRAME_VARIANTS.length];

  return (
    <figure style={{ margin: 0, position: "relative" }}>
      {/* line + image wrapper — overflow visible so hairlines can overhang */}
      <div style={{ position: "relative", overflow: "visible" }}>
        <div
          style={{
            position: "relative",
            aspectRatio: aspect,
            overflow: "hidden",
            background: "#0a0a0a",
          }}
        >
          <div
            style={{
              position: "absolute",
              inset: 0,
              backgroundImage: `url(${image})`,
              backgroundSize: "cover",
              backgroundPosition: "center",
              filter: grayscale ? "grayscale(1) contrast(1.04)" : "contrast(1.03)",
              transition: "transform 1.4s cubic-bezier(.2,.7,.2,1)",
            }}
          />
        </div>

        {/* registration hairlines */}
        {lines.map((ln, i) => (
          <div
            key={i}
            aria-hidden="true"
            style={{
              position: "absolute",
              background: lineColor,
              ...(ln.o === "h"
                ? { height: "1px", left: ln.left, right: ln.right, top: ln.top, bottom: ln.bottom }
                : { width: "1px", top: ln.top, bottom: ln.bottom, left: ln.left, right: ln.right }),
            }}
          />
        ))}

        {/* rotated mono code, right edge */}
        {code && (
          <span
            className="mono"
            style={{
              position: "absolute",
              right: "-30px",
              bottom: "0px",
              writingMode: "vertical-rl",
              transform: "rotate(180deg)",
              fontSize: 10,
              color: mute,
              letterSpacing: "0.18em",
              whiteSpace: "nowrap",
            }}
          >
            {code}
          </span>
        )}
      </div>

      {/* bottom-left caption */}
      {caption && (
        <figcaption
          className="mono"
          style={{ marginTop: 14, fontSize: 10, color: mute, letterSpacing: "0.1em" }}
        >
          [ {caption} ]
        </figcaption>
      )}
    </figure>
  );
}

// Reusable: a generous editorial module with a photo on one side and
// short caption + mono labels on the other. Used between heavier sections
// to give the eye places to rest.
function PhotoText({
  index = "02",
  label = "Direção",
  kicker = "Nota",
  title,
  body,
  image,
  imageCaption = "Cena · 22K",
  flip = false,
  paper = true, // light "paspartu" frame
  frameVariant = 0,
}) {
  const fg = paper ? "var(--ink)" : "var(--text)";
  const mute = paper ? "#6f6a5d" : "var(--text-mute)";
  const rule = paper ? "rgba(0,0,0,.14)" : "var(--line-strong)";
  const bg = paper ? "var(--paper)" : "var(--ink)";

  return (
    <section
      style={{
        background: bg,
        color: fg,
        // Outer paspartu — wide top/bottom, generous side margins
        padding: "180px 36px",
        position: "relative"
      }}
      className="r-sec">

      {/* hairline rule top, full bleed inside container */}
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "baseline",
            paddingBottom: 28,
            borderBottom: `1px solid ${rule}`,
            marginBottom: 96
          }}>

          <span className="mono" style={{ color: mute, fontSize: 11 }}>
            [ {label} ]
          </span>
          <span className="mono" style={{ color: mute, fontSize: 11 }}>
            ({index})
          </span>
        </div>

        {/* Two columns — image and text — with a LOT of whitespace between */}
        <div
          className="r-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: "clamp(48px, 8vw, 140px)",
            alignItems: "start",
            direction: flip ? "rtl" : "ltr"
          }}>

          {/* image column — framed with the registration-mark system */}
          <div style={{ direction: "ltr" }}>
            <CinematicFrame
              image={image}
              caption={`${imageCaption}`}
              code={`22K — ${index}`}
              variant={frameVariant}
              aspect="4/5"
              paper={paper}
            />
          </div>

          {/* text column — narrow, top-aligned, lots of room above and below */}
          <div
            style={{
              direction: "ltr",
              display: "flex",
              flexDirection: "column",
              gap: 28,
              // Push text down a touch so it visually centers against the photo
              paddingTop: "clamp(40px, 8vw, 120px)",
              maxWidth: 460
            }}>

            <span className="mono" style={{ fontSize: 11, color: mute }}>
              {kicker}
            </span>
            <h3
              style={{
                margin: 0,
                fontFamily: "'Helvetica Neue', Helvetica, sans-serif",
                fontWeight: 700,


                letterSpacing: "-0.025em",
                color: fg,
                textWrap: "balance", fontSize: "58px", lineHeight: "1"
              }}>

              {title}
            </h3>
            <p
              style={{
                margin: 0,

                lineHeight: 1.6,
                color: mute,
                textWrap: "pretty",
                maxWidth: 380, fontSize: "12px"
              }}>

              {body}
            </p>
          </div>
        </div>
      </div>
    </section>);

}

// A wider, image-led "manifesto strip" — three small images with mono captions
// underneath, framed by huge whitespace.
function ManifestoStrip({
  index = "05",
  label = "Linguagem",
  items // [{ image, caption }]
}) {
  return (
    <section
      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 }}>
            [ {label} ]
          </span>
          <span className="mono" style={{ color: "#6f6a5d", fontSize: 11 }}>
            ({index})
          </span>
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: "clamp(24px, 4vw, 56px)"
          }}>

          {items.map((it, i) =>
          <CinematicFrame
            key={i}
            image={it.image}
            caption={it.caption}
            code={`22K — ${String(i + 1).padStart(2, "0")}`}
            variant={i + 1}
            aspect="4/5"
            paper={true}
          />
          )}
        </div>

        {/* Closing note — way down on the page, generous gap */}
        <div
          style={{
            marginTop: 120,
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: "clamp(48px, 8vw, 140px)",
            alignItems: "start"
          }}>

          <span className="mono" style={{ fontSize: 11, color: "#6f6a5d" }}>
            [ Nota ]
          </span>
          <p
            style={{
              margin: 0,
              fontSize: 14,
              lineHeight: 1.6,
              color: "#6f6a5d",
              maxWidth: 420,
              textWrap: "pretty"
            }}>

            Cada filme nasce de uma decupagem que respeita o projeto: o
            arquiteto desenhou a luz, a 22K filma como ela passa pelo tempo.
          </p>
        </div>
      </div>
    </section>);

}

Object.assign(window, { PhotoText, ManifestoStrip, CinematicFrame });