// Footer.jsx — Dark band with large wordmark, repeat nav, social pills.
const Footer = () => {
  const cols = [
    { t: "Site", links: ["Home", "Work", "Interviews", "Animation", "About", "Contact"] },
    { t: "Services", links: ["Explainer videos", "Interviews & documentary", "Courses & series", "Strategy"] },
    { t: "Contact", links: ["hello@poleycreative.com", "+1 (503) 555-0142", "Portland, OR — USA"] },
  ];
  return (
    <footer className="pc-footer">
      <div className="pc-footer-rivet">
        <span>⎯  Poley Creative</span>
        <span>Est. 2019 · Portland, OR</span>
        <span>© 2026 · All rights reserved</span>
      </div>

      <div className="pc-footer-grid">
        <div className="pc-footer-mark">
          <img src="assets/logo-mark.png" alt="Poley Creative"/>
          <div className="pc-footer-tagline">
            Production &amp; animation<br/>
            for technology teams.
          </div>
        </div>
        {cols.map(c => (
          <div key={c.t} className="pc-footer-col">
            <div className="pc-footer-col-title">{c.t}</div>
            <ul>
              {c.links.map(l => <li key={l}>{l}</li>)}
            </ul>
          </div>
        ))}
      </div>

      <div className="pc-footer-megatype">
        <span>Poley</span><em>Creative</em>
      </div>

      <div className="pc-footer-bottom">
        <span>© 2026. All rights reserved.</span>
        <div className="pc-footer-socials">
          <a href="https://www.instagram.com/poleycreative/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="#000"><rect x="2" y="2" width="20" height="20" rx="5" fill="none" stroke="#000" strokeWidth="2"/><circle cx="12" cy="12" r="4" fill="none" stroke="#000" strokeWidth="2"/><circle cx="17.5" cy="6.5" r="1" fill="#000"/></svg>
          </a>
          <a href="https://www.linkedin.com/company/poleycreative/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="#000"><path d="M4 4h4v16H4zM6 2a2 2 0 100 4 2 2 0 000-4zM10 8h4v2c.6-1.2 2-2.2 4-2.2 3.4 0 4 2.4 4 5.2V20h-4v-6c0-1.4-.5-2.4-2-2.4s-2 1-2 2.4V20h-4z"/></svg>
          </a>
        </div>
      </div>
    </footer>
  );
};
window.Footer = Footer;