import { Head } from '@inertiajs/react'

export default function Home({ auth, hotelName }) {
  return (
    <>
      <Head title="Home" />
      <div className="col-span-12">
        <div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm p-8 text-center">
          <h1 className="text-4xl font-bold mb-4" style={{ color: 'var(--color-text)' }}>
            Welkom bij {hotelName}
          </h1>
          <p className="text-lg" style={{ color: 'var(--color-text-muted)' }}>
            Dit is een Inertia.js pagina — zelfde layout, zelfde Tailwind, zelfde stijlen.
          </p>
          <div className="mt-8 flex justify-center gap-4">
            <a
              href="/"
              className="px-6 py-3 rounded-xl font-semibold transition-all duration-200 hover:scale-105"
              style={{
                backgroundColor: 'var(--color-primary)',
                color: 'var(--button-text-color)',
              }}
            >
              Naar huis
            </a>
          </div>
        </div>
      </div>
    </>
  )
}
