feat: add team member modal with descriptions

Click on a team card to see a popup with larger photo, Instagram link,
and personal description. All 13 team members now have descriptions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/sections/Team.tsx

@@ -1,11 +1,17 @@
+"use client";
+
+import { useState } from "react";
 import Image from "next/image";
 import { Instagram } from "lucide-react";
 import { siteContent } from "@/data/content";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
+import { TeamMemberModal } from "@/components/ui/TeamMemberModal";
+import type { TeamMember } from "@/types";
 
 export function Team() {
   const { team } = siteContent;
+  const [selectedMember, setSelectedMember] = useState<TeamMember | null>(null);
 
   return (
     <section id="team" className="surface-base section-padding">
@@ -17,7 +23,10 @@ export function Team() {
         <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
           {team.members.map((member, i) => (
             <Reveal key={i}>
-              <div className="card flex h-full flex-col items-center text-center">
+              <div
+                className="card flex h-full cursor-pointer flex-col items-center text-center transition-transform hover:scale-[1.02]"
+                onClick={() => setSelectedMember(member)}
+              >
                 <div className="mx-auto h-32 w-32 overflow-hidden rounded-full">
                   <Image
                     src={member.image}
@@ -29,21 +38,30 @@ export function Team() {
                 </div>
                 <h3 className="heading-text mt-4 text-lg font-semibold">{member.name}</h3>
                 {member.instagram && (
-                  <a
-                    href={member.instagram}
-                    target="_blank"
-                    rel="noopener noreferrer"
+                  <span
                     className="nav-link mt-1 inline-flex gap-1.5 text-sm"
+                    onClick={(e) => e.stopPropagation()}
                   >
                     <Instagram size={14} className="shrink-0 mt-[3px]" />
-                    <span>{member.instagram.split("/").filter(Boolean).pop()}</span>
-                  </a>
+                    <a
+                      href={member.instagram}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {member.instagram.split("/").filter(Boolean).pop()}
+                    </a>
+                  </span>
                 )}
               </div>
             </Reveal>
           ))}
         </div>
       </div>
+
+      <TeamMemberModal
+        member={selectedMember}
+        onClose={() => setSelectedMember(null)}
+      />
     </section>
   );
 }