import { ImageResponse } from 'next/og';
import { BRAND } from '@/theme/colors';

export const alt = 'Balinyaar — trust-first home nursing marketplace';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

/**
 * The landing's og:image (ui-phase-13) — a static composition built from the phase-0 brand mark
 * (the rounded-square lockup + terracotta accent dot from `public/img/logo.svg`, reproduced in
 * plain divs since Satori/`ImageResponse` renders a constrained CSS subset, not arbitrary SVG) on
 * the brand teal/cream. Kept Latin-only (no Persian glyphs) — `ImageResponse`'s bundled fallback
 * font only covers Latin; rendering the Persian tagline here would need an embedded Mikhak font
 * buffer, deliberately left for a follow-up once that's verified in a running server.
 */
export default function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 40,
          backgroundColor: BRAND.teal,
        }}
      >
        <div
          style={{
            width: 168,
            height: 168,
            borderRadius: 42,
            backgroundColor: BRAND.tealDeep,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            position: 'relative',
          }}
        >
          <div
            style={{
              width: 26,
              height: 92,
              borderRadius: 13,
              backgroundColor: BRAND.creamSoft,
              position: 'absolute',
              left: 54,
            }}
          />
          <div
            style={{
              width: 62,
              height: 62,
              borderRadius: '50%',
              border: `13px solid ${BRAND.creamSoft}`,
              position: 'absolute',
              right: 40,
            }}
          />
          <div
            style={{
              width: 22,
              height: 22,
              borderRadius: '50%',
              backgroundColor: BRAND.terracotta,
              position: 'absolute',
              right: 34,
              top: 34,
            }}
          />
        </div>
        <div style={{ display: 'flex', fontSize: 76, fontWeight: 700, color: BRAND.creamSoft }}>
          Balinyaar
        </div>
        <div style={{ display: 'flex', fontSize: 32, color: BRAND.tealOnDarkLight }}>
          Trust-first home nursing
        </div>
      </div>
    ),
    { ...size },
  );
}
