<?php
/**
 * Template part for displaying About Section
 *
 *@package computer-repair-solutions
 */
$computer_repair_solutions_featured_about_section_aboutus_subheading = computer_repair_solutions_get_option('featured_about_section_aboutus_subheading');
$computer_repair_solutions_featured_about_section_aboutus_heading = computer_repair_solutions_get_option('featured_about_section_aboutus_heading');
$computer_repair_solutions_featured_about_section_aboutus_headingfirst = computer_repair_solutions_get_option('featured_about_section_aboutus_headingfirst');
$computer_repair_solutions_featured_about_section_aboutus_headingsec = computer_repair_solutions_get_option('featured_about_section_aboutus_headingsec');
$computer_repair_solutions_featured_about_section_aboutus_description = computer_repair_solutions_get_option('featured_about_section_aboutus_description');

$featured_icon_image = computer_repair_solutions_get_option('featured_icon_image');
$computer_repair_solutions_about_service_imagetextten = computer_repair_solutions_get_option('about_service_imagetextten');
$computer_repair_solutions_about_service_imagetextyears = computer_repair_solutions_get_option('about_service_imagetextyears');

$computer_repair_solutions_featured_about_section_bxtextfirst = computer_repair_solutions_get_option('featured_about_section_bxtextfirst');
$computer_repair_solutions_featured_about_section_bxtextsec = computer_repair_solutions_get_option('featured_about_section_bxtextsec');
$computer_repair_solutions_featured_about_section_bxtextthird = computer_repair_solutions_get_option('featured_about_section_bxtextthird');
$computer_repair_solutions_featured_about_section_bxtext4 = computer_repair_solutions_get_option('featured_about_section_bxtext4');
$computer_repair_solutions_featured_about_section_bxticon3_text = computer_repair_solutions_get_option('featured_about_section_bxticon3_text');
$computer_repair_solutions_featured_about_section_bxticon4_text = computer_repair_solutions_get_option('featured_about_section_bxticon4_text');

$computer_repair_solutions_featured_about_section_bxtitlefirst = computer_repair_solutions_get_option('featured_about_section_bxtitlefirst');
$computer_repair_solutions_featured_about_section_bxtitlesec = computer_repair_solutions_get_option('featured_about_section_bxtitlesec');
$computer_repair_solutions_featured_about_section_bxtitlethird = computer_repair_solutions_get_option('featured_about_section_bxtitlethird');
$computer_repair_solutions_featured_about_section_bxtitle4 = computer_repair_solutions_get_option('featured_about_section_bxtitle4');
$computer_repair_solutions_featured_about_section_bxicon2_number = computer_repair_solutions_get_option('featured_about_section_bxicon2_number');
$computer_repair_solutions_featured_about_section_bxicon3_number = computer_repair_solutions_get_option('featured_about_section_bxicon3_number');
$computer_repair_solutions_featured_about_section_bxicon4_number = computer_repair_solutions_get_option('featured_about_section_bxicon4_number');

$computer_repair_solutions_featured_icon_aboutfirst = computer_repair_solutions_get_option('featured_icon_aboutfirst');
$computer_repair_solutions_featured_icon_aboutsec = computer_repair_solutions_get_option('featured_icon_aboutsec');
$computer_repair_solutions_featured_icon_aboutthird = computer_repair_solutions_get_option('featured_icon_aboutthird');

?>
<?php if (!get_theme_mod('computer_repair_solutions_enable_featured_about_section', true)) {
  return;
} ?>
<section id="featured-about" class="py-5">
    <div id="primary" class="container-fluid px-lg-3 about-container">
        
        <div class="row justify-content-center mb-5">
            <div class="col-xl-6 col-lg-9 text-center">
                <div class="title-section p-2">
                    <?php if (!empty($computer_repair_solutions_featured_about_section_aboutus_subheading)): ?>
                        <h1 class="mb-2" style="text-transform: <?php echo esc_attr(get_theme_mod('featured_about_title_case', 'Capitalize')); ?>;">
                            <?php echo esc_html($computer_repair_solutions_featured_about_section_aboutus_subheading); ?>
                        </h1>
                        <h3 class="mb-3" style="text-transform: <?php echo esc_attr(get_theme_mod('featured_about_maintitle_case', 'Capitalize')); ?>;">
                            <?php echo esc_html($computer_repair_solutions_featured_about_section_aboutus_heading); ?>
                        </h3>
                        <p class="mx-auto" style="max-width: 800px;">
                            <?php echo esc_html($computer_repair_solutions_featured_about_section_aboutus_description); ?>
                        </p>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <div class="row g-4 mt-2" style="z-index: 2; position: relative;">
            
            <div class="aboutleftside col-xl-6 col-lg-6 col-md-5 col-sm-12 col-12">
                <div class="row gap-4">
                    <div class="col-12 position-relative">
                        <div class="rounded-4 overflow-hidden shadow-lg">
                            <?php
                            $computer_repair_solutions_about_image = get_theme_mod('computer_repair_solutions_about_image');
                            $img1_url = $computer_repair_solutions_about_image ?: get_template_directory_uri() . '/assets/images/about-img1.png';
                            echo '<img alt="Tech Team Working" class="w-100 object-fit-cover" style="height: 320px;" src="' . esc_url($img1_url) . '" />';
                            ?>
                        </div>

                        <div class="position-absolute bottom-0 start-0 m-4 p-4 rounded-4 shadow-lg d-none d-sm-block" 
                             style="background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.3);">
                            <div class="d-flex align-items-center gap-3">
                                <div class="rounded-3 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background-color: rgba(0, 82, 204, 0.1);">
                                    <i class="lucide lucide-award text-primary <?php echo esc_attr( $featured_icon_image ); ?>" style="font-size: 1.5rem;"></i>
                                </div>
                                <div>
                                    <div class="fw-bold text-dark" style="font-family: Poppins, sans-serif; font-size: 1.25rem; line-height: 1.2;">
                                        <?php echo esc_html( $computer_repair_solutions_about_service_imagetextten ); ?>
                                    </div>
                                    <div class="small text-muted opacity-75">
                                        <?php echo esc_html( $computer_repair_solutions_about_service_imagetextyears ); ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                   <div class="flex gap-4">
                     <div class="col-6" style="width:48%">
                        <div class="rounded-4 overflow-hidden shadow">
                            <?php
                            $computer_repair_solutions_about_imagesecond = get_theme_mod('computer_repair_solutions_about_imagesecond');
                            $img2_url = $computer_repair_solutions_about_imagesecond ?: get_template_directory_uri() . '/assets/images/default-banner.jpg';
                            echo '<img alt="Tech Support" class="w-100 object-fit-cover" style="height: 192px;" src="' . esc_url($img2_url) . '" />';
                            ?>
                        </div>
                    </div>

                    <div class="col-6" style="width:48%">
                        <div class="rounded-4 overflow-hidden shadow">
                            <?php
                            $computer_repair_solutions_about_imagethird = get_theme_mod('computer_repair_solutions_about_imagethird');
                            $img3_url = $computer_repair_solutions_about_imagethird ?: get_template_directory_uri() . '/assets/images/about-img3.png';
                            echo '<img alt="Laptop Repair" class="w-100 object-fit-cover" style="height: 192px;" src="' . esc_url($img3_url) . '" />';
                            ?>
                        </div>
                    </div>
                   </div>
                </div>
            </div>

            <div class="aboutrightside col-xl-6 col-lg-6 col-md-7 col-sm-12 col-12 px-lg-5">
                <div class="title-section mb-4">
                    <p class="first mb-2"><?php echo esc_html( $computer_repair_solutions_featured_about_section_aboutus_headingfirst ); ?></p>
                    <p class="second "><?php echo esc_html( $computer_repair_solutions_featured_about_section_aboutus_headingsec ); ?></p>
                </div>

                <div class="about-service mt-4">
                    <div class="list mb-4">
                        <h2 class="h5 m-0 d-flex align-items-start">
                            <span class="rounded-3 d-flex align-items-center justify-content-center flex-shrink-0 me-3 mt-1" 
                                  style="width: 22px; height: 22px; background-color: rgba(0, 193, 212, 0.15);border-radius: 50%;">
                                <i class="<?php echo esc_attr( $computer_repair_solutions_featured_icon_aboutfirst ); ?> lucide-circle-check text-info" style="font-size: 14px;"></i>
                            </span>
                            <?php echo esc_html( $computer_repair_solutions_featured_about_section_bxtitlefirst ); ?>
                        </h2>
                        <p class=""><?php echo esc_html( $computer_repair_solutions_featured_about_section_bxtextfirst ); ?></p>
                    </div>

                    <div class="list mb-4">
                        <h2 class="h5 m-0 d-flex align-items-start">
                            <span class="rounded-3 d-flex align-items-center justify-content-center flex-shrink-0 me-3 mt-1" 
                                  style="width: 22px; height: 22px; background-color: rgba(0, 193, 212, 0.15);border-radius: 50%;">
                                <i class="<?php echo esc_attr( $computer_repair_solutions_featured_icon_aboutsec ); ?> lucide-circle-check text-info" style="font-size: 14px;"></i>
                            </span>
                            <?php echo esc_html( $computer_repair_solutions_featured_about_section_bxtitlesec ); ?>
                        </h2>
                        <p class=" "><?php echo esc_html( $computer_repair_solutions_featured_about_section_bxtextsec ); ?></p>
                    </div>

                    <div class="list">
                        <h2 class="h5 m-0 d-flex align-items-start">
                            <span class="rounded-3 d-flex align-items-center justify-content-center flex-shrink-0 me-3 mt-1" 
                                  style="width: 22px; height: 22px; background-color: rgba(0, 193, 212, 0.15); border-radius: 50%;">
                                <i class="<?php echo esc_attr( $computer_repair_solutions_featured_icon_aboutthird ); ?> lucide-circle-check text-info" style="font-size: 14px;"></i>
                            </span>
                            <?php echo esc_html( $computer_repair_solutions_featured_about_section_bxtitlethird ); ?>
                        </h2>
                        <p class=" "><?php echo esc_html( $computer_repair_solutions_featured_about_section_bxtextthird ); ?></p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>