import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

type footermenuType = {
  name: string;
  link?: string;
}

type socialIconType = {
  title: string;
  icon: string;
}

@Component({
  selector: 'app-footer',
  host: { 'app-footer': 'app-footer3' },
  imports: [RouterLink],
  template: `
    <div class="footer3" style="background-color: #333982;">
        <div class="container">
            <div class="space60"></div>
            <div class="footer3-border-all">
                <div class="row">
                    <div class="col-lg-7 m-auto text-center">
                        <div class="footer3-all-form">
                            <a routerLink="/multi/home-1" class="footer3-logo">
                                <img src="assets/img/logo/footer3-logo.svg" alt="">
                            </a>
                            <div class="space30"></div>
                            <div class="hadding3-w">
                                <h1>Sign Up for Newsletters For Letest News & Update</h1>
                            </div>
                            <div class="space40"></div>
                            <div class="footer-contact-input footer-contact-input3 text-center">
                                <div class="input-footer2 input-footer3">
                                  <div class="">
                                    <input type="email" placeholder="Email">
                                  </div>
                                </div>
                                    <div class="ps-3">
                                        <button class="buttonBox2 fifth">Subscribe</button>
                                    </div>
                              </div>
                              
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-10 m-auto text-center">
                        <div class="footer3-border"></div>
    
                        <div class="footer3-menu-list">
                           <ul>
                              @for(items of footermenu; track $index) {
                              <li><a [routerLink]="items.link">{{items.name}}</a></li>
                              }
                            </ul>
                        </div>
                        <div class="footer3-bottom-contact">
                            <div class="contact2-single contact2-single3">
                                <div class="contact2-icon">
                                    <img src="assets/img/icons/contact3-icon1.svg" alt="">
                                </div>
                                <div class="contact2-icon-hadding">
                                    <a href="tel:281-377-7891">281-377-7891</a>
                                </div>
                            </div>
                            <div class="contact2-single contact2-single3">
                                <div class="contact2-icon">
                                    <img src="assets/img/icons/contact3-icon2.svg" alt="">
                                </div>
                                <div class="contact2-icon-hadding">
                                    <a href="mailto:info@ihawmd.com">info&#64;ihawmd.com</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row align-items-center footer3-bottom">
                <div class="col-lg-6">
                  <p>© Copyright {{currentYear}} Advisor Consulting Ltd. <br>
                  </p>
                  <ul class="Conditions3">
                    <li><a [routerLink]="[]">Terms & Conditions</a></li>
                  </ul>
                </div>
                <div class="col-lg-6 text-right">
                  <div class="social social2 social3">
                    <ul>
                       @for(items of socialIcons; track $index){
               <li>
                <a data-bs-toggle="tooltip" [title]="items.title" [routerLink]="[]"><i [class]="items.icon"></i></a>
              </li>
              }
                    </ul>
                  </div>
                </div>
              </div>
        </div>
    </div>
  `,
  styles: ``
})
export class FooterComponent {

  currentYear: number = new Date().getFullYear();

  footermenu: footermenuType[] = [
    {
      name: 'Home',
      link: '/multi/home-1'
    },
    {
      name: 'Privacy policy'
    },
    {
      name: 'Terms & Conditions'
    },
    {
      name: 'Our Service',
      link: '/service'
    },
    {
      name: 'Our Team'
    },
    {
      name: 'Blogs',
      link: '/blog'
    },
    {
      name: 'Contact',
      link: '/contact'
    },
  ]

  socialIcons: socialIconType[] = [
    {
      title: 'Linked in',
      icon: 'fa-brands fa-facebook'
    },
    {
      title: 'Facebook',
      icon: 'fa-brands fa-linkedin-in'
    },
    {
      title: 'Instagram',
      icon: 'fa-brands fa-youtube'
    },
    {
      title: 'TikTok',
      icon: 'fa-brands fa-twitter'
    },
  ]
}
