const { Logo, Icon, Divider } = window.BuildingInvestDesignSystem_f8840b;

function Footer({ onNavigate, lang }) {
  const t = window.I18N[lang];
  const width = useViewportWidth();
  const cols = width < 640 ? "1fr" : width < 960 ? "1fr 1fr" : "1.4fr 1fr 1fr 1fr";
  const COLS = [
    { h: t.footer.colServices, items: t.footer.servicesItems },
    { h: t.footer.colCompany, items: t.footer.companyItems },
    { h: t.footer.colLegal, items: t.footer.legalItems },
  ];
  const rows = [
    ["map-pin", t.company.address.replace(/, 547215$/, "")],
    ["phone", t.company.phone],
    ["mail", t.company.email],
  ];
  return (
    <footer data-theme="dark" style={{ background: "var(--concrete-950)", paddingTop: "var(--section-y-tight)" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: cols, gap: "var(--space-10)" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-5)" }}>
            <Logo tone="light" height={34} assetPath="assets/" />
            <p style={{ font: "var(--type-body-sm)", color: "var(--alpha-white-72)", maxWidth: "34ch" }}>{t.footer.description}</p>
            <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
              {rows.map(([ic, txt]) => (
                ic === "map-pin" ? (
                  <a key={txt} href={t.company.mapsUrl} target="_blank" rel="noopener noreferrer" style={{ display: "flex", alignItems: "center", gap: "var(--space-3)", font: "var(--type-body-sm)", color: "var(--concrete-300)", borderBottom: "none" }}><Icon name={ic} size={14} color="var(--amber-400)" />{txt}</a>
                ) : (
                  <span key={txt} style={{ display: "flex", alignItems: "center", gap: "var(--space-3)", font: "var(--type-body-sm)", color: "var(--concrete-300)" }}><Icon name={ic} size={14} color="var(--amber-400)" />{txt}</span>
                )
              ))}
            </div>
          </div>
          {COLS.map((c) => (
            <div key={c.h} style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
              <span style={{ font: "var(--weight-semibold) var(--text-xs)/1 var(--font-condensed)", letterSpacing: "var(--tracking-widest)", textTransform: "uppercase", color: "var(--amber-400)" }}>{c.h}</span>
              <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
                {c.items.map((i) => <a key={i} href="#" onClick={(e) => e.preventDefault()} style={{ font: "var(--type-body-sm)", color: "var(--concrete-300)", borderBottom: "none" }}>{i}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: "var(--space-10)", paddingTop: "var(--space-5)", paddingBottom: "var(--space-7)", borderTop: "1px solid var(--alpha-white-12)", display: "flex", justifyContent: "space-between", gap: "var(--space-6)", flexWrap: "wrap" }}>
          <span style={{ font: "var(--type-mono)", fontSize: 11, color: "var(--concrete-500)" }}>{t.company.registryName} · {t.company.registryNumbers}</span>
          <span style={{ font: "var(--type-mono)", fontSize: 11, color: "var(--concrete-500)" }}>{t.footer.copyright}</span>
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { Footer });