const { PageHero } = window.App.Components;
const { Images } = window.App.Utils;
const { Briefcase, Mail, ArrowRight } = lucide;

const Recruit = () => {
    return (
        <div className="bg-slate-50 min-h-screen pb-20">
            <PageHero
                title="Join Our Team"
                subtitle="Recruit"
                image={Images.recruitHero}
            />

            <div className="max-w-4xl mx-auto px-6 py-20">
                <div className="text-center mb-16">
                    <h2 className="text-3xl font-bold text-slate-800 mb-6">採用情報</h2>
                    <p className="text-slate-600 leading-relaxed text-lg">
                        株式会社みるくるでは、私たちと一緒に地図の未来を創る仲間を募集しています。<br />
                        最新の技術に興味がある方、地理空間情報を通じて社会に貢献したい方をお待ちしております。
                    </p>
                </div>

                {/* Job Categories (Generic) */}
                <div className="grid md:grid-cols-2 gap-8 mb-20">
                    <div className="bg-white p-8 rounded-3xl shadow-sm hover:shadow-lg transition-all border border-slate-100">
                        <div className="w-12 h-12 bg-blue-50 text-brand-primary rounded-xl flex items-center justify-center mb-6">
                            <Briefcase size={24} />
                        </div>
                        <h3 className="text-xl font-bold text-slate-800 mb-4">技術職 (Engineer)</h3>
                        <p className="text-slate-500 mb-6">
                            航空測量データの解析、3Dモデリング作成、GISシステムの開発・運用保守など、技術的な業務を担当します。
                        </p>
                    </div>

                    <div className="bg-white p-8 rounded-3xl shadow-sm hover:shadow-lg transition-all border border-slate-100">
                        <div className="w-12 h-12 bg-emerald-50 text-brand-secondary rounded-xl flex items-center justify-center mb-6">
                            <Briefcase size={24} />
                        </div>
                        <h3 className="text-xl font-bold text-slate-800 mb-4">営業職 (Sales)</h3>
                        <p className="text-slate-500 mb-6">
                            官公庁や民間企業様へのソリューション提案、測量機器・システムの販売などを担当します。
                        </p>
                    </div>
                </div>

                {/* Contact CTA */}
                <div className="bg-slate-900 rounded-3xl p-10 md:p-16 text-center text-white relative overflow-hidden">
                    <div className="absolute inset-0 opacity-20 bg-[url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80&w=2000')] bg-cover bg-center"></div>
                    <div className="relative z-10">
                        <h3 className="text-2xl md:text-3xl font-bold mb-6">興味をお持ちの方へ</h3>
                        <p className="text-slate-300 mb-8 max-w-xl mx-auto">
                            採用に関する詳細や、現在の募集状況については、お問い合わせフォームよりお気軽にご連絡ください。
                        </p>
                        <button
                            onClick={() => window.dispatchEvent(new CustomEvent('navigate', { detail: 'contact' }))}
                            className="inline-flex items-center gap-2 px-8 py-4 bg-brand-primary hover:bg-brand-primary/90 text-white font-bold rounded-full transition-all transform hover:-translate-y-1 shadow-lg shadow-brand-primary/30"
                        >
                            お問い合わせはこちら <ArrowRight size={18} />
                        </button>
                    </div>
                </div>

            </div>
        </div>
    );
};

window.App.Pages.Recruit = Recruit;