import React from 'react';
import IconOne from '../../assets/images/icon/reward.png';
import IconTwo from '../../assets/images/icon/assign-chores.png';
import IconThree from '../../assets/images/icon/financial-education.png';
import IconFour from '../../assets/images/icon/family-connect.png';

function ServiceItem({ icon, title, description, index }) {
  return (
    <div
      className="service-item text-center mt-30 wow animated fadeInUp"
      data-wow-duration="2000ms"
      data-wow-delay={`${200 * (index + 1)}ms`}
      style={{ cursor: "default" }}
    >
      <div className="icon">
        <img src={icon} alt={title} width={70} height={70} loading="lazy" />
      </div>
      <h4 className="appie-title">{title}</h4>
      <p>{description}</p>
    </div>
  );
}

function ServicesHomeOne({ className }) {

  return (
    <section
      className={`appie-service-area pt-20 pb-50 ${className}`}
      id="service"
    >
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-lg-8">
            <div className="appie-section-title text-center">
              <h3 className="appie-title">
              Set Chores, Set Goals and <br /> Rewards Accomplishments
              </h3>
            </div>
          </div>
        </div>
        <div className="row">
          {serviceItems.map(({ icon, title, description }, index) => (
            <div key={index} className="col-lg-3 col-md-6">
              <ServiceItem
                icon={icon}
                title={title}
                description={description}
                index={index}
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default ServicesHomeOne;

const serviceTitle = `Set Chores, Set Goals and Rewards Accomplishments`;
const serviceItems = [
  {
    icon: IconOne,
    title: 'Reward Goals Met',
    description: 'Set goals together and reward accomplishment',
  },
  {
    icon: IconTwo,
    title: 'Assign Regular Chores',
    description: 'Organize essential regular chores to be done',
  },
  {
    icon: IconThree,
    title: 'Financial Education',
    description: 'Get Kids start early on money management',
  },
  {
    icon: IconFour,
    title: 'Family Connect',
    description: 'Connect family, share accomplishments with friends',
  },
];