<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Command Center · Life OS</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          void: '#0B0E14',
          surface: '#12161F',
          raised: '#171C27',
          hairline: '#232936',
          ink: '#E8EAED',
          muted: '#7A8394',
          faint: '#4B5361',
          blue: '#7C9EFF',
          amber: '#F5A96B',
          green: '#6FCF97',
          red: '#E8817A',
        },
        fontFamily: {
          display: ['"Space Grotesk"', 'sans-serif'],
          sans: ['Inter', 'sans-serif'],
          mono: ['"JetBrains Mono"', 'monospace'],
        },
      },
    },
  }
</script>

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<style>
  html, body { background-color: #0B0E14; }
  body { font-family: 'Inter', sans-serif; }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #232936; border-radius: 8px; }
  ::-webkit-scrollbar-thumb:hover { background: #2E3646; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }

  .focus-ring:focus-visible {
    outline: 2px solid #7C9EFF;
    outline-offset: 2px;
  }

  @keyframes riseIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .rise-in {
    animation: riseIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
</style>
</head>
<body class="bg-void text-ink antialiased">
<div id="root"></div>

<script type="text/babel" data-presets="react">
const { useState, useEffect, useRef, useMemo } = React;

/* ---------- Icônes (traits fins, style cohérent) ---------- */

const Icon = ({ d, className = "w-5 h-5", strokeWidth = 1.6 }) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth}
       strokeLinecap="round" strokeLinejoin="round" className={className}>
    {d}
  </svg>
);

const IconCommand = (p) => <Icon {...p} d={<>
  <rect x="3.5" y="3.5" width="7" height="7" rx="1.5" />
  <rect x="13.5" y="3.5" width="7" height="7" rx="1.5" />
  <rect x="3.5" y="13.5" width="7" height="7" rx="1.5" />
  <rect x="13.5" y="13.5" width="7" height="7" rx="1.5" />
</>} />;

const IconWallet = (p) => <Icon {...p} d={<>
  <path d="M3 7.5A2.5 2.5 0 0 1 5.5 5h11A2.5 2.5 0 0 1 19 7.5V8H5.5A2.5 2.5 0 0 0 3 10.5v-3Z" />
  <path d="M3 10.5v6A2.5 2.5 0 0 0 5.5 19h13a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 18.5 8h-13A2.5 2.5 0 0 0 3 10.5Z" />
  <circle cx="16" cy="13.5" r="1.1" fill="currentColor" stroke="none" />
</>} />;

const IconTasks = (p) => <Icon {...p} d={<>
  <path d="M9 6h11" /><path d="M9 12h11" /><path d="M9 18h11" />
  <path d="M4 6l1 1 2-2" /><path d="M4 12l1 1 2-2" /><path d="M4 18l1 1 2-2" />
</>} />;

const IconHeart = (p) => <Icon {...p} d={
  <path d="M12 20s-7-4.35-9.5-8.8C.8 7.8 2.4 4.5 5.6 4c2-.3 3.6.7 4.4 2.1.4.7 1.6.7 2 0 .8-1.4 2.4-2.4 4.4-2.1 3.2.5 4.8 3.8 3.1 7.2C19 15.65 12 20 12 20Z" />
} />;

const IconDumbbell = (p) => <Icon {...p} d={<>
  <path d="M6.5 8v8" /><path d="M17.5 8v8" />
  <path d="M3 10.5v3" /><path d="M21 10.5v3" />
  <path d="M9 12h6" />
</>} />;

const IconDroplet = (p) => <Icon {...p} d={
  <path d="M12 3.5s6 6.2 6 10.3a6 6 0 1 1-12 0c0-4.1 6-10.3 6-10.3Z" />
} />;

const IconTarget = (p) => <Icon {...p} d={<>
  <circle cx="12" cy="12" r="8" /><circle cx="12" cy="12" r="4" /><circle cx="12" cy="12" r="0.6" fill="currentColor" />
</>} />;

const IconArrowUp = (p) => <Icon {...p} d={<><path d="M12 19V5" /><path d="M6 11l6-6 6 6" /></>} />;
const IconArrowDown = (p) => <Icon {...p} d={<><path d="M12 5v14" /><path d="M18 13l-6 6-6-6" /></>} />;
const IconCheck = (p) => <Icon {...p} strokeWidth={2.2} d={<path d="M4 12.5l5 5L20 6.5" />} />;
const IconMoon = (p) => <Icon {...p} d={<path d="M20 14.5A8.5 8.5 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5Z" />} />;

/* ---------- Données de démonstration ---------- */

const NAV_ITEMS = [
  { id: "command", label: "Command Center", icon: IconCommand },
  { id: "finances", label: "Finances", icon: IconWallet },
  { id: "productivite", label: "Productivité", icon: IconTasks },
  { id: "vie-perso", label: "Vie Perso", icon: IconHeart },
];

const INITIAL_TASKS = [
  { id: 1, label: "Finaliser la proposition client Meridian", tag: "Deep work", done: false },
  { id: 2, label: "Cadrer la nouvelle itération avec l'équipe design", tag: "Réunion", done: false },
  { id: 3, label: "Répondre aux retours sur le prototype", tag: "Rapide", done: true },
];

const TRANSACTIONS = [
  { id: 1, label: "Freelance · Meridian", amount: 1200, when: "Aujourd'hui, 09:14" },
  { id: 2, label: "Abonnement Figma", amount: -15, when: "Hier, 18:02" },
  { id: 3, label: "Courses", amount: -68, when: "Hier, 12:40" },
  { id: 4, label: "Virement épargne", amount: -300, when: "Lundi, 08:00" },
];

const HABITS = [
  { id: "sport", label: "Sport", icon: IconDumbbell, value: 65, sub: "4 sur 6 séances", color: "#F5A96B" },
  { id: "hydratation", label: "Hydratation", icon: IconDroplet, value: 80, sub: "1,6 sur 2 L", color: "#7C9EFF" },
  { id: "focus", label: "Focus", icon: IconTarget, value: 45, sub: "3h10 sur 7h", color: "#6FCF97" },
];

/* ---------- Utilitaires ---------- */

function useClock() {
  const [now, setNow] = useState(new Date());
  useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  return now;
}

function greeting(hour) {
  if (hour < 6) return "Bonne nuit";
  if (hour < 12) return "Bonjour";
  if (hour < 18) return "Bon après-midi";
  return "Bonsoir";
}

function formatEUR(n) {
  const sign = n > 0 ? "+" : "";
  return sign + n.toLocaleString("fr-FR") + " €";
}

/* ---------- Éléments d'interface partagés ---------- */

function Card({ children, className = "", delay = 0, title, subtitle, right }) {
  return (
    <div
      className={"rise-in bg-surface border border-hairline rounded-xl p-5 sm:p-6 " + className}
      style={{ animationDelay: delay + "ms" }}
    >
      {(title || right) && (
        <div className="flex items-start justify-between mb-5">
          <div>
            {title && <h3 className="font-display text-[15px] font-semibold text-ink">{title}</h3>}
            {subtitle && <p className="text-[13px] text-muted mt-0.5">{subtitle}</p>}
          </div>
          {right}
        </div>
      )}
      {children}
    </div>
  );
}

function ProgressBar({ value, colorClass = "bg-blue" }) {
  const [width, setWidth] = useState(0);
  useEffect(() => {
    const t = setTimeout(() => setWidth(value), 150);
    return () => clearTimeout(t);
  }, [value]);
  return (
    <div className="h-1.5 w-full rounded-full bg-hairline overflow-hidden">
      <div
        className={"h-full rounded-full " + colorClass}
        style={{ width: width + "%", transition: "width 0.9s cubic-bezier(0.16,1,0.3,1)" }}
      />
    </div>
  );
}

function RadialGauge({ value, color, size = 76, delayMs = 0 }) {
  const radius = (size - 8) / 2;
  const circumference = 2 * Math.PI * radius;
  const [offset, setOffset] = useState(circumference);

  useEffect(() => {
    const target = circumference - (value / 100) * circumference;
    const t = setTimeout(() => setOffset(target), 150 + delayMs);
    return () => clearTimeout(t);
  }, [value, circumference, delayMs]);

  return (
    <svg width={size} height={size} className="-rotate-90">
      <circle cx={size / 2} cy={size / 2} r={radius} stroke="#232936" strokeWidth="5" fill="none" />
      <circle
        cx={size / 2} cy={size / 2} r={radius}
        stroke={color} strokeWidth="5" fill="none" strokeLinecap="round"
        strokeDasharray={circumference}
        strokeDashoffset={offset}
        style={{ transition: "stroke-dashoffset 1.1s cubic-bezier(0.16,1,0.3,1)" }}
      />
    </svg>
  );
}

function Pill({ children, tone = "muted" }) {
  const tones = {
    muted: "bg-raised text-muted border-hairline",
    blue: "bg-blue/10 text-blue border-blue/20",
    green: "bg-green/10 text-green border-green/20",
  };
  return (
    <span className={"text-[11px] px-2 py-0.5 rounded-md border " + tones[tone]}>
      {children}
    </span>
  );
}

/* ---------- Modules du Command Center ---------- */

function PrioritiesCard({ tasks, onToggle, delay }) {
  const doneCount = tasks.filter((t) => t.done).length;
  const pct = Math.round((doneCount / tasks.length) * 100);

  return (
    <Card
      delay={delay}
      title="Priorités du jour"
      subtitle="Les 3 tâches qui comptent vraiment"
      right={<span className="font-mono text-[13px] text-muted">{doneCount}/{tasks.length}</span>}
    >
      <div className="mb-5">
        <ProgressBar value={pct} colorClass="bg-blue" />
      </div>
      <ul className="space-y-1">
        {tasks.map((task) => (
          <li key={task.id}>
            <button
              onClick={() => onToggle(task.id)}
              className="focus-ring w-full flex items-center gap-3 py-2.5 px-2 -mx-2 rounded-lg text-left hover:bg-raised transition-colors duration-200"
            >
              <span
                className={
                  "flex-shrink-0 w-5 h-5 rounded-md border flex items-center justify-center transition-all duration-200 " +
                  (task.done ? "bg-blue border-blue" : "border-faint")
                }
              >
                <IconCheck
                  className={
                    "w-3.5 h-3.5 text-void transition-all duration-200 " +
                    (task.done ? "scale-100 opacity-100" : "scale-50 opacity-0")
                  }
                />
              </span>
              <span
                className={
                  "flex-1 text-[14px] leading-snug transition-colors duration-200 " +
                  (task.done ? "text-faint line-through" : "text-ink")
                }
              >
                {task.label}
              </span>
              <Pill tone={task.done ? "muted" : "blue"}>{task.tag}</Pill>
            </button>
          </li>
        ))}
      </ul>
    </Card>
  );
}

function FinancesCard({ compact = false, delay }) {
  const balance = 4280;
  const savingsGoal = 5000;
  const savingsCurrent = 3200;
  const savingsPct = Math.round((savingsCurrent / savingsGoal) * 100);
  const visibleTx = compact ? TRANSACTIONS.slice(0, 3) : TRANSACTIONS;

  return (
    <Card delay={delay} title="Finances rapides" subtitle="Vue d'ensemble de ton compte principal">
      <div className="mb-6">
        <p className="text-[13px] text-muted mb-1">Solde disponible</p>
        <p className="font-display text-4xl font-semibold tracking-tight text-ink">
          {balance.toLocaleString("fr-FR")} <span className="text-muted text-2xl">€</span>
        </p>
      </div>

      <div className="mb-6">
        <div className="flex items-baseline justify-between mb-2">
          <p className="text-[13px] text-muted">Objectif épargne</p>
          <p className="text-[13px] font-mono text-ink">{savingsCurrent.toLocaleString("fr-FR")} € <span className="text-faint">/ {savingsGoal.toLocaleString("fr-FR")} €</span></p>
        </div>
        <ProgressBar value={savingsPct} colorClass="bg-green" />
        <p className="text-[12px] text-faint mt-1.5">{savingsPct}% de l'objectif atteint</p>
      </div>

      <div>
        <p className="text-[13px] text-muted mb-3">Derniers flux</p>
        <ul className="space-y-3">
          {visibleTx.map((tx) => (
            <li key={tx.id} className="flex items-center gap-3">
              <span
                className={
                  "flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center " +
                  (tx.amount > 0 ? "bg-green/10 text-green" : "bg-red/10 text-red")
                }
              >
                {tx.amount > 0 ? <IconArrowUp className="w-3.5 h-3.5" /> : <IconArrowDown className="w-3.5 h-3.5" />}
              </span>
              <span className="flex-1 min-w-0">
                <p className="text-[13.5px] text-ink truncate">{tx.label}</p>
                <p className="text-[11.5px] text-faint">{tx.when}</p>
              </span>
              <span className={"text-[13.5px] font-mono " + (tx.amount > 0 ? "text-green" : "text-ink")}>
                {formatEUR(tx.amount)}
              </span>
            </li>
          ))}
        </ul>
      </div>
    </Card>
  );
}

function HabitsCard({ delay }) {
  return (
    <Card delay={delay} title="Suivi des habitudes" subtitle="Ton équilibre du jour">
      <div className="grid grid-cols-3 gap-4">
        {HABITS.map((h, i) => {
          const HIcon = h.icon;
          return (
            <div key={h.id} className="flex flex-col items-center text-center">
              <div className="relative flex items-center justify-center mb-3">
                <RadialGauge value={h.value} color={h.color} delayMs={i * 120} />
                <div className="absolute flex flex-col items-center">
                  <HIcon className="w-4 h-4 mb-0.5" style={{ color: h.color }} />
                  <span className="font-mono text-[13px] text-ink">{h.value}%</span>
                </div>
              </div>
              <p className="text-[13px] text-ink font-medium">{h.label}</p>
              <p className="text-[11.5px] text-faint mt-0.5">{h.sub}</p>
            </div>
          );
        })}
      </div>
    </Card>
  );
}

/* ---------- Vues secondaires ---------- */

function ViewHeader({ eyebrow, title, subtitle }) {
  return (
    <div className="mb-8 rise-in">
      <p className="text-[13px] text-blue mb-1.5">{eyebrow}</p>
      <h1 className="font-display text-2xl sm:text-[26px] font-semibold text-ink">{title}</h1>
      {subtitle && <p className="text-[14px] text-muted mt-1.5 max-w-md">{subtitle}</p>}
    </div>
  );
}

function FinancesView() {
  const categories = [
    { label: "Logement", value: 42, amount: "890 €" },
    { label: "Alimentation", value: 24, amount: "510 €" },
    { label: "Loisirs", value: 18, amount: "380 €" },
    { label: "Transport", value: 16, amount: "340 €" },
  ];
  return (
    <div>
      <ViewHeader eyebrow="Finances" title="Le détail de ton budget" subtitle="Répartition du mois en cours et mouvements récents." />
      <div className="grid lg:grid-cols-5 gap-5">
        <div className="lg:col-span-2">
          <FinancesCard delay={80} />
        </div>
        <Card delay={160} className="lg:col-span-3" title="Dépenses par catégorie" subtitle="Ce mois-ci">
          <ul className="space-y-4">
            {categories.map((c) => (
              <li key={c.label}>
                <div className="flex justify-between text-[13.5px] mb-1.5">
                  <span className="text-ink">{c.label}</span>
                  <span className="font-mono text-muted">{c.amount}</span>
                </div>
                <ProgressBar value={c.value * 2} colorClass="bg-blue" />
              </li>
            ))}
          </ul>
        </Card>
      </div>
    </div>
  );
}

function ProductiviteView() {
  const projets = [
    { name: "Refonte Command Center", status: "En cours", pct: 72, tone: "blue" },
    { name: "Audit process onboarding", status: "En revue", pct: 45, tone: "amber" },
    { name: "Rapport trimestriel", status: "Terminé", pct: 100, tone: "green" },
  ];
  return (
    <div>
      <ViewHeader eyebrow="Productivité" title="Ce qui avance cette semaine" subtitle="Vue synthétique des projets actifs et de leur avancement." />
      <div className="grid sm:grid-cols-3 gap-5 mb-5">
        {[
          { label: "Tâches terminées", value: "12", sub: "cette semaine" },
          { label: "Temps de focus", value: "18h40", sub: "sur objectif 25h" },
          { label: "Réunions", value: "6", sub: "dont 2 restantes" },
        ].map((s, i) => (
          <Card key={s.label} delay={80 + i * 60}>
            <p className="text-[13px] text-muted mb-2">{s.label}</p>
            <p className="font-display text-3xl font-semibold text-ink">{s.value}</p>
            <p className="text-[12px] text-faint mt-1">{s.sub}</p>
          </Card>
        ))}
      </div>
      <Card delay={260} title="Projets actifs">
        <ul className="divide-y divide-hairline -mx-6">
          {projets.map((p) => (
            <li key={p.name} className="px-6 py-4 flex items-center gap-4">
              <span className="flex-1 min-w-0">
                <p className="text-[14px] text-ink">{p.name}</p>
                <div className="mt-2 max-w-xs">
                  <ProgressBar value={p.pct} colorClass={p.tone === "green" ? "bg-green" : p.tone === "amber" ? "bg-amber" : "bg-blue"} />
                </div>
              </span>
              <Pill tone={p.tone === "green" ? "green" : p.tone === "blue" ? "blue" : "muted"}>{p.status}</Pill>
            </li>
          ))}
        </ul>
      </Card>
    </div>
  );
}

function ViePersoView() {
  const items = [
    { label: "Sommeil", value: 78, sub: "7h20 en moyenne" },
    { label: "Lecture", value: 40, sub: "12 pages / jour" },
    { label: "Temps famille", value: 60, sub: "3 soirées cette semaine" },
    { label: "Repos actif", value: 55, sub: "2 sorties nature" },
  ];
  return (
    <div>
      <ViewHeader eyebrow="Vie personnelle" title="Ton équilibre en dehors du travail" subtitle="Un aperçu doux, pensé pour rester honnête sans culpabiliser." />
      <Card delay={80} title="Cette semaine">
        <ul className="space-y-5">
          {items.map((it) => (
            <li key={it.label}>
              <div className="flex justify-between text-[13.5px] mb-1.5">
                <span className="text-ink">{it.label}</span>
                <span className="text-faint">{it.sub}</span>
              </div>
              <ProgressBar value={it.value} colorClass="bg-blue" />
            </li>
          ))}
        </ul>
      </Card>
    </div>
  );
}

/* ---------- Sidebar ---------- */

function Sidebar({ active, onNavigate }) {
  return (
    <aside className="hidden md:flex md:flex-col md:w-64 md:flex-shrink-0 border-r border-hairline bg-void px-4 py-6">
      <div className="flex items-center gap-2.5 px-2 mb-9">
        <div className="w-7 h-7 rounded-lg bg-blue/15 border border-blue/20 flex items-center justify-center">
          <IconCommand className="w-4 h-4 text-blue" />
        </div>
        <span className="font-display text-[15px] font-semibold text-ink">Command Center</span>
      </div>

      <nav className="flex-1 space-y-1">
        {NAV_ITEMS.map((item) => {
          const ItemIcon = item.icon;
          const isActive = active === item.id;
          return (
            <button
              key={item.id}
              onClick={() => onNavigate(item.id)}
              className={
                "focus-ring w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-[13.5px] transition-colors duration-200 relative " +
                (isActive ? "bg-raised text-ink" : "text-muted hover:text-ink hover:bg-raised/60")
              }
            >
              {isActive && <span className="absolute left-0 top-1.5 bottom-1.5 w-[3px] rounded-full bg-blue" />}
              <ItemIcon className="w-[18px] h-[18px]" strokeWidth={isActive ? 1.9 : 1.6} />
              {item.label}
            </button>
          );
        })}
      </nav>

      <div className="flex items-center gap-3 px-2 pt-4 border-t border-hairline">
        <div className="w-8 h-8 rounded-full bg-blue/20 flex items-center justify-center font-display text-[12px] text-blue font-semibold">
          AL
        </div>
        <div className="min-w-0">
          <p className="text-[13px] text-ink truncate">Alex Laurent</p>
          <p className="text-[11.5px] text-faint truncate">Espace personnel</p>
        </div>
      </div>
    </aside>
  );
}

function MobileNav({ active, onNavigate }) {
  return (
    <nav className="md:hidden fixed bottom-0 inset-x-0 bg-surface border-t border-hairline flex justify-around py-2 z-20">
      {NAV_ITEMS.map((item) => {
        const ItemIcon = item.icon;
        const isActive = active === item.id;
        return (
          <button
            key={item.id}
            onClick={() => onNavigate(item.id)}
            className={"focus-ring flex flex-col items-center gap-1 px-3 py-1.5 rounded-lg " + (isActive ? "text-blue" : "text-faint")}
          >
            <ItemIcon className="w-5 h-5" />
            <span className="text-[10px]">{item.label.split(" ")[0]}</span>
          </button>
        );
      })}
    </nav>
  );
}

/* ---------- Application ---------- */

function App() {
  const [active, setActive] = useState("command");
  const [tasks, setTasks] = useState(INITIAL_TASKS);
  const now = useClock();

  const toggleTask = (id) => {
    setTasks((ts) => ts.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
  };

  const dateLabel = useMemo(() => {
    const s = now.toLocaleDateString("fr-FR", { weekday: "long", day: "numeric", month: "long" });
    return s.charAt(0).toUpperCase() + s.slice(1);
  }, [now]);

  const timeLabel = now.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" });

  return (
    <div className="min-h-screen flex">
      <Sidebar active={active} onNavigate={setActive} />
      <MobileNav active={active} onNavigate={setActive} />

      <main className="flex-1 px-5 sm:px-8 lg:px-10 py-8 pb-24 md:pb-8 max-w-6xl">
        {active === "command" && (
          <div>
            <div className="flex items-start justify-between mb-8 rise-in">
              <div>
                <p className="text-[13px] text-blue mb-1.5 flex items-center gap-1.5">
                  <IconMoon className="w-3.5 h-3.5" /> {dateLabel}
                </p>
                <h1 className="font-display text-2xl sm:text-[26px] font-semibold text-ink">
                  {greeting(now.getHours())}, Alex
                </h1>
              </div>
              <div className="text-right hidden sm:block">
                <p className="font-mono text-2xl text-ink tabular-nums">{timeLabel}</p>
                <p className="text-[11.5px] text-faint mt-0.5">Heure locale</p>
              </div>
            </div>

            <div className="grid lg:grid-cols-5 gap-5">
              <div className="lg:col-span-3 space-y-5">
                <PrioritiesCard tasks={tasks} onToggle={toggleTask} delay={80} />
                <HabitsCard delay={220} />
              </div>
              <div className="lg:col-span-2">
                <FinancesCard compact delay={150} />
              </div>
            </div>
          </div>
        )}

        {active === "finances" && <FinancesView />}
        {active === "productivite" && <ProductiviteView />}
        {active === "vie-perso" && <ViePersoView />}
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>
</body>
</html>