import React from 'react';
import toolData from './toolData.json'; // Adjust the path according to your file structure

const AppIntroduction = () => {
  return (
    <div className="app-introduction my-8 mx-auto w-full max-w-6xl border border-blue-400 rounded-lg shadow-lg overflow-hidden mx-2">
      <div className="flex flex-col p-6 bg-blue-50 text-center">
        <h2 className="text-3xl font-semibold text-blue-900">What We Did With the Tool</h2>
        <p className="mt-4 text-lg text-gray-600">
          Here's a glimpse of what's possible with our tool. Your possibilities are endless!
        </p>
      </div>
      
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 gap-4 p-6">
        {toolData.map((item, index) => (
          <div key={index} className="flex flex-col items-center space-y-4  border border-gray-300 rounded-lg shadow-sm p-4 hover:shadow-md transition-shadow duration-300 ease-in-out">
            <span className="font-bold ">{item.title}</span>
            <div className="flex space-x-2">
              <a href={item.visitLink} className="text-sm bg-blue-600 hover:bg-blue-700 text-white py-1.5 px-4 rounded-lg transition-colors duration-150 ease-in-out">See results</a>
              <a href={item.purchaseLink} className="text-sm bg-green-500 hover:bg-green-600 text-white py-1.5 px-4 rounded-lg transition-colors duration-150 ease-in-out">Purchase</a>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default AppIntroduction;