import Link from 'next/link';

export const metadata = {
  title: 'ร่วมงานกับเรา | Join Us - ดีลพลัสเทค',
  description: 'ร่วมงานกับดีลพลัสเทค เรามอบโอกาสทางอาชีพที่ดี สวัสดิการครบครัน ร่วมเติบโตไปกับเรา',
};

const jobPositions = [
  {
    id: 'sales-engineer',
    title: 'Sales Engineer',
    titleTh: 'วิศวกรฝ่ายขาย',
    type: 'Full-time',
    location: 'กรุงเทพมหานคร',
    salary: 'เจรจาต่อรอง',
    description: 'รับผิดชอบการขายและให้คำปรึกษาด้านเทคนิคสำหรับผลิตภัณฑ์ท่อและอุปกรณ์ระบบท่อ',
    requirements: [
      'ปริญญาตรี สาขาวิศวกรรมเครื่องกล วิศวกรรมโยธา หรือสาขาที่เกี่ยวข้อง',
      'มีประสบการณ์อย่างน้อย 1-3 ปี ในตำแหน่ง Sales Engineer',
      'มีความรู้ด้านท่อและอุปกรณ์ระบบท่อจะได้รับการพิจารณาเป็นพิเศษ',
      'สามารถขับรถและมีใบขับขี่',
      'มีทัศนคติดี กระตือรือร้น และสามารถทำงานเป็นทีมได้',
    ],
  },
  {
    id: 'sales-representative',
    title: 'Sales Representative',
    titleTh: 'พนักงานขาย',
    type: 'Full-time',
    location: 'กรุงเทพมหานคร',
    salary: 'เจรจาต่อรอง',
    description: 'รับผิดชอบการขายผลิตภัณฑ์ท่อและอุปกรณ์ระบบท่อให้กับลูกค้าใหม่และลูกค้าเดิม',
    requirements: [
      'ปริญญาตรี สาขาใดก็ได้',
      'มีประสบการณ์ด้านการขายอย่างน้อย 1 ปี',
      'มีทักษะการสื่อสารที่ดี',
      'สามารถขับรถและมีใบขับขี่',
      'มีทัศนคติดี กระตือรือร้น',
    ],
  },
];

export default function JoinUsPage() {
  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">ร่วมงานกับเรา</li>
          </ol>
        </nav>

        {/* Header */}
        <div className="mb-12 text-center">
          <h1 className="text-3xl md:text-4xl font-bold text-secondary-900 mb-4">
            ร่วมงานกับเรา
          </h1>
          <p className="text-secondary-600 text-lg max-w-2xl mx-auto">
            เรามอบโอกาสทางอาชีพที่ดี สวัสดิการครบครัน ร่วมเติบโตไปกับดีลพลัสเทค
          </p>
        </div>

        {/* Why Join Us */}
        <div className="mb-12 bg-primary-50 rounded-xl p-8">
          <h2 className="text-2xl font-bold text-secondary-900 mb-6 text-center">
            ทำไมต้องเลือกดีลพลัสเทค?
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="text-center">
              <div className="w-16 h-16 bg-primary-600 rounded-full 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <h3 className="text-lg font-bold text-secondary-900 mb-2">เงินเดือนที่เป็นธรรม</h3>
              <p className="text-secondary-600">เงินเดือนที่สอดคล้องกับความสามารถและประสบการณ์</p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 bg-primary-600 rounded-full 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-lg font-bold text-secondary-900 mb-2">สวัสดิการครบครัน</h3>
              <p className="text-secondary-600">ประกันสังคม ประกันสุขภาพ โบนัส และเบี้ยขยัน</p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 bg-primary-600 rounded-full 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 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                </svg>
              </div>
              <h3 className="text-lg font-bold text-secondary-900 mb-2">โอกาสเติบโต</h3>
              <p className="text-secondary-600">มีโอกาสก้าวหน้าในสายงานและพัฒนาทักษะ</p>
            </div>
          </div>
        </div>

        {/* Open Positions */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold text-secondary-900 mb-6">
            ตำแหน่งงานที่เปิดรับ
          </h2>
          <div className="space-y-6">
            {jobPositions.map((job) => (
              <div key={job.id} className="bg-white rounded-xl p-6 shadow-card">
                <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
                  <div>
                    <h3 className="text-xl font-bold text-secondary-900">
                      {job.title}
                    </h3>
                    <p className="text-primary-600">{job.titleTh}</p>
                  </div>
                  <div className="flex flex-wrap gap-2 mt-2 md:mt-0">
                    <span className="px-3 py-1 bg-secondary-100 text-secondary-700 rounded-full text-sm">
                      {job.type}
                    </span>
                    <span className="px-3 py-1 bg-secondary-100 text-secondary-700 rounded-full text-sm">
                      {job.location}
                    </span>
                    <span className="px-3 py-1 bg-primary-100 text-primary-700 rounded-full text-sm">
                      {job.salary}
                    </span>
                  </div>
                </div>
                <p className="text-secondary-600 mb-4">{job.description}</p>
                <div className="mb-4">
                  <h4 className="font-semibold text-secondary-900 mb-2">คุณสมบัติ:</h4>
                  <ul className="list-disc list-inside text-secondary-600 space-y-1">
                    {job.requirements.map((req, index) => (
                      <li key={index}>{req}</li>
                    ))}
                  </ul>
                </div>
                <Link
                  href={`/sales-engineer`}
                  className="btn-primary inline-block"
                >
                  สมัครงาน
                </Link>
              </div>
            ))}
          </div>
        </div>

        {/* Contact */}
        <div className="bg-secondary-100 rounded-xl p-8 text-center">
          <h2 className="text-2xl font-bold text-secondary-900 mb-4">
            สนใจร่วมงานกับเรา?
          </h2>
          <p className="text-secondary-600 mb-6">
            ส่งประวัติการทำงานมาที่อีเมล info@dealplustech.co.th
            หรือติดต่อสอบถามได้ที่เบอร์ 090-555-1415
          </p>
          <div className="flex justify-center gap-4">
            <a href="mailto:info@dealplustech.co.th" className="btn-primary">
              ส่งอีเมล
            </a>
            <Link href="/contact-us" className="btn-outline">
              ติดต่อเรา
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}
