import {
  mdiBookmarkOutline,
  mdiCheckCircleOutline,
  mdiFire,
  mdiPlayCircle,
  mdiStarOutline,
  mdiTelevisionClassic,
} from '@mdi/js';
import Head from 'next/head';
import Link from 'next/link';
import type { ReactElement } from 'react';
import React from 'react';
import BaseButton from '../components/BaseButton';
import BaseIcon from '../components/BaseIcon';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';

const featureCards = [
  {
    icon: mdiPlayCircle,
    title: 'Browse & search titles',
    description: 'Explore a movie and TV catalog with a cinematic layout built for quick discovery.',
  },
  {
    icon: mdiBookmarkOutline,
    title: 'Build personal watchlists',
    description: 'Save titles into your own queue and keep a clear next-up list instead of scattered notes.',
  },
  {
    icon: mdiCheckCircleOutline,
    title: 'Track watching progress',
    description: 'Move titles from plan to watch, to watching, to watched with a clean, focused workflow.',
  },
];

const highlightPills = [
  { icon: mdiFire, label: 'Trending rails' },
  { icon: mdiStarOutline, label: 'Recommendations' },
  { icon: mdiTelevisionClassic, label: 'Movies + TV shows' },
];

export default function Starter() {
  return (
    <>
      <Head>
        <title>{getPageTitle('Movies & TV Tracker')}</title>
      </Head>

      <div className='min-h-screen bg-[#07080d] text-white'>
        <div className='mx-auto flex min-h-screen max-w-7xl flex-col px-6 py-6 sm:px-8 lg:px-10'>
          <header className='flex flex-col gap-4 rounded-full border border-white/10 bg-white/5 px-5 py-4 backdrop-blur md:flex-row md:items-center md:justify-between'>
            <div>
              <div className='text-xs font-semibold uppercase tracking-[0.28em] text-violet-200'>Movies & TV Tracker</div>
              <div className='mt-1 text-sm text-slate-400'>Modern, dark, cinematic watchlist experience.</div>
            </div>
            <div className='flex flex-wrap gap-3'>
              <BaseButton href='/login' color='whiteDark' label='Login' />
              <BaseButton href='/dashboard' color='info' label='Admin interface' />
            </div>
          </header>

          <main className='flex flex-1 items-center py-10 lg:py-16'>
            <div className='grid w-full gap-8 lg:grid-cols-[1.15fr_0.85fr] lg:items-center'>
              <section>
                <span className='inline-flex items-center rounded-full border border-violet-400/25 bg-violet-500/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.24em] text-violet-100'>
                  Your own movie & TV app starts here
                </span>
                <h1 className='mt-6 max-w-3xl text-4xl font-semibold leading-tight sm:text-5xl lg:text-6xl'>
                  Track what to watch next with a dark, youthful, cinema-inspired product shell.
                </h1>
                <p className='mt-6 max-w-2xl text-base leading-8 text-slate-300 sm:text-lg'>
                  Turn the seed SaaS app into a viewer-facing experience: discover titles, save them to a personal watchlist,
                  mark progress, and keep a polished admin back office for managing the catalog.
                </p>

                <div className='mt-8 flex flex-wrap gap-3'>
                  <BaseButton href='/watch-hub' color='info' label='Open watch hub' icon={mdiPlayCircle} />
                  <BaseButton href='/login' color='whiteDark' label='Sign in to continue' />
                </div>

                <div className='mt-8 flex flex-wrap gap-3'>
                  {highlightPills.map((pill) => (
                    <div
                      key={pill.label}
                      className='inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-slate-200'
                    >
                      <BaseIcon path={pill.icon} size={15} className='text-violet-200' />
                      {pill.label}
                    </div>
                  ))}
                </div>
              </section>

              <section className='relative'>
                <div className='absolute inset-0 rounded-[2rem] bg-[radial-gradient(circle_at_top_left,_rgba(99,102,241,0.35),_transparent_35%),radial-gradient(circle_at_bottom_right,_rgba(244,63,94,0.22),_transparent_36%)] blur-2xl' />
                <div className='relative overflow-hidden rounded-[2rem] border border-white/10 bg-[linear-gradient(145deg,rgba(10,12,18,0.98),rgba(30,27,75,0.65))] p-6 shadow-2xl shadow-black/40'>
                  <div className='mb-5 flex items-center justify-between'>
                    <div>
                      <div className='text-xs uppercase tracking-[0.24em] text-slate-400'>First MVP slice</div>
                      <div className='mt-2 text-2xl font-semibold'>Watch hub</div>
                    </div>
                    <span className='rounded-full bg-emerald-500/15 px-3 py-1 text-xs font-medium text-emerald-200'>Live workflow</span>
                  </div>

                  <div className='grid gap-4'>
                    {featureCards.map((feature, index) => (
                      <div key={feature.title} className='rounded-3xl border border-white/10 bg-black/20 p-5'>
                        <div className='flex items-center gap-3'>
                          <div className='flex h-11 w-11 items-center justify-center rounded-2xl bg-white/5'>
                            <BaseIcon path={feature.icon} className='text-violet-200' />
                          </div>
                          <div>
                            <div className='text-xs uppercase tracking-[0.24em] text-slate-500'>Step {index + 1}</div>
                            <h2 className='mt-1 text-lg font-semibold text-white'>{feature.title}</h2>
                          </div>
                        </div>
                        <p className='mt-4 text-sm leading-7 text-slate-300'>{feature.description}</p>
                      </div>
                    ))}
                  </div>
                </div>
              </section>
            </div>
          </main>

          <footer className='flex flex-col items-start justify-between gap-4 border-t border-white/10 py-6 text-sm text-slate-400 sm:flex-row sm:items-center'>
            <p>Built for movie nights, TV binges, and a cleaner personal watch queue.</p>
            <div className='flex flex-wrap gap-4'>
              <Link href='/privacy-policy' className='transition hover:text-white'>
                Privacy Policy
              </Link>
              <Link href='/terms-of-use' className='transition hover:text-white'>
                Terms of Use
              </Link>
            </div>
          </footer>
        </div>
      </div>
    </>
  );
}

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