'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { useLanguage } from '@/context/LanguageContext';

interface JobPosition { id: string; title: string; location: string; type: string; department: string; description: string; requirements: string[]; }

export default function CareerPage() {
  const [selectedDepartment, setSelectedDepartment] = useState('');
  const { t } = useLanguage();

  const positions: JobPosition[] = [
    { id: '1', title: 'Dokter Spesialis Kulit & Kelamin (Sp.KK / Sp.DV)', location: 'Jakarta, Surabaya, Bandung', type: 'Full-Time', department: 'medis', description: 'Melakukan konsultasi kulit & treatment medis.', requirements: ['Lulusan Spesialis Kulit & Kelamin', 'Memiliki STR aktif', 'Berpenampilan menarik & komunikatif'] },
    { id: '2', title: 'Perawat (Nurse)', location: 'Jabodetabek', type: 'Full-Time', department: 'medis', description: 'Menangani treatment injeksi dan infus.', requirements: ['Pendidikan minimal D3 Keperawatan', 'Memiliki STR aktif', 'Pengalaman di klinik kecantikan min 1 tahun'] },
    { id: '3', title: 'Beautician / Facial Therapist', location: 'Semua Cabang', type: 'Full-Time', department: 'operasional', description: 'Memberikan perawatan facial dan beauty treatment.', requirements: ['Pendidikan minimal SMA/SMK', 'Memiliki sertifikat facial/aesthetic therapist', 'Ramah dan berorientasi pada pelayanan'] },
    { id: '4', title: 'Branch Manager (BM)', location: 'Berbagai Kota', type: 'Full-Time', department: 'operasional', description: 'Mengelola operasional cabang.', requirements: ['Pendidikan minimal S1', 'Pengalaman min 2 tahun sebagai BM', 'Memiliki jiwa kepemimpinan'] },
    { id: '5', title: 'Clinic Receptionist / GRO', location: 'Semua Cabang', type: 'Full-Time', department: 'operasional', description: 'Menerima tamu dan menangani reservasi.', requirements: ['Pendidikan minimal D3/S1', 'Ramah dan berpenampilan menarik', 'Komunikasi baik'] },
  ];

  const departments = [{ id: '', name: t('breadcrumb.home') }, { id: 'medis', name: 'Medis' }, { id: 'operasional', name: 'Operasional' }, { id: 'corporate', name: 'Corporate' }];
  const filteredPositions = !selectedDepartment ? positions : positions.filter((p) => p.department === selectedDepartment);

  return (
    <main className="min-h-screen bg-ivory">
      <Navbar />
      <section className="relative py-16 md:py-24 bg-espresso overflow-hidden">
        <div className="container-custom text-center text-white relative z-10">
          <h1 className="font-cormorant text-4xl md:text-6xl font-bold mb-4 uppercase">🌟 {t('career.page.title')}</h1>
          <p className="text-ivory/80 max-w-2xl mx-auto">{t('career.page.subtitle')}</p>
          <nav className="mt-4 text-xs tracking-widest uppercase">
            <Link href="/" className="hover:text-gold transition">{t('breadcrumb.home')}</Link><span className="mx-2">/</span><span className="text-ivory/60">{t('breadcrumb.career')}</span>
          </nav>
        </div>
      </section>

      <section className="py-16">
        <div className="container-custom">
          <h2 className="font-cormorant text-3xl font-bold text-espresso text-center mb-12">{t('career.why')}</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[{ icon: '📈', title: 'Growth Opportunity', desc: 'Program pelatihan intensif & jenjang karir yang jelas' }, { icon: '🏆', title: 'Prestise & Inovasi', desc: 'Klinik premium dengan teknologi laser berstandar internasional' }, { icon: '💝', title: 'Well-being & Benefit', desc: 'Asuransi kesehatan, bonus kinerja, dan free treatment' }].map((item, i) => (
              <div key={i} className="card bg-white p-8 text-center hover:shadow-lg transition"><div className="text-5xl mb-4">{item.icon}</div><h3 className="font-cormorant text-xl font-semibold text-espresso mb-2">{item.title}</h3><p className="text-grey-dark text-sm">{item.desc}</p></div>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-white py-16">
        <div className="container-custom">
          <h2 className="font-cormorant text-3xl font-bold text-espresso text-center mb-8">{t('career.benefits')}</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto">
            {[{ icon: '🏥', title: 'Asuransi Kesehatan', desc: 'Rawat jalan, rawat inap, gigi' }, { icon: '🧴', title: 'Skincare Allowance', desc: 'Produk gratis + treatment gratis setiap bulan' }, { icon: '📈', title: 'Clara Academy', desc: 'Pelatihan medis & soft skill berkelanjutan' }, { icon: '🎁', title: 'Bonus Tahunan', desc: 'Berdasarkan performa individu & perusahaan' }, { icon: '✈️', title: 'Company Trip', desc: 'Gathering tahunan dan team bonding' }, { icon: '👶', title: 'Maternity Leave', desc: 'Cuti melahirkan berbayar' }].map((item, i) => (
              <div key={i} className="flex gap-4"><div className="text-3xl">{item.icon}</div><div><h3 className="font-semibold text-espresso mb-1">{item.title}</h3><p className="text-sm text-grey-dark">{item.desc}</p></div></div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16">
        <div className="container-custom">
          <h2 className="font-cormorant text-3xl font-bold text-espresso mb-8">{t('career.positions')}</h2>
          <div className="mb-8 flex flex-wrap gap-2">
            {departments.map((dept) => (
              <button key={dept.id} onClick={() => setSelectedDepartment(dept.id)} className={`px-4 py-2 rounded-full text-xs uppercase tracking-wider font-semibold transition ${selectedDepartment === dept.id ? 'bg-gold text-white' : 'border border-gold text-gold hover:bg-gold hover:text-white'}`}>{dept.name}</button>
            ))}
          </div>
          <div className="space-y-6">
            {filteredPositions.map((job) => (
              <div key={job.id} className="card bg-white p-6 md:p-8 hover:shadow-lg transition"><h3 className="font-cormorant text-2xl font-bold text-espresso mb-2">👩‍⚕️ {job.title}</h3>
                <div className="flex flex-wrap gap-4 text-sm mb-4"><span>📍 {job.location}</span><span>💼 {job.type}</span></div>
                <p className="text-grey-dark mb-4">{job.description}</p>
                <div className="mb-6"><h4 className="font-semibold text-espresso mb-3">Kualifikasi:</h4><ul className="space-y-1">{job.requirements.map((req, idx) => (<li key={idx} className="flex items-start gap-2 text-sm text-grey-dark"><span className="text-gold mt-0.5">•</span>{req}</li>))}</ul></div>
                <div className="flex gap-3"><button className="btn-primary">{t('career.detail')}</button><button className="btn-secondary">{t('career.apply')}</button></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-gold text-white py-12 md:py-16">
        <div className="container-custom text-center">
          <h2 className="font-cormorant text-3xl font-bold mb-4">{t('career.cta.title')}</h2>
          <p className="mb-8 max-w-2xl mx-auto">{t('career.cta.desc')}</p>
          <button className="px-8 py-3 bg-white text-espresso text-xs uppercase tracking-widest font-semibold rounded hover:bg-ivory transition">{t('career.send')}</button>
        </div>
      </section>
      <Footer />
    </main>
  );
}
