import { mdiArrowRight, mdiCalendarCheckOutline, mdiLogin, mdiSchoolOutline, mdiViewDashboardOutline } from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement } from 'react';
import BaseButton from '../components/BaseButton';
import CardBox from '../components/CardBox';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';

type FeatureCardProps = {
  eyebrow: string;
  title: string;
  description: string;
};

const FeatureCard = ({ eyebrow, title, description }: FeatureCardProps) => (
  <CardBox className="h-full border border-white/70 bg-white/90 shadow-sm backdrop-blur">
    <p className="text-xs font-semibold uppercase tracking-[0.2em] text-sky-600">{eyebrow}</p>
    <h3 className="mt-3 text-xl font-semibold text-slate-900">{title}</h3>
    <p className="mt-3 text-sm leading-7 text-slate-500">{description}</p>
  </CardBox>
);

export default function HomePage() {
  return (
    <>
      <Head>
        <title>{getPageTitle('School Portal')}</title>
        <meta
          name="description"
          content="School portal for staff, teachers, students and parents to manage schedules, attendance, grades, assignments and announcements."
        />
      </Head>

      <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(14,165,233,0.14),_transparent_35%),radial-gradient(circle_at_top_right,_rgba(16,185,129,0.12),_transparent_25%),linear-gradient(180deg,_#f8fbff_0%,_#eef6ff_48%,_#ffffff_100%)] text-slate-900">
        <header className="mx-auto flex w-full max-w-7xl items-center justify-between px-6 py-6 lg:px-10">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.28em] text-sky-600">Northstar Academy Suite</p>
            <h1 className="mt-2 text-lg font-semibold text-slate-900">Modern school operations + parent portal</h1>
          </div>
          <div className="flex flex-wrap items-center gap-3">
            <BaseButton href="/dashboard" color="whiteDark" icon={mdiViewDashboardOutline} label="Admin interface" />
            <BaseButton href="/login" color="info" icon={mdiLogin} label="Login" />
          </div>
        </header>

        <main className="mx-auto flex w-full max-w-7xl flex-col gap-10 px-6 pb-16 pt-4 lg:px-10 lg:pb-24 lg:pt-10">
          <section className="grid gap-10 lg:grid-cols-[1.2fr,0.8fr] lg:items-center">
            <div>
              <div className="inline-flex items-center rounded-full border border-sky-200 bg-white/80 px-4 py-2 text-sm font-medium text-sky-700 shadow-sm backdrop-blur">
                School-branded MVP • ready for staff + families
              </div>
              <h2 className="mt-6 max-w-3xl text-4xl font-semibold leading-tight text-slate-950 md:text-6xl">
                Keep classes moving with a clean school dashboard that feels built for real mornings.
              </h2>
              <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600">
                This first iteration gives your school a polished public landing page and a real teacher workflow for taking attendance end-to-end, while keeping the admin interface and portal foundation in place.
              </p>
              <div className="mt-8 flex flex-wrap gap-4">
                <BaseButton href="/attendance-hub" color="info" icon={mdiCalendarCheckOutline} label="Open attendance hub" />
                <BaseButton href="/dashboard" color="whiteDark" icon={mdiSchoolOutline} label="Open admin interface" />
              </div>
              <div className="mt-10 grid gap-4 sm:grid-cols-3">
                <CardBox className="border border-white/70 bg-white/90 shadow-sm">
                  <p className="text-sm font-semibold text-slate-500">For admins</p>
                  <p className="mt-2 text-2xl font-semibold text-slate-900">Students, classes, staff</p>
                </CardBox>
                <CardBox className="border border-white/70 bg-white/90 shadow-sm">
                  <p className="text-sm font-semibold text-slate-500">For teachers</p>
                  <p className="mt-2 text-2xl font-semibold text-slate-900">Attendance, grades, assignments</p>
                </CardBox>
                <CardBox className="border border-white/70 bg-white/90 shadow-sm">
                  <p className="text-sm font-semibold text-slate-500">For families</p>
                  <p className="mt-2 text-2xl font-semibold text-slate-900">Timetable, homework, updates</p>
                </CardBox>
              </div>
            </div>

            <CardBox className="overflow-hidden border-0 bg-gradient-to-br from-slate-950 via-sky-900 to-cyan-700 text-white shadow-2xl">
              <div className="rounded-3xl border border-white/10 bg-white/10 p-6 backdrop-blur">
                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-100">Today&apos;s highlight</p>
                <h3 className="mt-3 text-3xl font-semibold">Attendance Hub</h3>
                <p className="mt-3 text-sm leading-7 text-sky-100">
                  A focused operational flow where staff can pick a section, mark presence, save the session, and immediately review the latest attendance snapshot.
                </p>
                <div className="mt-6 space-y-3 text-sm text-sky-50">
                  <div className="flex items-center justify-between rounded-2xl bg-white/10 px-4 py-3">
                    <span>1. Select section + session time</span>
                    <span className="font-semibold">Fast setup</span>
                  </div>
                  <div className="flex items-center justify-between rounded-2xl bg-white/10 px-4 py-3">
                    <span>2. Mark students in one roster</span>
                    <span className="font-semibold">Clear status chips</span>
                  </div>
                  <div className="flex items-center justify-between rounded-2xl bg-white/10 px-4 py-3">
                    <span>3. Review latest saved sessions</span>
                    <span className="font-semibold">Immediate feedback</span>
                  </div>
                </div>
                <div className="mt-6">
                  <BaseButton href="/attendance-hub" color="success" icon={mdiArrowRight} label="Try the workflow" />
                </div>
              </div>
            </CardBox>
          </section>

          <section className="grid gap-6 lg:grid-cols-3">
            <FeatureCard
              eyebrow="Operations"
              title="School admin control"
              description="Manage the core records that keep a school running: students, parents, teachers, campuses, classes, sections, and events."
            />
            <FeatureCard
              eyebrow="Teaching"
              title="Teacher-friendly daily actions"
              description="Move the most frequent staff task into a dedicated flow, so attendance no longer feels like generic data entry."
            />
            <FeatureCard
              eyebrow="Portal"
              title="Student + parent visibility"
              description="Build toward a family-facing experience for schedules, assignments, messages, and announcements without opening public data by default."
            />
          </section>

          <section className="rounded-[2rem] border border-slate-200 bg-white/90 p-8 shadow-sm backdrop-blur lg:p-10">
            <div className="grid gap-6 lg:grid-cols-[1.2fr,0.8fr] lg:items-center">
              <div>
                <p className="text-xs font-semibold uppercase tracking-[0.2em] text-sky-600">What&apos;s included right now</p>
                <h3 className="mt-3 text-3xl font-semibold text-slate-900">A polished first win, not just a pretty shell.</h3>
                <p className="mt-4 max-w-2xl text-sm leading-7 text-slate-500">
                  Your seed app already has the school entities and CRUD. This first pass adds a branded front door and a meaningful workflow slice so you can validate the product direction quickly.
                </p>
              </div>
              <div className="space-y-3 rounded-[1.5rem] bg-slate-50 p-6">
                <div className="rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-600">✓ Public landing page with modern school branding</div>
                <div className="rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-600">✓ Clear path to login and admin interface</div>
                <div className="rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-600">✓ Attendance workflow tailored for staff</div>
              </div>
            </div>
          </section>
        </main>
      </div>
    </>
  );
}

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