import { ImageResponse } from 'next/og';

// Self-hosted standalone build → Node runtime (NOT edge). next/og renders fine
// under Node; edge runtime isn't available outside Vercel's edge platform.
export const alt = "VYNDR — The edge the books don't want you to have";
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          width: '100%',
          height: '100%',
          background: '#06060B',
          color: '#fff',
          padding: 64,
        }}
      >
        {/* Top hairline accent */}
        <div style={{ display: 'flex', position: 'absolute', top: 0, left: 0, right: 0, height: 6, background: '#00D4A0' }} />

        {/* Wordmark */}
        <div style={{ display: 'flex', fontSize: 96, fontWeight: 900, letterSpacing: '0.06em' }}>
          <span>VYND</span>
          <span style={{ color: '#00D4A0' }}>R</span>
        </div>

        {/* Tagline */}
        <div style={{ display: 'flex', fontSize: 30, color: '#B8BCC8', marginTop: 28 }}>
          The books have every advantage.
        </div>
        <div style={{ display: 'flex', fontSize: 30, color: '#00D4A0', marginTop: 6, fontWeight: 700 }}>
          We built this to give it back.
        </div>

        {/* Feature row */}
        <div style={{ display: 'flex', gap: 18, marginTop: 48, fontSize: 18, color: '#707080', letterSpacing: '0.08em' }}>
          <span>PRE-GRADED PROPS</span>
          <span style={{ color: '#3A3A48' }}>·</span>
          <span>ARCHETYPES</span>
          <span style={{ color: '#3A3A48' }}>·</span>
          <span>PARLAY LAB</span>
          <span style={{ color: '#3A3A48' }}>·</span>
          <span>BUILT IN DETROIT</span>
        </div>
      </div>
    ),
    { ...size },
  );
}