// Footer.jsx — Site-wide footer.
// Matches the dark band style of the hero: gradient accent strip on top,
// deep aubergine background, light text. Built as a simplified three-column
// link directory + a bottom row with copyright and legal links.

function Footer() {
  const logoSrc = (typeof window !== "undefined" && window.__resources && window.__resources.logoInverse)
    || "assets/logos/reelflow_inverse_logo.svg";

  const COLUMNS = [
    { label: "Platform", links: [
      { label: "Product",          href: "https://www.reelflow.com/product" },
      { label: "Pricing",          href: "https://www.reelflow.com/pricing" },
      { label: "Book a demo",      href: "https://www.reelflow.com/demo" },
      { label: "Start free trial", href: "https://app.reelflow.com/signup" }
    ]},
    { label: "Resources", links: [
      { label: "Knowledge Base", href: "https://help.reelflow.com/" },
      { label: "Customers",      href: "https://www.reelflow.com/customers" }
    ]},
    { label: "Company", links: [
      { label: "About us", href: "https://www.reelflow.com/about" },
      { label: "Contact",  href: "https://www.reelflow.com/contact" }
    ]}
  ];

  const LEGAL = [
    { label: "Privacy Policy",   href: "https://www.reelflow.com/legal/privacy" },
    { label: "Terms of Use",     href: "https://www.reelflow.com/legal/website-terms-of-use" },
    { label: "Terms of Service", href: "https://www.reelflow.com/legal/terms-of-service" }
  ];

  return (
    <footer className="rf-foot">
      <div className="rf-foot__accent" aria-hidden="true"></div>
      <div className="rf-foot__container">
        <div className="rf-foot__top">
          <div className="rf-foot__brand">
            <a href="https://www.reelflow.com/" className="rf-foot__logo-link">
              <img src={logoSrc} alt="ReelFlow" className="rf-foot__logo" />
            </a>
          </div>
          <div className="rf-foot__cols">
            {COLUMNS.map((col) => (
              <div key={col.label} className="rf-foot__col">
                <p className="rf-foot__col-label">{col.label}</p>
                <ul className="rf-foot__list">
                  {col.links.map((l) => (
                    <li key={l.label}><a className="rf-foot__link" href={l.href}>{l.label}</a></li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
        <div className="rf-foot__bottom">
          <p className="rf-foot__copy">Copyright 2026 ©ReelFlow. All rights reserved.</p>
          <ul className="rf-foot__legal">
            {LEGAL.map((l, i) => (
              <li key={l.label}>
                <a className="rf-foot__link rf-foot__link--legal" href={l.href}>{l.label}</a>
                {i < LEGAL.length - 1 && <span className="rf-foot__legal-sep" aria-hidden="true">·</span>}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;