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

const modules = [
  'Contacts and partner profiles',
  'Invoices, quotes, and payments',
  'Bills, expenses, and approvals',
  'Inventory and service catalog',
  'Bank movement and audit trail',
  'ZAR cashflow and VAT readiness',
]

const valueChain = [
  { title: 'Owners', text: 'See cash position, upcoming dues, and business health at a glance.' },
  { title: 'Accountants', text: 'Review clean source records before month-end and tax filing.' },
  { title: 'Suppliers', text: 'Track bills, receipts, and the cost side of every relationship.' },
  { title: 'Customers', text: 'Move from quote to invoice to payment with fewer handoffs.' },
]

export default function QweliLanding() {
  return (
    <div className="min-h-screen bg-[#F5F8F7] text-[#071B2C]">
      <Head>
        <title>{getPageTitle('Qweli')}</title>
        <meta
          name="description"
          content="Qweli is a modern ZAR-first accounting and value-chain finance workspace for invoices, expenses, partners, inventory, AI reporting, email, and cashflow."
        />
      </Head>

      <header className="sticky top-0 z-20 border-b border-white/70 bg-[#F5F8F7]/90 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
          <Link href="/" className="flex items-center gap-3">
            <span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#071B2C] text-lg font-black text-[#5CF2B8]">
              Q
            </span>
            <span>
              <span className="block text-lg font-black tracking-tight">Qweli</span>
              <span className="block text-xs font-semibold uppercase tracking-[0.28em] text-slate-500">value-chain finance</span>
            </span>
          </Link>
          <nav className="hidden items-center gap-6 text-sm font-bold text-slate-600 md:flex">
            <a href="#modules" className="hover:text-[#071B2C]">Modules</a>
            <a href="#workflow" className="hover:text-[#071B2C]">Workflow</a>
            <Link href="/login" className="hover:text-[#071B2C]">Login</Link>
          </nav>
          <BaseButton href="/login" label="Admin interface" color="info" roundedFull />
        </div>
      </header>

      <main>
        <section className="relative overflow-hidden">
          <div className="absolute -right-32 top-12 h-80 w-80 rounded-full bg-[#5CF2B8]/30 blur-3xl" />
          <div className="absolute -left-32 bottom-0 h-96 w-96 rounded-full bg-[#FFB84D]/30 blur-3xl" />
          <div className="mx-auto grid max-w-7xl gap-10 px-6 py-20 lg:grid-cols-[1.08fr_0.92fr] lg:py-28">
            <div className="relative z-10">
              <p className="mb-5 inline-flex rounded-full border border-[#071B2C]/10 bg-white px-4 py-2 text-xs font-black uppercase tracking-[0.3em] text-emerald-700 shadow-sm">
                Independent finance suite, value-chain ready
              </p>
              <h1 className="max-w-4xl text-5xl font-black leading-[0.95] tracking-[-0.05em] md:text-7xl">
                Accounting that sees the whole business network.
              </h1>
              <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600">
                Qweli brings owners, accountants, customers, suppliers, products, invoices, expenses, payments, AI reports, and email workflows into one
                clean ZAR-first workspace so cashflow decisions happen faster.
              </p>
              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <BaseButton href="/login" label="Open admin interface" color="info" roundedFull className="text-base" />
                <BaseButton href="/qweli-command-center" label="Go to Qweli workflow" color="whiteDark" roundedFull className="text-base" />
              </div>
              <div className="mt-10 grid max-w-xl grid-cols-3 gap-3 text-center">
                {['Invoices', 'Expenses', 'Inventory'].map((item) => (
                  <div key={item} className="rounded-3xl bg-white/80 p-4 shadow-sm ring-1 ring-slate-900/5">
                    <p className="text-sm font-black text-[#071B2C]">{item}</p>
                    <p className="mt-1 text-xs text-slate-500">ready module</p>
                  </div>
                ))}
              </div>
            </div>

            <div className="relative z-10 rounded-[2rem] bg-[#071B2C] p-4 text-white shadow-2xl">
              <div className="rounded-[1.5rem] border border-white/10 bg-white/10 p-5">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-slate-300">Today’s cash signal</p>
                    <p className="mt-1 text-4xl font-black text-[#5CF2B8]">+18.4%</p>
                  </div>
                  <span className="rounded-full bg-[#5CF2B8]/15 px-4 py-2 text-xs font-black uppercase tracking-wider text-[#5CF2B8]">
                    live slice
                  </span>
                </div>
                <div className="mt-8 space-y-3">
                  {[
                    ['Customer invoice drafted', 'R24,000', 'bg-[#5CF2B8]'],
                    ['Supplier expense submitted', 'R3,800', 'bg-[#FFB84D]'],
                    ['Payment matching queued', 'R11,200', 'bg-[#61A5FF]'],
                  ].map(([label, amount, color]) => (
                    <div key={label} className="flex items-center justify-between rounded-2xl bg-white p-4 text-[#071B2C]">
                      <div className="flex items-center gap-3">
                        <span className={`h-3 w-3 rounded-full ${color}`} />
                        <span className="font-bold">{label}</span>
                      </div>
                      <span className="font-black">{amount}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="modules" className="mx-auto max-w-7xl px-6 py-16">
          <div className="mb-8 max-w-2xl">
            <p className="text-sm font-black uppercase tracking-[0.3em] text-emerald-700">Core modules</p>
            <h2 className="mt-3 text-3xl font-black tracking-tight md:text-5xl">One product layer for the entire value chain.</h2>
          </div>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {modules.map((module) => (
              <div key={module} className="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-900/5">
                <p className="text-lg font-black">{module}</p>
                <p className="mt-3 text-sm leading-6 text-slate-500">
                  Connected to Qweli’s authenticated workspace so teams can move from capture to review to source detail.
                </p>
              </div>
            ))}
          </div>
        </section>

        <section id="workflow" className="bg-white py-16">
          <div className="mx-auto max-w-7xl px-6">
            <div className="grid gap-5 md:grid-cols-4">
              {valueChain.map((item, index) => (
                <div key={item.title} className="rounded-3xl border border-slate-100 bg-[#F8FAFC] p-6">
                  <span className="flex h-10 w-10 items-center justify-center rounded-2xl bg-[#071B2C] text-sm font-black text-[#5CF2B8]">
                    {index + 1}
                  </span>
                  <h3 className="mt-5 text-xl font-black">{item.title}</h3>
                  <p className="mt-3 text-sm leading-6 text-slate-500">{item.text}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>

      <footer className="bg-[#071B2C] px-6 py-8 text-white">
        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 text-sm md:flex-row">
          <p>© 2026 Qweli. Built for modern business finance.</p>
          <div className="flex gap-5">
            <Link href="/privacy-policy/" className="text-slate-300 hover:text-white">Privacy Policy</Link>
            <Link href="/login" className="text-[#5CF2B8] hover:text-white">Login</Link>
          </div>
        </div>
      </footer>
    </div>
  )
}

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