<?php
/**
 * Template for displaying J-Bridge page
 *
 * @package Nihongo
 */

get_header(); ?>

<main id="main" class="site-main">
    <style>
    body.page-bg { background: none !important; }
    </style>

    <!-- Hero Section -->
    <section class="j-bridge-hero">
        <div class="hero-background">
            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/j1.jpg" alt="<?php echo nihongo_translate('j_bridge_background_alt'); ?>" class="hero-bg-image">
            <div class="hero-overlay"></div>
            <div class="bridge-overlay"></div>
            <div class="light-effects"></div>
        </div>
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">
                    <?php echo nihongo_translate('j_bridge_hero_title'); ?> 
                    <span class="brand-accent"><?php echo nihongo_translate('bridge_logo_text'); ?></span>
                </h1>
                <p class="hero-subtitle"><?php echo nihongo_translate('j_bridge_hero_subtitle'); ?></p>
                <div class="hero-cta-buttons">
                    <a href="#enterprise" class="cta-button enterprise-btn">
                        <span class="btn-text"><?php echo nihongo_translate('for_companies'); ?></span>
                        <span class="btn-gradient"></span>
                    </a>
                    <a href="#jobseeker" class="cta-button jobseeker-btn">
                        <span class="btn-text"><?php echo nihongo_translate('for_jobseekers'); ?></span>
                        <span class="btn-gradient"></span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section class="section j-bridge-structure">
        <div class="container">
            <h2 class="section-title"><?php echo nihongo_translate('what_is_j_bridge'); ?></h2>
            <p class="section-subtitle">
                <?php echo nihongo_translate('j_bridge_description'); ?>
            </p>
            
            <div class="structure-diagram">
                <div class="structure-item learner" data-aos="fade-right" data-aos-delay="200">
                    <div class="structure-icon">
                        <div class="building-icon">🚀</div>
                        <div class="learning-elements">
                            <span class="phrase"><?php echo nihongo_translate('hello_phrase'); ?></span>
                            <span class="note">📝</span>
                        </div>
                    </div>
                    <h3 class="structure-title"><?php echo nihongo_translate('foreign_learners_title'); ?></h3>
                    <p class="structure-description"><?php echo nihongo_translate('foreign_learners_description'); ?></p>
                </div>
                
                <div class="structure-arrow">
                    <svg width="60" height="20" viewBox="0 0 60 20">
                        <path d="M0,10 L50,10 M40,5 L50,10 L40,15" stroke="#007bff" stroke-width="2" fill="none"/>
                    </svg>
                </div>
                
                <div class="structure-item bridge-logo" data-aos="zoom-in" data-aos-delay="400">
                    <div class="bridge-logo-container">
                        <div class="bridge-logo-text"><?php echo nihongo_translate('bridge_logo_text'); ?></div>
                        <div class="bridge-highlights">
                            <div class="highlight"></div>
                            <div class="highlight"></div>
                            <div class="highlight"></div>
                        </div>
                    </div>
                    <h3 class="structure-title"><?php echo nihongo_translate('matching_platform_title'); ?></h3>
                    <p class="structure-description"><?php echo nihongo_translate('matching_platform_description'); ?></p>
                </div>
                
                <div class="structure-arrow">
                    <svg width="60" height="20" viewBox="0 0 60 20">
                        <path d="M0,10 L50,10 M40,5 L50,10 L40,15" stroke="#ff6b35" stroke-width="2" fill="none"/>
                    </svg>
                </div>
                
                <div class="structure-item enterprise" data-aos="fade-left" data-aos-delay="600">
                    <div class="structure-icon">
                        <div class="building-icon">🏢</div>
                        <div class="handshake-icon">🤝</div>
                    </div>
                    <h3 class="structure-title"><?php echo nihongo_translate('japanese_companies_title'); ?></h3>
                    <p class="structure-description"><?php echo nihongo_translate('japanese_companies_description'); ?></p>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works Section -->
    <section class="section features">
        <div class="container">
            <h2 class="section-title white" ><?php echo nihongo_translate('how_it_works_title'); ?></h2>
            <p class="section-subtitle white"><?php echo nihongo_translate('how_it_works_subtitle'); ?></p>
            
            <div class="j-bridge-steps">
                <div class="step-card">
                    <div class="step-visual">
                        <div class="step-image-container light-blue-bg">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/jt1.jpg" alt="<?php echo nihongo_translate('learner_registration_alt'); ?>" class="step-image">
                        </div>
                    </div>
                    <div class="step-number">1</div>
                    <h3 class="step-title"><?php echo nihongo_translate('learner_registration_title'); ?></h3>
                    <p class="step-description">
                        <?php echo nihongo_translate('learner_registration_description'); ?>
                    </p>
                </div>
                
                <div class="step-card">
                    <div class="step-visual">
                        <div class="step-image-container navy-blue-bg">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/jt2.jpg" alt="<?php echo nihongo_translate('company_registration_alt'); ?>" class="step-image">
                        </div>
                    </div>
                    <div class="step-number">2</div>
                    <h3 class="step-title"><?php echo nihongo_translate('company_registration_title'); ?></h3>
                    <p class="step-description">
                        <?php echo nihongo_translate('company_registration_description'); ?>
                    </p>
                </div>
                
                <div class="step-card">
                    <div class="step-visual">
                        <div class="step-image-container orange-bg">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/jt3.jpg" alt="<?php echo nihongo_translate('matching_interview_alt'); ?>" class="step-image">
                        </div>
                    </div>
                    <div class="step-number">3</div>
                    <h3 class="step-title"><?php echo nihongo_translate('matching_interview_title'); ?></h3>
                    <p class="step-description">
                        <?php echo nihongo_translate('matching_interview_description'); ?>
                    </p>
                </div>
                
                <div class="step-card">
                    <div class="step-visual">
                        <div class="step-image-container light-green-bg">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/jt4.jpg" alt="<?php echo nihongo_translate('recruitment_support_alt'); ?>" class="step-image">
                        </div>
                    </div>
                    <div class="step-number">4</div>
                    <h3 class="step-title"><?php echo nihongo_translate('recruitment_support_title'); ?></h3>
                    <p class="step-description">
                        <?php echo nihongo_translate('recruitment_support_description'); ?>
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Benefits Section -->
    <section class="section benefits-section">
        <div class="container">
            <h2 class="section-title"><?php echo nihongo_translate('benefits_title'); ?></h2>
            <p class="section-subtitle"><?php echo nihongo_translate('benefits_subtitle'); ?></p>
            
            <div class="benefits-layout">
                <!-- Main Visual (Left Column) -->
                <div class="main-benefit-visual">
                    <div class="main-image-container">
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/jl.jpg" alt="<?php echo nihongo_translate('conference_room_alt'); ?>" class="main-benefit-image">
                        <div class="world-map-overlay"></div>
                    </div>
                </div>
                
                <!-- Benefits img (Right Column) -->
                <div class="benefits-grid">
                    <div class="benefit-item" data-aos="fade-left" data-aos-delay="100">
                        <div class="benefit-image-container">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/jr1.jpg" alt="<?php echo nihongo_translate('talent_farm_alt'); ?>" class="benefit-image">
                            <div class="benefit-overlay">
                                <h4 class="benefit-title"><?php echo nihongo_translate('talent_farm_title'); ?></h4>
                                <p class="benefit-description"><?php echo nihongo_translate('talent_farm_description'); ?></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="benefit-item" data-aos="fade-left" data-aos-delay="200">
                        <div class="benefit-image-container">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/jr2.jpg" alt="<?php echo nihongo_translate('reducing_mistakes_alt'); ?>" class="benefit-image">
                            <div class="benefit-overlay">
                                <h4 class="benefit-title"><?php echo nihongo_translate('reducing_mistakes_title'); ?></h4>
                                <p class="benefit-description"><?php echo nihongo_translate('reducing_mistakes_description'); ?></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="benefit-item" data-aos="fade-left" data-aos-delay="300">
                        <div class="benefit-image-container">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/jr3.jpg" alt="<?php echo nihongo_translate('immediate_skills_alt'); ?>" class="benefit-image">
                            <div class="benefit-overlay">
                                <h4 class="benefit-title"><?php echo nihongo_translate('immediate_skills_title'); ?></h4>
                                <p class="benefit-description"><?php echo nihongo_translate('immediate_skills_description'); ?></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="benefit-item" data-aos="fade-left" data-aos-delay="400">
                        <div class="benefit-image-container">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/jr4.jpg" alt="<?php echo nihongo_translate('corporate_culture_alt'); ?>" class="benefit-image">
                            <div class="benefit-overlay">
                                <h4 class="benefit-title"><?php echo nihongo_translate('corporate_culture_title'); ?></h4>
                                <p class="benefit-description"><?php echo nihongo_translate('corporate_culture_description'); ?></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="benefit-item" data-aos="fade-left" data-aos-delay="500">
                        <div class="benefit-image-container">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/jr5.jpg" alt="<?php echo nihongo_translate('reducing_costs_alt'); ?>" class="benefit-image">
                            <div class="benefit-overlay">
                                <h4 class="benefit-title"><?php echo nihongo_translate('reducing_costs_title'); ?></h4>
                                <p class="benefit-description"><?php echo nihongo_translate('reducing_costs_description'); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Benefits for Learners Section -->
    <section class="section learner-benefits-section">
        <div class="container">
            <h2 class="section-title learner-title"><?php echo nihongo_translate('learner_benefits_title'); ?></h2>
            <p class="section-subtitle learner-subtitle"><?php echo nihongo_translate('learner_benefits_subtitle'); ?></p>
            
            <div class="learner-benefits-layout">
                <!-- Main Hero Image (Left) -->
                <div class="learner-hero-visual">
                    <div class="learner-hero-container">
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/js51.jpg" alt="<?php echo nihongo_translate('international_learners_alt'); ?>" class="learner-hero-image">
                        <div class="motivational-overlay">
                            <div class="motivational-text"><?php echo nihongo_translate('to_the_future'); ?></div>
                            <div class="motivational-subtext"><?php echo nihongo_translate('lets_move_forward'); ?></div>
                        </div>
                    </div>
                </div>
                
                <!-- Benefits Cards (Right) -->
                <div class="learner-benefits-grid">
                    <div class="learner-benefit-card" data-aos="fade-right" data-aos-delay="100">
                        <div class="learner-benefit-image-container">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/js52.jpg" alt="<?php echo nihongo_translate('japanese_job_support_alt'); ?>" class="learner-benefit-image">
                            <div class="learner-benefit-overlay">
                                <h4 class="learner-benefit-title"><?php echo nihongo_translate('japanese_job_support_title'); ?></h4>
                                <p class="learner-benefit-description"><?php echo nihongo_translate('japanese_job_support_description'); ?></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="learner-benefit-card" data-aos="fade-left" data-aos-delay="200">
                        <div class="learner-benefit-image-container">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/js53.jpg" alt="<?php echo nihongo_translate('cultural_understanding_alt'); ?>" class="learner-benefit-image">
                            <div class="learner-benefit-overlay">
                                <h4 class="learner-benefit-title"><?php echo nihongo_translate('cultural_understanding_title'); ?></h4>
                                <p class="learner-benefit-description"><?php echo nihongo_translate('cultural_understanding_description'); ?></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="learner-benefit-card" data-aos="fade-right" data-aos-delay="300">
                        <div class="learner-benefit-image-container">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/js54.jpg" alt="<?php echo nihongo_translate('trustworthy_companies_alt'); ?>" class="learner-benefit-image">
                            <div class="learner-benefit-overlay">
                                <h4 class="learner-benefit-title"><?php echo nihongo_translate('trustworthy_companies_title'); ?></h4>
                                <p class="learner-benefit-description"><?php echo nihongo_translate('trustworthy_companies_description'); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Career Ladder Illustration -->
            <div class="career-ladder-section">
                <div class="career-ladder-container">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/js55.jpg" alt="<?php echo nihongo_translate('career_ladder_alt'); ?>" class="career-ladder-image">
                    <div class="ladder-silhouettes">
                        <div class="silhouette silhouette-1" data-aos="fade-in" data-aos-delay="100"></div>
                        <div class="silhouette silhouette-2" data-aos="fade-in" data-aos-delay="200"></div>
                        <div class="silhouette silhouette-3" data-aos="fade-in" data-aos-delay="300"></div>
                        <div class="silhouette silhouette-4" data-aos="fade-in" data-aos-delay="400"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
        <div class="cta-background">
            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/js6bg.jpg" alt="<?php echo nihongo_translate('connection_scene_alt'); ?>" class="cta-bg-image">
            <div class="cta-gradient-overlay"></div>
            <div class="bridge-people">
                <div class="japanese-professionals" data-aos="fade-right" data-aos-delay="200">
                    <div class="person person-1"></div>
                    <div class="person person-2"></div>
                    <div class="person person-3"></div>
                </div>
                <div class="international-learners" data-aos="fade-left" data-aos-delay="400">
                    <div class="person person-4"></div>
                    <div class="person person-5"></div>
                    <div class="person person-6"></div>
                </div>
                <div class="unity-highlight" data-aos="zoom-in" data-aos-delay="600"></div>
            </div>
        </div>
        
        <div class="cta-content">
            <div class="container">
                <h2 class="cta-headline" data-aos="fade-down" data-aos-delay="100">
                    Contact J-Bridge?
                </h2>
                
                <div class="cta-buttons" data-aos="fade-up" data-aos-delay="300">
                    <a href="<?php echo get_permalink(get_page_by_path('contact')); ?>?type=company" class="cta-button company-cta">
                        <span class="button-text"><?php echo nihongo_translate('company_application'); ?></span>
                        <div class="button-glow"></div>
                    </a>
                    
                    <a href="<?php echo get_permalink(get_page_by_path('contact')); ?>?type=jobseeker" class="cta-button jobseeker-cta">
                        <span class="button-text"><?php echo nihongo_translate('job_application'); ?></span>
                        <div class="button-shadow"></div>
                    </a>
                </div>
            </div>
        </div>
    </section>
</main>

<?php get_footer(); ?>
