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';

/**
 * Both default to false so a caller that forgets a prop hides the link rather
 * than pointing it at a page that 404s. Same reasoning as backend/flags.py:
 * "Every flag defaults to False."
 */
interface FooterProps {
  aboutEnabled?: boolean;
  blogEnabled?: boolean;
}

export function Footer({ aboutEnabled = false, blogEnabled = false }: FooterProps = {}) {
  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 variant="onDark" size={34} />
              </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>
            {/*
              Says once, plainly, what the landing page's value props only
              imply: we publish official data, we are not an official body.
              Cheap to state and expensive to be wrong about.
            */}
            <p className={styles.independence}>
              An independent site. Not affiliated with the Department for Education or Ofsted.
            </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>
              {/* "Compare", not "shortlist" — the nav, this link and the
                  landing page all name the same feature the same way. */}
              <li><a href="/compare" className={styles.link}>Compare schools</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>

          {/* Dropped entirely when both flags are dark, rather than left as an
              empty heading: shipping dark means the footer renders as it did
              before the feature existed. */}
          {(aboutEnabled || blogEnabled) && (
            <div className={styles.section}>
              <h4 className={styles.sectionTitle}>About</h4>
              <ul className={styles.links}>
                {/* The only route to a named human. Deliberately not in the nav:
                    the mobile bottom bar already carries four items, and both of
                    these are lower intent than any of them. Post bylines link
                    here too, which is where a reader actually asks the question. */}
                {aboutEnabled && (
                  <li><a href="/about" className={styles.link}>Who&apos;s behind this</a></li>
                )}
                {blogEnabled && (
                  <li><a href="/blog" className={styles.link}>Blog</a></li>
                )}
              </ul>
            </div>
          )}
        </div>

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