/* global React, Icon */

const FJ_SLIDER_1 = "./assets/hero-desktop.png";

const GUARANTEES = [
  { icon: "shield-check", label: "Byg-Garanti på alle opgaver" },
  { icon: "clock",        label: "5 års garanti på udført arbejde" },
  { icon: "award",        label: "100.000 kr. garanti via Byg-Garanti" },
  { icon: "award",        label: "Monier-certificeret Tagpartner™" },
  { icon: "check",        label: "Fast pris, ingen skjulte tillæg" },
];

function CtaBlock({ onOpenQuote }) {
  return (
    <section className="ctablk" data-screen-label="CTA block">
      <div className="ctablk__bg" aria-hidden="true">
        <img src={FJ_SLIDER_1} alt="" referrerPolicy="no-referrer"/>
        <div className="ctablk__overlay"/>
      </div>
      <div className="container ctablk__inner">

        <div className="ctablk__left">
          <span className="eyebrow ctablk__eyebrow">Vores garantier</span>
          <h2 className="ctablk__h">Du er dækket.<br/><span className="ctablk__h-accent">Fra første dag til de næste fem år.</span></h2>
          <ul className="ctablk__list">
            {GUARANTEES.map(g => (
              <li key={g.label} className="ctablk__li">
                <Icon name={g.icon} size={16} stroke="#E5AC31"/>
                {g.label}
              </li>
            ))}
          </ul>
          <div className="ctablk__row">
            <a href="tel:+4574486994" className="btn-cta">
              <Icon name="phone" size={18} stroke="#fff"/>
              Ring 74 48 69 94
            </a>
            <button className="btn-outline" onClick={onOpenQuote}>
              Bliv ringet op
              <Icon name="arrow-right" size={16} stroke="#F4F1EC" />
            </button>
          </div>
        </div>

        <div className="ctablk__right">
          <img src="./assets/badges/5ars-guaranti.png" alt="5 års garanti" className="ctablk__badge-main"/>
        </div>

      </div>
      <style>{`
        .ctablk { position: relative; padding: 96px 0; overflow: hidden; }
        .ctablk__bg { position: absolute; inset: 0; z-index: 0; background: #0B1118; }
        .ctablk__bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) brightness(0.45); }
        .ctablk__overlay { position: absolute; inset: 0; background:
          linear-gradient(90deg, rgba(11,17,24,0.96) 0%, rgba(11,17,24,0.6) 60%, rgba(11,17,24,0.3) 100%);
        }
        .ctablk__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center; }
        .ctablk__eyebrow { color: var(--accent); }
        .ctablk__eyebrow::before { background: var(--accent); }
        .ctablk__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.01em; margin: 12px 0 24px; color: #F4F1EC; }
        .ctablk__h-accent { color: var(--accent); }
        .ctablk__list { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; }
        .ctablk__li { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 15px; color: rgba(244,241,236,0.8); }
        .ctablk__row { display: flex; gap: 14px; flex-wrap: wrap; }
        .ctablk__right { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .ctablk__badge-main { width: 264px; height: auto; filter: drop-shadow(0 8px 32px rgba(0,0,0,0.6)); }
        @media (max-width: 860px) {
          .ctablk__inner { grid-template-columns: 1fr; gap: 40px; }
          .ctablk__right { justify-content: flex-start; }
          .ctablk__badge-main { width: 160px; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { CtaBlock });