import { ImageResponse } from "next/og";

export const alt =
  "Kumasy — Deine Kurse füllen und bezahlen sich von selbst.";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

// Static export: rendered once at build time.
export default function OpengraphImage() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          background: "#f9fafb",
          padding: 72,
          fontFamily: "sans-serif",
        }}
      >
        {/* Amber hairline, mirroring the site's scroll indicator. */}
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            height: 10,
            background:
              "linear-gradient(90deg, #ffd84d 0%, #f4c00c 45%, #e09b00 100%)",
          }}
        />

        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              width: 56,
              height: 56,
              borderRadius: 14,
              background: "linear-gradient(120deg, #ffd84d, #f4c00c 45%, #e09b00)",
            }}
          >
            <svg width="34" height="34" viewBox="0 0 512 512" fill="#1e293b">
              <rect x="153" y="118" width="71" height="277" rx="35.5" />
              <path d="M234.6 299.6 317.4 220.5 A20 20 0 0 1 352 234.4 L352 379.6 A20 20 0 0 1 317.4 393.5 L234.6 314.4 A10 10 0 0 1 234.6 299.6 Z" />
            </svg>
          </div>
          <div style={{ fontSize: 40, fontWeight: 600, color: "#1e293b" }}>
            kumasy
          </div>
        </div>

        <div
          style={{
            display: "flex",
            flexDirection: "column",
            color: "#1e293b",
          }}
        >
          <div
            style={{
              fontSize: 78,
              fontWeight: 700,
              lineHeight: 1.04,
              letterSpacing: -3,
            }}
          >
            Deine Kurse füllen und
          </div>
          <div
            style={{
              fontSize: 78,
              fontWeight: 700,
              lineHeight: 1.04,
              letterSpacing: -3,
            }}
          >
            bezahlen sich von selbst.
          </div>
          <div
            style={{
              marginTop: 28,
              fontSize: 30,
              color: "#475569",
              lineHeight: 1.4,
            }}
          >
            Kurse, Räume, Trainer, Buchungen und Zahlungen — in einer
            Oberfläche.
          </div>
        </div>

        <div style={{ display: "flex", gap: 14 }}>
          {["Stripe", "DSGVO-konform", "Hosting Frankfurt", "GoBD"].map(
            (chip) => (
              <div
                key={chip}
                style={{
                  display: "flex",
                  padding: "10px 20px",
                  borderRadius: 999,
                  background: "#ffffff",
                  color: "#475569",
                  border: "1px solid #e2e8f0",
                  fontSize: 22,
                }}
              >
                {chip}
              </div>
            ),
          )}
        </div>
      </div>
    ),
    size,
  );
}