// Footer.jsx — final CTA section (8) + legal footer (9).

function FinalCta() {
  return (
    <section className="kpi-section kpi-finalcta on-ink" id="contact" data-screen-label="08 Final CTA">
      <div className="kpi-container">
        <div className="kpi-finalcta-inner">
          <span className="kpi-numbered kpi-reveal">— 08 · Get in touch</span>
          <h2 className="kpi-display-l kpi-finalcta-title kpi-reveal">
            Let's put the frontier<br/>
            <em>to work in your research.</em>
          </h2>
          <p className="kpi-lead kpi-reveal" style={{ maxWidth: '58ch' }}>
            Tell us where you are — a question to answer, a team to enable, a
            strategy to build. We'll meet you there.
          </p>
          <div className="kpi-finalcta-actions kpi-reveal">
            <a href="mailto:hello@kpi6.com" className="kpi-btn kpi-btn-primary">Talk to us</a>
            <a href="https://genmr.co" target="_blank" rel="noopener" className="kpi-btn kpi-btn-secondary">Explore the products</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function KpiFooter() {
  const cols = [
    { title: 'What we do', items: [
      { label: 'Research, done by us', href: '#research' },
      { label: 'The products', href: '#products' },
      { label: 'Training & advisory', href: '#training' },
    ]},
    { title: 'Research', items: [
      { label: 'Social & web listening', href: '#research' },
      { label: 'Market research · digital twins', href: '#research' },
      { label: 'Audience & segmentation', href: '#research' },
      { label: 'Brand & competitor intelligence', href: '#research' },
    ]},
    { title: 'Products', items: [
      { label: 'Brynx',     href: 'https://genmr.co' },
      { label: 'DTwin',     href: 'https://genmr.co' },
      { label: 'Marketear', href: 'https://genmr.co' },
      { label: 'CrewRev',   href: 'https://genmr.co' },
      { label: 'InfluRep',  href: 'https://genmr.co' },
      { label: 'Geoky',     href: 'https://genmr.co' },
    ]},
    { title: 'Contact', items: [
      { label: 'hello@kpi6.com', href: 'mailto:hello@kpi6.com' },
      { label: 'Talk to us',     href: '#contact' },
    ]},
  ];

  return (
    <footer className="kpi-footer on-ink">
      <div className="kpi-container">
        <div className="kpi-footer-top">
          <div className="kpi-footer-mark">
            <img src="assets/kpi6-logo-white.png" alt="KPI6" />
            <div className="kpi-footer-tag kpi-small">
              At the frontier of consumer research. Now generative.
            </div>
          </div>
          <nav className="kpi-footer-cols" aria-label="Footer">
            {cols.map(col => (
              <div key={col.title} className="kpi-footer-col">
                <div className="kpi-meta kpi-footer-col-title">{col.title}</div>
                <ul className="kpi-footer-list">
                  {col.items.map(item => (
                    <li key={item.label}>
                      <a className="kpi-footer-link" href={item.href}>{item.label}</a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </nav>
        </div>

        <hr className="kpi-footer-rule"/>

        <div className="kpi-footer-bottom">
          <div className="kpi-small kpi-footer-legal">
            KPI6 is a brand of KPI6 Srl (VAT IT02687020350). <br/>
            KPI6<sup>®</sup> is a trademark of KPI6 Srl.
          </div>
          <div className="kpi-small kpi-footer-legal-meta">
            © {new Date().getFullYear()} KPI6 Srl · All rights reserved
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { FinalCta, KpiFooter });