import { ImageResponse } from 'next/og';
import { ogMark } from '@/components/layout/logo';

export const runtime = 'nodejs';
export const alt = 'RareIndex — The Global Market for Collectibles';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

/** Site-wide share card (Open Graph / Twitter): mark, wordmark, tagline and an index line. Static — no database. */
export default function Image() {
  return new ImageResponse(
    (
      <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 72, background: 'linear-gradient(135deg, #0B0F19 0%, #10182A 60%, #0B0F19 100%)', color: '#F4F4F2', fontFamily: 'sans-serif', position: 'relative' }}>
        {/* faint index line across the card */}
        <svg width="1200" height="630" viewBox="0 0 1200 630" style={{ position: 'absolute', top: 0, left: 0 }}>
          <path d="M0 470 L140 430 L260 455 L380 380 L520 400 L640 320 L780 340 L900 250 L1040 270 L1200 170" fill="none" stroke="#3CCB82" strokeOpacity="0.28" strokeWidth="4" strokeLinejoin="round" strokeLinecap="round" />
          <path d="M0 470 L140 430 L260 455 L380 380 L520 400 L640 320 L780 340 L900 250 L1040 270 L1200 170 L1200 630 L0 630 Z" fill="#3CCB82" fillOpacity="0.05" />
          <g stroke="#FFFFFF" strokeOpacity="0.05">
            <path d="M0 158H1200M0 316H1200M0 474H1200" />
          </g>
        </svg>
        <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          {ogMark(120)}
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', fontSize: 84, fontWeight: 700, letterSpacing: -3, lineHeight: 1 }}>
              <span>Rare</span>
              <span style={{ color: '#D9AE5F' }}>Index</span>
            </div>
            <div style={{ marginTop: 10, fontSize: 26, letterSpacing: 6, color: '#9AA0AB', textTransform: 'uppercase' }}>The Global Market for Collectibles</div>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div style={{ fontSize: 34, lineHeight: 1.3, color: '#E6E6E2', maxWidth: 980 }}>Prices, verified sales, live asks, rarity, liquidity and the RARE indices — across marketplaces and auction houses, with confidence on every number.</div>
          <div style={{ display: 'flex', gap: 14, fontSize: 22, color: '#9AA0AB' }}>
            {['RareIndex Valuation', 'Liquidity Score', 'Market Depth', 'Auction Intelligence', 'Screener'].map((t) => (
              <span key={t} style={{ border: '1px solid rgba(255,255,255,0.14)', borderRadius: 8, padding: '6px 14px' }}>
                {t}
              </span>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 24, color: '#6F7580' }}>
          <span>www.rareindex.io</span>
          <span>Model estimates, not advice · Hosted on MacLustr</span>
        </div>
      </div>
    ),
    { ...size },
  );
}