import React from 'react'
import { usePage } from '@inertiajs/react'
import SeoHead from '../../components/seo/SeoHead'
import WorldCard from '../../components/worlds/WorldCard'

function WorldRail({ title, description, items }) {
  if (!Array.isArray(items) || items.length === 0) {
    return null
  }

  return (
    <section className="mt-10">
      <div className="mb-5 flex items-end justify-between gap-4">
        <div>
          <h2 className="text-2xl font-semibold tracking-[-0.03em] text-white">{title}</h2>
          {description ? <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">{description}</p> : null}
        </div>
        <div className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">{items.length} worlds</div>
      </div>
      <div className="grid gap-4 xl:grid-cols-3">
        {items.map((world) => <WorldCard key={world.id} world={world} compact />)}
      </div>
    </section>
  )
}

export default function WorldIndex() {
  const { props } = usePage()

  return (
    <main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(249,115,22,0.12),_transparent_28%),radial-gradient(circle_at_top_right,_rgba(56,189,248,0.12),_transparent_32%),linear-gradient(180deg,_#020617_0%,_#02040a_100%)] px-4 py-10 sm:px-6 lg:px-8">
      <SeoHead title={props.seo?.title || 'Worlds - Skinbase Nova'} description={props.seo?.description || props.description} image={props.seo?.image} />
      <div className="mx-auto max-w-7xl">
        <section className="rounded-[36px] border border-white/10 bg-white/[0.03] p-6 sm:p-8">
          <div className="max-w-4xl">
            <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/70">Skinbase Nova Worlds</p>
            <h1 className="mt-4 text-4xl font-semibold tracking-[-0.05em] text-white sm:text-5xl">Curated spaces for seasonal culture, scene moments, and editorial campaigns.</h1>
            <p className="mt-5 max-w-3xl text-base leading-7 text-slate-300">Worlds bundle together artworks, collections, creators, groups, cards, releases, events, challenges, and newsroom context into a single themed destination. They are not filters. They are editorial environments.</p>
          </div>
        </section>

        {props.featuredWorld ? <section className="mt-8"><WorldCard world={props.featuredWorld} /></section> : null}

        <WorldRail
          title="Active Worlds"
          description="Campaigns and seasonal surfaces currently live across the platform."
          items={props.activeWorlds}
        />

        <WorldRail
          title="Upcoming Worlds"
          description="Scheduled worlds in the pipeline, ready to anchor the next publishing moment."
          items={props.upcomingWorlds}
        />

        <WorldRail
          title="Archive Editions"
          description="Past worlds stay available as browsable records of recurring culture and editorial programming."
          items={props.archivedWorlds}
        />
      </div>
    </main>
  )
}