/* Footer — about, contact, NZ map ASCII, copyright. */

function Footer() {
  return (
    <footer id="about" style={{
      marginTop: 24,
      borderTop: "1.5px solid var(--ss-mulberry)",
      paddingTop: 36,
      paddingBottom: 48,
    }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: "1.2fr 1fr 1fr",
        gap: 36,
        marginBottom: 36,
      }} className="footer-grid">
        {/* About — bio TBC. Design tool fabricated full surname, founding year
            "2018", count "ten so far", and "one cat". Brief leaves all of those
            unfilled. */}
        <div>
          <div className="eyebrow pixel-text" style={{ marginBottom: 12 }}>
            ▸ about the studio
          </div>
          <h3 className="display" style={{ fontSize: 40, margin: "0 0 14px" }}>
            one person.<br/>small games.<br/>kapiti coast.
          </h3>
          <p className="pixel-text" style={{
            fontFamily: "basis33, monospace",
            fontSize: 17, lineHeight: 1.55,
            color: "var(--ss-navy)",
            maxWidth: "32ch",
            margin: 0,
          }}>
            skipstone is alex, a solo developer on the kapiti coast, new zealand.
            small, experimental games since 2024. prolific over precious.
          </p>
        </div>

        {/* NZ pixel map */}
        <NZMap/>

        {/* Contact */}
        <div>
          <div className="eyebrow pixel-text" style={{ marginBottom: 12 }}>
            ▸ say hi
          </div>
          {/* Studio email locked as alex@skipstone.co.nz (single inbox, press +
              general). Any future contact form on the site must be tested
              end-to-end to confirm delivery to that address before launch. */}
          <div className="pixel-text" style={{
            fontFamily: "basis33, monospace",
            fontSize: 17, lineHeight: 1.6,
            color: "var(--ss-navy)",
          }}>
            <div>
              <span style={{ color: "var(--ss-mulberry)" }}>mail:</span>{" "}
              <a href="mailto:alex@skipstone.co.nz" className="lnk">alex@skipstone.co.nz</a>
            </div>
            <div>
              <span style={{ color: "var(--ss-mulberry)" }}>ig:</span>{" "}
              <a href="https://www.instagram.com/skipstone_studio/"
                 target="_blank" rel="noopener noreferrer"
                 className="lnk">@skipstone_studio&nbsp;↗</a>
            </div>
          </div>
          <div className="pixel-text" style={{ marginTop: 18 }}>
            <div className="eyebrow pixel-text" style={{ marginBottom: 6 }}>
              keyboard
            </div>
            <div style={{
              fontFamily: "basis33, monospace",
              fontSize: 13,
              color: "var(--ss-mulberry)",
              letterSpacing: "0.04em",
            }}>
              <span className="kbd">↑</span><span className="kbd">↑</span>
              <span className="kbd">↓</span><span className="kbd">↓</span>
              <span className="kbd">←</span><span className="kbd">→</span>
              <span className="kbd">←</span><span className="kbd">→</span>
              <span className="kbd">b</span><span className="kbd">a</span>
              <div style={{ marginTop: 4, opacity: 0.7 }}>(try it)</div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom strip */}
      <div style={{
        display: "flex", justifyContent: "space-between", flexWrap: "wrap",
        gap: "8px 28px", paddingTop: 18,
        borderTop: "1px dashed color-mix(in oklab, var(--ss-mulberry) 35%, transparent)",
        fontFamily: "basis33, monospace",
        fontSize: 13,
        color: "var(--ss-mulberry)",
        letterSpacing: "0.06em",
      }} className="pixel-text">
        <span>© 2026 skipstone · made on the kapiti coast, aotearoa nz</span>
        <PoweredByPresence/>
        <span style={{ display: "inline-flex", gap: 18 }}>
          <a href="#" className="lnk">privacy</a>
          <a href="#" className="lnk">press kit</a>
          <a href="#" className="lnk">rss</a>
          <a href="#" className="lnk">colophon</a>
        </span>
      </div>
    </footer>
  );
}

function NZMap() {
  // 18×22 pixel map of Aotearoa. Trying to read distinctly as NZ at small
  // sizes — features that pull the most weight:
  //   • Northland: a 1px-wide peninsula tail at the top
  //   • East Cape: rightmost projection of the North Island
  //   • Wellington: 2-cell point at the bottom of the North Island
  //   • Cook Strait: a clear 2-row sea gap
  //   • South Island: longer than wide, slight east bulge for Banks Peninsula,
  //     tapering south to a Stewart-Island-ish dot
  // X marks Kapiti Coast — west coast of the lower North Island, one cell
  // north of where Wellington tapers in.
  const map = [
    "..................",
    ".........##.......",
    ".........#........",
    "........##........",
    ".......####.......",
    "......######......",
    ".....#########....",
    "....##########....",
    "....##########....",
    "....X#########....",
    ".....########.....",
    "......####........",
    ".......##.........",
    "..................",
    "..................",
    "....####..........",
    "..########........",
    ".##########.......",
    ".###########......",
    "..##########......",
    "...########.......",
    "....######........",
  ];

  return (
    <div>
      <div className="eyebrow pixel-text" style={{ marginBottom: 12 }}>
        ▸ where
      </div>
      <div style={{
        display: "inline-block",
        padding: 12,
        border: "1.5px solid var(--ss-mulberry)",
        background: "var(--ss-bone-warm)",
        boxShadow: "2px 2px 0 var(--ss-mulberry)",
        fontFamily: "basis33, monospace",
        fontSize: 0,
        lineHeight: 0,
      }}>
        {map.map((row, y) => (
          <div key={y} style={{ display: "flex" }}>
            {row.split("").map((c, x) => (
              <span key={x} style={{
                width: 8, height: 8,
                background: c === "#" ? "var(--ss-mulberry)"
                          : c === "X" ? "var(--ss-mint)"
                          : "transparent",
                display: "inline-block",
                animation: c === "X" ? "twinkle 1.4s steps(2,end) infinite" : "none",
              }}/>
            ))}
          </div>
        ))}
      </div>
      <div className="pixel-text" style={{
        marginTop: 8,
        fontFamily: "basis33, monospace",
        fontSize: 13,
        color: "var(--ss-mulberry)",
      }}>
        <span style={{
          display: "inline-block", width: 8, height: 8, marginRight: 6,
          background: "var(--ss-mint)", verticalAlign: -1,
        }}/>
        waikanae, kapiti coast
        <div style={{ opacity: 0.7, marginTop: 4 }}>40°53′s · 175°04′e</div>
      </div>
    </div>
  );
}

function PoweredByPresence() {
  return (
    <a href="https://yourpresence.co.nz"
       target="_blank" rel="noopener noreferrer"
       className="lnk"
       style={{
         display: "inline-flex", alignItems: "center", gap: 7,
         textDecoration: "none",
       }}>
      <img src="assets/presence-mark.svg"
           width="16" height="16" alt=""
           style={{ display: "block", flex: "none" }}/>
      <span>powered by presence</span>
    </a>
  );
}

window.Footer = Footer;