w-312356-main/src/components/ExperienceBlock.tsx

import React, { useState } from 'react';

const ExperienceBlock = () => {
  const [imgError, setImgError] = useState(false);
  return (
    <div className="section-padding">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <div className="flex justify-center">
            <div className="rounded-2xl overflow-hidden shadow-2xl bg-gray-100 flex items-center justify-center w-80 h-64 md:w-96 md:h-72">
              {!imgError ? (
                <img
                  src="/placeholder.svg"
                  alt="Diagnostics Innovation"
                  className="w-full h-full object-cover"
                  onError={() => setImgError(true)}
                />
              ) : (
                <img
                  src="/placeholder.svg"
                  alt="Placeholder"
                  className="w-32 h-32 object-contain opacity-60"
                />
              )}
            </div>
          </div>
          <div>
            <h2 className="text-4xl font-bold text-gray-900 mb-4">+25 Years of Experience in Diagnostics Innovation</h2>
            <ul className="text-lg text-gray-700 space-y-3">
              <li>• R&D excellence in rare and neglected diseases</li>
              <li>• Recognized in international biotech forums</li>
              <li>• Innovation in digital health delivery (Malaysia, Vietnam, etc.)</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ExperienceBlock;