const navLinks = [
  { label: 'Home', href: '#hero' },
  { label: 'About', href: '#about' },
  { label: 'Listings', href: '#listings' },
  { label: 'Contact', href: '#contact' },
];

export default function SiteFooter() {
  return (
    <footer
      style={{
        backgroundColor: '#1B2B4B',
        color: '#FAF9F7',
        padding: '2rem 1.5rem',
      }}
    >
      <div
        style={{
          maxWidth: '1200px',
          margin: '0 auto',
          display: 'flex',
          flexDirection: 'column',
          gap: '0.75rem',
          alignItems: 'center',
          textAlign: 'center',
        }}
      >
        {/* Row 1: Name / Wordmark */}
        <p style={{ fontWeight: 'bold', fontSize: '1rem', margin: 0 }}>
          Teressa Copeland Homes
        </p>

        {/* Row 2: License number */}
        <p style={{ fontSize: '0.875rem', opacity: 0.75, margin: 0 }}>
          {/* TODO: Verify license number before launch — last two chars may be "00" (zeros) or "OO" (letters O) */}
          Utah Real Estate License: 14196185-SA00
        </p>

        {/* Row 3: Copyright */}
        <p style={{ fontSize: '0.8rem', opacity: 0.6, margin: 0 }}>
          &copy; {new Date().getFullYear()} Teressa Copeland Homes. All rights
          reserved.
        </p>

        {/* Row 4: Nav links */}
        <nav
          style={{
            display: 'flex',
            gap: '1.5rem',
            flexWrap: 'wrap',
            justifyContent: 'center',
            marginTop: '0.5rem',
          }}
        >
          {navLinks.map((link) => (
            <a
              key={link.href}
              href={link.href}
              style={{
                color: '#FAF9F7',
                textDecoration: 'none',
                fontSize: '0.875rem',
                opacity: 0.75,
                transition: 'opacity 0.2s',
              }}
            >
              {link.label}
            </a>
          ))}
        </nav>
      </div>
    </footer>
  );
}