import { DraftingCompass, FileText, Target, Trophy, Zap } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { InfoHeader } from "../../components/InfoHeader";

const DOTS = [
  { size: 10, color: "#f97316", top: "8%", left: "5%", delay: "0s" },
  { size: 7, color: "#a855f7", top: "30%", left: "2%", delay: "1.2s" },
  { size: 9, color: "#22c55e", top: "62%", left: "4%", delay: "0.6s" },
  { size: 12, color: "#3b82f6", top: "12%", right: "4%", delay: "1.8s" },
  { size: 7, color: "#f43f5e", top: "48%", right: "3%", delay: "0.9s" },
  { size: 9, color: "#eab308", top: "78%", right: "6%", delay: "0.4s" },
];

const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');

  :root { --content-max: 1100px; }

  .pr-screen {
    min-height: 100vh;
    padding-bottom: 40px;
    background: #fffbf4;
    font-family: 'Nunito', sans-serif;
    position: relative;
    overflow-x: hidden;
  }

  @media (min-width: 768px) {
    .pr-screen {
      padding-left: calc(17rem + 1.25rem);
    }
  }

  /* ── Blobs ── */
  .pr-blob { position: fixed; pointer-events: none; z-index: 0; filter: blur(48px); opacity: 0.35; }
  .pr-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:prWobble1 14s ease-in-out infinite; }
  .pr-blob-2 { width:190px;height:190px;background:#a5f3c0;bottom:-50px;left:6%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:prWobble2 16s ease-in-out infinite; }
  .pr-blob-3 { width:210px;height:210px;background:#fbcfe8;top:15%;right:-60px;border-radius:70% 30% 50% 50%/40% 60% 40% 60%;animation:prWobble1 18s ease-in-out infinite reverse; }
  .pr-blob-4 { width:150px;height:150px;background:#bfdbfe;bottom:12%;right:2%;border-radius:50% 50% 30% 70%/60% 40% 60% 40%;animation:prWobble2 12s ease-in-out infinite; }

  @keyframes prWobble1 {
    0%,100%{border-radius:60% 40% 70% 30%/50% 60% 40% 50%;transform:translate(0,0) rotate(0deg);}
    50%{border-radius:40% 60% 30% 70%/60% 40% 60% 40%;transform:translate(12px,16px) rotate(8deg);}
  }
  @keyframes prWobble2 {
    0%,100%{border-radius:40% 60% 30% 70%/60% 40% 60% 40%;transform:translate(0,0) rotate(0deg);}
    50%{border-radius:60% 40% 70% 30%/40% 60% 40% 60%;transform:translate(-10px,12px) rotate(-6deg);}
  }

  /* ── Floating dots ── */
  .pr-dot { position:fixed;border-radius:50%;pointer-events:none;z-index:0;opacity:0.3;animation:prFloat 7s ease-in-out infinite; }
  @keyframes prFloat {
    0%,100%{transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-12px) rotate(180deg);}
  }

  /* ── Inner container ── */
  .pr-inner {
    position: relative; z-index: 1;
    max-width: 580px; margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    display: flex; flex-direction: column; gap: 1.5rem;
  }

  @media (min-width: 900px) {
    .pr-inner { max-width: var(--content-max); padding: 3rem 1.5rem 6rem; }
    .pr-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1rem !important; }

    .pr-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 120px); top: -120px; width: 300px; height: 300px; }
    .pr-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 20px); bottom: -80px; width: 220px; height: 220px; }
    .pr-blob-3 { right: calc((100vw - var(--content-max)) / 2 - 40px); top: 10%; width: 260px; height: 260px; }
    .pr-blob-4 { right: calc((100vw - var(--content-max)) / 2 + 10px); bottom: 6%; width: 180px; height: 180px; }

    .pr-hero { padding: 2rem; }
    .pr-hero-icon-bg { right: -60px; top: -40px; opacity: 0.12; }
  }

  /* ── Animations ── */
  @keyframes prPopIn {
    from { opacity:0; transform: scale(0.92) translateY(12px); }
    to   { opacity:1; transform: scale(1) translateY(0); }
  }
  .pr-anim   { animation: prPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
  .pr-anim-1 { animation-delay: 0.05s; }
  .pr-anim-2 { animation-delay: 0.1s; }
  .pr-anim-3 { animation-delay: 0.15s; }
  .pr-anim-4 { animation-delay: 0.2s; }

  /* ── Hero banner ── */
  .pr-hero {
    border-radius: 24px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    padding: 1.5rem;
    position: relative; overflow: hidden;
    box-shadow: 0 8px 0 #5b21b644, 0 12px 32px rgba(124,58,237,0.25);
    display: flex; flex-direction: column; gap: 0.75rem;
  }
  .pr-hero-icon-bg {
    position: absolute; right: -40px; top: -30px;
    opacity: 0.15; transform: rotate(-30deg);
    pointer-events: none;
  }
  .pr-hero-eyebrow {
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.16em;
    text-transform: uppercase; color: #e9d5ff;
  }
  .pr-hero-title {
    font-size: clamp(1.6rem, 5vw, 2rem); font-weight: 900;
    color: white; letter-spacing: -0.02em; line-height: 1.15;
    position: relative; z-index: 1;
  }
  .pr-hero-sub {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.85rem; font-weight: 600; color: #ddd6fe;
    position: relative; z-index: 1;
  }
  .pr-hero-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: white; border: none; border-radius: 100px;
    padding: 0.7rem 1.4rem; cursor: pointer;
    font-family: 'Nunito', sans-serif; font-size: 0.88rem; font-weight: 800;
    color: #7c3aed;
    box-shadow: 0 4px 0 rgba(0,0,0,0.15);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    width: fit-content; position: relative; z-index: 1;
  }
  .pr-hero-btn:hover  { transform:translateY(-2px); box-shadow:0 6px 0 rgba(0,0,0,0.15); }
  .pr-hero-btn:active { transform:translateY(2px);  box-shadow:0 2px 0 rgba(0,0,0,0.15); }

  /* ── Section title ── */
  .pr-section-title {
    font-size: 1.15rem; font-weight: 900; color: #1e1b4b;
    letter-spacing: -0.01em;
  }

  /* ── Practice mode grid ── */
  .pr-grid {
    display: grid; grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  @media(min-width: 480px){ .pr-grid { grid-template-columns: 1fr 1fr; } }

  /* ── Mode card ── */
  .pr-mode-card {
    background: white; border: 2.5px solid #f3f4f6; border-radius: 22px;
    padding: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
    cursor: pointer; display: flex; flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative; overflow: hidden;
  }
  .pr-mode-card:hover  {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.1);
  }
  .pr-mode-card:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(0,0,0,0.06); }

  .pr-mode-card.red    { border-color: #fecaca; }
  .pr-mode-card.red:hover    { border-color: #fca5a5; }
  .pr-mode-card.cyan   { border-color: #a5f3fc; }
  .pr-mode-card.cyan:hover   { border-color: #67e8f9; }
  .pr-mode-card.lime   { border-color: #d9f99d; }
  .pr-mode-card.lime:hover   { border-color: #bef264; }
  .pr-mode-card.amber  { border-color: #fde68a; }
  .pr-mode-card.amber:hover  { border-color: #fcd34d; }

  /* Illustration strip at top of card */
  .pr-card-illo {
    width: 100%;
    height: 110px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  .pr-card-illo svg {
    width: 100%;
    height: 100%;
  }

  /* Card body below illustration */
  .pr-card-body {
    padding: 1rem 1.1rem 1rem;
    display: flex; flex-direction: column; gap: 0.6rem;
    flex: 1;
  }

  .pr-mode-top {
    display: flex; align-items: center; gap: 0.6rem;
  }
  .pr-mode-icon {
    width: 36px; height: 36px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .pr-mode-icon.red  { background: linear-gradient(135deg, #f87171, #ef4444); box-shadow: 0 3px 0 #b91c1c44; }
  .pr-mode-icon.cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); box-shadow: 0 3px 0 #0e7490aa; }
  .pr-mode-icon.lime { background: linear-gradient(135deg, #a3e635, #84cc16); box-shadow: 0 3px 0 #4d7c0f44; }
  .pr-mode-icon.amber{ background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 3px 0 #92400e44; }

  .pr-mode-title {
    font-size: 0.95rem; font-weight: 900; color: #1e1b4b;
  }
  .pr-mode-desc {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.76rem; font-weight: 600; color: #9ca3af;
    line-height: 1.4;
  }
  .pr-mode-arrow {
    font-size: 0.75rem; font-weight: 800; margin-top: auto;
    display: flex; align-items: center; gap: 0.25rem;
    transition: gap 0.2s ease;
    padding-top: 0.25rem;
  }
  .pr-mode-card:hover .pr-mode-arrow { gap: 0.5rem; }
  .pr-mode-arrow.red  { color: #ef4444; }
  .pr-mode-arrow.cyan { color: #06b6d4; }
  .pr-mode-arrow.lime { color: #84cc16; }
  .pr-mode-arrow.amber{ color: #f59e0b; }

  /* Wiggle on hover for illustration elements */
  .pr-mode-card:hover .illo-wiggle {
    animation: illoWiggle 0.5s ease;
  }
  @keyframes illoWiggle {
    0%,100%{transform:rotate(0deg);}
    25%{transform:rotate(-5deg);}
    75%{transform:rotate(5deg);}
  }
`;

/* ── SVG Illustrations for each card ── */

const IlloTargeted = () => (
  <svg
    viewBox="0 0 260 110"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="xMidYMid slice"
  >
    <rect width="260" height="110" fill="#fff5f5" />
    {/* soft bg circles */}
    <circle cx="200" cy="55" r="70" fill="#fee2e2" opacity="0.6" />
    <circle cx="220" cy="30" r="30" fill="#fecaca" opacity="0.4" />
    {/* Target rings */}
    <circle
      cx="195"
      cy="58"
      r="44"
      stroke="#fca5a5"
      strokeWidth="2.5"
      fill="none"
    />
    <circle
      cx="195"
      cy="58"
      r="30"
      stroke="#f87171"
      strokeWidth="2.5"
      fill="none"
    />
    <circle cx="195" cy="58" r="16" fill="#ef4444" opacity="0.9" />
    <circle cx="195" cy="58" r="6" fill="white" />
    {/* Arrow hitting bullseye */}
    <line
      x1="130"
      y1="20"
      x2="187"
      y2="56"
      stroke="#dc2626"
      strokeWidth="3"
      strokeLinecap="round"
    />
    <polygon points="187,56 178,46 192,49" fill="#dc2626" />
    {/* Arrow fletching */}
    <line
      x1="130"
      y1="20"
      x2="120"
      y2="12"
      stroke="#dc2626"
      strokeWidth="2"
      strokeLinecap="round"
    />
    <line
      x1="130"
      y1="20"
      x2="122"
      y2="25"
      stroke="#dc2626"
      strokeWidth="2"
      strokeLinecap="round"
    />
    {/* Sparkles */}
    <circle cx="60" cy="35" r="4" fill="#fbbf24" opacity="0.7" />
    <circle cx="80" cy="70" r="3" fill="#f87171" opacity="0.5" />
    <circle cx="45" cy="75" r="5" fill="#fca5a5" opacity="0.4" />
    <path d="M50 30 l3 -8 l3 8 l-6 0Z" fill="#ef4444" opacity="0.4" />
    <path d="M100 80 l2 -6 l2 6 l-4 0Z" fill="#fca5a5" opacity="0.5" />
  </svg>
);

const IlloDrills = () => (
  <svg
    viewBox="0 0 260 110"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="xMidYMid slice"
  >
    <rect width="260" height="110" fill="#ecfeff" />
    <circle cx="50" cy="55" r="65" fill="#cffafe" opacity="0.5" />
    <circle cx="25" cy="25" r="28" fill="#a5f3fc" opacity="0.35" />
    {/* Stopwatch body */}
    <circle
      cx="70"
      cy="62"
      r="36"
      fill="white"
      stroke="#22d3ee"
      strokeWidth="3"
    />
    <circle
      cx="70"
      cy="62"
      r="28"
      fill="#ecfeff"
      stroke="#67e8f9"
      strokeWidth="1.5"
    />
    {/* Clock hands */}
    <line
      x1="70"
      y1="62"
      x2="70"
      y2="40"
      stroke="#06b6d4"
      strokeWidth="3"
      strokeLinecap="round"
    />
    <line
      x1="70"
      y1="62"
      x2="88"
      y2="70"
      stroke="#0891b2"
      strokeWidth="2.5"
      strokeLinecap="round"
    />
    <circle cx="70" cy="62" r="3.5" fill="#0891b2" />
    {/* Crown / button */}
    <rect x="64" y="22" width="12" height="6" rx="3" fill="#22d3ee" />
    <rect x="56" y="18" width="8" height="5" rx="2.5" fill="#06b6d4" />
    {/* Lightning bolts (speed) */}
    <path
      d="M148 20 l-10 22 h10 l-10 22"
      stroke="#f59e0b"
      strokeWidth="3"
      strokeLinecap="round"
      strokeLinejoin="round"
      fill="none"
    />
    <path
      d="M170 30 l-8 18 h8 l-8 18"
      stroke="#fbbf24"
      strokeWidth="2.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      fill="none"
      opacity="0.7"
    />
    <path
      d="M192 38 l-6 14 h6 l-6 14"
      stroke="#fcd34d"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      fill="none"
      opacity="0.5"
    />
    {/* Speed lines */}
    <line
      x1="115"
      y1="52"
      x2="140"
      y2="52"
      stroke="#22d3ee"
      strokeWidth="2"
      strokeLinecap="round"
      opacity="0.5"
    />
    <line
      x1="120"
      y1="62"
      x2="138"
      y2="62"
      stroke="#22d3ee"
      strokeWidth="1.5"
      strokeLinecap="round"
      opacity="0.35"
    />
    <line
      x1="118"
      y1="72"
      x2="136"
      y2="72"
      stroke="#22d3ee"
      strokeWidth="1"
      strokeLinecap="round"
      opacity="0.25"
    />
    {/* dots */}
    <circle cx="220" cy="28" r="5" fill="#22d3ee" opacity="0.4" />
    <circle cx="240" cy="75" r="4" fill="#06b6d4" opacity="0.3" />
    <circle cx="210" cy="88" r="3" fill="#67e8f9" opacity="0.4" />
  </svg>
);

const IlloHard = () => (
  <svg
    viewBox="0 0 260 110"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="xMidYMid slice"
  >
    <rect width="260" height="110" fill="#f7ffe4" />
    <circle cx="210" cy="55" r="70" fill="#d9f99d" opacity="0.5" />
    <circle cx="230" cy="20" r="30" fill="#bef264" opacity="0.3" />
    {/* Trophy */}
    <rect x="168" y="78" width="44" height="8" rx="4" fill="#84cc16" />
    <rect x="182" y="68" width="16" height="12" rx="2" fill="#a3e635" />
    <path
      d="M163 28 h54 v28 a27 27 0 0 1 -54 0 Z"
      fill="white"
      stroke="#84cc16"
      strokeWidth="2.5"
    />
    <path
      d="M163 38 Q148 38 148 52 Q148 63 163 63"
      stroke="#a3e635"
      strokeWidth="2.5"
      fill="none"
      strokeLinecap="round"
    />
    <path
      d="M217 38 Q232 38 232 52 Q232 63 217 63"
      stroke="#a3e635"
      strokeWidth="2.5"
      fill="none"
      strokeLinecap="round"
    />
    {/* Star inside trophy */}
    <path
      d="M190 38 l3 9 h9 l-7 5 3 9 -8 -6 -8 6 3 -9 -7 -5 h9 Z"
      fill="#fbbf24"
    />
    {/* Mountain / difficulty hills */}
    <path d="M20 90 L55 35 L90 90Z" fill="#86efac" opacity="0.7" />
    <path d="M60 90 L95 50 L130 90Z" fill="#4ade80" opacity="0.5" />
    <path d="M85 90 L120 40 L155 90Z" fill="#22c55e" opacity="0.35" />
    {/* flag on tallest */}
    <line
      x1="120"
      y1="40"
      x2="120"
      y2="22"
      stroke="#16a34a"
      strokeWidth="2"
      strokeLinecap="round"
    />
    <path d="M120 22 l12 5 l-12 5 Z" fill="#16a34a" />
    {/* sparkles */}
    <path
      d="M30 28 l2 -5 l2 5 l5 2 l-5 2 l-2 5 l-2 -5 l-5 -2 Z"
      fill="#fbbf24"
      opacity="0.6"
    />
    <path
      d="M240 88 l1.5 -4 l1.5 4 l4 1.5 l-4 1.5 l-1.5 4 l-1.5 -4 l-4 -1.5 Z"
      fill="#a3e635"
      opacity="0.5"
    />
  </svg>
);

const IlloSheet = () => (
  <svg
    viewBox="0 0 260 110"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="xMidYMid slice"
  >
    <rect width="260" height="110" fill="#fffbeb" />
    <circle cx="55" cy="55" r="65" fill="#fef3c7" opacity="0.6" />
    <circle cx="30" cy="80" r="30" fill="#fde68a" opacity="0.35" />
    {/* Paper sheet */}
    <rect
      x="30"
      y="18"
      width="72"
      height="82"
      rx="8"
      fill="white"
      stroke="#fcd34d"
      strokeWidth="2.5"
    />
    {/* Folded corner */}
    <path d="M82 18 L102 38 L82 38 Z" fill="#fde68a" />
    <path d="M82 18 L102 38" stroke="#fcd34d" strokeWidth="2" />
    {/* Lines on paper */}
    <line
      x1="42"
      y1="50"
      x2="84"
      y2="50"
      stroke="#e5e7eb"
      strokeWidth="2"
      strokeLinecap="round"
    />
    <line
      x1="42"
      y1="60"
      x2="90"
      y2="60"
      stroke="#e5e7eb"
      strokeWidth="2"
      strokeLinecap="round"
    />
    <line
      x1="42"
      y1="70"
      x2="78"
      y2="70"
      stroke="#e5e7eb"
      strokeWidth="2"
      strokeLinecap="round"
    />
    <line
      x1="42"
      y1="80"
      x2="86"
      y2="80"
      stroke="#e5e7eb"
      strokeWidth="2"
      strokeLinecap="round"
    />
    {/* Checkmark on first line */}
    <path
      d="M42 42 l5 5 l9 -9"
      stroke="#22c55e"
      strokeWidth="2.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      fill="none"
    />
    {/* Pencil */}
    <g transform="rotate(-35 155 55)">
      <rect x="138" y="28" width="14" height="52" rx="3" fill="#fbbf24" />
      <path d="M138 76 L145 90 L152 76 Z" fill="#f97316" />
      <rect x="138" y="28" width="14" height="10" rx="3" fill="#9ca3af" />
      <rect x="140" y="30" width="10" height="6" rx="2" fill="#d1d5db" />
    </g>
    {/* Stars / highlights */}
    <path
      d="M200 22 l2 -6 l2 6 l6 2 l-6 2 l-2 6 l-2 -6 l-6 -2 Z"
      fill="#f59e0b"
      opacity="0.7"
    />
    <path
      d="M230 65 l1.5 -4 l1.5 4 l4 1.5 l-4 1.5 l-1.5 4 l-1.5 -4 l-4 -1.5 Z"
      fill="#fbbf24"
      opacity="0.5"
    />
    <circle cx="215" cy="88" r="4" fill="#fcd34d" opacity="0.4" />
    <circle cx="240" cy="35" r="3" fill="#fbbf24" opacity="0.35" />
  </svg>
);

const MODE_CARDS = [
  {
    color: "red",
    icon: <Target size={18} color="white" />,
    title: "Targeted Practice",
    desc: "Focus on your weak spots and improve fast",
    route: "/student/practice/targeted-practice",
    arrow: "Practice →",
    Illo: IlloTargeted,
  },
  {
    color: "cyan",
    icon: <Zap size={18} color="white" />,
    title: "Drills",
    desc: "Train speed and accuracy under pressure",
    route: "/student/practice/drills",
    arrow: "Drill →",
    Illo: IlloDrills,
  },
  {
    color: "lime",
    icon: <Trophy size={18} color="white" />,
    title: "Hard Modules",
    desc: "Push yourself with the toughest questions",
    route: "/student/practice/hard-test-modules",
    arrow: "Challenge →",
    Illo: IlloHard,
  },
  {
    color: "amber",
    icon: <FileText size={18} color="white" />,
    title: "Practice Sheet",
    desc: "Work through curated question sets at your own pace",
    route: "/student/practice/practice-sheet",
    arrow: "Start Sheet →",
    Illo: IlloSheet,
  },
] as const;

export const Practice = () => {
  const navigate = useNavigate();

  return (
    <div className="pr-screen">
      <style>{STYLES}</style>

      {/* Blobs */}
      <div className="pr-blob pr-blob-1" />
      <div className="pr-blob pr-blob-2" />
      <div className="pr-blob pr-blob-3" />
      <div className="pr-blob pr-blob-4" />

      {/* Dots */}
      {DOTS.map((d, i) => (
        <div
          key={i}
          className="pr-dot"
          style={
            {
              width: d.size,
              height: d.size,
              background: d.color,
              top: d.top,
              left: d.left,
              right: d.right,
              animationDelay: d.delay,
              animationDuration: `${5 + i * 0.5}s`,
            } as React.CSSProperties
          }
        />
      ))}

      <div className="pr-inner">
        {/* ── Header ── */}
        <InfoHeader mode="LEVEL" />

        {/* ── Hero banner ── */}
        <div className="pr-hero pr-anim pr-anim-1">
          <div className="pr-hero-icon-bg">
            <DraftingCompass size={240} color="white" />
          </div>
          <p className="pr-hero-eyebrow">🎯 Full Practice Test</p>
          <h2 className="pr-hero-title">See where you stand</h2>
          <p className="pr-hero-sub">
            Take a full adaptive test and benchmark your SAT readiness.
          </p>
          <button
            onClick={() => navigate("/student/practice/practice-sheet")}
            className="pr-hero-btn"
          >
            Take a practice test →
          </button>
        </div>

        {/* ── Practice modes ── */}
        <section className="pr-anim pr-anim-2">
          <p className="pr-section-title" style={{ marginBottom: "0.85rem" }}>
            Practice your way
          </p>
          <div className="pr-grid">
            {MODE_CARDS.map((card) => (
              <div
                key={card.route}
                className={`pr-mode-card ${card.color}`}
                onClick={() => navigate(card.route)}
              >
                {/* Illustration */}
                <div className="pr-card-illo">
                  <card.Illo />
                </div>

                {/* Body */}
                <div className="pr-card-body">
                  <div className="pr-mode-top">
                    <div className={`pr-mode-icon ${card.color}`}>
                      {card.icon}
                    </div>
                    <p className="pr-mode-title">{card.title}</p>
                  </div>
                  <p className="pr-mode-desc">{card.desc}</p>
                  <p className={`pr-mode-arrow ${card.color}`}>{card.arrow}</p>
                </div>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
};
