/* global React, Icon */

function Footer() {
  return (
    <footer className="ftr" data-screen-label="Footer">
      <div className="container ftr__inner">
        <div className="ftr__brand">
          <img src="./assets/logo-fj-real.png" alt="Frederiksen &amp; Jepsen A/S" className="ftr__logo"/>
          <p className="ftr__about">
            Tømrer, tag, vinduer og tilbygninger i Sønderborg og resten af Sønderjylland. Byg-Garanti og Monier-certificeret. Vi er to indehavere og vi står på hver eneste opgave.
          </p>
          <div className="ftr__phone">
            <Icon name="phone" size={20} stroke="#E5AC31"/>
            <a href="tel:+4574486994">74 48 69 94</a>
          </div>
        </div>
        <div className="ftr__col">
          <h4 className="ftr__h">Ydelser</h4>
          <ul>
            <li><a href="#">Nyt tag</a></li>
            <li><a href="#">Nye vinduer</a></li>
            <li><a href="#">Tilbygning &amp; ombygning</a></li>
            <li><a href="#">Tømrer &amp; snedker</a></li>
            <li><a href="#">Akut tagskade</a></li>
            <li><a href="#">Finansiering</a></li>
          </ul>
        </div>
        <div className="ftr__col">
          <h4 className="ftr__h">Firma</h4>
          <ul>
            <li><a href="#about">Om os</a></li>
            <li><a href="#work">Kundereferencer</a></li>
            <li><a href="#reviews">Anmeldelser</a></li>
            <li><a href="#areas">Områder</a></li>
            <li><a href="#">Ledige stillinger</a></li>
            <li><a href="#">Kontakt</a></li>
          </ul>
        </div>
        <div className="ftr__col">
          <h4 className="ftr__h">Besøg os</h4>
          <address className="ftr__addr">
            Frederiksen &amp; Jepsen A/S<br/>
            Bülowsvej 2<br/>
            6400 Sønderborg
          </address>
          <div className="ftr__hrs">
            <div><span>Man–Tor</span> 7.00 – 16.00</div>
            <div><span>Fredag</span> 7.00 – 14.00</div>
            <div><span>Showroom</span> Efter aftale</div>
          </div>
        </div>
      </div>
      <div className="ftr__badges container">
        <img src="./assets/badges/byg-garanti.jpg"             alt="Byg-Garanti" className="ftr__badge ftr__badge--wide"/>
        <img src="./assets/badges/di-byggeri.jpg"              alt="DI Byggeri" />
        <img src="./assets/badges/monier-tagpartner.jpg"       alt="Monier Tagpartner™" />
        <img src="./assets/badges/velux-dagslys-raadgiver.png" alt="VELUX Dagslys-rådgiver" />
        <img src="./assets/badges/velfac-vinduesmester.png"    alt="VELFAC VinduesMester" className="ftr__badge--wide"/>
      </div>
      <div className="ftr__legal container">
        <div>© 2026 Frederiksen &amp; Jepsen A/S · CVR 35 12 84 76 · Tidligere D. Frederiksen &amp; Søn A/S og Henry Nielsen A/S, fusioneret 2013</div>
        <div className="ftr__legal-links">
          <a href="#">Cookies &amp; privatliv</a>
          <a href="#">Vilkår</a>
        </div>
      </div>
      <style>{`
        .ftr { background: #0B1118; padding: 80px 0 32px; border-top: 4px solid var(--accent); }
        .ftr__inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; align-items: start; }
        .ftr__brand .ftr__logo { height: 40px; width: auto; margin-bottom: 22px; }
        .ftr__about { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--paper-dim); margin: 0 0 18px; max-width: 38ch; }
        .ftr__phone { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--accent); }
        .ftr__phone a { color: inherit; }
        .ftr__h { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); margin: 0 0 16px; }
        .ftr__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
        .ftr__col li a { font-family: var(--font-body); font-size: 14px; color: var(--paper-dim); transition: color 80ms; }
        .ftr__col li a:hover { color: var(--accent); }
        .ftr__addr { font-style: normal; font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: var(--paper-dim); margin: 0 0 16px; }
        .ftr__hrs { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); font-size: 13px; color: var(--paper-dim); }
        .ftr__hrs span { color: var(--paper-faint); font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-right: 8px; }
        .ftr__badges { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--surface-divider); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
        .ftr__badges img { height: 56px; width: auto; border-radius: 4px; background: #fff; padding: 6px 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); object-fit: contain; }
        .ftr__badges img.ftr__badge--wide { padding: 4px 14px; }
        .ftr__legal { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--surface-divider); display: flex; justify-content: space-between; gap: 24px; font-family: var(--font-body); font-size: 12px; color: var(--paper-faint); flex-wrap: wrap; }
        .ftr__legal-links { display: flex; gap: 18px; }
        .ftr__legal-links a { color: inherit; }
        @media (max-width: 960px) { .ftr__inner { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 540px) { .ftr__inner { grid-template-columns: 1fr; } }
      `}</style>
    </footer>
  );
}

Object.assign(window, { Footer });