@extends('layouts.app')
@section('title', 'Support for Japanese in India — Accommodation, Translation | Soyogi')

@section('content')
<div class="page-header">
    <div class="section-badge"><i class="fas fa-torii-gate"></i> Japanese in India</div>
    <span class="jp-sub">インド在住日本人サポート</span>
    <h1>For Japanese Visitors in India <span style="font-family:'Noto Sans JP',sans-serif;font-size:0.6em;opacity:0.5;">日本人の方へ</span></h1>
    <p>Complete local support for Japanese visitors and residents in India. Accommodation, translation, guidance — all taken care of.</p>
    <div class="breadcrumb">
        <a href="{{ route('home') }}">Home</a>
        <i class="fas fa-chevron-right" style="font-size:10px;"></i>
        <a href="{{ route('services.index') }}">Services</a>
        <i class="fas fa-chevron-right" style="font-size:10px;"></i>
        <span class="current">Japanese in India</span>
    </div>
</div>

<section class="section">
    <div class="section-inner">
        <!-- Unique Offering Banner -->
        <div style="background:linear-gradient(135deg,var(--red),#991b1b);border-radius:20px;padding:40px;margin-bottom:64px;text-align:center;" data-aos="fade-up">
            <div style="font-size:40px;margin-bottom:16px;">🏯 🤝 🇮🇳</div>
            <h2 style="font-size:28px;font-weight:800;color:white;margin-bottom:12px;">A Service Unique to Soyogi in India</h2>
            <p style="color:rgba(255,255,255,0.8);font-size:15px;max-width:600px;margin:0 auto;">Only Soyogi offers this in India — a complete support system for Japanese people coming to India. A truly unique Japan-India bridge that works in both directions.</p>
        </div>

        <!-- Services Grid -->
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:64px;">
            @foreach([
                ['fas fa-home','Accommodation Help','Finding a home in India after arriving from Japan can be daunting. We arrange safe, comfortable, and budget-friendly accommodation for you.'],
                ['fas fa-language','Japanese Translation','Hospitals, offices, government departments — we provide Japanese–Hindi/English translation. Available 24/7.'],
                ['fas fa-map-marked-alt','Local Navigation','Getting around unfamiliar Indian cities — we guide you through everything: auto-rickshaws, metro, local markets, and more.'],
                ['fas fa-utensils','Food & Culture','A gentle orientation to India\'s food, culture, and customs — so visitors from Japan feel comfortable and confident from day one.'],
                ['fas fa-briefcase','Business Setup','Japanese companies opening offices in India — we assist with registration, legal guidance, and building a local network.'],
                ['fas fa-hospital','Medical Support','Doctors, hospitals, medicines — we explain everything in Japanese and provide full medical translation support.'],
            ] as $svc)
            <div style="background:white;border-radius:16px;padding:28px;border:1px solid var(--gray-200);transition:all 0.3s;" data-aos="fade-up" data-aos-delay="{{ $loop->index * 60 }}" onmouseover="this.style.transform='translateY(-4px)';this.style.boxShadow='0 16px 40px rgba(0,0,0,0.08)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                <div style="width:52px;height:52px;background:rgba(220,38,38,0.1);border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;">
                    <i class="{{ $svc[0] }}" style="color:var(--red);font-size:22px;"></i>
                </div>
                <h4 style="font-size:16px;font-weight:700;color:var(--navy);margin-bottom:10px;">{{ $svc[1] }}</h4>
                <p style="font-size:14px;color:var(--gray-600);line-height:1.7;">{{ $svc[2] }}</p>
            </div>
            @endforeach
        </div>

        <!-- Japanese Content Section -->
        <div style="background:var(--navy);border-radius:20px;padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:40px;" data-aos="fade-up">
            <div>
                <h2 style="color:white;font-size:24px;font-weight:800;margin-bottom:16px;font-family:'Noto Sans JP',sans-serif;">インドでの生活サポート</h2>
                <h3 style="color:rgba(255,255,255,0.7);font-size:16px;margin-bottom:20px;">(Life Support in India)</h3>
                <p style="color:rgba(255,255,255,0.6);font-size:14px;line-height:1.8;margin-bottom:24px;">Soyogiは、インドに来る日本人の方々に、住居探し、翻訳、地域ガイダンスなど、インドでの生活を快適にするためのあらゆるサポートを提供しています。</p>
                <a href="#" onclick="openModal();return false;" class="btn-primary">Contact Us / お問い合わせ</a>
            </div>
            <div>
                @foreach(['日本語対応スタッフ (Japanese-speaking Staff)','住居サポート (Accommodation Support)','医療翻訳 (Medical Translation)','ビジネス支援 (Business Assistance)','24時間サポート (24/7 Support)'] as $jp)
                <div style="display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.08);font-size:14px;color:rgba(255,255,255,0.7);">
                    <i class="fas fa-check-circle" style="color:var(--gold);flex-shrink:0;"></i>
                    <span style="font-family:'Noto Sans JP',sans-serif;">{{ $jp }}</span>
                </div>
                @endforeach
            </div>
        </div>

        <div style="text-align:center;margin-top:48px;" data-aos="fade-up">
            <h2 class="section-title">A Unique India-Japan Bridge</h2>
            <p class="section-subtitle" style="margin:0 auto 32px;">This service makes clear why Soyogi is not just a language school — it is a complete Japan-India ecosystem that works in both directions.</p>
            <div style="display:flex;gap:14px;justify-content:center;">
                <a href="#" onclick="openModal();return false;" class="btn-primary">Get Support</a>
                <a href="{{ route('contact') }}" class="btn-outline">Contact Us</a>
            </div>
        </div>
    </div>
</section>
@endsection