/* ============================================================
 * Footer, full marketing footer
 * Product (modules) · Resources · Company · Legal
 *
 * Every link here resolves to something real. The previous version
 * carried a "Solutions" column (Hotel Groups / Independent Hotels /
 * Resorts / Boutique) and a Company column (About / Customers / Careers
 * / Press / Contact) pointing at local pages — none of which exist
 * anywhere in this repo or the live app (`about.html`, `careers.html`,
 * `solutions/*.html`, `privacy.html`, `terms.html`, `cookies.html`,
 * `dpa.html` — all 404). A footer of dead links reads as a different,
 * less-finished product than the one a prospect is about to log into.
 *
 * Resources/Company now point at pages that are actually live:
 * `/developers/docs` and `/changelog` are real routes in the app itself
 * (not this static preview), so they're absolute paths, not
 * `${basePath}`-relative. Company links go to hotelinking.com, the
 * actual legal entity GuestMaker is a product of — GuestMaker itself
 * has no separate legal existence, confirmed against the app's own
 * settings footer (`components/shared/app-footer.tsx`), which sends
 * Privacy/Terms/Legal Notice to hotelinking.com already. Every
 * off-domain link (Company column + the legal bar) carries a small
 * arrow so leaving the site is never a surprise.
 * ============================================================ */

const FOOT_HOTELINKING = "https://www.hotelinking.com/en";

const FOOT_LEGAL_LINKS = [
  { label: "Privacy Policy", href: `${FOOT_HOTELINKING}/terms-of-use-and-privacy-policy/` },
  { label: "Terms of Service", href: `${FOOT_HOTELINKING}/terms-and-policies/hotelinking-terms-and-conditions/` },
  { label: "Legal Notice", href: `${FOOT_HOTELINKING}/legal-notice/` },
];

const FOOT_COMPANY_LINKS = [
  { label: "About Hotelinking", href: `${FOOT_HOTELINKING}/about-us/` },
  { label: "Press", href: `${FOOT_HOTELINKING}/press/` },
  { label: "Contact", href: `${FOOT_HOTELINKING}/contact-and-location/` },
  { label: "Customer Support", href: `${FOOT_HOTELINKING}/24-7-support/` },
];

// Real Next.js app routes, absolute — this static preview has no build
// of its own, so these are always the live app, never `${basePath}`.
const FOOT_RESOURCES_LINKS = [
  { label: "Developer Docs", href: "/developers/docs" },
  { label: "Changelog", href: "/changelog" },
  { label: "Blog", href: "/blog" },
];

const FootExternalIcon = ({ size = 10 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"
       className="gm-foot-ext">
    <path d="M7 7h10v10" /><path d="M7 17 17 7" />
  </svg>
);

const SectionFooter = ({ basePath = "" }) => {
  // Flatten platformModules, split parents (e.g. Channels) into their children
  const productLinks = (window.platformModules || []).flatMap(m => {
    if (m.children) {
      return m.children.map(c => ({ label: c.label, href: `${basePath}${c.href}` }));
    }
    return [{ label: m.label, href: `${basePath}${m.href}` }];
  });

  return (
    <footer className="gm-foot">
      <div className="gm-foot-inner">
        {/* Top, brand + 3 link cols */}
        <div className="gm-foot-top">
          <div className="gm-foot-brand">
            <a href={`${basePath}index-v2.html`} className="gm-foot-logo">
              <span className="gm-foot-mark"><GMMark size={32} /></span>
              <span>GuestMaker</span>
            </a>
            <p className="gm-foot-tag">
              The Omnichannel AI CRM <br />for Hotel Groups.
            </p>
            <a href={`${FOOT_HOTELINKING}/`} target="_blank" rel="noopener noreferrer" className="gm-foot-by">
              <span className="gm-foot-by-dot" />
              by Hotelinking
            </a>

            {/* Meta Business Partner.
                The official badge artwork is distributed through Meta's
                partner portal under brand terms that do not permit
                redrawing it, so this is a typographic credential rather
                than a reproduction of the mark. Swap in the supplied SVG
                once it is downloaded from the portal; the wrapper is sized
                for it. */}
            <div className="gm-foot-cred">
              <span className="gm-foot-cred-tick" aria-hidden="true">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" strokeWidth="3" strokeLinecap="round"
                     strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
              </span>
              <span className="gm-foot-cred-t">
                {/* The margin spaces these visually, but without real
                    whitespace a screen reader and a copy-paste both get
                    "METABUSINESS PARTNER". */}
                <span className="gm-foot-cred-k">Meta</span>{" "}
                Business Partner
              </span>
            </div>
          </div>

          <div className="gm-foot-cols">
            <div>
              <div className="gm-foot-h">Platform</div>
              <ul>
                {productLinks.map(l => (
                  <li key={l.href}><a href={l.href}>{l.label}</a></li>
                ))}
              </ul>
            </div>
            <div>
              <div className="gm-foot-h">Resources</div>
              <ul>
                {FOOT_RESOURCES_LINKS.map(l => (
                  <li key={l.href}><a href={l.href}>{l.label}</a></li>
                ))}
                <li><a href={`${basePath}integrations.html`}>Integrations</a></li>
              </ul>
            </div>
            <div>
              <div className="gm-foot-h">Company</div>
              <ul>
                {FOOT_COMPANY_LINKS.map(l => (
                  <li key={l.href}>
                    <a href={l.href} target="_blank" rel="noopener noreferrer">
                      {l.label}<FootExternalIcon />
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>

        {/* Bottom */}
        <div className="gm-foot-base">
          <div className="gm-foot-base-left">
            <span>© 2026 GuestMaker · Hotelinking, S.L.</span>
            <span className="gm-foot-base-sep">·</span>
            <span>Palma de Mallorca - Spain</span>
          </div>
          <div className="gm-foot-base-right">
            {FOOT_LEGAL_LINKS.map(l => (
              <a key={l.href} href={l.href} target="_blank" rel="noopener noreferrer">
                {l.label}<FootExternalIcon size={9} />
              </a>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .gm-foot {
          margin-top: 120px;
          background: var(--bg-elev-1);
          border-top: 1px solid var(--hairline);
          color: var(--ink-2);
        }
        [data-theme="light"] .gm-foot { background: var(--bg-elev-1); }

        .gm-foot-inner {
          max-width: var(--max-w);
          margin: 0 auto;
          padding: 80px var(--gutter) 28px;
        }

        .gm-foot-top {
          display: grid;
          grid-template-columns: 1.2fr 3fr;
          gap: 80px;
          padding-bottom: 60px;
        }

        .gm-foot-brand { max-width: 280px; }
        .gm-foot-logo {
          display: inline-flex; align-items: center; gap: 12px;
          font-family: var(--f-sans); font-weight: 600; font-size: 18px; color: var(--ink);
          letter-spacing: -0.01em;
        }
        .gm-foot-mark { width: 34px; height: 34px; display: grid; place-items: center; }
        .gm-foot-tag {
          margin-top: 20px;
          font-size: 14px; line-height: 1.55;
          color: var(--ink-3);
        }
        .gm-foot-by {
          margin-top: 28px;
          font-size: 12px; font-family: var(--f-mono); letter-spacing: 0.06em;
          color: var(--ink-4);
          display: inline-flex; align-items: center; gap: 8px;
          transition: color .15s ease;
        }
        .gm-foot-by:hover { color: var(--ink-2); }
        .gm-foot-by-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

        /* Partner credential. Quiet by design: a trust mark that shouts
           reads as compensating for something. min-height holds the row so
           dropping the official SVG in later does not reflow the column. */
        .gm-foot-cred {
          margin-top: 18px;
          display: inline-flex; align-items: center; gap: 9px;
          min-height: 30px;
          padding: 6px 13px 6px 9px;
          border: 1px solid var(--hairline);
          border-radius: 999px;
          transition: border-color .25s ease;
        }
        .gm-foot-cred:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
        .gm-foot-cred-tick {
          width: 17px; height: 17px; flex-shrink: 0;
          display: grid; place-items: center;
          border-radius: 50%;
          background: color-mix(in srgb, var(--accent) 16%, transparent);
          color: var(--accent);
        }
        .gm-foot-cred-t {
          font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
          color: var(--ink-3);
          white-space: nowrap;
        }
        .gm-foot-cred-k { color: var(--ink-2); font-weight: 600; margin-right: 5px; }

        .gm-foot-cols {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 32px;
        }
        .gm-foot-h {
          font-family: var(--f-sans);
          font-size: 12px; font-weight: 600;
          letter-spacing: 0.08em; text-transform: uppercase;
          color: var(--ink); margin-bottom: 18px;
        }
        .gm-foot ul { list-style: none; margin: 0; padding: 0; }
        .gm-foot li { margin-bottom: 10px; }
        .gm-foot a {
          font-size: 13.5px; color: var(--ink-3);
          transition: color .15s ease;
          display: inline-flex; align-items: center; gap: 5px;
        }
        .gm-foot a:hover { color: var(--ink); }
        .gm-foot-ext { opacity: 0.55; transition: opacity .15s ease, transform .15s ease; }
        .gm-foot a:hover .gm-foot-ext { opacity: 0.9; transform: translate(1px, -1px); }

        .gm-foot-base {
          padding-top: 28px;
          border-top: 1px solid var(--hairline);
          display: flex; justify-content: space-between; align-items: center;
          flex-wrap: wrap; gap: 20px;
          font-size: 12px;
        }
        .gm-foot-base-left { color: var(--ink-4); display: inline-flex; gap: 12px; flex-wrap: wrap; }
        .gm-foot-base-sep { opacity: 0.5; }
        .gm-foot-base-right { display: inline-flex; gap: 28px; }
        .gm-foot-base-right a { font-size: 12px; color: var(--ink-4); }
        .gm-foot-base-right a:hover { color: var(--ink); }

        @media (max-width: 1000px) {
          .gm-foot-top { grid-template-columns: 1fr; gap: 56px; }
          .gm-foot-cols { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 600px) {
          .gm-foot-inner { padding: 60px 20px 24px; }
          .gm-foot-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
          .gm-foot-base { flex-direction: column; align-items: flex-start; gap: 14px; }
        }
      `}</style>
    </footer>
  );
};

window.SectionFooter = SectionFooter;