import React from "react";
import Image from "next/image";

// Service-specific data
const serviceDetailsData = {
  11: { // Health Insurance
    title: "Data Entry Services",
    description:
      "Keystone offers quality data entry services for various businesses and industries. We guarantee timely delivery without compromising the exceptional quality we are known for. Using the latest technologies, we ensure fast turnaround times and accurate results. Our commitment is to provide reliable, high-quality services at costs that remain affordable to all our clients.Our Data Entry Services include:",
    image: "/images/section/img-with-shape-6.jpg",
    features: [
      "Online Data Entry",
      "Offline Data Entry",
      "MS Access Data Entry",
      "Excel Data Entry",
      "XML Data Entry",
      "Web Data Entry",
      "Questionnaire Data Entry",
      "Insurance Claims Data Entry",
      "Data Capture",
      "Book Data Entry",
      "Online Typing Services",
      "XML Conversion",
      "Data Input Services",
      "Data Purchasing",
      "Medical Billing",
      "MSDS Data",
      "Data Keying Services"
    ]
  },
  12: { // Property Insurance
    title: "Data Conversion",
    description:
      "Keystone provides professional data conversion services, transforming your existing physical or digital data into the required format with zero risk of data loss. Our skilled team and proven technologies ensure accurate, high-quality results delivered on time.",
    image: "/images/section/img-with-shape-6.jpg",
    features: [
      "XML / XHTML Conversion",
      "PDF Conversion",
      "TEXT / TXT Conversion",
      "Document OCR Conversion",
      "Catalogue Conversion",
      "File Conversion",
      "HTML Conversion",
      "Audio Conversion",
      "Book Conversion",
      "XLS / CSV Conversion",
      "Image Conversion"
    ]
  },
  13: { // Business Insurance
    title: "Data Processing",
    description:
      "Keystone offers superior data processing services 365x24x7. We undertake all types of data processing services at affordable costs. We ensure advanced analysis, summary, and synthesis of complex and unsorted raw data. We undertake bulk data processing, providing valuable information out of raw and unstructured data. Our Data Processing Services include:",
    image: "/images/section/img-with-shape-6.jpg", 
    features: [
      "Word Processing",
      "Check Processing",
      "Form Processing",
      "OCR Cleanup",
      "Survey Processing",
      "Resume Processing",
      "Image Processing",
      "Catalogue Processing",
      "Credit Card Processing",
      "Medical Data Processing",
      "Insurance Claims Processing"
    ]
  },
  14: { // Life Insurance
    title: "Receipt Data Entry Services",
    description:
      "Keystone offers reliable Receipt Data Entry Services to help businesses maintain accurate digital records of their receipts. Our advanced technology and skilled professionals ensure high-quality data, consistency, and quick turnaround times to support your business operations.",
    image: "/images/section/img-with-shape-6.jpg",
    features: [] // no subcategories in brochure
  },
  15: { // Auto Insurance
    title: "Logistics Data Entry Services",
    description:
      "Keystone provides high-quality Logistics Data Entry Services to clients worldwide. We prioritize accuracy and timely delivery, ensuring you have reliable information at your fingertips to manage your logistics business efficiently. Our skilled team delivers superior data entry performance, handles bulk projects with ease, and offers services at affordable rates—allowing you to focus on timely deliveries. Our services in Logistics Data Entry Services include:",
    image: "/images/section/img-with-shape-6.jpg",
    features: [
      "Freight Bill Data Entry",
      "Freight Bill Processing",
      "Contract Management",
      "Bill of Lading Verification & Data Entry",
      "Invoice Processing"
    ]
  }
};

export default function ServiceDetails({ service }) {
  // Get service-specific data or fall back to default
  const serviceData = serviceDetailsData[service?.id] || {
    title: "INSURANCE SERVICES",
    description: "Keystone offers comprehensive insurance solutions tailored to your specific needs. Our experienced team provides personalized service and competitive rates to ensure you get the coverage that's right for you.",
    image: "/images/section/img-with-shape-6.jpg",
    features: [
      "Personalized Consultation",
      "Competitive Rates",
      "24/7 Customer Support",
      "Claims Assistance",
      "Policy Management",
      "Risk Assessment",
      "Coverage Reviews",
      "Multi-policy Discounts"
    ]
  };

  // Inline styles for the list container
  const listContainerStyles = {
    columns: 2,
    columnGap: '20px',
    listStyleType: 'disc',
    paddingLeft: '20px',
    marginLeft: '15px',
    display: 'block'
  };

  // Inline styles for list items
  const listItemStyles = {
    marginBottom: '8px',
    paddingLeft: '5px',
    breakInside: 'avoid',
    listStyleType: 'disc',
    display: 'list-item',
    listStylePosition: 'outside'
  };

  return (
    <>
      <div className="text-with-img-2 v2 tf-spacing-47">
        <div className="tf-container">
          <div className="row">
            <div className="col-xl-6">
              <div className="content">
                <h2 className="title">
                  {serviceData.title}
                </h2>
                <p className="description text-body-1 text_mono-gray-7 description-1">
                  {serviceData.description}
                </p>
                {serviceData.features.length > 0 && (
                  <ul 
                    className="description text-body-1 text_mono-gray-7 description-2"
                    style={listContainerStyles}
                  >
                    {serviceData.features.map((feature, index) => (
                      <li key={index} style={listItemStyles}>
                        {feature}
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            </div>
            <div className="col-xl-6">
              <div className="wrap-img mb-0">
                <div className="shape-img-bg mgl-auto">
                  <Image
                    alt="shape"
                    src={serviceData.image}
                    width={696}
                    height={598}
                  />
                  <div className="img-bg-shape">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      x="0px"
                      y="0px"
                      viewBox="0 0 288 288"
                    >
                      <linearGradient
                        id="imagewave"
                        x1="70.711%"
                        x2="0%"
                        y1="70.711%"
                        y2="0%"
                      >
                        <stop
                          className="stop-color"
                          offset="0%"
                          stopOpacity={1}
                        />
                        <stop
                          className="stop-color"
                          offset="100%"
                          stopOpacity={1}
                        />
                      </linearGradient>
                      <path fill="url(#imagewave)" d="">
                        <animate
                          repeatCount="indefinite"
                          attributeName="d"
                          dur="5s"
                          values="M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45
                          c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2
                          c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7
                          c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z;
                          
                          
                          M51,171.3c-6.1-17.7-15.3-17.2-20.7-32c-8-21.9,0.7-54.6,20.7-67.1c19.5-12.3,32.8,5.5,67.7-3.4C145.2,62,145,49.9,173,43.4
                          c12-2.8,41.4-9.6,60.2,6.6c19,16.4,16.7,47.5,16,57.7c-1.7,22.8-10.3,25.5-9.4,46.4c1,22.5,11.2,25.8,9.1,42.6
                          c-2.2,17.6-16.3,37.5-33.5,40.8c-22,4.1-29.4-22.4-54.9-22.6c-31-0.2-40.8,39-68.3,35.7c-17.3-2-32.2-19.8-37.3-34.8
                          C48.9,198.6,57.8,191,51,171.3z;
                          
                          M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45
                          c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2
                          c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7
                          c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z  "
                        />
                      </path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}