/*
  page.tsx
  spboucher.ai Web
  Author: Simon-Pierre Boucher
  Mail: contact@spboucher.ai
*/

import Image from "next/image";
import Link from "next/link";
import {
  AppWindow,
  ArrowRight,
  BookOpenCheck,
  Github,
  GraduationCap,
  Mail,
  MapPin,
  ScrollText,
  Sparkles,
  UserRound,
  Wrench,
} from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { IconTile } from "@/components/icon-tile";
import { Reveal } from "@/components/reveal";
import { SectionHeading } from "@/components/section-heading";
import { cn } from "@/lib/utils";

const stats = [
  { icon: BookOpenCheck, value: "1", label: "Peer-reviewed publication" },
  { icon: ScrollText, value: "10", label: "Working papers" },
  { icon: AppWindow, value: "9", label: "Native macOS apps" },
  { icon: Github, value: "30+", label: "Open-source repositories" },
];

const education = [
  {
    degree: "Ph.D. in Business Administration (Finance and Insurance)",
    school: "Université Laval",
    period: "2020–Present",
  },
  {
    degree: "M.Sc. in Business Administration (Finance)",
    school: "Université Laval",
    period: "2017–2019",
    note: "Thesis: Impact of Commuting Times on Residential Property Values: Evidence from the Province of Québec",
  },
  {
    degree: "B.B.A. in Business Administration (Finance)",
    school: "Université Laval",
    period: "2013–2017",
  },
];

const skillGroups = [
  {
    title: "Languages & frameworks",
    skills: [
      "Python",
      "TypeScript/JavaScript",
      "R",
      "MATLAB",
      "SAS/STATA",
      "SQL",
      "Julia",
      "C++",
      "Swift/SwiftUI",
      "LaTeX",
      "React/Next.js",
      "Node.js",
      "FastAPI",
      "Flask",
      "Streamlit",
      "Tailwind CSS",
      "shadcn/ui",
      "Framer Motion",
    ],
  },
  {
    title: "Data & econometrics",
    skills: [
      "Pandas",
      "NumPy",
      "statsmodels",
      "scikit-learn",
      "VAR",
      "BVAR",
      "HAR",
      "GARCH",
      "DCC-GARCH",
      "Event studies",
      "High-frequency analysis",
      "Realized volatility",
      "FRED",
      "FMP",
      "EODHD",
      "Yahoo Finance",
      "World Bank",
      "IMF",
      "OECD",
    ],
  },
  {
    title: "AI, LLMs & agents",
    skills: [
      "Claude/Anthropic SDK",
      "OpenAI API",
      "OpenRouter",
      "Vercel AI SDK",
      "Ollama",
      "llama.cpp",
      "GGUF",
      "Hugging Face",
      "Embeddings",
      "RAG",
      "Vector databases",
      "Tool-augmented agents",
      "LoRA",
      "QLoRA",
      "SFT fine-tuning",
    ],
  },
];

export default function HomePage() {
  return (
    <div className="mx-auto max-w-5xl px-4 sm:px-6">
      {/* Hero */}
      <section className="relative py-16 sm:py-24">
        <div className="grid items-center gap-12 lg:grid-cols-[1fr_auto]">
          <Reveal>
            <p className="flex items-center gap-3 font-mono text-[0.7rem] font-medium uppercase tracking-[0.22em] text-primary">
              <span aria-hidden="true" className="h-px w-8 bg-primary/60" />
              Professor · Dept. of Administrative Sciences · UQO
            </p>
            <h1 className="mt-5 font-display text-[2.75rem] font-semibold leading-[1.05] tracking-tight sm:text-7xl">
              Simon-Pierre
              <br />
              Boucher
            </h1>
            <p className="mt-6 max-w-2xl text-lg text-muted-foreground sm:text-xl">
              Financial econometrics researcher and{" "}
              <em className="font-display font-medium not-italic text-foreground [font-style:italic]">
                macOS/AI developer
              </em>
              .
            </p>
            <p className="mt-3 inline-flex items-start gap-2 text-sm text-muted-foreground">
              <MapPin
                className="mt-0.5 h-4 w-4 shrink-0 text-primary/70"
                aria-hidden="true"
              />
              Université du Québec en Outaouais (UQO), Gatineau — Pavillon
              Alexandre-Taché · Bilingual — French and English
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <Link href="/research" className={cn(buttonVariants())}>
                View Research
                <ArrowRight aria-hidden="true" />
              </Link>
              <Link
                href="/apps"
                className={cn(buttonVariants({ variant: "secondary" }))}
              >
                Apps &amp; Open Source
              </Link>
              <a
                href="https://git.spboucher.ai"
                target="_blank"
                rel="noopener noreferrer"
                className={cn(buttonVariants({ variant: "outline" }))}
              >
                <Github aria-hidden="true" />
                GitHub
              </a>
            </div>
            <div className="mt-6 flex flex-col gap-1 text-sm text-muted-foreground sm:flex-row sm:gap-6">
              <a
                href="mailto:simon-pierre.boucher@uqo.ca"
                className="inline-flex items-center gap-2 transition-colors hover:text-foreground"
              >
                <Mail className="h-4 w-4" aria-hidden="true" />
                simon-pierre.boucher@uqo.ca
              </a>
              <a
                href="mailto:contact@spboucher.ai"
                className="inline-flex items-center gap-2 transition-colors hover:text-foreground"
              >
                <Mail className="h-4 w-4" aria-hidden="true" />
                contact@spboucher.ai
              </a>
            </div>
          </Reveal>

          {/* Portrait — mounted like a plate in a monograph */}
          <Reveal delay={0.12} className="mx-auto w-60 sm:w-72 lg:w-80">
            <figure>
              <div className="relative">
                <div
                  aria-hidden="true"
                  className="absolute -bottom-2.5 -right-2.5 h-full w-full border border-primary/25 bg-[image:linear-gradient(to_right,oklch(0.44_0.155_268_/_10%)_1px,transparent_1px),linear-gradient(to_bottom,oklch(0.44_0.155_268_/_10%)_1px,transparent_1px)] bg-[size:8px_8px]"
                />
                <div className="relative border border-foreground/80 bg-card p-1.5 shadow-[var(--shadow-lift)]">
                  <Image
                    src="/profile/simon-pierre-boucher.jpeg"
                    alt="Portrait of Simon-Pierre Boucher"
                    width={880}
                    height={856}
                    priority
                    className="aspect-[5/6] w-full object-cover object-top"
                  />
                </div>
              </div>
              <figcaption className="mt-4 flex items-baseline justify-between font-mono text-[0.66rem] uppercase tracking-[0.14em] text-muted-foreground">
                <span>Fig. 1 — S.-P. Boucher</span>
                <span>Gatineau, QC</span>
              </figcaption>
            </figure>
          </Reveal>
        </div>

        {/* Stats — annual-report rules */}
        <Reveal delay={0.15} className="mt-16">
          <div className="grid grid-cols-2 gap-x-8 gap-y-8 lg:grid-cols-4">
            {stats.map((stat, i) => (
              <div key={stat.label} className="border-t-2 border-foreground pt-3">
                <p className="font-mono text-[0.62rem] uppercase tracking-[0.18em] text-muted-foreground/70">
                  {String(i + 1).padStart(2, "0")}
                </p>
                <p className="mt-1 font-display text-4xl font-semibold tracking-tight">
                  {stat.value}
                </p>
                <p className="mt-1.5 font-mono text-[0.68rem] uppercase leading-relaxed tracking-[0.12em] text-muted-foreground">
                  {stat.label}
                </p>
              </div>
            ))}
          </div>
        </Reveal>
      </section>

      {/* About */}
      <section className="border-t border-border/50 py-16 sm:py-20">
        <Reveal>
          <SectionHeading eyebrow="Profile" title="About" icon={UserRound} />
          <p className="mt-4 max-w-3xl leading-relaxed text-muted-foreground">
            Simon-Pierre Boucher is a Professor in the Department of
            Administrative Sciences at Université du Québec en Outaouais (UQO).
            His research focuses on financial econometrics, commodity markets,
            monetary policy announcements, high-frequency finance, volatility
            modelling, textual analysis, and financialization. He is completing
            a Ph.D. in Business Administration (Finance and Insurance) at
            Université Laval under the supervision of Prof. Marie-Hélène Gagnon
            and Prof. Gabriel Power. Alongside his academic work, he builds
            native macOS applications focused on AI and local LLMs (the Zyquo
            suite).
          </p>
        </Reveal>
      </section>

      {/* Education */}
      <section className="border-t border-border/50 py-16 sm:py-20">
        <Reveal>
          <SectionHeading
            eyebrow="Background"
            title="Education"
            icon={GraduationCap}
          />
        </Reveal>
        <div className="mt-6 grid gap-4 sm:grid-cols-3">
          {education.map((item, i) => (
            <Reveal key={item.degree} delay={i * 0.08}>
              <Card className="h-full hover:-translate-y-1 hover:shadow-[var(--shadow-lift)]">
                <CardHeader>
                  <IconTile icon={GraduationCap} size="sm" className="mb-1" />
                  <CardTitle className="text-base leading-snug">
                    {item.degree}
                  </CardTitle>
                  <CardDescription>
                    {item.school} · {item.period}
                  </CardDescription>
                </CardHeader>
                {item.note && (
                  <CardContent>
                    <p className="text-sm italic text-muted-foreground">
                      {item.note}
                    </p>
                  </CardContent>
                )}
              </Card>
            </Reveal>
          ))}
        </div>
      </section>

      {/* Research highlight */}
      <section className="border-t border-border/50 py-16 sm:py-20">
        <Reveal>
          <SectionHeading
            eyebrow="Latest"
            title="Research Highlight"
            icon={BookOpenCheck}
          />
          <Card className="mt-6">
            <CardHeader>
              <Badge className="w-fit">Publication · 2025</Badge>
              <CardTitle className="text-lg leading-snug">
                Speculative Trading in Energy Markets: Evidence from
                Macroeconomic Surprises
              </CardTitle>
              <CardDescription>
                Boucher, S.-P., Gagnon, M.-H., &amp; Power, G. J. —{" "}
                <em>The Energy Journal</em>
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Link
                href="/research"
                className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline"
              >
                All publications, working papers &amp; presentations
                <ArrowRight className="h-4 w-4" aria-hidden="true" />
              </Link>
            </CardContent>
          </Card>
        </Reveal>
      </section>

      {/* Skills */}
      <section className="border-t border-border/50 py-16 sm:py-20">
        <Reveal>
          <SectionHeading
            eyebrow="Toolbox"
            title="Technical Skills"
            icon={Wrench}
          />
        </Reveal>
        <div className="mt-6 grid gap-4 md:grid-cols-3">
          {skillGroups.map((group, i) => (
            <Reveal key={group.title} delay={i * 0.08}>
              <Card className="h-full">
                <CardHeader>
                  <CardTitle className="text-base">{group.title}</CardTitle>
                </CardHeader>
                <CardContent className="flex flex-wrap gap-1.5">
                  {group.skills.map((skill) => (
                    <Badge key={skill} variant="secondary">
                      {skill}
                    </Badge>
                  ))}
                </CardContent>
              </Card>
            </Reveal>
          ))}
        </div>
      </section>
    </div>
  );
}