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

import type { Metadata } from "next";
import {
  AtSign,
  Briefcase,
  Download,
  Github,
  GraduationCap,
  Languages,
  Mail,
  MapPin,
} 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";

export const metadata: Metadata = {
  title: "CV",
  description:
    "CV summary and contact information for Simon-Pierre Boucher — Professor, Department of Administrative Sciences, Université du Québec en Outaouais (UQO).",
};

const positions = [
  {
    role: "Professor — Department of Administrative Sciences",
    org: "Université du Québec en Outaouais (UQO), Gatineau",
    period: "Present",
  },
  {
    role: "Lecturer",
    org: "Université Laval",
    period: "2021–Present",
  },
  {
    role: "Teaching Assistant",
    org: "Université Laval",
    period: "2018–2021",
  },
];

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",
  },
  {
    degree: "B.B.A. in Business Administration (Finance)",
    school: "Université Laval",
    period: "2013–2017",
  },
];

export default function CvPage() {
  return (
    <div className="mx-auto max-w-5xl px-4 py-16 sm:px-6">
      <Reveal>
        <SectionHeading
          as="h1"
          eyebrow="Curriculum Vitae"
          title="CV"
          icon={Briefcase}
          description="Professor in the Department of Administrative Sciences at Université du Québec en Outaouais (UQO). Research in financial econometrics, commodity markets, monetary policy announcements, high-frequency finance, volatility modelling, textual analysis, and financialization."
        />
      </Reveal>

      {/* Download */}
      <Reveal delay={0.08} className="mt-8">
        <div className="flex flex-col gap-5 border-y-2 border-foreground bg-card/50 p-6 sm:flex-row sm:items-center sm:justify-between sm:p-7">
          <div className="min-w-0">
            <h2 className="font-display text-base font-semibold tracking-tight">
              Full Curriculum Vitae
            </h2>
            <p className="mt-1.5 max-w-md text-sm leading-relaxed text-muted-foreground">
              Complete 4-page PDF — positions, education, research &amp; working
              papers, detailed teaching, applications, and skills.
            </p>
          </div>
          <a
            href="/cv/Simon-Pierre-Boucher-CV.pdf"
            download
            className={`${buttonVariants()} shrink-0`}
          >
            <Download aria-hidden="true" />
            Download CV (PDF)
          </a>
        </div>
      </Reveal>

      {/* Contact */}
      <section className="mt-12">
        <Reveal>
          <SectionHeading title="Contact" icon={AtSign} />
          <Card className="mt-4">
            <CardContent className="grid gap-3 p-6 text-sm sm:grid-cols-2">
              <a
                href="mailto:simon-pierre.boucher@uqo.ca"
                className="inline-flex items-center gap-3 rounded-2xl border border-border/50 bg-muted/40 px-4 py-3 text-muted-foreground transition-all hover:-translate-y-px hover:border-primary/30 hover:text-foreground"
              >
                <IconTile icon={Mail} size="sm" />
                simon-pierre.boucher@uqo.ca (academic)
              </a>
              <a
                href="mailto:contact@spboucher.ai"
                className="inline-flex items-center gap-3 rounded-2xl border border-border/50 bg-muted/40 px-4 py-3 text-muted-foreground transition-all hover:-translate-y-px hover:border-primary/30 hover:text-foreground"
              >
                <IconTile icon={Mail} size="sm" />
                contact@spboucher.ai (personal)
              </a>
              <a
                href="https://git.spboucher.ai"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-3 rounded-2xl border border-border/50 bg-muted/40 px-4 py-3 text-muted-foreground transition-all hover:-translate-y-px hover:border-primary/30 hover:text-foreground"
              >
                <IconTile icon={Github} size="sm" />
                git.spboucher.ai
              </a>
              <span className="inline-flex items-center gap-3 rounded-2xl border border-border/50 bg-muted/40 px-4 py-3 text-muted-foreground">
                <IconTile icon={MapPin} size="sm" />
                UQO, Gatineau — Pavillon Alexandre-Taché
              </span>
            </CardContent>
          </Card>
        </Reveal>
      </section>

      {/* Positions */}
      <section className="mt-12">
        <Reveal>
          <SectionHeading title="Positions" icon={Briefcase} />
        </Reveal>
        <div className="mt-4 space-y-4">
          {positions.map((p, i) => (
            <Reveal key={p.role} delay={i * 0.06}>
              <Card>
                <CardHeader className="flex-row items-start justify-between space-y-0">
                  <div>
                    <CardTitle className="text-base leading-snug">
                      {p.role}
                    </CardTitle>
                    <CardDescription className="mt-1">{p.org}</CardDescription>
                  </div>
                  <Badge variant="outline">{p.period}</Badge>
                </CardHeader>
              </Card>
            </Reveal>
          ))}
        </div>
      </section>

      {/* Education */}
      <section className="mt-12">
        <Reveal>
          <SectionHeading title="Education" icon={GraduationCap} />
        </Reveal>
        <div className="mt-4 space-y-4">
          {education.map((item, i) => (
            <Reveal key={item.degree} delay={i * 0.06}>
              <Card>
                <CardHeader className="flex-row items-start justify-between space-y-0">
                  <div>
                    <CardTitle className="text-base leading-snug">
                      {item.degree}
                    </CardTitle>
                    <CardDescription className="mt-1">
                      {item.school}
                    </CardDescription>
                  </div>
                  <Badge variant="outline">{item.period}</Badge>
                </CardHeader>
              </Card>
            </Reveal>
          ))}
        </div>
      </section>

      {/* Languages */}
      <section className="mt-12">
        <Reveal>
          <SectionHeading title="Languages" icon={Languages} />
          <div className="mt-4 flex gap-2">
            <Badge variant="secondary">French — Bilingual</Badge>
            <Badge variant="secondary">English — Bilingual</Badge>
          </div>
        </Reveal>
      </section>
    </div>
  );
}