import { ImageResponse } from "next/og";

export const alt ="Three Stars Hosiery Mills, woven for the world since 1956";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

/**
 * Share card. Drawn with the site's own palette and a twill field, so a link
 * pasted into an email or a chat still looks like the mill.
 */
export default function OpengraphImage() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          background:
            "linear-gradient(135deg, #0f1734 0%, #080b14 55%, #16224a 100%)",
          padding: 72,
          position: "relative",
        }}
      >
        {/* Twill, the denim structure, as a repeating field. */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            opacity: 0.14,
            backgroundImage:
              "repeating-linear-gradient(45deg, #3a56a6 0px, #3a56a6 2px, transparent 2px, transparent 12px)",
          }}
        />

        <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
          <svg width="64" height="32" viewBox="0 0 48 24" fill="none">
            <path
              d="M1 19.5 C 6 19.5, 9 8.5, 15.5 8.5 S 20 3.5, 24 3.5 S 28.5 8.5, 32.5 8.5 C 39 8.5, 42 19.5, 47 19.5"
              stroke="#e0a458"
              strokeWidth="1.3"
              strokeLinecap="round"
              opacity="0.5"
            />
            {[
              { cx: 7, cy: 17, r: 4.6 },
              { cx: 24, cy: 8, r: 6 },
              { cx: 41, cy: 17, r: 4.6 },
            ].map((star) => (
              <path
                key={star.cx}
                d={starPath(star.cx, star.cy, star.r, star.r * 0.42)}
                fill="#e0a458"
              />
            ))}
          </svg>
          <div
            style={{
              fontSize: 22,
              letterSpacing: 6,
              textTransform: "uppercase",
              color: "#8a8f9c",
            }}
          >
            Three Stars Hosiery Mills
          </div>
        </div>

        {/* Satori needs an explicit display on any element with more than one
            child, so each line is its own flex row rather than mixed inline
            text and spans. */}
        <div style={{ display: "flex", flexDirection: "column" }}>
          <div
            style={{
              display: "flex",
              fontSize: 92,
              lineHeight: 1.02,
              color: "#f5f1e8",
              letterSpacing: -2,
            }}
          >
            Woven for the world
          </div>
          <div
            style={{
              display: "flex",
              fontSize: 92,
              lineHeight: 1.02,
              letterSpacing: -2,
            }}
          >
            <span style={{ color: "#f5f1e8" }}>since&nbsp;</span>
            <span style={{ color: "#e0a458" }}>1956</span>
          </div>
          <div
            style={{
              display: "flex",
              marginTop: 28,
              fontSize: 28,
              color: "#8a8f9c",
              maxWidth: 820,
            }}
          >
            Pakistan&apos;s oldest vertically integrated textile manufacturer.
            Knitwear, denim and workwear from Multan and Lahore.
          </div>
        </div>

        <div
          style={{
            display: "flex",
            gap: 48,
            borderTop: "1px solid rgba(245,241,232,0.14)",
            paddingTop: 28,
            fontSize: 22,
            color: "#f5f1e8",
          }}
        >
          <div style={{ display: "flex" }}>156 knitting machines</div>
          <div style={{ display: "flex" }}>27,000 kg yarn a day</div>
          <div style={{ display: "flex" }}>UK, Europe, USA</div>
        </div>
      </div>
    ),
    size,
  );
}

function starPath(cx: number, cy: number, outer: number, inner: number): string {
  const points: string[] = [];
  for (let i = 0; i < 10; i++) {
    const radius = i % 2 === 0 ? outer : inner;
    const angle = (Math.PI / 5) * i - Math.PI / 2;
    points.push(
      `${(cx + radius * Math.cos(angle)).toFixed(2)} ${(cy + radius * Math.sin(angle)).toFixed(2)}`,
    );
  }
  return `M${points.join(" L")} Z`;
}