// 彤冠茶莊 website — Footer
function Footer({ t, lang, go }) {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const col = (title, links) => (
    <div>
      <div className="tg-eyebrow" style={{ color: "var(--text-on-dark-2)", marginBottom: 16 }}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 11 }}>
        {links.map((l, i) => (
          <li key={i}>
            <a href="#" onClick={(e) => e.preventDefault()} style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--paper-0)", opacity: 0.82 }}>{l}</a>
          </li>
        ))}
      </ul>
    </div>
  );
  return (
    <footer style={{ background: "var(--ink)", color: "var(--paper-0)", paddingTop: "var(--space-9)" }}>
      <div className="tg-container tg-container--wide">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 40, paddingBottom: "var(--space-8)" }} className="tg-foot-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 18 }}>
              <img src="assets/brand/leaf-mark-light.png" alt="" style={{ width: 44, height: 44, objectFit: "contain" }} />
              <span style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 22, letterSpacing: "0.06em" }}>彤冠茶莊</span>
            </div>
            <p style={{ fontFamily: "var(--font-serif)", fontSize: 18, lineHeight: 1.5, color: "var(--text-on-dark-2)", maxWidth: "26ch", margin: 0 }}>{t.footer.tag}</p>
          </div>
          {col(t.footer.shop, t.footLinks.shop)}
          {col(t.footer.about, t.footLinks.about)}
          {col(t.footer.connect, t.footLinks.connect)}
        </div>
        <div style={{ borderTop: "1px solid var(--border-on-dark)", padding: "22px 0 30px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-on-dark-2)" }}>© 2026 {t.footer.rights}</span>
          <div style={{ display: "flex", gap: 14 }}>
            <i data-lucide="camera" style={{ width: 18, height: 18, color: "var(--text-on-dark-2)" }}></i>
            <i data-lucide="mail" style={{ width: 18, height: 18, color: "var(--text-on-dark-2)" }}></i>
            <i data-lucide="leaf" style={{ width: 18, height: 18, color: "var(--text-on-dark-2)" }}></i>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;