import { Button } from "@/components/ui/button";
import { TestimonialCard } from "@/components/TestimonialCard";
import { MessageSquare, CheckCircle } from "lucide-react";
import carparkHero from "@/assets/victoria-way-carpark.jpg";
import { useNavigate } from "react-router-dom";
import { usePetitions } from "@/state";

const STATIC_TESTEMONIES = [
	{
		name: "Marne Keefe",
		comment:
			"My daughter & her Fiancé moved into Enterprise Place last October, they saved for a long time & one of the deciding factors on purchasing their first home was Victoria Way car park. My daughter has a degenerative back disorder & ME. Since having to park in the Peacocks car park & walk through Woking after work she has been jeered at, whistled at & narrowly avoided being kicked in the face by a youth to name just a few very upsetting situations she has been confronted with. She feels unsafe & anxious, it has become a major upset to her & her partner.",
		date: "1 week ago",
	},
	{
		name: "John Costa",
		comment:
			"I used to use Victoria Way carpark everyday. My wife would come home and park her car there as she drivers to work everyday. Now she has to walk through town centre every time she goes and comes from work. Sometimes at night. This is not safe, not is it what we signed up for when we purchased our flat in Enterprise Place.",
		date: "1 week ago",
	},
	{
		name: "Rio Keefe",
		comment:
			"I am a resident of Enterprise Place. I go to work early and come home late, it is not safe for me - a young woman - to be forced to walk through the town center and main roads in the dark every night to get to my home. Not to mention the toll it takes on me with my chronic illness. I have been shouted at, stared at and almost assaulted having to do this in the last seven months.",
		date: "1 week ago",
	},
];

const Index = () => {
	const navigate = useNavigate();

	const { signatures } = usePetitions();

	return (
		<div className="min-h-screen bg-background">
			<section className="relative min-h-[700px] flex items-center justify-center text-center overflow-hidden py-16">
				<div
					className="absolute inset-0 bg-cover bg-center"
					style={{ backgroundImage: `url(${carparkHero})` }}
				/>
				<div className="absolute inset-0 bg-gradient-to-r from-primary/90 to-primary/70" />

				<div className="relative z-10 max-w-4xl mx-auto px-6">
					<h1 className="text-5xl md:text-6xl font-bold text-primary-foreground mb-6">
						Petition Successful
					</h1>

					<div className="bg-card/95 backdrop-blur-sm rounded-lg p-8 shadow-[var(--shadow-elevated)] mb-6">
						<CheckCircle className="w-16 h-16 text-accent mx-auto mb-4" />
						<h2 className="text-3xl font-bold text-primary mb-4">
							Thank You All for Your Support!
						</h2>
						<p className="text-lg text-foreground leading-relaxed mb-4">
							Enterprise Place and Woking Borough Council have reached an
							agreement to allow residents to use Duke's Court car park. We
							welcome this change, and thank the council and Enterprise Place
							Residents Association for all their work.
						</p>
						<p className="text-lg text-foreground leading-relaxed">
							I thank each and every single one of you for your support in
							signing this petition. It helped more than you know.
						</p>
						{signatures.length > 0 && (
							<p className="text-muted-foreground mt-4 font-semibold">
								{signatures.length} people signed this petition
							</p>
						)}
					</div>
				</div>
			</section>

			<section className="py-16 px-6 bg-muted">
				<div className="max-w-6xl mx-auto">
					<h2 className="text-4xl font-bold text-primary mb-4 text-center">
						Voices That Made a Difference
					</h2>
					<p className="text-xl text-muted-foreground mb-12 text-center">
						Stories from Woking residents who helped make this change happen
					</p>
					<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
						<TestimonialCard {...STATIC_TESTEMONIES[0]} />
						<TestimonialCard {...STATIC_TESTEMONIES[1]} />
						<TestimonialCard {...STATIC_TESTEMONIES[2]} />
					</div>
					<div className="text-center">
						<Button
							size="lg"
							onClick={() => navigate("/testimonies")}
							className="gap-2 bg-primary text-primary-foreground hover:bg-primary/90"
						>
							<MessageSquare className="w-5 h-5" />
							Read All {signatures.length > 0 && `${signatures.length} `}
							Testimonies
						</Button>
					</div>
				</div>
			</section>

			<footer className="py-8 px-6 bg-card border-t border-border">
				<div className="max-w-6xl mx-auto text-center text-muted-foreground">
					<p>
						© 2025 Victoria Way Carpark Campaign | For the residents and
						workers of Woking
					</p>
				</div>
			</footer>
		</div>
	);
};

export default Index;
