/* global React, useViewport */

function Footer({ setScreen }) {
  const vw = useViewport();
  const isMobile = vw < 720;
  const isNarrow = vw < 480;

  // Each item: [label, screen-key-or-null, optional-href]. null screen means
  // "not yet wired" (renders as plain text). External hrefs use <a target>.
  const cols = [
    {
      label: "Company",
      items: [
        { label: "About",               screen: "about" },
        { label: "Derlot Renew",        screen: "circular-economy" },
        { label: "Circular economy",    screen: "circular-economy" },
        { label: "Design capabilities", screen: "design-capabilities" },
        { label: "Contact",             screen: "distributors" },
      ],
    },
    {
      label: "Policies",
      items: [
        { label: "Warranty",           screen: "policy-warranty" },
        { label: "Care & maintenance", screen: "policy-care" },
        { label: "Privacy",            screen: "policy-privacy" },
        { label: "Terms",              screen: "policy-terms" },
        { label: "Accessibility",      screen: "policy-accessibility" },
        { label: "Modern slavery",     screen: "policy-modern-slavery" },
      ],
    },
  ];
  const socials = [
    { label: "Instagram", href: "https://instagram.com/derlot_official" },
    { label: "LinkedIn",  href: "https://www.linkedin.com/company/7648799" },
    { label: "Pinterest", href: "https://au.pinterest.com/derlot_official" },
    { label: "Facebook",  href: "https://www.facebook.com/derlotofficial" },
  ];
  return (
    <footer style={{ background: "#1a1917", color: "#f5f3ef", padding: isMobile ? "56px 20px 32px" : "80px max(24px, 3vw) 40px", marginTop: isMobile ? 80 : 120 }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: isNarrow ? "1fr" : isMobile ? "1fr 1fr" : "2fr 1fr 1fr 1.2fr", gap: isMobile ? 32 : 40, rowGap: isMobile ? 32 : 32 }}>
          <div style={{ gridColumn: isMobile ? "1 / -1" : "auto" }}>
            <img src="assets/logos/derlot-wordmark-white.svg" style={{ height: 20, marginBottom: 24 }} alt="Derlot" />
            <p style={{ fontSize: isMobile ? 14 : 16, lineHeight: 1.5, fontWeight: 500, maxWidth: "44ch", margin: 0, color: "#f5f3ef" }}>
              An Australian design brand. Contemporary furniture and lighting, specified for commercial, hospitality, education, public space, and airport environments.
            </p>
            <div style={{ marginTop: 28, fontSize: 12, lineHeight: 1.85, color: "#a8a49a", letterSpacing: "0.02em" }}>
              Level 6, 371 Queen Street<br />
              Brisbane CBD QLD 4000, Australia<br />
              <a href="mailto:contact@derlotgroup.com" style={{
                color: "#a8a49a",
                transition: "color 160ms ease",
              }}
                onMouseEnter={(e) => { e.currentTarget.style.color = "#f5f3ef"; }}
                onMouseLeave={(e) => { e.currentTarget.style.color = "#a8a49a"; }}>
                contact@derlotgroup.com
              </a>
            </div>
          </div>
          {cols.map((col) => (
            <div key={col.label}>
              <div style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "#a8a49a", fontWeight: 500, marginBottom: 14 }}>{col.label}</div>
              {col.items.map((i) => {
                const clickable = !!(i.screen && setScreen);
                return (
                  <div
                    key={i.label}
                    onClick={clickable ? () => setScreen(i.screen) : undefined}
                    style={{
                      fontSize: 13,
                      lineHeight: 1.85,
                      color: "#f5f3ef",
                      cursor: clickable ? "pointer" : "default",
                      transition: "color 160ms ease",
                    }}
                    onMouseEnter={clickable ? (e) => { e.currentTarget.style.color = "#a8a49a"; } : undefined}
                    onMouseLeave={clickable ? (e) => { e.currentTarget.style.color = "#f5f3ef"; } : undefined}
                  >
                    {i.label}
                  </div>
                );
              })}
            </div>
          ))}
          <div>
            <div style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "#a8a49a", fontWeight: 500, marginBottom: 14 }}>Follow</div>
            {socials.map((s) => (
              <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer"
                 style={{ display: "block", fontSize: 13, lineHeight: 1.85, color: "#f5f3ef", transition: "color 160ms ease" }}
                 onMouseEnter={(e) => { e.currentTarget.style.color = "#a8a49a"; }}
                 onMouseLeave={(e) => { e.currentTarget.style.color = "#f5f3ef"; }}>
                {s.label} ↗
              </a>
            ))}
          </div>
        </div>

        <div style={{ height: "0.5px", background: "rgba(245,243,239,0.22)", margin: isMobile ? "40px 0 16px" : "56px 0 20px" }} />

        <div style={{ display: "flex", flexDirection: isMobile ? "column" : "row", justifyContent: "space-between", fontSize: 11, color: "#a8a49a", letterSpacing: "0.04em", flexWrap: "wrap", gap: isMobile ? 8 : 16 }}>
          <div>© {new Date().getFullYear()} Derlot Group</div>
          <div>GECA · FSC</div>
          <div>Brisbane / Los Angeles / Zug</div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;