Update src/streamlit_app.py

src/streamlit_app.py

@@ -3,19 +3,229 @@ import pandas as pd
 import plotly.express as px
 import plotly.graph_objects as go
 from plotly.subplots import make_subplots
+import numpy as np
 
+# ─────────────────────────────────────────────────────────────────────────────
+# PAGE CONFIG
+# ─────────────────────────────────────────────────────────────────────────────
 st.set_page_config(
-    page_title="Netflix Content Dashboard",
+    page_title="Netflix Analytics",
     page_icon="🎬",
     layout="wide",
+    initial_sidebar_state="expanded",
 )
 
-st.title("🎬 Netflix Content Dashboard")
-st.caption("ข้อมูลจาก TMDB API · อัปเดตผ่าน Airflow Pipeline")
+# ─────────────────────────────────────────────────────────────────────────────
+# GLOBAL THEME — CSS
+# ─────────────────────────────────────────────────────────────────────────────
+NETFLIX_RED   = "#E50914"
+NETFLIX_DARK  = "#141414"
+NETFLIX_CARD  = "#1f1f1f"
+NETFLIX_GRAY  = "#2a2a2a"
+ACCENT_PURPLE = "#6C5CE7"
+ACCENT_TEAL   = "#00B4D8"
+TEXT_PRIMARY  = "#FFFFFF"
+TEXT_MUTED    = "#9e9e9e"
+
+PLOTLY_TEMPLATE = dict(
+    layout=go.Layout(
+        paper_bgcolor="rgba(0,0,0,0)",
+        plot_bgcolor="rgba(0,0,0,0)",
+        font=dict(family="DM Sans, sans-serif", color=TEXT_PRIMARY, size=12),
+        xaxis=dict(gridcolor="#2a2a2a", linecolor="#2a2a2a", tickcolor="#9e9e9e"),
+        yaxis=dict(gridcolor="#2a2a2a", linecolor="#2a2a2a", tickcolor="#9e9e9e"),
+        colorway=[NETFLIX_RED, ACCENT_PURPLE, ACCENT_TEAL, "#F39C12", "#27AE60"],
+        legend=dict(bgcolor="rgba(0,0,0,0)", font=dict(color=TEXT_PRIMARY)),
+        margin=dict(l=10, r=10, t=40, b=10),
+        title=dict(font=dict(size=14, color=TEXT_PRIMARY)),
+    )
+)
+
+st.markdown(f"""
+<style>
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Bebas+Neue&display=swap');
+
+/* ── Reset & Base ── */
+html, body, [data-testid="stAppViewContainer"] {{
+    background-color: {NETFLIX_DARK};
+    color: {TEXT_PRIMARY};
+    font-family: 'DM Sans', sans-serif;
+}}
+[data-testid="stAppViewContainer"] {{
+    background: radial-gradient(ellipse at top left, #1a0a0a 0%, {NETFLIX_DARK} 50%);
+}}
+[data-testid="stSidebar"] {{
+    background-color: #0d0d0d !important;
+    border-right: 1px solid #2a2a2a;
+}}
+[data-testid="stSidebar"] * {{ color: {TEXT_PRIMARY} !important; }}
+[data-testid="stMetricLabel"] {{ color: {TEXT_MUTED} !important; font-size: 11px !important; }}
+[data-testid="stMetricValue"] {{ color: {TEXT_PRIMARY} !important; font-size: 22px !important; font-weight: 700; }}
+
+/* ── Divider ── */
+hr {{ border-color: #2a2a2a !important; margin: 1.5rem 0; }}
+
+/* ── Plotly Charts ── */
+.js-plotly-plot .plotly {{ border-radius: 12px; }}
+
+/* ── Section Header ── */
+.section-header {{
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 26px;
+    letter-spacing: 2px;
+    color: {TEXT_PRIMARY};
+    margin: 0.5rem 0 1rem 0;
+    padding-bottom: 6px;
+    border-bottom: 2px solid {NETFLIX_RED};
+    display: inline-block;
+}}
+
+/* ── KPI Card ── */
+.kpi-card {{
+    background: linear-gradient(135deg, {NETFLIX_CARD} 0%, #252525 100%);
+    border: 1px solid #2f2f2f;
+    border-radius: 12px;
+    padding: 20px 18px;
+    text-align: center;
+    transition: transform 0.2s, border-color 0.2s;
+    position: relative;
+    overflow: hidden;
+}}
+.kpi-card::before {{
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, {NETFLIX_RED}, {ACCENT_PURPLE});
+}}
+.kpi-card:hover {{ transform: translateY(-3px); border-color: {NETFLIX_RED}; }}
+.kpi-card .kpi-icon {{ font-size: 28px; margin-bottom: 6px; }}
+.kpi-card .kpi-value {{
+    font-size: 28px; font-weight: 700;
+    color: {TEXT_PRIMARY}; line-height: 1;
+}}
+.kpi-card .kpi-label {{
+    font-size: 11px; font-weight: 500;
+    color: {TEXT_MUTED}; letter-spacing: 1px;
+    text-transform: uppercase; margin-top: 4px;
+}}
+.kpi-card .kpi-delta {{
+    font-size: 12px; margin-top: 8px;
+    padding: 2px 8px; border-radius: 20px;
+    display: inline-block;
+}}
+.kpi-delta-pos {{ background: rgba(39,174,96,0.2); color: #27AE60; }}
+.kpi-delta-neg {{ background: rgba(229,9,20,0.2); color: {NETFLIX_RED}; }}
+.kpi-delta-neu {{ background: rgba(158,158,158,0.15); color: {TEXT_MUTED}; }}
+
+/* ── Insight Card ── */
+.insight-card {{
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    border: 1px solid {ACCENT_PURPLE}33;
+    border-left: 3px solid {ACCENT_PURPLE};
+    border-radius: 10px;
+    padding: 14px 16px;
+    margin-bottom: 10px;
+}}
+.insight-card.red {{ border-left-color: {NETFLIX_RED}; background: linear-gradient(135deg, #1a0808 0%, #1f0f0f 100%); }}
+.insight-card.teal {{ border-left-color: {ACCENT_TEAL}; background: linear-gradient(135deg, #051a1f 0%, #0a1f25 100%); }}
+.insight-icon {{ font-size: 18px; margin-right: 8px; }}
+.insight-text {{ font-size: 13px; color: {TEXT_MUTED}; line-height: 1.5; }}
+.insight-text strong {{ color: {TEXT_PRIMARY}; }}
+
+/* ── Comparison Badge ── */
+.compare-badge {{
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 4px 12px; border-radius: 20px;
+    font-size: 12px; font-weight: 600;
+}}
+.badge-movie {{ background: rgba(229,9,20,0.15); color: {NETFLIX_RED}; border: 1px solid {NETFLIX_RED}44; }}
+.badge-tv    {{ background: rgba(108,92,231,0.15); color: {ACCENT_PURPLE}; border: 1px solid {ACCENT_PURPLE}44; }}
+
+/* ── Dashboard Hero ── */
+.hero-title {{
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 52px;
+    letter-spacing: 4px;
+    color: {TEXT_PRIMARY};
+    line-height: 1;
+    margin: 0;
+}}
+.hero-title span {{ color: {NETFLIX_RED}; }}
+.hero-subtitle {{
+    font-size: 13px;
+    color: {TEXT_MUTED};
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    margin-top: 4px;
+}}
+
+/* ── Tab styling ── */
+[data-testid="stTabs"] [role="tab"] {{
+    color: {TEXT_MUTED};
+    font-weight: 500;
+    border-bottom: 2px solid transparent;
+}}
+[data-testid="stTabs"] [role="tab"][aria-selected="true"] {{
+    color: {TEXT_PRIMARY};
+    border-bottom: 2px solid {NETFLIX_RED};
+}}
+
+/* Expander */
+[data-testid="stExpander"] {{
+    background: {NETFLIX_CARD};
+    border: 1px solid #2f2f2f;
+    border-radius: 10px;
+}}
+
+/* Multiselect */
+[data-testid="stMultiSelect"] > div > div {{ background: {NETFLIX_GRAY}; border-color: #3a3a3a; }}
+</style>
+""", unsafe_allow_html=True)
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# HELPER — reusable chart style
+# ─────────────────────────────────────────────────────────────────────────────
+def apply_theme(fig, height=380):
+    fig.update_layout(
+        **PLOTLY_TEMPLATE["layout"].to_plotly_json(),
+        height=height,
+    )
+    return fig
+
+
+def section(label):
+    st.markdown(f'<div class="section-header">{label}</div>', unsafe_allow_html=True)
 
-# ─────────────────────────────────────────────
-# โหลดข้อมูล — แยก 4 ตาราง
-# ─────────────────────────────────────────────
+
+def insight(text, style="purple"):
+    cls = "red" if style == "red" else ("teal" if style == "teal" else "")
+    icons = {"red": "🔴", "teal": "🔵", "": "💡"}
+    icon = icons.get(cls, "💡")
+    st.markdown(f"""
+    <div class="insight-card {cls}">
+        <span class="insight-icon">{icon}</span>
+        <span class="insight-text">{text}</span>
+    </div>""", unsafe_allow_html=True)
+
+
+def kpi(icon, value, label, delta=None, delta_type="neu"):
+    delta_html = ""
+    if delta:
+        delta_html = f'<div class="kpi-delta kpi-delta-{delta_type}">{delta}</div>'
+    st.markdown(f"""
+    <div class="kpi-card">
+        <div class="kpi-icon">{icon}</div>
+        <div class="kpi-value">{value}</div>
+        <div class="kpi-label">{label}</div>
+        {delta_html}
+    </div>""", unsafe_allow_html=True)
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# DATA LOADING
+# ─────────────────────────────────────────────────────────────────────────────
 BASE = "hf://datasets/ihhereanth/netflix_dataset/"
 
 @st.cache_data(ttl=3600)
@@ -25,297 +235,701 @@ def load_data():
     credits  = pd.read_parquet(BASE + "credits.parquet")
     keywords = pd.read_parquet(BASE + "keywords.parquet")
 
-    # แปลง numeric columns ทีเดียวทั้งหมด (ป้องกัน string dtype จาก PySpark)
-    movie_numeric = [
-        "vote_count", "vote_average", "runtime_min",
-        "budget_usd", "revenue_usd", "popularity",
-        "release_year", "release_month", "roi",
-    ]
-    tv_numeric = [
-        "vote_count", "vote_average", "popularity",
-        "number_of_seasons", "number_of_episodes",
-        "first_air_year", "last_air_year",
-    ]
-    for col in movie_numeric:
-        if col in movies.columns:
-            movies[col] = pd.to_numeric(movies[col], errors="coerce")
-    for col in tv_numeric:
-        if col in tv.columns:
-            tv[col] = pd.to_numeric(tv[col], errors="coerce")
+    movie_num = ["vote_count","vote_average","runtime_min","budget_usd","revenue_usd","popularity","release_year","release_month","roi"]
+    tv_num    = ["vote_count","vote_average","popularity","number_of_seasons","number_of_episodes","first_air_year","last_air_year"]
+    for c in movie_num:
+        if c in movies.columns: movies[c] = pd.to_numeric(movies[c], errors="coerce")
+    for c in tv_num:
+        if c in tv.columns: tv[c] = pd.to_numeric(tv[c], errors="coerce")
+
+    # Derived columns
+    if "budget_usd" in movies.columns and "revenue_usd" in movies.columns:
+        movies["profit_usd"] = movies["revenue_usd"] - movies["budget_usd"]
+    if "release_year" in movies.columns:
+        movies["decade"] = (movies["release_year"] // 10 * 10).astype("Int64").astype(str) + "s"
+    if "first_air_year" in tv.columns:
+        tv["decade"] = (tv["first_air_year"] // 10 * 10).astype("Int64").astype(str) + "s"
+    if "gender" in credits.columns:
+        credits["gender"] = credits["gender"].map({0:"Unknown",1:"Female",2:"Male"}).fillna("Unknown")
 
     return movies, tv, credits, keywords
 
-with st.spinner("กำลังโหลดข้อมูลจาก Hugging Face..."):
+
+with st.spinner(""):
     try:
         movies, tv, credits, keywords = load_data()
     except Exception as e:
         st.error(f"โหลดข้อมูลไม่สำเร็จ: {e}")
-        st.info("ตรวจสอบว่า Dataset ใน Hugging Face มีข้อมูลแล้ว และ repo_id ถูกต้อง")
         st.stop()
 
-# ─────────────────────────────────────────────
-# SIDEBAR — Filters
-# ─────────────────────────────────────────────
+
+# ─────────────────────────────────────────────────────────────────────────────
+# SIDEBAR FILTERS
+# ─────────────────────────────────────────────────────────────────────────────
 with st.sidebar:
-    st.header("🔧 ตัวกรอง")
+    st.markdown("""
+    <div style="text-align:center; padding: 12px 0 20px 0;">
+        <div style="font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:3px; color:#E50914;">
+            NETFLIX
+        </div>
+        <div style="font-size:10px; letter-spacing:2px; color:#9e9e9e; text-transform:uppercase;">
+            Analytics Dashboard
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+
+    st.markdown("### 🔧 Filters")
 
     all_genres = sorted({
         g for genres in movies["genres"].dropna()
         for g in (genres if isinstance(genres, list) else [])
     })
-    selected_genres = st.multiselect("Genre (Movies)", all_genres, default=[])
+    selected_genres = st.multiselect("🎭 Genre", all_genres, default=[])
 
     year_min = int(movies["release_year"].min()) if "release_year" in movies.columns else 2000
     year_max = int(movies["release_year"].max()) if "release_year" in movies.columns else 2024
-    year_range = st.slider("ปีที่ออกฉาย", year_min, year_max, (2010, year_max))
+    year_range = st.slider("📅 Release Year", year_min, year_max, (2010, year_max))
+
+    min_votes = st.slider("🗳️ Min Vote Count", 0, 5000, 100, step=50)
+
+    st.markdown("---")
+    st.markdown(f"""
+    <div style="font-size:11px; color:#555; text-align:center;">
+        Data via TMDB · Airflow Pipeline<br>Updated weekly
+    </div>""", unsafe_allow_html=True)
 
-    min_votes = st.slider("Vote count ขั้นต่ำ", 0, 5000, 100, step=50)
 
-# ── Apply filters ────────────────────────────
+# ── Apply Filters ────────────────────────────────────────────────────────────
 movies_f = movies.copy()
 if selected_genres:
-    movies_f = movies_f[movies_f["genres"].apply(
-        lambda g: bool(set(g or []) & set(selected_genres))
-    )]
+    movies_f = movies_f[movies_f["genres"].apply(lambda g: bool(set(g or []) & set(selected_genres)))]
 if "release_year" in movies_f.columns:
     movies_f = movies_f[movies_f["release_year"].between(*year_range)]
 if "vote_count" in movies_f.columns:
     movies_f = movies_f[movies_f["vote_count"] >= min_votes]
 
-# ─────────────────────────────────────────────
-# ROW 1 — KPI Cards
-# ─────────────────────────────────────────────
-st.subheader("📊 ภาพรวม")
-c1, c2, c3, c4, c5 = st.columns(5)
-c1.metric("🎬 Movies",          f"{len(movies_f):,}")
-c2.metric("📺 TV Shows",        f"{len(tv):,}")
-c3.metric("⭐ Avg Rating",      f"{pd.to_numeric(movies_f['vote_average'], errors='coerce').mean():.2f}"
-                                  if "vote_average" in movies_f.columns else "N/A")
-c4.metric("⏱️ Avg Runtime",    f"{pd.to_numeric(movies_f['runtime_min'], errors='coerce').mean():.0f} min"
-                                  if "runtime_min" in movies_f.columns else "N/A")
-c5.metric("🔑 Unique Keywords", f"{keywords['keyword'].nunique():,}" if not keywords.empty else "N/A")
-
-st.divider()
-
-# ─────────────────────────────────────────────
-# ROW 2 — Top Rated + Rating Distribution
-# ─────────────────────────────────────────────
-st.subheader("🏆 Top 10 Movies ที่ได้คะแนนสูงสุด")
-col1, col2 = st.columns([3, 2])
-
-with col1:
-    if "vote_average" in movies_f.columns and "title" in movies_f.columns:
-        top_rated = (movies_f[movies_f["vote_count"] >= 500]
-                     .nlargest(10, "vote_average")
-                     [["title", "vote_average", "vote_count", "release_year"]])
-        fig = px.bar(
-            top_rated, x="vote_average", y="title",
-            orientation="h", color="vote_average",
-            color_continuous_scale="RdYlGn",
-            text="vote_average",
-            labels={"vote_average": "คะแนน", "title": ""},
-        )
-        fig.update_traces(texttemplate="%{text:.2f}", textposition="outside")
-        fig.update_layout(yaxis={"categoryorder": "total ascending"}, showlegend=False,
-                          coloraxis_showscale=False, height=400)
-        st.plotly_chart(fig, use_container_width=True)
-
-with col2:
-    if "vote_average" in movies_f.columns:
-        fig2 = px.histogram(
-            movies_f, x="vote_average", nbins=40,
-            color_discrete_sequence=["#E50914"],
-            labels={"vote_average": "คะแนน", "count": "จำนวน"},
-            title="การกระจายของ Rating",
-        )
-        fig2.update_layout(height=400, bargap=0.05)
-        st.plotly_chart(fig2, use_container_width=True)
 
-# ─────────────────────────────────────────────
-# ROW 3 — Genre Analysis
-# ─────────────────────────────────────────────
-st.subheader("🎭 Genre Analysis")
-col3, col4 = st.columns(2)
+# ─────────────────────────────────────────────────────────────────────────────
+# HERO HEADER
+# ─────────────────────────────────────────────────────────────────────────────
+st.markdown("""
+<div style="padding: 20px 0 10px 0;">
+    <div class="hero-title">NETFLIX <span>ANALYTICS</span></div>
+    <div class="hero-subtitle">Content Intelligence Dashboard · TMDB Dataset</div>
+</div>
+""", unsafe_allow_html=True)
+
+st.markdown("---")
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# SECTION 1 — KPI Overview
+# ─────────────────────────────────────────────────────────────────────────────
+section("📊 OVERVIEW")
+
+avg_rating_m  = movies_f["vote_average"].mean() if "vote_average" in movies_f else 0
+avg_rating_tv = tv["vote_average"].mean() if "vote_average" in tv.columns else 0
+avg_rt        = movies_f["runtime_min"].mean() if "runtime_min" in movies_f else 0
+total_rev     = movies_f["revenue_usd"].sum() if "revenue_usd" in movies_f.columns else 0
+total_budget  = movies_f["budget_usd"].sum() if "budget_usd" in movies_f.columns else 0
+unique_kw     = keywords["keyword"].nunique() if not keywords.empty else 0
+
+c1, c2, c3, c4, c5, c6 = st.columns(6)
+with c1: kpi("🎬", f"{len(movies_f):,}", "Movies")
+with c2: kpi("📺", f"{len(tv):,}", "TV Shows")
+with c3: kpi("⭐", f"{avg_rating_m:.2f}", "Avg Movie Rating",
+             delta=f"TV: {avg_rating_tv:.2f}",
+             delta_type="pos" if avg_rating_m >= avg_rating_tv else "neg")
+with c4: kpi("⏱️", f"{avg_rt:.0f} min", "Avg Runtime")
+with c5: kpi("💰", f"${total_rev/1e9:.1f}B", "Total Revenue")
+with c6: kpi("🔑", f"{unique_kw:,}", "Keywords")
+
+st.markdown("---")
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# SECTION 2 — Movie vs TV Comparison
+# ─────────────────────────────────────────────────────────────────────────────
+section("⚔️ MOVIES vs TV SHOWS")
+
+col_l, col_r = st.columns([1, 1], gap="large")
+
+# ── 2A: Rating Distribution Side-by-Side ──
+with col_l:
+    st.markdown('<span class="compare-badge badge-movie">🎬 Movies</span>&nbsp;<span class="compare-badge badge-tv">📺 TV Shows</span>', unsafe_allow_html=True)
+    st.markdown("**Rating Distribution**")
+
+    fig_cmp1 = go.Figure()
+    fig_cmp1.add_trace(go.Histogram(
+        x=movies_f["vote_average"].dropna(), name="Movies",
+        nbinsx=30, marker_color=NETFLIX_RED, opacity=0.75,
+        histnorm="percent",
+    ))
+    fig_cmp1.add_trace(go.Histogram(
+        x=tv["vote_average"].dropna(), name="TV Shows",
+        nbinsx=30, marker_color=ACCENT_PURPLE, opacity=0.75,
+        histnorm="percent",
+    ))
+    fig_cmp1.update_layout(barmode="overlay", xaxis_title="Rating", yaxis_title="% of Titles")
+    apply_theme(fig_cmp1, height=320)
+    fig_cmp1.add_vline(x=movies_f["vote_average"].median(), line_dash="dash",
+                       line_color=NETFLIX_RED, annotation_text=f"Movie median", annotation_font_size=10)
+    fig_cmp1.add_vline(x=tv["vote_average"].median(), line_dash="dash",
+                       line_color=ACCENT_PURPLE, annotation_text=f"TV median", annotation_font_size=10)
+    st.plotly_chart(fig_cmp1, use_container_width=True)
+
+# ── 2B: Radar — Avg Metrics ──
+with col_r:
+    st.markdown("**Content Profile Radar**")
+
+    def safe_norm(val, ref_max): return min(val / ref_max, 1.0) if ref_max else 0
+
+    m_rating  = movies_f["vote_average"].mean() or 0
+    tv_rating = tv["vote_average"].mean() or 0
+    m_pop     = movies_f["popularity"].mean() or 0
+    tv_pop    = tv["popularity"].mean() or 0
+    m_votes   = movies_f["vote_count"].mean() or 0
+    tv_votes  = tv["vote_count"].mean() or 0
+    m_seasons = 1
+    tv_seasons= tv["number_of_seasons"].mean() or 1
+
+    cats = ["Rating", "Popularity", "Engagement\n(Votes)", "Longevity\n(Seasons)", "Diversity\n(Genres)"]
+    max_vals = [10, max(m_pop, tv_pop) or 1, max(m_votes, tv_votes) or 1, max(m_seasons, tv_seasons) or 1, 1]
+    m_vals  = [m_rating, m_pop, m_votes, m_seasons, min(len(selected_genres)/20 if selected_genres else 0.5, 1)]
+    tv_vals = [tv_rating, tv_pop, tv_votes, tv_seasons, 0.7]
+
+    m_norm  = [safe_norm(v, mx) * 10 for v, mx in zip(m_vals, max_vals)]
+    tv_norm = [safe_norm(v, mx) * 10 for v, mx in zip(tv_vals, max_vals)]
+
+    fig_radar = go.Figure()
+    for name, vals, color in [("Movies", m_norm, NETFLIX_RED), ("TV Shows", tv_norm, ACCENT_PURPLE)]:
+        fig_radar.add_trace(go.Scatterpolar(
+            r=vals + [vals[0]], theta=cats + [cats[0]],
+            fill="toself", name=name,
+            line=dict(color=color, width=2),
+            fillcolor=color + "22",
+        ))
+    fig_radar.update_layout(polar=dict(
+        bgcolor="rgba(0,0,0,0)",
+        radialaxis=dict(visible=True, range=[0, 10], gridcolor="#2a2a2a", color="#555"),
+        angularaxis=dict(gridcolor="#2a2a2a", color=TEXT_MUTED),
+    ))
+    apply_theme(fig_radar, height=320)
+    st.plotly_chart(fig_radar, use_container_width=True)
+
+# ── 2C: Popularity by Year — Area Comparison ──
+st.markdown("**Content Volume Over Time**")
 
-with col3:
+if "release_year" in movies_f.columns and "first_air_year" in tv.columns:
+    by_year_m  = movies_f.groupby("release_year").size().reset_index(name="count")
+    by_year_tv = tv[tv["first_air_year"] >= 1990].groupby("first_air_year").size().reset_index(name="count")
+    by_year_tv = by_year_tv.rename(columns={"first_air_year": "year"})
+    by_year_m  = by_year_m.rename(columns={"release_year": "year"})
+
+    fig_timeline = go.Figure()
+    fig_timeline.add_trace(go.Scatter(
+        x=by_year_m["year"], y=by_year_m["count"],
+        name="Movies", mode="lines", fill="tozeroy",
+        line=dict(color=NETFLIX_RED, width=2),
+        fillcolor=NETFLIX_RED + "22",
+    ))
+    fig_timeline.add_trace(go.Scatter(
+        x=by_year_tv["year"], y=by_year_tv["count"],
+        name="TV Shows", mode="lines", fill="tozeroy",
+        line=dict(color=ACCENT_PURPLE, width=2),
+        fillcolor=ACCENT_PURPLE + "22",
+    ))
+    fig_timeline.update_layout(xaxis_title="Year", yaxis_title="Titles Added")
+    apply_theme(fig_timeline, height=260)
+    st.plotly_chart(fig_timeline, use_container_width=True)
+
+# ── Comparison Insight Box ──
+col_i1, col_i2, col_i3 = st.columns(3)
+with col_i1:
+    diff = abs(avg_rating_m - avg_rating_tv)
+    winner = "TV Shows" if avg_rating_tv > avg_rating_m else "Movies"
+    insight(f"<strong>{winner}</strong> ได้คะแนน Rating สูงกว่าอีกฝ่ายถึง <strong>{diff:.2f} คะแนน</strong>", "red")
+with col_i2:
+    m_count = len(movies_f); tv_count = len(tv)
+    ratio = m_count / (tv_count or 1)
+    insight(f"Netflix มี Movies มากกว่า TV Shows <strong>{ratio:.1f}x</strong> ({m_count:,} vs {tv_count:,} รายการ)", "teal")
+with col_i3:
+    if "vote_count" in movies_f.columns and "vote_count" in tv.columns:
+        m_eng = movies_f["vote_count"].median(); tv_eng = tv["vote_count"].median()
+        eng_winner = "Movies" if m_eng > tv_eng else "TV Shows"
+        insight(f"<strong>{eng_winner}</strong> ได้รับ Community Engagement (votes) สูงกว่า — median <strong>{max(m_eng,tv_eng):.0f}</strong> votes")
+
+st.markdown("---")
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# SECTION 3 — Top Performers
+# ─────────────────────────────────────────────────────────────────────────────
+section("🏆 TOP PERFORMERS")
+
+tab1, tab2, tab3 = st.tabs(["🎬 Top Movies", "📺 Top TV Shows", "💰 Box Office"])
+
+with tab1:
+    col_a, col_b = st.columns([3, 2], gap="large")
+    with col_a:
+        if "vote_average" in movies_f.columns:
+            top_rated = (movies_f[movies_f["vote_count"] >= 500]
+                         .nlargest(12, "vote_average")
+                         [["title", "vote_average", "vote_count", "release_year"]]
+                         .reset_index(drop=True))
+            fig_top = px.bar(
+                top_rated, x="vote_average", y="title", orientation="h",
+                color="vote_average", color_continuous_scale=["#6C1F1F", NETFLIX_RED, "#FF6B6B"],
+                text="vote_average",
+                custom_data=["vote_count", "release_year"],
+            )
+            fig_top.update_traces(
+                texttemplate="%{text:.2f}",
+                textposition="outside",
+                hovertemplate="<b>%{y}</b><br>Rating: %{x:.2f}<br>Votes: %{customdata[0]:,}<br>Year: %{customdata[1]}<extra></extra>",
+            )
+            fig_top.update_layout(
+                yaxis={"categoryorder": "total ascending"},
+                coloraxis_showscale=False, showlegend=False,
+            )
+            apply_theme(fig_top, 420)
+            st.plotly_chart(fig_top, use_container_width=True)
+
+    with col_b:
+        st.markdown("#### 📌 Key Insights")
+        if "vote_average" in movies_f.columns:
+            best = movies_f[movies_f["vote_count"] >= 500].nlargest(1, "vote_average").iloc[0]
+            insight(f"🥇 Top-rated: <strong>{best['title']}</strong> ({best['vote_average']:.1f}/10)", "red")
+            avg_top10 = movies_f[movies_f["vote_count"] >= 500].nlargest(10, "vote_average")["vote_average"].mean()
+            insight(f"Top 10 Movies มีคะแนนเฉลี่ย <strong>{avg_top10:.2f}/10</strong> — สูงกว่าค่าเฉลี่ยทั้งหมด {avg_top10 - avg_rating_m:.2f} คะแนน")
+            if "release_year" in movies_f.columns:
+                top10_yr = movies_f[movies_f["vote_count"] >= 500].nlargest(10, "vote_average")["release_year"].mean()
+                insight(f"Top 10 ส่วนใหญ่ออกฉายในช่วง <strong>ปี {top10_yr:.0f}</strong> เฉลี่ย", "teal")
+
+with tab2:
+    col_a, col_b = st.columns([3, 2], gap="large")
+    with col_a:
+        if "vote_average" in tv.columns and "name" in tv.columns:
+            top_tv = (tv[tv["vote_count"] >= 200]
+                      .nlargest(12, "vote_average")
+                      [["name", "vote_average", "vote_count", "number_of_seasons"]]
+                      .reset_index(drop=True))
+            fig_tv = px.bar(
+                top_tv, x="vote_average", y="name", orientation="h",
+                color="vote_average", color_continuous_scale=["#1a1040", ACCENT_PURPLE, "#A29BFE"],
+                text="vote_average",
+                custom_data=["vote_count", "number_of_seasons"],
+            )
+            fig_tv.update_traces(
+                texttemplate="%{text:.2f}",
+                textposition="outside",
+                hovertemplate="<b>%{y}</b><br>Rating: %{x:.2f}<br>Votes: %{customdata[0]:,}<br>Seasons: %{customdata[1]}<extra></extra>",
+            )
+            fig_tv.update_layout(yaxis={"categoryorder": "total ascending"}, coloraxis_showscale=False, showlegend=False)
+            apply_theme(fig_tv, 420)
+            st.plotly_chart(fig_tv, use_container_width=True)
+
+    with col_b:
+        st.markdown("#### 📌 Key Insights")
+        if "vote_average" in tv.columns:
+            best_tv = tv[tv["vote_count"] >= 200].nlargest(1, "vote_average").iloc[0]
+            insight(f"🥇 Top-rated TV: <strong>{best_tv['name']}</strong> ({best_tv['vote_average']:.1f}/10)", "red")
+        if "number_of_seasons" in tv.columns:
+            avg_seasons = tv["number_of_seasons"].mean()
+            long_running = tv[tv["number_of_seasons"] >= 5]
+            insight(f"TV Shows มีเฉลี่ย <strong>{avg_seasons:.1f} seasons</strong> — {len(long_running)} เรื่องมี 5+ seasons")
+        if "status" in tv.columns:
+            ongoing = (tv["status"] == "Returning Series").sum()
+            insight(f"<strong>{ongoing} รายการ</strong> ยังคง Active อยู่ใน Netflix ปัจจุบัน", "teal")
+
+with tab3:
+    if all(c in movies_f.columns for c in ["budget_usd", "revenue_usd", "title"]):
+        scatter_df = movies_f[
+            (movies_f["budget_usd"] > 1_000_000) & (movies_f["revenue_usd"] > 1_000_000)
+        ].copy()
+        if not scatter_df.empty:
+            scatter_df["roi_display"] = scatter_df["roi"].apply(lambda x: f"{x:.1f}x" if pd.notna(x) else "N/A")
+
+            col_a, col_b = st.columns([3, 1], gap="large")
+            with col_a:
+                fig_sc = px.scatter(
+                    scatter_df,
+                    x="budget_usd", y="revenue_usd",
+                    color="roi",
+                    size="vote_count",
+                    hover_name="title",
+                    hover_data={"budget_usd": ":,.0f", "revenue_usd": ":,.0f", "roi_display": True, "vote_count": False},
+                    color_continuous_scale=["#6C1F1F", "#E50914", "#F39C12", "#27AE60"],
+                    log_x=True, log_y=True,
+                    labels={"budget_usd": "Budget (USD)", "revenue_usd": "Revenue (USD)", "roi": "ROI"},
+                )
+                max_val = max(scatter_df["budget_usd"].max(), scatter_df["revenue_usd"].max())
+                fig_sc.add_shape(type="line", x0=1e6, y0=1e6, x1=max_val, y1=max_val,
+                                 line=dict(color="#444", dash="dash", width=1))
+                fig_sc.add_annotation(x=np.log10(max_val*0.5), y=np.log10(max_val*0.5),
+                                      text="Break-even", showarrow=False, font=dict(color="#555", size=10))
+                apply_theme(fig_sc, 420)
+                st.plotly_chart(fig_sc, use_container_width=True)
+
+            with col_b:
+                st.markdown("#### 📌 Box Office")
+                top_rev = scatter_df.nlargest(1, "revenue_usd").iloc[0]
+                insight(f"💎 Highest Revenue: <strong>{top_rev['title']}</strong><br>${top_rev['revenue_usd']/1e9:.1f}B", "red")
+                profitable = (scatter_df["roi"] > 1).sum() if "roi" in scatter_df else 0
+                total_sc = len(scatter_df)
+                insight(f"<strong>{profitable}/{total_sc}</strong> movies ({profitable/total_sc*100:.0f}%) ทำกำไรได้เกินทุน")
+                if "roi" in scatter_df.columns:
+                    top_roi = scatter_df.nlargest(1, "roi").iloc[0]
+                    insight(f"🚀 Best ROI: <strong>{top_roi['title']}</strong> — {top_roi['roi']:.1f}x คืนทุน", "teal")
+
+st.markdown("---")
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# SECTION 4 — Genre Deep-Dive
+# ─────────────────────────────────────────────────────────────────────────────
+section("🎭 GENRE ANALYSIS")
+
+col_g1, col_g2, col_g3 = st.columns([2, 2, 1], gap="large")
+
+with col_g1:
     genre_counts = (
-        movies_f.explode("genres")
-        .groupby("genres")["title"]
-        .count()
-        .reset_index()
-        .rename(columns={"title": "count", "genres": "genre"})
-        .sort_values("count", ascending=False)
-        .head(15)
+        movies_f.explode("genres").groupby("genres")["title"]
+        .count().reset_index().rename(columns={"title": "count", "genres": "genre"})
+        .sort_values("count", ascending=False).head(15)
     )
-    fig3 = px.bar(
+    fig_gc = px.bar(
         genre_counts, x="count", y="genre", orientation="h",
-        color="count", color_continuous_scale="Reds",
-        title="จำนวน Movies แต่ละ Genre",
-        labels={"count": "จำนวน", "genre": ""},
+        color="count",
+        color_continuous_scale=["#3D0000", NETFLIX_RED],
+        text="count",
+        labels={"count": "Titles", "genre": ""},
+        title="Volume by Genre",
     )
-    fig3.update_layout(yaxis={"categoryorder": "total ascending"},
-                       coloraxis_showscale=False, height=420)
-    st.plotly_chart(fig3, use_container_width=True)
+    fig_gc.update_traces(texttemplate="%{text:,}", textposition="outside")
+    fig_gc.update_layout(yaxis={"categoryorder": "total ascending"}, coloraxis_showscale=False)
+    apply_theme(fig_gc, 420)
+    st.plotly_chart(fig_gc, use_container_width=True)
 
-with col4:
+with col_g2:
     genre_rating = (
-        movies_f.explode("genres")
-        .groupby("genres")["vote_average"]
-        .mean()
-        .reset_index()
-        .rename(columns={"genres": "genre"})
-        .sort_values("vote_average", ascending=False)
-        .head(15)
+        movies_f.explode("genres").groupby("genres")["vote_average"]
+        .agg(["mean", "count"]).reset_index()
+        .rename(columns={"genres": "genre", "mean": "avg_rating"})
+        .query("count >= 10")
+        .sort_values("avg_rating", ascending=False).head(15)
     )
-    fig4 = px.bar(
-        genre_rating, x="vote_average", y="genre", orientation="h",
-        color="vote_average", color_continuous_scale="RdYlGn",
-        title="Rating เฉลี่ยแต่ละ Genre",
-        labels={"vote_average": "Rating เฉลี่ย", "genre": ""},
+    fig_gr = px.bar(
+        genre_rating, x="avg_rating", y="genre", orientation="h",
+        color="avg_rating",
+        color_continuous_scale=["#ff4b4b", "#ffaa00", "#00cc88"],
+        text="avg_rating",
+        labels={"avg_rating": "Avg Rating", "genre": ""},
+        title="Quality by Genre (Avg Rating)",
     )
-    fig4.update_layout(yaxis={"categoryorder": "total ascending"},
-                       coloraxis_showscale=False, height=420)
-    st.plotly_chart(fig4, use_container_width=True)
-
-# ─────────────────────────────────────────────
-# ROW 4 — Content Over Time
-# ─────────────────────────────────────────────
-st.subheader("📅 Content ที่เพิ่มขึ้นตามปี")
-if "release_year" in movies_f.columns and "first_air_year" in tv.columns:
-    col5, col6 = st.columns(2)
-
-    with col5:
-        by_year = movies_f.groupby("release_year").size().reset_index(name="count")
-        fig5 = px.area(by_year, x="release_year", y="count",
-                       color_discrete_sequence=["#E50914"],
-                       title="จำนวน Movies ต่อปี",
-                       labels={"release_year": "ปี", "count": "จำนวน"})
-        st.plotly_chart(fig5, use_container_width=True)
-
-    with col6:
-        tv_year = tv.groupby("first_air_year").size().reset_index(name="count")
-        tv_year = tv_year[tv_year["first_air_year"] >= 1990]
-        fig6 = px.area(tv_year, x="first_air_year", y="count",
-                       color_discrete_sequence=["#564d9f"],
-                       title="จำนวน TV Shows ต่อปี",
-                       labels={"first_air_year": "ปี", "count": "จำนวน"})
-        st.plotly_chart(fig6, use_container_width=True)
-
-# ─────────────────────────────────────────────
-# ROW 5 — Budget vs Revenue Scatter (Movies)
-# ─────────────────────────────────────────────
-if all(c in movies_f.columns for c in ["budget_usd", "revenue_usd", "title"]):
-    st.subheader("💰 Budget vs Revenue")
-    scatter_df = movies_f[
-        (movies_f["budget_usd"] > 1_000_000) &
-        (movies_f["revenue_usd"] > 1_000_000)
-    ].copy()
-
-    if not scatter_df.empty:
-        scatter_df["roi_label"] = scatter_df["roi"].apply(
-            lambda x: f"{x:.1f}x" if pd.notna(x) else "N/A"
+    fig_gr.update_traces(texttemplate="%{text:.2f}", textposition="outside")
+    fig_gr.update_layout(yaxis={"categoryorder": "total ascending"}, coloraxis_showscale=False)
+    apply_theme(fig_gr, 420)
+    st.plotly_chart(fig_gr, use_container_width=True)
+
+with col_g3:
+    st.markdown("#### 📌 Genre Insights")
+    if not genre_counts.empty:
+        top_genre  = genre_counts.iloc[0]
+        insight(f"<strong>{top_genre['genre']}</strong> คือ Genre ที่มีเนื้อหามากสุด: <strong>{top_genre['count']:,} เรื่อง</strong>", "red")
+    if not genre_rating.empty:
+        best_genre = genre_rating.iloc[0]
+        insight(f"<strong>{best_genre['genre']}</strong> มีคะแนนเฉลี่ยสูงสุด: <strong>{best_genre['avg_rating']:.2f}</strong>")
+        # Underrated = high rating but low volume
+        merged_g = genre_counts.merge(genre_rating[["genre", "avg_rating"]], on="genre")
+        if not merged_g.empty:
+            merged_g["score"] = merged_g["avg_rating"] - merged_g["count"] / merged_g["count"].max() * 2
+            underrated = merged_g.nlargest(1, "score").iloc[0]
+            insight(f"💎 Hidden Gem: <strong>{underrated['genre']}</strong> — Rating ดีแต่ยังไม่ค่อยมีเนื้อหา", "teal")
+
+st.markdown("---")
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# SECTION 5 — Language & Geography
+# ─────────────────────────────────────────────────────────────────────────────
+section("🌍 LANGUAGE & ORIGIN")
+
+col_l1, col_l2 = st.columns(2, gap="large")
+
+with col_l1:
+    if "original_language" in movies_f.columns:
+        lang_counts = (movies_f["original_language"].value_counts().head(15).reset_index())
+        lang_counts.columns = ["language", "count"]
+        lang_map = {"en":"English","ja":"Japanese","ko":"Korean","fr":"French","es":"Spanish",
+                    "de":"German","it":"Italian","pt":"Portuguese","zh":"Chinese","hi":"Hindi",
+                    "ru":"Russian","th":"Thai","ar":"Arabic","nl":"Dutch","sv":"Swedish"}
+        lang_counts["language_name"] = lang_counts["language"].map(lang_map).fillna(lang_counts["language"])
+
+        fig_lang = px.bar(
+            lang_counts, x="count", y="language_name", orientation="h",
+            color="count",
+            color_continuous_scale=["#001a33", ACCENT_TEAL],
+            text="count",
+            title="Movies by Original Language",
+            labels={"count": "Movies", "language_name": ""},
         )
-        fig7 = px.scatter(
-            scatter_df,
-            x="budget_usd", y="revenue_usd",
-            color="roi", size="vote_count",
-            hover_name="title",
-            hover_data={"budget_usd": ":,.0f", "revenue_usd": ":,.0f", "roi_label": True},
-            color_continuous_scale="RdYlGn",
-            log_x=True, log_y=True,
-            title="Budget vs Revenue (log scale) — ขนาดฟอง = จำนวน votes",
-            labels={"budget_usd": "Budget (USD)", "revenue_usd": "Revenue (USD)", "roi": "ROI"},
+        fig_lang.update_traces(texttemplate="%{text:,}", textposition="outside")
+        fig_lang.update_layout(yaxis={"categoryorder": "total ascending"}, coloraxis_showscale=False)
+        apply_theme(fig_lang, 380)
+        st.plotly_chart(fig_lang, use_container_width=True)
+
+with col_l2:
+    if "original_language" in tv.columns:
+        tv_lang = (tv["original_language"].value_counts().head(10).reset_index())
+        tv_lang.columns = ["language", "count"]
+        tv_lang["language_name"] = tv_lang["language"].map(lang_map).fillna(tv_lang["language"])
+
+        fig_tv_lang = px.pie(
+            tv_lang, names="language_name", values="count",
+            hole=0.5,
+            color_discrete_sequence=[ACCENT_PURPLE, NETFLIX_RED, ACCENT_TEAL, "#F39C12","#27AE60","#E17055","#74B9FF","#A29BFE","#FD79A8","#55EFC4"],
+            title="TV Shows by Language",
         )
-        max_val = max(scatter_df["budget_usd"].max(), scatter_df["revenue_usd"].max())
-        fig7.add_shape(type="line", x0=1e6, y0=1e6, x1=max_val, y1=max_val,
-                       line={"color": "gray", "dash": "dash", "width": 1})
-        fig7.add_annotation(x=9, y=9, xref="x", yref="y",
-                            text="Break-even", showarrow=False,
-                            font={"color": "gray", "size": 11})
-        st.plotly_chart(fig7, use_container_width=True)
-
-# ─────────────────────────────────────────────
-# ROW 6 — Credits Analysis
-# ─────────────────────────────────────────────
-st.subheader("🎭 Credits Analysis")
-col7, col8 = st.columns(2)
-
-with col7:
-    top_cast = (credits[credits["role"] == "cast"]
-                .groupby("name").size()
-                .reset_index(name="appearances")
-                .nlargest(15, "appearances"))
-    fig8 = px.bar(top_cast, x="appearances", y="name", orientation="h",
-                  color="appearances", color_continuous_scale="Blues",
-                  title="นักแสดงที่ปรากฏใน Netflix มากที่สุด",
-                  labels={"appearances": "จำนวนเรื่อง", "name": ""})
-    fig8.update_layout(yaxis={"categoryorder": "total ascending"},
-                       coloraxis_showscale=False, height=400)
-    st.plotly_chart(fig8, use_container_width=True)
-
-with col8:
-    gender_counts = (credits[credits["role"] == "cast"]
-                     .groupby("gender").size()
-                     .reset_index(name="count"))
-    fig9 = px.pie(gender_counts, names="gender", values="count",
-                  color_discrete_sequence=["#E50914", "#564d9f", "#aaaaaa"],
-                  title="สัดส่วน Gender ของนักแสดง",
-                  hole=0.4)
-    fig9.update_traces(textinfo="percent+label")
-    st.plotly_chart(fig9, use_container_width=True)
-
-# ─────────────────────────────────────────────
-# ROW 7 — TV Show Status + Content Rating
-# ─────────────────────────────────────────────
-st.subheader("📺 TV Show Overview")
-col9, col10 = st.columns(2)
-
-with col9:
+        fig_tv_lang.update_traces(
+            textinfo="percent+label",
+            textfont_size=11,
+            hovertemplate="<b>%{label}</b><br>%{value:,} shows (%{percent})<extra></extra>",
+        )
+        apply_theme(fig_tv_lang, 380)
+        st.plotly_chart(fig_tv_lang, use_container_width=True)
+
+# Language insights
+col_li1, col_li2 = st.columns(2)
+with col_li1:
+    if "original_language" in movies_f.columns:
+        non_en = (movies_f["original_language"] != "en").sum()
+        pct = non_en / len(movies_f) * 100
+        insight(f"<strong>{pct:.0f}%</strong> ของ Movies บน Netflix มาจากภาษาอื่น (ไม่ใช่ English) — แสดงให้เห็นความหลากหลายสากล", "teal")
+with col_li2:
+    if "original_language" in movies_f.columns:
+        ko_count = (movies_f["original_language"] == "ko").sum()
+        ja_count = (movies_f["original_language"] == "ja").sum()
+        insight(f"Asian Content เติบโตแรง: <strong>Korean {ko_count} เรื่อง</strong>, <strong>Japanese {ja_count} เรื่อง</strong> — K-Drama effect ชัดเจน", "red")
+
+st.markdown("---")
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# SECTION 6 — TV Show Deep-Dive
+# ─────────────────────────────────────────────────────────────────────────────
+section("📺 TV SHOW DEEP-DIVE")
+
+col_t1, col_t2, col_t3 = st.columns([2, 2, 1], gap="large")
+
+with col_t1:
     if "status" in tv.columns:
         status_counts = tv["status"].value_counts().reset_index()
         status_counts.columns = ["status", "count"]
-        fig10 = px.pie(status_counts, names="status", values="count",
-                       title="สถานะ TV Shows",
-                       color_discrete_sequence=px.colors.qualitative.Set2,
-                       hole=0.35)
-        st.plotly_chart(fig10, use_container_width=True)
+        status_colors = {
+            "Returning Series": "#27AE60",
+            "Ended": NETFLIX_RED,
+            "Canceled": "#E17055",
+            "In Production": ACCENT_TEAL,
+            "Planned": ACCENT_PURPLE,
+        }
+        fig_status = px.pie(
+            status_counts, names="status", values="count",
+            hole=0.55, title="TV Show Status",
+            color="status",
+            color_discrete_map=status_colors,
+        )
+        fig_status.update_traces(textinfo="percent+label", textfont_size=11)
+        apply_theme(fig_status, 360)
+        st.plotly_chart(fig_status, use_container_width=True)
+
+with col_t2:
+    if "number_of_seasons" in tv.columns:
+        season_dist = (tv["number_of_seasons"].dropna()
+                       .astype(int).value_counts().sort_index()
+                       .reset_index())
+        season_dist.columns = ["seasons", "count"]
+        season_dist = season_dist[season_dist["seasons"] <= 20]
+
+        fig_seasons = px.bar(
+            season_dist, x="seasons", y="count",
+            color="count", color_continuous_scale=["#1a0040", ACCENT_PURPLE],
+            text="count",
+            title="Distribution of Seasons",
+            labels={"seasons": "Number of Seasons", "count": "Shows"},
+        )
+        fig_seasons.update_traces(texttemplate="%{text}", textposition="outside")
+        fig_seasons.update_layout(coloraxis_showscale=False, bargap=0.3)
+        apply_theme(fig_seasons, 360)
+        st.plotly_chart(fig_seasons, use_container_width=True)
 
-with col10:
+with col_t3:
+    st.markdown("#### 📌 TV Insights")
+    if "status" in tv.columns:
+        returning = (tv["status"] == "Returning Series").sum()
+        ended = (tv["status"] == "Ended").sum()
+        insight(f"<strong>{returning}</strong> รายการยังออกอากาศอยู่ vs <strong>{ended}</strong> รายการจบแล้ว", "red")
+    if "number_of_seasons" in tv.columns:
+        one_season = (tv["number_of_seasons"] == 1).sum()
+        pct_one = one_season / len(tv) * 100
+        insight(f"<strong>{pct_one:.0f}%</strong> ของ TV Shows มีแค่ 1 season — หลายเรื่องอาจถูก cancel เร็ว")
     if "us_content_rating" in tv.columns:
-        rating_counts = (tv["us_content_rating"].dropna()
-                         .value_counts().reset_index())
-        rating_counts.columns = ["rating", "count"]
-        fig11 = px.bar(rating_counts, x="rating", y="count",
-                       color="rating",
-                       title="US Content Rating ของ TV Shows",
-                       labels={"rating": "Rating", "count": "จำนวน"})
-        fig11.update_layout(showlegend=False)
-        st.plotly_chart(fig11, use_container_width=True)
-
-# ─────────────────────────────────────────────
-# ROW 8 — Top Keywords
-# ─────────────────────────────────────────────
-st.subheader("🔑 Keywords ที่พบบ่อยที่สุด")
+        most_rating = tv["us_content_rating"].mode().iloc[0] if not tv["us_content_rating"].dropna().empty else "N/A"
+        insight(f"Content Rating ที่พบมากสุดคือ <strong>{most_rating}</strong>", "teal")
+
+st.markdown("---")
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# SECTION 7 — Credits & Talent
+# ─────────────────────────────────────────────────────────────────────────────
+section("🌟 TALENT & CREDITS")
+
+col_c1, col_c2, col_c3 = st.columns([2, 1, 2], gap="large")
+
+with col_c1:
+    top_cast = (credits[credits["role"] == "cast"]
+                .groupby("name").size().reset_index(name="appearances")
+                .nlargest(15, "appearances"))
+    fig_cast = px.bar(
+        top_cast, x="appearances", y="name", orientation="h",
+        color="appearances", color_continuous_scale=["#001433", ACCENT_TEAL],
+        text="appearances",
+        title="Most Appearing Cast",
+        labels={"appearances": "Appearances", "name": ""},
+    )
+    fig_cast.update_traces(texttemplate="%{text}", textposition="outside")
+    fig_cast.update_layout(yaxis={"categoryorder": "total ascending"}, coloraxis_showscale=False)
+    apply_theme(fig_cast, 420)
+    st.plotly_chart(fig_cast, use_container_width=True)
+
+with col_c2:
+    if "gender" in credits.columns:
+        cast_only = credits[credits["role"] == "cast"]
+        gender_dist = cast_only["gender"].value_counts().reset_index()
+        gender_dist.columns = ["gender", "count"]
+        fig_gender = px.pie(
+            gender_dist, names="gender", values="count",
+            hole=0.55, title="Gender Distribution",
+            color="gender",
+            color_discrete_map={"Female": ACCENT_TEAL, "Male": ACCENT_PURPLE, "Unknown": "#444"},
+        )
+        fig_gender.update_traces(textinfo="percent+label", textfont_size=11)
+        apply_theme(fig_gender, 280)
+        st.plotly_chart(fig_gender, use_container_width=True)
+
+        # Insight
+        female_pct = gender_dist[gender_dist["gender"] == "Female"]["count"].sum() / len(cast_only) * 100
+        insight(f"นักแสดงหญิง <strong>{female_pct:.0f}%</strong> ของทั้งหมด — {'ยังมีช่องว่าง gender gap' if female_pct < 40 else 'สัดส่วนดีขึ้น'}", "red")
+
+with col_c3:
+    top_directors = (credits[credits["character"].isin(["Director","Producer","Creator"])]
+                     .groupby("name").size().reset_index(name="count")
+                     .nlargest(12, "count"))
+    fig_dir = px.bar(
+        top_directors, x="count", y="name", orientation="h",
+        color="count", color_continuous_scale=["#1a0a20", ACCENT_PURPLE],
+        text="count",
+        title="Top Directors / Producers",
+        labels={"count": "Projects", "name": ""},
+    )
+    fig_dir.update_traces(texttemplate="%{text}", textposition="outside")
+    fig_dir.update_layout(yaxis={"categoryorder": "total ascending"}, coloraxis_showscale=False)
+    apply_theme(fig_dir, 420)
+    st.plotly_chart(fig_dir, use_container_width=True)
+
+st.markdown("---")
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# SECTION 8 — Keywords & Themes
+# ───────────────────────────────────���─────────────────────────────────────────
+section("🔑 TRENDING THEMES")
+
 if not keywords.empty:
-    top_kw = (keywords.groupby("keyword").size()
-              .reset_index(name="count")
-              .nlargest(20, "count"))
-    fig12 = px.treemap(top_kw, path=["keyword"], values="count",
-                       color="count", color_continuous_scale="Reds",
-                       title="Top 20 Keywords ใน Netflix Content")
-    fig12.update_layout(height=400)
-    st.plotly_chart(fig12, use_container_width=True)
-
-# ─────────────────────────────────────────────
-# ROW 9 — Raw Data Explorer
-# ─────────────────────────────────────────────
-with st.expander("🗃️ ดูข้อมูลดิบ"):
-    tab1, tab2, tab3, tab4 = st.tabs(["Movies", "TV Shows", "Credits", "Keywords"])
-    with tab1:
-        st.dataframe(movies_f.head(100), use_container_width=True)
-    with tab2:
-        st.dataframe(tv.head(100), use_container_width=True)
-    with tab3:
-        st.dataframe(credits.head(100), use_container_width=True)
-    with tab4:
-        st.dataframe(keywords.head(100), use_container_width=True)
+    col_k1, col_k2 = st.columns([3, 1], gap="large")
+
+    with col_k1:
+        top_kw = (keywords.groupby("keyword").size().reset_index(name="count").nlargest(25, "count"))
+        fig_kw = px.treemap(
+            top_kw, path=["keyword"], values="count",
+            color="count", color_continuous_scale=["#200000", "#6C1F1F", NETFLIX_RED],
+            title="Top 25 Content Themes (Keywords)",
+        )
+        fig_kw.update_traces(
+            textfont=dict(size=13, family="DM Sans"),
+            hovertemplate="<b>%{label}</b><br>%{value:,} titles<extra></extra>",
+        )
+        apply_theme(fig_kw, 380)
+        st.plotly_chart(fig_kw, use_container_width=True)
+
+    with col_k2:
+        st.markdown("#### 📌 Theme Insights")
+        top1 = top_kw.iloc[0]
+        insight(f"<strong>'{top1['keyword']}'</strong> คือ Theme ที่ปรากฏมากสุด: <strong>{top1['count']:,} เรื่อง</strong>", "red")
+
+        # Keywords unique per media type
+        kw_movie = keywords[keywords["media_type"] == "movie"]["keyword"].nunique()
+        kw_tv    = keywords[keywords["media_type"] == "tv"]["keyword"].nunique()
+        insight(f"Movies มี <strong>{kw_movie:,}</strong> unique themes vs TV Shows <strong>{kw_tv:,}</strong>")
+
+        # Check for "based on" type keywords
+        based_on = keywords[keywords["keyword"].str.contains("based on|novel|book|comic", case=False, na=False)]
+        insight(f"<strong>{len(based_on):,}</strong> เรื่องมี keyword เกี่ยวกับ adaptation (จากหนังสือ/comic)", "teal")
+
+st.markdown("---")
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# SECTION 9 — Summary Insights Panel
+# ─────────────────────────────────────────────────────────────────────────────
+section("💡 EXECUTIVE SUMMARY")
+
+ins_cols = st.columns(3)
+summary_insights = [
+    ("red",    "📊 Content Scale",
+     f"Netflix มีเนื้อหารวม <strong>{len(movies_f)+len(tv):,} รายการ</strong> — แบ่งเป็น Movies {len(movies_f):,} เรื่อง และ TV Shows {len(tv):,} รายการ"),
+    ("teal",   "⭐ Quality Benchmark",
+     f"คะแนนเฉลี่ยทั้ง catalog อยู่ที่ <strong>{avg_rating_m:.1f}/10</strong> (Movies) และ <strong>{avg_rating_tv:.1f}/10</strong> (TV) — Netflix เน้นคุณภาพมากกว่าปริมาณ"),
+    ("",       "🌏 Global Reach",
+     f"Content ไม่ใช่ภาษาอังกฤษคิดเป็น <strong>{(movies_f['original_language'] != 'en').sum()/len(movies_f)*100:.0f}%</strong> — K-Content และ European productions เติบโตต่อเนื่อง" if "original_language" in movies_f.columns else "Netflix มีเนื้อหาจากหลายภาษาทั่วโลก"),
+    ("red",    "💰 Financial Power",
+     f"รายได้รวมของ Movies ในฐานข้อมูลสูงถึง <strong>${total_rev/1e9:.0f}B</strong> — ทุน ${total_budget/1e9:.0f}B → ROI เฉลี่ย {total_rev/max(total_budget,1):.1f}x" if total_rev > 0 else "ข้อมูล Box Office ครอบคลุมกว้างขวาง"),
+    ("teal",   "📺 Binge Culture",
+     f"TV Shows เฉลี่ย <strong>{tv['number_of_seasons'].mean():.1f} seasons</strong> — ซีรีส์ยาวหลายฤดูกาลเป็นสูตรสำเร็จของ Netflix" if "number_of_seasons" in tv.columns else "TV Shows มีความยาวหลากหลาย"),
+    ("",       "🎭 Genre Diversity",
+     f"มีมากกว่า <strong>{len(all_genres)} genres</strong> — Drama และ Comedy ครองตลาดหลัก แต่ Documentary และ Animation เติบโตเร็ว"),
+]
+
+for idx, (style, title, text) in enumerate(summary_insights):
+    with ins_cols[idx % 3]:
+        st.markdown(f"**{title}**")
+        insight(text, style)
+
+st.markdown("---")
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# SECTION 10 — Raw Data Explorer
+# ─────────────────────────────────────────────────────────────────────────────
+with st.expander("🗃️ Raw Data Explorer", expanded=False):
+    tab_m, tab_tv, tab_cr, tab_kw = st.tabs(["🎬 Movies", "📺 TV Shows", "🎭 Credits", "🔑 Keywords"])
+    with tab_m:
+        st.caption(f"{len(movies_f):,} records (filtered)")
+        st.dataframe(movies_f.head(200), use_container_width=True, height=350)
+    with tab_tv:
+        st.caption(f"{len(tv):,} records")
+        st.dataframe(tv.head(200), use_container_width=True, height=350)
+    with tab_cr:
+        st.caption(f"{len(credits):,} records")
+        st.dataframe(credits.head(200), use_container_width=True, height=350)
+    with tab_kw:
+        st.caption(f"{len(keywords):,} records")
+        st.dataframe(keywords.head(200), use_container_width=True, height=350)
+
+# Footer
+st.markdown(f"""
+<div style="text-align:center; padding: 30px 0 10px 0; color: #444; font-size: 11px; letter-spacing: 1px;">
+    NETFLIX ANALYTICS DASHBOARD · DATA: TMDB API · PIPELINE: APACHE AIRFLOW → PYSPARK → HUGGING FACE
+</div>
+""", unsafe_allow_html=True)