// Site-wide footer with grouped navigation links.
//
// ── EDIT YOUR SOCIAL LINKS HERE ──────────────────────────────────────────────
// Paste your full profile URLs. Leave a value empty ("") to hide that icon.
const SOCIAL_LINKS = {
  instagram: "https://www.instagram.com/maciejmusicofficial/",
  linkedin:  "https://www.linkedin.com/in/maciej-romanowski-7044a0240/",
};
// ─────────────────────────────────────────────────────────────────────────────

function SiteFooter({ go, variant = "studio" }) {
  const services = [
    ["01", "Score & Part Preparation"],
    ["02", "Orchestration & Arranging"],
    ["03", "Notation Input / Digitisation"],
    ["04", "Transposition"],
    ["05", "Audio Transcription"],
    ["06", "Demo / Mockup Audio"],
    ["07", "Printing, Binding & Delivery"]
  ];

  return (
    <footer className="site-footer">
      <div className="site-footer-grid">
        {/* Brand column */}
        <div className="site-footer-col site-footer-brand">
          <div className="mono-sm" style={{ marginBottom: 12 }}>Romanowski</div>
          <button type="button" className="site-footer-wordmark" onClick={() => go("home")}>
            Composer<br />& Studio.
          </button>
          <div className="mono-sm" style={{ marginTop: 16, color: "var(--fg-muted)" }}>
            London<br />MMXXVI
          </div>
        </div>

        {/* Studio services */}
        <div className="site-footer-col">
          <div className="site-footer-heading">Studio Services</div>
          <ul className="site-footer-list">
            {services.map(([n, name]) => (
              <li key={n}>
                <button type="button" className="site-footer-link" onClick={() => go(`service:${n}`)}>
                  <span className="site-footer-num">{n}</span>
                  <span>{name}</span>
                </button>
              </li>
            ))}
          </ul>
        </div>

        {/* Tools / pages */}
        <div className="site-footer-col">
          <div className="site-footer-heading">Studio</div>
          <ul className="site-footer-list">
            <li><button type="button" className="site-footer-link" onClick={() => go("studio")}>All services</button></li>
            <li><button type="button" className="site-footer-link" onClick={() => go("studio", "estimator")}>Quick estimator</button></li>
            <li><button type="button" className="site-footer-link" onClick={() => go("submit")}>Submit a score</button></li>
            <li><button type="button" className="site-footer-link" onClick={() => go("faq")}>FAQ</button></li>
          </ul>

          <div className="site-footer-heading" style={{ marginTop: 28 }}>Composer</div>
          <ul className="site-footer-list">
            <li><button type="button" className="site-footer-link" onClick={() => go("composer", "biography")}>Biography</button></li>
            <li><button type="button" className="site-footer-link" onClick={() => go("composer", "listen")}>Listen</button></li>
          </ul>
        </div>

        {/* Contact */}
        <div className="site-footer-col">
          <div className="site-footer-heading">Contact</div>
          <ul className="site-footer-list">
            <li><a className="site-footer-link" href="mailto:hello@mrmusicstudio.com">hello@mrmusicstudio.com</a></li>
          </ul>

          <div className="site-footer-heading" style={{ marginTop: 28 }}>Follow</div>
          <div className="site-footer-social">
            {SOCIAL_LINKS.instagram && (
              <a className="site-footer-social-link" href={SOCIAL_LINKS.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                <svg width="19" height="19" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                  <rect x="2.5" y="2.5" width="19" height="19" rx="5" stroke="currentColor" strokeWidth="1.6" />
                  <circle cx="12" cy="12" r="4.2" stroke="currentColor" strokeWidth="1.6" />
                  <circle cx="17.4" cy="6.6" r="1.3" fill="currentColor" />
                </svg>
                <span>Instagram</span>
              </a>
            )}
            {SOCIAL_LINKS.linkedin && (
              <a className="site-footer-social-link" href={SOCIAL_LINKS.linkedin} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
                <svg width="19" height="19" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                  <rect x="2.5" y="2.5" width="19" height="19" rx="4" stroke="currentColor" strokeWidth="1.6" />
                  <path d="M7 10.5V17" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
                  <circle cx="7" cy="7.3" r="1.1" fill="currentColor" />
                  <path d="M11 17v-3.4c0-1.5 1-2.4 2.3-2.4 1.2 0 2.2.9 2.2 2.5V17" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                <span>LinkedIn</span>
              </a>
            )}
          </div>

          <div className="site-footer-heading" style={{ marginTop: 28 }}>File types</div>
          <ul className="site-footer-list site-footer-list--mono">
            <li>.sib  ·  Sibelius</li>
            <li>.dorico  ·  Dorico</li>
            <li>.musicxml / .mxl</li>
            <li>.pdf  ·  300 dpi scans</li>
          </ul>
        </div>
      </div>

      <div className="site-footer-bar">
        <div className="mono-sm">Romanowski Studio <span style={{ color: "var(--accent)" }}>●</span> London</div>
        <div className="mono-sm">© MMXXVI · All rights reserved</div>
        <div className="mono-sm">
          <button type="button" className="site-footer-link" onClick={() => go("faq")}>NDA & terms</button>
        </div>
      </div>
    </footer>
  );
}

window.SiteFooter = SiteFooter;