/* global React */

function Footer({ onNav }) {
  const navItems = [
    ["home", "home"],
    ["gallery", "gallery"],
    ["commission", "commissions"],
    ["about", "about"],
  ];
  return (
    <footer style={{
      background: "var(--cream)",
      color: "var(--ink-soft)",
      padding: "48px 0 36px",
      borderTop: "1px solid rgba(42, 33, 24, 0.08)",
      marginTop: 32,
      position: "relative",
    }}>
      <div style={{
        maxWidth: 1120,
        margin: "0 auto",
        padding: "0 32px",
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr 1fr",
          gap: 32,
          alignItems: "start",
          marginBottom: 32,
          flexWrap: "wrap",
        }}>
          <div>
            <div style={{
              fontFamily: "var(--font-display)",
              fontSize: 32,
              color: "var(--ink)",
              letterSpacing: "-0.01em",
              lineHeight: 1,
            }}>
              bah<span style={{ color: "var(--marigold-700)" }}>haus</span>
            </div>
            <div style={{ fontFamily: "var(--font-hand)", fontSize: 22, color: "var(--marigold-700)", marginTop: 6 }}>
              by bárbara — soft portraits, made by hand
            </div>
            <p style={{
              fontFamily: "var(--font-body)",
              fontSize: 14,
              color: "var(--ink-muted)",
              margin: "14px 0 0",
              maxWidth: 360,
              lineHeight: 1.55,
            }}>
              a small commission practice run on weekends. two slots open for autumn — say hi if one belongs to you.
            </p>
          </div>

          <div>
            <Eyebrow>pages</Eyebrow>
            <nav style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 14 }}>
              {navItems.map(([id, label]) => (
                <button key={id} onClick={() => onNav(id)} style={{
                  background: "transparent",
                  border: 0,
                  cursor: "pointer",
                  color: "var(--ink-soft)",
                  fontFamily: "var(--font-body)",
                  fontSize: 14.5,
                  padding: 0,
                  textAlign: "left",
                }}>{label}</button>
              ))}
            </nav>
          </div>

          <div>
            <Eyebrow>elsewhere</Eyebrow>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 14, fontFamily: "var(--font-body)", fontSize: 14.5 }}>
              <a href="https://www.instagram.com/bahausart/" target="_blank" rel="noreferrer" style={{
                color: "var(--marigold-700)",
                fontWeight: 700,
                textDecoration: "none",
              }}>@bahausart on instagram →</a>
              <span style={{ color: "var(--ink-soft)" }}>dm me to start a piece</span>
              <span style={{ color: "var(--ink-muted)", fontSize: 13 }}>i reply within a few days 💌</span>
            </div>
          </div>
        </div>

        <div style={{
          paddingTop: 20,
          borderTop: "1px solid rgba(42,33,24,0.08)",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 16,
          flexWrap: "wrap",
        }}>
          <span style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--ink-muted)", letterSpacing: "0.06em" }}>
            © 2026 bárbara · bahhaus
          </span>
          <span style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--ink-muted)" }}>
            made with <span style={{ color: "var(--coral)" }}>🤍</span> on weekends
          </span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;