/* global React, Icon, useSettings */
// ============================================================
// Site footer
// ------------------------------------------------------------
// Clean informational footer at the bottom of Home and All apps.
// Every link points at a real info page (opened via the global
// window.openInfoPage); there are no placeholder destinations.
// ============================================================
function SiteFooter() {
  const [settings] = useSettings();

  // Brand wordmark — mirrors the sidebar (appTitle + accent-tail split).
  const title = settings.appTitle || 'Toolio';
  const splitAt = Math.min(Math.max(settings.brandSplit ?? 4, 0), title.length);
  const head = title.slice(0, splitAt);
  const tail = title.slice(splitAt);
  const brandIcon = settings.brandIcon || 'grid_view';
  const year = new Date().getFullYear();

  const openPage = (id) => { if (window.openInfoPage) window.openInfoPage(id); };

  const COLS = [
    {
      title: 'Resources',
      links: [
        { label: 'FAQ', page: 'faq' },
        { label: 'Keyboard shortcuts', page: 'shortcuts' },
        { label: 'Disclaimer', page: 'disclaimer' },
      ],
    },
    {
      title: 'Company',
      links: [
        { label: 'About', page: 'about' },
        { label: 'Suggest a tool', page: 'suggest' },
        { label: 'Report a bug', page: 'bug' },
        { label: 'Contact', page: 'contact' },
      ],
    },
  ];

  return (
    <footer className="site-footer">
      <div className="site-footer-inner">
        <div className="site-footer-brand">
          <div className="site-footer-brandhead">
            <span className="site-footer-tile"><Icon name={brandIcon} /></span>
            <span className="site-footer-word">{head}<span>{tail}</span></span>
          </div>
          <p className="site-footer-tagline">
            Free online tools for PDF, images, video and more — all running right in
            your browser. No installs, no sign-up, and nothing ever leaves your device.
          </p>
          <div className="site-footer-badges">
            <span className="site-footer-badge"><Icon name="lock" />100% private</span>
            <span className="site-footer-badge"><Icon name="bolt" />No sign-up</span>
            <span className="site-footer-badge"><Icon name="favorite" />Always free</span>
          </div>
        </div>

        <nav className="site-footer-cols" aria-label="Footer">
          {COLS.map(col => (
            <div className="site-footer-col" key={col.title}>
              <h3 className="site-footer-coltitle">{col.title}</h3>
              <ul className="site-footer-list">
                {col.links.map(l => (
                  <li key={l.label}>
                    <button type="button" className="site-footer-link" onClick={() => openPage(l.page)}>{l.label}</button>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </nav>
      </div>

      <div className="site-footer-bar">
        <span className="site-footer-copy">© {year} {title}. All rights reserved.</span>
        <div className="site-footer-legal">
          <button type="button" onClick={() => openPage('disclaimer')}>Disclaimer</button>
          <button type="button" onClick={() => openPage('contact')}>Contact</button>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteFooter });