import { mdiAlbum, mdiChevronRight, mdiLogin, mdiMusic, mdiRobot, mdiShieldAccount } from '@mdi/js';
import Head from 'next/head';
import Link from 'next/link';
import React, { ReactElement } from 'react';
import BaseIcon from '../components/BaseIcon';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';

const genreHighlights = [
  'Amapiano',
  'Gqom',
  'Maskandi',
  'Kwaito',
  'Afro House',
  'SA Gospel',
  'Motswako',
  'Lekompo',
  'Cape Jazz',
  'Afro Soul',
];

const workflowPillars = [
  {
    title: 'Create the beat',
    body: 'Start from a text prompt and shape BPM, key, vibe, and South African genre DNA in seconds.',
    icon: mdiRobot,
  },
  {
    title: 'Bring in vocals',
    body: 'Plan for uploads or recording sessions, with language-aware vocal workflows for multilingual artists.',
    icon: mdiMusic,
  },
  {
    title: 'Ship release-ready audio',
    body: 'Queue mix, mastering, metadata, artwork, and export for streaming, radio, or club delivery.',
    icon: mdiAlbum,
  },
];

function HomePage() {
  return (
    <>
      <Head>
        <title>{getPageTitle('SA AI Music Studio')}</title>
        <meta
          name="description"
          content="A South African-first AI music production studio for beat generation, vocal workflows, mixing, mastering, and export."
        />
      </Head>

      <div className="min-h-screen bg-[#07070C] text-white">
        <div className="mx-auto max-w-7xl px-6 pb-16 pt-6 sm:px-8 lg:px-10">
          <header className="flex flex-wrap items-center justify-between gap-4 rounded-full border border-white/10 bg-white/5 px-5 py-4 backdrop-blur">
            <div>
              <div className="text-xs uppercase tracking-[0.28em] text-violet-300">SA AI Music Studio</div>
              <div className="mt-1 text-lg font-semibold text-white">Browser-based studio workflow</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-violet-300/40 hover:bg-white/5"
              >
                <BaseIcon path={mdiLogin} size={16} className="mr-2" />
                Login
              </Link>
              <Link
                href="/dashboard"
                className="inline-flex items-center rounded-full bg-violet-500 px-4 py-2 text-sm font-medium text-white transition hover:bg-violet-400"
              >
                <BaseIcon path={mdiShieldAccount} size={16} className="mr-2" />
                Admin interface
              </Link>
            </nav>
          </header>

          <main className="mt-10 grid gap-8 xl:grid-cols-[1.4fr_0.9fr] xl:items-center">
            <section>
              <div className="inline-flex items-center rounded-full border border-violet-400/20 bg-violet-500/10 px-4 py-2 text-xs uppercase tracking-[0.24em] text-violet-200">
                South African genres · Vocal workflows · Mix & master
              </div>
              <h1 className="mt-6 max-w-4xl text-5xl font-semibold leading-tight sm:text-6xl">
                Build modern South African records with an AI-powered studio workflow.
              </h1>
              <p className="mt-6 max-w-3xl text-lg leading-8 text-slate-300">
                Generate genre-aware beats, stage multilingual vocal sessions, queue mixing and mastering, and organize exports for release — all from one dark, studio-first workspace.
              </p>

              <div className="mt-8 flex flex-wrap gap-4">
                <Link
                  href="/studio"
                  className="inline-flex items-center rounded-full bg-white px-6 py-3 text-sm font-semibold text-slate-950 transition hover:bg-violet-100"
                >
                  Open Studio Launchpad
                  <BaseIcon path={mdiChevronRight} size={18} className="ml-2" />
                </Link>
                <Link
                  href="/login"
                  className="inline-flex items-center rounded-full border border-white/15 px-6 py-3 text-sm font-semibold text-white transition hover:border-violet-300/40 hover:bg-white/5"
                >
                  Sign in to continue
                </Link>
              </div>

              <div className="mt-10 flex flex-wrap gap-3">
                {genreHighlights.map((genre) => (
                  <span key={genre} className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-slate-200">
                    {genre}
                  </span>
                ))}
              </div>
            </section>

            <section className="relative overflow-hidden rounded-[2rem] border border-white/10 bg-gradient-to-br from-violet-600/20 via-slate-900 to-slate-950 p-6 shadow-2xl shadow-violet-950/20">
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(168,85,247,0.22),_transparent_45%),radial-gradient(circle_at_bottom_left,_rgba(34,211,238,0.16),_transparent_40%)]" />
              <div className="relative">
                <div className="flex items-center justify-between rounded-3xl border border-white/10 bg-white/5 px-4 py-3">
                  <div>
                    <div className="text-xs uppercase tracking-[0.22em] text-violet-200">Launch-ready slice</div>
                    <div className="mt-1 text-lg font-semibold">Generate → Vocal prep → Master</div>
                  </div>
                  <div className="rounded-full border border-emerald-400/30 bg-emerald-500/10 px-3 py-1 text-xs uppercase tracking-[0.16em] text-emerald-200">
                    live MVP
                  </div>
                </div>

                <div className="mt-6 space-y-4">
                  {workflowPillars.map((pillar) => (
                    <div key={pillar.title} className="rounded-3xl border border-white/10 bg-black/30 p-5 backdrop-blur">
                      <div className="flex items-start gap-4">
                        <div className="rounded-2xl border border-white/10 bg-white/10 p-3 text-violet-200">
                          <BaseIcon path={pillar.icon} size={22} />
                        </div>
                        <div>
                          <div className="text-lg font-medium text-white">{pillar.title}</div>
                          <p className="mt-2 text-sm leading-7 text-slate-300">{pillar.body}</p>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </section>
          </main>

          <section className="mt-14 grid gap-6 lg:grid-cols-3">
            <div className="rounded-[1.75rem] border border-white/10 bg-white/5 p-6">
              <div className="text-xs uppercase tracking-[0.22em] text-violet-300">Genre engine</div>
              <h2 className="mt-3 text-2xl font-semibold">SA-first sound design</h2>
              <p className="mt-4 text-sm leading-7 text-slate-300">
                Start sessions for Amapiano, Kwaito, Gqom, Maskandi, Gospel, Cape Jazz, Lekompo, and more with BPM-aware workflow presets.
              </p>
            </div>
            <div className="rounded-[1.75rem] border border-white/10 bg-white/5 p-6">
              <div className="text-xs uppercase tracking-[0.22em] text-violet-300">Vocal path</div>
              <h2 className="mt-3 text-2xl font-semibold">Artists move faster</h2>
              <p className="mt-4 text-sm leading-7 text-slate-300">
                Stage vocal uploads or recording-ready sessions, keep language context attached, and prepare the mix chain without leaving the browser.
              </p>
            </div>
            <div className="rounded-[1.75rem] border border-white/10 bg-white/5 p-6">
              <div className="text-xs uppercase tracking-[0.22em] text-violet-300">Release prep</div>
              <h2 className="mt-3 text-2xl font-semibold">From idea to export</h2>
              <p className="mt-4 text-sm leading-7 text-slate-300">
                Queue mastering, metadata, artwork, and exports as part of the same workflow so the first version already feels like a product.
              </p>
            </div>
          </section>
        </div>
      </div>
    </>
  );
}

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

export default HomePage;
