// REWIND website — site footer. Single source for Visit / Hours / Contact
// (consolidated here so it never drifts from a second copy). Social links use
// Lucide icons (open-source, MIT) — thin strokes to sit with the hairline
// language. General contact = info@; events@ is reserved for Private.
function RWIcon({ name }) {
  const p = { width: 19, height: 19, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor",
    strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  if (name === "instagram") return (
    <svg {...p}><rect width="20" height="20" x="2" y="2" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" /></svg>);

  if (name === "phone") return (
    <svg {...p}><path d="M13.83 19.17a15.9 15.9 0 0 1-9-9A2 2 0 0 1 6.1 7.6l1.6-.5a1.5 1.5 0 0 1 1.8.9l.7 1.7a1.5 1.5 0 0 1-.4 1.7l-.9.8a11.6 11.6 0 0 0 4 4l.8-.9a1.5 1.5 0 0 1 1.7-.4l1.7.7a1.5 1.5 0 0 1 .9 1.8l-.5 1.6a2 2 0 0 1-2.57 1.27Z" /></svg>);

  if (name === "pin") return (
    <svg {...p}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" /><circle cx="12" cy="10" r="3" /></svg>);

  return (
    <svg {...p}><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></svg>);

}

function SiteFooter({ go }) {
  const D = window.RW_DATA;
  const U = window.RW_CONTENT.ui.footer;
  return (
    <footer className="foot">
      <div className="wrap">
        {/* brand · explore · find us · contact */}
        <div className="foot-grid">
          <div>
            <div className="fh">{U.follow}</div>
            <div className="social">
              <a href={D.contact.instagramUrl} target="_blank" rel="noopener" aria-label="Instagram" title={D.contact.instagram}><RWIcon name="instagram" /></a>
              <a href={D.contact.xhsUrl} target="_blank" rel="noopener" aria-label="RedNote" title="RedNote / 小红书"><img className="xhs" src={RWA("ic-xhs")} alt="" /></a>
              <a href={"mailto:" + D.contact.general} aria-label="Email" title={D.contact.general}><RWIcon name="mail" /></a>
            </div>
          </div>
          <div>
            <div className="fh">{U.location}</div>
            <div className="fl">
              <a href={D.contact.mapUrl} target="_blank" rel="noopener"
              style={{ textDecoration: "underline", textUnderlineOffset: "3px" }}>
                <span data-rw-field="address">{D.contact.address}</span><br />{D.contact.city}
              </a>
            </div>
          </div>
          <div>
            <div className="fh">{U.hours}</div>
            <table className="hours-tbl">
              <tbody>
                {(D.footerHours || []).map((h) =>
                  <tr key={h[0]} className={h[1] ? "" : "closed"}>
                    <td className="hd">{h[0]}</td>
                    <td>{h[1] || "Closed"}</td>
                  </tr>
                )}
              </tbody>
            </table>
            {D.footerHoursNote &&
              <p className="hours-note" data-rw-field="footerHoursNote">{D.footerHoursNote}</p>}
          </div>
          <div>
            <div className="fh">{U.contact}</div>
            <div className="fl" style={{ display: "flex", flexDirection: "column", gap: "10px", lineHeight: 1.4 }}>
              <a href={D.contact.phoneHref} style={{ display: "flex", alignItems: "center", gap: "10px" }}>
                <span style={{ flex: "0 0 auto", color: "var(--ink-subtle)", display: "flex" }}><RWIcon name="phone" /></span>
                <span data-rw-field="phone">{D.contact.phone}</span>
              </a>
              <a href={"mailto:" + D.contact.general} style={{ display: "flex", alignItems: "center", gap: "10px", textTransform: "none", letterSpacing: "0.06em" }}>
                <span style={{ flex: "0 0 auto", color: "var(--ink-subtle)", display: "flex" }}><RWIcon name="mail" /></span>
                <span data-rw-field="generalEmail">{D.contact.general.toLowerCase()}</span>
              </a>
            </div>
          </div>
        </div>
        <p className="stamp">{U.stamp}</p>
      </div>
    </footer>);

}
window.SiteFooter = SiteFooter;