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:.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:.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 {}