import { ImageResponse } from 'next/og'

export const runtime = 'edge'

const size = { width: 1200, height: 630 }
const BASE_URL = process.env.NEXT_PUBLIC_APP_URL ?? 'https://cahootravel.com'

export async function GET() {
  // Fetch the logo SVG and encode as a data URI for reliable rendering
  const logoSrc = await fetch(new URL('/cahootravel-logo.svg', BASE_URL))
    .then(r => r.text())
    .then(t => `data:image/svg+xml;charset=utf-8,${encodeURIComponent(t)}`)
    .catch(() => null)

  return new ImageResponse(
    (
      <div
        style={{
          background: '#ffffff',
          width: '100%',
          height: '100%',
          display: 'flex',
          position: 'relative',
          overflow: 'hidden',
        }}
      >

        {/* ── Hero blob (static arcs, no animations) ── */}
        <svg
          viewBox="0 0 550 350"
          width={720}
          height={720}
          style={{
            position: 'absolute',
            right: -140,
            top: -45,
            display: 'flex',
          }}
        >
          <defs>
            <linearGradient id="hb-g1" x1="0" y1="700" x2="750" y2="0" gradientUnits="userSpaceOnUse">
              <stop offset="0%"   stopColor="#8B5CF6" />
              <stop offset="40%"  stopColor="#A78BDE" />
              <stop offset="80%"  stopColor="#C4B0F5" />
              <stop offset="100%" stopColor="#DDD6FE" />
            </linearGradient>
            <linearGradient id="hb-g2" x1="0" y1="750" x2="750" y2="50" gradientUnits="userSpaceOnUse">
              <stop offset="0%"   stopColor="#9B7ED1" />
              <stop offset="50%"  stopColor="#EC4899" />
              <stop offset="100%" stopColor="#F472B6" />
            </linearGradient>
            <linearGradient id="hb-g3" x1="0" y1="800" x2="800" y2="100" gradientUnits="userSpaceOnUse">
              <stop offset="0%"   stopColor="#EC4899" />
              <stop offset="50%"  stopColor="#E91E8C" />
              <stop offset="100%" stopColor="#F97316" />
            </linearGradient>
            <linearGradient id="hb-g4" x1="100" y1="800" x2="800" y2="200" gradientUnits="userSpaceOnUse">
              <stop offset="0%"   stopColor="#F97316" />
              <stop offset="60%"  stopColor="#FB923C" />
              <stop offset="100%" stopColor="#FDE68A" />
            </linearGradient>
            <linearGradient id="hb-g5" x1="600" y1="80" x2="780" y2="550" gradientUnits="userSpaceOnUse">
              <stop offset="0%"   stopColor="#10B981" />
              <stop offset="100%" stopColor="#34D399" />
            </linearGradient>
          </defs>

          <g transform="translate(0, 800) rotate(-90)">
            {/* Outermost lavender arc */}
            <path
              d="M -180 700 C 30 480 160 180 430 185 C 580 187 720 265 740 420 C 750 495 710 565 640 610"
              stroke="url(#hb-g1)"
              strokeWidth="115"
              strokeLinecap="round"
              opacity="0.88"
              fill="none"
            />
            {/* Lavender/pink arc */}
            <path
              d="M -120 760 C 80 550 210 220 460 225 C 610 228 730 305 748 450 C 757 520 718 588 650 628"
              stroke="url(#hb-g2)"
              strokeWidth="100"
              strokeLinecap="round"
              opacity="0.9"
              fill="none"
            />
            {/* Main pink arc */}
            <path
              d="M -60 800 C 130 600 270 255 490 260 C 640 262 740 340 752 475 C 758 540 724 605 660 640"
              stroke="url(#hb-g3)"
              strokeWidth="88"
              strokeLinecap="round"
              opacity="0.92"
              fill="none"
            />
            {/* Orange/warm arc */}
            <path
              d="M 20 820 C 190 650 340 300 520 300 C 665 300 755 375 760 500"
              stroke="url(#hb-g4)"
              strokeWidth="74"
              strokeLinecap="round"
              opacity="0.85"
              fill="none"
            />
            {/* Teal edge accent */}
            <path
              d="M 615 60 C 700 160 760 310 720 490 C 700 560 660 600 620 620"
              stroke="url(#hb-g5)"
              strokeWidth="48"
              strokeLinecap="round"
              opacity="0.72"
              fill="none"
            />
            {/* Inner white highlight sheen */}
            <path
              d="M 140 760 C 270 600 400 340 560 300 C 640 280 710 320 730 400"
              stroke="white"
              strokeWidth="28"
              strokeLinecap="round"
              opacity="0.22"
              fill="none"
            />
          </g>
        </svg>

        {/* ── Left content ── */}
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            padding: '60px 72px',
            maxWidth: 700,
            position: 'relative',
            zIndex: 1,
          }}
        >
          {/* Logo */}
          {logoSrc ? (
            <img
              src={logoSrc}
              width={290}
              height={73}
              alt="CahooTravel"
              style={{ objectFit: 'contain', objectPosition: 'left center', marginBottom: 44 }}
            />
          ) : (
            <div style={{ fontSize: 30, fontWeight: 700, color: '#4C1D95', marginBottom: 44, display: 'flex' }}>
              CahooTravel
            </div>
          )}

          {/* Headline line 1 */}
          <div
            style={{
              fontSize: 52,
              fontWeight: 800,
              color: '#111827',
              lineHeight: 1.1,
              marginBottom: 4,
              fontFamily: 'sans-serif',
              display: 'flex',
            }}
          >
            The smartest way to book your
          </div>

          {/* Headline line 2 — brand purple */}
          <div
            style={{
              fontSize: 52,
              fontWeight: 800,
              color: '#7C3AED',
              lineHeight: 1.1,
              marginBottom: 48,
              fontFamily: 'sans-serif',
              display: 'flex',
            }}
          >
            next adventure.
          </div>

          {/* CTA button */}
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 14,
              background: '#7C3AED',
              borderRadius: 12,
              padding: '18px 36px',
              boxShadow: '0 4px 16px rgba(124, 58, 237, 0.45)',
            }}
          >
            <div style={{ fontSize: 24, fontWeight: 600, color: 'white', fontFamily: 'sans-serif', display: 'flex' }}>
              Get your saving NOW — sign up free
            </div>
            <svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="white"
              strokeWidth="2.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              style={{ display: 'flex' }}
            >
              <path d="M14 5l7 7m0 0l-7 7m7-7H3" />
            </svg>
          </div>
        </div>
      </div>
    ),
    { ...size },
  )
}