/* global React, Wordmark, NAV_ITEMS */

function Footer({ onNavigate }) {
 const year = new Date().getFullYear();
 const col = (title, items) => (
 <div className="col gap-16">
 <div className="eyebrow" style={{ marginBottom: 4 }}>{title}</div>
 <div className="col gap-8">
 {items.map((i) => (
 <a
 key={i.label}
 href={i.href || "#"}
 onClick={(e) => {
 if (i.to) { e.preventDefault(); onNavigate(i.to); }
 }}
 style={{ color: "var(--ink-2)", fontSize: 14 }}
 onMouseEnter={(e) => (e.currentTarget.style.color = "var(--ink)")}
 onMouseLeave={(e) => (e.currentTarget.style.color = "var(--ink-2)")}
 >
 {i.label}
 </a>
 ))}
 </div>
 </div>
 );

 return (
 <footer style={{ borderTop: "1px solid var(--line)", background: "var(--bg-elev)", marginTop: 0 }}>
 <div className="container" style={{ paddingTop: 80, paddingBottom: 32 }}>
 <div
 style={{
 display: "grid",
 gridTemplateColumns: "1.6fr 1fr 1fr",
 gap: 40,
 paddingBottom: 60,
 }}
 className="footer-grid"
 >
 <div className="col gap-16 footer-brand">
 <Wordmark size={18} />
 <p style={{ fontSize: 14, color: "var(--ink-3)", maxWidth: 280, lineHeight: 1.6 }}>
 소외된 경험에 귀 기울이고,<br />
 불편함을 놓치지 않는 서비스를 만듭니다.
 </p>
 </div>

 {col("바로가기", [
 { label: "회사 소개", to: "about" },
 { label: "제품", to: "products" },
 { label: "투자정보", to: "ir" },
 ])}
 {col("문의", [
 { label: "문의하기", to: "contact" },
 { label: "contact@eonlab.kr", href: "mailto:contact@eonlab.kr" },
 ])}
 </div>

 <hr className="hr" />

 <div
 style={{
 display: "flex",
 justifyContent: "space-between",
 alignItems: "center",
 flexWrap: "wrap",
 gap: 16,
 paddingTop: 24,
 fontSize: 12.5,
 color: "var(--ink-3)",
 letterSpacing: "0.02em",
 }}
 >
 <div>© {year} EONLAB · 충청북도 청주시 서원구 내수동로108번길 4층</div>
 <div className="row gap-24" style={{ flexWrap: "wrap" }}>
 <span>사업자등록 263-54-01020</span>
 <span>통신판매업 2026-충북청주-0103</span>
 <a href="#" style={{ color: "var(--ink-3)" }}>개인정보처리방침</a>
 <a href="#" style={{ color: "var(--ink-3)" }}>이용약관</a>
 </div>
 </div>
 </div>

 <style>{`
 @media (max-width: 880px) {
 .footer-grid {
 grid-template-columns: 1fr 1fr !important;
 }
 .footer-brand {
 grid-column: 1 / -1;
 }
 }
 `}</style>
 </footer>
 );
}

window.Footer = Footer;
