import { mdiCalendarClock, mdiChartTimelineVariant, mdiHomeCity, mdiLogin, mdiShieldKeyOutline } from '@mdi/js'
import Head from 'next/head'
import Link from 'next/link'
import React, { ReactElement } from 'react'
import BaseButton from '../components/BaseButton'
import CardBox from '../components/CardBox'
import { getPageTitle } from '../config'
import LayoutGuest from '../layouts/Guest'

const featureCards = [
  {
    title: 'Front desk cockpit',
    description: 'Create walk-ins, see room availability, confirm arrivals, and move departures into housekeeping.',
    icon: mdiCalendarClock,
  },
  {
    title: 'Multi-hotel ready',
    description: 'Built around hotel-level operations, staff roles, and isolated workflows for owners and teams.',
    icon: mdiShieldKeyOutline,
  },
  {
    title: 'Revenue intelligence',
    description: 'A clean foundation for ADR, RevPAR, channel performance, and AI-assisted daily recommendations.',
    icon: mdiChartTimelineVariant,
  },
]

const stats = [
  ['10', 'hotel credentials'],
  ['50', 'demo rooms'],
  ['200+', 'reservation-ready records'],
  ['24/7', 'cloud PMS workflow'],
]

function Starter() {
  return (
    <>
      <Head>
        <title>{getPageTitle('HotelPilot PMS')}</title>
        <meta
          name="description"
          content="HotelPilot PMS is a modern multi-tenant property management system for reservations, front desk, housekeeping, billing, and reporting."
        />
      </Head>

      <main className="min-h-screen bg-slate-50 text-slate-950">
        <header className="sticky top-0 z-20 border-b border-white/70 bg-white/85 backdrop-blur-xl">
          <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
            <Link href="/" className="flex items-center gap-3">
              <span className="grid h-11 w-11 place-items-center rounded-2xl bg-blue-700 text-white shadow-lg shadow-blue-700/25">
                <span className="text-xl font-black">H</span>
              </span>
              <div>
                <p className="text-lg font-black tracking-tight">HotelPilot PMS</p>
                <p className="text-xs font-medium uppercase tracking-[0.24em] text-blue-600">Pilot operations</p>
              </div>
            </Link>
            <nav className="hidden items-center gap-8 text-sm font-semibold text-slate-600 md:flex">
              <a href="#workflow" className="hover:text-blue-700">Workflow</a>
              <a href="#modules" className="hover:text-blue-700">Modules</a>
              <a href="#mvp" className="hover:text-blue-700">First slice</a>
            </nav>
            <div className="flex items-center gap-3">
              <BaseButton href="/login" icon={mdiLogin} label="Login" color="whiteDark" />
              <BaseButton href="/front-desk" label="Open PMS" color="info" className="hidden border-blue-700 bg-blue-700 text-white hover:bg-blue-800 sm:inline-flex" />
            </div>
          </div>
        </header>

        <section className="relative overflow-hidden bg-[radial-gradient(circle_at_top_left,_#dbeafe,_transparent_36%),linear-gradient(135deg,#ffffff_0%,#eff6ff_50%,#e0f2fe_100%)]">
          <div className="absolute right-0 top-20 h-72 w-72 rounded-full bg-cyan-300/30 blur-3xl" />
          <div className="absolute bottom-0 left-10 h-80 w-80 rounded-full bg-blue-600/10 blur-3xl" />
          <div className="mx-auto grid max-w-7xl gap-10 px-6 py-20 lg:grid-cols-[1.05fr_0.95fr] lg:items-center lg:py-28">
            <div className="relative z-10">
              <p className="mb-5 inline-flex items-center gap-2 rounded-full border border-blue-200 bg-white/80 px-4 py-2 text-sm font-bold text-blue-800 shadow-sm">
                <span className="h-2 w-2 rounded-full bg-emerald-500" /> New MVP slice live: front desk operations
              </p>
              <h1 className="max-w-4xl text-5xl font-black tracking-[-0.05em] text-slate-950 md:text-7xl">
                A modern PMS command center for every hotel team.
              </h1>
              <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600">
                HotelPilot PMS brings reservations, room status, check-ins, check-outs, housekeeping, billing, and reporting into a fast blue-white SaaS workspace designed for multi-property operators.
              </p>
              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <BaseButton href="/front-desk" label="Try front desk workflow" color="info" className="border-blue-700 bg-blue-700 px-6 py-3 text-white hover:bg-blue-800" />
                <BaseButton href="/login" label="Admin login" color="whiteDark" className="px-6 py-3" />
              </div>
              <div className="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-4">
                {stats.map(([value, label]) => (
                  <div key={label} className="rounded-3xl border border-white bg-white/70 p-4 shadow-sm backdrop-blur">
                    <p className="text-3xl font-black text-blue-700">{value}</p>
                    <p className="mt-1 text-xs font-semibold uppercase tracking-wide text-slate-500">{label}</p>
                  </div>
                ))}
              </div>
            </div>

            <div className="relative z-10">
              <div className="rounded-[2rem] border border-white bg-white/80 p-4 shadow-2xl shadow-blue-900/10 backdrop-blur-xl">
                <div className="rounded-[1.5rem] bg-slate-950 p-4 text-white">
                  <div className="mb-5 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <span className="rounded-2xl bg-blue-500 p-3"><span className="text-lg">☑</span></span>
                      <div>
                        <p className="font-bold">Sunset Resort</p>
                        <p className="text-xs text-slate-400">Today&apos;s command center</p>
                      </div>
                    </div>
                    <span className="rounded-full bg-emerald-400/10 px-3 py-1 text-xs font-bold text-emerald-300">Live</span>
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    {[
                      ['78%', 'Occupancy'],
                      ['$8.4k', 'Revenue today'],
                      ['14', 'Arrivals'],
                      ['9', 'Dirty rooms'],
                    ].map(([value, label]) => (
                      <div key={label} className="rounded-2xl bg-white/10 p-4">
                        <p className="text-2xl font-black">{value}</p>
                        <p className="text-xs text-slate-400">{label}</p>
                      </div>
                    ))}
                  </div>
                  <div className="mt-4 rounded-2xl bg-white p-4 text-slate-900">
                    <div className="mb-3 flex items-center justify-between">
                      <p className="font-black">Availability pulse</p>
                      <span className="text-xs font-bold text-blue-700">7-day view</span>
                    </div>
                    <div className="space-y-2">
                      {['101 Standard', '201 Deluxe Ocean', '301 Family Suite', '401 Executive'].map((room, index) => (
                        <div key={room} className="grid grid-cols-[7rem_1fr] items-center gap-3 text-xs">
                          <span className="font-semibold text-slate-500">{room}</span>
                          <span className={`h-8 rounded-full ${index === 1 ? 'bg-blue-600' : index === 2 ? 'bg-amber-300' : 'bg-emerald-300'}`} />
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="workflow" className="mx-auto max-w-7xl px-6 py-16">
          <div className="mb-10 max-w-3xl">
            <p className="mb-3 inline-flex rounded-full bg-blue-100 px-3 py-1 text-xs font-black uppercase tracking-[0.2em] text-blue-700">Workflow-first MVP</p>
            <h2 className="text-4xl font-black tracking-tight">Not just tables — an actual daily hotel flow.</h2>
            <p className="mt-3 text-slate-600">The first delivery stitches together the operational path a front desk agent needs most often.</p>
          </div>
          <div className="grid gap-5 md:grid-cols-4">
            {['Search availability', 'Register guest', 'Confirm reservation', 'Check in / housekeeping'].map((step, index) => (
              <div key={step} className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
                <span className="mb-5 inline-grid h-10 w-10 place-items-center rounded-2xl bg-blue-700 text-sm font-black text-white">{index + 1}</span>
                <p className="text-lg font-black">{step}</p>
                <p className="mt-2 text-sm leading-6 text-slate-500">Built into the new authenticated front desk cockpit for staff.</p>
              </div>
            ))}
          </div>
        </section>

        <section id="modules" className="bg-white py-16">
          <div className="mx-auto max-w-7xl px-6">
            <div className="grid gap-5 lg:grid-cols-3">
              {featureCards.map((feature) => (
                <CardBox key={feature.title} className="border-0 bg-slate-50 shadow-sm ring-1 ring-slate-100">
                  <div className="mb-5 inline-grid h-14 w-14 place-items-center rounded-2xl bg-blue-700 text-white">
                    <span className="text-xl">✦</span>
                  </div>
                  <h3 className="text-2xl font-black tracking-tight">{feature.title}</h3>
                  <p className="mt-3 leading-7 text-slate-600">{feature.description}</p>
                </CardBox>
              ))}
            </div>
          </div>
        </section>

        <section id="mvp" className="mx-auto max-w-7xl px-6 py-16">
          <div className="overflow-hidden rounded-[2rem] bg-blue-700 p-8 text-white shadow-xl shadow-blue-700/20 md:p-12">
            <div className="grid gap-8 lg:grid-cols-[1fr_0.7fr] lg:items-center">
              <div>
                <p className="mb-3 inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-xs font-black uppercase tracking-[0.2em] text-blue-100">
                  <span>✦</span> First iteration
                </p>
                <h2 className="text-4xl font-black tracking-tight">Open the PMS and run a booking from input to operational status.</h2>
                <p className="mt-4 max-w-2xl leading-7 text-blue-50">
                  This public page keeps the login path visible and sends authenticated users into the new Front Desk page. Existing admin CRUD remains available for deeper data management.
                </p>
              </div>
              <div className="flex flex-col gap-3 sm:flex-row lg:flex-col">
                <BaseButton href="/front-desk" icon={mdiHomeCity} label="Launch Front Desk" color="white" className="py-3" />
                <BaseButton href="/login" icon={mdiLogin} label="Go to admin login" color="white" outline className="border-white py-3 text-white hover:bg-white/10" />
              </div>
            </div>
          </div>
        </section>
      </main>
    </>
  )
}

Starter.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>
}

export default Starter
