hidden11/app/opengraph-image.tsx

import { ImageResponse } from "next/og";

export const alt = "hidden11";
export const contentType = "image/png";
export const size = {
  width: 1200,
  height: 630,
};

export default function OpenGraphImage() {
  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          width: "100%",
          height: "100%",
          background: "linear-gradient(135deg, #04110c 0%, #0d2d1f 42%, #145c3a 100%)",
          color: "#f7fff9",
          padding: 42,
          fontFamily: "Arial",
          position: "relative",
        }}
      >
        <div
          style={{
            position: "absolute",
            top: -90,
            right: -90,
            width: 320,
            height: 320,
            borderRadius: 999,
            background: "rgba(62, 230, 150, 0.18)",
          }}
        />
        <div
          style={{
            position: "absolute",
            bottom: -120,
            left: -80,
            width: 360,
            height: 360,
            borderRadius: 999,
            background: "rgba(250, 204, 21, 0.12)",
          }}
        />

        <div
          style={{
            display: "flex",
            width: "100%",
            border: "1px solid rgba(255,255,255,0.14)",
            borderRadius: 34,
            padding: 34,
            background: "rgba(2, 14, 10, 0.68)",
            boxShadow: "0 30px 80px rgba(0,0,0,0.28)",
          }}
        >
          <div style={{ display: "flex", flexDirection: "column", flex: 1, justifyContent: "space-between", paddingRight: 22 }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <div
                style={{
                  display: "flex",
                  width: 148,
                  justifyContent: "center",
                  borderRadius: 999,
                  background: "rgba(255,255,255,0.1)",
                  padding: "10px 18px",
                  fontSize: 18,
                  fontWeight: 900,
                  letterSpacing: 2.4,
                  textTransform: "uppercase",
                }}
              >
                Daily Puzzle
              </div>

              <div style={{ display: "flex", alignItems: "flex-end", gap: 8 }}>
                <div style={{ display: "flex", fontSize: 102, fontWeight: 900, letterSpacing: -4 }}>hidden</div>
                <div style={{ display: "flex", gap: 8, marginBottom: 14 }}>
                  <div
                    style={{
                      display: "flex",
                      width: 34,
                      height: 74,
                      borderRadius: 16,
                      background: "linear-gradient(180deg, #48e7a0 0%, #10b968 100%)",
                    }}
                  />
                  <div
                    style={{
                      display: "flex",
                      width: 34,
                      height: 74,
                      borderRadius: 16,
                      background: "linear-gradient(180deg, #ffe86a 0%, #facc15 100%)",
                    }}
                  />
                </div>
              </div>

              <div style={{ display: "flex", maxWidth: 620, fontSize: 34, lineHeight: 1.18, color: "#d7fbe7" }}>
                Daily football lineup puzzle with clues, history links and difficulty levels that actually escalate.
              </div>
            </div>

            <div style={{ display: "flex", gap: 14 }}>
              {["Easy", "Medium", "Hard"].map((label, index) => (
                <div
                  key={label}
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    gap: 8,
                    width: 172,
                    padding: 18,
                    borderRadius: 22,
                    background:
                      index === 0
                        ? "rgba(72, 231, 160, 0.16)"
                        : index === 1
                          ? "rgba(255,255,255,0.09)"
                          : "#d4ff4d",
                    color: index === 2 ? "#0b1a12" : "#f7fff9",
                    border: "1px solid rgba(255,255,255,0.08)",
                  }}
                >
                  <div style={{ display: "flex", fontSize: 18, fontWeight: 800, textTransform: "uppercase" }}>{label}</div>
                  <div style={{ display: "flex", fontSize: 16, lineHeight: 1.3, opacity: 0.9 }}>
                    {index === 0 ? "Fast entry" : index === 1 ? "Less obvious pool" : "Career-history riddles"}
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div
            style={{
              display: "flex",
              width: 368,
              marginLeft: 16,
              borderRadius: 28,
              padding: 24,
              background: "linear-gradient(180deg, rgba(8,41,28,0.98), rgba(5,22,15,1))",
              border: "1px solid rgba(255,255,255,0.12)",
              flexDirection: "column",
            }}
          >
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
              <div style={{ display: "flex", flexDirection: "column" }}>
                <div style={{ display: "flex", fontSize: 16, fontWeight: 800, textTransform: "uppercase", letterSpacing: 1.6, color: "#8ddfb6" }}>
                  Today
                </div>
                <div style={{ display: "flex", marginTop: 4, fontSize: 26, fontWeight: 900 }}>
                  hidden11 #124
                </div>
              </div>
              <div
                style={{
                  display: "flex",
                  borderRadius: 999,
                  background: "#3ee696",
                  color: "#082015",
                  fontSize: 15,
                  fontWeight: 900,
                  padding: "10px 14px",
                  textTransform: "uppercase",
                }}
              >
                Shareable
              </div>
            </div>

            <div
              style={{
                display: "flex",
                flexDirection: "column",
                width: "100%",
                gap: 12,
                justifyContent: "space-between",
                flex: 1,
              }}
            >
              {[
                { label: "Easy", time: "1:24", color: "#3ee696" },
                { label: "Medium", time: "2:08", color: "#facc15" },
                { label: "Hard", time: "3:41", color: "#ffffff" },
              ].map((card) => (
                <div
                  key={card.label}
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    gap: 10,
                    borderRadius: 22,
                    background: "rgba(255,255,255,0.06)",
                    border: "1px solid rgba(255,255,255,0.08)",
                    padding: 16,
                  }}
                >
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <div style={{ display: "flex", fontSize: 18, fontWeight: 800, textTransform: "uppercase" }}>{card.label}</div>
                    <div style={{ display: "flex", fontSize: 16, fontWeight: 700, color: "#d7fbe7" }}>{card.time}</div>
                  </div>
                  <div style={{ display: "flex", gap: 8 }}>
                    {Array.from({ length: 5 }).map((_, index) => (
                      <div
                        key={index}
                        style={{
                          display: "flex",
                          width: 36,
                          height: 36,
                          borderRadius: 10,
                          background: card.color,
                          boxShadow: "inset 0 -6px 0 rgba(0,0,0,0.18)",
                        }}
                      />
                    ))}
                  </div>
                </div>
              ))}
            </div>

            <div style={{ display: "flex", marginTop: 16, fontSize: 16, color: "#b8d8c6" }}>hidden11.app</div>
          </div>
        </div>
      </div>
    ),
    size,
  );
}