'use client';
import Link from 'next/link';
import { Briefcase, Globe, Heart, Mail } from 'lucide-react';
import { useTranslation } from '@client/contexts/LanguageContext';

export default function CareersPage() {
  const { t } = useTranslation();

  const values = [
    { icon: <Heart size={18} />, title: t('landing.careers.v1Title', 'Hospitality first'),
      body: t('landing.careers.v1Body', 'We build for restaurants because we love restaurants. Empathy beats ego.') },
    { icon: <Globe size={18} />, title: t('landing.careers.v2Title', 'Remote, async, global'),
      body: t('landing.careers.v2Body', 'A small team across 9 timezones. We optimise for outcomes, not hours online.') },
    { icon: <Briefcase size={18} />, title: t('landing.careers.v3Title', 'Ownership culture'),
      body: t('landing.careers.v3Body', 'Every hire owns a problem end to end — from spec to ship to support.') },
  ];

  return (
    <div data-ra-landing className="min-h-screen bg-slate-50 dark:bg-[#080a0f]">
      <section className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
        <div className="text-center mb-12">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-50 dark:bg-orange-500/10 border border-orange-100 dark:border-orange-500/20 text-orange-600 dark:text-orange-400 text-xs font-semibold mb-4">
            <Briefcase size={12} /> {t('landing.careers.badge', 'Careers')}
          </div>
          <h1 className="text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white mb-4">
            {t('landing.careers.title', 'Help us reshape restaurant operations')}
          </h1>
          <p className="text-base sm:text-lg text-slate-500 dark:text-slate-400 max-w-2xl mx-auto">
            {t('landing.careers.sub', 'We are a small, distributed team building the AI back-of-house every restaurant deserves. Join us.')}
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-12">
          {values.map((v) => (
            <div key={v.title} className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6">
              <div className="w-10 h-10 rounded-lg bg-orange-100 dark:bg-orange-900/40 text-orange-600 dark:text-orange-400 flex items-center justify-center mb-3">{v.icon}</div>
              <h3 className="font-bold text-slate-900 dark:text-white mb-1.5">{v.title}</h3>
              <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">{v.body}</p>
            </div>
          ))}
        </div>

        <div className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-8 text-center">
          <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-3">{t('landing.careers.openTitle', 'No open roles right now')}</h2>
          <p className="text-sm text-slate-600 dark:text-slate-400 mb-6 max-w-lg mx-auto">
            {t('landing.careers.openSub', "We hire deliberately. If you think you'd be a great fit, send us a note and tell us what you'd build.")}
          </p>
          <Link href="/contact" className="inline-flex items-center gap-1.5 px-5 py-2.5 rounded-lg bg-orange-500 hover:bg-orange-600 text-white text-sm font-semibold transition-colors">
            <Mail size={14} /> {t('landing.careers.openCta', 'Get in touch')}
          </Link>
        </div>
      </section>
    </div>
  );
}
