import type { ReactElement } from "react";

export const SOCIAL_CARD_SIZE = {
  width: 1200,
  height: 630
} as const;

export function renderVideoHausSocialCard(): ReactElement {
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        position: "relative",
        overflow: "hidden",
        background:
          "radial-gradient(circle at 12% 20%, rgba(56, 189, 248, 0.34), transparent 42%), radial-gradient(circle at 84% 14%, rgba(99, 102, 241, 0.32), transparent 44%), radial-gradient(circle at 50% 120%, rgba(250, 204, 21, 0.2), transparent 54%), linear-gradient(145deg, #0b1220 0%, #0d1727 40%, #101627 100%)"
      }}
    >
      <div
        style={{
          position: "absolute",
          inset: 28,
          borderRadius: 30,
          border: "1px solid rgba(185, 211, 255, 0.26)",
          background:
            "linear-gradient(165deg, rgba(18, 30, 54, 0.82) 0%, rgba(13, 20, 36, 0.82) 100%)",
          boxShadow:
            "inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 60px rgba(2,8,24,0.46)",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          padding: "52px 58px"
        }}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 14,
            color: "rgba(220, 236, 255, 0.92)",
            fontSize: 30,
            fontWeight: 600,
            alignSelf: "flex-start"
          }}
        >
          <div
            style={{
              width: 40,
              height: 40,
              borderRadius: 12,
              background: "linear-gradient(135deg, #67d4ff 0%, #7f8bff 100%)",
              boxShadow: "0 10px 24px rgba(64, 145, 255, 0.38)"
            }}
          />
          video.haus
        </div>

        <div
          style={{
            display: "flex",
            flexDirection: "column",
            gap: 16
          }}
        >
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              color: "#ffffff",
              fontSize: 68,
              lineHeight: 1.05,
              letterSpacing: -1.6,
              fontWeight: 700,
              maxWidth: 940
            }}
          >
            <span>Fast Video Tools</span>
            <span>For Creators</span>
          </div>
          <div
            style={{
              display: "block",
              color: "rgba(209, 224, 245, 0.93)",
              fontSize: 30,
              lineHeight: 1.35,
              maxWidth: 920
            }}
          >
            Extract frames, audio, thumbnails, and formats in one cinematic workspace.
          </div>
        </div>

        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between"
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 10,
              borderRadius: 999,
              border: "1px solid rgba(164, 205, 255, 0.35)",
              padding: "10px 16px",
              color: "rgba(208, 233, 255, 0.96)",
              fontSize: 22,
              fontWeight: 500,
              alignSelf: "flex-start"
            }}
          >
            Clip Frames
            <span style={{ opacity: 0.6 }}>|</span>
            Extract Audio
            <span style={{ opacity: 0.6 }}>|</span>
            Convert Formats
          </div>
          <div
            style={{
              display: "block",
              color: "rgba(192, 211, 239, 0.86)",
              fontSize: 24,
              letterSpacing: 0.2
            }}
          >
            video.haus
          </div>
        </div>
      </div>
    </div>
  );
}
