// Page d'accueil — plateforme pédagogique de cours (IMM1003 · IMM1033, UQO).
// Ton institutionnel et transparent : ce n'est pas un produit commercial.
import Image from "next/image";
import Link from "next/link";
import { redirect } from "next/navigation";
import { DemoButton } from "@/components/demo-button";
import {
  ArrowRight, BadgeCheck, BookOpen, BookOpenCheck, BrainCircuit, FileSearch,
  GraduationCap, Layers, LineChart, Lock, MessageSquareText, Network,
  Presentation, ShieldCheck, Timer,
} from "lucide-react";
import { ImmbotLogo, ImmbotMark, UqoLogo } from "@/components/logo";
import { ThemeToggle } from "@/components/theme-toggle";
import { currentUser } from "@/lib/auth/session.ts";
import { get } from "@/lib/db/index.ts";

export default async function HomePage() {
  const user = await currentUser();
  if (user) redirect("/chat");

  const chunks = get<{ n: number }>("SELECT COUNT(*) as n FROM chunks WHERE space LIKE 'official-%'")?.n ?? 2000;
  const questions = get<{ n: number }>("SELECT COUNT(*) as n FROM quiz_questions")?.n ?? 129;
  const cards = get<{ n: number }>("SELECT COUNT(*) as n FROM flashcards")?.n ?? 140;
  const exams = get<{ n: number }>("SELECT COUNT(*) as n FROM mock_exams")?.n ?? 6;

  return (
    <div className="min-h-dvh bg-app">
      {/* Filet institutionnel */}
      <div className="h-1 bg-brand-700" aria-hidden>
        <div className="h-full w-24 bg-gold-500 ml-4 sm:ml-8" />
      </div>

      <header className="sticky top-0 z-40 bg-card/95 backdrop-blur border-b border-app">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 h-15 sm:h-16 flex items-center justify-between gap-3">
          <div className="flex items-center gap-3 sm:gap-4 min-w-0">
            <ImmbotLogo size={28} />
            <span className="hidden sm:block w-px h-7" style={{ background: "var(--border)" }} aria-hidden />
            <UqoLogo height={30} className="hidden sm:block dark:invert" />
          </div>
          <nav className="flex items-center gap-1.5 sm:gap-2 shrink-0">
            <ThemeToggle className="hidden sm:block" />
            <Link href="/connexion" className="px-3 sm:px-4 py-2 text-[13.5px] sm:text-sm font-semibold text-fg hover:bg-surface-2 dark:hover:bg-brand-900/40 rounded-lg transition-colors">
              Connexion
            </Link>
            <Link href="/inscription" className="px-3 sm:px-4 py-2 text-[13.5px] sm:text-sm font-semibold bg-brand-700 hover:bg-brand-800 text-white rounded-lg transition-colors">
              Créer un compte
            </Link>
          </nav>
        </div>
        {/* Bandeau de divulgation */}
        <div className="bg-brand-700 text-white">
          <p className="max-w-6xl mx-auto px-4 sm:px-6 py-1.5 text-[11.5px] sm:text-[12.5px] font-medium text-center sm:text-left">
            Plateforme pédagogique réservée aux personnes inscrites à <strong>IMM1003</strong> et{" "}
            <strong>IMM1033</strong> — Automne 2026 · Fournie par le professeur Simon-Pierre Boucher, UQO
          </p>
        </div>
      </header>

      <main>
        {/* ================= Héro ================= */}
        <section className="relative overflow-hidden">
          {/* Quadrillage discret */}
          <div
            aria-hidden
            className="absolute inset-0 opacity-[0.5] dark:opacity-[0.12]"
            style={{
              backgroundImage:
                "linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px)",
              backgroundSize: "44px 44px",
              maskImage: "radial-gradient(ellipse 90% 65% at 50% 0%, black 35%, transparent 78%)",
              WebkitMaskImage: "radial-gradient(ellipse 90% 65% at 50% 0%, black 35%, transparent 78%)",
            }}
          />
          <div className="relative max-w-6xl mx-auto px-4 sm:px-6 pt-10 sm:pt-16 pb-12 sm:pb-16 grid lg:grid-cols-2 gap-10 lg:gap-12 items-center">
            <div>
              <p className="inline-flex items-center gap-2 text-[12px] sm:text-[13px] font-semibold text-brand-700 dark:text-brand-300 bg-brand-100 dark:bg-brand-900/50 border border-brand-200 dark:border-brand-800 px-3.5 py-1.5 rounded-full animate-fade-up">
                <GraduationCap size={14} /> L'outil d'étude officiel de vos cours
              </p>
              <h1 className="mt-5 text-[2.1rem] leading-[1.1] sm:text-[3.4rem] font-bold tracking-tight text-fg animate-fade-up [animation-delay:60ms] text-balance">
                Étudiez IMM1003 et IMM1033 avec un assistant qui connaît{" "}
                <span className="relative whitespace-nowrap">
                  <span className="text-brand-600 dark:text-brand-300">vos diapositives</span>
                  <svg className="absolute -bottom-1.5 left-0 w-full" height="6" viewBox="0 0 200 6" preserveAspectRatio="none" aria-hidden>
                    <path d="M0 4 Q 50 0.5 100 3 T 200 2.5" stroke="#C6A300" strokeWidth="2.5" fill="none" strokeLinecap="round" />
                  </svg>
                </span>
                .
              </h1>
              <p className="mt-5 text-[15px] sm:text-[17px] text-muted leading-relaxed animate-fade-up [animation-delay:120ms] text-pretty max-w-xl">
                Mise en place par votre professeur, cette plateforme est construite sur le{" "}
                <strong className="text-fg font-semibold">matériel officiel des deux cours</strong> — chaque
                réponse cite la séance et la diapositive exactes, que vous pouvez vérifier d'un clic.
              </p>
              <ul className="mt-5 space-y-2 animate-fade-up [animation-delay:160ms]">
                {[
                  "Fondé uniquement sur le contenu du cours (mode par défaut)",
                  "Vos conversations et votre progression restent privées",
                  "Gratuit pour les personnes inscrites — aucun objectif commercial",
                ].map((t) => (
                  <li key={t} className="flex items-start gap-2.5 text-[13.5px] sm:text-[14.5px] text-fg">
                    <BadgeCheck size={17} className="text-brand-600 dark:text-brand-300 shrink-0 mt-0.5" />
                    {t}
                  </li>
                ))}
              </ul>
              <div className="mt-7 flex flex-col sm:flex-row sm:items-center gap-2.5 animate-fade-up [animation-delay:200ms]">
                <Link href="/inscription" className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-brand-700 hover:bg-brand-800 text-white font-semibold rounded-xl shadow-md shadow-brand-700/20 transition-colors">
                  Créer mon compte étudiant <ArrowRight size={16} />
                </Link>
                <Link href="/connexion" className="inline-flex items-center justify-center px-6 py-3 bg-card border border-app hover:border-brand-400 text-fg font-semibold rounded-xl transition-colors">
                  J'ai déjà un compte
                </Link>
              </div>
              <div className="mt-3 animate-fade-up [animation-delay:240ms]">
                <DemoButton />
                <p className="text-[11.5px] text-muted mt-1.5">
                  Compte d'essai partagé avec accès aux deux cours — vos vraies données commencent avec votre compte personnel.
                </p>
              </div>
            </div>

            {/* Aperçu du chat */}
            <div className="animate-fade-up [animation-delay:240ms]">
              <div className="bg-card border border-app rounded-xl shadow-xl overflow-hidden">
                <div className="px-4 py-2.5 border-b border-app flex items-center gap-2.5 bg-surface-1 dark:bg-brand-950/60">
                  <ImmbotMark size={20} />
                  <span className="text-[12.5px] font-semibold text-fg">IMM1033 · Cours interactif</span>
                  <span className="ml-auto text-[11px] text-muted font-medium">Mode par défaut : matériel officiel</span>
                </div>
                <div className="p-4 sm:p-5 space-y-3.5 text-left">
                  <div className="flex justify-end">
                    <div className="bg-brand-700 text-white rounded-2xl rounded-br-md px-4 py-2.5 max-w-[88%] text-[13px] sm:text-[13.5px]">
                      Que dit la séance 10 sur la dépréciation incurable de longue durée ?
                    </div>
                  </div>
                  <div className="flex flex-wrap gap-1.5">
                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg border border-app bg-surface-1 dark:bg-brand-950/40 text-[11.5px] font-medium text-muted">
                      <BookOpen size={11} /> Parcourt le plan de la séance 10
                    </span>
                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg border border-app bg-surface-1 dark:bg-brand-950/40 text-[11.5px] font-medium text-muted">
                      <Presentation size={11} /> Lit les diapositives 23–27
                    </span>
                  </div>
                  <div className="flex gap-2.5">
                    <ImmbotMark size={22} className="shrink-0 mt-1" />
                    <div className="bg-surface-1 dark:bg-brand-900/40 border border-app rounded-2xl rounded-bl-md px-4 py-3 text-[13px] sm:text-[13.5px] text-fg leading-relaxed">
                      La dépréciation physique incurable de longue durée touche les composantes qui durent
                      aussi longtemps que le bâtiment <span className="citation-chip">S1</span>. On l'estime
                      par la méthode <strong>âge-vie</strong> appliquée à la base résiduelle — après avoir
                      retiré le curable et le court terme pour éviter le{" "}
                      <strong>double comptage</strong> <span className="citation-chip">S3</span>.
                      <span className="block mt-2.5 pt-2 border-t border-app text-[11px] text-muted">
                        Sources : Séance 10 — Diapositives 23 et 25 · vérifiables d'un clic
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <p className="text-center text-[11.5px] text-muted mt-2">
                Réponse réelle du mode « Cours interactif » : l'assistant consulte les diapositives sous vos yeux.
              </p>
            </div>
          </div>
        </section>

        {/* ================= Matériel indexé ================= */}
        <section className="border-y border-app bg-card">
          <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 sm:py-10">
            <p className="text-center text-[12px] font-bold uppercase tracking-widest text-muted">
              Le matériel de vos deux cours, indexé à la diapositive près
            </p>
            <div className="mt-5 grid grid-cols-2 sm:grid-cols-4 gap-px rounded-xl overflow-hidden border border-app" style={{ background: "var(--border)" }}>
              {[
                [chunks.toLocaleString("fr-CA"), "extraits du matériel officiel"],
                ["28", "séances consultables en ligne"],
                [`${questions} + ${cards}`, "questions et cartes mémoire"],
                [String(exams), "examens blancs corrigés"],
              ].map(([n, label]) => (
                <div key={label} className="bg-card px-4 py-4 sm:py-5 text-center">
                  <p className="text-xl sm:text-2xl font-bold text-brand-700 dark:text-brand-300 tracking-tight">{n}</p>
                  <p className="text-[11.5px] sm:text-[12.5px] text-muted mt-0.5">{label}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ================= Trois façons d'étudier ================= */}
        <section className="max-w-6xl mx-auto px-4 sm:px-6 py-14 sm:py-20">
          <h2 className="text-xl sm:text-3xl font-bold tracking-tight text-center text-fg">Trois façons d'étudier</h2>
          <p className="text-center text-[13.5px] sm:text-base text-muted mt-2.5 max-w-xl mx-auto">
            Chaque module applique un principe validé par la science de l'apprentissage — pas de gadgets.
          </p>
          <div className="mt-9 sm:mt-12 grid md:grid-cols-3 gap-4 sm:gap-5">
            {PILLARS.map((p, i) => (
              <div key={p.title} className="relative bg-card border border-app rounded-xl p-5 sm:p-6 overflow-hidden">
                <div className="absolute inset-x-0 top-0 h-1" style={{ background: i === 1 ? "#C6A300" : "var(--color-brand-700, #003E7E)" }} />
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-lg bg-brand-700 text-white flex items-center justify-center shrink-0">
                    <p.icon size={19} />
                  </div>
                  <div>
                    <p className="text-[11px] font-bold uppercase tracking-widest text-muted">{p.eyebrow}</p>
                    <h3 className="font-bold text-[16px] text-fg tracking-tight">{p.title}</h3>
                  </div>
                </div>
                <ul className="mt-4 space-y-2.5">
                  {p.items.map((it) => (
                    <li key={it.label} className="flex items-start gap-2.5">
                      <it.icon size={15} className="text-brand-600 dark:text-brand-300 shrink-0 mt-0.5" />
                      <span className="text-[13px] text-fg leading-snug">
                        <strong className="font-semibold">{it.label}</strong>
                        <span className="text-muted"> — {it.text}</span>
                      </span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </section>

        {/* ================= La plateforme en images ================= */}
        <section className="border-t border-app bg-card">
          <div className="max-w-6xl mx-auto px-4 sm:px-6 py-14 sm:py-20">
            <h2 className="text-xl sm:text-3xl font-bold tracking-tight text-center text-fg">La plateforme en images</h2>
            <p className="text-center text-[13.5px] sm:text-base text-muted mt-2.5 max-w-xl mx-auto">
              Captures réelles de l'application — exactement ce que vous verrez une fois connecté·e.
            </p>
            <div className="mt-9 grid md:grid-cols-2 gap-5 sm:gap-7">
              {SCREENS.map((s) => (
                <figure key={s.src} className="group">
                  <div className="rounded-xl border border-app bg-app shadow-lg overflow-hidden transition-transform duration-300 group-hover:-translate-y-0.5 group-hover:shadow-xl">
                    <div className="flex items-center gap-1.5 px-3.5 py-2 bg-surface-2 dark:bg-brand-950/60 border-b border-app">
                      <span className="w-2.5 h-2.5 rounded-full bg-red-400/80" aria-hidden />
                      <span className="w-2.5 h-2.5 rounded-full bg-amber-400/80" aria-hidden />
                      <span className="w-2.5 h-2.5 rounded-full bg-emerald-400/80" aria-hidden />
                      <span className="ml-2 text-[11px] font-medium text-muted truncate">{s.url}</span>
                    </div>
                    <Image
                      src={s.src}
                      alt={s.alt}
                      width={1280}
                      height={800}
                      className="w-full h-auto"
                      sizes="(max-width: 768px) 100vw, 560px"
                    />
                  </div>
                  <figcaption className="mt-2.5 px-1">
                    <p className="text-[13.5px] font-semibold text-fg">{s.title}</p>
                    <p className="text-[12.5px] text-muted mt-0.5">{s.caption}</p>
                  </figcaption>
                </figure>
              ))}
            </div>
          </div>
        </section>

        {/* ================= Les deux cours ================= */}
        <section className="border-t border-app bg-card">
          <div className="max-w-6xl mx-auto px-4 sm:px-6 py-14 sm:py-18">
            <div className="grid md:grid-cols-2 gap-4">
              <div className="relative border border-app rounded-xl p-5 sm:p-7 bg-app overflow-hidden">
                <div className="absolute inset-x-0 top-0 h-1 bg-brand-700" />
                <p className="text-[12px] font-bold text-brand-700 dark:text-brand-300 tracking-widest">IMM1003 · AUTOMNE 2026</p>
                <h3 className="text-lg sm:text-xl font-bold tracking-tight text-fg mt-1.5">Éléments d'évaluation immobilière</h3>
                <p className="text-[13px] sm:text-sm text-muted mt-2.5 leading-relaxed">
                  Cadre professionnel OEAQ, principes économiques, types de valeur, marché québécois et les
                  trois méthodes reconnues — jusqu'au rapport d'évaluation conforme.
                </p>
              </div>
              <div className="relative border border-app rounded-xl p-5 sm:p-7 bg-app overflow-hidden">
                <div className="absolute inset-x-0 top-0 h-1 bg-gold-500" />
                <p className="text-[12px] font-bold text-gold-600 dark:text-gold-400 tracking-widest">IMM1033 · AUTOMNE 2026</p>
                <h3 className="text-lg sm:text-xl font-bold tracking-tight text-fg mt-1.5">Méthodes du coût en évaluation immobilière</h3>
                <p className="text-[13px] sm:text-sm text-muted mt-2.5 leading-relaxed">
                  Évaluation du terrain, coûts directs et indirects, profit de l'entrepreneur et la mesure
                  rigoureuse des trois formes de dépréciation — jusqu'au cas intégrateur complet.
                </p>
              </div>
            </div>
            <p className="text-center text-[12.5px] text-muted mt-5">
              Professeur : <strong className="text-fg font-semibold">Simon-Pierre Boucher</strong> — Département
              des sciences administratives, Université du Québec en Outaouais
            </p>
          </div>
        </section>

        {/* ================= Un outil pédagogique, pas un raccourci ================= */}
        <section className="max-w-4xl mx-auto px-4 sm:px-6 py-14 sm:py-20">
          <h2 className="text-xl sm:text-3xl font-bold tracking-tight text-center text-fg">
            Un outil pédagogique — pas un raccourci
          </h2>
          <div className="mt-8 grid sm:grid-cols-3 gap-4">
            {[
              {
                icon: ShieldCheck,
                title: "Transparent",
                text: "L'origine de chaque information est identifiée : matériel officiel (cité par diapositive), vos documents, Web ou connaissances du modèle. Quand le cours ne couvre pas une question, l'assistant le dit.",
              },
              {
                icon: BookOpenCheck,
                title: "Honnête avec vos travaux",
                text: "Pour un atelier noté, l'assistant vous demande d'abord votre tentative et guide par indices — il est là pour vous préparer à l'examen, pas pour faire le travail à votre place.",
              },
              {
                icon: Lock,
                title: "Privé",
                text: "Vos conversations et votre progression individuelle ne sont jamais montrées au professeur — il ne voit que des statistiques agrégées et anonymisées. Aucune donnée n'est vendue ni utilisée à d'autres fins.",
              },
            ].map((c) => (
              <div key={c.title} className="text-center px-2">
                <c.icon className="mx-auto text-brand-600 dark:text-brand-300" size={26} />
                <h3 className="font-bold text-[15px] text-fg mt-3 tracking-tight">{c.title}</h3>
                <p className="text-[12.5px] text-muted mt-2 leading-relaxed">{c.text}</p>
              </div>
            ))}
          </div>
          <div className="mt-10 text-center">
            <Link href="/inscription" className="inline-flex items-center gap-2 px-6 py-3 bg-brand-700 hover:bg-brand-800 text-white font-semibold rounded-xl transition-colors">
              Accéder à la plateforme <ArrowRight size={16} />
            </Link>
            <p className="text-[12px] text-muted mt-3">
              Réservé aux personnes inscrites aux cours. L'assistant peut se tromper : vérifiez les sources citées.
            </p>
          </div>
        </section>
      </main>

      <footer className="border-t border-app bg-card">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 flex flex-col sm:flex-row items-center sm:items-start justify-between gap-5">
          <div className="flex flex-col items-center sm:items-start gap-3 max-w-md text-center sm:text-left">
            <div className="flex items-center gap-4">
              <ImmbotLogo size={24} />
              <span className="w-px h-6" style={{ background: "var(--border)" }} aria-hidden />
              <UqoLogo height={26} className="dark:invert" />
            </div>
            <p className="text-[11.5px] text-muted leading-relaxed">
              Immbot AI est un outil pédagogique fourni gratuitement aux étudiantes et étudiants
              d'IMM1003 et IMM1033 par le professeur Simon-Pierre Boucher (UQO). Il ne remplace ni les
              séances, ni le matériel officiel, ni le plan de cours.
            </p>
          </div>
          <div className="text-[11.5px] text-muted text-center sm:text-right space-y-1 shrink-0">
            <p>IMM1003 · IMM1033 — Automne 2026</p>
            <p>Université du Québec en Outaouais</p>
            <p>simon-pierre.boucher@uqo.ca</p>
            <p className="pt-1.5 space-x-3">
              <Link href="/conditions" className="font-semibold text-fg hover:underline">Conditions d'utilisation</Link>
              <Link href="/confidentialite" className="font-semibold text-fg hover:underline">Confidentialité</Link>
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
}

const SCREENS = [
  {
    src: "/screens/chat.png",
    url: "immbot.ai/chat",
    alt: "Le chat d'Immbot AI répond avec des citations vérifiables et montre ses consultations du cours",
    title: "Le chat qui montre ses sources",
    caption: "L'assistant consulte le plan et lit les diapositives sous vos yeux, puis cite chaque affirmation — cliquez S1 pour voir l'extrait original.",
  },
  {
    src: "/screens/diapositives.png",
    url: "immbot.ai/apprendre/imm1033/diapositives",
    alt: "La visionneuse de diapositives avec sommaire et encadrés colorés",
    title: "Les 28 séances consultables en ligne",
    caption: "Navigation au clavier, recherche dans la séance, définitions et formules en encadrés, PDF original téléchargeable.",
  },
  {
    src: "/screens/progression.png",
    url: "immbot.ai/apprendre/imm1003",
    alt: "Le tableau de progression avec maîtrise estimée, série de jours et statistiques",
    title: "Votre progression, honnêtement",
    caption: "Maîtrise estimée par notion, série de jours d'étude, cartes dues et recommandations justifiées — visible par vous seul·e.",
  },
  {
    src: "/screens/concepts.png",
    url: "immbot.ai/apprendre/imm1003/concepts",
    alt: "La carte interactive des concepts du cours, colorée selon la maîtrise",
    title: "La carte des concepts du cours",
    caption: "Les notions semaine par semaine avec leurs préalables, colorées selon votre maîtrise — un clic pour réviser, quizzer ou en discuter.",
  },
] as const;

const PILLARS = [
  {
    eyebrow: "Comprendre",
    title: "Poser des questions au cours",
    icon: MessageSquareText,
    items: [
      { icon: FileSearch, label: "Citations exactes", text: "chaque réponse renvoie à la séance et à la diapositive, vérifiables d'un clic" },
      { icon: BrainCircuit, label: "Cours interactif", text: "l'assistant consulte le plan et lit les diapositives sous vos yeux" },
      { icon: Presentation, label: "Diapositives en ligne", text: "les 28 séances consultables avec recherche, sommaire et PDF original" },
    ],
  },
  {
    eyebrow: "Pratiquer",
    title: "Se tester régulièrement",
    icon: BookOpenCheck,
    items: [
      { icon: Layers, label: "Cartes mémoire", text: "répétition espacée pour retenir formules et taxonomies durablement" },
      { icon: BookOpenCheck, label: "Quiz adaptatifs", text: "la difficulté suit vos réponses et cible vos faiblesses" },
      { icon: Timer, label: "Examens blancs", text: "intra et final simulés, chronométrés, corrigés par compétence" },
    ],
  },
  {
    eyebrow: "Progresser",
    title: "Savoir où vous en êtes",
    icon: LineChart,
    items: [
      { icon: Network, label: "Carte des concepts", text: "les notions du cours et leurs préalables, colorées selon votre maîtrise" },
      { icon: LineChart, label: "Progression honnête", text: "une estimation par notion, fondée sur la difficulté et la récence" },
      { icon: GraduationCap, label: "Plan d'étude", text: "généré depuis votre date d'examen et vos disponibilités, il s'adapte" },
    ],
  },
] as const;