import {
  mdiArrowRight,
  mdiCashMultiple,
  mdiCellphoneLink,
  mdiCheckCircle,
  mdiCloud,
  mdiCogOutline,
  mdiDatabase,
  mdiEmail,
  mdiHandshake,
  mdiLifebuoy,
  mdiPhone,
  mdiRobot,
  mdiServerNetwork,
  mdiShieldCheck,
} from '@mdi/js';
import axios from 'axios';
import Head from 'next/head';
import Link from 'next/link';
import { ReactElement, useMemo, useState } from 'react';
import BaseIcon from '../components/BaseIcon';
import { getPageTitle } from '../config';
import LayoutGuest from '../layouts/Guest';

type DemoFormState = {
  full_name: string;
  company_name: string;
  email: string;
  phone: string;
  service_line: string;
  company_size: string;
  budget_range: string;
  preferred_channel: string;
  urgency: string;
  message: string;
};

type DemoResponse = {
  reference: string;
  score: number;
  stageName: string;
  templateSuggestion: string;
};

const serviceOptions = [
  { value: 'ai_ml', label: 'IA & Machine Learning' },
  { value: 'cybersecurity', label: 'Cybersécurité' },
  { value: 'cloud', label: 'Cloud Solutions' },
  { value: 'hardware', label: 'Infrastructure matérielle' },
  { value: 'web_mobile', label: 'Développement Web & Mobile' },
  { value: 'database', label: 'Database Management' },
];

const companySizeOptions = [
  { value: '1_10', label: '1–10 employés' },
  { value: '11_50', label: '11–50 employés' },
  { value: '51_200', label: '51–200 employés' },
  { value: '201_500', label: '201–500 employés' },
  { value: '501_1000', label: '501–1000 employés' },
  { value: '1000_plus', label: '1000+ employés' },
];

const budgetOptions = [
  { value: 'lt_5k', label: '< 5 000 USD' },
  { value: '5_20k', label: '5 000–20 000 USD' },
  { value: '20_50k', label: '20 000–50 000 USD' },
  { value: '50k_plus', label: '50 000+ USD' },
];

const channelOptions = [
  { value: 'whatsapp', label: 'WhatsApp' },
  { value: 'email', label: 'Email' },
  { value: 'phone', label: 'Téléphone' },
];

const urgencyOptions = [
  { value: 'standard', label: 'Standard' },
  { value: 'urgent', label: 'Urgent' },
  { value: 'critical', label: 'Critique' },
];

const platformModules = [
  {
    icon: mdiHandshake,
    title: 'CRM + Pipeline',
    copy:
      'Prospection, qualification, scoring et pipeline multi-service dans un seul cockpit.',
  },
  {
    icon: mdiCogOutline,
    title: 'PSA & Delivery',
    copy:
      'Templates projets, milestones, backlog agile et pilotage du delivery de bout en bout.',
  },
  {
    icon: mdiLifebuoy,
    title: 'Service Desk 24/7',
    copy:
      'Tickets, SLA et escalades pour tenir la promesse de support en continu.',
  },
  {
    icon: mdiCashMultiple,
    title: 'Facturation',
    copy:
      'Factures bilingues, TVA locale, mobile money et suivi du cashflow sans friction.',
  },
];

const expertiseCards = [
  {
    icon: mdiRobot,
    title: 'AI & ML',
    text: 'Automatisation, analytics, agents et modèles sur mesure.',
  },
  {
    icon: mdiShieldCheck,
    title: 'Cybersécurité',
    text: 'Audit, implémentation, monitoring et conformité.',
  },
  {
    icon: mdiCloud,
    title: 'Cloud',
    text: 'AWS, Azure, migrations et DevOps pour des équipes agiles.',
  },
  {
    icon: mdiServerNetwork,
    title: 'Infrastructure',
    text: 'Réseau, hardware entreprise et déploiements terrain.',
  },
  {
    icon: mdiCellphoneLink,
    title: 'Web & Mobile',
    text: 'React, Vue, React Native et Flutter pour vos produits digitaux.',
  },
  {
    icon: mdiDatabase,
    title: 'Data & DB',
    text: 'Architecture, migration et optimisation de données critiques.',
  },
];

const processSteps = [
  {
    step: '01',
    title: 'Demande cadrée',
    copy: 'Le prospect décrit son besoin, le service demandé et son budget en quelques minutes.',
  },
  {
    step: '02',
    title: 'Qualification auto',
    copy: 'FleetOS crée ou enrichit le lead, la société, le contact et ouvre une opportunité commerciale.',
  },
  {
    step: '03',
    title: 'Pilotage opérationnel',
    copy: 'L’équipe retrouve l’opportunité dans le Centre FleetOS avec quick actions vers delivery, support et billing.',
  },
];

const initialFormState: DemoFormState = {
  full_name: '',
  company_name: '',
  email: '',
  phone: '',
  service_line: 'cloud',
  company_size: '11_50',
  budget_range: '5_20k',
  preferred_channel: 'whatsapp',
  urgency: 'urgent',
  message: '',
};

const fieldBaseClass =
  'w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm outline-none transition placeholder:text-slate-400 focus:border-[#2563EB] focus:ring-4 focus:ring-[#2563EB]/15';
const labelClass = 'mb-2 block text-xs font-semibold uppercase tracking-[0.22em] text-slate-500';

export default function LandingPage() {
  const [formState, setFormState] = useState<DemoFormState>(initialFormState);
  const [fieldErrors, setFieldErrors] = useState<Partial<Record<keyof DemoFormState, string>>>({});
  const [submitState, setSubmitState] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
  const [submitMessage, setSubmitMessage] = useState('');
  const [submitResult, setSubmitResult] = useState<DemoResponse | null>(null);

  const stats = useMemo(
    () => [
      { value: '98.5%', label: 'satisfaction client' },
      { value: '500+', label: 'projets livrés' },
      { value: '100+', label: 'clients accompagnés' },
    ],
    [],
  );

  const validateForm = () => {
    const nextErrors: Partial<Record<keyof DemoFormState, string>> = {};
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!formState.full_name.trim()) {
      nextErrors.full_name = 'Le nom du contact est obligatoire.';
    }

    if (!formState.company_name.trim()) {
      nextErrors.company_name = 'Le nom de la société est obligatoire.';
    }

    if (!formState.email.trim() || !emailPattern.test(formState.email)) {
      nextErrors.email = 'Utilisez une adresse email valide.';
    }

    if (formState.preferred_channel !== 'email' && !formState.phone.trim()) {
      nextErrors.phone = 'Le numéro est requis pour un suivi WhatsApp ou téléphone.';
    }

    if (!formState.message.trim() || formState.message.trim().length < 24) {
      nextErrors.message = 'Décrivez le besoin en au moins 24 caractères.';
    }

    return nextErrors;
  };

  const setFieldValue = <K extends keyof DemoFormState>(field: K, value: DemoFormState[K]) => {
    setFormState((previous) => ({ ...previous, [field]: value }));
    setFieldErrors((previous) => ({ ...previous, [field]: undefined }));
  };

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const nextErrors = validateForm();

    if (Object.keys(nextErrors).length > 0) {
      setFieldErrors(nextErrors);
      setSubmitState('error');
      setSubmitMessage('Merci de corriger les champs signalés avant l’envoi.');
      return;
    }

    try {
      setSubmitState('submitting');
      setSubmitMessage('');

      const { data } = await axios.post('/contact-form', formState);

      setSubmitResult({
        reference: data.reference,
        score: data.score,
        stageName: data.stageName,
        templateSuggestion: data.templateSuggestion,
      });
      setSubmitState('success');
      setSubmitMessage('Votre demande est bien enregistrée dans le pipeline FleetOS.');
      setFormState(initialFormState);
      setFieldErrors({});
    } catch (error) {
      const message = axios.isAxiosError(error)
        ? typeof error.response?.data === 'string'
          ? error.response.data
          : 'Une erreur est survenue lors de l’envoi.'
        : 'Une erreur est survenue lors de l’envoi.';

      setSubmitState('error');
      setSubmitMessage(message);
    }
  };

  const scoreTone =
    submitResult && submitResult.score >= 70
      ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
      : 'border-amber-200 bg-amber-50 text-amber-700';

  return (
    <>
      <Head>
        <title>{getPageTitle('TSC FleetOS')}</title>
        <meta
          name="description"
          content="TSC FleetOS unifie CRM, PSA, support, timesheets et facturation pour les sociétés IT d’Afrique francophone."
        />
      </Head>

      <div className="min-h-screen bg-[#08111F] text-slate-100">
        <div className="absolute inset-x-0 top-0 h-[520px] bg-[radial-gradient(circle_at_top_right,_rgba(56,189,248,0.22),_transparent_34%),radial-gradient(circle_at_top_left,_rgba(59,130,246,0.24),_transparent_30%),linear-gradient(180deg,#0A1326_0%,#08111F_72%)]" />
        <div className="relative">
          <header className="mx-auto flex w-full max-w-7xl items-center justify-between px-6 py-6 lg:px-8">
            <div>
              <p className="text-xs font-semibold uppercase tracking-[0.34em] text-cyan-300">TSC SARL · FleetOS</p>
              <h1 className="mt-2 text-xl font-semibold text-white sm:text-2xl">Leader des Solutions IT au Congo</h1>
            </div>

            <div className="hidden items-center gap-6 text-sm text-slate-300 md:flex">
              <a href="#modules" className="transition hover:text-white">
                Modules
              </a>
              <a href="#process" className="transition hover:text-white">
                Workflow MVP
              </a>
              <a href="#demo" className="transition hover:text-white">
                Demande de démo
              </a>
              <Link href="/login" className="rounded-full border border-white/15 px-4 py-2 transition hover:border-white/40 hover:text-white">
                Connexion
              </Link>
              <Link href="/fleetos-hub" className="rounded-full bg-[#2563EB] px-4 py-2 font-medium text-white shadow-lg shadow-blue-900/30 transition hover:bg-[#1D4ED8]">
                Interface admin
              </Link>
            </div>
          </header>

          <main>
            <section className="mx-auto grid max-w-7xl gap-10 px-6 pb-20 pt-6 lg:grid-cols-[1.1fr_0.9fr] lg:px-8 lg:pb-24 lg:pt-10">
              <div className="space-y-8">
                <div className="inline-flex items-center gap-2 rounded-full border border-cyan-400/20 bg-cyan-400/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.22em] text-cyan-200">
                  <BaseIcon path={mdiCheckCircle} size={16} className="text-cyan-300" />
                  De la prospection à la livraison. Un seul outil pour gérer votre business IT.
                </div>

                <div className="space-y-5">
                  <h2 className="max-w-3xl text-4xl font-semibold leading-tight text-white sm:text-5xl lg:text-6xl">
                    La plateforme tout-en-un des sociétés IT d’Afrique francophone.
                  </h2>
                  <p className="max-w-2xl text-lg leading-8 text-slate-300">
                    TSC FleetOS remplace HubSpot, Asana, Toggl, QuickBooks et Zendesk avec un stack unifié pensé pour les équipes commerciales, delivery, support, finance et direction.
                  </p>
                </div>

                <div className="grid gap-3 sm:grid-cols-3">
                  {stats.map((stat) => (
                    <div key={stat.label} className="rounded-[28px] border border-white/10 bg-white/5 p-5 backdrop-blur">
                      <p className="text-3xl font-semibold text-white">{stat.value}</p>
                      <p className="mt-2 text-sm text-slate-300">{stat.label}</p>
                    </div>
                  ))}
                </div>

                <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
                  <a
                    href="#demo"
                    className="inline-flex items-center justify-center rounded-full bg-[#2563EB] px-6 py-3 text-sm font-semibold text-white shadow-xl shadow-blue-950/40 transition hover:bg-[#1D4ED8] focus:outline-none focus:ring-4 focus:ring-blue-300/30"
                  >
                    Réserver une démonstration
                    <BaseIcon path={mdiArrowRight} size={18} className="ml-2" />
                  </a>
                  <Link
                    href="/login"
                    className="inline-flex items-center justify-center rounded-full border border-white/15 px-6 py-3 text-sm font-semibold text-white transition hover:border-white/40 hover:bg-white/5 focus:outline-none focus:ring-4 focus:ring-white/15"
                  >
                    Connexion équipe TSC
                  </Link>
                </div>

                <div className="grid gap-4 rounded-[32px] border border-white/10 bg-white/5 p-6 backdrop-blur sm:grid-cols-3">
                  <div>
                    <p className="text-xs font-semibold uppercase tracking-[0.22em] text-cyan-200">Multi-tenant ready</p>
                    <p className="mt-3 text-sm leading-7 text-slate-300">
                      Isolation stricte par tenant, branding par société, langue FR par défaut et supervision super-admin.
                    </p>
                  </div>
                  <div>
                    <p className="text-xs font-semibold uppercase tracking-[0.22em] text-cyan-200">Afrique-first</p>
                    <p className="mt-3 text-sm leading-7 text-slate-300">
                      TVA DRC 16%, mobile money, WhatsApp et business hours locales intégrées dès l’architecture initiale.
                    </p>
                  </div>
                  <div>
                    <p className="text-xs font-semibold uppercase tracking-[0.22em] text-cyan-200">FR / EN</p>
                    <p className="mt-3 text-sm leading-7 text-slate-300">
                      Interface bilingue pour vos équipes locales, vos clients internationaux et vos partenaires techniques.
                    </p>
                  </div>
                </div>
              </div>

              <div id="demo" className="rounded-[32px] border border-white/10 bg-white/95 p-6 text-slate-900 shadow-2xl shadow-slate-950/20 backdrop-blur lg:p-8">
                <div className="mb-6 flex items-start justify-between gap-4">
                  <div>
                    <p className="text-xs font-semibold uppercase tracking-[0.22em] text-[#2563EB]">Thin slice MVP</p>
                    <h3 className="mt-2 text-2xl font-semibold text-slate-900">Demande cadrée → pipeline commercial</h3>
                  </div>
                  <div className="rounded-2xl bg-[#EFF6FF] p-3 text-[#2563EB]">
                    <BaseIcon path={mdiHandshake} size={26} />
                  </div>
                </div>

                <p className="mb-6 text-sm leading-7 text-slate-600">
                  Soumettez un besoin client. FleetOS crée ou enrichit automatiquement le lead, le contact, la société, et ouvre l’opportunité commerciale dans le pipeline TSC.
                </p>

                {submitState === 'success' && submitResult && (
                  <div className="mb-5 rounded-3xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-900">
                    <div className="flex items-center gap-3">
                      <div className="rounded-full bg-emerald-100 p-2 text-emerald-700">
                        <BaseIcon path={mdiCheckCircle} size={18} />
                      </div>
                      <div>
                        <p className="font-semibold">{submitMessage}</p>
                        <p className="text-emerald-700/80">Référence {submitResult.reference} · étape {submitResult.stageName}</p>
                      </div>
                    </div>
                    <div className={`mt-4 grid gap-3 rounded-2xl border p-4 sm:grid-cols-2 ${scoreTone}`}>
                      <div>
                        <p className="text-xs font-semibold uppercase tracking-[0.22em]">Score</p>
                        <p className="mt-2 text-2xl font-semibold">{submitResult.score}/100</p>
                      </div>
                      <div>
                        <p className="text-xs font-semibold uppercase tracking-[0.22em]">Playbook suggéré</p>
                        <p className="mt-2 text-base font-semibold">{submitResult.templateSuggestion}</p>
                      </div>
                    </div>
                    <div className="mt-4 flex flex-col gap-3 sm:flex-row">
                      <Link href="/fleetos-hub" className="inline-flex items-center justify-center rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-slate-800">
                        Ouvrir l’interface admin
                      </Link>
                      <Link href="/login" className="inline-flex items-center justify-center rounded-full border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 transition hover:border-slate-400 hover:bg-white">
                        Se connecter
                      </Link>
                    </div>
                  </div>
                )}

                {submitState === 'error' && submitMessage && (
                  <div className="mb-5 rounded-2xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700">
                    {submitMessage}
                  </div>
                )}

                <form className="space-y-5" onSubmit={handleSubmit}>
                  <div className="grid gap-4 sm:grid-cols-2">
                    <div>
                      <label htmlFor="full_name" className={labelClass}>
                        Contact principal
                      </label>
                      <input
                        id="full_name"
                        value={formState.full_name}
                        onChange={(event) => setFieldValue('full_name', event.target.value)}
                        placeholder="Ex. Jean Mbala"
                        className={fieldBaseClass}
                      />
                      {fieldErrors.full_name && <p className="mt-2 text-sm text-rose-600">{fieldErrors.full_name}</p>}
                    </div>
                    <div>
                      <label htmlFor="company_name" className={labelClass}>
                        Société
                      </label>
                      <input
                        id="company_name"
                        value={formState.company_name}
                        onChange={(event) => setFieldValue('company_name', event.target.value)}
                        placeholder="Ex. Banque / Ministère / PME"
                        className={fieldBaseClass}
                      />
                      {fieldErrors.company_name && <p className="mt-2 text-sm text-rose-600">{fieldErrors.company_name}</p>}
                    </div>
                  </div>

                  <div className="grid gap-4 sm:grid-cols-2">
                    <div>
                      <label htmlFor="email" className={labelClass}>
                        Email professionnel
                      </label>
                      <input
                        id="email"
                        type="email"
                        value={formState.email}
                        onChange={(event) => setFieldValue('email', event.target.value)}
                        placeholder="nom@societe.cd"
                        className={fieldBaseClass}
                      />
                      {fieldErrors.email && <p className="mt-2 text-sm text-rose-600">{fieldErrors.email}</p>}
                    </div>
                    <div>
                      <label htmlFor="phone" className={labelClass}>
                        Téléphone / WhatsApp
                      </label>
                      <input
                        id="phone"
                        value={formState.phone}
                        onChange={(event) => setFieldValue('phone', event.target.value)}
                        placeholder="+243 ..."
                        className={fieldBaseClass}
                      />
                      {fieldErrors.phone && <p className="mt-2 text-sm text-rose-600">{fieldErrors.phone}</p>}
                    </div>
                  </div>

                  <div className="grid gap-4 sm:grid-cols-2">
                    <div>
                      <label htmlFor="service_line" className={labelClass}>
                        Service demandé
                      </label>
                      <select
                        id="service_line"
                        value={formState.service_line}
                        onChange={(event) => setFieldValue('service_line', event.target.value)}
                        className={fieldBaseClass}
                      >
                        {serviceOptions.map((option) => (
                          <option key={option.value} value={option.value}>
                            {option.label}
                          </option>
                        ))}
                      </select>
                    </div>
                    <div>
                      <label htmlFor="company_size" className={labelClass}>
                        Taille entreprise
                      </label>
                      <select
                        id="company_size"
                        value={formState.company_size}
                        onChange={(event) => setFieldValue('company_size', event.target.value)}
                        className={fieldBaseClass}
                      >
                        {companySizeOptions.map((option) => (
                          <option key={option.value} value={option.value}>
                            {option.label}
                          </option>
                        ))}
                      </select>
                    </div>
                  </div>

                  <div className="grid gap-4 sm:grid-cols-3">
                    <div>
                      <label htmlFor="budget_range" className={labelClass}>
                        Budget estimatif
                      </label>
                      <select
                        id="budget_range"
                        value={formState.budget_range}
                        onChange={(event) => setFieldValue('budget_range', event.target.value)}
                        className={fieldBaseClass}
                      >
                        {budgetOptions.map((option) => (
                          <option key={option.value} value={option.value}>
                            {option.label}
                          </option>
                        ))}
                      </select>
                    </div>
                    <div>
                      <label htmlFor="preferred_channel" className={labelClass}>
                        Canal préféré
                      </label>
                      <select
                        id="preferred_channel"
                        value={formState.preferred_channel}
                        onChange={(event) => setFieldValue('preferred_channel', event.target.value)}
                        className={fieldBaseClass}
                      >
                        {channelOptions.map((option) => (
                          <option key={option.value} value={option.value}>
                            {option.label}
                          </option>
                        ))}
                      </select>
                    </div>
                    <div>
                      <label htmlFor="urgency" className={labelClass}>
                        Urgence
                      </label>
                      <select
                        id="urgency"
                        value={formState.urgency}
                        onChange={(event) => setFieldValue('urgency', event.target.value)}
                        className={fieldBaseClass}
                      >
                        {urgencyOptions.map((option) => (
                          <option key={option.value} value={option.value}>
                            {option.label}
                          </option>
                        ))}
                      </select>
                    </div>
                  </div>

                  <div>
                    <label htmlFor="message" className={labelClass}>
                      Brief projet / ticket
                    </label>
                    <textarea
                      id="message"
                      rows={5}
                      value={formState.message}
                      onChange={(event) => setFieldValue('message', event.target.value)}
                      placeholder="Décrivez le contexte, l’objectif métier, les contraintes et le résultat attendu."
                      className={`${fieldBaseClass} min-h-[148px] resize-y`}
                    />
                    {fieldErrors.message && <p className="mt-2 text-sm text-rose-600">{fieldErrors.message}</p>}
                  </div>

                  <div className="rounded-2xl bg-slate-50 p-4 text-sm leading-7 text-slate-600">
                    À l’envoi, FleetOS crée un lead scoré, rattache le contact et la société, suggère un playbook projet et ouvre une opportunité dans votre pipeline commercial.
                  </div>

                  <button
                    type="submit"
                    disabled={submitState === 'submitting'}
                    className="inline-flex w-full items-center justify-center rounded-full bg-[#2563EB] px-5 py-3.5 text-sm font-semibold text-white shadow-lg shadow-blue-900/20 transition hover:bg-[#1D4ED8] disabled:cursor-not-allowed disabled:bg-blue-300 focus:outline-none focus:ring-4 focus:ring-blue-200"
                  >
                    {submitState === 'submitting' ? 'Envoi en cours…' : 'Créer la demande FleetOS'}
                    <BaseIcon path={mdiArrowRight} size={18} className="ml-2" />
                  </button>
                </form>
              </div>
            </section>

            <section id="modules" className="mx-auto max-w-7xl px-6 pb-10 lg:px-8">
              <div className="mb-8 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                <div>
                  <p className="text-xs font-semibold uppercase tracking-[0.28em] text-cyan-300">Pourquoi FleetOS</p>
                  <h3 className="mt-2 text-3xl font-semibold text-white">Le shell MVP combine déjà acquisition, pilotage et exécution.</h3>
                </div>
                <p className="max-w-2xl text-sm leading-7 text-slate-300">
                  Nous ne reconstruisons pas les CRUD génériques : nous les encapsulons dans une expérience métier plus claire pour TSC SARL.
                </p>
              </div>

              <div className="grid gap-5 lg:grid-cols-4">
                {platformModules.map((module) => (
                  <div key={module.title} className="rounded-[28px] border border-white/10 bg-white/5 p-6 backdrop-blur transition hover:border-cyan-400/30 hover:bg-white/[0.07]">
                    <div className="inline-flex rounded-2xl bg-cyan-400/10 p-3 text-cyan-200">
                      <BaseIcon path={module.icon} size={24} />
                    </div>
                    <h4 className="mt-5 text-xl font-semibold text-white">{module.title}</h4>
                    <p className="mt-3 text-sm leading-7 text-slate-300">{module.copy}</p>
                  </div>
                ))}
              </div>
            </section>

            <section id="process" className="mx-auto max-w-7xl px-6 py-12 lg:px-8">
              <div className="rounded-[36px] border border-white/10 bg-[linear-gradient(135deg,rgba(37,99,235,0.14),rgba(6,182,212,0.07))] p-8 lg:p-10">
                <div className="mb-8 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                  <div>
                    <p className="text-xs font-semibold uppercase tracking-[0.28em] text-cyan-300">Initial MVP slice</p>
                    <h3 className="mt-2 text-3xl font-semibold text-white">Demande commerciale → cockpit d’exécution</h3>
                  </div>
                  <Link href="/fleetos-hub" className="inline-flex items-center text-sm font-semibold text-cyan-200 transition hover:text-white">
                    Ouvrir le Centre FleetOS
                    <BaseIcon path={mdiArrowRight} size={18} className="ml-2" />
                  </Link>
                </div>

                <div className="grid gap-5 lg:grid-cols-3">
                  {processSteps.map((item) => (
                    <div key={item.step} className="rounded-[28px] border border-white/10 bg-slate-950/40 p-6">
                      <p className="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-300">Étape {item.step}</p>
                      <h4 className="mt-4 text-xl font-semibold text-white">{item.title}</h4>
                      <p className="mt-3 text-sm leading-7 text-slate-300">{item.copy}</p>
                    </div>
                  ))}
                </div>
              </div>
            </section>

            <section className="mx-auto max-w-7xl px-6 py-10 lg:px-8">
              <div className="mb-8 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                <div>
                  <p className="text-xs font-semibold uppercase tracking-[0.28em] text-cyan-300">6 expertises TSC</p>
                  <h3 className="mt-2 text-3xl font-semibold text-white">Expertise locale combinée aux standards internationaux.</h3>
                </div>
                <p className="max-w-2xl text-sm leading-7 text-slate-300">
                  FleetOS organise la coordination entre ventes, delivery, support et finance pour chacune des lignes de services opérées par TSC SARL.
                </p>
              </div>

              <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
                {expertiseCards.map((card) => (
                  <div key={card.title} className="rounded-[28px] border border-white/10 bg-white/5 p-6 backdrop-blur">
                    <div className="inline-flex rounded-2xl bg-white/10 p-3 text-white">
                      <BaseIcon path={card.icon} size={24} />
                    </div>
                    <h4 className="mt-5 text-xl font-semibold text-white">{card.title}</h4>
                    <p className="mt-3 text-sm leading-7 text-slate-300">{card.text}</p>
                  </div>
                ))}
              </div>
            </section>

            <section className="mx-auto max-w-7xl px-6 py-10 lg:px-8">
              <div className="grid gap-6 lg:grid-cols-[0.78fr_1.22fr]">
                <div className="rounded-[32px] border border-white/10 bg-white/5 p-8 backdrop-blur">
                  <p className="text-xs font-semibold uppercase tracking-[0.28em] text-cyan-300">Pricing</p>
                  <h3 className="mt-3 text-3xl font-semibold text-white">Freemium pour démarrer, Pro pour scaler.</h3>
                  <p className="mt-4 text-sm leading-7 text-slate-300">
                    Conçu pour les équipes services IT qui veulent centraliser pipeline, delivery, tickets, timesheets et facturation sans stack fragmentée.
                  </p>
                  <div className="mt-6 space-y-3 text-sm text-slate-200">
                    <div className="rounded-2xl border border-white/10 bg-slate-950/35 p-4">
                      <p className="font-semibold text-white">Freemium</p>
                      <p className="mt-1 text-slate-300">3 utilisateurs · démarrage rapide</p>
                    </div>
                    <div className="rounded-2xl border border-cyan-400/20 bg-cyan-400/10 p-4">
                      <p className="font-semibold text-white">Pro</p>
                      <p className="mt-1 text-slate-200">25 USD / utilisateur / mois</p>
                    </div>
                    <div className="rounded-2xl border border-white/10 bg-slate-950/35 p-4">
                      <p className="font-semibold text-white">Enterprise</p>
                      <p className="mt-1 text-slate-300">Branding, custom domain, gouvernance et intégrations avancées</p>
                    </div>
                  </div>
                </div>

                <div className="rounded-[32px] border border-white/10 bg-white/5 p-8 backdrop-blur">
                  <div className="grid gap-6 lg:grid-cols-2">
                    <div>
                      <p className="text-xs font-semibold uppercase tracking-[0.28em] text-cyan-300">Contact TSC SARL</p>
                      <h3 className="mt-3 text-3xl font-semibold text-white">Prêt à centraliser votre business IT ?</h3>
                      <p className="mt-4 text-sm leading-7 text-slate-300">
                        Favoriser la transformation numérique du Congo avec un cockpit capable d’orchestrer vos deals, projets, équipes, tickets et factures en temps réel.
                      </p>
                    </div>
                    <div className="space-y-4 text-sm text-slate-200">
                      <div className="rounded-2xl border border-white/10 bg-slate-950/35 p-4">
                        <div className="flex items-center gap-3">
                          <BaseIcon path={mdiEmail} size={18} className="text-cyan-300" />
                          <span>lus@nselus.org</span>
                        </div>
                      </div>
                      <div className="rounded-2xl border border-white/10 bg-slate-950/35 p-4">
                        <div className="flex items-center gap-3">
                          <BaseIcon path={mdiPhone} size={18} className="text-cyan-300" />
                          <span>+243 840 765 653</span>
                        </div>
                      </div>
                      <div className="rounded-2xl border border-white/10 bg-slate-950/35 p-4 text-slate-200">
                        11, Avenue des Écuries, Q/Joli Parc, C/Ngaliema, Kinshasa
                      </div>
                      <div className="rounded-2xl border border-white/10 bg-slate-950/35 p-4 text-slate-200">
                        Lundi–Vendredi · 8h00–18h00 · FR par défaut / EN disponible
                      </div>
                    </div>
                  </div>

                  <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                    <a
                      href="#demo"
                      className="inline-flex items-center justify-center rounded-full bg-[#2563EB] px-5 py-3 text-sm font-semibold text-white transition hover:bg-[#1D4ED8]"
                    >
                      Soumettre un besoin
                    </a>
                    <Link href="/fleetos-hub" className="inline-flex items-center justify-center rounded-full border border-white/15 px-5 py-3 text-sm font-semibold text-white transition hover:border-white/40 hover:bg-white/5">
                      Accéder à l’admin
                    </Link>
                  </div>
                </div>
              </div>
            </section>
          </main>

          <footer className="mx-auto mt-10 flex max-w-7xl flex-col gap-4 border-t border-white/10 px-6 py-8 text-sm text-slate-400 lg:flex-row lg:items-center lg:justify-between lg:px-8">
            <p>TSC FleetOS · Solutions Technologiques Intelligentes pour les sociétés IT d’Afrique francophone.</p>
            <div className="flex flex-wrap gap-4">
              <Link href="/login" className="transition hover:text-white">
                Login
              </Link>
              <Link href="/fleetos-hub" className="transition hover:text-white">
                Interface admin
              </Link>
            </div>
          </footer>
        </div>
      </div>
    </>
  );
}

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