import Image from 'next/image';

export const metadata = {
  title: 'บริการของเรา',
  description: 'บริการครบวงจร จำหน่ายวัสดุท่อ ให้คำปรึกษา ออกแบบระบบ และติดตั้ง',
};

const services = [
  {
    title: 'จำหน่ายวัสดุท่อ',
    description: 'จำหน่ายท่อพีพีอาร์ ท่อ HDPE ท่อ PVC วาล์ว และอุปกรณ์ต่อท่อครบวงจร สินค้าคุณภาพ ราคาแข่งขันได้',
    image: '/images/2021/03/ppr-pipe_000C.jpg',
  },
  {
    title: 'ให้คำปรึกษา',
    description: 'ทีมงานมืออาชีพพร้อมให้คำปรึกษาเกี่ยวกับการเลือกวัสดุท่อที่เหมาะสมกับโครงการของคุณ',
    image: '/images/2021/03/hdpe-pipe_000C.jpg',
  },
  {
    title: 'ออกแบบระบบ',
    description: 'บริการออกแบบระบบท่อน้ำ ระบบดับเพลิง และระบบปรับอากาศ โดยวิศวกรผู้เชี่ยวชาญ',
    image: '/images/2021/03/valve_000C.jpg',
  },
  {
    title: 'จัดส่งสินค้า',
    description: 'บริการจัดส่งสินค้าทั่วประเทศ รวดเร็ว ปลอดภัย มีประกันความเสียหาย',
    image: '/images/2021/03/hdpe-welding_000C-1.jpg',
  },
];

export default function ServicesPage() {
  return (
    <div className="pt-32 pb-16">
      <div className="container mx-auto px-4">
        {/* Hero */}
        <div className="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-bold text-secondary-900 mb-4">
            บริการ<span className="text-primary-600">ของเรา</span>
          </h1>
          <p className="text-xl text-secondary-600 max-w-2xl mx-auto">
            บริการครบวงจรตั้งแต่การให้คำปรึกษาจนถึงการจัดส่งสินค้า
          </p>
        </div>

        {/* Services Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {services.map((service, index) => (
            <div key={index} className="card overflow-hidden group">
              <div className="relative h-64 bg-secondary-100">
                <Image
                  src={service.image}
                  alt={service.title}
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-secondary-900/80 to-transparent" />
                <div className="absolute bottom-0 left-0 right-0 p-6">
                  <h3 className="text-2xl font-bold text-white">{service.title}</h3>
                </div>
              </div>
              <div className="p-6">
                <p className="text-secondary-600">{service.description}</p>
              </div>
            </div>
          ))}
        </div>

        {/* CTA */}
        <div className="mt-16 bg-secondary-800 rounded-2xl p-8 md:p-12 text-center">
          <h2 className="text-3xl font-bold text-white mb-4">
            พร้อมเริ่มโครงการของคุณ?
          </h2>
          <p className="text-secondary-300 mb-6 max-w-xl mx-auto">
            ติดต่อเราวันนี้เพื่อรับคำปรึกษาและใบเสนอราคาฟรี
          </p>
          <a href="/contact-us" className="btn-primary">
            ติดต่อเรา
          </a>
        </div>
      </div>
    </div>
  );
}
