school_compare/nextjs-app/components/Footer.tsx

/**
 * Footer Component
 *
 * The footer is the guideline's "brand in action" band: a deep teal anchor
 * that stays teal in both themes. Everything inside it therefore reads from
 * the --on-sunken-* family rather than the page's --text-* tokens, which
 * invert and would go dark against the teal in one theme or the other.
 */

import { LogoMark } from './Logo';
import styles from './Footer.module.css';

export function Footer() {
  const currentYear = new Date().getFullYear();

  return (
    <footer className={styles.footer}>
      <div className={styles.container}>
        <div className={styles.content}>
          <div className={styles.section}>
            {/*
              On the sunken band the mark inverts: the pin takes the band's
              foreground and the leaf is knocked out in the band itself. The
              header's defaults (brand pin, card leaf) would disappear here.
            */}
            <h3 className={styles.lockup}>
              <span className={styles.lockupMark}>
                <LogoMark pin="var(--on-sunken)" leaf="var(--surface-sunken)" />
              </span>
              <span className={styles.wordmark}>
                school<span className={styles.wordmarkAccent}>compare</span>
              </span>
            </h3>
            <p className={styles.tagline}>Find the right school. For their future.</p>
            <p className={styles.description}>
              Compare primary and secondary schools across England.
            </p>
            <a
              href="mailto:contact@schoolcompare.co.uk"
              className={styles.link}
              data-umami-event="contact_email_clicked"
            >
              contact@schoolcompare.co.uk
            </a>
          </div>

          <div className={styles.section}>
            <h4 className={styles.sectionTitle}>Product</h4>
            <ul className={styles.links}>
              <li><a href="/" className={styles.link}>Search schools</a></li>
              <li><a href="/rankings" className={styles.link}>Rankings</a></li>
              <li><a href="/compare" className={styles.link}>Compare shortlist</a></li>
              <li><a href="/admissions" className={styles.link}>Admissions guide</a></li>
            </ul>
          </div>

          <div className={styles.section}>
            <h4 className={styles.sectionTitle}>Resources</h4>
            <ul className={styles.links}>
              <li>
                <a
                  href="https://www.gov.uk/school-performance-tables"
                  target="_blank"
                  rel="noopener noreferrer"
                  className={styles.link}
                  data-umami-event="external_link_clicked"
                  data-umami-event-target="dfe"
                >
                  School Performance Tables
                </a>
              </li>
              <li>
                <a
                  href="https://reports.ofsted.gov.uk/"
                  target="_blank"
                  rel="noopener noreferrer"
                  className={styles.link}
                  data-umami-event="external_link_clicked"
                  data-umami-event-target="ofsted"
                >
                  Ofsted reports
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className={styles.bottom}>
          <p className={styles.copyright}>
            © {currentYear} schoolcompare.co.uk
          </p>
        </div>
      </div>
    </footer>
  );
}