import Link from 'next/link';

export const metadata = {
  title: 'Sales Engineer - วิศวกรฝ่ายขาย - ดีลพลัสเทค',
  description: 'สมัครงานตำแหน่ง Sales Engineer ที่ดีลพลัสเทค รับผิดชอบการขายและให้คำปรึกษาด้านเทคนิคสำหรับผลิตภัณฑ์ท่อและอุปกรณ์ระบบท่อ',
};

export default function SalesEngineerPage() {
  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>
              <Link href="/join-us" className="text-secondary-500 hover:text-primary-600">
                ร่วมงานกับเรา
              </Link>
            </li>
            <li className="text-secondary-400">/</li>
            <li className="text-primary-600 font-medium">Sales Engineer</li>
          </ol>
        </nav>

        {/* Header */}
        <div className="mb-8">
          <div className="flex flex-wrap gap-2 mb-4">
            <span className="px-3 py-1 bg-secondary-100 text-secondary-700 rounded-full text-sm">
              Full-time
            </span>
            <span className="px-3 py-1 bg-secondary-100 text-secondary-700 rounded-full text-sm">
              กรุงเทพมหานคร
            </span>
            <span className="px-3 py-1 bg-primary-100 text-primary-700 rounded-full text-sm">
              เจรจาต่อรอง
            </span>
          </div>
          <h1 className="text-3xl md:text-4xl font-bold text-secondary-900 mb-2">
            Sales Engineer
          </h1>
          <p className="text-xl text-primary-600">วิศวกรฝ่ายขาย</p>
        </div>

        {/* Content */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2">
            {/* Job Description */}
            <div className="bg-white rounded-xl p-6 shadow-card mb-6">
              <h2 className="text-xl font-bold text-secondary-900 mb-4">
                รายละเอียดงาน
              </h2>
              <p className="text-secondary-600 mb-4">
                รับผิดชอบการขายและให้คำปรึกษาด้านเทคนิคสำหรับผลิตภัณฑ์ท่อและอุปกรณ์ระบบท่อ 
                ให้บริการลูกค้าทั้งในส่วนของโครงการและงานอุตสาหกรรม
              </p>
              <h3 className="font-semibold text-secondary-900 mb-2">หน้าที่ความรับผิดชอบ:</h3>
              <ul className="list-disc list-inside text-secondary-600 space-y-2 mb-4">
                <li>เยี่ยมเยียนลูกค้าและนำเสนอผลิตภัณฑ์</li>
                <li>ให้คำปรึกษาและแก้ปัญหาด้านเทคนิคให้ลูกค้า</li>
                <li>จัดทำใบเสนอราคาและติดตามการขาย</li>
                <li>ประสานงานกับทีมงานภายในเพื่อส่งมอบงาน</li>
                <li>ศึกษาและติดตามข้อมูลตลาดและคู่แข่ง</li>
              </ul>
            </div>

            {/* Requirements */}
            <div className="bg-white rounded-xl p-6 shadow-card mb-6">
              <h2 className="text-xl font-bold text-secondary-900 mb-4">
                คุณสมบัติ
              </h2>
              <ul className="list-disc list-inside text-secondary-600 space-y-2">
                <li>ปริญญาตรี สาขาวิศวกรรมเครื่องกล วิศวกรรมโยธา หรือสาขาที่เกี่ยวข้อง</li>
                <li>มีประสบการณ์อย่างน้อย 1-3 ปี ในตำแหน่ง Sales Engineer</li>
                <li>มีความรู้ด้านท่อและอุปกรณ์ระบบท่อจะได้รับการพิจารณาเป็นพิเศษ</li>
                <li>สามารถขับรถและมีใบขับขี่</li>
                <li>มีทัศนคติดี กระตือรือร้น และสามารถทำงานเป็นทีมได้</li>
                <li>มีทักษะการสื่อสารและการเจรจาที่ดี</li>
              </ul>
            </div>

            {/* Benefits */}
            <div className="bg-white rounded-xl p-6 shadow-card">
              <h2 className="text-xl font-bold text-secondary-900 mb-4">
                สวัสดิการ
              </h2>
              <ul className="list-disc list-inside text-secondary-600 space-y-2">
                <li>เงินเดือนที่เป็นธรรมตามความสามารถ</li>
                <li>โบนัสประจำปี</li>
                <li>ประกันสังคม</li>
                <li>ประกันสุขภาพ</li>
                <li>ค่าเดินทางและค่าน้ำมัน</li>
                <li>วันหยุดประจำสัปดาห์ (เสาร์-อาทิตย์)</li>
                <li>วันลาป่วย วันลาพักร้อน</li>
              </ul>
            </div>
          </div>

          {/* Sidebar */}
          <div className="lg:col-span-1">
            <div className="bg-primary-50 rounded-xl p-6 sticky top-24">
              <h3 className="text-lg font-bold text-secondary-900 mb-4">
                สนใจสมัครงาน?
              </h3>
              <p className="text-secondary-600 mb-4">
                ส่งประวัติการทำงานและเรียนร้อยมาที่:
              </p>
              <div className="space-y-4">
                <a
                  href="mailto:info@dealplustech.co.th?subject=Apply for Sales Engineer Position"
                  className="btn-primary w-full block text-center"
                >
                  ส่งอีเมลสมัครงาน
                </a>
                <a
                  href="tel:090-555-1415"
                  className="btn-outline w-full block text-center"
                >
                  โทรสอบถาม 090-555-1415
                </a>
                <Link
                  href="/contact-us"
                  className="btn-outline w-full block text-center"
                >
                  ติดต่อเรา
                </Link>
              </div>
              <div className="mt-6 pt-6 border-t border-primary-200">
                <p className="text-sm text-secondary-600">
                  <strong>ที่อยู่:</strong><br />
                  บริษัท ดีล พลัส เทค จำกัด<br />
                  กรุงเทพมหานคร ประเทศไทย
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
