Shumiland/src/app/(frontend)/kvytky/dyakuiemo/page.tsx

import type { Metadata } from 'next'
import Link from 'next/link'

export const metadata: Metadata = {
  title: 'Дякуємо за покупку — Шуміленд',
  description: 'Ваші квитки відправлені на email.',
}

const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }

export default function DyakuiemoPage() {
  return (
    <main
      className="relative flex min-h-screen items-center justify-center overflow-hidden px-4 py-20"
      style={{
        background: 'linear-gradient(135deg, #1e3610 0%, #2d5414 40%, #396817 70%, #1e3610 100%)',
      }}
    >
      {/* Background texture */}
      <div
        className="pointer-events-none absolute inset-0 opacity-20"
        aria-hidden="true"
        style={{
          backgroundImage: `url('/images/page-hero-default.webp')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          mixBlendMode: 'luminosity',
        }}
      />

      {/* Ticket card */}
      <div
        className="relative z-10 w-full max-w-[760px] overflow-hidden rounded-[24px] shadow-[0_24px_80px_rgba(0,0,0,0.45)]"
        style={{ background: '#f5c140' }}
        role="main"
        aria-label="Підтвердження замовлення"
      >
        <div className="flex min-h-[340px] lg:min-h-[400px]">
          {/* Left: content */}
          <div className="flex flex-1 flex-col justify-center px-8 py-10 lg:px-14 lg:py-12">
            <h1
              className="mb-4 text-[36px] leading-[1.1] font-black text-[#1a1a1a] uppercase lg:text-[52px]"
              style={FONT_MONT}
            >
              Дякуємо
              <br />
              за покупку
            </h1>
            <p
              className="mb-8 text-[16px] leading-[1.5] font-bold text-[#1a1a1a]/80 lg:text-[20px]"
              style={FONT_MONT}
            >
              Ваші квитки відправлені на email.
            </p>
            <Link
              href="/kvytky"
              className="inline-flex w-fit items-center gap-2 rounded-full px-7 py-3.5 text-[15px] font-bold text-white transition-opacity hover:opacity-85"
              style={{ background: '#3b39b5', ...FONT_MONT }}
            >
              Купити ще квиток
            </Link>
          </div>

          {/* Divider with notches */}
          <div className="relative hidden flex-none items-center sm:flex">
            {/* Notch top */}
            <div
              className="absolute top-0 left-1/2 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-full"
              style={{ background: 'linear-gradient(135deg, #1e3610 0%, #396817 100%)' }}
              aria-hidden="true"
            />
            {/* Dashed line */}
            <div
              className="h-full w-[2px]"
              style={{
                background:
                  'repeating-linear-gradient(to bottom, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 8px, transparent 8px, transparent 16px)',
              }}
            />
            {/* Notch bottom */}
            <div
              className="absolute bottom-0 left-1/2 h-10 w-10 -translate-x-1/2 translate-y-1/2 rounded-full"
              style={{ background: 'linear-gradient(135deg, #1e3610 0%, #396817 100%)' }}
              aria-hidden="true"
            />
          </div>

          {/* Right: perforation dots */}
          <div
            className="hidden flex-none flex-col items-center justify-center gap-3 px-6 sm:flex lg:px-8"
            aria-hidden="true"
          >
            {Array.from({ length: 11 }).map((_, i) => (
              <div
                key={i}
                className="rounded-full"
                style={{
                  width: i === 5 ? 16 : 10,
                  height: i === 5 ? 16 : 10,
                  background: `rgba(26,26,26,${i === 5 ? 0.35 : 0.2})`,
                }}
              />
            ))}
          </div>
        </div>
      </div>

      {/* Back to home link */}
      <Link
        href="/"
        className="absolute bottom-8 left-1/2 -translate-x-1/2 text-[13px] font-medium text-white/60 underline underline-offset-4 transition-colors hover:text-white/90"
        style={FONT_MONT}
      >
        На головну
      </Link>
    </main>
  )
}