import Head from 'next/head';
import Link from 'next/link';
import type { ReactElement } from 'react';
import CardBox from '../components/CardBox';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';

const heroMetrics = [
  { label: 'Cabang aktif', value: '4 outlet' },
  { label: 'Skala tim', value: '±250 karyawan' },
  { label: 'Core flow', value: 'Absensi → Payroll → KPI' },
];

const modules = [
  {
    title: 'Absensi mobile web',
    text: 'Check-in/out via HP dengan GPS radius outlet, selfie wajib, dan status hadir/telat/izin/sakit/dinas.',
  },
  {
    title: 'Payroll generator FnB',
    text: 'Hitung gaji pokok, makan-transport, lembur, service charge, bonus omzet, KPI, dan deduction dalam satu draft payroll.',
  },
  {
    title: 'KPI 5 indikator',
    text: 'Absensi, disiplin, produktivitas, attitude, dan SOP dengan skor final untuk tunjangan kinerja yang transparan.',
  },
  {
    title: 'WA-ready operations',
    text: 'Struktur payslip, status delivery, dan notifikasi payroll sudah siap diperluas ke WhatsApp pada iterasi berikutnya.',
  },
];

const roles = [
  {
    title: 'HR / Superadmin',
    text: 'Global dashboard, master data, setting komponen gaji, generate & approve payroll, serta reporting lintas outlet.',
  },
  {
    title: 'Manager Outlet',
    text: 'Input lembur, izin/sakit/dinas, omzet cabang, KPI, catatan, SP, dan data karyawan untuk outlet masing-masing.',
  },
  {
    title: 'Finance',
    text: 'Salary checking, validasi payroll outlet, input pinjaman, dan monitoring pembayaran gaji.',
  },
  {
    title: 'Employee Self Service',
    text: 'Absensi pribadi, riwayat kehadiran, slip gaji, dan update data diri dalam pengalaman mobile-friendly.',
  },
];

const workflowSteps = [
  'Karyawan melakukan absensi mobile dengan GPS + foto selfie.',
  'Manager melengkapi input operasional: izin, sakit, lembur, omzet, dan KPI.',
  'Finance memeriksa pinjaman serta validasi payroll outlet.',
  'HR membuka Payroll Workbench untuk preview, generate draft, review, lalu approve payslip.',
];

export default function LandingPage() {
  return (
    <>
      <Head>
        <title>{getPageTitle('HRIS FnB Multi Cabang')}</title>
        <meta
          name="description"
          content="HRIS FnB multi cabang untuk absensi GPS + selfie, payroll otomatis, KPI, dan operasional HR yang lebih rapi."
        />
      </Head>

      <div className="min-h-screen bg-[#F4F7FB] text-slate-900">
        <div className="relative overflow-hidden bg-slate-950 text-white">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(20,184,166,0.28),_transparent_36%),radial-gradient(circle_at_top_right,_rgba(59,130,246,0.22),_transparent_30%),linear-gradient(135deg,_#020617,_#0F172A_45%,_#042F2E)]" />
          <div className="relative mx-auto max-w-7xl px-6 py-6 lg:px-8">
            <header className="flex flex-col gap-4 border-b border-white/10 pb-6 md:flex-row md:items-center md:justify-between">
              <div>
                <div className="text-sm font-semibold uppercase tracking-[0.35em] text-teal-200">HRIS FnB Multi Cabang</div>
                <div className="mt-2 text-sm text-slate-300">
                  Mobile-friendly web app for attendance, payroll, KPI, and branch operations.
                </div>
              </div>
              <nav className="flex flex-wrap items-center gap-3">
                <Link
                  href="/login"
                  className="inline-flex items-center rounded-full border border-white/15 px-4 py-2 text-sm font-medium text-white transition hover:border-white/30 hover:bg-white/5"
                >
                  Login
                </Link>
                <Link
                  href="/dashboard"
                  className="inline-flex items-center rounded-full bg-teal-400 px-4 py-2 text-sm font-semibold text-slate-950 transition hover:bg-teal-300"
                >
                  Admin Interface
                </Link>
              </nav>
            </header>

            <div className="grid gap-12 py-16 lg:grid-cols-[1.1fr,0.9fr] lg:items-center">
              <div>
                <span className="inline-flex items-center rounded-full border border-white/10 bg-white/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.25em] text-teal-100">
                  Initial MVP slice already inside the admin app
                </span>
                <h1 className="mt-6 max-w-3xl text-4xl font-semibold leading-tight text-white md:text-6xl">
                  Payroll closure yang lebih cepat untuk operasional FnB multi outlet.
                </h1>
                <p className="mt-6 max-w-2xl text-base leading-8 text-slate-300 md:text-lg">
                  Dirancang untuk HR, Manager, Finance, dan Karyawan: absensi GPS + selfie, payroll otomatis,
                  KPI 5 indikator, service charge, bonus omzet, pinjaman, dan payslip yang siap dipakai di workflow harian.
                </p>
                <div className="mt-8 flex flex-wrap gap-4">
                  <Link
                    href="/login"
                    className="inline-flex items-center rounded-full bg-white px-6 py-3 text-sm font-semibold text-slate-950 transition hover:bg-slate-100"
                  >
                    Masuk ke aplikasi
                  </Link>
                  <Link
                    href="/dashboard"
                    className="inline-flex items-center rounded-full border border-white/15 px-6 py-3 text-sm font-semibold text-white transition hover:border-white/30 hover:bg-white/5"
                  >
                    Buka admin dashboard
                  </Link>
                </div>

                <div className="mt-10 grid gap-4 md:grid-cols-3">
                  {heroMetrics.map((metric) => (
                    <div
                      key={metric.label}
                      className="rounded-3xl border border-white/10 bg-white/10 px-4 py-5 backdrop-blur"
                    >
                      <div className="text-xs uppercase tracking-[0.2em] text-slate-300">{metric.label}</div>
                      <div className="mt-3 text-2xl font-semibold text-white">{metric.value}</div>
                    </div>
                  ))}
                </div>
              </div>

              <CardBox className="border-0 bg-white/95 shadow-2xl">
                <div className="rounded-[28px] bg-[linear-gradient(135deg,_#0F172A,_#1E293B_55%,_#0F766E)] p-6 text-white">
                  <div className="text-sm font-semibold uppercase tracking-[0.24em] text-teal-100">Highlighted first workflow</div>
                  <h2 className="mt-4 text-3xl font-semibold">Payroll Workbench</h2>
                  <p className="mt-4 text-sm leading-7 text-slate-200">
                    HR dapat memilih outlet + periode, melihat preview payroll dari data attendance/KPI/omzet yang sudah ada,
                    lalu generate draft payroll dan langsung lanjut ke detail period, payroll items, serta payslip.
                  </p>
                  <div className="mt-6 grid gap-3 text-sm text-slate-100">
                    <div className="rounded-2xl border border-white/10 bg-white/10 px-4 py-3">
                      Preview THP, overtime, bonus omzet, service charge, dan deduction sebelum approve.
                    </div>
                    <div className="rounded-2xl border border-white/10 bg-white/10 px-4 py-3">
                      Warning state untuk attendance/KPI yang masih kosong agar tim review lebih cepat.
                    </div>
                    <div className="rounded-2xl border border-white/10 bg-white/10 px-4 py-3">
                      Generate draft payroll run + payslip records lalu buka detail screen yang sudah tersedia.
                    </div>
                  </div>
                </div>
              </CardBox>
            </div>
          </div>
        </div>

        <main className="mx-auto max-w-7xl px-6 py-16 lg:px-8">
          <section>
            <div className="max-w-2xl">
              <p className="text-sm font-semibold uppercase tracking-[0.28em] text-teal-600">Core modules</p>
              <h2 className="mt-3 text-3xl font-semibold text-slate-950 md:text-4xl">
                Built around the real FnB HR workflow, not generic admin pages.
              </h2>
            </div>
            <div className="mt-8 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
              {modules.map((module) => (
                <CardBox key={module.title} className="border border-slate-200 shadow-sm">
                  <div className="text-lg font-semibold text-slate-950">{module.title}</div>
                  <p className="mt-3 text-sm leading-7 text-slate-500">{module.text}</p>
                </CardBox>
              ))}
            </div>
          </section>

          <section className="mt-16 grid gap-6 lg:grid-cols-[0.9fr,1.1fr]">
            <CardBox className="border border-slate-200 shadow-sm">
              <p className="text-sm font-semibold uppercase tracking-[0.28em] text-teal-600">Role-based operations</p>
              <h2 className="mt-3 text-3xl font-semibold text-slate-950">Setiap role dapat layar kerja yang relevan.</h2>
              <div className="mt-8 space-y-4">
                {roles.map((role) => (
                  <div key={role.title} className="rounded-3xl border border-slate-200 bg-slate-50 p-5">
                    <div className="text-lg font-semibold text-slate-950">{role.title}</div>
                    <p className="mt-2 text-sm leading-7 text-slate-500">{role.text}</p>
                  </div>
                ))}
              </div>
            </CardBox>

            <CardBox className="border border-slate-200 shadow-sm">
              <p className="text-sm font-semibold uppercase tracking-[0.28em] text-teal-600">Operational flow</p>
              <h2 className="mt-3 text-3xl font-semibold text-slate-950">From attendance capture to payroll release.</h2>
              <div className="mt-8 space-y-5">
                {workflowSteps.map((step, index) => (
                  <div key={step} className="flex gap-4 rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-slate-950 text-lg font-semibold text-white">
                      {index + 1}
                    </div>
                    <p className="pt-1 text-sm leading-7 text-slate-600">{step}</p>
                  </div>
                ))}
              </div>
            </CardBox>
          </section>

          <section className="mt-16">
            <CardBox className="overflow-hidden border-0 bg-[linear-gradient(135deg,_#0F172A,_#0F766E_55%,_#14B8A6)] text-white shadow-2xl">
              <div className="grid gap-8 lg:grid-cols-[1.15fr,0.85fr] lg:items-center">
                <div>
                  <p className="text-sm font-semibold uppercase tracking-[0.28em] text-teal-100">Ready for the next iteration</p>
                  <h2 className="mt-3 text-3xl font-semibold md:text-4xl">Lanjutkan dari payroll draft ke approval, payslip delivery, dan WhatsApp notifications.</h2>
                  <p className="mt-4 max-w-2xl text-sm leading-7 text-slate-100 md:text-base">
                    Seed app CRUD tetap dipakai sebagai pondasi. Lapisan domain berikutnya bisa menambah approval workflow,
                    employee self-service attendance screen, dan dashboard KPI/outlet yang lebih spesifik.
                  </p>
                </div>
                <div className="flex flex-wrap gap-4 lg:justify-end">
                  <Link
                    href="/login"
                    className="inline-flex items-center rounded-full bg-white px-6 py-3 text-sm font-semibold text-slate-950 transition hover:bg-slate-100"
                  >
                    Login sekarang
                  </Link>
                  <Link
                    href="/dashboard"
                    className="inline-flex items-center rounded-full border border-white/20 px-6 py-3 text-sm font-semibold text-white transition hover:border-white/35 hover:bg-white/5"
                  >
                    Masuk ke admin interface
                  </Link>
                </div>
              </div>
            </CardBox>
          </section>
        </main>
      </div>
    </>
  );
}

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