import { ebookMeta } from "@/content/ebook";

export function BookCover({ className = "" }: { className?: string }) {
  return (
    <div
      className={`cover-float relative w-full max-w-[min(100%,300px)] sm:max-w-[320px] ${className}`}
    >
      <div
        className="cover-glow absolute -inset-6 rounded-[2rem] opacity-50 blur-2xl"
        aria-hidden
      />
      <div className="cover-card relative aspect-[3/4] overflow-hidden rounded-2xl shadow-2xl ring-1 ring-white/15">
        <div
          className="absolute inset-0 bg-[radial-gradient(ellipse_at_30%_12%,rgba(255,255,255,0.22),transparent_55%)]"
          aria-hidden
        />
        <div
          className="absolute inset-0 bg-[linear-gradient(160deg,transparent_35%,rgba(0,0,0,0.4))]"
          aria-hidden
        />
        <div
          className="absolute left-0 top-0 h-full w-4 bg-gradient-to-r from-black/35 to-transparent"
          aria-hidden
        />
        <div className="absolute right-5 top-6 opacity-15" aria-hidden>
          <GlobeMark className="h-24 w-24 text-white" />
        </div>
        <div className="relative flex h-full flex-col justify-between p-7 text-white sm:p-8">
          <div className="flex items-center justify-between gap-2">
            <p className="text-[10px] font-bold uppercase tracking-[0.28em] text-white/75">
              Digital nomad
            </p>
            <span className="rounded-full border border-white/25 bg-white/10 px-2 py-0.5 font-mono text-[10px] text-white/90">
              EN
            </span>
          </div>
          <div>
            <h2 className="font-serif text-[1.7rem] font-medium leading-[1.1] tracking-tight sm:text-[1.9rem]">
              {ebookMeta.title}
            </h2>
            <p className="mt-3 text-xs leading-relaxed text-white/80 sm:text-sm">
              {ebookMeta.subtitle}
            </p>
          </div>
          <div>
            <p className="font-mono text-[10px] tracking-wider text-white/55">
              48.8566° N · Work from anywhere
            </p>
            <p className="mt-2 text-xs font-medium text-white/70">
              {ebookMeta.author}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

function GlobeMark({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="0.75"
    >
      <circle cx="12" cy="12" r="10" />
      <path d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 014-10z" />
    </svg>
  );
}
