import React from 'react'

/**
 * Upload CTA banner — shown at the bottom of both guest and logged-in homepages.
 */
export default function HomeCTA({ isLoggedIn }) {
  const uploadHref = isLoggedIn ? '/upload' : '/login?redirect=/upload'

  return (
    <section className="mt-14 px-4 sm:px-6 lg:px-8">
      <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-accent/20 via-nova-800 to-nova-900 px-8 py-12 text-center ring-1 ring-white/5">
        {/* Decorative blobs */}
        <div className="pointer-events-none absolute -top-12 -right-12 h-40 w-40 rounded-full bg-accent/10 blur-3xl" />
        <div className="pointer-events-none absolute -bottom-10 -left-10 h-32 w-32 rounded-full bg-sky-500/10 blur-2xl" />

        <div className="relative z-10">
          <p className="text-xs font-semibold uppercase tracking-widest text-accent">Join the community</p>
          <h2 className="mt-2 text-2xl font-bold text-white sm:text-3xl">
            Ready to share your creativity?
          </h2>
          <p className="mx-auto mt-3 max-w-md text-sm text-nova-300">
            Upload your artworks, wallpapers, and skins to reach thousands of enthusiasts around the world.
          </p>
          <div className="mt-6 flex flex-wrap justify-center gap-3">
            <a
              href={uploadHref}
              className="rounded-xl bg-accent px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-accent/20 transition hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
            >
              Upload your artwork
            </a>
            {!isLoggedIn && (
              <a
                href="/register"
                className="rounded-xl border border-white/10 bg-nova-700 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-nova-600"
              >
                Create account
              </a>
            )}
          </div>
        </div>
      </div>
    </section>
  )
}