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

export default function HomePage() {
  // Featured products with proper images - manually selected for variety
  const featuredProducts = [
    productCategories.find(p => p.id === 'ppr-elephant')!,
    productCategories.find(p => p.id === 'hdpe')!,
    productCategories.find(p => p.id === 'valve')!,
    productCategories.find(p => p.id === 'grilles')!,
    productCategories.find(p => p.id === 'thermobreak')!,
    productCategories.find(p => p.id === 'upvc')!,
  ];

  return (
    <>
      {/* Hero Section */}
      <section className="relative h-[70vh] min-h-[500px] bg-secondary-900">
        <div className="absolute inset-0 bg-gradient-to-r from-secondary-900 via-secondary-900/90 to-secondary-900/60 z-10" />
        <Image
          src="/images/2021/03/ppr-pipe_000C.jpg"
          alt="ท่อพีพีอาร์คุณภาพสูง"
          fill
          className="object-cover opacity-50"
          priority
        />
        <div className="relative z-20 container mx-auto px-4 h-full flex items-center">
          <div className="max-w-2xl">
            <span className="inline-block px-4 py-2 bg-primary-600 text-white font-semibold mb-4 rounded">
              ผู้เชี่ยวชาญด้านระบบท่อและ HVAC
            </span>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
              วัสดุท่อ อุปกรณ์ HVAC
              <span className="text-primary-400 block">และฉนวนหุ้มท่อ</span>
            </h1>
            <p className="text-lg md:text-xl text-secondary-200 mb-8">
              จำหน่ายและติดตั้งท่อ PPR, ท่อ HDPE, กริลแอร์, เทอร์โมเบรค และอุปกรณ์ระบบท่อครบวงจร พร้อมบริการให้คำปรึกษาจากทีมมืออาชีพ
            </p>
            <div className="flex flex-wrap gap-4">
              <Link href="/product" className="btn-primary">
                ดูสินค้าทั้งหมด
              </Link>
              <Link href="/contact-us" className="btn-outline border-white text-white hover:bg-white hover:text-secondary-900">
                ขอใบเสนอราคา
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-16 bg-secondary-800">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center p-6">
              <div className="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                </svg>
              </div>
              <h3 className="text-xl font-bold text-white mb-2">สินค้าคุณภาพ</h3>
              <p className="text-secondary-300">
                สินค้าทุกชิ้นผ่านมาตรฐานคุณภาพ พร้อมรับประกัน
              </p>
            </div>
            <div className="text-center p-6">
              <div className="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <h3 className="text-xl font-bold text-white mb-2">จัดส่งรวดเร็ว</h3>
              <p className="text-secondary-300">
                จัดส่งสินค้าทั่วประเทศ รวดเร็วและปลอดภัย
              </p>
            </div>
            <div className="text-center p-6">
              <div className="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg>
              </div>
              <h3 className="text-xl font-bold text-white mb-2">บริการหลังการขาย</h3>
              <p className="text-secondary-300">
                ทีมงานพร้อมให้คำปรึกษาและดูแลอย่างต่อเนื่อง
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Highlight Products Section */}
      <section className="py-16 bg-secondary-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-secondary-900 mb-4">
              สินค้า<span className="text-primary-600">เด่น</span>
            </h2>
            <p className="text-secondary-600 text-lg">ผลิตภัณฑ์คุณภาพสูงที่ได้รับความนิยม</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* PPR Pipe */}
            <Link href="/ท่อพีพีอาร์ตราช้าง" className="group relative overflow-hidden rounded-2xl aspect-[4/5] bg-secondary-900">
              <Image
                src="/images/2021/03/ppr-pipe_000C.jpg"
                alt="ท่อ PPR ตราช้าง"
                fill
                className="object-cover group-hover:scale-110 transition-transform duration-500"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-secondary-900 via-secondary-900/40 to-transparent" />
              <div className="absolute bottom-0 left-0 right-0 p-6">
                <span className="inline-block px-3 py-1 bg-primary-600 text-white text-sm font-semibold rounded mb-3">ท่อ | Pipe</span>
                <h3 className="text-2xl font-bold text-white mb-2">ท่อ PPR ตราช้าง</h3>
                <p className="text-secondary-200 text-sm mb-4">ท่อพีพีอาร์คุณภาพสูง SCG มาตรฐาน DIN 8077/8078 ทนแรงดัน 20 บาร์ อายุการใช้งาน 50+ ปี</p>
                <span className="inline-flex items-center gap-2 text-primary-400 font-semibold group-hover:text-primary-300 transition-colors">
                  ดูรายละเอียด
                  <svg className="w-4 h-4 group-hover:translate-x-2 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                  </svg>
                </span>
              </div>
            </Link>

            {/* Grilles / Air Diffuser */}
            <Link href="/หัวจ่ายลม-กริล" className="group relative overflow-hidden rounded-2xl aspect-[4/5] bg-secondary-900">
              <Image
                src="/images/2021/03/grilles_000C.jpg"
                alt="กริลแอร์พลาสติก"
                fill
                className="object-cover group-hover:scale-110 transition-transform duration-500"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-secondary-900 via-secondary-900/40 to-transparent" />
              <div className="absolute bottom-0 left-0 right-0 p-6">
                <span className="inline-block px-3 py-1 bg-primary-600 text-white text-sm font-semibold rounded mb-3">อุปกรณ์ปรับอากาศ</span>
                <h3 className="text-2xl font-bold text-white mb-2">กริลแอร์พลาสติก</h3>
                <p className="text-secondary-200 text-sm mb-4">หัวจ่ายลมพลาสติก Ball Jet สำหรับระบบปรับอากาศ ทนทาน กะทัดรัด ติดตั้งง่าย</p>
                <span className="inline-flex items-center gap-2 text-primary-400 font-semibold group-hover:text-primary-300 transition-colors">
                  ดูรายละเอียด
                  <svg className="w-4 h-4 group-hover:translate-x-2 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                  </svg>
                </span>
              </div>
            </Link>

            {/* Thermobreak */}
            <Link href="/เทอร์โมเบรค-thermobreak" className="group relative overflow-hidden rounded-2xl aspect-[4/5] bg-secondary-900">
              <Image
                src="/images/2025/01/thermobrek_cover_000C.jpg"
                alt="เทอร์โมเบรค Thermobreak"
                fill
                className="object-cover group-hover:scale-110 transition-transform duration-500"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-secondary-900 via-secondary-900/40 to-transparent" />
              <div className="absolute bottom-0 left-0 right-0 p-6">
                <span className="inline-block px-3 py-1 bg-primary-600 text-white text-sm font-semibold rounded mb-3">ฉนวนหุ้มท่อ</span>
                <h3 className="text-2xl font-bold text-white mb-2">เทอร์โมเบรค</h3>
                <p className="text-secondary-200 text-sm mb-4">ฉนวนหุ้มท่อ Polyolefin Foam มาตรฐาน FM/UL สำหรับ HVAC ประหยัดพลังงาน</p>
                <span className="inline-flex items-center gap-2 text-primary-400 font-semibold group-hover:text-primary-300 transition-colors">
                  ดูรายละเอียด
                  <svg className="w-4 h-4 group-hover:translate-x-2 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                  </svg>
                </span>
              </div>
            </Link>
          </div>
        </div>
      </section>

      {/* Featured Products Section */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="section-title">
              สินค้า<span className="text-primary-600">แนะนำ</span>
            </h2>
            <p className="section-subtitle">
              ผลิตภัณฑ์คุณภาพสูงที่ได้รับความนิยมจากลูกค้า
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {featuredProducts.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 className="absolute top-4 left-4">
                    <span className="industrial-badge">{product.nameEn}</span>
                  </div>
                </div>
                <div className="p-6">
                  <h3 className="text-xl font-bold text-secondary-900 mb-2 group-hover:text-primary-600 transition-colors">
                    {product.name}
                  </h3>
                  <p className="text-secondary-600 text-sm mb-4">
                    {product.shortDescription || product.description.slice(0, 100) + '...'}
                  </p>
                  <span className="text-primary-600 font-semibold flex items-center gap-2">
                    ดูรายละเอียด
                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                  </span>
                </div>
              </Link>
            ))}
          </div>

          <div className="text-center mt-12">
            <Link href="/product" className="btn-secondary">
              ดูสินค้าทั้งหมด
            </Link>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-primary-600">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
            พร้อมเริ่มโครงการของคุณ?
          </h2>
          <p className="text-primary-100 text-lg mb-8 max-w-2xl mx-auto">
            ติดต่อเราวันนี้เพื่อรับคำปรึกษาและใบเสนอราคาฟรี
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <a
              href={`tel:${siteConfig.phone}`}
              className="btn-secondary bg-white text-primary-600 hover:bg-primary-50"
            >
              โทรหาเรา: {siteConfig.phone}
            </a>
            <Link href="/contact-us" className="btn-outline border-white text-white hover:bg-white hover:text-primary-600">
              ส่งข้อความ
            </Link>
          </div>
        </div>
      </section>

      {/* About Section */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="section-title mb-6">
                เกี่ยวกับ<span className="text-primary-600">{siteConfig.name}</span>
              </h2>
              <p className="text-secondary-600 mb-4">
                {siteConfig.nameTh} เป็นผู้เชี่ยวชาญด้านวัสดุท่อและอุปกรณ์ระบบท่อครบวงจร 
                ด้วยประสบการณ์มากกว่า 10 ปี เรามุ่งมั่นให้บริการสินค้าคุณภาพสูง 
                พร้อมคำแนะนำจากทีมงานมืออาชีพ
              </p>
              <p className="text-secondary-600 mb-6">
                เราจำหน่ายท่อพีพีอาร์ ท่อ HDPE ท่อ PVC วาล์ว และอุปกรณ์ต่อท่อหลากหลายประเภท
                รวมถึงอุปกรณ์แขวนท่อและอุปกรณ์ปรับอากาศ
              </p>
              <Link href="/about-us" className="btn-primary">
                เรียนรู้เพิ่มเติม
              </Link>
            </div>
            <div className="relative aspect-video bg-secondary-100 rounded-xl overflow-hidden">
              <Image
                src="/images/2021/03/hdpe-pipe_000C.jpg"
                alt="เกี่ยวกับดีลพลัสเทค"
                fill
                className="object-cover"
              />
            </div>
          </div>
        </div>
      </section>
    </>
  );
}
