import Image from 'next/image';
import Link from 'next/link';
import { productCategories } from '@/data/site-config';

export const metadata = {
  title: 'ท่อ | Pipe - ดีลพลัสเทค',
  description: 'จำหน่ายท่อทุกประเภท ท่อ PPR ท่อ HDPE ท่อ PVC ท่อ uPVC ท่อไซเลอร์ คุณภาพสูง ราคาถูก',
};

// Pipe category product IDs
const pipeProductIds = [
  'ppr-elephant',
  'thai-ppr',
  'poloplast',
  'hdpe',
  'upvc',
  'pvc',
  'syler',
  'xylent',
  'ppr-welder',
];

export default function PipePage() {
  const pipeProducts = productCategories.filter(p => pipeProductIds.includes(p.id));

  return (
    <div className="pt-32 pb-16">
      <div className="container mx-auto px-4">
        {/* Breadcrumb */}
        <nav className="mb-6">
          <ol className="flex items-center gap-2 text-sm">
            <li>
              <Link href="/" className="text-secondary-500 hover:text-primary-600">
                หน้าแรก
              </Link>
            </li>
            <li className="text-secondary-400">/</li>
            <li className="text-primary-600 font-medium">ท่อ | Pipe</li>
          </ol>
        </nav>

        {/* Header */}
        <div className="mb-12">
          <h1 className="text-3xl md:text-4xl font-bold text-secondary-900 mb-4">
            ท่อ | Pipe
          </h1>
          <p className="text-secondary-600 text-lg max-w-3xl">
            จำหน่ายท่อทุกประเภท ท่อ PPR ตราช้าง SCG ท่อ HDPE PE80/PE100 ท่อ PVC ท่อ uPVC 
            ท่อไซเลอร์ ท่อระบายน้ำไซเลนท์ คุณภาพสูง มาตรฐาน มอก. ราคาถูก
          </p>
        </div>

        {/* Products Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {pipeProducts.map((product) => (
            <Link
              key={product.id}
              href={product.href}
              className="card group"
            >
              <div className="relative aspect-video bg-secondary-100">
                <Image
                  src={product.image}
                  alt={product.name}
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                />
              </div>
              <div className="p-4">
                <span className="text-xs text-primary-600 font-semibold">
                  {product.nameEn}
                </span>
                <h2 className="text-lg font-bold text-secondary-900 mt-1 group-hover:text-primary-600 transition-colors">
                  {product.name}
                </h2>
                <p className="text-sm text-secondary-600 mt-2 line-clamp-2">
                  {product.shortDescription || product.description}
                </p>
              </div>
            </Link>
          ))}
        </div>

        {/* CTA */}
        <div className="mt-12 text-center">
          <p className="text-secondary-600 mb-4">
            ต้องการข้อมูลเพิ่มเติมหรือขอใบเสนอราคา?
          </p>
          <div className="flex justify-center gap-4">
            <Link href="/contact-us" className="btn-primary">
              ติดต่อเรา
            </Link>
            <a href="tel:090-555-1415" className="btn-outline">
              โทร 090-555-1415
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}
