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

/** Organism: Rijksoverheid-style site footer — dark-blue, with the
    "De Rijksoverheid. Voor Nederland." tagline, responsible-ministry attribution,
    and a small "Over deze site" link column. ponytail: links point at the real
    rijksoverheid.nl pages, not a fabricated dead-link forest. */
@Component({
  selector: 'app-site-footer',
  styles: [
    `
      :host {
        display: block;
      }
      .bar {
        background: var(--rhc-color-layout);
        color: var(--rhc-color-foreground-on-primary);
        margin-block-start: var(--rhc-space-max-5xl);
        inline-size: 100%;
      }
      .inner {
        max-inline-size: var(--app-content-max);
        margin-inline: auto;
        padding: var(--rhc-space-max-3xl) var(--rhc-space-max-2xl);
        box-sizing: border-box;
        display: flex;
        gap: var(--rhc-space-max-3xl);
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .tagline {
        font-style: italic;
        font-weight: var(--rhc-text-font-weight-semi-bold);
        font-size: var(--rhc-text-font-size-lg);
        max-inline-size: 18rem;
      }
      .ministry {
        margin-block-start: var(--rhc-space-max-md);
        font-size: var(--rhc-text-font-size-sm);
        color: var(--rhc-color-foreground-on-primary);
      }
      /* CIBG's vendored h2 tag rule (dark navy, for light backgrounds) beats inherited
       color regardless of specificity — restate on-primary explicitly for this dark bar. */
      .col h2 {
        margin: 0 0 var(--rhc-space-max-md);
        font-size: var(--rhc-text-font-size-sm);
        font-weight: var(--rhc-text-font-weight-bold);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--rhc-color-foreground-on-primary);
      }
      .links {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--rhc-space-max-sm);
        font-size: var(--rhc-text-font-size-sm);
      }
      .links a {
        color: var(--rhc-color-foreground-on-primary);
        text-decoration: none;
      }
      .links a:hover {
        text-decoration: underline;
      }
      /* CIBG's vendored .meta class (unrelated component, coincidental name) sets a
       dark grey — override rather than rename to keep the CIBG-mirroring class name. */
      .meta {
        inline-size: 100%;
        border-block-start: var(--rhc-border-width-sm) solid
          color-mix(in srgb, var(--rhc-color-foreground-on-primary) 25%, transparent);
        margin-block-start: var(--rhc-space-max-xl);
        padding-block-start: var(--rhc-space-max-lg);
        font-size: var(--rhc-text-font-size-sm);
        opacity: 0.85;
        color: var(--rhc-color-foreground-on-primary);
      }
    `,
  ],
  template: `
    <footer class="bar">
      <div class="inner">
        <div>
          <div class="tagline" i18n="@@footer.tagline">De Rijksoverheid. Voor Nederland.</div>
          <div class="ministry" i18n="@@footer.ministry">
            CIBG — Ministerie van Volksgezondheid, Welzijn en Sport
          </div>
        </div>
        <nav class="col" i18n-aria-label="@@footer.overSiteAria" aria-label="Over deze site">
          <h2 i18n="@@footer.overSite">Over deze site</h2>
          <ul class="links">
            <li>
              <a
                href="https://www.rijksoverheid.nl/privacy"
                rel="noopener"
                target="_blank"
                i18n="@@footer.privacy"
                >Privacy</a
              >
            </li>
            <li>
              <a
                href="https://www.rijksoverheid.nl/cookies"
                rel="noopener"
                target="_blank"
                i18n="@@footer.cookies"
                >Cookies</a
              >
            </li>
            <li>
              <a
                href="https://www.rijksoverheid.nl/toegankelijkheid"
                rel="noopener"
                target="_blank"
                i18n="@@footer.toegankelijkheid"
                >Toegankelijkheid</a
              >
            </li>
          </ul>
        </nav>
        <div class="meta" i18n="@@footer.demo">Demo / POC — geen echte gegevens.</div>
      </div>
    </footer>
  `,
})
export class SiteFooterComponent {}