/* global React, LineIcon */

function SocialIcon({ name, size = 18 }) {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" };
  switch (name) {
    case "linkedin":
      return (
        <svg {...props}>
          <path d="M4.98 3.5a2.5 2.5 0 11.02 5 2.5 2.5 0 01-.02-5zM3 9.5h4V21H3V9.5zM10 9.5h3.8v1.6h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21H18.6v-5.2c0-1.24-.02-2.83-1.72-2.83-1.73 0-2 1.35-2 2.74V21H11V9.5z" />
        </svg>
      );
    case "instagram":
      return (
        <svg {...props} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="3" width="18" height="18" rx="5" />
          <circle cx="12" cy="12" r="4" />
          <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
        </svg>
      );
    case "whatsapp":
      return (
        <svg {...props}>
          <path d="M20.5 3.5A10.4 10.4 0 0012 0a10.4 10.4 0 00-9 15.6L1.5 24l8.6-2.3A10.4 10.4 0 0012 22.4 10.4 10.4 0 0020.5 3.5zM12 20.5a8.5 8.5 0 01-4.4-1.2l-.3-.2-5.1 1.4L3.5 15l-.2-.3A8.6 8.6 0 1112 20.5zm4.7-6.5c-.3-.1-1.6-.8-1.8-.9-.2-.1-.4-.1-.6.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.4-.7-2.4-1.3-3.3-2.9-.3-.4.3-.4.7-1.4.1-.2 0-.3 0-.5-.1-.1-.6-1.4-.8-1.9-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.2.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3 4.8 4.2 1.7.7 2.4.8 3.2.7.5-.1 1.6-.7 1.8-1.3.2-.6.2-1.2.2-1.3-.1-.1-.3-.2-.5-.3z" />
        </svg>
      );
    case "mail":
      return (
        <svg {...props} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="5" width="18" height="14" rx="2" />
          <path d="M3 7l9 6 9-6" />
        </svg>
      );
    default:
      return null;
  }
}

function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer className="ftr">
      <div className="container">
        <div className="ftr-grid">
          <div className="ftr-col ftr-brand">
            <a href="Etusivu.html" className="ftr-logo" aria-label="Arvomeklarit etusivu">
              <img src="assets/arvomeklarit-logo.png" alt="Arvomeklarit" className="ftr-logo-img" />
            </a>
            <p className="ftr-tag">
              Suomalainen vakuutusmeklari yrityksille — pörssiyhtiöistä perheyrityksiin. Maksat kilpailutuksesta vain, jos säästät.
            </p>

            <div className="ftr-social">
              <a href="https://www.linkedin.com/company/arvomeklarit" target="_blank" rel="noopener" aria-label="LinkedIn">
                <SocialIcon name="linkedin" />
              </a>
              <a href="https://www.instagram.com/arvomeklarit" target="_blank" rel="noopener" aria-label="Instagram">
                <SocialIcon name="instagram" />
              </a>
              <a href="https://wa.me/" target="_blank" rel="noopener" aria-label="WhatsApp" title="WhatsApp — numero liitetään myöhemmin">
                <SocialIcon name="whatsapp" />
              </a>
              <a href="mailto:asiakaspalvelu@arvomeklarit.fi" aria-label="Sähköposti">
                <SocialIcon name="mail" />
              </a>
            </div>
          </div>

          <div className="ftr-col ftr-locations">
            <div className="ftr-loc">
              <h4 className="ftr-h">Kauniainen</h4>
              <address className="ftr-addr">
                <p>Vanha Turuntie 14 B 1<br />02700 Kauniainen</p>
                <a href="tel:+358102742750" className="ftr-tel tnum">+358 (0) 10 274 2750</a>
              </address>
            </div>
            <div className="ftr-loc">
              <h4 className="ftr-h">Helsinki</h4>
              <address className="ftr-addr">
                <p>Lampputie 12 C<br />00750 Helsinki</p>
                <a href="tel:+358102742754" className="ftr-tel tnum">+358 (0) 10 274 2754</a>
              </address>
            </div>
            <div className="ftr-loc ftr-loc-mail">
              <a href="mailto:asiakaspalvelu@arvomeklarit.fi" className="ftr-mail">
                asiakaspalvelu@arvomeklarit.fi
              </a>
            </div>
          </div>

          <div className="ftr-col">
            <h4 className="ftr-h">Palvelut</h4>
            <ul role="list">
              <li><a href="Vakuutusten Kilpailutus.html">Vakuutusten kilpailutus</a></li>
              <li><a href="Vakuutusten Hoito.html">Vakuutusten hoito</a></li>
              <li><a href="Vahinkojen Hoito.html">Vahinkojen hoito</a></li>
              <li><a href="Hinnoittelu.html">Hinnoittelu</a></li>
            </ul>

            <h4 className="ftr-h ftr-h-2">Toimialat</h4>
            <ul role="list">
              <li><a href="Kuljetusala.html">Kuljetusala</a></li>
              <li><a href="Rakennusala.html">Rakennusala</a></li>
              <li><a href="Tuotanto.html">Tuotanto</a></li>
              <li><a href="ICT.html">ICT ja konsultointi</a></li>
              <li><a href="Suunnittelu.html">Suunnittelu ja arkkitehtuuri</a></li>
              <li><a href="Finanssi.html">Finanssi ja kiinteistö</a></li>
            </ul>
          </div>
        </div>

        <div className="ftr-trust">
          <span className="ftr-trust-label">Rekisteröinnit ja jäsenyydet</span>
          <div className="ftr-trust-logos">
            <a href="https://www.vastuugroup.fi/" target="_blank" rel="noopener" className="ftr-trust-logo ftr-trust-logo--vg" aria-label="Vastuu Group — siirry sivustolle">
              <span className="ftr-trust-mark ftr-trust-mark--vg">VG</span>
              <span className="ftr-trust-name">Vastuu Group</span>
            </a>
            <a href="https://www.finanssivalvonta.fi/" target="_blank" rel="noopener" className="ftr-trust-logo ftr-trust-logo--fiva" aria-label="Finanssivalvonta — siirry sivustolle">
              <img src="assets/badge-finanssivalvonta.png" alt="Finanssivalvonta" className="ftr-trust-img" />
            </a>
            <span className="ftr-trust-logo ftr-trust-logo--aa" aria-label="Luottokelpoinen — AA-Rating">
              <img src="assets/badge-luottokelpoinen.png" alt="Luottokelpoinen — AA-Rating" className="ftr-trust-img" />
            </span>
          </div>
        </div>

        <p className="ftr-fiva">
          Arvomeklarit Oy on Finanssivalvonnan ylläpitämään
          vakuutusedustajarekisteriin merkitty vakuutusmeklariyhtiö
          (Y-tunnus 2658755-9, rekisteröity 21.3.2017). Rekisteröinnin voi
          tarkistaa osoitteessa{" "}
          <a href="https://www.finanssivalvonta.fi/rekisterit/vakuutusedustajat/" target="_blank" rel="noopener">
            finanssivalvonta.fi/rekisterit/vakuutusedustajat
          </a>.
        </p>

        <div className="ftr-base">
          <div className="ftr-legal">
            <a href="Tietosuoja.html">Tietosuojaseloste</a>
            <a href="Kayttoehdot.html">Käyttöehdot</a>
            <a href="#" onClick={(e)=>{e.preventDefault();window.dispatchEvent(new CustomEvent("am:open-cookies"));}}>Evästeasetukset</a>
          </div>
          <p className="ftr-copy">© {year} Arvomeklarit Oy · Y-tunnus 2658755-9</p>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;

if (!document.getElementById("ftr-css")) {
  const s = document.createElement("style");
  s.id = "ftr-css";
  s.textContent = `
    .ftr {
      background: var(--bg);
      color: var(--ink);
      padding: 88px 0 32px;
      border-top: 1px solid var(--line);
    }
    .ftr-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 48px;
    }
    @media (min-width: 720px) { .ftr-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1040px) { .ftr-grid { grid-template-columns: 1.2fr 1.3fr 1fr; gap: 56px; } }

    .ftr-brand { max-width: 360px; }
    .ftr-logo { display: inline-flex; align-items: center; margin-bottom: 20px; }
    .ftr-logo-img { height: 56px; width: auto; display: block; }
    .ftr-tag { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin-bottom: 24px; }

    .ftr-social {
      display: inline-flex; gap: 8px;
    }
    .ftr-social a {
      display: inline-flex; align-items: center; justify-content: center;
      width: 40px; height: 40px;
      border-radius: 50%;
      border: 1px solid var(--line);
      color: var(--ink-2);
      transition: color var(--t), border-color var(--t), background var(--t);
    }
    .ftr-social a:hover {
      color: var(--gold);
      border-color: var(--gold);
      background: rgba(184, 146, 74, .06);
    }

    .ftr-locations {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px 40px;
    }
    @media (max-width: 520px) { .ftr-locations { grid-template-columns: 1fr; gap: 28px; } }

    .ftr-loc-mail { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--line); }

    .ftr-addr { font-style: normal; color: var(--ink-2); font-size: 14px; line-height: 1.6; margin: 0; }
    .ftr-addr p { margin: 0 0 10px; }
    .ftr-tel {
      display: inline-block;
      font-family: var(--serif);
      font-weight: 500;
      font-size: 16px;
      color: var(--ink);
      letter-spacing: -0.005em;
      transition: color var(--t);
    }
    .ftr-tel:hover { color: var(--gold); }

    .ftr-mail {
      display: inline-block;
      padding-top: 12px;
      font-family: var(--serif);
      font-weight: 500;
      font-size: 17px;
      color: var(--ink);
      transition: color var(--t);
    }
    .ftr-mail:hover { color: var(--gold); }

    .ftr-h {
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-2);
      margin: 0 0 14px;
    }
    .ftr-h-2 { margin-top: 28px; }
    .ftr-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
    .ftr-col li a {
      font-size: 15px;
      color: var(--ink);
      transition: color var(--t);
    }
    .ftr-col li a:hover { color: var(--gold); }
    .ftr-soon { color: var(--ink-2); font-size: 14px; font-style: italic; }

    .ftr-trust {
      margin-top: 64px;
      padding: 28px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      display: flex; flex-direction: column; gap: 16px;
    }
    @media (min-width: 720px) { .ftr-trust { flex-direction: row; align-items: center; gap: 40px; } }
    .ftr-trust-label {
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-2);
      white-space: nowrap;
    }
    .ftr-trust-logos {
      display: flex; flex-wrap: wrap; gap: 10px 12px;
    }
    .ftr-trust-logo {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--sans);
      font-size: 13px;
      color: var(--ink-2);
      padding: 8px 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--bg);
      text-decoration: none;
      transition: color var(--t), border-color var(--t), background var(--t);
    }
    .ftr-trust-logo:hover {
      color: var(--ink);
      border-color: rgba(201, 160, 80, .5);
      background: var(--bg-2);
    }
    .ftr-trust-mark {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 32px; height: 24px;
      padding: 0 6px;
      background: var(--blue);
      color: #fff;
      font-family: var(--serif);
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 0.06em;
      border-radius: 3px;
    }
    .ftr-trust-mark--vg { background: #0F4C81; }
    .ftr-trust-name { white-space: nowrap; }
    .ftr-trust-img {
      height: 22px; width: auto; display: block;
    }
    .ftr-trust-logo--fiva { padding: 6px 12px; }

    .ftr-base {
      margin-top: 24px;
      display: flex; flex-direction: column; gap: 16px;
      padding-top: 8px;
    }
    @media (min-width: 720px) { .ftr-base { flex-direction: row; justify-content: space-between; align-items: center; } }
    .ftr-legal { display: flex; flex-wrap: wrap; gap: 24px; }
    .ftr-legal a { font-size: 13px; color: var(--ink-2); transition: color var(--t); }
    .ftr-legal a:hover { color: var(--ink); }
    .ftr-copy { font-size: 13px; color: var(--ink-2); margin: 0; }

    .ftr-fiva {
      margin: 28px 0 0;
      padding: 20px 0 0;
      border-top: 1px solid var(--line);
      max-width: 80ch;
      font-size: 12.5px;
      line-height: 1.6;
      color: var(--ink-2);
      font-style: italic;
    }
    .ftr-fiva a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t); }
    .ftr-fiva a:hover { color: var(--gold); }
  `;
  document.head.appendChild(s);
}