import React from 'react'

const FALLBACK = 'https://files.skinbase.org/default/missing_lg.webp'
const HERO_SIZES = '100vw'

export default function HomeHero({ artwork }) {
  if (!artwork) {
    return (
      <section className="relative flex min-h-[62vh] max-h-[420px] w-full items-end overflow-hidden bg-nova-900 md:min-h-[38vh] md:max-h-[460px]">
        <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-nova-900 via-nova-900/60 to-transparent" />
        <div className="relative z-10 w-full px-6 pb-7 sm:px-10 lg:px-16">
          <h1 className="text-2xl font-bold tracking-tight text-white sm:text-4xl">
            Skinbase
          </h1>
          <p className="mt-2 max-w-xl text-sm text-soft">
            Discover. Create. Inspire.
          </p>
          <div className="mt-4 flex flex-wrap gap-3">
            <a href="/discover/trending" className="btn-accent-solid rounded-xl px-5 py-2 text-sm font-semibold">Explore Trending</a>
          </div>
        </div>
      </section>
    )
  }

  const src = artwork.thumb_lg || artwork.thumb || FALLBACK
  const srcSet = artwork.thumb_srcset || null

  return (
    <section className="group relative flex min-h-[62vh] max-h-[420px] w-full items-end overflow-hidden bg-nova-900 md:min-h-[38vh] md:max-h-[460px]">
      {/* Background image */}
      <img
        src={src}
        srcSet={srcSet || undefined}
        sizes={srcSet ? HERO_SIZES : undefined}
        alt={artwork.title}
        className="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
        fetchPriority="high"
        loading="eager"
        decoding="sync"
        onError={(e) => { e.currentTarget.src = FALLBACK }}
      />

      {/* Gradient overlay */}
      <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-nova-900 via-nova-900/55 to-transparent" />

      {/* Content */}
      <div className="relative z-10 w-full px-6 pb-7 sm:px-10 lg:px-16">
        <p className="mb-1.5 text-xs font-semibold uppercase tracking-widest text-accent">
          Featured Artwork
        </p>
        <h1 className="text-2xl font-bold tracking-tight text-white drop-shadow sm:text-4xl lg:text-5xl">
          {artwork.title}
        </h1>
        <p className="mt-1.5 text-sm text-soft">
          by <a href={artwork.url} className="text-nova-200 hover:text-white transition">{artwork.author}</a>
        </p>
        <div className="mt-4 flex flex-wrap gap-3">
          <a
            href="/discover/trending"
            className="btn-accent-solid rounded-xl px-5 py-2 text-sm font-semibold"
          >
            Explore Trending
          </a>
          <a
            href={artwork.url}
            className="rounded-xl border border-nova-600 px-5 py-2 text-sm font-semibold text-nova-200 shadow transition hover:border-nova-400 hover:text-white"
          >
            View Artwork
          </a>
        </div>
      </div>
    </section>
  )
}