import { Card, CardContent } from "@/components/ui/card";
import { Timeline, TimelineItem } from "@/components/ui/timeline";
import { DollarSign, Calendar, Building, Hammer, Home, Paintbrush } from "lucide-react";


export default function DonorEventSlides() {
const phases = [
{
title: "Initial Stage – Project Management & Communication",
icon: <Home className="w-6 h-6 text-blue-600" />,
timeline: "1 month",
tasks: [
"Hire local Project Manager",
"Install Starlink internet",
"Establish HQ communications with U.S. directors",
],
cost: "USD $12K–$15K (GH¢ 204K–255K)",
impact: "Ensures strong management and real-time communication before construction begins.",
},
{
title: "Phase 1 – Preliminaries & Site Preparation",
icon: <Hammer className="w-6 h-6 text-green-600" />,
timeline: "1–2 months",
tasks: ["Contractor mobilization", "Permits and approvals", "Land clearing & leveling"],
cost: "USD $12K (GH¢ 203K)",
impact: "Gets the project moving — land ready and contractor engaged.",
},
{
title: "Phase 2 – Foundations & Substructure",
icon: <Building className="w-6 h-6 text-indigo-600" />,
timeline: "2–3 months",
tasks: ["Excavation & trenches", "Concrete foundations", "Ground base walls"],
cost: "USD $23K (GH¢ 396K)",
impact: "Lays the permanent foundation for the Youth Center.",
},
{
title: "Phase 3 – Main Building Structure",
icon: <Building className="w-6 h-6 text-orange-600" />,
timeline: "6–8 months",
tasks: ["Columns, beams, slabs, staircases", "Block walls", "Plumbing & electrical", "Doors, windows, security"],
cost: "USD $96K (GH¢ 1.64M)",
impact: "The Youth Center visibly rises from the ground.",
},
{
title: "Phase 4 – Retaining Wall & External Works",
icon: <Hammer className="w-6 h-6 text-red-600" />,
timeline: "1–2 months",
tasks: ["Retaining wall construction for safety & drainage"],
cost: "USD $19K (GH¢ 317K)",
impact: "Ensures the site is safe, stable, and long-lasting.",
},
{
title: "Phase 5 – Finishing & Furnishing",
icon: <Paintbrush className="w-6 h-6 text-purple-600" />,
timeline: "2–3 months",
tasks: ["Painting, tiling, glazing", "Final electrical work", "Furniture, AV equipment"],
cost: "USD $16K+ (GH¢ 255K+)",
impact: "Makes the center usable, welcoming, and ready for ministry.",
},
];


return (
<div className="p-6 space-y-8">
<h1 className="text-3xl font-bold text-center text-blue-800">
Donor-Friendly Project Plan – New Takoradi Youth Center
</h1>
<p className="text-center text-lg text-gray-700">
Total Estimated Cost: <b>USD $165,000</b> (GH¢ 2.8M) <br />
Timeline: <b>13–19 months</b>
</p>


<Timeline>
{phases.map((phase, idx) => (
<TimelineItem key={idx}>
<Card className="shadow-lg border-l-4 border-blue-600">
<CardContent className="p-6 space-y-3">
<div className="flex items-center space-x-3">
{phase.icon}
<h2 className="text-xl font-semibold text-gray-800">{phase.title}</h2>
</div>
<p className="text-sm text-gray-600 flex items-center">
<Calendar className="w-4 h-4 mr-2 text-gray-500" /> {phase.timeline}
</p>
<ul className="list-disc pl-6 text-gray-700">
{phase.tasks.map((task, tIdx) => (
<li key={tIdx}>{task}</li>
))}
</ul>