@extends('layouts.app')

@section('title', 'Careers - Golden Era Property')

@section('content')
@php
    $openings = [
        [
            'title' => 'Android Developer',
            'type' => 'Full Time',
            'location' => 'Bangalore',
            'experience' => '0.6-2 Years',
            'accent' => 'from-orange-500 to-rose-500',
            'summary' => 'We are looking for an Android developer responsible for the development and maintenance of applications aimed at a vast number of diverse Android devices. Your primary focus will be the development of Android applications and their integration with back-end services. You will be working along-side other engineers and developers working on different layers of the infrastructure. Therefore, commitment to collaborative problem solving, sophisticated design, and creating quality products is essential.',
            'skills' => ['Android SDK', 'RESTful APIs', 'UI Design', 'Offline Storage', 'Threading'],
        ],
        [
            'title' => 'Business Development Officers/Managers',
            'type' => 'Full Time',
            'location' => 'Bangalore',
            'experience' => '0.6-1 Years',
            'accent' => 'from-primary-600 to-indigo-600',
            'summary' => 'Looking for candidates with experience in marketing software products. Present and sell company services like Web, Software, Application, Android App Development, Design, Digital marketing services (SEO, SEM, PPC, SMO, SMM, Adwords, Lead Generation) to potential clients. Identify prospects, develop sales strategies, build client relationships, and meet revenue targets.',
            'skills' => ['Sales', 'Business Development', 'Client Management', 'Digital Marketing', 'Lead Generation'],
        ],
        [
            'title' => 'Public Relations Executive',
            'type' => 'Full Time',
            'location' => 'Bangalore',
            'experience' => '0-1 Years',
            'accent' => 'from-cyan-500 to-teal-500',
            'summary' => 'We are looking for an enthusiastic Public Relations (PR) Executive to manage relationships between the company and external parties. Build relationships with media, write press releases, oversee content production, arrange press events, manage client relationships, and oversee social media PR strategies.',
            'skills' => ['Public Relations', 'Media Relations', 'Press Releases', 'Social Media', 'Event Management'],
        ],
        [
            'title' => 'Tele Caller',
            'type' => 'Full Time',
            'location' => 'Bangalore',
            'experience' => '0-6 months',
            'accent' => 'from-violet-500 to-fuchsia-500',
            'summary' => 'Fresher or 0-6 months experience. Excellent verbal and written communication skills with good command over English, Kannada, and Hindi. Basic knowledge of MS Office. Customer service and effective communication skills are essential.',
            'skills' => ['Telecalling', 'Customer Service', 'Communication', 'MS Office', 'English', 'Kannada', 'Hindi'],
        ],
        [
            'title' => 'Graphic Designer',
            'type' => 'Full Time',
            'location' => 'Bangalore',
            'experience' => '0.6-2 Years',
            'accent' => 'from-emerald-500 to-green-500',
            'summary' => 'Creative self-motivated graphic designers with 6 months to 2 years experience. Up-to-date knowledge of Adobe Suite. Work on various platforms: HTML4/5, CSS3, Bootstrap, e-commerce websites, UI designs for web and mobile, corporate identity, logos, etc. Focus on user interaction, pixel perfection, and cross browser compatibility.',
            'skills' => ['Graphic Design', 'Adobe Creative Suite', 'HTML/CSS', 'UI/UX', 'Responsive Design', 'Illustrator', 'Photoshop'],
        ],
    ];
@endphp

<section class="bg-gradient-to-br from-primary-600 to-primary-800 text-white py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-4xl md:text-5xl font-bold mb-4">Careers at Golden Era Property</h1>
        <p class="text-xl text-gray-100 max-w-2xl">Build your future with a team focused on growth, performance, and customer-first real estate experiences.</p>
    </div>
</section>

<section class="bg-white py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid gap-8 md:grid-cols-3">
            <div class="rounded-3xl border border-slate-200 bg-slate-50 p-8">
                <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-100 text-primary-600">
                    <svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5V4H2v16h5m10 0v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6m10 0H7"></path>
                    </svg>
                </div>
                <h3 class="mt-6 text-xl font-bold text-gray-900">Work on real-world growth</h3>
                <p class="mt-3 text-gray-600">Contribute to live projects, real customers, and on-ground campaigns that directly shape business growth.</p>
            </div>
            <div class="rounded-3xl border border-slate-200 bg-slate-50 p-8">
                <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-gold-100 text-gold-600">
                    <svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-4.418 0-8 1.79-8 4s3.582 4 8 4 8-1.79 8-4-3.582-4-8-4zm0 0V4m0 12v4"></path>
                    </svg>
                </div>
                <h3 class="mt-6 text-xl font-bold text-gray-900">Earn with performance</h3>
                <p class="mt-3 text-gray-600">We value consistency and commitment with strong earning potential, incentives, and career progression.</p>
            </div>
            <div class="rounded-3xl border border-slate-200 bg-slate-50 p-8">
                <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-100 text-emerald-600">
                    <svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.868v4.264a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12c0 4.971-4.029 9-9 9s-9-4.029-9-9 4.029-9 9-9 9 4.029 9 9z"></path>
                    </svg>
                </div>
                <h3 class="mt-6 text-xl font-bold text-gray-900">Learn fast, move faster</h3>
                <p class="mt-3 text-gray-600">Get exposure to sales, marketing, customer relationship management, and brand-building in one ecosystem.</p>
            </div>
        </div>
    </div>
</section>

<section id="openings" class="bg-slate-50 py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
            <div class="max-w-2xl">
                <p class="text-sm font-semibold uppercase tracking-[0.3em] text-primary-600">Current Openings</p>
                <h2 class="mt-3 text-3xl font-bold text-gray-900 md:text-4xl">Explore roles designed for ambitious people</h2>
                <p class="mt-4 text-lg text-gray-600">A clean and modern hiring experience for a brand that is growing beyond the old website style. Pick the role that fits your strengths and send us your profile.</p>
            </div>
            <a href="mailto:info@goldeneraproperty.com?subject=Career%20Application" target="_blank" class="inline-flex items-center justify-center rounded-full border border-primary-200 bg-white px-6 py-3 font-semibold text-primary-700 transition hover:border-primary-300 hover:bg-primary-50">
                Apply by Email
            </a>
        </div>

        <div class="mt-12 grid gap-8 lg:grid-cols-2">
            @foreach ($openings as $opening)
                <div class="group overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl">
                    <div class="h-2 bg-gradient-to-r {{ $opening['accent'] }}"></div>
                    <div class="p-8">
                        <div class="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
                            <div>
                                <div class="flex flex-wrap gap-2">
                                    <span class="rounded-full bg-primary-50 px-3 py-1 text-sm font-medium text-primary-700">{{ $opening['type'] }}</span>
                                    <span class="rounded-full bg-slate-100 px-3 py-1 text-sm font-medium text-slate-700">{{ $opening['location'] }}</span>
                                    <span class="rounded-full bg-gold-50 px-3 py-1 text-sm font-medium text-gold-700">{{ $opening['experience'] }}</span>
                                </div>
                                <h3 class="mt-5 text-2xl font-bold text-gray-900">{{ $opening['title'] }}</h3>
                                <p class="mt-4 max-w-xl leading-7 text-gray-600">{{ $opening['summary'] }}</p>
                            </div>
                            <a href="mailto:info@goldeneraproperty.com?subject=Application%20for%20{{ rawurlencode($opening['title']) }}" target="_blank" class="inline-flex items-center justify-center rounded-full bg-slate-900 px-5 py-3 text-sm font-semibold text-white transition hover:bg-primary-700">
                                Apply Now
                            </a>
                        </div>

                        <div class="mt-8 flex flex-wrap gap-3">
                            @foreach ($opening['skills'] as $skill)
                                <span class="rounded-full border border-slate-200 px-4 py-2 text-sm text-slate-700">{{ $skill }}</span>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<section class="bg-white py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid gap-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-start">
            <div>
                <p class="text-sm font-semibold uppercase tracking-[0.3em] text-primary-600">Our Hiring Process</p>
                <h2 class="mt-3 text-3xl font-bold text-gray-900 md:text-4xl">Simple, clear, and respectful</h2>
                <p class="mt-4 text-lg leading-8 text-gray-600">We keep the process straightforward so candidates always know what comes next.</p>
            </div>
            <div class="space-y-5">
                <div class="rounded-3xl border border-slate-200 p-6">
                    <div class="flex items-start gap-4">
                        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-primary-600 text-lg font-bold text-white">1</div>
                        <div>
                            <h3 class="text-xl font-semibold text-gray-900">Share your profile</h3>
                            <p class="mt-2 text-gray-600">Email your resume with the role name, current location, and relevant experience.</p>
                        </div>
                    </div>
                </div>
                <div class="rounded-3xl border border-slate-200 p-6">
                    <div class="flex items-start gap-4">
                        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-gold-500 text-lg font-bold text-white">2</div>
                        <div>
                            <h3 class="text-xl font-semibold text-gray-900">Initial screening</h3>
                            <p class="mt-2 text-gray-600">Our team reviews your profile and connects with shortlisted candidates for a quick discussion.</p>
                        </div>
                    </div>
                </div>
                <div class="rounded-3xl border border-slate-200 p-6">
                    <div class="flex items-start gap-4">
                        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-slate-900 text-lg font-bold text-white">3</div>
                        <div>
                            <h3 class="text-xl font-semibold text-gray-900">Interview and fit check</h3>
                            <p class="mt-2 text-gray-600">We assess communication, role fit, and mindset to find people who can grow with the brand.</p>
                        </div>
                    </div>
                </div>
                <div class="rounded-3xl border border-slate-200 p-6">
                    <div class="flex items-start gap-4">
                        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-emerald-600 text-lg font-bold text-white">4</div>
                        <div>
                            <h3 class="text-xl font-semibold text-gray-900">Offer and onboarding</h3>
                            <p class="mt-2 text-gray-600">Selected candidates receive role details, onboarding guidance, and next steps to join the team.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="bg-slate-950 py-20 text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="overflow-hidden rounded-[2rem] border border-white/10 bg-gradient-to-r from-primary-700 via-primary-800 to-slate-900 p-10 md:p-14">
            <div class="grid gap-10 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
                <div>
                    <p class="text-sm font-semibold uppercase tracking-[0.3em] text-gold-300">Future Opportunities</p>
                    <h2 class="mt-4 text-3xl font-bold md:text-4xl">Don’t see the perfect role right now?</h2>
                    <p class="mt-4 max-w-2xl text-lg leading-8 text-slate-200">
                        We are always open to hearing from talented people in sales, customer relationship management, design, digital marketing, and administration.
                    </p>
                </div>
                <div class="rounded-3xl bg-white/10 p-8 backdrop-blur">
                    <p class="text-sm uppercase tracking-[0.25em] text-white/70">Send your resume to</p>
                    <a href="mailto:info@goldeneraproperty.com" class="mt-3 block text-2xl font-bold text-white break-all">info@goldeneraproperty.com</a>
                    <p class="mt-4 text-sm leading-6 text-slate-200">Mention the role you are targeting, your notice period, current city, and total experience for faster review.</p>
                    <a href="mailto:info@goldeneraproperty.com?subject=General%20Career%20Application" target="_blank" class="mt-6 inline-flex items-center rounded-full bg-gold-500 px-6 py-3 font-semibold text-white transition hover:bg-gold-600">
                        Send Application
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection