
import React from 'react';
import { MapPin, Star, TrendingUp, Users, Award, Briefcase } from 'lucide-react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

const Infographic = () => {
  const companies = [
    { name: "H & Care Incorp", feature: "Leading PCD pharma company" },
    { name: "Nilrise Pharmaceutical", feature: "Fast-growing franchise opportunities" },
    { name: "Lichem Pharmaceuticals", feature: "WHO and GMP certified" },
    { name: "Swiss Pharma Pvt. Ltd", feature: "Established since 1958" },
    { name: "Torrent Pharma", feature: "World-class manufacturing facilities" },
  ];

  const growthData = [
    { year: 2020, value: 40 },
    { year: 2022, value: 60 },
    { year: 2024, value: 85 },
    { year: 2026, value: 100 },
    { year: 2028, value: 120 },
    { year: 2030, value: 130 },
  ];

  return (
    <div className="bg-blue-50 p-8 font-sans">
      <h1 className="text-3xl font-bold text-center mb-6 text-blue-800">Top PCD Pharma Companies in Ahmedabad</h1>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <div className="bg-white p-6 rounded-lg shadow-md">
          <h2 className="text-xl font-semibold mb-4 text-blue-700 flex items-center">
            <MapPin className="mr-2" /> Ahmedabad Pharma Industry
          </h2>
          <ul className="list-disc list-inside space-y-2 text-gray-700">
            <li>4th largest economic state in India</li>
            <li>33% share in drug manufacturing</li>
            <li>28% share in drug exports</li>
            <li>Over 360+ pharmaceutical industries</li>
          </ul>
        </div>
        <div className="bg-white p-6 rounded-lg shadow-md">
          <h2 className="text-xl font-semibold mb-4 text-blue-700 flex items-center">
            <TrendingUp className="mr-2" /> Industry Growth
          </h2>
          <p className="text-gray-700 mb-4">India's pharma sector expected to reach <span className="font-bold text-green-600">$130 billion by 2030</span></p>
          <ResponsiveContainer width="100%" height={200}>
            <LineChart data={growthData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="year" />
              <YAxis />
              <Tooltip />
              <Line type="monotone" dataKey="value" stroke="#8884d8" />
            </LineChart>
          </ResponsiveContainer>
          <p className="text-xs text-center mt-2 text-gray-500">Projected growth in billion USD</p>
        </div>
      </div>
      
      <div className="bg-white p-6 rounded-lg shadow-md mb-8">
        <h2 className="text-2xl font-semibold mb-6 text-blue-700 flex items-center justify-center">
          <Star className="mr-2" /> Top 5 PCD Pharma Companies
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {companies.map((company, index) => (
            <div key={index} className="border p-4 rounded-md">
              <h3 className="font-semibold text-lg mb-2 text-blue-600">{company.name}</h3>
              <p className="text-sm text-gray-600">{company.feature}</p>
            </div>
          ))}
        </div>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-white p-6 rounded-lg shadow-md flex flex-col items-center">
          <Users className="text-blue-500 mb-2" size={40} />
          <h3 className="text-lg font-semibold mb-2 text-center">Population</h3>
          <p className="text-center text-gray-700">Ahmedabad population: <br /><span className="font-bold text-blue-600">8,854,445</span> (2024 est.)</p>
        </div>
        <div className="bg-white p-6 rounded-lg shadow-md flex flex-col items-center">
          <Award className="text-blue-500 mb-2" size={40} />
          <h3 className="text-lg font-semibold mb-2 text-center">Quality Standards</h3>
          <p className="text-center text-gray-700">Most companies are WHO-GMP certified</p>
        </div>
        <div className="bg-white p-6 rounded-lg shadow-md flex flex-col items-center">
          <Briefcase className="text-blue-500 mb-2" size={40} />
          <h3 className="text-lg font-semibold mb-2 text-center">Investment</h3>
          <p className="text-center text-gray-700">Minimum investment: <br /><span className="font-bold text-green-600">₹9,000 - ₹90,000</span></p>
        </div>
      </div>
      
      <div className="mt-8 text-center text-sm text-gray-500">
        <p>Source: Industry reports and company websites (2024)</p>
        <p>Created by [Your Company Name] - For more information, visit [your-website.com]</p>
      </div>
    </div>
  );
};

export default Infographic;


Top PCD Pharma Companies in Ahmedabad Infographic