import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Search } from "lucide-react";
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
import { motion } from "framer-motion";
// Single-file React component page. Tailwind CSS assumed globally available.
// This is production-ready markup meant to be part of a Next.js / Vite app.
const sampleChartData = [
{ week: "Week 1", stress: 30 },
{ week: "Week 2", stress: 45 },
{ week: "Week 3", stress: 40 },
{ week: "Week 4", stress: 55 },
{ week: "Week 5", stress: 50 },
{ week: "Week 6", stress: 35 },
];
export default function MentalHealthFansPage() {
return (
<main className="min-h-screen bg-gradient-to-b from-neutral-50 to-white text-slate-900">
<header className="max-w-6xl mx-auto p-6 flex items-center justify-between">
<a href="#hero" className="flex items-center gap-3">
<svg width="40" height="40" viewBox="0 0 24 24" aria-hidden className="rounded-full p-1 bg-slate-900 text-white">
<path fill="currentColor" d="M12 2C7.58 2 4 5.58 4 10v6.5A3.5 3.5 0 0 0 7.5 20H9v1a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1h1.5A3.5 3.5 0 0 0 20 16.5V10c0-4.42-3.58-8-8-8z" />
</svg>
<span className="text-lg font-semibold">Fans & Minds</span>
</a>
<nav className="flex gap-4 items-center">
<a href="#impact" className="text-sm hover:underline">Impact</a>
<a href="#resources" className="text-sm hover:underline">Resources</a>
<a href="#stories" className="text-sm hover:underline">Stories</a>
<a href="#support" className="text-sm hover:underline">Get Help</a>
<button className="hidden md:flex items-center gap-2 px-3 py-2 rounded-md border">
<Search size={14} /> <span className="text-sm">Search</span>
</button>
</nav>
</header>
<section id="hero" className="bg-[url('/stadium-hero.jpg')] bg-cover bg-center py-20">
<div className="max-w-6xl mx-auto px-6">
<div className="bg-white/80 backdrop-blur-md rounded-2xl p-8 md:p-12 shadow-lg grid md:grid-cols-2 gap-8">
<div>
<motion.h1 className="text-3xl md:text-4xl font-extrabold leading-tight">
When the final whistle blows: <span className="text-sky-700">mental health</span> & the football fan experience
</motion.h1>
<p className="mt-4 text-slate-700">
A dedicated space for fans, loved ones and clubs to understand how football affects mood, identity and wellbeing — and to offer practical help.
</p>
<div className="mt-6 flex flex-wrap gap-3">
<Button asChild>
<a href="#resources">Find support</a>
</Button>
<Button variant="outline" asChild>
<a href="#stories">Read fan stories</a>
</Button>
</div>
</div>
<div className="flex flex-col gap-4">
<Card>
<CardContent>
<h3 className="font-semibold">Quick snapshot</h3>
<p className="text-sm text-slate-600 mt-2">How match results + social pressures can affect fans across a season.</p>
<div className="w-full h-40 mt-4">
<ResponsiveContainer width="100%" height="100%">
<LineChart data={sampleChartData}>
<XAxis dataKey="week" />
<YAxis />
<Tooltip />
<Line type="monotone" dataKey="stress" stroke="#0369a1" strokeWidth={3} dot={{ r: 3 }} />
</LineChart>
</ResponsiveContainer>
</div>
</CardContent>
</Card>
<div className="p-4 rounded-lg border">
<h4 className="font-medium">Tip</h4>
<p className="text-sm text-slate-600 mt-2">If a match leaves you feeling persistently low or anxious, try stepping away for 24 hours and reach out to a friend or support line.</p>
</div>
</div>
</div>
</div>
</section>
<section id="impact" className="max-w-6xl mx-auto p-6 mt-10">
<h2 className="text-2xl font-bold">Why football affects mental health</h2>
<p className="mt-3 text-slate-700">Being a fan is social, identity-driven and emotionally intense. Outcomes, rivalries and social validation can change mood, self-worth and behaviour — sometimes positively, sometimes negatively.</p>
<div className="grid md:grid-cols-3 gap-6 mt-6">
<article className="p-5 rounded-lg border">
<h3 className="font-semibold">Identity & Belonging</h3>
<p className="mt-2 text-sm text-slate-600">Fans often define part of themselves by their club. Wins boost pride; losses can feel personal.</p>
</article>
<article className="p-5 rounded-lg border">
<h3 className="font-semibold">Emotional volatility</h3>
<p className="mt-2 text-sm text-slate-600">High stakes matches and social pressure increase anxiety, irritability, and sleep disruption for some supporters.</p>
</article>
<article className="p-5 rounded-lg border">
<h3 className="font-semibold">Social amplifiers</h3>
<p className="mt-2 text-sm text-slate-600">Social media, fan groups and rivalries can amplify negative emotions — but they can also offer community and support.</p>
</article>
</div>
</section>
<section id="signs" className="bg-slate-50 py-8">
<div className="max-w-6xl mx-auto p-6">
<h2 className="text-xl font-bold">Signs a fan might be struggling</h2>
<ul className="mt-4 grid md:grid-cols-2 gap-3 list-inside">
<li>Constantly preoccupied with results and over-identifying losses</li>
<li>Sleep changes, appetite changes, or increased alcohol use after matches</li>
<li>Social withdrawal or hostility after defeats</li>
<li>Persistent low mood, anxiety, or thoughts of self-harm (seek urgent help)</li>
</ul>
</div>
</section>
<section id="coping" className="max-w-6xl mx-auto p-6 mt-8">
<h2 className="text-2xl font-bold">Coping strategies for fans</h2>
<div className="grid md:grid-cols-3 gap-6 mt-4">
<div className="p-5 rounded-lg border">
<h4 className="font-semibold">Mindful watching</h4>
<p className="text-sm mt-2 text-slate-600">Set boundaries: limit time on social media before/after matches and notice physical signals of stress.</p>
</div>
<div className="p-5 rounded-lg border">
<h4 className="font-semibold">Fan routines</h4>
<p className="text-sm mt-2 text-slate-600">Create healthy matchday routines (hydration, breaks, post-match wind-down) to reduce emotional spikes.</p>
</div>
<div className="p-5 rounded-lg border">
<h4 className="font-semibold">Talk it through</h4>
<p className="text-sm mt-2 text-slate-600">Share feelings with trusted friends, family, or support groups — vulnerability is strength, not weakness.</p>
</div>
</div>
</section>
<section id="resources" className="max-w-6xl mx-auto p-6 mt-8">
<h2 className="text-2xl font-bold">Resources & support</h2>
<p className="mt-2 text-slate-700">Below are practical resources fans can use. Add local hotlines and club-specific initiatives where available.</p>
<div className="grid md:grid-cols-2 gap-6 mt-4">
<Card>
<CardContent>
<h3 className="font-semibold">Support organisations</h3>
<ul className="mt-3 text-sm text-slate-600 list-disc list-inside">
<li><a className="underline" href="#">Samaritans (UK) — 116 123</a></li>
<li><a className="underline" href="#">Mind — Mental health info & local services</a></li>
<li><a className="underline" href="#">CALM — Campaign Against Living Miserably</a></li>
</ul>
</CardContent>
</Card>
<Card>
<CardContent>
<h3 className="font-semibold">Club & community ideas</h3>
<ol className="mt-3 text-sm text-slate-600 list-decimal list-inside">
<li>Designate mental health officers within supporter groups</li>
<li>Run workshops on coping with loss and managing rivalry online</li>
<li>Offer quiet zones at stadiums and clear signposting to support</li>
</ol>
</CardContent>
</Card>
</div>
</section>
<section id="stories" className="max-w-6xl mx-auto p-6 mt-8">
<h2 className="text-2xl font-bold">Fan stories</h2>
<p className="text-slate-700 mt-2">Real experiences from supporters who learned to balance passion and wellbeing.</p>
<div className="grid md:grid-cols-3 gap-6 mt-6">
<article className="p-4 rounded-lg border">
<h4 className="font-semibold">"It felt like a personal failure"</h4>
<p className="text-sm mt-2 text-slate-600">A fan describes how relegation affected their mood and the small steps they took to seek support.</p>
</article>
<article className="p-4 rounded-lg border">
<h4 className="font-semibold">"Matchday rituals saved me"</h4>
<p className="text-sm mt-2 text-slate-600">Routines around hydration, pre-match walks and supportive fan friends improved resilience.</p>
</article>
<article className="p-4 rounded-lg border">
<h4 className="font-semibold">"I found purpose in helping others"</h4>
<p className="text-sm mt-2 text-slate-600">After volunteering with a fan-support initiative, one supporter rebuilt confidence and connection.</p>
</article>
</div>
</section>
<section id="support" className="bg-gradient-to-r from-white to-slate-50 py-10">
<div className="max-w-6xl mx-auto p-6 grid md:grid-cols-2 gap-8">
<div>
<h2 className="text-2xl font-bold">Need help now?</h2>
<p className="mt-3 text-slate-700">If you or someone else is at immediate risk, contact emergency services first. For emotional support, use the hotlines below or reach out to a professional.</p>
<ul className="mt-4 text-sm text-slate-700 list-inside">
<li>Samaritans (UK) — 116 123 (24/7)</li>
<li>Mind — 0300 123 3393</li>
<li>Local health services and A&E in crises</li>
</ul>
</div>
<form className="p-6 rounded-lg border bg-white/60">
<h3 className="font-semibold">Connect with a peer volunteer</h3>
<label className="block text-sm mt-4">Name</label>
<input className="w-full mt-2 p-2 rounded border" type="text" name="name" aria-label="Your name" />
<label className="block text-sm mt-4">Email</label>
<input className="w-full mt-2 p-2 rounded border" type="email" name="email" aria-label="Your email" />
<label className="block text-sm mt-4">Message</label>
<textarea className="w-full mt-2 p-2 rounded border" rows={4} name="message" aria-label="Message" />
<div className="mt-4">
<Button type="submit">Send</Button>
</div>
<p className="text-xs text-slate-500 mt-3">This form is a front-end demo — implement a backend to capture messages.</p>
</form>
</div>
</section>
<footer className="max-w-6xl mx-auto p-6 text-sm text-slate-500">
<div className="flex items-center justify-between">
<p>© {new Date().getFullYear()} Fans & Minds — Not a replacement for professional care.</p>
<nav className="flex gap-3">
<a href="#" className="hover:underline">Privacy</a>
<a href="#" className="hover:underline">Accessibility</a>
</nav>
</div>
</footer>
</main>
);
}
