import { Card, CardContent } from './ui/card';
import { Button } from './ui/button';
import { useEffect, useState } from 'react';
import { getNodes } from '../services/drupalAPI';
import { normalizeDrupalUrl } from '../services/drupalAPI';
import { getIcon } from '../utils/lucideIcon';
import { ArrowRight, Stethoscope, Activity, Headphones, Brain, Ear, Settings, Zap, Target } from 'lucide-react';

 function Services() {

  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
  getNodes(
    'services', [{ fieldName: 'field_media_image', mode: 'media', mediaSourceField: 'field_media_image' }]
  )
    .then(setItems)
    .catch(console.error)
    .finally(() => setLoading(false));
  }, []);
const getImageUrl = (item) => {
  const resolved = item.field_media_image_resolved;
  if (!resolved) return null;
  const url = Array.isArray(resolved)
    ? resolved[0]?.file?.attributes?.uri?.url
    : resolved.file?.attributes?.uri?.url;
  return normalizeDrupalUrl(url);
};
 if (loading) return <p>Loading...</p>;
 

  return (
    <section id="services" className="py-16 lg:py-24 bg-white">

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        {/* Header */}
        <div className="text-center mb-16">
          <h2 className="text-3xl lg:text-4xl font-bold text-[#383838] mb-4">
            Our Services Include
          </h2>

          <p className="text-lg text-gray-600 max-w-4xl mx-auto">
            Comprehensive hearing healthcare solutions with cutting-edge technology.
          </p>
        </div>


        {/* Core Services (HOME + PAGE) */}
        <div className="grid lg:grid-cols-2 gap-8 mb-20">

          {items.map((service) => {

           

            return (
              <Card
                key={service.id}
                className="group hover:shadow-2xl transition-all duration-500 border-0 shadow-lg overflow-hidden"
              >

                <div className="relative h-64 overflow-hidden">

                  <img
                    src={getImageUrl(service)}
                    alt={service.attributes.title}
                    crossOrigin="use-credentials"
                    onError={(e) => { e.target.style.display = 'none'; }}
                    className="w-full h-full object-cover"
                  />

                  <div className="absolute top-6 left-6 w-14 h-14 bg-[#8ac642] rounded-full flex items-center justify-center">
                    {getIcon(service.attributes.field_lucide_icon, { className: "w-7 h-7 text-white" })}
                  </div>

                </div>

                <CardContent className="p-8">

                  <h3 className="text-2xl font-bold text-[#383838] mb-2">
                    {service.attributes.title}
                  </h3>

                  <p className="text-[#8ac642] mb-4">
                    {service.attributes.field_subtitle}
                  </p>

                  <div className="text-gray-600 mb-6">
                    {service.attributes.body?.processed ? <div dangerouslySetInnerHTML={{ __html: service.attributes.body.processed }} /> : 'No description available.'}
                  </div>

                  <div className="grid grid-cols-2 gap-3">

                    {service.attributes.field_features?.map((feature,index)=>(
                      <div
                        key={index}
                        className="flex items-center space-x-2 text-sm"
                      >

                        <div className="w-2 h-2 bg-[#8ac642] rounded-full"/>

                        <span>{feature}</span>

                      </div>
                    ))}

                  </div>

                </CardContent>

              </Card>
            );

          })}

        </div>

      </div>

    </section>
  );

}
export default Services;