import React, { useMemo, useState } from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import BaseButton from '../components/BaseButton';
import BaseButtons from '../components/BaseButtons';
import CardBox from '../components/CardBox';
import LayoutGuest from '../layouts/Guest';
import LanguageSwitcher from '../components/LanguageSwitcher';
import { getPageTitle } from '../config';

const copyByLanguage = {
  en: {
    title: 'Community Logistics Marketplace',
    subtitle:
      'Connect neighborhood shops, grocery stores, and local couriers with customers who want fast, affordable delivery.',
    ctaPrimary: 'Start ordering',
    ctaSecondary: 'Admin console',
    highlight: 'Create local jobs with walking, bike, and car deliveries.',
    stats: [
      { label: 'Local delivery types', value: 'Walk • Bike • Car' },
      { label: 'Typical sales lift', value: '+35%' },
      { label: 'Platform commission', value: 'Small per-order fee' },
    ],
    steps: [
      {
        title: 'Shops list products',
        description:
          'Retailers and wholesalers publish their catalog and delivery windows.',
      },
      {
        title: 'Customers place orders',
        description:
          'Buyers choose a store, checkout quickly, and leave delivery notes.',
      },
      {
        title: 'Couriers deliver locally',
        description:
          'Delivery partners accept jobs and complete them within their community.',
      },
    ],
    roles: [
      {
        title: 'Stores & Wholesalers',
        description:
          'Reach more customers, manage inventory, and grow local sales.',
      },
      {
        title: 'Delivery Partners',
        description:
          'Earn income with flexible walking, biking, or driving shifts.',
      },
      {
        title: 'Customers',
        description:
          'Get essentials quickly from trusted nearby businesses.',
      },
    ],
    ctaTitle: 'Launch your community delivery network today.',
    ctaNote:
      'Use the admin console to onboard stores, manage couriers, and monitor orders.',
  },
  fr: {
    title: 'Marché logistique communautaire',
    subtitle:
      'Reliez les commerces locaux, épiceries et livreurs de proximité aux clients qui veulent une livraison rapide.',
    ctaPrimary: 'Commander maintenant',
    ctaSecondary: 'Console admin',
    highlight: 'Créez des emplois locaux avec livraison à pied, vélo ou voiture.',
    stats: [
      { label: 'Types de livraison', value: 'À pied • Vélo • Voiture' },
      { label: 'Hausse des ventes', value: '+35%' },
      { label: 'Commission plateforme', value: 'Petite commission par commande' },
    ],
    steps: [
      {
        title: 'Les magasins publient',
        description:
          'Les commerçants mettent en ligne leurs produits et créneaux.',
      },
      {
        title: 'Les clients commandent',
        description:
          'Les clients choisissent un magasin et ajoutent des notes de livraison.',
      },
      {
        title: 'Les livreurs livrent',
        description:
          'Les partenaires acceptent les courses et livrent localement.',
      },
    ],
    roles: [
      {
        title: 'Commerces & Grossistes',
        description: 'Touchez plus de clients et augmentez vos ventes locales.',
      },
      {
        title: 'Livreurs',
        description: 'Gagnez un revenu flexible à pied, à vélo ou en voiture.',
      },
      {
        title: 'Clients',
        description: 'Recevez rapidement les essentiels près de chez vous.',
      },
    ],
    ctaTitle: 'Lancez votre réseau de livraison locale dès maintenant.',
    ctaNote:
      'Utilisez la console admin pour gérer magasins, livreurs et commandes.',
  },
  es: {
    title: 'Mercado logístico comunitario',
    subtitle:
      'Conecta tiendas locales, supermercados y repartidores con clientes que quieren entregas rápidas.',
    ctaPrimary: 'Empezar a pedir',
    ctaSecondary: 'Consola admin',
    highlight: 'Crea empleos locales con entregas a pie, bici o auto.',
    stats: [
      { label: 'Tipos de entrega', value: 'A pie • Bici • Auto' },
      { label: 'Aumento de ventas', value: '+35%' },
      { label: 'Comisión plataforma', value: 'Pequeña comisión por pedido' },
    ],
    steps: [
      {
        title: 'Tiendas publican productos',
        description:
          'Los comercios cargan su catálogo y horarios de entrega.',
      },
      {
        title: 'Clientes hacen pedidos',
        description:
          'Los clientes eligen tienda, pagan rápido y dejan notas.',
      },
      {
        title: 'Repartidores entregan',
        description:
          'Los socios aceptan trabajos y entregan en su comunidad.',
      },
    ],
    roles: [
      {
        title: 'Tiendas y Mayoristas',
        description:
          'Llega a más clientes y aumenta las ventas locales.',
      },
      {
        title: 'Repartidores',
        description: 'Gana ingresos con turnos flexibles.',
      },
      {
        title: 'Clientes',
        description:
          'Recibe productos esenciales de negocios cercanos.',
      },
    ],
    ctaTitle: 'Lanza tu red de entregas comunitarias hoy.',
    ctaNote:
      'Gestiona tiendas, repartidores y pedidos desde la consola.',
  },
  de: {
    title: 'Community-Logistik-Marktplatz',
    subtitle:
      'Verbinde lokale Geschäfte, Lebensmittelmärkte und Kuriere mit Kund:innen für schnelle Lieferungen.',
    ctaPrimary: 'Jetzt bestellen',
    ctaSecondary: 'Admin-Konsole',
    highlight:
      'Schaffe lokale Jobs mit Lieferungen zu Fuß, per Rad oder Auto.',
    stats: [
      { label: 'Lieferarten', value: 'Zu Fuß • Rad • Auto' },
      { label: 'Umsatzsteigerung', value: '+35%' },
      { label: 'Plattformgebühr', value: 'Kleine Gebühr pro Auftrag' },
    ],
    steps: [
      {
        title: 'Shops listen Produkte',
        description:
          'Händler veröffentlichen ihren Katalog und Lieferfenster.',
      },
      {
        title: 'Kunden bestellen',
        description:
          'Kund:innen wählen einen Laden, zahlen schnell und hinterlassen Hinweise.',
      },
      {
        title: 'Kuriere liefern lokal',
        description:
          'Lieferpartner nehmen Aufträge an und liefern in der Community.',
      },
    ],
    roles: [
      {
        title: 'Geschäfte & Großhändler',
        description:
          'Erreiche mehr Kund:innen und steigere lokale Umsätze.',
      },
      {
        title: 'Lieferpartner',
        description:
          'Verdiene flexibel mit Lauf-, Rad- oder Autofahrten.',
      },
      {
        title: 'Kund:innen',
        description:
          'Erhalte schnell Essentials von lokalen Betrieben.',
      },
    ],
    ctaTitle: 'Starte dein lokales Liefernetzwerk jetzt.',
    ctaNote:
      'Nutze die Admin-Konsole, um Shops, Kuriere und Bestellungen zu steuern.',
  },
};

export default function Home() {
  const [language, setLanguage] = useState('en');
  const copy = useMemo(() => copyByLanguage[language] || copyByLanguage.en, [language]);

  return (
    <>
      <Head>
        <title>{getPageTitle(copy.title)}</title>
      </Head>
      <div className="min-h-screen bg-slate-950 text-white">
        <header className="border-b border-white/10 bg-slate-950/60 backdrop-blur">
          <div className="mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-4">
            <div>
              <p className="text-sm uppercase tracking-[0.3em] text-emerald-300">LogiLocal</p>
              <h1 className="text-xl font-semibold">{copy.title}</h1>
            </div>
            <div className="flex items-center gap-4">
              <LanguageSwitcher value={language} onChange={setLanguage} />
              <BaseButtons type="justify-end" className="hidden md:flex" mb="mb-0">
                <BaseButton href="/login" label="Login" color="white" outline />
                <BaseButton href="/login" label={copy.ctaSecondary} color="info" />
              </BaseButtons>
            </div>
          </div>
        </header>

        <main>
          <section className="mx-auto grid w-full max-w-6xl gap-10 px-6 py-16 lg:grid-cols-2 lg:items-center">
            <div className="space-y-6">
              <span className="inline-flex w-fit items-center rounded-full bg-emerald-400/15 px-4 py-1 text-sm text-emerald-200">
                {copy.highlight}
              </span>
              <h2 className="text-4xl font-semibold leading-tight lg:text-5xl">{copy.title}</h2>
              <p className="text-lg text-slate-200">{copy.subtitle}</p>
              <BaseButtons type="justify-start" mb="mb-0">
                <BaseButton href="/register" label={copy.ctaPrimary} color="success" />
                <BaseButton href="/login" label="Login" color="white" outline />
              </BaseButtons>
              <div className="grid gap-4 pt-6 md:grid-cols-3">
                {copy.stats.map((item) => (
                  <div key={item.label} className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3">
                    <p className="text-sm text-slate-300">{item.label}</p>
                    <p className="text-base font-semibold text-white">{item.value}</p>
                  </div>
                ))}
              </div>
            </div>

            <CardBox className="border border-white/10 bg-white/5">
              <div className="space-y-5">
                <div>
                  <p className="text-sm uppercase tracking-[0.2em] text-emerald-200">Today&apos;s flow</p>
                  <h3 className="text-2xl font-semibold text-white">
                    Fast ordering + local delivery
                  </h3>
                  <p className="text-sm text-slate-200">
                    Add stores, list products, and dispatch community couriers in minutes.
                  </p>
                </div>
                <div className="space-y-3">
                  {copy.steps.map((step, index) => (
                    <div key={step.title} className="rounded-xl border border-white/10 bg-slate-900/70 p-4">
                      <p className="text-xs uppercase tracking-[0.25em] text-emerald-300">
                        Step {index + 1}
                      </p>
                      <p className="text-base font-semibold text-white">{step.title}</p>
                      <p className="text-sm text-slate-300">{step.description}</p>
                    </div>
                  ))}
                </div>
                <BaseButtons type="justify-start" mb="mb-0">
                  <BaseButton href="/login" label={copy.ctaSecondary} color="info" />
                  <BaseButton href="/dashboard" label="Go to dashboard" color="white" outline />
                </BaseButtons>
              </div>
            </CardBox>
          </section>

          <section className="mx-auto w-full max-w-6xl px-6 pb-12">
            <div className="grid gap-6 md:grid-cols-3">
              {copy.roles.map((role) => (
                <div key={role.title} className="rounded-3xl border border-white/10 bg-white/5 p-6">
                  <h3 className="text-lg font-semibold text-white">{role.title}</h3>
                  <p className="mt-3 text-sm text-slate-200">{role.description}</p>
                </div>
              ))}
            </div>
          </section>

          <section className="mx-auto w-full max-w-6xl px-6 pb-20">
            <div className="rounded-3xl border border-emerald-400/20 bg-gradient-to-r from-emerald-500/10 via-slate-900/70 to-blue-500/10 p-8">
              <div className="grid gap-6 lg:grid-cols-[1.6fr_1fr] lg:items-center">
                <div>
                  <h3 className="text-2xl font-semibold text-white">{copy.ctaTitle}</h3>
                  <p className="mt-2 text-sm text-slate-200">{copy.ctaNote}</p>
                </div>
                <BaseButtons type="justify-start" mb="mb-0">
                  <BaseButton href="/register" label={copy.ctaPrimary} color="success" />
                  <BaseButton href="/login" label={copy.ctaSecondary} color="white" outline />
                </BaseButtons>
              </div>
            </div>
          </section>
        </main>

        <footer className="border-t border-white/10 bg-slate-950/70">
          <div className="mx-auto flex w-full max-w-6xl flex-col items-center justify-between gap-4 px-6 py-6 text-sm text-slate-300 md:flex-row">
            <p>© 2026 LogiLocal. All rights reserved.</p>
            <div className="flex items-center gap-4">
              <Link className="hover:text-white" href="/privacy-policy/">
                Privacy Policy
              </Link>
              <Link className="hover:text-white" href="/terms-of-use/">
                Terms of Use
              </Link>
              <Link className="hover:text-white" href="/login">
                Admin login
              </Link>
            </div>
          </div>
        </footer>
      </div>
    </>
  );
}

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