"""Animierte Werbe-Landingpage für Social & Share (CSS, kein Video nötig)."""

from __future__ import annotations

import html
import urllib.parse


def promo_url(site_base: str, *, source: str = "promo", medium: str = "animated") -> str:
    base = site_base.rstrip("/")
    q = urllib.parse.urlencode(
        {
            "utm_source": source,
            "utm_medium": medium,
            "utm_campaign": "launch",
        }
    )
    return f"{base}/promo?{q}"


def facebook_ad_url(site_base: str) -> str:
    base = site_base.rstrip("/")
    q = urllib.parse.urlencode(
        {
            "utm_source": "facebook",
            "utm_medium": "social",
            "utm_campaign": "launch",
        }
    )
    return f"{base}/ad?{q}"


def facebook_style_ad_html(*, site_base: str) -> str:
    """Facebook-Anzeigen-Look: Workflow, Icons, gelber CTA (Bildschirm aufnehmen oder Screenshot)."""
    base = site_base.rstrip("/")
    signup = f"{base}/?utm_source=facebook&utm_medium=social&utm_campaign=launch"
    logo = f"{base}/images/jami-dating-logo.png"

    return f"""<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"/>
<meta name="theme-color" content="#120818"/>
<title>Jami-Dating – Echte Singles · 100 Coins gratis</title>
<meta property="og:title" content="Jami-Dating gewinnt echte Matches für Dich"/>
<meta property="og:description" content="Swipe, Match &amp; Chat – 100 Gratis-Coins, keine Fake-Moderatoren."/>
<meta property="og:image" content="{html.escape(logo)}"/>
<style>
* {{ box-sizing: border-box; margin: 0; padding: 0; }}
html, body {{
  min-height: 100%;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #0c0612;
  color: #fff;
}}
.ad-page {{
  min-height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
  background:
    radial-gradient(ellipse 100% 50% at 50% 0%, rgba(120,60,200,0.45), transparent 55%),
    radial-gradient(ellipse 80% 40% at 80% 60%, rgba(255,77,141,0.2), transparent 50%),
    linear-gradient(180deg, #1a0a28 0%, #0c0612 45%, #080510 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}}
.ad-head {{
  margin-bottom: 1rem;
  animation: adHeadIn 0.8s ease both;
}}
@keyframes adHeadIn {{
  from {{ opacity: 0; transform: translateY(-12px); }}
  to {{ opacity: 1; transform: translateY(0); }}
}}
.ad-head h1 {{
  font-size: clamp(1.35rem, 5.5vw, 1.75rem);
  line-height: 1.2;
  font-weight: 800;
  margin-bottom: 0.45rem;
}}
.ad-head h1 em {{
  font-style: normal;
  color: #ffd54f;
}}
.ad-head p {{
  font-size: 0.92rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.4;
}}
.ad-flow {{
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 1;
  margin: 0.5rem 0 1rem;
}}
.ad-center {{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 88px; height: 88px;
  border-radius: 22%;
  box-shadow: 0 0 0 6px rgba(255,213,79,0.25), 0 0 40px rgba(255,77,141,0.5);
  animation: adCenterPulse 2.5s ease-in-out infinite;
  z-index: 2;
}}
@keyframes adCenterPulse {{
  0%, 100% {{ transform: translate(-50%, -50%) scale(1); }}
  50% {{ transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 0 8px rgba(255,213,79,0.35), 0 0 56px rgba(184,77,255,0.55); }}
}}
.ad-ring {{
  position: absolute; inset: 0;
  border: 2px dashed rgba(255,213,79,0.25);
  border-radius: 50%;
  animation: adRingSpin 24s linear infinite;
}}
@keyframes adRingSpin {{
  to {{ transform: rotate(360deg); }}
}}
.ad-step {{
  position: absolute;
  width: 42%;
  padding: 0.45rem 0.35rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  font-size: 0.72rem;
  line-height: 1.25;
  font-weight: 600;
  opacity: 0.45;
  transition: opacity 0.4s, transform 0.4s, box-shadow 0.4s;
}}
.ad-step .ico {{ font-size: 1.15rem; display: block; margin-bottom: 0.15rem; }}
.ad-step.is-on {{
  opacity: 1;
  transform: scale(1.04);
  box-shadow: 0 0 20px rgba(255,213,79,0.35);
  border-color: rgba(255,213,79,0.45);
  background: rgba(255,213,79,0.1);
}}
.ad-step:nth-child(2) {{ top: 2%; left: 50%; transform: translateX(-50%); }}
.ad-step:nth-child(3) {{ top: 50%; right: 0; transform: translateY(-50%); }}
.ad-step:nth-child(4) {{ bottom: 2%; left: 50%; transform: translateX(-50%); }}
.ad-step:nth-child(5) {{ top: 50%; left: 0; transform: translateY(-50%); }}
.ad-step.is-on:nth-child(2),
.ad-step.is-on:nth-child(4) {{ transform: translateX(-50%) scale(1.04); }}
.ad-step.is-on:nth-child(3),
.ad-step.is-on:nth-child(5) {{ transform: translateY(-50%) scale(1.04); }}
.ad-integrations {{
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem;
  justify-content: center; margin-bottom: 0.75rem;
  font-size: 0.78rem; color: rgba(255,255,255,0.75);
}}
.ad-integrations span {{
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
}}
.ad-stat {{
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,213,79,0.25), rgba(255,77,141,0.2));
  border: 1px solid rgba(255,213,79,0.4);
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 1rem;
  animation: adStatGlow 2.8s ease-in-out infinite;
}}
@keyframes adStatGlow {{
  0%, 100% {{ box-shadow: 0 0 0 rgba(255,213,79,0); }}
  50% {{ box-shadow: 0 0 24px rgba(255,213,79,0.35); }}
}}
.ad-benefits {{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  width: 100%;
  max-width: 400px;
  margin-bottom: 1.25rem;
}}
.ad-benefit {{
  padding: 0.5rem 0.25rem;
  font-size: 0.62rem;
  line-height: 1.2;
  color: rgba(255,255,255,0.85);
}}
.ad-benefit .ico {{ font-size: 1.25rem; display: block; margin-bottom: 0.2rem; }}
.ad-cta {{
  display: block;
  width: 100%;
  max-width: 360px;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffe082, #ffc107);
  color: #1a0a10;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(255,193,7,0.45);
  animation: adCtaPulse 2.2s ease-in-out infinite;
}}
@keyframes adCtaPulse {{
  0%, 100% {{ transform: scale(1); }}
  50% {{ transform: scale(1.03); box-shadow: 0 12px 40px rgba(255,193,7,0.55); }}
}}
.ad-cta:active {{ transform: scale(0.98); }}
.ad-foot {{
  margin-top: 0.85rem;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.4);
}}
@media (prefers-reduced-motion: reduce) {{
  *, *::before, *::after {{ animation: none !important; }}
  .ad-step {{ opacity: 1; }}
}}
</style>
</head>
<body>
<div class="ad-page">
  <header class="ad-head">
    <h1>Diese App bringt <em>echte Singles</em> zu Dir</h1>
    <p>Swipe, Match &amp; Chat – 100 Gratis-Coins, garantiert ohne Fake-Moderatoren</p>
  </header>
  <div class="ad-flow" id="adFlow">
    <div class="ad-ring" aria-hidden="true"></div>
    <div class="ad-step" data-i="0"><span class="ico">👤</span>Profil in 30 Sek.</div>
    <div class="ad-step" data-i="1"><span class="ico">💕</span>Swipe &amp; Like</div>
    <div class="ad-step" data-i="2"><span class="ico">✨</span>Match-Moment</div>
    <div class="ad-step" data-i="3"><span class="ico">💬</span>Chat &amp; Date</div>
    <img class="ad-center" src="{html.escape(logo)}" width="88" height="88" alt="Jami"/>
  </div>
  <div class="ad-integrations">
    <span>🌐 Web</span><span>📱 App</span><span>▶ Play Store</span><span>🔔 Push</span>
  </div>
  <p class="ad-stat">🪙 100 Gratis-Coins · Keine Chat-Moderatoren</p>
  <div class="ad-benefits">
    <div class="ad-benefit"><span class="ico">💕</span>Echte Singles</div>
    <div class="ad-benefit"><span class="ico">📍</span>In deiner Nähe</div>
    <div class="ad-benefit"><span class="ico">✓</span>Fair &amp; transparent</div>
    <div class="ad-benefit"><span class="ico">🆓</span>Kostenlos starten</div>
  </div>
  <a class="ad-cta" href="{html.escape(signup)}">Jetzt kostenlos registrieren!</a>
  <p class="ad-foot">Jami-Dating · {html.escape(base.replace("https://", ""))} · 18+</p>
</div>
<script>
(function () {{
  var steps = document.querySelectorAll('.ad-step');
  var n = 0;
  function tick() {{
    for (var i = 0; i < steps.length; i++) steps[i].classList.remove('is-on');
    steps[n].classList.add('is-on');
    n = (n + 1) % steps.length;
  }}
  tick();
  setInterval(tick, 1800);
}})();
</script>
</body>
</html>"""


def animated_promo_page_html(*, site_base: str) -> str:
    base = site_base.rstrip("/")
    signup = f"{base}/?utm_source=promo&utm_medium=animated&utm_campaign=launch"
    logo = f"{base}/images/jami-dating-logo.png"

    return f"""<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"/>
<meta name="theme-color" content="#0a0610"/>
<title>Jami-Dating – 100 Coins gratis · Echte Singles</title>
<meta name="description" content="Echte Singles. 100 Gratis-Coins. Keine Fake-Moderatoren. Jetzt kostenlos registrieren."/>
<meta property="og:title" content="Jami-Dating – Echte Singles, 100 Coins gratis"/>
<meta property="og:description" content="Dating ohne Fake-Moderatoren. Profil in 30 Sekunden."/>
<meta property="og:image" content="{html.escape(logo)}"/>
<meta property="og:url" content="{html.escape(signup)}"/>
<style>
* {{ box-sizing: border-box; margin: 0; padding: 0; }}
html, body {{
  min-height: 100%;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: #f8f0ff;
  background: #0a0610;
  overflow-x: hidden;
}}
.promo-bg {{
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(255,77,141,0.35), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 30%, rgba(184,77,255,0.25), transparent 50%),
    radial-gradient(ellipse 60% 40% at 10% 80%, rgba(255,209,102,0.12), transparent 45%),
    #0a0610;
}}
.promo-fx {{
  position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}}
.promo-heart {{
  position: absolute; font-size: 1.4rem; opacity: 0.55;
  animation: promoFloat var(--d, 18s) linear infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x, 50%);
  bottom: -2rem;
}}
@keyframes promoFloat {{
  0% {{ transform: translateY(0) rotate(0deg); opacity: 0; }}
  8% {{ opacity: 0.7; }}
  92% {{ opacity: 0.5; }}
  100% {{ transform: translateY(-110vh) rotate(360deg); opacity: 0; }}
}}
.promo-wrap {{
  position: relative; z-index: 2;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem 1.25rem 2.5rem;
  text-align: center;
}}
.promo-logo {{
  width: 88px; height: 88px; border-radius: 22%;
  box-shadow: 0 0 40px rgba(255,77,141,0.55);
  animation: promoPulse 2.2s ease-in-out infinite;
  margin-bottom: 1rem;
}}
@keyframes promoPulse {{
  0%, 100% {{ transform: scale(1); box-shadow: 0 0 28px rgba(255,77,141,0.45); }}
  50% {{ transform: scale(1.06); box-shadow: 0 0 52px rgba(184,77,255,0.65); }}
}}
.promo-badge {{
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd700, #ffb300);
  color: #1a0a10;
  font-weight: 800;
  font-size: 0.85rem;
  margin-bottom: 0.85rem;
  animation: promoBadgePop 2.8s ease-in-out infinite;
}}
@keyframes promoBadgePop {{
  0%, 100% {{ transform: scale(1); }}
  50% {{ transform: scale(1.05); }}
}}
.promo-h1 {{
  font-size: clamp(1.65rem, 6vw, 2.35rem);
  line-height: 1.15;
  margin-bottom: 0.65rem;
  background: linear-gradient(135deg, #fff, #ffb3d9, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: promoTitleGlow 3s ease-in-out infinite;
}}
@keyframes promoTitleGlow {{
  0%, 100% {{ filter: brightness(1); }}
  50% {{ filter: brightness(1.15); }}
}}
.promo-sub {{
  max-width: 22rem;
  color: rgba(255,255,255,0.78);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  min-height: 3rem;
}}
.promo-line {{
  display: none;
  animation: promoFade 0.6s ease;
}}
.promo-line.is-active {{ display: block; }}
@keyframes promoFade {{
  from {{ opacity: 0; transform: translateY(8px); }}
  to {{ opacity: 1; transform: translateY(0); }}
}}
.promo-chips {{
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  justify-content: center; margin-bottom: 1.5rem;
}}
.promo-chip {{
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  font-size: 0.78rem;
  animation: promoChipIn 0.8s ease both;
}}
.promo-chip:nth-child(2) {{ animation-delay: 0.1s; }}
.promo-chip:nth-child(3) {{ animation-delay: 0.2s; }}
.promo-chip:nth-child(4) {{ animation-delay: 0.3s; }}
@keyframes promoChipIn {{
  from {{ opacity: 0; transform: scale(0.9); }}
  to {{ opacity: 1; transform: scale(1); }}
}}
.promo-cta {{
  display: inline-block;
  padding: 1rem 1.75rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #ff4d8d, #b84dff);
  color: #fff; text-decoration: none; font-weight: 800;
  font-size: 1.05rem;
  box-shadow: 0 12px 40px rgba(255,77,141,0.45);
  animation: promoCtaPulse 2.4s ease-in-out infinite;
}}
@keyframes promoCtaPulse {{
  0%, 100% {{ transform: scale(1); }}
  50% {{ transform: scale(1.04); box-shadow: 0 16px 48px rgba(255,77,141,0.55); }}
}}
.promo-cta:active {{ transform: scale(0.98); }}
.promo-foot {{
  margin-top: 1.25rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
}}
@media (prefers-reduced-motion: reduce) {{
  *, *::before, *::after {{ animation: none !important; }}
}}
</style>
</head>
<body>
<div class="promo-bg" aria-hidden="true"></div>
<div class="promo-fx" aria-hidden="true">
  <span class="promo-heart" style="--x:12%;--d:16s;--delay:0s">💕</span>
  <span class="promo-heart" style="--x:28%;--d:20s;--delay:2s">❤️</span>
  <span class="promo-heart" style="--x:55%;--d:18s;--delay:1s">✨</span>
  <span class="promo-heart" style="--x:72%;--d:22s;--delay:4s">💘</span>
  <span class="promo-heart" style="--x:88%;--d:17s;--delay:3s">🪙</span>
</div>
<main class="promo-wrap">
  <img class="promo-logo" src="{html.escape(logo)}" width="88" height="88" alt="Jami-Dating"/>
  <span class="promo-badge">🪙 100 Coins gratis</span>
  <h1 class="promo-h1">Echte Singles.<br/>Keine Fake-Moderatoren.</h1>
  <p class="promo-sub" id="promoRotator">
    <span class="promo-line is-active">Profil in 30 Sekunden – swipe, match, chatte.</span>
    <span class="promo-line">Herkunft &amp; km-Entfernung auf jedem Profil.</span>
    <span class="promo-line">App demnächst im Play Store – jetzt schon online testen.</span>
    <span class="promo-line">Beta-Tester: 1000 Coins – Link auf jami-dating.de</span>
  </p>
  <div class="promo-chips">
    <span class="promo-chip">✓ Kostenlos</span>
    <span class="promo-chip">✓ 18+</span>
    <span class="promo-chip">✓ WM-Tipps</span>
    <span class="promo-chip">✓ Echte Nutzer</span>
  </div>
  <a class="promo-cta" href="{html.escape(signup)}">Jetzt kostenlos starten →</a>
  <p class="promo-foot">Jami-Dating · {html.escape(base.replace("https://", ""))}</p>
</main>
<script>
(function () {{
  var lines = document.querySelectorAll('.promo-line');
  if (!lines.length) return;
  var i = 0;
  setInterval(function () {{
    lines[i].classList.remove('is-active');
    i = (i + 1) % lines.length;
    lines[i].classList.add('is-active');
  }}, 3200);
}})();
</script>
</body>
</html>"""


def dating_ad_embed_css(*, compact: bool = False) -> str:
    """Scoped CSS für eingebettetes animiertes Jami-Banner (ClipWelle & Co.)."""
    flow_size = "140px" if compact else "min(100%, 260px)"
    flow_margin = "0.35rem auto 0.5rem" if compact else "0.5rem auto 0.75rem"
    center_size = "52px" if compact else "72px"
    head_size = "0.82rem" if compact else "clamp(1rem, 3vw, 1.25rem)"
    return f"""
.jami-ad-embed {{
  display: block;
  text-decoration: none;
  color: #fff;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 77, 141, 0.35);
  background:
    radial-gradient(ellipse 100% 50% at 50% 0%, rgba(120,60,200,0.4), transparent 55%),
    radial-gradient(ellipse 80% 40% at 80% 60%, rgba(255,77,141,0.18), transparent 50%),
    linear-gradient(180deg, #1a0a28 0%, #0c0612 100%);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}}
.jami-ad-embed:hover {{
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(255,77,141,0.28);
}}
.jami-ad-embed-inner {{
  padding: 0.85rem 0.9rem 1rem;
  text-align: center;
  position: relative;
  z-index: 1;
}}
.jami-ad-embed--wide .jami-ad-embed-inner {{
  display: grid;
  grid-template-columns: 1fr min(260px, 38%);
  gap: 0.75rem 1rem;
  align-items: center;
  text-align: left;
  padding: 1rem 1.15rem;
}}
.jami-ad-embed--wide .jami-ad-flow-wrap {{ grid-row: 1 / span 4; grid-column: 2; }}
.jami-ad-embed-head h3 {{
  margin: 0 0 0.35rem;
  font-size: {head_size};
  line-height: 1.2;
  font-weight: 800;
}}
.jami-ad-embed-head h3 em {{ font-style: normal; color: #ffd54f; }}
.jami-ad-embed-head p {{
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.4;
}}
.jami-ad-embed-badge {{
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffd54f;
  margin-bottom: 0.35rem;
}}
.jami-ad-flow {{
  position: relative;
  width: {flow_size};
  aspect-ratio: 1;
  margin: {flow_margin};
}}
.jami-ad-embed--wide .jami-ad-flow {{ margin: 0 auto; }}
.jami-ad-center {{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: {center_size}; height: {center_size};
  border-radius: 22%;
  box-shadow: 0 0 0 4px rgba(255,213,79,0.25), 0 0 28px rgba(255,77,141,0.45);
  animation: jamiAdCenterPulse 2.5s ease-in-out infinite;
  z-index: 2;
}}
@keyframes jamiAdCenterPulse {{
  0%, 100% {{ transform: translate(-50%, -50%) scale(1); }}
  50% {{ transform: translate(-50%, -50%) scale(1.05); }}
}}
.jami-ad-ring {{
  position: absolute; inset: 0;
  border: 2px dashed rgba(255,213,79,0.25);
  border-radius: 50%;
  animation: jamiAdRingSpin 24s linear infinite;
}}
@keyframes jamiAdRingSpin {{ to {{ transform: rotate(360deg); }} }}
.jami-ad-step {{
  position: absolute;
  width: 44%;
  padding: 0.3rem 0.25rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  font-size: 0.58rem;
  line-height: 1.2;
  font-weight: 600;
  opacity: 0.45;
  transition: opacity 0.4s, transform 0.4s, box-shadow 0.4s;
  text-align: center;
}}
.jami-ad-step .ico {{ font-size: 0.95rem; display: block; margin-bottom: 0.1rem; }}
.jami-ad-step.is-on {{
  opacity: 1;
  box-shadow: 0 0 16px rgba(255,213,79,0.35);
  border-color: rgba(255,213,79,0.45);
  background: rgba(255,213,79,0.1);
}}
.jami-ad-step:nth-child(2) {{ top: 2%; left: 50%; transform: translateX(-50%); }}
.jami-ad-step:nth-child(3) {{ top: 50%; right: 0; transform: translateY(-50%); }}
.jami-ad-step:nth-child(4) {{ bottom: 2%; left: 50%; transform: translateX(-50%); }}
.jami-ad-step:nth-child(5) {{ top: 50%; left: 0; transform: translateY(-50%); }}
.jami-ad-step.is-on:nth-child(2),
.jami-ad-step.is-on:nth-child(4) {{ transform: translateX(-50%) scale(1.04); }}
.jami-ad-step.is-on:nth-child(3),
.jami-ad-step.is-on:nth-child(5) {{ transform: translateY(-50%) scale(1.04); }}
.jami-ad-stat {{
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,213,79,0.25), rgba(255,77,141,0.2));
  border: 1px solid rgba(255,213,79,0.4);
  font-size: 0.68rem;
  font-weight: 700;
  margin-bottom: 0.55rem;
  animation: jamiAdStatGlow 2.8s ease-in-out infinite;
}}
@keyframes jamiAdStatGlow {{
  0%, 100% {{ box-shadow: 0 0 0 rgba(255,213,79,0); }}
  50% {{ box-shadow: 0 0 18px rgba(255,213,79,0.35); }}
}}
.jami-ad-cta {{
  display: inline-block;
  width: 100%;
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffe082, #ffc107);
  color: #1a0a10;
  font-weight: 800;
  font-size: 0.82rem;
  text-align: center;
  animation: jamiAdCtaPulse 2.2s ease-in-out infinite;
}}
@keyframes jamiAdCtaPulse {{
  0%, 100% {{ transform: scale(1); }}
  50% {{ transform: scale(1.02); }}
}}
.jami-ad-foot {{
  margin-top: 0.45rem;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.38);
  text-align: center;
}}
.jami-ad-hearts {{
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 16px;
  z-index: 0;
}}
.jami-ad-heart {{
  position: absolute; font-size: 0.85rem; opacity: 0;
  animation: jamiAdHeartFloat var(--d, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x, 50%);
  bottom: -1rem;
}}
@keyframes jamiAdHeartFloat {{
  0% {{ transform: translateY(0); opacity: 0; }}
  10% {{ opacity: 0.55; }}
  90% {{ opacity: 0.35; }}
  100% {{ transform: translateY(-120px); opacity: 0; }}
}}
@media (max-width: 640px) {{
  .jami-ad-embed--wide .jami-ad-embed-inner {{ grid-template-columns: 1fr; text-align: center; }}
  .jami-ad-embed--wide .jami-ad-flow-wrap {{ grid-row: auto; grid-column: 1; }}
}}
@media (prefers-reduced-motion: reduce) {{
  .jami-ad-embed *, .jami-ad-embed *::before, .jami-ad-embed *::after {{ animation: none !important; }}
  .jami-ad-step {{ opacity: 1; }}
}}
"""


def dating_ad_embed_html(
    *,
    signup_url: str,
    logo_url: str = "https://www.jami-dating.de/images/jami-dating-logo.png",
    variant: str = "compact",
    embed_id: str = "jamiAd",
) -> str:
    """Animiertes Jami-Dating-Banner (Facebook-Ad-Workflow)."""
    href = html.escape(signup_url)
    logo = html.escape(logo_url)
    mod = "jami-ad-embed--wide" if variant == "wide" else "jami-ad-embed--compact"
    uid = html.escape(embed_id)
    return f"""<a class="jami-ad-embed {mod}" href="{href}" target="_blank" rel="noopener sponsored" id="{uid}">
  <div class="jami-ad-hearts" aria-hidden="true">
    <span class="jami-ad-heart" style="--x:15%;--d:12s;--delay:0s">💕</span>
    <span class="jami-ad-heart" style="--x:75%;--d:15s;--delay:2s">❤️</span>
    <span class="jami-ad-heart" style="--x:45%;--d:13s;--delay:1s">✨</span>
  </div>
  <div class="jami-ad-embed-inner">
    <span class="jami-ad-embed-badge">💕 Jami-Dating · Partner-Tipp</span>
    <header class="jami-ad-embed-head">
      <h3>Diese App bringt <em>echte Singles</em> zu Dir</h3>
      <p>Swipe, Match &amp; Chat – 100 Gratis-Coins, ohne Fake-Moderatoren</p>
    </header>
    <div class="jami-ad-flow-wrap">
      <div class="jami-ad-flow" data-jami-ad-flow="{uid}">
        <div class="jami-ad-ring" aria-hidden="true"></div>
        <div class="jami-ad-step"><span class="ico">👤</span>Profil 30 Sek.</div>
        <div class="jami-ad-step"><span class="ico">💕</span>Swipe &amp; Like</div>
        <div class="jami-ad-step"><span class="ico">✨</span>Match!</div>
        <div class="jami-ad-step"><span class="ico">💬</span>Chat &amp; Date</div>
        <img class="jami-ad-center" src="{logo}" width="72" height="72" alt="Jami" loading="lazy"/>
      </div>
    </div>
    <p class="jami-ad-stat">🪙 100 Gratis-Coins · 18+ · Kostenlos</p>
    <span class="jami-ad-cta">Jetzt kostenlos registrieren!</span>
    <p class="jami-ad-foot">jami-dating.de</p>
  </div>
</a>"""


def dating_ad_embed_script() -> str:
    return """
(function(){
  document.querySelectorAll('[data-jami-ad-flow]').forEach(function(flow){
    var steps = flow.querySelectorAll('.jami-ad-step');
    if (!steps.length) return;
    var n = 0;
    function tick(){
      for (var i = 0; i < steps.length; i++) steps[i].classList.remove('is-on');
      steps[n].classList.add('is-on');
      n = (n + 1) % steps.length;
    }
    tick();
    setInterval(tick, 1800);
  });
})();
"""

