import { ImageResponse } from 'next/og';
import { BARS } from '@/components/Logo';

// iOS ignores SVG touch icons — it needs a real raster, on an opaque ground,
// with no transparency (it composites its own rounded mask). Previously this
// pointed at favicon.svg, so add-to-home-screen produced a blank tile.
export const size = { width: 180, height: 180 };
export const contentType = 'image/png';

const COHORT = ['rgba(22,32,42,0.22)', 'rgba(22,32,42,0.38)', 'rgba(22,32,42,0.55)', '', 'rgba(22,32,42,0.22)'];
const SCALE = 3.6; // 40 → 144, leaving a 18px margin inside 180

export default function AppleIcon() {
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: '#f2f1ed',
        }}
      >
        <div style={{ position: 'relative', width: 40 * SCALE, height: 40 * SCALE, display: 'flex' }}>
          {BARS.map(([x, y, w, h, isSchool], i) => (
            <div
              key={x}
              style={{
                position: 'absolute',
                left: x * SCALE,
                top: y * SCALE,
                width: w * SCALE,
                height: h * SCALE,
                borderRadius: 3,
                background: isSchool ? '#584a9b' : COHORT[i],
              }}
            />
          ))}
        </div>
      </div>
    ),
    size
  );
}