import { Compass } from '../../lib/icons'

export function NoKey() {
  return (
    <div className="px-7 py-20 max-w-xl mx-auto text-center">
      <div className="relative w-14 h-14 mx-auto mb-5">
        <div className="absolute inset-0 rounded-full bg-accent/10 blur-xl" />
        <div className="relative w-full h-full rounded-full bg-gradient-to-br from-elevated to-surface ring-1 ring-border grid place-items-center">
          <Compass size={20} className="text-text-3" />
        </div>
      </div>
      <h1 className="font-display text-[22px] font-bold text-text-1 tracking-tight mb-2">
        Discover needs a TMDB key
      </h1>
      <p className="text-[13px] text-text-3 leading-relaxed mb-5">
        This page surfaces films and shows you don't already own. It pulls trending, top-rated, upcoming, by-genre, by-language, by-studio, and by-network rows from TMDB - all of which require an API key to load.
      </p>
      <a
        href="/settings#tmdb"
        className="inline-flex items-center gap-2 h-9 px-4 rounded-full bg-accent text-void font-semibold text-[12.5px] hover:bg-accent-hover transition focus-ring"
      >
        Open TMDB settings
      </a>
    </div>
  )
}

export function Hero() {
  return (
    <div className="px-7 pt-7 pb-5">
      <div className="flex items-center gap-2 mb-1.5">
        <span className="w-1 h-3 rounded-full bg-accent" />
        <span className="text-[10px] font-semibold text-text-3 uppercase tracking-[0.2em]">
          Discover
        </span>
      </div>
      <h1 className="font-display text-[26px] md:text-[30px] font-bold tracking-tight text-text-1 leading-[1.1] mb-1">
        Find your next favorite
      </h1>
      <p className="text-[12.5px] text-text-3 max-w-xl">
        Films and shows you don't have yet, sourced from TMDB.
      </p>
    </div>
  )
}

export function SectionHeader({ eyebrow, title, subtitle }: { eyebrow: string; title: string; subtitle: string }) {
  return (
    <div className="px-7 mb-5 pt-6">
      <div className="flex items-center gap-2 mb-1">
        <span className="w-1 h-3.5 rounded-full bg-accent" />
        <span className="text-[10.5px] font-semibold text-text-3 uppercase tracking-[0.18em]">{eyebrow}</span>
      </div>
      <h2 className="font-display text-[20px] font-bold tracking-tight text-text-1 leading-tight">{title}</h2>
      <p className="text-[12px] text-text-3 mt-0.5">{subtitle}</p>
    </div>
  )
}
