"""
Moderne HTML/CSS-Webseiten – von Jam/David (selbst geschrieben, kein Baukasten).
"""

from __future__ import annotations

from jam.paypal_donate import PAYPAL_EMAIL, paypal_donate_url


def build_modern_onepage(
    *,
    owner: str,
    title: str,
    tagline: str = "",
    subtitle: str = "",
    paypal: bool = True,
    accent: str = "#7c3aed",
) -> str:
    tag = tagline or f"Modern gebaut für {owner} – Jam & KI Web Studio"
    sub = subtitle or "Responsive · Schnell · SEO-Basics · Impressum-ready"
    pay_btn = ""
    if paypal:
        url = paypal_donate_url()
        pay_btn = (
            f'<a class="btn primary" href="{url}" target="_blank" rel="noopener">'
            "Jetzt anfragen / PayPal</a>"
        )
    return f"""<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="{_esc(tag[:160])}">
  <title>{_esc(title)}</title>
  <style>
    :root {{
      --accent: {accent};
      --bg: #0b1020;
      --card: #151b2e;
      --text: #e8edf7;
      --muted: #94a3b8;
    }}
    * {{ box-sizing: border-box; margin: 0; }}
    html {{ scroll-behavior: smooth; }}
    body {{
      font-family: "Segoe UI", system-ui, sans-serif;
      background: radial-gradient(ellipse 120% 80% at 50% -20%, #2d1b69 0%, var(--bg) 55%);
      color: var(--text);
      line-height: 1.6;
    }}
    .wrap {{ max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }}
    header {{
      position: sticky; top: 0; z-index: 50;
      backdrop-filter: blur(12px);
      background: rgba(11, 16, 32, 0.85);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }}
    nav {{
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
      gap: 1rem; padding: 1rem 0;
    }}
    .logo {{ font-weight: 800; font-size: 1.15rem; color: #fff; text-decoration: none; }}
    .logo span {{ color: var(--accent); }}
    .nav-links {{ display: flex; gap: 1.25rem; flex-wrap: wrap; }}
    .nav-links a {{ color: var(--muted); text-decoration: none; font-weight: 600; font-size: .9rem; }}
    .nav-links a:hover {{ color: #fff; }}
    .hero {{ padding: 4.5rem 0 3rem; text-align: center; }}
    .badge {{
      display: inline-block; background: rgba(124, 58, 237, .25);
      color: #ddd6fe; padding: .35rem .9rem; border-radius: 999px;
      font-size: .78rem; font-weight: 700; margin-bottom: 1rem;
    }}
    h1 {{
      font-size: clamp(2rem, 5vw, 3.2rem);
      line-height: 1.15; margin-bottom: 1rem;
      background: linear-gradient(135deg, #fff 0%, #c4b5fd 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }}
    .hero p {{ color: var(--muted); max-width: 560px; margin: 0 auto 1.75rem; font-size: 1.05rem; }}
    .btns {{ display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }}
    .btn {{
      display: inline-block; padding: .85rem 1.6rem; border-radius: 12px;
      font-weight: 700; text-decoration: none; font-size: .95rem;
    }}
    .btn.primary {{ background: var(--accent); color: #fff; }}
    .btn.ghost {{ border: 1px solid rgba(255,255,255,.2); color: var(--text); }}
    section {{ padding: 3.5rem 0; }}
    h2 {{ font-size: 1.75rem; margin-bottom: 1.5rem; text-align: center; }}
    .grid {{
      display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1.25rem;
    }}
    .card {{
      background: var(--card); border: 1px solid rgba(255,255,255,.08);
      border-radius: 16px; padding: 1.5rem;
      transition: transform .2s, border-color .2s;
    }}
    .card:hover {{ transform: translateY(-4px); border-color: var(--accent); }}
    .card h3 {{ margin-bottom: .5rem; font-size: 1.1rem; }}
    .card p {{ color: var(--muted); font-size: .9rem; }}
    .price {{ color: #4ade80; font-weight: 800; font-size: 1.25rem; margin-top: .75rem; }}
    #kontakt {{
      text-align: center; background: var(--card);
      border-radius: 20px; padding: 2.5rem 1.5rem; margin: 2rem 0 4rem;
      border: 1px solid rgba(255,255,255,.1);
    }}
    footer {{
      text-align: center; padding: 2rem; color: var(--muted); font-size: .85rem;
      border-top: 1px solid rgba(255,255,255,.06);
    }}
    footer a {{ color: #a78bfa; }}
    @media (max-width: 600px) {{ .nav-links {{ display: none; }} }}
  </style>
</head>
<body>
  <header>
    <div class="wrap">
      <nav>
        <a class="logo" href="#">{_esc(title.split()[0] if title else owner)}<span>.</span></a>
        <div class="nav-links">
          <a href="#leistungen">Leistungen</a>
          <a href="#preise">Preise</a>
          <a href="#kontakt">Kontakt</a>
        </div>
      </nav>
    </div>
  </header>
  <main>
    <section class="hero wrap">
      <span class="badge">MODERNE WEBSEITE · JAM</span>
      <h1>{_esc(title)}</h1>
      <p>{_esc(tag)}</p>
      <p style="font-size:.9rem">{_esc(sub)}</p>
      <div class="btns">
        {pay_btn}
        <a class="btn ghost" href="#leistungen">Mehr erfahren</a>
      </div>
    </section>
    <section id="leistungen" class="wrap">
      <h2>Leistungen</h2>
      <div class="grid">
        <article class="card"><h3>One-Page / Landing</h3><p>Hero, Services, Kontakt – perfekt für Startups & Creator.</p></article>
        <article class="card"><h3>Business-Site</h3><p>Mehrere Seiten, Team, FAQ, Impressum & Datenschutz.</p></article>
        <article class="card"><h3>Portfolio</h3><p>Projekte, Galerie, Skills – zeig deine beste Arbeit.</p></article>
        <article class="card"><h3>Shop-Anbindung</h3><p>PayPal-Button, Jam-Shop-Link, Fiverr – verkaufen von Tag 1.</p></article>
      </div>
    </section>
    <section id="preise" class="wrap">
      <h2>Pakete (Richtwert)</h2>
      <div class="grid">
        <article class="card"><h3>Starter</h3><p>Moderne One-Page, mobil, Kontakt.</p><p class="price">ab 49 €</p></article>
        <article class="card"><h3>Business</h3><p>Bis 5 Seiten, SEO-Basics, Formular.</p><p class="price">ab 99 €</p></article>
        <article class="card"><h3>Premium</h3><p>Custom Design, Animationen, Support.</p><p class="price">ab 199 €</p></article>
      </div>
    </section>
    <section class="wrap">
      <div id="kontakt">
        <h2>Kontakt</h2>
        <p style="color:var(--muted);margin:1rem 0">Webseite erstellen lassen? Schreib uns – {owner} / Jam antwortet schnell.</p>
        <p><strong>E-Mail:</strong> kontakt@ki-web-studio.de</p>
        <p style="margin-top:1rem;font-size:.85rem">PayPal: {_esc(PAYPAL_EMAIL)}</p>
        <div class="btns" style="margin-top:1.5rem">{pay_btn}</div>
      </div>
    </section>
  </main>
  <footer>
    <p>© {_esc(owner)} · Gebaut von Jam · <a href="https://ki-web-studio.de">ki-web-studio.de</a></p>
    <p><a href="impressum.html">Impressum</a> · <a href="datenschutz.html">Datenschutz</a> (Vorlagen anpassen)</p>
  </footer>
</body>
</html>"""


def build_business_site(
    *,
    owner: str,
    brand: str,
    pages: list[tuple[str, str, str]] | None = None,
) -> dict[str, str]:
    """Mehrere HTML-Seiten – dict dateiname -> html."""
    pages = pages or [
        ("index.html", brand, "Willkommen – modern & professionell."),
        ("leistungen.html", "Leistungen", "Alles aus einer Hand."),
        ("kontakt.html", "Kontakt", "Wir melden uns schnell."),
    ]
    out: dict[str, str] = {}
    for fname, ptitle, pdesc in pages:
        out[fname] = build_modern_onepage(
            owner=owner,
            title=f"{brand} – {ptitle}" if fname != "index.html" else brand,
            tagline=pdesc,
            subtitle=f"Seite: {ptitle}",
        )
    return out


def write_site_to_project(project, *, owner: str, title: str, multi: bool = False) -> Path:
    from pathlib import Path

    site = Path(project) / "site"
    site.mkdir(exist_ok=True)
    if multi:
        for name, html in build_business_site(owner=owner, brand=title).items():
            (site / name).write_text(html, encoding="utf-8")
    else:
        (site / "index.html").write_text(
            build_modern_onepage(owner=owner, title=title),
            encoding="utf-8",
        )
    (site / "HOSTING.txt").write_text(
        "Hosting: Netlify Drop, Cloudflare Pages oder ki-web-studio.de\n"
        "index.html hochladen – fertig.\n",
        encoding="utf-8",
    )
    return site


def _esc(s: str) -> str:
    return (
        str(s)
        .replace("&", "&amp;")
        .replace("<", "&lt;")
        .replace(">", "&gt;")
        .replace('"', "&quot;")
    )


def websites_offer_page_html(*, owner: str, shared_css: str, esc) -> str:
    """Shop-Seite: Webseiten erstellen lassen."""
    from jam.service_catalog import SERVICE_OFFERINGS

    cards = []
    for o in SERVICE_OFFERINGS:
        if not o["id"].startswith("web"):
            continue
        bullets = "".join(f"<li>{esc(b)}</li>" for b in o.get("bullets", [])[:5])
        cards.append(
            f"""<article class="card service-card">
  <h3>{o['icon']} {esc(o['title'])}</h3>
  <p class="desc">{esc(o['description'])}</p>
  <p class="price">ab {o['price_from']} € · bis {o['price_to']} €</p>
  <ul class="svc-list">{bullets}</ul>
</article>"""
        )
    if not cards:
        cards.append(
            '<p class="sub">Moderne Webseiten – One-Page, Business, Portfolio. Anfrage per Fiverr oder PayPal.</p>'
        )
    return f"""<!DOCTYPE html>
<html lang="de"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Webseiten erstellen – Jam</title>
<style>
{shared_css}
.service-card .svc-list {{ margin: .5rem 0 0 1.1rem; padding: 0; font-size: .8rem; color: #94a3b8; }}
.demo-link {{ display:block;text-align:center;margin:1rem;color:#fde68a;font-weight:600; }}
</style>
<script src="jam-stats.js"></script>
</head><body>
<header class="jam-hero">
  <span class="jam-badge">WEBSEITEN · MODERN</span>
  <h1>Webseiten erstellen lassen</h1>
  <p class="sub">Responsive, dunkles Design, PayPal, Impressum – von Jam/David für <strong>{esc(owner)}</strong>.</p>
  <p class="sub"><a href="https://ki-web-studio.de" style="color:#a78bfa">ki-web-studio.de</a> – Referenz-Qualität</p>
</header>
<nav class="nav">
  <a href="index.html">🛒 Shop</a>
  <a href="webseiten.html">🌐 Webseiten</a>
  <a href="dienstleistungen.html">🛠️ Alle Leistungen</a>
  <a href="impressum.html">Impressum</a>
</nav>
<a class="demo-link" href="site/demo-index.html" target="_blank">▶ Demo-Vorschau öffnen (Beispiel-Design)</a>
<div class="grid">{''.join(cards)}</div>
<footer>Jam-Shop · Web-Anfragen: kontakt@ki-web-studio.de</footer>
</body></html>"""
