[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { HeroSection } from "./components/HeroSection" import { StatsSection } from "./components/StatsSection" import { FeaturedClients } from "./components/FeaturedClients" import { Services } from "./components/Services" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/components/HeroSection.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import Image from "next/image" import { AnimatedLogo } from "./AnimatedLogo" import { PlayerInfoForm } from "./PlayerInfoForm" export function HeroSection() { return (

PRESTIGE HOCKEY PLACEMENT

Elite Hockey Agency Dedicated to Player Development and Success

) } [V0_FILE]typescriptreact:file="app/components/StatsSection.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { useInView } from "framer-motion" import { useRef } from "react" export function StatsSection() { const ref = useRef(null) const isInView = useInView(ref, { once: true }) const stats = [ { label: "Active Clients", value: "120+" }, { label: "Successful Placements", value: "350+" }, { label: "Years Experience", value: "5+" }, { label: "Partner Leagues", value: "20+" }, ] return (

{stats.map((stat, index) => (

{stat.value}

{stat.label === "Partner Leagues" ? (

Leagues worked with across prep school to Professional Hockey

) : (

{stat.label}

)} ))}

) } [V0_FILE]typescriptreact:file="app/components/Footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import { Instagram, Facebook, Mail } from "lucide-react" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/components/FeaturedClients.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { useRef } from "react" import { useInView } from "framer-motion" import Image from "next/image" export function FeaturedClients() { const ref = useRef(null) const isInView = useInView(ref, { once: true }) const clients = [ { name: "Charles Boutin", position: "Forward", team: "McGill University", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Charles%20boutin-n9vimEG5aQ0zUtQhLO0su9HmcXA3oC.jpeg", achievements: "Over 170 QMJHL points", description: "Former QMJHL star now excelling in U SPORTS hockey", }, { name: "Sam Ledrew", position: "Forward", team: "West Kelowna Warriors", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ledrew-dPFK0zGh6aFr3LIb8GK4gmi2hPu368.jpeg", achievements: "NCAA D1 Commit", description: "Committed to St. Lawrence University NCAA D1", }, { name: "Felix Allard", position: "Defenseman", team: "Concordia University", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Allard-pZnh2JWiX7gEt0PvOlA3LoSAzzeIyX.jpeg", achievements: "QMJHL Veteran", description: "Went from Undrafted to 2 years in the QMJHL and now Playing College Hockey", }, ] return (

Featured Clients

Representing players living your dream who started where you are right now

{clients.map((client, index) => (

{client.name}

{client.position}

{client.team}

{client.achievements}

{client.description}

))}

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --primary: #ff8c42; } body { color: white; background: black; } .aspect-w-16 { position: relative; padding-bottom: 56.25%; } .aspect-w-16 > * { position: absolute; height: 100%; width: 100%; top: 0; right: 0; bottom: 0; left: 0; } [V0_FILE]typescriptreact:file="app/components/AnimatedLogo.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" interface AnimatedLogoProps { className?: string size?: number } export function AnimatedLogo({ className = "", size = 40 }: AnimatedLogoProps) { const [isHovered, setIsHovered] = useState(false) const pathVariants = { initial: { pathLength: 0 }, animate: { pathLength: 1, transition: { duration: 1, ease: "easeInOut" } }, } return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} whileHover={{ scale: 1.1 }} transition={{ duration: 0.3 }} > {/* Left segment (black) */} {/* Right segment (orange) */} {/* Bottom segment (mixed) */} {/* Gradients */} ) } [V0_FILE]typescriptreact:file="app/components/PlayerInfoForm.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { useToast } from "@/components/ui/use-toast" import { submitForm } from "../actions/submitForm" interface FormData { age: string league: string reason: string name: string email: string } export function PlayerInfoForm() { const [step, setStep] = useState(1) const [formData, setFormData] = useState({ age: "", league: "", reason: "", name: "", email: "", }) const [open, setOpen] = useState(false) const { toast } = useToast() const ages = Array.from({ length: 8 }, (_, i) => i + 14) const leagues = [ "U18/17 AAA", "RSEQ", "Prep School", "USA U18", "USA Jr. Tier 3", "USA Jr. Tier 2", "Canada Jr. tier 3", "Canada Jr. Tier 2", "Major Junior", ] const reasons = [ "Looking for placement at the next level", "Not happy with current representation", "Looking into what an agent does", "Other", ] const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() try { await submitForm(formData) toast({ title: "Form Submitted", description: "Thank you for your interest. We'll be in touch soon!", }) setOpen(false) setStep(1) setFormData({ age: "", league: "", reason: "", name: "", email: "", }) } catch (error) { toast({ title: "Submission Error", description: "There was a problem submitting your form. Please try again.", variant: "destructive", }) } } const nextStep = () => { setStep(step + 1) } const prevStep = () => { setStep(step - 1) } return ( ) } [V0_FILE]typescriptreact:file="app/components/Services.tsx" isEdit="true" isMerged="true" "use client" import { useRef } from "react" import { motion, useScroll, useTransform } from "framer-motion" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { HopIcon, Trophy, Briefcase, GraduationCap, Users, HeartHandshake } from "lucide-react" const services = [ { title: "Player Representation", description: "Expert negotiation and management of player contracts.", icon: HopIcon, tags: ["Contract Negotiation", "Career Management"], }, { title: "Career Development", description: "Personalized guidance to help players reach their full potential.", icon: Trophy, tags: ["Skill Enhancement", "Performance Optimization"], }, { title: "Marketing & Branding", description: "Building and managing player brands for long-term success.", icon: Briefcase, tags: ["Sponsorships", "Media Relations"], }, { title: "Education Support", description: "Balancing academic pursuits with hockey careers.", icon: GraduationCap, tags: ["Scholarships", "Academic Planning"], }, { title: "Team Placement", description: "Strategic placement services to match players with ideal teams.", icon: Users, tags: ["Scouting", "Team Matching"], }, { title: "Player Welfare", description: "Comprehensive support for players' physical and mental well-being.", icon: HeartHandshake, tags: ["Health & Wellness", "Mental Health Support"], }, ] const AnimatedBackgroundLogo = () => { const ref = useRef(null) const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"], }) const rotate = useTransform(scrollYProgress, [0, 1], [0, 360]) const scale = useTransform(scrollYProgress, [0, 1], [1, 1.5]) return ( ) } export function Services() { return (

Our Services

Comprehensive support for your hockey career, from development to pro contracts and beyond.

{services.map((service, index) => (

{service.title} {service.description}

{service.tags.map((tag) => ( {tag} ))}

))}

) } [V0_FILE]typescriptreact:file="app/services/page.tsx" isMerged="true" import { ServicesHero } from "../components/ServicesHero" import { ServicesList } from "../components/ServicesList" import { ServiceTestimonials } from "../components/ServiceTestimonials" import { ServiceCTA } from "../components/ServiceCTA" export default function ServicesPage() { return (

) } [V0_FILE]typescriptreact:file="app/components/ServicesHero.tsx" isMerged="true" import Image from "next/image" export function ServicesHero() { return (

Our Services

Comprehensive support for your hockey career, from development to pro contracts and beyond.

) } [V0_FILE]typescriptreact:file="app/components/ServicesList.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { HopIcon, Trophy, Briefcase, GraduationCap, Users, HeartHandshake } from "lucide-react" const services = [ { title: "Player Representation", description: "Expert negotiation and management of player contracts, ensuring the best possible terms and conditions for our clients.", icon: HopIcon, tags: ["Contract Negotiation", "Career Management"], details: "Our experienced team of agents works tirelessly to secure the best possible contracts for our players. We handle all aspects of negotiation, from entry-level deals to veteran contracts, always prioritizing our clients' interests and long-term career goals.", }, { title: "Career Development", description: "Personalized guidance and strategies to help players reach their full potential and achieve their career goals.", icon: Trophy, tags: ["Skill Enhancement", "Performance Optimization"], details: "We provide comprehensive career development services, including personalized training programs, mental performance coaching, and strategic career planning. Our goal is to help each player maximize their potential both on and off the ice.", }, { title: "Marketing & Branding", description: "Building and managing player brands to maximize off-ice opportunities and long-term career prospects.", icon: Briefcase, tags: ["Sponsorships", "Media Relations"], details: "Our marketing team works to build and enhance each player's personal brand. We secure endorsement deals, manage social media presence, and coordinate media appearances to increase our clients' visibility and marketability.", }, { title: "Education Support", description: "Assistance in balancing academic pursuits with hockey careers, including scholarship opportunities and academic counseling.", icon: GraduationCap, tags: ["Scholarships", "Academic Planning"], details: "We understand the importance of education alongside a hockey career. Our education support services include scholarship application assistance, academic counseling, and help in balancing educational commitments with athletic pursuits.", }, { title: "Team Placement", description: "Strategic placement services to match players with teams that best fit their skills, goals, and development needs.", icon: Users, tags: ["Scouting", "Team Matching"], details: "Leveraging our extensive network in the hockey world, we work to place players with teams that align with their skills, playing style, and career objectives. This includes placements in junior leagues, college teams, and professional organizations worldwide.", }, { title: "Player Welfare", description: "Comprehensive support for players' physical and mental well-being, including access to top medical professionals and counseling services.", icon: HeartHandshake, tags: ["Health & Wellness", "Mental Health Support"], details: "Our player welfare program ensures that our clients have access to top-tier medical care, mental health support, and wellness resources. We prioritize the overall well-being of our players, understanding that peak performance comes from a healthy body and mind.", }, ] export function ServicesList() { const [expandedService, setExpandedService] = useState(null) return (

Our Services

{services.map((service) => (

{service.title} {service.description}

{service.tags.map((tag) => ( {tag} ))}

{expandedService === service.title && ( {service.details} )} ))}

) } [V0_FILE]typescriptreact:file="app/components/ServiceTestimonials.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import Image from "next/image" import { ChevronLeft, ChevronRight } from "lucide-react" const testimonials = [ { name: "Xavier Lacoste", position: "Defenseman, 2005", team: "Whitecourt Wolverines", quote: "Prestige Hockey Placement helped me secure a spot in the AJHL with the Whitecourt Wolverines. Their guidance and support throughout the process was invaluable for my hockey career.", image: "/placeholder.svg?height=100&width=100", }, { name: "Felix Allard", position: "Defenseman, 2003", team: "Concordia University", quote: "Going from undrafted to playing in the QMJHL and now at Concordia University, PHP's representation was crucial in my development. They truly understand player development and career progression.", image: "/placeholder.svg?height=100&width=100", }, { name: "Jules Delepoulle", position: "Defenseman, 2005", team: "Minnesota Mallards", quote: "The team at PHP helped me navigate my way to the NAHL with the Minnesota Mallards. Their network and expertise in player placement is second to none.", image: "/placeholder.svg?height=100&width=100", }, ] export function ServiceTestimonials() { const [currentIndex, setCurrentIndex] = useState(0) const nextTestimonial = () => { setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length) } const prevTestimonial = () => { setCurrentIndex((prevIndex) => (prevIndex - 1 + testimonials.length) % testimonials.length) } return (

Client Testimonials

{testimonials[currentIndex].name}

{testimonials[currentIndex].position}

{testimonials[currentIndex].team}

"{testimonials[currentIndex].quote}"

{testimonials.map((_, index) => (

) } [V0_FILE]typescriptreact:file="app/components/ServiceCTA.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" export function ServiceCTA() { return (

Ready to Take Your Hockey Career to the Next Level?

Join Prestige Hockey Placement and get the support and guidance you need to succeed in the competitive world of hockey.

) } [V0_FILE]typescriptreact:file="app/client-list/page.tsx" isEdit="true" isMerged="true" import { ClientList } from "../components/ClientList" export default function ClientListPage() { return } [V0_FILE]typescriptreact:file="app/representation-plans/page.tsx" isMerged="true" import { RepresentationPlans } from "../components/RepresentationPlans" export default function RepresentationPlansPage() { return } [V0_FILE]typescriptreact:file="app/components/RepresentationPlans.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Check } from "lucide-react" const plans = [ { title: "Supportive Representation", price: "$2,500 CAD", description: "Essential support for emerging players", features: [ "365 days of representation", "24-hour response time", "Video review 3x per year", "Professional opinion on player options", "Support for player and family", "Tryout options in desired leagues", "2 showcases at 50% off", ], }, { title: "Next Up Representation", price: "$5,000 CAD", description: "Comprehensive support for serious athletes", features: [ "Everything in Supportive Representation", "24-hour response time", "Video review 2x per month", "Nutrition plan for in-season and off-season", "2 complimentary consultations with Sports Performance Coach/Psychologist", "Guaranteed placement in pre-discussed leagues", "1 Free Showcase", "Additional showcases at 50% off", ], }, { title: "Full Time Representation", price: "$9,000 CAD", description: "Premium support for top-tier prospects", features: [ "Everything in Supportive and Next Up Representation", "Video review at any time", "4 complimentary consultations with Sports Performance Coach/Psychologist", "365-day nutritional plan", "Monthly review meeting with team of advisors", "Access to all professional help partnered with PHP", "Off-ice trainers, skills coaches, tutors, and more", "4 Free Showcases", ], }, ] export function RepresentationPlans() { return (

Representation Plans

Choose the level of support that best fits your hockey career goals and aspirations.

{plans.map((plan, index) => ( {plan.title} {plan.description}

{plan.price} / year

{feature}

))}

) } [V0_FILE]typescriptreact:file="app/team/page.tsx" isMerged="true" import { TeamPage } from "../components/TeamPage" export default function Team() { return } [V0_FILE]typescriptreact:file="app/components/TeamPage.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import Image from "next/image" import { Card, CardContent, CardHeader } from "@/components/ui/card" const teamMembers = [ { name: "Ryan Massicotte", role: "Co-founder", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Ryan%20mass-3p22vskbzr6CbGQ0Zlxj03m0QDu0hL.webp", bio: "Ryan Massicotte co-founded Prestige Hockey Placement in 2020. With his extensive background in hockey and player development, Ryan brings valuable insights and connections to help players reach their full potential.", }, { name: "Gabriel Blouin", role: "Co-founder", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Gab%20blouin-g9nBj78ernTb8uu0O5vyrpcRgsqBkU.jpeg", bio: "Gabriel Blouin, co-founder of Prestige Hockey Placement since 2020, leverages his expertise in sports management and player representation to guide athletes through their hockey careers and beyond.", }, ] export function TeamPage() { return (

Our Team

Meet the founders behind Prestige Hockey Placement, dedicated to your success since 2020.

{teamMembers.map((member, index) => (

{member.name}

{member.role}

{member.bio}

))}

) } [V0_FILE]typescriptreact:file="app/showcases/page.tsx" isMerged="true" import { Showcases } from "../components/Showcases" export default function ShowcasesPage() { return } [V0_FILE]typescriptreact:file="app/components/Showcases.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { CalendarDays, MapPin, Users, DollarSign, CheckCircle, Eye } from "lucide-react" const showcases = [ { title: "Montreal Meltdown", description: "Most important Spring showcase and last opportunity ahead of QMJHL Draft for aspiring draft selections.", date: "Mid May", location: "Montreal, Quebec", participants: "Players born 2007-2009", price: "$500 CAD", includes: "1 practice & 4 to 7 games", highlight: "Last chance before QMJHL Draft", }, { title: "Boston Predraft", description: "Best opportunity to get seen by NAHL, NCDC, CJHL and Prep school teams ahead of the summer, their respective drafts and camps for aspiring draft selections.", date: "Beginning of May", location: "Boston, Massachusetts", participants: "Players born 2005-2009", price: "$600 CAD", includes: "1 practice & 3 to 7 games", highlight: "Exposure to multiple leagues", scouting: "NAHL, NCDC, CJHL, Prep schools", }, { title: "Toronto TEP", description: "Most Competitive and scouted Jr. A showcase in Canada, and the last opportunity for these teams to add players to their rosters before the end of the scouting period.", date: "End of June", location: "Toronto, Ontario", participants: "Players born 2005-2008", price: "$600 CAD", includes: "1 practice & 4 to 7 games", highlight: "Last chance for Jr. A teams", scouting: "Jr. A teams", }, { title: "Boston Chowder Cup", description: "Last opportunity to get seen by Jr. A and Prep school teams ahead of the start of final camps and respective season.", date: "End of July", location: "Boston, Massachusetts", participants: "Players born 2005-2009", price: "$600 CAD", includes: "1 practice & 3 to 7 games", highlight: "Final showcase before season starts", scouting: "Jr. A teams, Prep schools", }, ] export function Showcases() { return (

Summer Showcases

Experience elite competition and exposure at Prestige Hockey Placement's premier summer events.

{showcases.map((showcase, index) => ( {showcase.title}

{showcase.description}

{showcase.date}

{showcase.location}

{showcase.participants}

{showcase.price && (

{showcase.price}

)} {showcase.includes && (

Includes: {showcase.includes}

)} {showcase.scouting && (

Scouted by: {showcase.scouting}

)}

{showcase.highlight && ( {showcase.highlight} )}

))}

) } [V0_FILE]typescript:file="app/api/submit-form/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" import sgMail from "@sendgrid/mail" // Set up SendGrid sgMail.setApiKey(process.env.SENDGRID_API_KEY as string) export async function POST(request: Request) { try { const formData = await request.json() const msg = { to: process.env.NEXT_PUBLIC_NOTIFICATION_EMAIL as string, // Use an environment variable for the recipient email from: process.env.NEXT_PUBLIC_SENDGRID_FROM_EMAIL as string, // Use the environment variable for the sender email subject: "New Player Information Submission", text: ` Name: ${formData.name} Email: ${formData.email} Age: ${formData.age} Current League: ${formData.league} Reason for seeking advisor: ${formData.reason} `, html: `

New Player Information Submission

Name: ${formData.name}

Email: ${formData.email}

Age: ${formData.age}

Current League: ${formData.league}

Reason for seeking advisor: ${formData.reason}

`, } await sgMail.send(msg) console.log("Email sent successfully") return NextResponse.json({ success: true }) } catch (error) { console.error("Error sending email:", error) return NextResponse.json({ success: false, error: "Failed to send email" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/components/ApiTest.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" export function ApiTest() { const [testResult, setTestResult] = useState("") const testApis = async () => { try { const response = await fetch("/api/test-apis", { method: "POST" }) const data = await response.json() setTestResult(data.message) } catch (error) { setTestResult("Error testing APIs") } } return (

{testResult &&

{testResult}

}

) } [V0_FILE]typescriptreact:file="app/test/page.tsx" isMerged="true" import { ApiTest } from "../components/ApiTest" export default function TestPage() { return (

API Test Page

) } [V0_FILE]typescript:file="app/api/test-sendgrid/route.ts" isMerged="true" import { NextResponse } from "next/server" import sgMail from "@sendgrid/mail" sgMail.setApiKey(process.env.SENDGRID_API_KEY as string) export async function GET() { try { const msg = { to: "test@example.com", // Replace with a test email address from: process.env.NEXT_PUBLIC_SENDGRID_FROM_EMAIL as string, subject: "SendGrid Test", text: "This is a test email from SendGrid", html: "This is a test email from SendGrid", } await sgMail.send(msg) return NextResponse.json({ success: true, message: "Test email sent successfully" }) } catch (error) { console.error("SendGrid test error:", error) return NextResponse.json({ success: false, error: JSON.stringify(error) }, { status: 500 }) } } [V0_FILE]typescript:file="app/actions/submitForm.ts" isEdit="true" isMerged="true" "use server" import { Resend } from "resend" const resend = new Resend(process.env.RESEND_API_KEY) interface FormData { age: string league: string reason: string name: string email: string } export async function submitForm(formData: FormData) { if (!process.env.RESEND_API_KEY) { console.error("RESEND_API_KEY is not set") throw new Error("Email service is not configured") } try { const { data, error } = await resend.emails.send({ from: "Prestige Hockey ", to: "prestigeplacementhockey@gmail.com", subject: "New Player Information Submission", html: `

New Player Information Submission

Name: ${formData.name}

Email: ${formData.email}

Age: ${formData.age}

Current League: ${formData.league}

Reason for seeking advisor: ${formData.reason}

`, }) if (error) { console.error("Resend error:", error) throw new Error("Failed to send email") } console.log("Email sent successfully:", data) return { success: true } } catch (error) { console.error("Error sending email:", error) throw new Error("Failed to submit form") } } [V0_FILE]typescript:file="app/api/test-email/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" import { Resend } from "resend" const resend = new Resend(process.env.RESEND_API_KEY) export async function GET() { if (!process.env.RESEND_API_KEY) { return NextResponse.json({ error: "RESEND_API_KEY is not set" }, { status: 500 }) } try { const { data, error } = await resend.emails.send({ from: "Prestige Hockey ", to: "prestigeplacementhockey@gmail.com", subject: "Test Email", html: "

Test Email

This is a test email to verify the Resend integration.

", }) if (error) { console.error("Resend error:", error) return NextResponse.json({ error: "Failed to send email" }, { status: 500 }) } return NextResponse.json({ success: true, data }) } catch (error) { console.error("Error:", error) return NextResponse.json({ error: "Failed to send email" }, { status: 500 }) } } [V0_FILE]typescript:file="vercel-toolbar.config.ts" isMerged="true" import { defineConfig } from "@vercel/toolbar/config" export default defineConfig({ // You can customize the toolbar here if needed }) [V0_FILE]typescriptreact:file="app/components/ClientList.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useMemo } from "react" import { motion, AnimatePresence } from "framer-motion" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Search } from "lucide-react" const clients = [ { letter: "A", players: [ { name: "Idris Alameddine", position: "F", league: "CAHS", team: "A. Ste-Cécile Stallions PREP U18" }, { name: "Ethan Albert", position: "D", league: "NOJHL", team: "Timmins Rock" }, { name: "Félix Allard", position: "D", league: "USports", team: "Concordia Univ." }, { name: "Tommy Amos", position: "F", league: "QJHL", team: "Longueuil Collège-Français" }, { name: "Noah Archambault", position: "G", league: "NAPrepHL U18", team: "Lac St-Louis Islanders U18" }, { name: "Eliot Arseneault", position: "F", league: "USPHL Premier", team: "Hawkesbury Knights" }, { name: "Louis-Félix Aubry", position: "F", league: "CAHS", team: "A. Ste-Cécile Stallions PREP U18" }, { name: "Alex Anderson", position: "F", league: "QMJHL", team: "Rimouski Océanic" }, ], }, { letter: "B", players: [ { name: "Dylan Ballabey-Vinet", position: "F", league: "QJHL", team: "Princeville Titan" }, { name: "Xavier Beaudry", position: "D", league: "RSEQ M18 D1 R", team: "École La Découverte M18 D1 R" }, { name: "Alexis Beaulieu", position: "F", league: "CCHL", team: "Kemptville 73's" }, { name: "Hugo Beaulieu", position: "D", league: "QJHL", team: "Montréal Phoenix" }, { name: "Samuel Beaulieu", position: "F", league: "QJHL", team: "Longueuil Collège-Français" }, { name: "Colin Bédard", position: "D", league: "CAHS", team: "A. Ste-Cécile Stallions PREP U18" }, { name: "Justin Belanger", position: "D", league: "CSSHL", team: "Ulysse Academie" }, { name: "Noah Belles-Isles", position: "D", league: "SJHL", team: "Melville Millionaires" }, { name: "Adam Belzil", position: "F", league: "MJHL", team: "Portage Terriers" }, { name: "Tristan Berthelot", position: "F", league: "RSEQ M18 D1", team: "É. Sec. Saint-Gabriel M18 D1" }, { name: "Alex Blanchard", position: "D", league: "USports", team: "McGill Univ." }, { name: "Matis Bleau", position: "D", league: "U18 AAA", team: "Le Sommet Academy U18" }, { name: "Xavier Bolduc", position: "G", league: "France3", team: "Toulouse-Blagnac" }, { name: "Ryan Bonfield", position: "F", league: "NCAA III", team: "SUNY-Plattsburgh" }, { name: "Lorenzo Bono", position: "F", league: "QJHL", team: "Montréal Phoenix" }, { name: "Gabriel Boucher", position: "D", league: "USPHL Premier", team: "Hawkesbury Knights" }, { name: "Charles Boutin", position: "F", league: "USports", team: "McGill Univ." }, { name: "Cooper Brazeau", position: "F", league: "GMHL", team: "Ville-Marie Pirates" }, { name: "Lucas Bremshey-Guillemette", position: "F", league: "CCHL", team: "Ottawa Jr. Senators" }, { name: "Antoine Brunet", position: "D", league: "QCHL", team: "Saint-Laurent Patriotes" }, { name: "Salvatore Bucaro", position: "F", league: "QJHL", team: "Laval VC" }, { name: "Noah Bisson", position: "D", league: "MPHL", team: "Academie St-Cecile" }, ], }, { letter: "C", players: [ { name: "Spencer Caines", position: "F", league: "MJAHL", team: "West Kent Steamers" }, { name: "Matheason Cameron", position: "F", league: "EOJHL", team: "Glengarry Brigade" }, { name: "Logan Camp", position: "F", league: "USports", team: "Ontario Tech Univ." }, { name: "Édouard Carrier", position: "D", league: "USports", team: "Concordia Univ." }, { name: "Owen Cartledge", position: "D", league: "USPHL Premier", team: "Boston Jr. Rangers" }, { name: "Xavier Charron", position: "F", league: "USPHL Premier", team: "Florida Eels" }, { name: "Tyler Corbett", position: "F", league: "USPHL Premier", team: "Elmira Impact" }, { name: "Jérémy Côté", position: "D", league: "CSSHLE U18", team: "FEIA Falcons U18" }, { name: "Maxime Côté", position: "F", league: "QMJHL", team: "Moncton Wildcats" }, { name: "Ali Czaja", position: "D", league: "QM18AAA", team: "Lac St-Louis Lions" }, { name: "Connor Campbell", position: "D", league: "OHL", team: "London Knights" }, ], }, { letter: "D", players: [ { name: "Jérémy D'Astous", position: "F", league: "MJAHL", team: "Edmundston Blizzard" }, { name: "Jules Delepoulle", position: "D", league: "NAHL", team: "Minnesota Mallards" }, { name: "Isaac Deveau", position: "D", league: "MJHL", team: "Winkler Flyers" }, { name: "Vincenzo Di Rocco", position: "F", league: "CSSHLE U18", team: "Ontario Hockey Academy U18" }, { name: "Lynden Donald-Gorman", position: "F", league: "KIJHL", team: "Quesnel River Rush" }, { name: "Wilson Dowse", position: "D", league: "NAPrepHL U18", team: "Cornwall Colts U18 AAA" }, { name: "Marek Dubuc", position: "D", league: "NBPEIMU18HL", team: "Northern Moose U18 AAA" }, { name: "Tristan Dussault", position: "F", league: "QJHL", team: "Cégep Beauce-Appalaches Condors" }, ], }, { letter: "F", players: [ { name: "Philippe Fauchon", position: "D", league: "MJAHL", team: "Truro Bearcats" }, { name: "Tristan Fedele", position: "D", league: "CCHL", team: "Brockville Braves" }, { name: "Yanik Felesakis", position: "F", league: "MJAHL", team: "Fredericton Red Wings" }, { name: "Ludovick Filion", position: "D", league: "VIJHL", team: "Campbell River Storm" }, { name: "Xavier Fisk", position: "G", league: "USports", team: "Univ. of New Brunswick" }, { name: "James Fitzpatrick", position: "F", league: "MPHL", team: "Wyoming Seminary Prep" }, { name: "Joshua Forbes", position: "F", league: "USPHL Premier", team: "Hawkesbury Knights" }, { name: "Jérémy Fortin", position: "F", league: "MJAHL", team: "Edmundston Blizzard" }, { name: "Juan David Fortin", position: "F", league: "NEFPHL 19U", team: "NPU Rebels U18 Prep" }, { name: "George Foti", position: "G", league: "USPHL Premier", team: "Hawkesbury Knights" }, { name: "Gabriel François", position: "F", league: "USPHL Premier", team: "Montréal Black Vees" }, ], }, { letter: "G", players: [ { name: "Benoit Gagnon", position: "F", league: "UT1HL 18U", team: "Le Sommet Academy U18" }, { name: "Justin Gagnon", position: "F", league: "QM18AAA", team: "Magog Cantonniers" }, { name: "Yoan Gagnon", position: "F", league: "CCHL", team: "Ottawa Jr. Senators" }, { name: "Zachary Gagnon", position: "D", league: "QMJHL", team: "Sherbrooke Phoenix" }, { name: "Nick Galeazza", position: "D", league: "OJHL", team: "Lindsay Muskies" }, { name: "James Ghebbari", position: "F", league: "NAHL", team: "Minnesota Mallards" }, { name: "William Grimard", position: "G", league: "USports", team: "Univ. of Québec-Trois-Rivières" }, ], }, { letter: "H", players: [ { name: "Andreas Haddad", position: "D", league: "USPHL Premier", team: "Hawkesbury Knights" }, { name: "Cristiano Henriques", position: "F", league: "RSEQ M18 D1 R", team: "Collège Notre-Dame M18 D1 R" }, { name: "Alexis Hilaire-Pinot", position: "F", league: "QJHL", team: "Cégep de Granby L'Indigo" }, { name: "Keenan Holland", position: "F", league: "KIJHL", team: "Grand Forks Border Bruins" }, ], }, { letter: "I", players: [{ name: "Luca Iannuzzi", position: "D", league: "USHS-Prep", team: "Hoosac School" }], }, { letter: "K", players: [ { name: "John Kartsonakis", position: "F", league: "PHC", team: "Culver Military Academy Prep" }, { name: "Billy Kollias", position: "F", league: "QJHL", team: "Montréal Rangers" }, ], }, { letter: "L", players: [ { name: "Jacob Lachance", position: "F", league: "QMJHL", team: "Shawinigan Cataractes" }, { name: "Benjamin Lacoste", position: "D", league: "USPHL Premier", team: "Hawkesbury Knights" }, { name: "Xavier Lacoste", position: "D", league: "AJHL", team: "Whitecourt Wolverines" }, { name: "Danick Lalonde", position: "D", league: "USPHL Premier", team: "Hawkesbury Knights" }, { name: "Lohan Lamarre", position: "F", league: "QJHL", team: "Valleyfield Braves" }, { name: "Ézékiel Lambert", position: "D", league: "CSSHLE U18", team: "Ulysse Académie Prep Varsity" }, { name: "Nicolas Lamothe", position: "D", league: "RSEQ D2", team: "Univ. du Québec en Outaouais" }, { name: "Olivier Lapointe", position: "F", league: "USHS-Prep", team: "Williston Northampton School" }, { name: "Charles-Thomas Larochelle", position: "F", league: "USports", team: "Queen's Univ." }, { name: "Zachary Larocque", position: "F", league: "QJHL", team: "Valleyfield Braves" }, { name: "Hubert Larose", position: "F", league: "CSSHL U18", team: "Prairie Hockey Academy U18 Prep" }, { name: "Adam Lecours", position: "G", league: "MJAHL", team: "Grand Falls Rapids" }, { name: "Sam LeDrew", position: "F", league: "BCHL", team: "West Kelowna Warriors" }, { name: "Antoine Lellouche", position: "F", league: "PPHL 18U", team: "Bourget Collège U18" }, { name: "Romain Lellouche", position: "F", league: "MPHL", team: "Lake Forest Academy" }, { name: "Sam Levin", position: "D", league: "EHL", team: "New Jersey Bears" }, { name: "Jimmy Lodge", position: "F", league: "FPHL", team: "Athens Rock Lobsters" }, { name: "Dominic Loubert", position: "D", league: "FPHL", team: "Port Huron Prowlers" }, { name: "Justin Louette", position: "D", league: "QJHL", team: "Montréal-Est Rangers" }, ], }, { letter: "M", players: [ { name: "Kananga Mangala", position: "F", league: "VIJHL", team: "Lake Cowichan Kraken" }, { name: "Thomas Marsan", position: "D", league: "QJHL", team: "Longueuil Collège-Français" }, { name: "Jacob Martineau", position: "F", league: "OJHL", team: "Stouffville Spirit" }, { name: "Natan Meunier-Roberge", position: "D", league: "SJHL", team: "Flin Flon Bombers" }, { name: "Raphael Michaud", position: "D", league: "MJAHL", team: "Grand Falls Rapids" }, { name: "Tristan Miron", position: "F", league: "CCHL", team: "Cornwall Colts" }, { name: "Victor Morrissette-Richer", position: "F", league: "U18 AAA", team: "Bourget Collège U18" }, ], }, { letter: "N", players: [ { name: "Alessio Nardelli", position: "F", league: "AJHL", team: "Lloydminster Bobcats" }, { name: "Nathaniel Noah", position: "F", league: "THF 18U", team: "Ontario Hockey Academy U18" }, { name: "Xavier Normand", position: "D", league: "QM18AAA", team: "Lac St-Louis Lions" }, ], }, { letter: "O", players: [{ name: "Mathis O'Driscoll", position: "F", league: "QJHL", team: "Longueuil Collège-Français" }], }, { letter: "P", players: [ { name: "Émile Pagé", position: "G", league: "QJHL", team: "Côte-du-Sud Everest" }, { name: "Xavier Pariseau", position: "F", league: "USPHL Premier", team: "Thunder Hockey Club" }, { name: "Henrik Pettigrew", position: "D", league: "USPHL Elite", team: "Jersey Hitmen" }, { name: "Olivier Picard", position: "F", league: "LRH", team: "Windsor Wild" }, { name: "Loik Plouffe", position: "D", league: "QJHL", team: "Gatineau Flames" }, { name: "Olivier Pouliot", position: "F", league: "USports", team: "Lakehead Univ." }, ], }, { letter: "R", players: [ { name: "Antoine Rémillard", position: "F", league: "TNPHL", team: "Stanstead College Varsity" }, { name: "Andrew Rinaldi", position: "F", league: "USports", team: "Concordia Univ." }, { name: "Marc-Antoine Riopel", position: "F", league: "CCHL", team: "Smiths Falls Bears" }, { name: "Anthony Romanin", position: "F", league: "QJHL", team: "Montréal Phoenix" }, ], }, { letter: "S", players: [ { name: "Dante Santangelo", position: "F", league: "USPHL Premier", team: "Northern Cyclones" }, { name: "Mikol Sartor", position: "F", league: "SEMHL", team: "Carman Beavers" }, { name: "Félix-Antoine Scully", position: "D", league: "UT1HL 18U", team: "Le Sommet Academy U18" }, { name: "Josh Scully", position: "G", league: "CCHL", team: "Ottawa Jr. Senators" }, { name: "Sarah Smith", position: "F", league: "PWHL", team: "Montreal" }, ], }, { letter: "T", players: [ { name: "Christopher Tellier-Pelletier", position: "D", league: "UT1HL 18U", team: "Norwich Hockey Club 18U AAA", }, { name: "Alexis Tremblay", position: "F", league: "NOJHL", team: "Timmins Rock" }, { name: "Émile Tremblay", position: "F", league: "NCAA III", team: "Westfield State Univ." }, { name: "Jasmin Tremblay", position: "D", league: "USPHL Premier", team: "Montréal Black Vees" }, { name: "Lorik Tremblay", position: "F", league: "USPHL Premier", team: "Red River Spartans" }, { name: "Justin Trottier", position: "F", league: "MJAHL", team: "Edmundston Blizzard" }, ], }, { letter: "V", players: [ { name: "Joey Vetrano", position: "F", league: "AJHL", team: "Whitecourt Wolverines" }, { name: "Hugo Vézina-Fusey", position: "F", league: "RSEQ D2", team: "ÉTS Piranhas" }, ], }, { letter: "W", players: [{ name: "Lucas Willoughby", position: "F", league: "NOJHL", team: "Iroquois Falls Storm" }], }, { letter: "Z", players: [{ name: "Jano Zambakdjian", position: "D", league: "MJAHL", team: "Summerside Western Capitals" }], }, ] export function ClientList() { const [searchTerm, setSearchTerm] = useState("") const [filter, setFilter] = useState("All") const filteredClients = useMemo(() => { return clients .map((letterGroup) => ({ letter: letterGroup.letter, players: letterGroup.players.filter((player) => { const matchesSearch = player.name.toLowerCase().includes(searchTerm.toLowerCase()) || player.team.toLowerCase().includes(searchTerm.toLowerCase()) || player.league.toLowerCase().includes(searchTerm.toLowerCase()) const matchesFilter = filter === "All" || player.position === filter return matchesSearch && matchesFilter }), })) .filter((group) => group.players.length > 0) }, [searchTerm, filter]) return (

Our Clients

setSearchTerm(e.target.value)} className="bg-gray-800 text-white border-gray-700 pl-10" />

{["All", "F", "D", "G"].map((pos) => ( ))}

{filteredClients.length > 0 ? ( {filteredClients.map((group) => (

{group.letter}

{group.players.map((player) => (

{player.name}

{player.team}

{player.position} {player.league}

))}

))} ) : ( No clients found matching your search criteria. )}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.7", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "@vercel/toolbar": "0.1.41", "next-plausible": "3.12.5", "framer-motion": "12.23.25", "@sendgrid/mail": "8.1.6", "twilio": "5.10.7", "resend": "6.5.2", "stripe": "20.0.0", "@stripe/stripe-js": "8.5.3" }, "devDependencies": { "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]javascript:file="next.config.mjs" isEdit="true" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, remotePatterns: [ { protocol: "https", hostname: "v0.blob.com", port: "", pathname: "/**", }, ], }, } export default nextConfig [V0_FILE]typescriptreact:file="app/components/ContactForm.tsx" isMerged="true" "use client" import { useState } from "react" import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import * as z from "zod" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useToast } from "@/components/ui/use-toast" import { submitContactForm } from "../actions/submitContactForm" import { Loader2 } from "lucide-react" const contactFormSchema = z.object({ name: z.string().min(2, "Name must be at least 2 characters"), email: z.string().email("Please enter a valid email address"), phone: z.string().optional(), inquiryType: z.enum(["meeting", "information", "services", "other"], { required_error: "Please select an inquiry type", }), message: z.string().min(10, "Message must be at least 10 characters"), }) type ContactFormData = z.infer export function ContactForm() { const [isSubmitting, setIsSubmitting] = useState(false) const { toast } = useToast() const { register, handleSubmit, setValue, watch, reset, formState: { errors }, } = useForm({ resolver: zodResolver(contactFormSchema), }) const inquiryType = watch("inquiryType") const onSubmit = async (data: ContactFormData) => { setIsSubmitting(true) try { await submitContactForm(data) toast({ title: "Message Sent!", description: "We've received your message and will get back to you within 24-48 hours.", }) reset() } catch (error) { toast({ title: "Error", description: "Failed to send message. Please try again or email us directly.", variant: "destructive", }) } finally { setIsSubmitting(false) } } return (

Full Name * {errors.name &&

{errors.name.message}

}

Email Address * {errors.email &&

{errors.email.message}

}

Phone Number (Optional)

What can we help you with? * {errors.inquiryType &&

{errors.inquiryType.message}

}

Message *

{errors.message && <p className="text-red-500 text-sm">{errors.message.message}</p>}
      </div>

<Button
        type="submit"
        disabled={isSubmitting}
        className="w-full bg-[#ff8c42] hover:bg-[#ff8c42]/90 text-white font-semibold"
      >
        {isSubmitting ? (
          <>
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            Sending...
          </>
        ) : (
          "Send Message"
        )}
      </Button>
    </form>
  )
}
[V0_FILE]typescript:file="app/actions/submitContactForm.tsx" isMerged="true"
"use server"

import { Resend } from "resend"

const resend = new Resend(process.env.RESEND_API_KEY)

interface ContactFormData {
  name: string
  email: string
  phone?: string
  inquiryType: "meeting" | "information" | "services" | "other"
  message: string
}

const inquiryTypeLabels = {
  meeting: "Schedule a Meeting",
  information: "Request Information",
  services: "Ask About Services",
  other: "Other Inquiry",
}

export async function submitContactForm(formData: ContactFormData) {
  if (!process.env.RESEND_API_KEY) {
    console.error("RESEND_API_KEY is not set")
    throw new Error("Email service is not configured")
  }

try {
    const { data, error } = await resend.emails.send({
      from: "Prestige Hockey <onboarding@resend.dev>",
      to: "prestigeplacementhockey@gmail.com",
      subject: `New Contact Form Submission: ${inquiryTypeLabels[formData.inquiryType]}`,
      html: `
        <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
          <h1 style="color: #ff8c42; border-bottom: 3px solid #ff8c42; padding-bottom: 10px;">
            New Contact Form Submission
          </h1>
          
          <div style="background-color: #f5f5f5; padding: 20px; margin: 20px 0; border-radius: 5px;">
            <h2 style="color: #333; margin-top: 0;">Contact Information</h2>
            <p><strong>Name:</strong> ${formData.name}</p>
            <p><strong>Email:</strong> <a href="mailto:${formData.email}">${formData.email}</a></p>
            ${formData.phone ? `<p><strong>Phone:</strong> ${formData.phone}</p>` : ""}
            <p><strong>Inquiry Type:</strong> ${inquiryTypeLabels[formData.inquiryType]}</p>
          </div>

<div style="margin: 20px 0;">
            <h2 style="color: #333;">Message</h2>
            <p style="white-space: pre-wrap; line-height: 1.6;">${formData.message}</p>
          </div>

<hr style="border: none; border-top: 1px solid #ddd; margin: 30px 0;">
          
          <p style="color: #666; font-size: 12px;">
            This email was sent from the contact form on your Prestige Hockey Placement website.
          </p>
        </div>
      `,
    })

if (error) {
      console.error("Resend error:", error)
      throw new Error("Failed to send email")
    }

console.log("Contact form email sent successfully:", data)
    return { success: true }
  } catch (error) {
    console.error("Error sending contact form email:", error)
    throw new Error("Failed to submit contact form")
  }
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type { Metadata } from "next"
import { ContactForm } from "../components/ContactForm"
import { Mail, MapPin, Calendar } from "lucide-react"

export const metadata: Metadata = {
  title: "Contact Us | Prestige Hockey Placement",
  description:
    "Get in touch with Prestige Hockey Placement for meetings, information, or inquiries about our services.",
}

export default function ContactPage() {
  return (
    <div className="min-h-screen bg-black text-white pt-20">
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h1 className="text-4xl md:text-5xl font-bold mb-4 text-balance">Get in Touch</h1>
            <p className="text-xl text-gray-400 max-w-2xl mx-auto text-pretty">
              Have questions about our services or want to schedule a meeting? We're here to help you take the next step
              in your hockey career.
            </p>
          </div>

<div className="grid md:grid-cols-2 gap-12">
            {/* Contact Information */}
            <div className="space-y-8">
              <div>
                <h2 className="text-2xl font-semibold mb-6">Contact Information</h2>
                <div className="space-y-6">
                  <div className="flex items-start space-x-4">
                    <div className="w-12 h-12 bg-[#ff8c42]/10 rounded-lg flex items-center justify-center flex-shrink-0">
                      <Mail className="text-[#ff8c42]" size={24} />
                    </div>
                    <div>
                      <h3 className="font-semibold mb-1">Email</h3>
                      <a
                        href="mailto:prestigeplacementhockey@gmail.com"
                        className="text-gray-400 hover:text-[#ff8c42] transition-colors"
                      >
                        prestigeplacementhockey@gmail.com
                      </a>
                    </div>
                  </div>

<div className="flex items-start space-x-4">
                    <div className="w-12 h-12 bg-[#ff8c42]/10 rounded-lg flex items-center justify-center flex-shrink-0">
                      <MapPin className="text-[#ff8c42]" size={24} />
                    </div>
                    <div>
                      <h3 className="font-semibold mb-1">Location</h3>
                      <p className="text-gray-400">Montreal, Canada</p>
                    </div>
                  </div>

<div className="flex items-start space-x-4">
                    <div className="w-12 h-12 bg-[#ff8c42]/10 rounded-lg flex items-center justify-center flex-shrink-0">
                      <Calendar className="text-[#ff8c42]" size={24} />
                    </div>
                    <div>
                      <h3 className="font-semibold mb-1">Response Time</h3>
                      <p className="text-gray-400">We typically respond within 24-48 hours</p>
                    </div>
                  </div>
                </div>
              </div>

<div className="bg-zinc-900 p-6 rounded-lg">
                <h3 className="font-semibold mb-3">Office Hours</h3>
                <div className="space-y-2 text-gray-400">
                  <p>Monday - Friday: 8:00 AM - 10:00 PM EST</p>
                  <p>Saturday - Sunday: 9:00 AM - 9:00 PM EST</p>
                </div>
              </div>
            </div>

{/* Contact Form */}
            <div>
              <div className="bg-zinc-900 p-8 rounded-lg">
                <h2 className="text-2xl font-semibold mb-6">Send Us a Message</h2>
                <ContactForm />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/pricing/page.tsx" isMerged="true"
import type { Metadata } from "next"
import { PricingShowcases } from "@/app/components/PricingShowcases"

export const metadata: Metadata = {
  title: "Pricing - Summer Showcases | Prestige Hockey Placement",
  description: "Register for our elite summer showcase events. Four premier tournaments across North America.",
}

export default function PricingPage() {
  return <PricingShowcases />
}
[V0_FILE]typescriptreact:file="app/payment-success/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useSearchParams } from "next/navigation"
import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { CheckCircle } from "lucide-react"
import Link from "next/link"

export default function PaymentSuccessPage() {
  const searchParams = useSearchParams()
  const sessionId = searchParams.get("session_id")
  const [loading, setLoading] = useState(true)

useEffect(() => {
    if (sessionId) {
      setLoading(false)
    }
  }, [sessionId])

return (
    <section className="py-24 bg-gray-900 min-h-screen flex items-center justify-center">
      <div className="container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.5 }}
          className="max-w-2xl mx-auto"
        >
          <Card className="bg-gray-800 border-gray-700">
            <CardHeader className="text-center pb-4">
              <div className="flex justify-center mb-4">
                <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center">
                  <CheckCircle className="w-10 h-10 text-white" />
                </div>
              </div>
              <CardTitle className="text-3xl font-bold text-white">Payment Successful!</CardTitle>
            </CardHeader>
            <CardContent className="text-center">
              <p className="text-gray-300 mb-6">
                Thank you for registering for our showcase event. You will receive a confirmation email shortly with all
                the details.
              </p>
              <p className="text-gray-400 mb-8 text-sm">
                If you have any questions, please contact us at prestigeplacementhockey@gmail.com
              </p>
              <div className="flex gap-4 justify-center">
                <Button asChild className="bg-[#ff8c42] hover:bg-[#ff8c42]/90 text-white">
                  <Link href="/">Return Home</Link>
                </Button>
                <Button
                  asChild
                  variant="outline"
                  className="border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                >
                  <Link href="/pricing">View More Showcases</Link>
                </Button>
              </div>
            </CardContent>
          </Card>
        </motion.div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/payment-success/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import "./globals.css"
import { Inter } from "next/font/google"
import { Navigation } from "./components/Navigation"
import { Footer } from "./components/Footer"

const inter = Inter({ subsets: ["latin"] })

export const metadata = {
  title: "Prestige Hockey Placement | Hockey Agency",
  description: "Premier hockey agency dedicated to player development and placement",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className="scroll-smooth">
      <body className={`${inter.className} bg-black text-white`}>
        <Navigation />
        {children}
        <Footer />
      </body>
    </html>
  )
}
[V0_FILE]typescript:file="app/api/create-checkout/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import Stripe from "stripe"

if (!process.env.STRIPE_SECRET_KEY) {
  console.error("[v0] STRIPE_SECRET_KEY is missing!")
}

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: "2024-12-18.acacia",
})

export async function POST(request: Request) {
  try {
    console.log("[v0] Received checkout request")
    const { showcaseTitle, price } = await request.json()
    console.log("[v0] Showcase:", showcaseTitle, "Price:", price)

if (!showcaseTitle || !price) {
      console.error("[v0] Missing required fields")
      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
    }

console.log("[v0] Creating Stripe checkout session...")
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ["card"],
      line_items: [
        {
          price_data: {
            currency: "cad",
            product_data: {
              name: showcaseTitle,
              description: `Registration for ${showcaseTitle}`,
            },
            unit_amount: price * 100, // Stripe expects amount in cents
          },
          quantity: 1,
        },
      ],
      mode: "payment",
      success_url: `${request.headers.get("origin")}/payment-success?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${request.headers.get("origin")}/pricing`,
    })

console.log("[v0] Session created successfully:", session.id)
    return NextResponse.json({ url: session.url })
  } catch (error: any) {
    console.error("[v0] Stripe checkout error:", error)
    return NextResponse.json(
      {
        error: "Error creating checkout session",
        details: error.message || "Unknown error",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/actions/submitShowcaseRegistration.tsx" isMerged="true"
"use server"

import { Resend } from "resend"

const resend = new Resend(process.env.RESEND_API_KEY)

interface ShowcaseRegistrationData {
  showcaseTitle: string
  price: number
  playerName: string
  playerEmail: string
  age: string
  height: string
  weight: string
  lastTeam: string
  position: string
  address: string
  city: string
  province: string
  postalCode: string
}

export async function submitShowcaseRegistration(formData: ShowcaseRegistrationData) {
  if (!process.env.RESEND_API_KEY) {
    console.error("RESEND_API_KEY is not set")
    throw new Error("Email service is not configured")
  }

try {
    const { data, error } = await resend.emails.send({
      from: "Prestige Hockey <onboarding@resend.dev>",
      to: "prestigeplacementhockey@gmail.com",
      subject: `New Showcase Registration - ${formData.showcaseTitle}`,
      html: `
        <h1>New Showcase Registration</h1>
        <h2>${formData.showcaseTitle} - $${formData.price} CAD</h2>
        
        <h3>Player Information</h3>
        <p><strong>Name:</strong> ${formData.playerName}</p>
        <p><strong>Email:</strong> ${formData.playerEmail}</p>
        <p><strong>Age:</strong> ${formData.age}</p>
        <p><strong>Height:</strong> ${formData.height}</p>
        <p><strong>Weight:</strong> ${formData.weight}</p>
        <p><strong>Position:</strong> ${formData.position}</p>
        <p><strong>Last Team Played:</strong> ${formData.lastTeam}</p>
        
        <h3>Address</h3>
        <p>${formData.address}</p>
        <p>${formData.city}, ${formData.province} ${formData.postalCode}</p>
      `,
    })

if (error) {
      console.error("Resend error:", error)
      throw new Error("Failed to send email")
    }

console.log("Email sent successfully:", data)
    return { success: true }
  } catch (error) {
    console.error("Error sending email:", error)
    throw new Error("Failed to submit registration")
  }
}
[V0_FILE]typescriptreact:file="app/components/PricingShowcases.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { CalendarDays, MapPin, Users, DollarSign, CheckCircle, Eye, Loader2 } from "lucide-react"
import { ShowcaseRegistrationModal } from "./ShowcaseRegistrationModal"

const publishableKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
console.log("[v0] Stripe publishable key exists:", !!publishableKey)

const showcases = [
  {
    title: "Montreal Meltdown",
    description:
      "Most important Spring showcase and last opportunity ahead of QMJHL Draft for aspiring draft selections.",
    date: "Mid May",
    location: "Montreal, Quebec",
    participants: "Players born 2007-2009",
    price: 500,
    includes: "1 practice & 4 to 7 games",
    highlight: "Last chance before QMJHL Draft",
  },
  {
    title: "Boston Predraft",
    description:
      "Best opportunity to get seen by NAHL, NCDC, CJHL and Prep school teams ahead of the summer, their respective drafts and camps for aspiring draft selections.",
    date: "Beginning of May",
    location: "Boston, Massachusetts",
    participants: "Players born 2005-2009",
    price: 600,
    includes: "1 practice & 3 to 7 games",
    highlight: "Exposure to multiple leagues",
    scouting: "NAHL, NCDC, CJHL, Prep schools",
  },
  {
    title: "Toronto TEP",
    description:
      "Most Competitive and scouted Jr. A showcase in Canada, and the last opportunity for these teams to add players to their rosters before the end of the scouting period.",
    date: "End of June",
    location: "Toronto, Ontario",
    participants: "Players born 2005-2008",
    price: 600,
    includes: "1 practice & 4 to 7 games",
    highlight: "Last chance for Jr. A teams",
    scouting: "Jr. A teams",
  },
  {
    title: "Boston Chowder Cup",
    description:
      "Last opportunity to get seen by Jr. A and Prep school teams ahead of the start of final camps and respective season.",
    date: "End of July",
    location: "Boston, Massachusetts",
    participants: "Players born 2005-2009",
    price: 600,
    includes: "1 practice & 3 to 7 games",
    highlight: "Final showcase before season starts",
    scouting: "Jr. A teams, Prep schools",
  },
]

export function PricingShowcases() {
  const [loadingShowcase, setLoadingShowcase] = useState<string | null>(null)
  const [selectedShowcase, setSelectedShowcase] = useState<{ title: string; price: number } | null>(null)

const handleRegisterClick = (showcaseTitle: string, price: number) => {
    setSelectedShowcase({ title: showcaseTitle, price })
  }

const handleCheckout = async (showcaseTitle: string, price: number) => {
    setLoadingShowcase(showcaseTitle)

try {
      const response = await fetch("/api/create-checkout", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          showcaseTitle,
          price,
        }),
      })

const data = await response.json()

if (!response.ok || data.error) {
        alert(`Failed to create checkout session: ${data.details || data.error || "Unknown error"}`)
        setLoadingShowcase(null)
        return
      }

if (data.url) {
        window.location.href = data.url
      } else {
        alert("Failed to initialize payment. Please try again.")
        setLoadingShowcase(null)
      }
    } catch (error: any) {
      alert(`An error occurred: ${error.message || "Please try again"}`)
      setLoadingShowcase(null)
    }
  }

return (
    <>
      <section className="py-24 bg-gray-900 min-h-screen">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="text-center mb-12"
          >
            <h1 className="text-4xl md:text-5xl font-bold mb-4 text-white">Summer Showcase Pricing</h1>
            <p className="text-xl text-gray-300 max-w-2xl mx-auto">
              Register for our elite summer showcase events. Secure your spot in premier tournaments across North
              America.
            </p>
          </motion.div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {showcases.map((showcase, index) => (
              <motion.div
                key={showcase.title}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
              >
                <Card className="bg-gray-800 border-gray-700 overflow-hidden h-full flex flex-col">
                  <CardHeader className="pb-4">
                    <CardTitle className="text-2xl font-bold text-white">{showcase.title}</CardTitle>
                  </CardHeader>
                  <CardContent className="flex flex-col flex-grow">
                    <p className="text-gray-300 mb-4">{showcase.description}</p>

<div className="space-y-2 mb-6">
                      <div className="flex items-center text-gray-400">
                        <CalendarDays className="w-5 h-5 mr-2 text-[#ff8c42]" />
                        <span>{showcase.date}</span>
                      </div>
                      <div className="flex items-center text-gray-400">
                        <MapPin className="w-5 h-5 mr-2 text-[#ff8c42]" />
                        <span>{showcase.location}</span>
                      </div>
                      <div className="flex items-center text-gray-400">
                        <Users className="w-5 h-5 mr-2 text-[#ff8c42]" />
                        <span>{showcase.participants}</span>
                      </div>
                      <div className="flex items-center text-gray-400">
                        <CheckCircle className="w-5 h-5 mr-2 text-[#ff8c42]" />
                        <span>Includes: {showcase.includes}</span>
                      </div>
                      {showcase.scouting && (
                        <div className="flex items-center text-gray-400">
                          <Eye className="w-5 h-5 mr-2 text-[#ff8c42]" />
                          <span>Scouted by: {showcase.scouting}</span>
                        </div>
                      )}
                    </div>

<div className="mt-auto">
                      <div className="flex flex-wrap gap-2 mb-6">
                        {showcase.highlight && (
                          <Badge variant="outline" className="border-[#ff8c42] text-[#ff8c42]">
                            {showcase.highlight}
                          </Badge>
                        )}
                      </div>

<div className="flex items-baseline justify-between mb-4">
                        <div className="flex items-center">
                          <DollarSign className="w-6 h-6 text-[#ff8c42]" />
                          <span className="text-4xl font-bold text-white">{showcase.price}</span>
                          <span className="text-gray-400 ml-2">CAD</span>
                        </div>
                      </div>

<Button
                        onClick={() => handleRegisterClick(showcase.title, showcase.price)}
                        disabled={loadingShowcase === showcase.title}
                        className="w-full bg-[#ff8c42] hover:bg-[#ff8c42]/90 text-white"
                      >
                        {loadingShowcase === showcase.title ? (
                          <>
                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                            Processing...
                          </>
                        ) : (
                          "Register Now"
                        )}
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

{selectedShowcase && (
        <ShowcaseRegistrationModal
          isOpen={!!selectedShowcase}
          onClose={() => {
            setSelectedShowcase(null)
            setLoadingShowcase(null)
          }}
          showcaseTitle={selectedShowcase.title}
          price={selectedShowcase.price}
          onSuccess={() => handleCheckout(selectedShowcase.title, selectedShowcase.price)}
        />
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="app/components/ShowcaseRegistrationModal.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Loader2 } from "lucide-react"
import { submitShowcaseRegistration } from "@/app/actions/submitShowcaseRegistration"

interface ShowcaseRegistrationModalProps {
  isOpen: boolean
  onClose: () => void
  showcaseTitle: string
  price: number
  onSuccess: () => void
}

export function ShowcaseRegistrationModal({
  isOpen,
  onClose,
  showcaseTitle,
  price,
  onSuccess,
}: ShowcaseRegistrationModalProps) {
  const [loading, setLoading] = useState(false)
  const [ageError, setAgeError] = useState("")
  const [formData, setFormData] = useState({
    playerName: "",
    playerEmail: "",
    age: "",
    height: "",
    weight: "",
    lastTeam: "",
    position: "",
    address: "",
    city: "",
    province: "",
    postalCode: "",
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

const age = Number.parseInt(formData.age)
    if (age < 15 || age > 20) {
      setAgeError("Age must be between 15 and 20 years old")
      return
    }

setLoading(true)

try {
      await submitShowcaseRegistration({
        showcaseTitle,
        price,
        ...formData,
      })

onSuccess()
    } catch (error) {
      console.error("Registration error:", error)
      alert("Failed to submit registration. Please try again.")
      setLoading(false)
    }
  }

const handleChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
    if (field === "age") {
      setAgeError("")
    }
  }

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto bg-gray-800 border-gray-700">
        <DialogHeader>
          <DialogTitle className="text-2xl font-bold text-white">Register for {showcaseTitle}</DialogTitle>
          <p className="text-gray-400">Price: ${price} CAD</p>
        </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-6 mt-4">
          <div className="space-y-4">
            <h3 className="text-lg font-semibold text-white">Player Information</h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <Label htmlFor="playerName" className="text-white">
                  Full Name *
                </Label>
                <Input
                  id="playerName"
                  type="text"
                  required
                  value={formData.playerName}
                  onChange={(e) => handleChange("playerName", e.target.value)}
                  className="bg-gray-700 border-gray-600 text-white"
                />
              </div>

<div>
                <Label htmlFor="playerEmail" className="text-white">
                  Email *
                </Label>
                <Input
                  id="playerEmail"
                  type="email"
                  required
                  value={formData.playerEmail}
                  onChange={(e) => handleChange("playerEmail", e.target.value)}
                  className="bg-gray-700 border-gray-600 text-white"
                />
              </div>

<div>
                <Label htmlFor="age" className="text-white">
                  Age * (15-20 years old)
                </Label>
                <Input
                  id="age"
                  type="number"
                  required
                  min="15"
                  max="20"
                  value={formData.age}
                  onChange={(e) => handleChange("age", e.target.value)}
                  className="bg-gray-700 border-gray-600 text-white"
                />
                {ageError && <p className="text-red-500 text-sm mt-1">{ageError}</p>}
              </div>

<div>
                <Label htmlFor="position" className="text-white">
                  Position *
                </Label>
                <Select value={formData.position} onValueChange={(value) => handleChange("position", value)}>
                  <SelectTrigger className="bg-gray-700 border-gray-600 text-white">
                    <SelectValue placeholder="Select position" />
                  </SelectTrigger>
                  <SelectContent className="bg-gray-700 border-gray-600">
                    <SelectItem value="Forward">Forward</SelectItem>
                    <SelectItem value="Defense">Defense</SelectItem>
                    <SelectItem value="Goalie">Goalie</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div>
                <Label htmlFor="height" className="text-white">
                  Height *
                </Label>
                <Input
                  id="height"
                  type="text"
                  placeholder="e.g., 5'11""
                  required
                  value={formData.height}
                  onChange={(e) => handleChange("height", e.target.value)}
                  className="bg-gray-700 border-gray-600 text-white"
                />
              </div>

<div>
                <Label htmlFor="weight" className="text-white">
                  Weight *
                </Label>
                <Input
                  id="weight"
                  type="text"
                  placeholder="e.g., 175 lbs"
                  required
                  value={formData.weight}
                  onChange={(e) => handleChange("weight", e.target.value)}
                  className="bg-gray-700 border-gray-600 text-white"
                />
              </div>

<div className="md:col-span-2">
                <Label htmlFor="lastTeam" className="text-white">
                  Last Team Played For *
                </Label>
                <Input
                  id="lastTeam"
                  type="text"
                  required
                  value={formData.lastTeam}
                  onChange={(e) => handleChange("lastTeam", e.target.value)}
                  className="bg-gray-700 border-gray-600 text-white"
                />
              </div>
            </div>
          </div>

<div className="space-y-4">
            <h3 className="text-lg font-semibold text-white">Address Information</h3>

<div className="space-y-4">
              <div>
                <Label htmlFor="address" className="text-white">
                  Street Address *
                </Label>
                <Input
                  id="address"
                  type="text"
                  required
                  value={formData.address}
                  onChange={(e) => handleChange("address", e.target.value)}
                  className="bg-gray-700 border-gray-600 text-white"
                />
              </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <Label htmlFor="city" className="text-white">
                    City *
                  </Label>
                  <Input
                    id="city"
                    type="text"
                    required
                    value={formData.city}
                    onChange={(e) => handleChange("city", e.target.value)}
                    className="bg-gray-700 border-gray-600 text-white"
                  />
                </div>

<div>
                  <Label htmlFor="province" className="text-white">
                    Province/State *
                  </Label>
                  <Input
                    id="province"
                    type="text"
                    required
                    value={formData.province}
                    onChange={(e) => handleChange("province", e.target.value)}
                    className="bg-gray-700 border-gray-600 text-white"
                  />
                </div>

<div>
                  <Label htmlFor="postalCode" className="text-white">
                    Postal Code *
                  </Label>
                  <Input
                    id="postalCode"
                    type="text"
                    required
                    value={formData.postalCode}
                    onChange={(e) => handleChange("postalCode", e.target.value)}
                    className="bg-gray-700 border-gray-600 text-white"
                  />
                </div>
              </div>
            </div>
          </div>

<div className="flex gap-4">
            <Button
              type="button"
              variant="outline"
              onClick={onClose}
              disabled={loading}
              className="flex-1 border-gray-600 text-white hover:bg-gray-700 bg-transparent"
            >
              Cancel
            </Button>
            <Button type="submit" disabled={loading} className="flex-1 bg-[#ff8c42] hover:bg-[#ff8c42]/90 text-white">
              {loading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Processing...
                </>
              ) : (
                "Continue to Payment"
              )}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="app/probability-tool/page.tsx" isMerged="true"
import { PlayerProbabilityTool } from "../components/PlayerProbabilityTool"

export const metadata = {
  title: "Player Probability Tool | Prestige Hockey Placement",
  description: "Discover the top leagues you're most likely to advance to based on your player profile and statistics.",
}

export default function ProbabilityToolPage() {
  return (
    <main className="min-h-screen bg-black text-white pt-20">
      <PlayerProbabilityTool />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/components/Navigation.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { motion, AnimatePresence } from "framer-motion"
import { AnimatedLogo } from "./AnimatedLogo"
import { Instagram, Facebook, Menu, X } from "lucide-react"

export function Navigation() {
  const [scrolled, setScrolled] = useState(false)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50)
    }
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

const closeMobileMenu = () => setMobileMenuOpen(false)

return (
    <motion.header
      className={`fixed top-0 w-full z-50 transition-colors duration-300 ${
        scrolled ? "bg-black/80 backdrop-blur-md" : "bg-transparent"
      }`}
      initial={{ y: -100 }}
      animate={{ y: 0 }}
      transition={{ duration: 0.5 }}
    >
      <nav className="container mx-auto px-4 py-4">
        <div className="flex items-center justify-between">
          <Link href="/" className="flex items-center space-x-2">
            <AnimatedLogo size={40} />
            <span className="text-white font-semibold">Prestige Hockey</span>
          </Link>

<div className="hidden md:flex items-center space-x-8">
            <Link href="/client-list" className="text-white hover:text-[#ff8c42] transition-colors">
              Client List
            </Link>
            <Link href="/representation-plans" className="text-white hover:text-[#ff8c42] transition-colors">
              Representation Plans
            </Link>
            <Link href="/services" className="text-white hover:text-[#ff8c42] transition-colors">
              Services
            </Link>
            <Link href="/showcases" className="text-white hover:text-[#ff8c42] transition-colors">
              Showcases
            </Link>
            <Link href="/pricing" className="text-white hover:text-[#ff8c42] transition-colors">
              Pricing
            </Link>
            <Link href="/probability-tool" className="text-white hover:text-[#ff8c42] transition-colors">
              Probability Tool
            </Link>
            <Link href="/team" className="text-white hover:text-[#ff8c42] transition-colors">
              Our Team
            </Link>
            <Link href="/contact" className="text-white hover:text-[#ff8c42] transition-colors">
              Contact
            </Link>
          </div>

<button
              className="md:hidden text-white hover:text-[#ff8c42] transition-colors"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              aria-label="Toggle menu"
            >
              {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>

<AnimatePresence>
          {mobileMenuOpen && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: "auto" }}
              exit={{ opacity: 0, height: 0 }}
              transition={{ duration: 0.3 }}
              className="md:hidden overflow-hidden"
            >
              <div className="flex flex-col space-y-4 pt-4 pb-2">
                <Link
                  href="/client-list"
                  className="text-white hover:text-[#ff8c42] transition-colors py-2"
                  onClick={closeMobileMenu}
                >
                  Client List
                </Link>
                <Link
                  href="/representation-plans"
                  className="text-white hover:text-[#ff8c42] transition-colors py-2"
                  onClick={closeMobileMenu}
                >
                  Representation Plans
                </Link>
                <Link
                  href="/services"
                  className="text-white hover:text-[#ff8c42] transition-colors py-2"
                  onClick={closeMobileMenu}
                >
                  Services
                </Link>
                <Link
                  href="/showcases"
                  className="text-white hover:text-[#ff8c42] transition-colors py-2"
                  onClick={closeMobileMenu}
                >
                  Showcases
                </Link>
                <Link
                  href="/pricing"
                  className="text-white hover:text-[#ff8c42] transition-colors py-2"
                  onClick={closeMobileMenu}
                >
                  Pricing
                </Link>
                <Link
                  href="/probability-tool"
                  className="text-white hover:text-[#ff8c42] transition-colors py-2"
                  onClick={closeMobileMenu}
                >
                  Probability Tool
                </Link>
                <Link
                  href="/team"
                  className="text-white hover:text-[#ff8c42] transition-colors py-2"
                  onClick={closeMobileMenu}
                >
                  Our Team
                </Link>
                <Link
                  href="/contact"
                  className="text-white hover:text-[#ff8c42] transition-colors py-2"
                  onClick={closeMobileMenu}
                >
                  Contact
                </Link>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </nav>
    </motion.header>
  )
}
[V0_FILE]typescriptreact:file="app/components/PlayerProbabilityTool.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { TrendingUp, Award, Target } from "lucide-react"

interface PlayerData {
  age: string
  position: string
  height: string
  weight: string
  goalsPerSeason: string
  assistsPerSeason: string
  plusMinus: string
  currentLeague: string
}

interface LeaguePrediction {
  league: string
  probability: number
  reasoning: string
  icon: typeof Award
}

export function PlayerProbabilityTool() {
  const [formData, setFormData] = useState<PlayerData>({
    age: "",
    position: "",
    height: "",
    weight: "",
    goalsPerSeason: "",
    assistsPerSeason: "",
    plusMinus: "",
    currentLeague: "",
  })

const [predictions, setPredictions] = useState<LeaguePrediction[]>([])
  const [showResults, setShowResults] = useState(false)

const calculateProbabilities = () => {
    const age = Number.parseInt(formData.age)
    const height = Number.parseInt(formData.height)
    const weight = Number.parseInt(formData.weight)
    const goals = Number.parseInt(formData.goalsPerSeason)
    const assists = Number.parseInt(formData.assistsPerSeason)
    const plusMinus = Number.parseInt(formData.plusMinus)
    const totalPoints = goals + assists
    const pointsPerGame = totalPoints / 60 // Assuming ~60 game season

const leagueScores: { [key: string]: number } = {
      "NCAA Division I": 0,
      "NCAA Division III": 0,
      QMJHL: 0,
      OHL: 0,
      WHL: 0,
      USHL: 0,
      NAHL: 0,
      AJHL: 0,
      BCHL: 0,
      CCHL: 0,
      "U Sports": 0,
      ECHL: 0,
      AHL: 0,
      "European Pro": 0,
    }

// Realistic progression paths from Elite Prospects data and research showing only ~11% advance
    const progressionMatrix: { [key: string]: { [key: string]: number } } = {
      "U18/17 AAA": {
        QMJHL: 8, // Only top 8-10% make major junior
        OHL: 8,
        WHL: 8,
        USHL: 12,
        "NCAA Division III": 25,
        AJHL: 20,
        BCHL: 20,
      },
      RSEQ: {
        QMJHL: 5, // Very few RSEQ players make QMJHL (maybe 5% at most)
        "NCAA Division III": 30,
        "U Sports": 40, // Most go to U Sports
        AJHL: 15,
        CCHL: 20,
      },
      CSSHL: {
        BCHL: 15,
        WHL: 5,
        "NCAA Division III": 30,
        "U Sports": 35,
        AJHL: 20,
      },
      "Prep School": {
        "NCAA Division I": 25,
        "NCAA Division III": 40,
        USHL: 15,
        NAHL: 25,
      },
      "USA U18": {
        USHL: 35,
        "NCAA Division I": 30,
        QMJHL: 8,
        OHL: 8,
        WHL: 8,
      },
      "USA Jr. Tier 3": {
        NAHL: 25,
        "NCAA Division III": 45,
        USHL: 5,
        "NCAA Division I": 10,
      },
      "USA Jr. Tier 2": {
        USHL: 20,
        "NCAA Division I": 25,
        "NCAA Division III": 35,
        ECHL: 5,
      },
      "Canada Jr. tier 3": {
        AJHL: 25,
        BCHL: 25,
        CCHL: 25,
        QMJHL: 8,
        "U Sports": 40,
      },
      "Canada Jr. Tier 2": {
        QMJHL: 15,
        OHL: 15,
        WHL: 15,
        "NCAA Division I": 12,
        "U Sports": 35,
        BCHL: 20,
      },
      "Major Junior": {
        AHL: 8, // Only ~10% of CHL make AHL
        ECHL: 20,
        "NCAA Division I": 15, // New 2025 rule, but competitive
        "European Pro": 18,
        "U Sports": 30,
      },
      QMJHL: {
        AHL: 8,
        ECHL: 20,
        "NCAA Division I": 15, // New 2025 rule
        "European Pro": 18,
        "U Sports": 30,
      },
      OHL: {
        AHL: 10, // OHL slightly better NHL track record
        ECHL: 20,
        "NCAA Division I": 12,
        "European Pro": 18,
        "U Sports": 25,
      },
      WHL: {
        AHL: 9,
        ECHL: 20,
        "NCAA Division I": 12,
        "European Pro": 18,
        "U Sports": 25,
      },
      USHL: {
        "NCAA Division I": 55, // USHL is top NCAA feeder
        AHL: 3,
        ECHL: 8,
        "European Pro": 10,
      },
      NAHL: {
        USHL: 15,
        "NCAA Division I": 20,
        "NCAA Division III": 45,
        ECHL: 8,
      },
      AJHL: {
        "U Sports": 50, // Top Canadian Junior A mostly go U Sports
        "NCAA Division I": 15,
        "NCAA Division III": 25,
        BCHL: 12,
      },
      BCHL: {
        "U Sports": 45,
        "NCAA Division I": 20, // BCHL slightly better NCAA placement than AJHL
        "NCAA Division III": 25,
        ECHL: 5,
      },
      CCHL: {
        "U Sports": 55,
        "NCAA Division III": 25,
        "NCAA Division I": 10,
        ECHL: 5,
      },
    }

// Apply current league progression paths
    const currentLeague = formData.currentLeague
    if (progressionMatrix[currentLeague]) {
      Object.entries(progressionMatrix[currentLeague]).forEach(([league, baseScore]) => {
        leagueScores[league] = baseScore
      })
    }

// Age-based modifiers (based on Elite Prospects average ages)
    if (age >= 15 && age <= 17) {
      // Junior age
      leagueScores["QMJHL"] *= 1.3
      leagueScores["OHL"] *= 1.3
      leagueScores["WHL"] *= 1.3
      leagueScores["USHL"] *= 1.2
      leagueScores["NAHL"] *= 1.2
    } else if (age >= 18 && age <= 19) {
      // Peak junior / NCAA freshman age
      leagueScores["NCAA Division I"] *= 1.4
      leagueScores["USHL"] *= 1.3
      leagueScores["QMJHL"] *= 1.2
      leagueScores["OHL"] *= 1.2
      leagueScores["WHL"] *= 1.2
      leagueScores["U Sports"] *= 1.1
    } else if (age >= 20 && age <= 22) {
      // College / turning pro age (NCAA avg 19.5-22.3 years per Elite Prospects)
      leagueScores["NCAA Division I"] *= 1.5
      leagueScores["NCAA Division III"] *= 1.3
      leagueScores["U Sports"] *= 1.4
      leagueScores["ECHL"] *= 1.3
      leagueScores["AHL"] *= 1.2
      leagueScores["European Pro"] *= 1.2
    } else if (age >= 23) {
      // Pro age
      leagueScores["ECHL"] *= 1.5
      leagueScores["AHL"] *= 1.4
      leagueScores["European Pro"] *= 1.4
      leagueScores["U Sports"] *= 1.2
    }

// Physical attributes (based on Elite Prospects NCAA averages: 6'0"-6'1", 179-194 lbs)
    const heightInFeet = height / 12
    if (formData.position === "Forward") {
      if (height >= 72 && weight >= 180) {
        // 6'0"+, 180+ lbs - ideal for pro
        leagueScores["AHL"] *= 1.3
        leagueScores["ECHL"] *= 1.2
        leagueScores["QMJHL"] *= 1.2
        leagueScores["OHL"] *= 1.2
        leagueScores["WHL"] *= 1.2
      } else if (height >= 69 && weight >= 170) {
        // 5'9"+, 170+ lbs - NCAA range
        leagueScores["NCAA Division I"] *= 1.2
        leagueScores["NCAA Division III"] *= 1.2
        leagueScores["USHL"] *= 1.1
      } else {
        // Smaller forwards - skill leagues
        leagueScores["NCAA Division III"] *= 1.1
        leagueScores["U Sports"] *= 1.1
      }
    } else if (formData.position === "Defense") {
      if (height >= 72 && weight >= 185) {
        // 6'0"+, 185+ lbs - pro size
        leagueScores["AHL"] *= 1.4
        leagueScores["ECHL"] *= 1.3
        leagueScores["NCAA Division I"] *= 1.2
        leagueScores["QMJHL"] *= 1.2
        leagueScores["OHL"] *= 1.2
        leagueScores["WHL"] *= 1.2
      } else if (height >= 70 && weight >= 175) {
        // Average NCAA D size
        leagueScores["NCAA Division I"] *= 1.2
        leagueScores["USHL"] *= 1.1
      }
    } else if (formData.position === "Goalie") {
      if (height >= 73 && weight >= 185) {
        // 6'1"+ - modern goalie size
        leagueScores["NCAA Division I"] *= 1.3
        leagueScores["AHL"] *= 1.2
        leagueScores["ECHL"] *= 1.2
      }
    }

// Statistical performance (critical factor in Elite Prospects evaluations)
    if (formData.position !== "Goalie") {
      if (pointsPerGame >= 1.5) {
        // Elite production (1.5+ PPG)
        leagueScores["AHL"] *= 1.5
        leagueScores["NCAA Division I"] *= 1.4
        leagueScores["QMJHL"] *= 1.3
        leagueScores["OHL"] *= 1.3
        leagueScores["WHL"] *= 1.3
        leagueScores["ECHL"] *= 1.2
      } else if (pointsPerGame >= 1.0) {
        // Strong production (1.0-1.5 PPG)
        leagueScores["NCAA Division I"] *= 1.3
        leagueScores["USHL"] *= 1.3
        leagueScores["QMJHL"] *= 1.2
        leagueScores["OHL"] *= 1.2
        leagueScores["WHL"] *= 1.2
        leagueScores["ECHL"] *= 1.1
      } else if (pointsPerGame >= 0.6) {
        // Average production (0.6-1.0 PPG)
        leagueScores["NCAA Division I"] *= 1.1
        leagueScores["NCAA Division III"] *= 1.2
        leagueScores["USHL"] *= 1.1
        leagueScores["NAHL"] *= 1.2
      } else {
        // Below average production
        leagueScores["NCAA Division III"] *= 1.2
        leagueScores["NAHL"] *= 1.2
        leagueScores["U Sports"] *= 1.1
      }

// Plus/minus analysis
      if (plusMinus >= 20) {
        leagueScores["AHL"] *= 1.2
        leagueScores["NCAA Division I"] *= 1.2
      } else if (plusMinus >= 10) {
        leagueScores["NCAA Division I"] *= 1.1
        leagueScores["USHL"] *= 1.1
      } else if (plusMinus < -10) {
        // Poor defensive play
        leagueScores["ECHL"] *= 0.9
        leagueScores["AHL"] *= 0.8
      }
    }

// Position-specific modifiers
    if (formData.position === "Defense") {
      leagueScores["NCAA Division I"] *= 1.1 // NCAA values good defensemen
      leagueScores["U Sports"] *= 1.1
    } else if (formData.position === "Goalie") {
      leagueScores["NCAA Division I"] *= 1.2 // NCAA always needs goalies
      leagueScores["ECHL"] *= 1.1
    }

// Sort and get top 3
    const sortedLeagues = Object.entries(leagueScores)
      .filter(([, score]) => score > 0)
      .sort(([, a], [, b]) => b - a)
      .slice(0, 3)

const totalScore = sortedLeagues.reduce((sum, [, score]) => sum + score, 0)

const predictions: LeaguePrediction[] = sortedLeagues.map(([league, score], index) => {
      const probability = Math.round((score / totalScore) * 100)

let reasoning = ""
      const heightFeet = Math.floor(height / 12)
      const heightInches = height % 12
      const heightStr = `${heightFeet}'${heightInches}"`

if (index === 0) {
        reasoning = `Based on Elite Prospects data, players from ${currentLeague} with your profile (Age: ${age}, ${heightStr}/${weight}lbs, ${pointsPerGame.toFixed(
          2,
        )} PPG) most commonly progress to ${league}. Your statistics and physical attributes align with typical ${league} players.`
      } else if (index === 1) {
        reasoning = `Your ${formData.position.toLowerCase()} position and ${totalPoints} points (${pointsPerGame.toFixed(
          2,
        )} PPG) make ${league} a strong secondary pathway. Many players with similar profiles successfully transition here.`
      } else {
        reasoning = `${league} represents a realistic development option given your current level and the typical progression paths from ${currentLeague}. This league values players with your skill set and physical profile.`
      }

return {
        league,
        probability,
        reasoning,
        icon: index === 0 ? Award : index === 1 ? TrendingUp : Target,
      }
    })

setPredictions(predictions)
    setShowResults(true)
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    calculateProbabilities()
  }

const handleReset = () => {
    setFormData({
      age: "",
      position: "",
      height: "",
      weight: "",
      goalsPerSeason: "",
      assistsPerSeason: "",
      plusMinus: "",
      currentLeague: "",
    })
    setShowResults(false)
    setPredictions([])
  }

return (
    <div className="container mx-auto px-4 py-16">
      <div className="max-w-6xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-center mb-12"
        >
          <h1 className="text-4xl md:text-5xl font-bold mb-4 text-balance">Player Progression Probability Tool</h1>
          <p className="text-xl text-gray-400 max-w-3xl mx-auto text-pretty">
            Discover the top 3 leagues you're most likely to advance to based on your player profile, statistics, and
            current league. Our algorithm analyzes your data to predict your best pathway forward.
          </p>
        </motion.div>

<div className="grid lg:grid-cols-2 gap-8">
          {/* Input Form */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            <Card className="bg-zinc-900 border-zinc-800 p-8">
              <h2 className="text-2xl font-semibold mb-6 text-white">Enter Player Information</h2>

<form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="age" className="text-white">
                      Age *
                    </Label>
                    <Input
                      id="age"
                      type="number"
                      required
                      min="14"
                      max="25"
                      value={formData.age}
                      onChange={(e) => setFormData({ ...formData, age: e.target.value })}
                      className="bg-zinc-800 border-zinc-700 text-white"
                      placeholder="18"
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="position" className="text-white">
                      Position *
                    </Label>
                    <Select
                      value={formData.position}
                      onValueChange={(value) => setFormData({ ...formData, position: value })}
                    >
                      <SelectTrigger className="bg-zinc-800 border-zinc-700 text-white">
                        <SelectValue placeholder="Select" />
                      </SelectTrigger>
                      <SelectContent className="bg-zinc-800 border-zinc-700 text-white">
                        <SelectItem value="Forward">Forward</SelectItem>
                        <SelectItem value="Defense">Defense</SelectItem>
                        <SelectItem value="Goalie">Goalie</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="height" className="text-white">
                      Height (inches) *
                    </Label>
                    <Input
                      id="height"
                      type="number"
                      required
                      min="60"
                      max="84"
                      value={formData.height}
                      onChange={(e) => setFormData({ ...formData, height: e.target.value })}
                      className="bg-zinc-800 border-zinc-700 text-white"
                      placeholder="72"
                    />
                    <p className="text-xs text-gray-500">Example: 6'0" = 72 inches</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="weight" className="text-white">
                      Weight (lbs) *
                    </Label>
                    <Input
                      id="weight"
                      type="number"
                      required
                      min="100"
                      max="300"
                      value={formData.weight}
                      onChange={(e) => setFormData({ ...formData, weight: e.target.value })}
                      className="bg-zinc-800 border-zinc-700 text-white"
                      placeholder="185"
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="currentLeague" className="text-white">
                    Current League *
                  </Label>
                  <Select
                    value={formData.currentLeague}
                    onValueChange={(value) => setFormData({ ...formData, currentLeague: value })}
                  >
                    <SelectTrigger className="bg-zinc-800 border-zinc-700 text-white">
                      <SelectValue placeholder="Select your current league" />
                    </SelectTrigger>
                    <SelectContent className="bg-zinc-800 border-zinc-700 text-white max-h-[300px]">
                      <SelectItem value="U18/17 AAA">U18/17 AAA</SelectItem>
                      <SelectItem value="RSEQ">RSEQ</SelectItem>
                      <SelectItem value="Prep School">Prep School</SelectItem>
                      <SelectItem value="USA U18">USA U18</SelectItem>
                      <SelectItem value="USA Jr. Tier 3">USA Jr. Tier 3</SelectItem>
                      <SelectItem value="USA Jr. Tier 2">USA Jr. Tier 2</SelectItem>
                      <SelectItem value="Canada Jr. tier 3">Canada Jr. tier 3</SelectItem>
                      <SelectItem value="Canada Jr. Tier 2">Canada Jr. Tier 2</SelectItem>
                      <SelectItem value="Major Junior">Major Junior (CHL)</SelectItem>
                      <SelectItem value="QMJHL">QMJHL</SelectItem>
                      <SelectItem value="OHL">OHL</SelectItem>
                      <SelectItem value="WHL">WHL</SelectItem>
                      <SelectItem value="USHL">USHL</SelectItem>
                      <SelectItem value="NAHL">NAHL</SelectItem>
                      <SelectItem value="AJHL">AJHL</SelectItem>
                      <SelectItem value="BCHL">BCHL</SelectItem>
                      <SelectItem value="CCHL">CCHL</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-4">
                  <h3 className="text-lg font-semibold text-white">Season Statistics</h3>

<div className="grid grid-cols-3 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="goals" className="text-white">
                        Goals *
                      </Label>
                      <Input
                        id="goals"
                        type="number"
                        required
                        min="0"
                        value={formData.goalsPerSeason}
                        onChange={(e) => setFormData({ ...formData, goalsPerSeason: e.target.value })}
                        className="bg-zinc-800 border-zinc-700 text-white"
                        placeholder="25"
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="assists" className="text-white">
                        Assists *
                      </Label>
                      <Input
                        id="assists"
                        type="number"
                        required
                        min="0"
                        value={formData.assistsPerSeason}
                        onChange={(e) => setFormData({ ...formData, assistsPerSeason: e.target.value })}
                        className="bg-zinc-800 border-zinc-700 text-white"
                        placeholder="35"
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="plusMinus" className="text-white">
                        +/- *
                      </Label>
                      <Input
                        id="plusMinus"
                        type="number"
                        required
                        value={formData.plusMinus}
                        onChange={(e) => setFormData({ ...formData, plusMinus: e.target.value })}
                        className="bg-zinc-800 border-zinc-700 text-white"
                        placeholder="15"
                      />
                    </div>
                  </div>
                </div>

<div className="flex gap-4">
                  {showResults && (
                    <Button
                      type="button"
                      onClick={handleReset}
                      variant="outline"
                      className="flex-1 border-zinc-700 text-white hover:bg-zinc-800 bg-transparent"
                    >
                      Reset
                    </Button>
                  )}
                  <Button
                    type="submit"
                    className={`${showResults ? "flex-1" : "w-full"} bg-[#ff8c42] hover:bg-[#ff8c42]/90 text-white font-semibold`}
                  >
                    Calculate Probabilities
                  </Button>
                </div>
              </form>
            </Card>
          </motion.div>

{/* Results */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
          >
            <div className="space-y-6">
              <AnimatePresence mode="wait">
                {!showResults ? (
                  <motion.div
                    key="placeholder"
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    className="h-full flex items-center justify-center"
                  >
                    <Card className="bg-zinc-900 border-zinc-800 p-12 text-center">
                      <Target className="w-16 h-16 text-[#ff8c42] mx-auto mb-4" />
                      <h3 className="text-xl font-semibold text-white mb-2">Ready to Analyze</h3>
                      <p className="text-gray-400">
                        Fill out the form and click "Calculate Probabilities" to see your top 3 league predictions.
                      </p>
                    </Card>
                  </motion.div>
                ) : (
                  <motion.div key="results" initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-6">
                    <h2 className="text-2xl font-semibold text-white">Your Top 3 League Predictions</h2>

{predictions.map((prediction, index) => (
                      <motion.div
                        key={prediction.league}
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.4, delay: index * 0.1 }}
                      >
                        <Card
                          className={`bg-zinc-900 border-2 p-6 ${index === 0 ? "border-[#ff8c42]" : "border-zinc-800"}`}
                        >
                          <div className="flex items-start gap-4">
                            <div
                              className={`w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0 ${
                                index === 0 ? "bg-[#ff8c42]/20" : "bg-zinc-800"
                              }`}
                            >
                              <prediction.icon className={index === 0 ? "text-[#ff8c42]" : "text-gray-400"} size={24} />
                            </div>

<div className="flex-1">
                              <div className="flex items-center justify-between mb-2">
                                <h3 className="text-xl font-semibold text-white">{prediction.league}</h3>
                                {index === 0 && (
                                  <span className="bg-[#ff8c42]/20 text-[#ff8c42] px-3 py-1 rounded-full text-sm font-semibold">
                                    Best Match
                                  </span>
                                )}
                              </div>

<div className="mb-3">
                                <div className="flex items-center justify-between mb-1">
                                  <span className="text-sm text-gray-400">Probability</span>
                                  <span className="text-lg font-bold text-white">{prediction.probability}%</span>
                                </div>
                                <div className="w-full bg-zinc-800 rounded-full h-2">
                                  <motion.div
                                    initial={{ width: 0 }}
                                    animate={{ width: `${prediction.probability}%` }}
                                    transition={{ duration: 0.8, delay: index * 0.1 + 0.2 }}
                                    className={`h-2 rounded-full ${index === 0 ? "bg-[#ff8c42]" : "bg-gray-500"}`}
                                  />
                                </div>
                              </div>

<p className="text-gray-400 text-sm">{prediction.reasoning}</p>
                            </div>
                          </div>
                        </Card>
                      </motion.div>
                    ))}

<Card className="bg-zinc-900 border-zinc-800 p-6">
                      <h3 className="text-lg font-semibold text-white mb-3">What's Next?</h3>
                      <p className="text-gray-400 mb-4">
                        These predictions are based on your current profile and typical progression paths. Contact us to
                        discuss your specific goals and create a personalized development plan.
                      </p>
                      <Button className="w-full bg-[#ff8c42] hover:bg-[#ff8c42]/90 text-white" asChild>
                        <a href="/contact">Schedule a Consultation</a>
                      </Button>
                    </Card>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  )
}</article></body></html>