"use client"

import React, { useState } from "react"
import Image from "next/image"
import Link from "next/link"

import service1 from "@/../public/images/kinetic/service1.png"
import service2 from "@/../public/images/kinetic/service2.png"
import service3 from "@/../public/images/kinetic/service3.png"
import service4 from "@/../public/images/kinetic/service4.png"
import service5 from "@/../public/images/kinetic/service5.png"
import service6 from "@/../public/images/kinetic/service6.png"
import service8 from "@/../public/images/kinetic/service8.png"
import service9 from "@/../public/images/kinetic/service9.png"

const ServicesDetailsContent: React.FC = () => {
    // To open the lightbox change the value of the "toggler" prop.
    const [toggler, setToggler] = useState(false)

    return (
        <>
            <div className="pt-100 pb-70 bg-custom-gray">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-4 col-sm-6">
                            <div className="service-card-one bg-white center">
                                <div className="icon">
                                    {/* <i className="bx bx-conversation"></i> */}
                                    <div
                                        className="bg-custom-gray"
                                        style={{
                                            height: "65px",
                                            width: "65px",
                                            textAlign: "center",
                                            lineHeight: "65px",
                                            borderRadius: "50%",
                                            fontSize: "30px",
                                            color: "#4a8457",
                                            display: "inline-block",
                                            marginBottom: "25px",
                                        }}
                                    >
                                        <Image
                                            style={{ width: "30px", height: "30px" }}
                                            src={service2}
                                            alt="service2"
                                        />
                                    </div>
                                    <i className="bx bxs-badge-check check-icon"></i>
                                </div>
                                <h3>
                                    {/* <Link href="/services/details">Fuel Refining</Link> */}
                                    <div>Fuel Refining</div>
                                </h3>
                                <p>
                                    Petroleum companies process crude oil to produce various fuel products, such as
                                    gasoline, diesel, jet fuel, and heating oil, meeting diverse energy demands across
                                    multiple sectors.
                                </p>
                            </div>
                        </div>

                        <div className="col-lg-4 col-sm-6">
                            <div className="service-card-one bg-white center">
                                <div className="icon">
                                    <div
                                        className="bg-custom-gray"
                                        style={{
                                            height: "65px",
                                            width: "65px",
                                            textAlign: "center",
                                            lineHeight: "65px",
                                            borderRadius: "50%",
                                            fontSize: "30px",
                                            color: "#4a8457",
                                            display: "inline-block",
                                            marginBottom: "25px",
                                        }}
                                    >
                                        <Image
                                            style={{ width: "30px", height: "30px" }}
                                            src={service6}
                                            alt="service7"
                                        />
                                    </div>
                                    <i className="bx bxs-badge-check check-icon"></i>
                                </div>
                                <h3>
                                    {/* <Link href="/services/details">Environmental Services</Link> */}
                                    <div>Environmental Services</div>
                                </h3>
                                <p>
                                    Petrol companies may offer environmental services such as fuel spill cleanup, soil
                                    remediation, and pollution control to mitigate the environmental impact of their
                                    operations.
                                </p>
                            </div>
                        </div>

                        <div className="col-lg-4 col-sm-6">
                            <div className="service-card-one bg-white center">
                                <div className="icon">
                                    <div
                                        className="bg-custom-gray"
                                        style={{
                                            height: "65px",
                                            width: "65px",
                                            textAlign: "center",
                                            lineHeight: "65px",
                                            borderRadius: "50%",
                                            fontSize: "30px",
                                            color: "#4a8457",
                                            display: "inline-block",
                                            marginBottom: "25px",
                                        }}
                                    >
                                        <Image
                                            style={{ width: "30px", height: "30px" }}
                                            src={service8}
                                            alt="service8"
                                        />
                                    </div>
                                    <i className="bx bxs-badge-check check-icon"></i>
                                </div>
                                <h3>
                                    {/* <Link href="/services/details">Fuel Delivery</Link> */}
                                    <div>Fuel Delivery</div>
                                </h3>
                                <p>
                                    Some petroleum companies provide fuel delivery services to commercial and industrial
                                    clients, supplying bulk quantities of gasoline or diesel to meet the high-demand
                                    needs of these sectors.
                                </p>
                            </div>
                        </div>

                        <div className="col-lg-4 col-sm-6">
                            <div className="service-card-one bg-white center">
                                <div className="icon">
                                    <div
                                        className="bg-custom-gray"
                                        style={{
                                            height: "65px",
                                            width: "65px",
                                            textAlign: "center",
                                            lineHeight: "65px",
                                            borderRadius: "50%",
                                            fontSize: "30px",
                                            color: "#4a8457",
                                            display: "inline-block",
                                            marginBottom: "25px",
                                        }}
                                    >
                                        <Image
                                            style={{ width: "30px", height: "30px" }}
                                            src={service5}
                                            alt="service5"
                                        />
                                    </div>
                                    <i className="bx bxs-badge-check check-icon"></i>
                                </div>
                                <h3>
                                    {/* <Link href="/services/details">Fleet Management</Link> */}
                                    <div>Fleet Management</div>
                                </h3>
                                <p>
                                    Petrol companies may provide fleet management services to help businesses optimize
                                    their vehicle operations, reduce fuel costs, and improve efficiency.
                                </p>
                            </div>
                        </div>

                        <div className="col-lg-4 col-sm-6">
                            <div className="service-card-one bg-white center">
                                <div className="icon">
                                    <div
                                        className="bg-custom-gray"
                                        style={{
                                            height: "65px",
                                            width: "65px",
                                            textAlign: "center",
                                            lineHeight: "65px",
                                            borderRadius: "50%",
                                            fontSize: "30px",
                                            color: "#4a8457",
                                            display: "inline-block",
                                            marginBottom: "25px",
                                        }}
                                    >
                                        <Image
                                            style={{ width: "30px", height: "30px" }}
                                            src={service9}
                                            alt="service9"
                                        />
                                    </div>
                                    <i className="bx bxs-badge-check check-icon"></i>
                                </div>
                                <h3>
                                    {/* <Link href="/services/details">Fuel Card Programs</Link> */}
                                    <div>Fuel Card Programs</div>
                                </h3>
                                <p>
                                    Many petrol companies offer fuel card programs that provide discounts and rewards to
                                    businesses and individuals for purchasing fuel at their stations.
                                </p>
                            </div>
                        </div>

                        <div className="col-lg-4 col-sm-6">
                            <div className="service-card-one bg-white center">
                                <div className="icon">
                                    <div
                                        className="bg-custom-gray"
                                        style={{
                                            height: "65px",
                                            width: "65px",
                                            textAlign: "center",
                                            lineHeight: "65px",
                                            borderRadius: "50%",
                                            fontSize: "30px",
                                            color: "#4a8457",
                                            display: "inline-block",
                                            marginBottom: "25px",
                                        }}
                                    >
                                        <Image
                                            style={{ width: "30px", height: "30px" }}
                                            src={service4}
                                            alt="service4"
                                        />
                                    </div>
                                    <i className="bx bxs-badge-check check-icon"></i>
                                </div>
                                <h3>
                                    {/* <Link href="/services/details">Lubricants and Additives</Link> */}
                                    <div>Lubricants and Additives</div>
                                </h3>
                                <p>
                                    Petrol companies produce and sell lubricants, motor oils, and fuel additives
                                    designed to improve engine performance and prolong the life of vehicles.
                                </p>
                            </div>
                        </div>

                        <div className="col-lg-4 col-sm-6">
                            <div className="service-card-one bg-white center">
                                <div className="icon">
                                    <div
                                        className="bg-custom-gray"
                                        style={{
                                            height: "65px",
                                            width: "65px",
                                            textAlign: "center",
                                            lineHeight: "65px",
                                            borderRadius: "50%",
                                            fontSize: "30px",
                                            color: "#4a8457",
                                            display: "inline-block",
                                            marginBottom: "25px",
                                        }}
                                    >
                                        <Image
                                            style={{ width: "30px", height: "30px" }}
                                            src={service1}
                                            alt="service1"
                                        />
                                    </div>
                                    <i className="bx bxs-badge-check check-icon"></i>
                                </div>
                                <h3>
                                    {/* <Link href="/services/details">Alternative Fuels</Link> */}
                                    <div>Alternative Fuels</div>
                                </h3>
                                <p>
                                    Some petrol companies are investing in alternative fuels such as biofuels, hydrogen,
                                    and electric vehicle charging infrastructure to meet the growing demand for
                                    sustainable transportation options.
                                </p>
                            </div>
                        </div>

                        <div className="col-lg-4 col-sm-6">
                            <div className="service-card-one bg-white center">
                                <div className="icon">
                                    <div
                                        className="bg-custom-gray"
                                        style={{
                                            height: "65px",
                                            width: "65px",
                                            textAlign: "center",
                                            lineHeight: "65px",
                                            borderRadius: "50%",
                                            fontSize: "30px",
                                            color: "#4a8457",
                                            display: "inline-block",
                                            marginBottom: "25px",
                                        }}
                                    >
                                        <Image
                                            style={{ width: "30px", height: "30px" }}
                                            src={service3}
                                            alt="service3"
                                        />
                                    </div>
                                    <i className="bx bxs-badge-check check-icon"></i>
                                </div>
                                <h3>
                                    {/* <Link href="/services/details">Gas Station Services</Link> */}
                                    <div>Gas Station Services</div>
                                </h3>
                                <p>
                                    Petrol companies operate gas stations where customers can purchase fuel for their
                                    vehicles. These stations often provide additional services such as car washes,
                                    convenience stores, and restrooms.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default ServicesDetailsContent