import {
  mdiArrowTopRight,
  mdiCalendarCheck,
  mdiCheckDecagram,
  mdiFileDocument,
  mdiHomeCity,
  mdiRoomService,
  mdiShieldLockOutline,
} from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement } from 'react';

import BaseButton from '../components/BaseButton';
import BaseDivider from '../components/BaseDivider';
import BaseIcon from '../components/BaseIcon';
import CardBox from '../components/CardBox';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';

const platformHighlights = [
  {
    title: 'Corporate accounts',
    description: 'Manage negotiated rate plans, account history, billing rules, and repeat-booker relationships.',
    icon: mdiShieldLockOutline,
  },
  {
    title: 'Reservation control',
    description: 'Move a stay from request to approval, inventory assignment, confirmation, arrival, and post-stay handling.',
    icon: mdiCalendarCheck,
  },
  {
    title: 'Concierge operations',
    description: 'Track airport pickup, housekeeping, maintenance, extension, and custom guest service requests.',
    icon: mdiRoomService,
  },
  {
    title: 'Finance visibility',
    description: 'Issue invoices, watch overdue exposure, and keep executive housing accounts commercially disciplined.',
    icon: mdiFileDocument,
  },
];

const workflowSteps = [
  'Corporate booker submits a stay request',
  'Approver reviews against policy and budget',
  'Reservations team quotes and allocates inventory',
  'Traveler receives confirmed stay details',
  'Concierge and finance teams manage service and billing',
];

export default function HomePage() {
  return (
    <>
      <Head>
        <title>{getPageTitle('Gracey Corporate Stay Portal')}</title>
      </Head>
      <main className="min-h-screen bg-[#f4f6f8] text-slate-950">
        <section className="border-b border-slate-200 bg-[#0b1220] text-white">
          <div className="mx-auto flex max-w-7xl flex-col gap-12 px-6 py-6 lg:px-10">
            <div className="flex items-center justify-between gap-4">
              <div>
                <div className="text-xs uppercase tracking-[0.28em] text-slate-400">Gracey Corporate Stay Portal</div>
                <div className="mt-2 text-sm text-slate-300">Executive software for serviced apartments, embassy housing, and long-stay corporate operations.</div>
              </div>
              <div className="flex flex-wrap gap-3">
                <BaseButton href="/login" color="whiteDark" label="Login" />
                <BaseButton href="/command-center" color="info" label="Open workspace" />
              </div>
            </div>

            <div className="grid gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:items-end">
              <div>
                <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs uppercase tracking-[0.24em] text-slate-300">
                  <BaseIcon path={mdiHomeCity} className="text-slate-100" />
                  Luxury corporate stay operations
                </div>
                <h1 className="mt-6 max-w-4xl text-4xl font-semibold leading-tight text-white md:text-6xl">
                  The control layer for premium furnished inventory, approvals, guest logistics, and invoice billing.
                </h1>
                <p className="mt-6 max-w-2xl text-base leading-8 text-slate-300">
                  Gracey helps serviced-apartment operators win repeat institutional accounts with faster quoting,
                  cleaner approval workflows, better arrival readiness, and a more executive operating posture.
                </p>
                <div className="mt-8 flex flex-wrap gap-3">
                  <BaseButton href="/command-center" color="info" label="Open command center" icon={mdiArrowTopRight} />
                  <BaseButton href="/booking_requests/booking_requests-list" color="whiteDark" label="Review booking workflow" />
                </div>
              </div>

              <CardBox className="border border-white/10 bg-white/5 text-white shadow-[0_30px_80px_-40px_rgba(15,23,42,0.9)]">
                <div className="grid gap-4 md:grid-cols-2">
                  <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
                    <div className="text-xs uppercase tracking-[0.2em] text-slate-400">Use cases</div>
                    <div className="mt-2 text-2xl font-semibold text-white">Corporate teams, NGOs, embassies</div>
                    <div className="mt-2 text-sm leading-6 text-slate-300">Built for medium-stay housing that needs negotiated rates, approvals, and invoice-grade accountability.</div>
                  </div>
                  <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
                    <div className="text-xs uppercase tracking-[0.2em] text-slate-400">Operational posture</div>
                    <div className="mt-2 text-2xl font-semibold text-white">Cold, executive, credible</div>
                    <div className="mt-2 text-sm leading-6 text-slate-300">No consumer fluff. Just the controls needed to run luxury serviced inventory for professional clients.</div>
                  </div>
                </div>
              </CardBox>
            </div>
          </div>
        </section>

        <section className="mx-auto max-w-7xl px-6 py-16 lg:px-10">
          <div className="grid gap-6 lg:grid-cols-4">
            {platformHighlights.map((item) => (
              <CardBox key={item.title} className="border border-slate-200 bg-white shadow-[0_20px_60px_-40px_rgba(15,23,42,0.45)]">
                <div className="rounded-2xl bg-slate-950 p-3 text-white w-fit">
                  <BaseIcon path={item.icon} size={20} />
                </div>
                <h2 className="mt-5 text-2xl font-semibold text-slate-950">{item.title}</h2>
                <p className="mt-3 text-sm leading-7 text-slate-600">{item.description}</p>
              </CardBox>
            ))}
          </div>
        </section>

        <section className="mx-auto max-w-7xl px-6 pb-16 lg:px-10">
          <div className="grid gap-8 lg:grid-cols-[0.95fr_1.05fr]">
            <CardBox className="border border-slate-200 bg-white shadow-[0_20px_60px_-40px_rgba(15,23,42,0.45)]">
              <div className="text-xs uppercase tracking-[0.24em] text-slate-500">First delivered workflow</div>
              <h2 className="mt-3 text-3xl font-semibold text-slate-950">Corporate stay booking lifecycle</h2>
              <p className="mt-4 text-sm leading-7 text-slate-600">
                The initial slice connects the public brand front door to a live authenticated command center, then into the existing request, approval, reservation, concierge, and finance records.
              </p>
              <BaseDivider />
              <div className="space-y-4">
                {workflowSteps.map((step, index) => (
                  <div key={step} className="flex gap-4 rounded-2xl border border-slate-200 bg-slate-50 p-4">
                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-slate-950 text-sm font-semibold text-white">
                      {index + 1}
                    </div>
                    <div className="text-sm leading-7 text-slate-700">{step}</div>
                  </div>
                ))}
              </div>
            </CardBox>

            <CardBox className="border border-slate-200 bg-[#0f172a] text-white shadow-[0_24px_70px_-38px_rgba(15,23,42,0.8)]">
              <div className="text-xs uppercase tracking-[0.24em] text-slate-400">Immediate access</div>
              <h2 className="mt-3 text-3xl font-semibold text-white">Choose your entry point</h2>
              <p className="mt-4 text-sm leading-7 text-slate-300">
                Enter the authenticated workspace to manage live operations, or go straight to the broader admin environment.
              </p>
              <div className="mt-8 grid gap-4 sm:grid-cols-2">
                <div className="rounded-2xl border border-white/10 bg-white/5 p-5">
                  <div className="text-xs uppercase tracking-[0.2em] text-slate-400">Operations</div>
                  <div className="mt-2 text-2xl font-semibold text-white">Command center</div>
                  <div className="mt-2 text-sm leading-6 text-slate-300">Live view across bookings, reservations, service pressure, and invoice exposure.</div>
                  <div className="mt-5">
                    <BaseButton href="/command-center" color="info" label="Open workspace" />
                  </div>
                </div>
                <div className="rounded-2xl border border-white/10 bg-white/5 p-5">
                  <div className="text-xs uppercase tracking-[0.2em] text-slate-400">Administration</div>
                  <div className="mt-2 text-2xl font-semibold text-white">Role-based workspace</div>
                  <div className="mt-2 text-sm leading-6 text-slate-300">Land in one shared command center, then branch into the modules your role actually owns.</div>
                  <div className="mt-5">
                    <BaseButton href="/command-center" color="whiteDark" label="Open workspace" />
                  </div>
                </div>
              </div>
            </CardBox>
          </div>
        </section>
      </main>
    </>
  );
}

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