// Footer.jsx — with lang support + navigation links + responsive
const Footer = ({ t, onNavigate }) => {
  const _t = t || ((k)=>k);

  const nav = (key) => {
    if (onNavigate) {
      onNavigate(key);
    } else {
      window.dispatchEvent(new CustomEvent("site-navigate", { detail: key }));
    }
  };

  const PRODUCT_LINKS = [
    { label: "001 BEAM",                         action: () => nav("detail") },
    { label: "002 ZEN",                           action: null },
    { label: "003 FOLD",                          action: null },
    { label: _t("editionsLabel") || "EDITIONS",  action: null },
  ];
  const SERVICE_LINKS = [
    { label: _t("shippingLabel") || "SHIPPING",  action: null },
    { label: _t("assemblyLabel") || "ASSEMBLY",  action: null },
    { label: _t("warrantyLabel") || "WARRANTY",  action: null },
    { label: _t("returnsLabel")  || "RETURNS",   action: null },
  ];
  const STUDIO_LINKS = [
    { label: _t("navIdea")    || "IDEA",         action: () => nav("idea") },
    { label: _t("archiveLabel") || "ARCHIVE",    action: null },
    { label: _t("navContact") || "CONTACT",      action: () => nav("contact") },
    { label: _t("pressLabel") || "PRESS",        action: null },
  ];

  const LinkItem = ({ label, action }) => (
    <li
      style={{
        fontSize:11, letterSpacing:"0.15em", textTransform:"uppercase",
        fontWeight:500, color:"#737373",
        cursor: action ? "pointer" : "default",
        transition: action ? "color 0.2s" : "none",
        listStyle:"none",
      }}
      onClick={action || undefined}
      onMouseEnter={action ? (e) => e.currentTarget.style.color="#1A1A1A" : undefined}
      onMouseLeave={action ? (e) => e.currentTarget.style.color="#737373" : undefined}
    >
      {label}
    </li>
  );

  return (
    <footer style={{ background:"#FFFFFF", borderTop:"1px solid #E0E0E0", padding:"64px clamp(20px,5vw,40px) 32px" }}>
      <style>{`
        @media (max-width: 768px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
          .footer-brand { grid-column: 1 / -1 !important; }
          .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center; }
        }
        @media (max-width: 480px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>

      <div className="footer-grid" style={{ display:"grid", gridTemplateColumns:"2fr 1fr 1fr 1fr", gap:48 }}>
        {/* Brand block */}
        <div className="footer-brand">
          <div
            style={{ fontSize:28, fontWeight:300, letterSpacing:"-0.02em", color:"#1A1A1A", cursor:"pointer" }}
            onClick={() => nav("orig-home")}
          >
            post (dot) service
          </div>
          <div style={{ fontFamily:"Georgia,serif", fontSize:14, color:"#737373", marginTop:12, maxWidth:320, lineHeight:1.6 }}>
            {_t("footerTagline")}
          </div>
          <div style={{ marginTop:24, display:"flex", flexDirection:"column", gap:10 }}>
            <a href="mailto:apachi@post-dot-service.com"
              style={{ fontSize:11, letterSpacing:"0.08em", color:"#737373", transition:"color 0.2s", fontFamily:"'Inter',-apple-system,sans-serif" }}
              onMouseEnter={e=>e.currentTarget.style.color="#1A1A1A"}
              onMouseLeave={e=>e.currentTarget.style.color="#737373"}>
              apachi@post-dot-service.com
            </a>
            <a href="https://www.instagram.com/postdotservice/" target="_blank" rel="noopener noreferrer"
              style={{ fontSize:11, letterSpacing:"0.15em", textTransform:"uppercase", fontWeight:500, color:"#737373", transition:"color 0.2s", fontFamily:"'Inter',-apple-system,sans-serif" }}
              onMouseEnter={e=>e.currentTarget.style.color="#1A1A1A"}
              onMouseLeave={e=>e.currentTarget.style.color="#737373"}>
              Instagram →
            </a>
          </div>
        </div>

        {/* Products */}
        <div>
          <div style={{ fontSize:10, letterSpacing:"0.2em", textTransform:"uppercase", fontWeight:500, color:"#1A1A1A", marginBottom:16 }}>
            {_t("footerProducts")}
          </div>
          <ul style={{ margin:0, padding:0, listStyle:"none", display:"flex", flexDirection:"column", gap:8 }}>
            {PRODUCT_LINKS.map(l => <LinkItem key={l.label} {...l}/>)}
          </ul>
        </div>

        {/* Service */}
        <div>
          <div style={{ fontSize:10, letterSpacing:"0.2em", textTransform:"uppercase", fontWeight:500, color:"#1A1A1A", marginBottom:16 }}>
            {_t("footerService")}
          </div>
          <ul style={{ margin:0, padding:0, listStyle:"none", display:"flex", flexDirection:"column", gap:8 }}>
            {SERVICE_LINKS.map(l => <LinkItem key={l.label} {...l}/>)}
          </ul>
        </div>

        {/* Studio */}
        <div>
          <div style={{ fontSize:10, letterSpacing:"0.2em", textTransform:"uppercase", fontWeight:500, color:"#1A1A1A", marginBottom:16 }}>
            {_t("footerStudio")}
          </div>
          <ul style={{ margin:0, padding:0, listStyle:"none", display:"flex", flexDirection:"column", gap:8 }}>
            {STUDIO_LINKS.map(l => <LinkItem key={l.label} {...l}/>)}
          </ul>
        </div>
      </div>

      {/* Bottom bar */}
      <div className="footer-bottom" style={{
        marginTop:64, paddingTop:16, borderTop:"1px solid #E0E0E0",
        display:"flex", justifyContent:"space-between",
        fontSize:10, letterSpacing:"0.2em", textTransform:"uppercase", fontWeight:500, color:"#737373",
      }}>
        <span>{_t("footerCity")}</span>
        <span>{_t("footerCopy")}</span>
        <span>{_t("footerDomain")}</span>
      </div>
    </footer>
  );
};

window.Footer = Footer;