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

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

@Component({
  selector: 'app-footer',
  host: { 'app-footer': 'app-single-footer8' },
  imports: [RouterLink],
  template: `
    <footer
      class="footer-area7"
      style="background-color: #0C1822; color: #fff;"
    >
      <div class="container">
        <div class="row footer4-border">
          <div class="col-lg-4 col-sm-6">
            <div class="single-footer footer-right-padding single-footer4 mr50">
              <a routerLink="/multi/home-1" class="footer-logo">
                <img src="assets/img/logo/footer-logo8.svg" alt=""
              /></a>
              <div class="space30"></div>
              <p>
                Our policies are underwritten by large partner A.M. Best top
                rated carriers, meaning you will be protected by the best. See
                our featured carrier list here.
              </p>
            </div>
            <div class="space24"></div>
            <div class="social social7 social8">
               <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 class="col-lg col-sm-6">
            <div class="single-footer single-footer4">
              <h3>Useful Links</h3>
              <div class="space10"></div>
              <div class="footer-menu footer-menu7 footer-menu8">
                <ul>
                  @for (items of usefullinks;track $index){
                  <li>
                    <a [routerLink]="[]">{{ items }}</a>
                  </li>
                  }
                </ul>
              </div>
            </div>
          </div>
          <div class="col-lg col-sm-6">
            <div class="single-footer single-footer4">
              <h3>Contact Info</h3>
              <div class="space10"></div>
              <div class="footer4-contact-info">
                <div class="contact-info-single">
                  <div class="contact-info-icon">
                    <img src="assets/img/icons/footer5-icon3.svg" alt="" />
                  </div>
                  <div class="contact-info-text">
                    <a href="tel:+3(924)4596512">+3(924)4596512</a>
                  </div>
                </div>

                <div class="contact-info-single">
                  <div class="contact-info-icon">
                    <img src="assets/img/icons/footer5-icon1.svg" alt="" />
                  </div>
                  <div class="contact-info-text">
                    <a href="mailto:info@example.com">info&#64;example.com</a>
                  </div>
                </div>
                <div class="space20"></div>
                <div class="single-footer single-footer4">
                  <h3>Our Location</h3>

                  <div class="contact-info-single">
                    <div class="contact-info-icon">
                      <img src="assets/img/icons/footer5-icon2.svg" alt="" />
                    </div>
                    <div class="contact-info-text">
                      <a href="mailto:info@example.com"
                        >55 East Birchwood Ave.Brooklyn, <br />
                        New York 11201,United States</a
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-3">
            <div class="single-footer single-footer4">
              <h3>Subscribe Our Newsletter</h3>
              <div class="space20"></div>

              <div class="subscribe-now">
                <form>
                  <div class="subscribe-footer5 subscribe-footer8">
                    <input type="email" placeholder="Enter your Email" />
                    <button class="theme-btn10">Subscribe</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <div class="row align-items-center copyright4">
          <div class="col-lg-6">
            <p class="copyright-p4">
              © Copyright {{ currentYear }} Advisor Consulting Ltd. <br />
            </p>
          </div>
          <div class="col-lg-6 text-right">
            <ul class="Conditions4">
              <li><a [routerLink]="[]">Terms & Conditions</a></li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
  `,
  styles: ``,
})
export class FooterComponent {
  currentYear: number = new Date().getFullYear();

  usefullinks: string[] = [
    'Strategy Consulting',
    'Financial Consulting',
    'Marketing Consulting',
    'Operations Consulting',
    'Marketing Consulting',
  ];

  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',
    },
  ];
}
