"""Thinkera Academy — static site generator.

    python build.py            build every page (Arabic at the root, English under /en/)

Content lives in content/site.json and content/courses.json; styles in brand/tokens.css and
assets/css/site.css. Output is plain HTML: open index.html, or serve the folder.
"""
import json
import shutil
from html import escape as e
from pathlib import Path

ROOT = Path(__file__).resolve().parent
S = json.loads((ROOT / "content" / "site.json").read_text(encoding="utf-8"))
C = json.loads((ROOT / "content" / "courses.json").read_text(encoding="utf-8"))
COURSES = sorted(C["courses"], key=lambda c: c["order"])
LANGS = ("ar", "en")


def prefixes(lang, depth):
    """(assets, nav): assets is the path to /brand and /assets; nav is the path to the language's own root."""
    return "../" * (depth + (1 if lang == "en" else 0)), "../" * depth


def t(node, lang):
    """Pick the language out of a {"ar":…, "en":…} node."""
    return node[lang] if isinstance(node, dict) and lang in node else node


def price_text(course, lang):
    p = course["price"]
    if p["amount"] is None:
        return f'<span class="price">{e(t(p["note"], lang))}</span>'
    cur = t(C["currency"], lang)
    return f'<span class="price">{p["amount"]:,} {e(cur)}</span>'


def status_badge(course, lang):
    label = S["courses_page"][lang]["status"][course["status"]]
    cls = {"live": "badge--live", "partial": "badge--soon", "soon": "badge--plain"}[course["status"]]
    icon = {"live": "●", "partial": "◐", "soon": "○"}[course["status"]]
    return f'<span class="badge {cls}"><span aria-hidden="true">{icon}</span>{e(label)}</span>'


def head(lang, title, desc, A, alt_href):
    rtl = lang == "ar"
    return f"""<!doctype html>
<html lang="{lang}" dir="{'rtl' if rtl else 'ltr'}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{e(title)}</title>
<meta name="description" content="{e(desc)}">
<link rel="icon" href="{A}brand/favicon.svg" type="image/svg+xml">
<link rel="alternate" hreflang="{'en' if rtl else 'ar'}" href="{alt_href}">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{A}brand/tokens.css?v=20260918">
<link rel="stylesheet" href="{A}assets/css/site.css?v=20260918">
<meta property="og:title" content="{e(title)}">
<meta property="og:description" content="{e(desc)}">
<meta property="og:type" content="website">
</head>
<body>
<a class="skip" href="#main">{e(S['ui'][lang]['skip'])}</a>
"""


def header(lang, A, N, current, alt_href):
    nav = "".join(
        f'<li><a href="{N}{href}"{" aria-current=\"page\"" if href == current else ""}>{e(label)}</a></li>'
        for label, href in S["nav"][lang])
    brand = t(S["brand"]["name"], lang)
    return f"""<header class="site-header">
 <div class="wrap">
  <a class="brand-link" href="{N}index.html" aria-label="{e(brand)}">
   <picture>
    <source srcset="{A}brand/thinkera-logo-white.svg" media="(prefers-color-scheme: dark)">
    <img src="{A}brand/thinkera-logo.svg" alt="{e(brand)}" width="122" height="34">
   </picture>
  </a>
  <nav class="nav" id="nav" aria-label="{e(S['nav'][lang][0][0])}"><ul>{nav}</ul></nav>
  <div class="header-tools">
   <a class="btn btn--quiet" href="{alt_href}" hreflang="{'en' if lang == 'ar' else 'ar'}" lang="{'en' if lang == 'ar' else 'ar'}">{e(S['ui'][lang]['lang_switch'])}</a>
   <button class="btn btn--quiet nav-toggle" type="button" aria-expanded="false" aria-controls="nav">{e(S['ui'][lang]['menu'])}</button>
   <a class="btn btn--primary" href="{N}course/bacc-en.html#preview">{e(S['cta'][lang]['free'])}</a>
  </div>
 </div>
</header>
"""


def footer(lang, A, N):
    f = S["footer"][lang]
    brand = t(S["brand"]["name"], lang)
    courses = "".join(f'<li><a href="{N}course/{c["slug"]}.html">{e(t(c["title"], lang))}</a></li>' for c in COURSES)
    links = "".join(f'<li><a href="{A if href.startswith("brand/") else N}{href}">{e(label)}</a></li>'
                     for label, href in f["links"])
    mail = S["contact"]["email"]
    yt = S["contact"].get("youtube")
    yt_link = f'<p><a href="{e(yt)}" rel="noopener">{e(S["cta"][lang]["youtube"])}</a></p>' if yt else ""
    return f"""<footer class="site-footer">
 <div class="wrap">
  <div class="cols">
   <div>
    <img src="{A}brand/thinkera-logo-white.svg" alt="{e(brand)}" width="150" height="42">
    <p style="margin-top:var(--tk-space-4);max-width:34ch">{e(f['tagline'])}</p>
    <p><a href="mailto:{mail}" class="ltr">{mail}</a></p>
    {yt_link}
   </div>
   <div><h2>{e(f['courses'])}</h2><ul>{courses}</ul></div>
   <div><h2>{e(f['academy'])}</h2><ul>{links}</ul></div>
  </div>
  <div class="legal">
   <span>© <span class="num">2026</span> {e(brand)}. {e(f['rights'])}</span>
   <span>{e(f['by'])}</span>
  </div>
 </div>
</footer>
<script src="{A}assets/js/site.js" defer></script>
</body>
</html>
"""


# each course gets its own surface from the brand ramp, so a row of cards is not five identical blocks
THUMB_BG = {"bacc-en": "var(--tk-royal-700)", "bacc-ar": "var(--tk-royal-800)", "kids": "var(--tk-azure-700)",
            "advanced": "var(--tk-navy-900)", "ai-daily": "var(--tk-navy-700)"}


def course_card(c, lang, A, N, level=3):
    url = f"{N}course/{c['slug']}.html"
    bg = THUMB_BG.get(c["slug"], "var(--tk-royal-700)")
    facts = " · ".join(e(t(x, lang)) for x in c["facts"][:2])
    cta = S["cta"][lang]["primary"] if c["status"] != "soon" else S["cta"][lang]["notify"]
    poster = (c.get("preview") or {}).get("poster") if c["status"] != "soon" else None
    thumb = (f'<div class="thumb thumb--photo"><img src="{A}{poster}" alt="" width="640" height="360" loading="lazy"></div>'
             if poster else
             f'<div class="thumb" style="background:{bg}"><img src="{A}brand/thinkera-mark-white.svg" alt="" width="120" height="120"></div>')
    return f"""<article class="card course-card">
 {thumb}
 {status_badge(c, lang)}
 <h{level} class="ccard-title"><a href="{url}">{e(t(c['title'], lang))}</a></h{level}>
 <p class="muted">{e(t(c['tagline'], lang))}</p>
 <p class="meta">{facts}</p>
 <div class="spacer"></div>
 <div class="foot">{price_text(c, lang)}<a class="btn btn--secondary" href="{url}">{e(cta)}</a></div>
</article>"""


# ---------------------------------------------------------------- pages
def unit_count(u, lang):
    """The count beside a unit: lessons from the book, what we added, or labs and projects."""
    p = S["course_page"][lang]
    if u.get("kind") == "labs":
        return f'<span class="num">{u["lessons"]}</span> {e(p["labs_word"])}'
    if u.get("kind") == "projects":
        return f'<span class="num">{u["lessons"]}</span> {e(p["projects_word"])}'
    if "book" in u:
        return (f'<span class="num">{u["book"]}</span> {e(p["from_book"])} + '
                f'<span class="num">{u["lessons"] - u["book"]}</span> {e(p["added"])}')
    return f'<span class="num">{u["lessons"]}</span> {e(p["lessons_word"])}'


def unit_items(course, lang):
    p = S["course_page"][lang]
    out = ""
    for u in course["units"]:
        added = u.get("source") == "added"
        flag = f'<span class="unit-flag">{e(p["added_unit"])}</span>' if added else ""
        out += (f'<li class="{"is-added" if added else ""}"><span class="n">{u["n"]}</span>'
                f'<span class="name">{e(t(u, lang))}{flag}</span><span class="c">{unit_count(u, lang)}</span></li>')
    return out


def page_home(lang):
    h = S["home"][lang]
    A, N = prefixes(lang, 0)
    alt = "en/index.html" if lang == "ar" else "../index.html"
    free = f"{N}course/bacc-en.html#preview"
    facts = "".join(f'<li><b class="num">{e(n)}</b><span>{e(lbl)}</span></li>' for n, lbl in h["facts"])
    bar = "".join(f'<span class="seg seg--{k}" style="flex:{n}"><b class="num">{e(n)}</b><span>{e(lbl)}</span></span>'
                  for n, lbl, k in h["book_bar"])
    layers = "".join(
        f'<article class="layer"><span class="layer-badge{" layer-badge--none" if i == 0 else ""}"'
        f'{" lang=\"en\"" if i else ""}>{e(b)}</span><h4>{e(name)}</h4><p class="muted">{e(txt)}</p></article>'
        for i, (b, name, txt) in enumerate(h["layers"]))
    steps = "".join(f'<li class="step"><span class="step-n num">{e(n)}</span><h3>{e(a)}</h3><p class="muted">{e(b)}</p></li>'
                    for n, a, b in h["steps"])
    boxes = "".join(f'<div class="lbox"><h3 lang="en">{e(a)}</h3><p>{e(b)}</p></div>' for a, b in h["life_boxes"])
    bacc = next(c for c in COURSES if c["slug"] == "bacc-en")
    people = "".join(f'<article class="card person"><h3>{e(a)}</h3><p class="muted">{e(b)}</p></article>' for a, b in h["people"])
    cards = "".join(course_card(c, lang, A, N) for c in COURSES)
    faq = "".join(f"<details><summary>{e(q)}</summary><p>{e(a)}</p></details>" for q, a in h["faq"])
    return head(lang, h["title"], h["description"], A, alt) + header(lang, A, N, "index.html", alt) + f"""
<main id="main">
 <section class="hero">
  <div class="wrap">
   <div class="hero-copy">
    <p class="eyebrow">{e(h['eyebrow'])}</p>
    <h1>{e(h['h1'][0])}<span class="spark">{e(h['h1'][1])}</span></h1>
    <p>{e(h['lead'])}</p>
    <div class="btn-row">
     <a class="btn btn--on-dark" href="{free}">{e(S['cta'][lang]['free'])}</a>
     <a class="btn btn--ghost-dark" href="{N}courses.html">{e(S['cta'][lang]['all'])}</a>
    </div>
    <ul class="hero-facts">{facts}</ul>
   </div>
   <div class="hero-art"><img src="{A}assets/img/jana.webp" alt="{e(h['jana_alt'])}" width="476" height="900"></div>
  </div>
 </section>

 <section class="section" id="beyond">
  <div class="wrap">
   <h2>{e(h['book_title'])}</h2>
   <p class="lead">{e(h['book_lead'])}</p>
   <figure class="comp">
    <figcaption>{e(h['book_bar_title'])}</figcaption>
    <div class="comp-bar" role="img" aria-label="{e(h['book_bar_title'])}">{bar}</div>
   </figure>
   <p class="code-note"><span aria-hidden="true" class="code-ico">&lt;/&gt;</span>{e(h['book_code'])}</p>
   <h3 style="margin-top:var(--tk-space-7)">{e(h['layers_title'])}</h3>
   <div class="grid grid--3 layers">{layers}</div>
   <p class="paths">{e(h['paths'])}</p>
  </div>
 </section>

 <section class="section-tight band">
  <div class="wrap">
   <h2>{e(h['steps_title'])}</h2>
   <ol class="steps">{steps}</ol>
  </div>
 </section>

 <section class="section">
  <div class="wrap life">
   <figure class="life-img"><img src="{A}assets/img/lesson-1-1-koshari.jpg" alt="{e(h['life_alt'])}" width="1200" height="675" loading="lazy"></figure>
   <div>
    <h2>{e(h['life_title'])}</h2>
    <p class="lead">{e(h['life_text'])}</p>
    <div class="lboxes">{boxes}</div>
   </div>
  </div>
 </section>

 <section class="section-tight band">
  <div class="wrap">
   <h2>{e(h['units_title'])}</h2>
   <p class="lead">{e(h['units_lead'])}</p>
   <ol class="unit-list">{unit_items(bacc, lang)}</ol>
  </div>
 </section>

 <section class="section">
  <div class="wrap">
   <h2>{e(h['people_title'])}</h2>
   <div class="grid grid--3">{people}</div>
  </div>
 </section>

 <section class="section-tight">
  <div class="wrap">
   <h2>{e(h['courses_title'])}</h2>
   <p class="lead">{e(h['courses_lead'])}</p>
   <div class="grid grid--3" style="margin-top:var(--tk-space-6)">{cards}</div>
  </div>
 </section>

 <section class="cta-band">
  <div class="wrap narrow center">
   <h2>{e(h['cta_title'])}</h2>
   <p class="lead">{e(h['cta_lead'])}</p>
   <div class="btn-row" style="justify-content:center">
    <a class="btn btn--on-dark" href="{free}">{e(S['cta'][lang]['free'])}</a>
    <a class="btn btn--ghost-dark" href="{N}pricing.html">{e(S['cta'][lang]['enrol'])}</a>
   </div>
  </div>
 </section>

 <section class="section-tight">
  <div class="wrap narrow">
   <h2>{e(h['faq_title'])}</h2>
   <div class="faq">{faq}</div>
  </div>
 </section>
</main>
""" + footer(lang, A, N)


def page_courses(lang):
    p = S["courses_page"][lang]
    A, N = prefixes(lang, 0)
    alt = "en/courses.html" if lang == "ar" else "../courses.html"
    cards = "".join(course_card(c, lang, A, N, level=2) for c in COURSES)
    return head(lang, p["title"], p["description"], A, alt) + header(lang, A, N, "courses.html", alt) + f"""
<main id="main" class="section">
 <div class="wrap">
  <h1>{e(p['h1'])}</h1>
  <p class="lead">{e(p['lead'])}</p>
  <div class="grid grid--3" style="margin-top:var(--tk-space-7)">{cards}</div>
 </div>
</main>
""" + footer(lang, A, N)


def page_course(c, lang):
    p = S["course_page"][lang]
    A, N = prefixes(lang, 1)
    alt = f"../en/course/{c['slug']}.html" if lang == "ar" else f"../../course/{c['slug']}.html"
    title = t(c["title"], lang)
    outcomes = "".join(f"<li>{e(x)}</li>" for x in t(c["outcomes"], lang))
    includes = "".join(f"<li>{e(x)}</li>" for x in t(c["includes"], lang))
    facts = "".join(f'<li class="tag">{e(t(x, lang))}</li>' for x in c["facts"])
    units = unit_items(c, lang) if c["units"] else ""
    split = any("source" in u for u in c["units"])
    units_block = (f'<h2>{e(p["units"])}</h2>' + (f'<p class="lead">{e(p["units_lead"])}</p>' if split else "")
                   + f'<ol class="unit-list">{units}</ol>') if units else ""
    cta = S["cta"][lang]["enrol"] if c["status"] != "soon" else S["cta"][lang]["notify"]
    poster = (c.get("preview") or {}).get("poster")
    if poster:
        preview = (f'<figure class="poster"><img src="{A}{poster}" alt="{e(t(c["title"], lang))}"'
                   f' width="1280" height="720" loading="lazy">'
                   f'<span class="poster-play" aria-hidden="true">▶</span><figcaption>'
                   f'{e(t(c["preview"]["poster_note"], lang))} · {e(t(c["availability"], lang))}'
                   f'</figcaption></figure>')
    else:
        preview = ('<div class="alert alert--info" style="text-align:start">'
                   '<span aria-hidden="true">▶</span>'
                   f'<p style="margin:0">{e(t(c["availability"], lang))}</p></div>')
    page_title = t(c.get("title_short") or c["title"], lang)
    return head(lang, f'{page_title} | {t(S["brand"]["name"], lang)}', t(c["tagline"], lang), A, alt) \
        + header(lang, A, N, "courses.html", alt) + f"""
<main id="main">
 <section class="course-head">
  <div class="wrap">
   <div>
    <p class="breadcrumb"><a href="{N}courses.html">{e(p['back'])}</a></p>
    {status_badge(c, lang)}
    <h1>{e(title)}</h1>
    <p class="lead">{e(t(c['tagline'], lang))}</p>
    <ul class="tag-row">{facts}</ul>
   </div>
   <aside class="buy-card" aria-label="{e(cta)}">
    {price_text(c, lang)}
    <ul>{includes}</ul>
    <a class="btn btn--primary" style="width:100%" href="{N}pricing.html?course={c['slug']}">{e(cta)}</a>
    <p class="form-note" style="margin-top:var(--tk-space-3)">{e(t(c['availability'], lang))}</p>
   </aside>
  </div>
 </section>

 <section class="section">
  <div class="wrap">
   <div class="grid grid--2">
    <div>
     <h2>{e(p['outcomes'])}</h2>
     <ul>{outcomes}</ul>
    </div>
    <div>
     <h2>{e(p['audience'])}</h2>
     <p>{e(t(c['audience'], lang))}</p>
     <p class="muted"><strong>{e(p['instruction'])}:</strong> {e(t(c['instruction'], lang))}<br>
        <strong>{e(p['level'])}:</strong> {e(t(c['level'], lang))}</p>
    </div>
   </div>
  </div>
 </section>

 {'<section class="section-tight" style="background:var(--tk-bg-surface);border-block:1px solid var(--tk-border)"><div class="wrap">' + units_block + '</div></section>' if units_block else ''}

 <section class="section-tight">
  <div class="wrap narrow center" id="preview">
   <h2>{e(p['preview'])}</h2>
   <p class="lead">{e(p['preview_note'])}</p>
   {preview}
  </div>
 </section>
</main>
""" + footer(lang, A, N)


def page_pricing(lang):
    p = S["pricing_page"][lang]
    A, N = prefixes(lang, 0)
    alt = "en/pricing.html" if lang == "ar" else "../pricing.html"
    f = p["fields"]
    plans = ""
    for name, desc, items, price in p["plans"]:
        price_html = f'<span class="price">{e(price)}</span>' if price else \
            f'<span class="price">{e(t(COURSES[0]["price"]["note"], lang))}</span>'
        plans += (f'<article class="card"><h3>{e(name)}</h3><p class="muted">{e(desc)}</p>'
                  f'<ul>{"".join(f"<li>{e(i)}</li>" for i in items)}</ul>{price_html}</article>')
    opts = "".join(f'<option value="{c["slug"]}">{e(t(c["title"], lang))}</option>' for c in COURSES)
    roles = "".join(f"<option>{e(r)}</option>" for r in p["roles"])
    return head(lang, p["title"], p["description"], A, alt) + header(lang, A, N, "pricing.html", alt) + f"""
<main id="main" class="section">
 <div class="wrap">
  <h1>{e(p['h1'])}</h1>
  <p class="lead">{e(p['lead'])}</p>
  <h2 style="margin-top:var(--tk-space-7)">{e(p['plans_title'])}</h2>
  <div class="grid grid--3">{plans}</div>

  <div class="narrow" style="margin-top:var(--tk-space-8)">
   <h2>{e(p['form_title'])}</h2>
   <p class="lead">{e(p['form_lead'])}</p>
   <form class="form" method="post" action="#" style="margin-top:var(--tk-space-5)" novalidate>
    <div class="field"><label for="name">{e(f['name'])}</label><input id="name" name="name" autocomplete="name" required></div>
    <div class="field"><label for="email">{e(f['email'])}</label><input id="email" name="email" type="email" autocomplete="email" required></div>
    <div class="field"><label for="phone">{e(f['phone'])}</label><input id="phone" name="phone" type="tel" autocomplete="tel" inputmode="tel"></div>
    <div class="field"><label for="role">{e(f['role'])}</label><select id="role" name="role">{roles}</select></div>
    <div class="field"><label for="course">{e(f['course'])}</label><select id="course" name="course">{opts}</select></div>
    <div class="field"><label for="note">{e(f['note'])}</label><textarea id="note" name="note" rows="3"></textarea></div>
    <p class="form-note">{e(p['privacy'])}</p>
    <div><button class="btn btn--primary" type="submit">{e(p['submit'])}</button></div>
   </form>
  </div>
 </div>
</main>
""" + footer(lang, A, N)


def page_about(lang):
    p = S["about_page"][lang]
    h = S["home"][lang]
    A, N = prefixes(lang, 0)
    alt = "en/about.html" if lang == "ar" else "../about.html"
    people = "".join(f'<article class="card person"><h3>{e(a)}</h3><p class="muted">{e(b)}</p></article>' for a, b in h["people"])
    rules = "".join(f"<li>{e(x)}</li>" for x in p["principles"])
    secs = "".join(f'<article class="card"><h3 class="card-title">{e(a)}</h3><p class="muted">{e(b)}</p></article>' for a, b in p["sections"])
    return head(lang, p["title"], p["description"], A, alt) + header(lang, A, N, "about.html", alt) + f"""
<main id="main" class="section">
 <div class="wrap">
  <h1>{e(p['h1'])}</h1>
  <p class="lead narrow">{e(p['lead'])}</p>
  <h2 style="margin-top:var(--tk-space-7)">{e(p['people_title'])}</h2>
  <div class="grid grid--3">{people}</div>
  <h2 style="margin-top:var(--tk-space-8)">{e(p['principles_title'])}</h2>
  <ol class="rules">{rules}</ol>
  <div class="grid grid--3" style="margin-top:var(--tk-space-7)">{secs}</div>
  <p class="muted" style="margin-top:var(--tk-space-7)">{e(p['dolf'])}</p>
 </div>
</main>
""" + footer(lang, A, N)


def write(path, html):
    p = ROOT / path
    p.parent.mkdir(parents=True, exist_ok=True)
    p.write_text(html, encoding="utf-8", newline="\n")
    return path


def main():
    made = []
    for lang in LANGS:
        base = "" if lang == "ar" else "en/"
        made.append(write(f"{base}index.html", page_home(lang)))
        made.append(write(f"{base}courses.html", page_courses(lang)))
        made.append(write(f"{base}pricing.html", page_pricing(lang)))
        made.append(write(f"{base}about.html", page_about(lang)))
        for c in COURSES:
            made.append(write(f"{base}course/{c['slug']}.html", page_course(c, lang)))
    print(f"{len(made)} pages written:")
    for m in made:
        print("  ", m)


if __name__ == "__main__":
    main()
