/* Footer */

function Footer({ navigate }) {
  const { t } = useT();
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-top">
          <div className="footer-brand">
            <img src="assets/logo.png" alt="AdvancedFlow" style={{ height: 32, filter: "brightness(0) invert(1)", display: "block" }} />
            <h4>{t.footer.h}</h4>
            <p>{t.footer.p}</p>
            <span className="mono-tag">{t.footer.tag}</span>
          </div>

          <div className="footer-col">
            <h5>{t.footer.build}</h5>
            {t.footer.buildLinks.map((l, i) => <a key={i} href="#services" onClick={(e) => {e.preventDefault();navigate && navigate("home");setTimeout(() => document.querySelector("#services")?.scrollIntoView({ behavior: "smooth" }), 60);}}>{l}</a>)}
          </div>

          <div className="footer-col">
            <h5>{t.footer.studio}</h5>
            {t.footer.studioLinks.map((l, i) => {
              const targets = ["#about", "#process", "#faq", "hackathon", "#cta"];
              const tgt = targets[i];
              return (
                <a key={i} href="#" onClick={(e) => {
                  e.preventDefault();
                  if (tgt === "hackathon") {navigate && navigate("hackathon");window.scrollTo({ top: 0 });} else
                  {navigate && navigate("home");setTimeout(() => document.querySelector(tgt)?.scrollIntoView({ behavior: "smooth" }), 60);}
                }}>{l}</a>);

            })}
          </div>

          <div className="footer-col">
            <h5>{t.footer.reach}</h5>
            <a href="mailto:customerservice@advancedflow.cloud">info@<br />advancedflow.cloud</a>
            <a href="tel:+14075584338">+1 (407) 558-4338</a>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
          </div>
        </div>

        <div className="footer-bottom">
          <div>© {new Date().getFullYear()} ADVANCEDFLOW.AI</div>
          <div>SYSTEMS ONLINE · {t.footer.bottom}</div>
        </div>

      </div>
    </footer>);
}

Object.assign(window, { Footer });