Untitled

import React from 'react';
import { PieChart, Pie, Cell, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, LineChart, Line } from 'recharts';
import { Users, Calendar, Award, Heart, TrendingUp, Target, Smile } from 'lucide-react';

const InfographicProject = () => {
  // Data for participation chart
  const participationData = [
    { name: 'פתח תקווה', total: 39, youth: 25, senior: 14 },
    { name: 'באר שבע', total: 40, youth: 30, senior: 10 },
    { name: 'מודיעין', total: 45, youth: 30, senior: 15 },
  ];

  // Data for before/after loneliness
  const lonelinessData = [
    { name: 'לפני התוכנית', value: 3.81 },
    { name: 'כיום', value: 2.38 },
  ];

  // Data for satisfaction rates
  const satisfactionData = [
    { name: 'יחס מקצועי', value: 5.54 },
    { name: 'תחושת חיוניות', value: 5.25 },
    { name: 'הבנה בין-דורית', value: 4.91 },
    { name: 'מעורבות קהילתית', value: 4.95 },
    { name: 'תכנים', value: 4.88 },
  ];

  // Data for meetings
  const meetingsData = [
    { name: 'פתח תקווה', value: 12 },
    { name: 'באר שבע', value: 16 },
    { name: 'מודיעין', value: 9 },
  ];

  // Colors for charts
  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8'];
  const RCOLOR = '#FF6B6B';
  const GCOLOR = '#4BC0C0';
  const PURPLE = '#8884d8';

  return (
    <div className="w-full bg-white p-4 rounded-lg shadow">
      {/* Header */}
      <div className="text-center mb-8">
        <h1 className="text-3xl font-bold text-purple-800 mb-2 text-right">סבבתא ומטב - גשר בין דורי</h1>
        <p className="text-lg text-gray-600 mb-4 text-right">נתוני סיכום פרויקט דצמבר 2024</p>
        <div className="border-b-2 border-purple-400 w-3/4 mx-auto mb-4"></div>
      </div>

      {/* Key Achievements */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
        <div className="bg-blue-50 p-4 rounded-lg shadow text-center flex flex-col items-center">
          <Users size={40} className="text-blue-500 mb-2" />
          <p className="text-2xl font-bold text-blue-800">124</p>
          <p className="text-gray-600">משתתפים קבועים</p>
        </div>
        <div className="bg-green-50 p-4 rounded-lg shadow text-center flex flex-col items-center">
          <Calendar size={40} className="text-green-500 mb-2" />
          <p className="text-2xl font-bold text-green-800">37</p>
          <p className="text-gray-600">מפגשים שבוצעו</p>
        </div>
        <div className="bg-yellow-50 p-4 rounded-lg shadow text-center flex flex-col items-center">
          <Award size={40} className="text-yellow-500 mb-2" />
          <p className="text-2xl font-bold text-yellow-800">37.5%</p>
          <p className="text-gray-600">ירידה בתחושת בדידות</p>
        </div>
      </div>

      {/* Participation by Location */}
      <div className="mb-12 text-right">
        <h2 className="text-xl font-bold text-gray-800 mb-3">משתתפים לפי מוקד פעילות</h2>
        <ResponsiveContainer width="100%" height={300}>
          <BarChart
            data={participationData}
            margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
          >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Bar dataKey="youth" name="בני נוער" stackId="a" fill="#8884d8" />
            <Bar dataKey="senior" name="אזרחים ותיקים" stackId="a" fill="#82ca9d" />
          </BarChart>
        </ResponsiveContainer>
      </div>

      {/* Satisfaction Rates & Loneliness Reduction */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
        <div className="text-right">
          <h2 className="text-xl font-bold text-gray-800 mb-3">מדדי שביעות רצון (1-6)</h2>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart
              data={satisfactionData}
              layout="vertical"
              margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
            >
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis type="number" domain={[0, 6]} />
              <YAxis dataKey="name" type="category" width={100} />
              <Tooltip />
              <Bar dataKey="value" fill={PURPLE} radius={[0, 4, 4, 0]}>
                {satisfactionData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </div>
        <div className="text-right">
          <h2 className="text-xl font-bold text-gray-800 mb-3">הפחתת תחושת בדידות (1-6)</h2>
          <div className="flex items-center justify-center h-full">
            <ResponsiveContainer width="100%" height={300}>
              <BarChart
                data={lonelinessData}
                margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis domain={[0, 6]} />
                <Tooltip />
                <Bar dataKey="value" fill={RCOLOR} radius={[4, 4, 0, 0]}>
                  {lonelinessData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={index === 0 ? RCOLOR : GCOLOR} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>

      {/* Number of Meetings & Testimonials */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
        <div className="text-right">
          <h2 className="text-xl font-bold text-gray-800 mb-3">מפגשים שהתקיימו</h2>
          <ResponsiveContainer width="100%" height={300}>
            <PieChart>
              <Pie
                data={meetingsData}
                cx="50%"
                cy="50%"
                labelLine={true}
                label={({ name, percent }) => `${name}: ${Math.round(percent * 100)}%`}
                outerRadius={100}
                fill="#8884d8"
                dataKey="value"
              >
                {meetingsData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                ))}
              </Pie>
              <Tooltip />
            </PieChart>
          </ResponsiveContainer>
        </div>
        <div className="text-right bg-purple-50 p-4 rounded-lg shadow">
          <h2 className="text-xl font-bold text-gray-800 mb-3 flex items-center">
            <Smile className="ml-2 text-purple-500" />
            מה אומרים עלינו
          </h2>
          <div className="space-y-4">
            <div className="p-3 bg-white rounded-lg shadow-sm">
              <p className="text-gray-700 text-sm">"המפגשים החזירו לי תחושת שייכות לקהילה"</p>
              <p className="text-right text-gray-500 text-xs">- משתתפת בת 80, פתח תקווה</p>
            </div>
            <div className="p-3 bg-white rounded-lg shadow-sm">
              <p className="text-gray-700 text-sm">"מצאתי חברים חדשים וגיליתי כמה אפשר ללמוד מדור אחר"</p>
              <p className="text-right text-gray-500 text-xs">- נער בן 16, מודיעין</p>
            </div>
            <div className="p-3 bg-white rounded-lg shadow-sm">
              <p className="text-gray-700 text-sm">"הפעילויות מחזירות לי את תחושת המשמעות והערך"</p>
              <p className="text-right text-gray-500 text-xs">- אזרח ותיק, באר שבע</p>
            </div>
          </div>
        </div>
      </div>

      {/* Impact Summary */}
      <div className="bg-gradient-to-r from-purple-100 to-blue-100 p-6 rounded-lg shadow-md text-right mb-8">
        <h2 className="text-xl font-bold text-gray-800 mb-4 flex items-center">
          <TrendingUp className="ml-2 text-purple-600" />
          השפעה והצלחות התכנית
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="bg-white/70 p-3 rounded-lg flex items-center">
            <Target className="text-blue-500 ml-2 flex-shrink-0" />
            <div>
              <p className="font-bold text-gray-800">92.3%</p>
              <p className="text-sm text-gray-600">שביעות רצון מהיחס המקצועי</p>
            </div>
          </div>
          <div className="bg-white/70 p-3 rounded-lg flex items-center">
            <Heart className="text-red-500 ml-2 flex-shrink-0" />
            <div>
              <p className="font-bold text-gray-800">87.5%</p>
              <p className="text-sm text-gray-600">דיווחו על תחושת חיוניות מוגברת</p>
            </div>
          </div>
          <div className="bg-white/70 p-3 rounded-lg flex items-center">
            <Users className="text-green-500 ml-2 flex-shrink-0" />
            <div>
              <p className="font-bold text-gray-800">81.8%</p>
              <p className="text-sm text-gray-600">שיפור בהבנה הבין-דורית</p>
            </div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <div className="text-center text-gray-500 text-sm border-t pt-4">
        <p>פרויקט משותף של עמותת סבבתא ומטב עמותה לשירותי טיפול ורווחה</p>
        <p>2024 © כל הזכויות שמורות</p>
      </div>
    </div>
  );
};

export default InfographicProject;