// Footer — site-wide.
function Footer() {
  const cols = [
    { h: 'Service', items: [
      { label: 'How It Works', href: '#' },
      { label: 'Texas Electricity Rates & Plans', href: 'texas-electricity-rates.html' },
      { label: 'Customer Stories', href: '#' },
      { label: 'PUCT Certification', href: '#' },
      { label: 'Press', href: '#' },
      { label: 'Careers', href: '#' }
    ] },
    { h: 'Plans', items: ['No Deposit', 'Solar Buyback', 'Free Nights', 'Green Energy', 'Month to Month', 'Prepaid', 'Business', 'Indexed Plans'] },
    { h: 'Cities', items: [{ label: 'Houston', href: '/houston-electricity-rates' }, 'Dallas', 'Fort Worth', 'Corpus Christi', 'Waco', 'Galveston', 'Lubbock', 'Tyler', 'Abilene', 'Midland'] },
    { h: 'Providers', items: ['TXU Energy', 'Constellation', 'Gexa Energy', 'Rhythm', 'Frontier Utilities', 'Pulse Power', 'Octopus Energy', '4Change Energy', 'Reliant', 'Direct Energy'] }
  ];

  const renderItem = (entry, i) => {
    if (typeof entry === 'string') return <a key={i} href="#">{entry}</a>;
    return <a key={i} href={entry.href}>{entry.label}</a>;
  };

  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src="assets/logo-colored.svg" alt="Power Texas" />
            <p>An independent Texas electricity broker. We help you compare plans from PUCT&ndash;certified retail providers and switch in minutes.</p>
          </div>
          {cols.map((c) =>
            <div key={c.h} className="footer-col">
              <h5>{c.h}</h5>
              {c.items.map((entry, i) => renderItem(entry, i))}
            </div>
          )}
        </div>
        <div className="footer-base">
          <div className="footer-social">
            <a href="#" aria-label="Facebook"><I.Facebook /></a>
            <a href="#" aria-label="Twitter"><I.Twitter /></a>
            <a href="#" aria-label="Instagram"><I.Instagram /></a>
            <a href="#" aria-label="LinkedIn"><I.Linkedin /></a>
          </div>
          <div className="footer-legal">
            <span>&copy; 2026 Power Texas, Inc.</span>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Accessibility</a>
            <a href="#">Do Not Sell My Info</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;