<?php
/**
 * Footer Template 1
 * 3 columns layout with green background and progress bar
 */

if (!defined('ABSPATH')) exit;

$settings = $this->aiautotool_footer_settings;
?>
<style type="text/css">
:root{
    scrollbar-color: var(--scroll) #ffffff00;
    scrollbar-width: thin !important;
    --body:#e4e7ec;
    --card:#ffffff;
    --card-shadow:0 0px 0px rgba(0, 0, 0, 0.2);
    --shadow:0px 1px 7px #0000004a;
    --htext:#333333;
    --text:#333333;
    --texta:#0768ea;
    --textnote:#555;
    --border:1px solid #ccc;
    --border-one:1px solid #ccc;
    --border-hat:1px dashed #ccc;
    --comment:#fff;
    --note:#f5f5f5;
    --note-light:#f5f5f5;
    --menu:#eee;
    --menu-mobile:#ddd;
    --menu-mobile-chil:#fff;
    --menu-border:2px dashed #ccc;
    --down-border:2px solid #0768ea;
    --scroll:#ccc;
    --bar:#fff;
    --menu-duoi:#ffffff;
    --input:#eee;
    --card-tran:#ffffff82;
}
* {
    scrollbar-color:var(--scroll) #ffffff00;
    scrollbar-width:thin !important;
}

.aiautotool_footer_1_site{
    background-color: #007f57;
}
.aiautotool_footer_1_site-footer {
    background-color: #007f57;
    color: white;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}

.aiautotool_footer_1_footer-column {
    text-align: left;
}

.aiautotool_footer_1_footer-column h3 {
    border-bottom: 2px solid white;
    padding-bottom: 5px;
}

.aiautotool_footer_1_footer-column p {
    margin: 5px 0;
}
.aiautotool_footer_1_footer-column p a{
    color:#;
}

.aiautotool_footer_1_footer-column svg{
    width:20px;
    height:20px;
}
@media only screen and (max-width: 768px) {
    .aiautotool_footer_1_site-footer {
        grid-template-columns: 1fr; 
    }
}
.progress-bar {
    background: linear-gradient(90deg, rgba(128,0,255,0) 0%, var(--texta) 100%);
    height: 4px;
    border-radius: 10px;
    width: 100%;
    transform-origin: left;
    -webkit-animation : grow 10s linear infinite;
    animation: grow 10s linear infinite;
}
.progress-bar {
    background: linear-gradient(90deg, rgba(128,0,255,0) 0%, #ffffff6b 100%);
}
@keyframes grow {
    0% {
        transform: scaleX(0);
    }
}

@-webkit-keyframes grow {
    0% {
        -webkit-transform: scaleX(0);
    }
}
</style>

<div class="aiautotool_footer_1_site">
    <div class="progress-bar"></div>

    <footer class="aiautotool_footer_1_site-footer">
        <div class="aiautotool_footer_1_footer-column">
            <h3>Contact Information</h3>
            <p><?php if(isset($settings['title'])){ echo $settings['title'] ==''? esc_html(get_bloginfo()):esc_html($settings['title']); }else{ echo esc_html( get_bloginfo()); }  ?></p>
            <p><?php if(isset($settings['email'])){  echo $settings['email'] ==''? esc_html('info@'.parse_url(home_url(), PHP_URL_HOST)):esc_html($settings['email']);}else{ echo esc_html('info@'.parse_url(home_url(), PHP_URL_HOST));} ?></p>
            <p><?php esc_html_e('Hotline','ai-auto-tool');?>: <?php if(isset($settings['hotline'])){ echo $settings['hotline'] ==''? esc_html('+1999838321'):esc_html($settings['hotline']);}else{ echo esc_html('+1999838321'); } ?></p>
            <p><?php esc_html_e('Address','ai-auto-tool');?>: <?php if(isset($settings['address'])){ echo $settings['address'] ==''? esc_html('Your Address'):esc_html($settings['address']);}else{ echo esc_html('Your Address'); } ?></p>
            <p>© <?php echo esc_html(date('Y').' '.parse_url(home_url(), PHP_URL_HOST));  ?> </p>
        </div>

        <div class="aiautotool_footer_1_footer-column">
            <h3>Information</h3>
            <p>Privacy Policy</p>
            <p>Contact Us</p>
            <p>Mission Statement</p>
        </div>

        <div class="aiautotool_footer_1_footer-column">
            <h3>Profile</h3>
            <p><a href="<?php if(isset($settings['facebook'])){  echo $settings['facebook'] ==''? esc_html('#'):esc_url($settings['facebook']);}else{ echo esc_html('#'); } ?>"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="10" height="10" viewBox="0 0 48 48">
<path fill="#039be5" d="M24 5A19 19 0 1 0 24 43A19 19 0 1 0 24 5Z"></path><path fill="#fff" d="M26.572,29.036h4.917l0.772-4.995h-5.69v-2.73c0-2.075,0.678-3.915,2.619-3.915h3.119v-4.359c-0.548-0.074-1.707-0.236-3.897-0.236c-4.573,0-7.254,2.415-7.254,7.917v3.323h-4.701v4.995h4.701v13.729C22.089,42.905,23.032,43,24,43c0.875,0,1.729-0.08,2.572-0.194V29.036z"></path>
</svg>  Facebook</a></p>
            <p><a href="<?php if(isset($settings['youTube'])){  echo $settings['youTube'] ==''? esc_html('#'):esc_url($settings['youTube']);}else{ echo  esc_html('#');} ?>"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
<path fill="#FF3D00" d="M43.2,33.9c-0.4,2.1-2.1,3.7-4.2,4c-3.3,0.5-8.8,1.1-15,1.1c-6.1,0-11.6-0.6-15-1.1c-2.1-0.3-3.8-1.9-4.2-4C4.4,31.6,4,28.2,4,24c0-4.2,0.4-7.6,0.8-9.9c0.4-2.1,2.1-3.7,4.2-4C12.3,9.6,17.8,9,24,9c6.2,0,11.6,0.6,15,1.1c2.1,0.3,3.8,1.9,4.2,4c0.4,2.3,0.9,5.7,0.9,9.9C44,28.2,43.6,31.6,43.2,33.9z"></path><path fill="#FFF" d="M20 31L20 17 32 24z"></path>
</svg> YouTube</a></p>
            <p><a href="<?php if(isset($settings['facebook'])){  echo $settings['twitter'] ==''? esc_html('#'):esc_url($settings['facebook']);}else{ echo esc_html('#');} ?>"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
<path fill="#03A9F4" d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"></path>
</svg> Twitter</a></p>
        </div>
    </footer>
</div>

