import { mdiArrowRight, mdiCheckCircleOutline, mdiFactory, mdiHandshake, mdiCalendarStar } from '@mdi/js'
import Head from 'next/head'
import Link from 'next/link'
import React, { ReactElement } from 'react'
import LayoutGuest from '../layouts/Guest'
import Logo from '../components/Logo'
import { getPageTitle } from '../config'

const platformCards = [
  {
    title: 'Satış CRM',
    description: 'Potansiyel müşteri, fırsat, kişi, aktivite ve takip adımlarını tek yerden yönetin.',
    icon: mdiHandshake,
    href: '/sales-hub',
    cta: 'Satış merkezini aç',
  },
  {
    title: 'Üretim ERP',
    description: 'Malzeme, depo, stok, makine, üretim emri ve kalite operasyonlarını görünür kılın.',
    icon: mdiFactory,
    href: '/dashboard',
    cta: 'ERP görünümünü aç',
  },
  {
    title: 'Etkinlik Yönetimi',
    description: 'Mekan, tedarikçi, davetli, görev, takvim ve bütçe süreçlerini birlikte koordine edin.',
    icon: mdiCalendarStar,
    href: '/dashboard',
    cta: 'Etkinlik modülünü aç',
  },
]

const promises = [
  'Tüm ekipler için Türkçe arayüz ve kurumsal görünüm',
  'Yetki bazlı erişim, sahiplik ve takip disiplini',
  'CRM, ERP ve etkinlik süreçleri arasında tek operasyon ekranı',
]

export default function IndexPage() {
  return (
    <>
      <Head>
        <title>{getPageTitle('DakikTabela')}</title>
      </Head>

      <main className='min-h-screen bg-[#f8fafc] text-slate-900'>
        <section className='relative overflow-hidden border-b border-slate-200 bg-[radial-gradient(circle_at_top_left,_rgba(20,184,166,0.16),_transparent_28%),radial-gradient(circle_at_top_right,_rgba(29,78,216,0.18),_transparent_32%),linear-gradient(180deg,_#ffffff,_#eef4ff)]'>
          <div className='mx-auto flex min-h-screen w-full max-w-7xl flex-col px-6 py-8 lg:px-10'>
            <header className='flex flex-col gap-4 border-b border-slate-200/80 pb-6 md:flex-row md:items-center md:justify-between'>
              <div className='flex items-center gap-4'>
                <Logo className='h-14 w-auto rounded-2xl bg-white p-2 shadow-sm' />
                <div>
                  <p className='text-xs font-semibold uppercase tracking-[0.24em] text-cyan-700'>dakiktabela.com</p>
                  <h1 className='mt-1 text-xl font-semibold tracking-tight'>DakikTabela Operasyon Platformu</h1>
                </div>
              </div>
              <nav className='flex flex-wrap items-center gap-3'>
                <Link
                  href='/login'
                  className='inline-flex items-center justify-center rounded-full border border-slate-300 bg-white px-5 py-2.5 text-sm font-semibold text-slate-900 transition hover:border-cyan-400 hover:text-cyan-700'
                >
                  Giriş yap
                </Link>
                <Link
                  href='/dashboard'
                  className='inline-flex items-center justify-center rounded-full bg-slate-900 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-cyan-600'
                >
                  Yönetim panelini aç
                </Link>
              </nav>
            </header>

            <div className='grid flex-1 items-center gap-14 py-14 lg:grid-cols-[1.1fr_0.9fr] lg:py-20'>
              <div className='space-y-8'>
                <div className='inline-flex items-center rounded-full border border-cyan-200 bg-white/90 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-cyan-800 shadow-sm'>
                  Kurumsal, Türkçe ve operasyon odaklı
                </div>

                <div className='space-y-5'>
                  <h2 className='max-w-4xl text-4xl font-semibold tracking-tight text-slate-950 md:text-6xl'>
                    DakikTabela için satıştan üretime, üretimden etkinlik yönetimine uzanan tek iş platformu.
                  </h2>
                  <p className='max-w-2xl text-lg leading-8 text-slate-600'>
                    Bu yapı; fırsat sahipliği, takip disiplini, üretim görünürlüğü ve etkinlik koordinasyonunu
                    aynı ekranda toplar. Ekipler hangi kaydın kime ait olduğunu, sıradaki işi ve kritik gecikmeleri
                    anında görebilir.
                  </p>
                </div>

                <div className='flex flex-wrap gap-4'>
                  <Link
                    href='/sales-hub'
                    className='inline-flex items-center gap-2 rounded-full bg-cyan-500 px-6 py-3 text-sm font-semibold text-slate-950 transition hover:bg-cyan-400'
                  >
                    Satış merkezine git
                    <svg viewBox='0 0 24 24' className='h-4 w-4 fill-current'>
                      <path d={mdiArrowRight} />
                    </svg>
                  </Link>
                  <Link
                    href='/login'
                    className='inline-flex items-center gap-2 rounded-full border border-slate-300 px-6 py-3 text-sm font-semibold text-slate-900 transition hover:border-cyan-400 hover:text-cyan-700'
                  >
                    Sisteme giriş yap
                  </Link>
                </div>

                <div className='grid gap-3'>
                  {promises.map((promise) => (
                    <div key={promise} className='flex items-start gap-3 rounded-2xl bg-white/85 p-4 shadow-sm'>
                      <svg viewBox='0 0 24 24' className='mt-0.5 h-5 w-5 shrink-0 fill-cyan-600'>
                        <path d={mdiCheckCircleOutline} />
                      </svg>
                      <p className='text-sm leading-6 text-slate-700'>{promise}</p>
                    </div>
                  ))}
                </div>
              </div>

              <div className='grid gap-4'>
                {platformCards.map((card) => (
                  <div
                    key={card.title}
                    className='rounded-[28px] border border-white/80 bg-white/90 p-6 shadow-[0_24px_80px_rgba(15,23,42,0.08)] backdrop-blur'
                  >
                    <div className='flex items-start justify-between gap-4'>
                      <div>
                        <h3 className='text-xl font-semibold text-slate-950'>{card.title}</h3>
                        <p className='mt-3 text-sm leading-6 text-slate-600'>{card.description}</p>
                      </div>
                      <div className='rounded-2xl bg-slate-900 p-3 text-white'>
                        <svg viewBox='0 0 24 24' className='h-5 w-5 fill-current'>
                          <path d={card.icon} />
                        </svg>
                      </div>
                    </div>
                    <Link href={card.href} className='mt-5 inline-flex items-center gap-2 text-sm font-semibold text-cyan-700'>
                      {card.cta}
                      <svg viewBox='0 0 24 24' className='h-4 w-4 fill-current'>
                        <path d={mdiArrowRight} />
                      </svg>
                    </Link>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      </main>
    </>
  )
}

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