/* eslint-disable @next/next/no-img-element */
"use client";

import { useState } from "react";
import { useTranslation } from "@/hooks/useTranslation";
import type {
  ScheduleRow,
  ShowCard,
  VideoCard,
  NewsRow,
  AnchorCard,
  AnchorListItem,
  Platform,
} from "../types/channel.types";

type Tab = "live" | "schedule" | "shows" | "video" | "news" | "anchors" | "about";

const TODAY_SCHEDULE: ScheduleRow[] = [
  { time: "9:00", period: "PM IST", show: "Prime Time", host: "with Ravish Kumar", status: "live", badge: "LIVE" },
  { time: "10:00", period: "PM IST", show: "The Newsroom", host: "with Rajdeep Sardesai", status: "upcoming", badge: "In 41 min" },
  { time: "11:00", period: "PM IST", show: "Late Night Headlines", host: "with Sreenivasan Jain", status: "upcoming", badge: "Upcoming" },
  { time: "7:00", period: "PM IST", show: "India @ 7", host: "with Anjana Om Kashyap", status: "replay", badge: "Replay" },
  { time: "8:00", period: "PM IST", show: "Hot Mic", host: "with Nidhi Razdan", status: "replay", badge: "Replay" },
  { time: "6:00", period: "PM IST", show: "Markets Wrap", host: "with Tamanna Inamdar", status: "replay", badge: "Replay" },
];

const FULL_SCHEDULE: ScheduleRow[] = [
  { time: "9:00", period: "PM IST", show: "Prime Time", host: "Mon–Fri · Ravish Kumar", status: "live", badge: "LIVE" },
  { time: "10:00", period: "PM IST", show: "The Newsroom", host: "Daily · Rajdeep Sardesai", status: "upcoming", badge: "In 41 min" },
  { time: "11:00", period: "PM IST", show: "Late Night Headlines", host: "Daily · Sreenivasan Jain", status: "upcoming", badge: "Upcoming" },
  { time: "6:00", period: "AM IST", show: "India Morning", host: "Daily · Vikram Chandra", status: "replay", badge: "Tomorrow" },
  { time: "12:00", period: "NOON", show: "Lunch Break News", host: "Mon–Fri · Tamanna Inamdar", status: "replay", badge: "Tomorrow" },
  { time: "3:00", period: "PM IST", show: "Markets Mid-day", host: "Trading days · Sonia Shenoy", status: "replay", badge: "Tomorrow" },
  { time: "5:00", period: "PM IST", show: "The Big Fight", host: "Fridays · Nidhi Razdan", status: "replay", badge: "Fri" },
  { time: "8:00", period: "PM IST", show: "Truth vs Hype", host: "Monthly · Sreenivasan Jain", status: "replay", badge: "31 May" },
];

const POPULAR_SHOWS: ShowCard[] = [
  { image: "https://images.unsplash.com/photo-1495020689067-958852a7765e?w=600&q=80", when: "LIVE · 9 PM", isLive: true, cat: "Politics", title: "Prime Time", host: "with Ravish Kumar · weekdays", episodes: "S08 · 142 episodes", time: "9 PM IST" },
  { image: "https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=600&q=80", when: "Tonight · 10 PM", isLive: false, cat: "News", title: "The Newsroom", host: "with Rajdeep Sardesai · daily", episodes: "S03 · 22 episodes", time: "10 PM IST" },
  { image: "https://images.unsplash.com/photo-1585829365295-ab7cd400c167?w=600&q=80", when: "Mon–Fri · 7 PM", isLive: false, cat: "News", title: "India @ 7", host: "with Anjana Om Kashyap", episodes: "S05 · 89 episodes", time: "7 PM IST" },
  { image: "https://images.unsplash.com/photo-1611162616305-c69b3fa7fbe0?w=600&q=80", when: "Weekly · Sat", isLive: false, cat: "Markets", title: "Markets Wrap", host: "with Tamanna Inamdar", episodes: "S02 · 38 episodes", time: "6 PM IST" },
  { image: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=600&q=80", when: "Weekend special", isLive: false, cat: "Long form", title: "Hot Mic", host: "with Nidhi Razdan", episodes: "S04 · 58 episodes", time: "Sat 8 PM" },
  { image: "https://images.unsplash.com/photo-1517976487492-5750f3195933?w=600&q=80", when: "Monthly", isLive: false, cat: "Long form", title: "Truth vs Hype", host: "with Sreenivasan Jain", episodes: "S06 · 28 episodes", time: "Monthly" },
];

const ALL_SHOWS: ShowCard[] = [
  ...POPULAR_SHOWS,
  { image: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&q=80", when: "Daily · 6 AM", isLive: false, cat: "News", title: "India Morning", host: "with Vikram Chandra", episodes: "S12 · 412 episodes", time: "6 AM IST" },
  { image: "https://images.unsplash.com/photo-1554475901-4538ddfbccc2?w=600&q=80", when: "Fridays · 5 PM", isLive: false, cat: "Debate", title: "The Big Fight", host: "with Nidhi Razdan", episodes: "S07 · 86 episodes", time: "Fri 5 PM" },
  { image: "https://images.unsplash.com/photo-1577563908411-5077b6dc7624?w=600&q=80", when: "Sundays", isLive: false, cat: "Politics", title: "From the Capital", host: "with Anjali Verma", episodes: "S02 · 14 episodes", time: "Sun 11 AM" },
];

const VIDEOS: VideoCard[] = [
  { image: "https://images.unsplash.com/photo-1529107386315-e1a2ed48a620?w=600&q=80", isLive: true, duration: "3:24:18", cat: "Politics · Live", title: "Parliament live: Data Privacy Bill final vote", views: "24K watching", age: "now" },
  { image: "https://images.unsplash.com/photo-1517976487492-5750f3195933?w=600&q=80", isLive: false, duration: "6:18", cat: "Science", title: "Inside ISRO's new Sriharikota tower — tour", views: "89K views", age: "12 min" },
  { image: "https://images.unsplash.com/photo-1438449805896-28a666819a20?w=600&q=80", isLive: false, duration: "3:02", cat: "Climate", title: "Cyclone Remal — ground report from Bengal", views: "210K views", age: "1 hr" },
  { image: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&q=80", isLive: false, duration: "5:47", cat: "Tech", title: "India's semicon mission, decoded", views: "56K views", age: "2 hr" },
  { image: "https://images.unsplash.com/photo-1531415074968-036ba1b575da?w=600&q=80", isLive: false, duration: "2:14", cat: "Sport", title: "Suryakumar's 67(34) — every shot", views: "124K views", age: "3 hr" },
  { image: "https://images.unsplash.com/photo-1554475901-4538ddfbccc2?w=600&q=80", isLive: false, duration: "8:42", cat: "Long form", title: "The Maharashtra reshuffle, explained", views: "248K views", age: "4 hr" },
];

const NEWS: NewsRow[] = [
  { image: "https://images.unsplash.com/photo-1529107386315-e1a2ed48a620?w=600&q=80", cat: "Politics · Exclusive", title: "Inside the 96 minutes that reshuffled Maharashtra's cabinet", desc: "Three portfolios moved, two leaders shifted out, one quiet promotion. Our reporters reconstruct the late-night meeting that decided who really runs the state.", author: "Anjali Verma", readTime: "12 min read", reads: "412K reads", href: "#" },
  { image: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=600&q=80", cat: "Business · Markets", title: "Rupee at six-month high — RBI seen letting it run past 82", desc: "Foreign inflows are accelerating for the fourth straight session. We talked to three FX desks about where the rupee is headed by August.", author: "Rohan Kapoor", readTime: "4 min read", reads: "318K reads", href: "#" },
  { image: "https://images.unsplash.com/photo-1438449805896-28a666819a20?w=600&q=80", cat: "Climate · Ground report", title: "Cyclone Remal: ground report from the Bengal coast as floodwaters recede", desc: "From Sandeshkhali to Hingalganj, the cleanup is underway. The official toll has risen to 22 — here is what we saw.", author: "Mira Sen", readTime: "6 min read", reads: "210K reads", href: "#" },
  { image: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&q=80", cat: "Tech · Semicon", title: "How India's semiconductor mission is reshaping Gujarat's industrial belt", desc: "The Dholera fab cluster is six months in, twelve to go. We visited the lithography floor and the workforce-training pipeline behind it.", author: "Karthik Iyer", readTime: "9 min read", reads: "56K reads", href: "#" },
  { image: "https://images.unsplash.com/photo-1531415074968-036ba1b575da?w=600&q=80", cat: "Sport · T20I", title: "Suryakumar's 67 off 34 clinches the series 3–1 in Ahmedabad", desc: "A 34-ball innings that answered the captaincy question and possibly the Test selection one too. The numbers, the shots, the moments.", author: "Sanjay Iyer", readTime: "5 min read", reads: "226K reads", href: "#" },
];

const ANCHORS: AnchorCard[] = [
  { image: "https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=600&q=80", isOnAir: true, role: "Prime Time", name: "Ravish Kumar", showLine: "Mon–Fri · 9 PM", bio: "Senior editor and anchor. Six Ramnath Goenka awards. Anchors the channel's most-watched primetime hour." },
  { image: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=600&q=80", isOnAir: false, role: "The Newsroom", name: "Rajdeep Sardesai", showLine: "Daily · 10 PM", bio: "Veteran political correspondent. 30+ years on the desk. Hosts the channel's nightly newsmaker show." },
  { image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&q=80", isOnAir: false, role: "India @ 7", name: "Anjana Om Kashyap", showLine: "Mon–Fri · 7 PM", bio: "Primetime anchor and political reporter. Hosts the channel's weekday early-evening newshour." },
  { image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=600&q=80", isOnAir: false, role: "Truth vs Hype", name: "Sreenivasan Jain", showLine: "Monthly · long form", bio: "Investigations editor. Hosts our long-form documentary series. Two Asia Foundation reporting fellowships." },
  { image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&q=80", isOnAir: false, role: "Hot Mic", name: "Nidhi Razdan", showLine: "Saturdays · 8 PM", bio: "Hosts the channel's weekly conversation show. Foreign policy and politics beat for two decades." },
  { image: "https://images.unsplash.com/photo-1601412436009-d964bd02edbc?w=600&q=80", isOnAir: false, role: "Markets Wrap", name: "Tamanna Inamdar", showLine: "Trading days · 6 PM", bio: "Markets and business anchor. Closes the trading day with the channel's flagship markets show." },
  { image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=600&q=80", isOnAir: false, role: "India Morning", name: "Vikram Chandra", showLine: "Daily · 6 AM", bio: "Opens the channel's day with the morning newshour. Tech and policy specialist on the side." },
  { image: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=600&q=80", isOnAir: false, role: "Markets Mid-day", name: "Sonia Shenoy", showLine: "Trading days · 3 PM", bio: "Markets correspondent and afternoon anchor. Earnings season specialist for ten years." },
];

const SIDEBAR_ANCHORS: AnchorListItem[] = [
  { initials: "RK", name: "Ravish Kumar", showLine: "Prime Time · 9 PM", badge: "ON AIR" },
  { initials: "RS", name: "Rajdeep Sardesai", showLine: "The Newsroom · 10 PM", badge: "UP NEXT", avatarBg: "linear-gradient(135deg,#1E3A8A,#152b69)", badgeBg: "var(--cream)", badgeColor: "var(--text-2)" },
  { initials: "AK", name: "Anjana Om Kashyap", showLine: "India @ 7 · weekdays", avatarBg: "linear-gradient(135deg,#7C2D12,#5a1f08)" },
  { initials: "SJ", name: "Sreenivasan Jain", showLine: "Truth vs Hype · monthly", avatarBg: "linear-gradient(135deg,#0F766E,#0a4f47)" },
  { initials: "NR", name: "Nidhi Razdan", showLine: "Hot Mic · weekly", avatarBg: "linear-gradient(135deg,#B08D2E,#7d6320)" },
];

const PLATFORMS: Platform[] = [
  { initials: "D", name: "DTNews app", channel: "Free", color: "#E51E26" },
  { initials: "JT", name: "Tata Play", channel: "Ch 506", color: "#0066B3" },
  { initials: "JF", name: "JioTV", channel: "Ch 124", color: "#5F259F" },
  { initials: "YT", name: "YouTube Live", channel: "Free", color: "#FF0000" },
  { initials: "SP", name: "Spotify", channel: "Audio", color: "#1DB954" },
];

const ABOUT_INFO = [
  { key: "about_field_since", value: "1988" },
  { key: "about_field_owned", value: "NDTV Ltd" },
  { key: "about_field_hq", value: "New Delhi" },
  { key: "about_field_reach", value: "82M homes" },
  { key: "about_field_daily", value: "14.2M" },
  { key: "about_field_languages", value: "English" },
] as const;

const AWARDS = [
  { year: "2025", name: "Ramnath Goenka Award · Best English Channel" },
  { year: "2024", name: "News Television Award · Best Primetime" },
  { year: "2024", name: "Asian Television Award · Best News Show" },
  { year: "2023", name: "Asia Pacific Award · Long-form Documentary" },
  { year: "2022", name: "News Broadcasters Award · English News" },
  { year: "2022", name: "Indian Telly Award · News Anchor of the Year" },
];

const EDITORIAL_POINTS = [
  "Independent newsroom — no political ownership stake since 2017",
  "24-hour corrections SLA on every confirmed factual error",
  "Reporters disclosed for every primetime segment",
  "Source-protection policy reviewed and re-signed annually",
  "14 city bureaus across India and 4 international correspondents",
];

interface ChannelBodyProps {
  locale: string;
}

export function ChannelBody({ locale: _locale }: ChannelBodyProps) {
  const { t } = useTranslation("channel");
  const [activeTab, setActiveTab] = useState<Tab>("live");

  const tabs: { id: Tab; label: string; ct?: string; icon: React.ReactNode }[] = [
    {
      id: "live",
      label: t("tab_live"),
      ct: t("tab_live_ct"),
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <rect x="2" y="5" width="20" height="14" rx="2" />
          <polygon points="10 9 16 12 10 15" fill="currentColor" stroke="none" />
        </svg>
      ),
    },
    {
      id: "schedule",
      label: t("tab_schedule"),
      ct: t("tab_schedule_ct"),
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <rect x="3" y="6" width="18" height="14" rx="2" />
          <path d="M16 2v4M8 2v4M3 10h18" />
        </svg>
      ),
    },
    {
      id: "shows",
      label: t("tab_shows"),
      ct: "142",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <circle cx="12" cy="12" r="9" />
          <polygon points="10 8 16 12 10 16" fill="currentColor" stroke="none" />
        </svg>
      ),
    },
    {
      id: "video",
      label: t("tab_video"),
      ct: "2.8K",
      icon: (
        <svg viewBox="0 0 24 24">
          <polygon points="6 4 20 12 6 20" fill="currentColor" stroke="none" />
        </svg>
      ),
    },
    {
      id: "news",
      label: t("tab_news"),
      ct: "412",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M4 4h12l4 4v12H4z" />
          <path d="M16 4v4h4M8 12h8M8 16h6" />
        </svg>
      ),
    },
    {
      id: "anchors",
      label: t("tab_anchors"),
      ct: "38",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <circle cx="12" cy="8" r="4" />
          <path d="M4 21a8 8 0 0 1 16 0" />
        </svg>
      ),
    },
    {
      id: "about",
      label: t("tab_about"),
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <circle cx="12" cy="12" r="9" />
          <path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01" />
        </svg>
      ),
    },
  ];

  return (
    <>
      {/* Tabs nav */}
      <nav className="ch-tabs">
        <div className="wrap ch-tabs-row">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              type="button"
              className={`ch-tab${activeTab === tab.id ? " active" : ""}`}
              onClick={() => setActiveTab(tab.id)}
            >
              {tab.icon}
              {tab.label}
              {tab.ct && <span className="ct">{tab.ct}</span>}
            </button>
          ))}
        </div>
      </nav>

      {/* Shell */}
      <main className="wrap ch-shell">
        <div>
          {/* ── Live panel ── */}
          {activeTab === "live" && (
            <section className="ch-panel active">
              {/* Live player */}
              <article className="ch-live">
                <div className="ch-live-vid">
                  <img
                    src="https://images.unsplash.com/photo-1554475901-4538ddfbccc2?w=1400&q=80"
                    alt=""
                  />
                  <span className="tag">LIVE</span>
                  <span className="watching">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                      <circle cx="12" cy="12" r="3" />
                      <path d="M2 12s4-8 10-8 10 8 10 8-4 8-10 8S2 12 2 12z" />
                    </svg>
                    24,318 {t("watching")}
                  </span>
                  <button type="button" className="play" aria-label="Play">
                    <svg viewBox="0 0 24 24">
                      <polygon points="6 4 20 12 6 20" />
                    </svg>
                  </button>
                  <div className="bottom">
                    <div className="show">Prime Time · S08 E142</div>
                    <h3>
                      The Maharashtra reshuffle, explained — what changed and
                      why it matters for 2027
                    </h3>
                  </div>
                </div>
                <div className="ch-live-info">
                  <div className="anchor">
                    <div className="av">RK</div>
                    <div>
                      <div className="who">Ravish Kumar</div>
                      <div className="role">Anchor · since 2019</div>
                    </div>
                  </div>
                  <span className="spacer" />
                  <button type="button" className="btn-watch">
                    <svg viewBox="0 0 24 24">
                      <polygon points="6 4 20 12 6 20" />
                    </svg>
                    {t("btn_watch_full")}
                  </button>
                </div>
              </article>

              {/* Today's schedule */}
              <div className="ch-sec-h">
                <h2>{t("section_today_schedule")}</h2>
                <a href="#" className="link">{t("section_today_schedule_link")}</a>
              </div>
              <ScheduleGrid rows={TODAY_SCHEDULE} />

              {/* Popular shows */}
              <div className="ch-sec-h" style={{ marginTop: 36 }}>
                <h2>{t("section_popular_shows")}</h2>
                <a href="#" className="link">{t("section_popular_shows_link")}</a>
              </div>
              <ShowsGrid shows={POPULAR_SHOWS} />
            </section>
          )}

          {/* ── Schedule panel ── */}
          {activeTab === "schedule" && (
            <section className="ch-panel active">
              <div className="ch-sec-h">
                <h2>{t("section_full_schedule")}</h2>
                <a href="#" className="link">{t("section_full_schedule_dl")}</a>
              </div>
              <ScheduleGrid rows={FULL_SCHEDULE} />
            </section>
          )}

          {/* ── Shows panel ── */}
          {activeTab === "shows" && (
            <section className="ch-panel active">
              <div className="ch-sec-h">
                <h2>{t("section_all_shows")}</h2>
                <a href="#" className="link">{t("section_all_shows_link")}</a>
              </div>
              <ShowsGrid shows={ALL_SHOWS} />
            </section>
          )}

          {/* ── Video panel ── */}
          {activeTab === "video" && (
            <section className="ch-panel active">
              <div className="ch-sec-h">
                <h2>{t("section_videos")}</h2>
                <a href="#" className="link">{t("section_videos_link")}</a>
              </div>
              <div className="video-grid">
                {VIDEOS.map((v) => (
                  <article key={v.title} className="video-card">
                    <div className="ph">
                      <img src={v.image} alt="" />
                      {v.isLive && <span className="live-tag">LIVE</span>}
                      <span className="dur">{v.duration}</span>
                      <button type="button" className="play" aria-label="Play video">
                        <svg viewBox="0 0 24 24">
                          <polygon points="6 4 20 12 6 20" />
                        </svg>
                      </button>
                    </div>
                    <div className="body">
                      <span className="cat">{v.cat}</span>
                      <h4>{v.title}</h4>
                      <div className="meta">
                        <span>{v.views}</span>
                        <span>{v.age}</span>
                      </div>
                    </div>
                  </article>
                ))}
              </div>
            </section>
          )}

          {/* ── News panel ── */}
          {activeTab === "news" && (
            <section className="ch-panel active">
              <div className="ch-sec-h">
                <h2>{t("section_news")}</h2>
                <a href="#" className="link">{t("section_news_link")}</a>
              </div>
              <div className="ch-news-list">
                {NEWS.map((item) => (
                  <a key={item.title} className="ch-news-row" href={item.href}>
                    <div className="thumb">
                      <img src={item.image} alt="" />
                    </div>
                    <div className="info">
                      <div className="cat">{item.cat}</div>
                      <h4>{item.title}</h4>
                      <div className="desc">{item.desc}</div>
                      <div className="meta">
                        <span><b>{item.author}</b></span>
                        <span>{item.readTime}</span>
                        <span>{item.reads}</span>
                      </div>
                    </div>
                  </a>
                ))}
              </div>
            </section>
          )}

          {/* ── Anchors panel ── */}
          {activeTab === "anchors" && (
            <section className="ch-panel active">
              <div className="ch-sec-h">
                <h2>{t("section_anchors")}</h2>
                <a href="#" className="link">{t("section_anchors_link")}</a>
              </div>
              <div className="anchor-grid">
                {ANCHORS.map((anchor) => (
                  <article key={anchor.name} className="anchor-card">
                    <div className="ph">
                      <img src={anchor.image} alt={anchor.name} />
                      {anchor.isOnAir && (
                        <span className="on-air">{t("badge_on_air")}</span>
                      )}
                      <span className="role">{anchor.role}</span>
                    </div>
                    <div className="body">
                      <h3>{anchor.name}</h3>
                      <div className="show-line">{anchor.showLine}</div>
                      <p className="bio">{anchor.bio}</p>
                      <div className="foot">
                        <a href="#" className="btn primary">{t("btn_follow_anchor")}</a>
                        <a href="#" className="btn secondary">{t("btn_profile")}</a>
                      </div>
                    </div>
                  </article>
                ))}
              </div>
            </section>
          )}

          {/* ── About panel ── */}
          {activeTab === "about" && (
            <section className="ch-panel active">
              <div className="ch-sec-h">
                <h2>{t("section_about")}</h2>
              </div>
              <div className="about-band">
                <div className="about-block">
                  <div className="h">{t("about_mission")}</div>
                  <h3>India&apos;s first 24-hour English news network.</h3>
                  <p>
                    Founded in 1988 by Prannoy Roy and Radhika Roy, NDTV 24×7
                    became India&apos;s first 24-hour English news channel in
                    2003. It broadcasts from New Delhi to 82 million homes
                    across India and a further 14 countries.
                  </p>
                  <p>
                    The channel reports across politics, business, sport, science
                    and culture — with 38 anchors and 142 active shows. Its
                    primetime hour, <em>Prime Time</em>, is the most-watched
                    English-language newshour in the country.
                  </p>
                </div>

                <div className="about-block">
                  <div className="h">{t("about_awards")}</div>
                  <div className="award-grid">
                    {AWARDS.map((award) => (
                      <div key={award.year + award.name} className="award">
                        <div className="yr">{award.year}</div>
                        <div className="nm">{award.name}</div>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="about-block">
                  <div className="h">{t("about_editorial")}</div>
                  <ul>
                    {EDITORIAL_POINTS.map((point) => (
                      <li key={point}>{point}</li>
                    ))}
                  </ul>
                </div>

                <div className="about-block">
                  <div className="h">{t("about_contact")}</div>
                  <div className="contact-row">
                    <div className="contact-item">
                      <span className="ic">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                          <rect x="3" y="5" width="18" height="14" rx="2" />
                          <path d="M3 7l9 7 9-7" />
                        </svg>
                      </span>
                      <div>
                        <div className="lbl">Newsroom</div>
                        <div className="v">news@ndtv247.in</div>
                      </div>
                    </div>
                    <div className="contact-item">
                      <span className="ic">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                          <path d="M22 16.9v3.1a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2H7a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.5 2.1L7.9 9.7a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2.1z" />
                        </svg>
                      </span>
                      <div>
                        <div className="lbl">Phone</div>
                        <div className="v">+91 11 4567 8900</div>
                      </div>
                    </div>
                    <div className="contact-item">
                      <span className="ic">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                          <path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z" />
                          <circle cx="12" cy="10" r="3" />
                        </svg>
                      </span>
                      <div>
                        <div className="lbl">Studios</div>
                        <div className="v">B-50A, Archana Complex, Greater Kailash-1, New Delhi</div>
                      </div>
                    </div>
                    <div className="contact-item">
                      <span className="ic">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                          <rect x="5" y="11" width="14" height="10" rx="2" />
                          <path d="M8 11V7a4 4 0 0 1 8 0v4" />
                        </svg>
                      </span>
                      <div>
                        <div className="lbl">Secure tip line</div>
                        <div className="v">tips.ndtv247.in</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          )}
        </div>

        {/* Sidebar */}
        <aside className="ch-side">
          {/* About card */}
          <div className="ch-card accent-l">
            <div className="h">{t("sidebar_about_channel")}</div>
            <div className="about-list">
              {ABOUT_INFO.map((row) => (
                <div key={row.key} className="about-row">
                  <b>{t(row.key)}</b>
                  <span className="v">{row.value}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Watch on card */}
          <div className="ch-card">
            <div className="h">
              {t("sidebar_watch_on")}{" "}
              <span className="live-mini">LIVE</span>
            </div>
            <div className="platform-list">
              {PLATFORMS.map((p) => (
                <a key={p.name} className="platform-row" href="#">
                  <span
                    className="ic"
                    style={{ background: p.color }}
                  >
                    {p.initials}
                  </span>
                  <span className="nm">{p.name}</span>
                  <span className="ch-num">{p.channel}</span>
                </a>
              ))}
            </div>
          </div>

          {/* Top anchors card */}
          <div className="ch-card">
            <div className="h">{t("sidebar_top_anchors")}</div>
            <div className="anchor-list">
              {SIDEBAR_ANCHORS.map((anchor) => (
                <a key={anchor.name} className="anchor-row" href="#">
                  <div
                    className="av"
                    style={anchor.avatarBg ? { background: anchor.avatarBg } : undefined}
                  >
                    {anchor.initials}
                  </div>
                  <div>
                    <div className="nm">{anchor.name}</div>
                    <div className="show-line">{anchor.showLine}</div>
                  </div>
                  {anchor.badge && (
                    <span
                      className="pill"
                      style={
                        anchor.badgeBg
                          ? { background: anchor.badgeBg, color: anchor.badgeColor }
                          : undefined
                      }
                    >
                      {anchor.badge === "ON AIR" ? t("badge_on_air") : t("badge_up_next")}
                    </span>
                  )}
                </a>
              ))}
            </div>
          </div>

          {/* DTNews+ upsell */}
          <div
            className="ch-card"
            style={{
              background: "var(--brand)",
              color: "#fff",
              borderColor: "var(--brand)",
              position: "relative",
              overflow: "hidden",
            }}
          >
            <div
              style={{
                position: "absolute",
                fontFamily: "var(--italic)",
                fontStyle: "italic",
                fontSize: 160,
                lineHeight: 0.8,
                color: "rgba(255,255,255,0.08)",
                right: -16,
                top: -20,
                letterSpacing: "-0.05em",
              }}
            >
              DT
            </div>
            <div
              style={{
                fontSize: 10.5,
                fontWeight: 800,
                letterSpacing: 1.4,
                opacity: 0.85,
                position: "relative",
              }}
            >
              {t("sidebar_plus_label")}
            </div>
            <h5
              style={{
                fontFamily: "var(--italic)",
                fontStyle: "italic",
                fontWeight: 400,
                fontSize: 22,
                margin: "6px 0 8px",
                lineHeight: 1.1,
                letterSpacing: "-0.01em",
                position: "relative",
              }}
            >
              {t("sidebar_plus_heading")}
            </h5>
            <p
              style={{
                fontSize: 12.5,
                opacity: 0.88,
                margin: "0 0 14px",
                lineHeight: 1.5,
                position: "relative",
              }}
            >
              {t("sidebar_plus_body")}
            </p>
            <a
              href="#"
              style={{
                background: "#fff",
                color: "var(--brand)",
                padding: "9px 16px",
                borderRadius: 99,
                fontSize: 13,
                fontWeight: 700,
                display: "inline-flex",
                alignItems: "center",
                gap: 6,
                position: "relative",
              }}
            >
              {t("sidebar_plus_btn")}
              <svg
                width="13"
                height="13"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2.4"
              >
                <path d="M5 12h14M13 6l6 6-6 6" />
              </svg>
            </a>
          </div>
        </aside>
      </main>
    </>
  );
}

function ScheduleGrid({ rows }: { rows: ScheduleRow[] }) {
  return (
    <div className="schedule-grid">
      {rows.map((row, i) => (
        <div
          key={i}
          className={`schedule-row${row.status === "live" ? " live" : ""}`}
        >
          <div className="time">
            {row.time}
            <span className="pm">{row.period}</span>
          </div>
          <div className="info">
            <div className="nm">{row.show}</div>
            <div className="host">{row.host}</div>
          </div>
          <span
            className={`badge${row.status !== "live" ? ` ${row.status}` : ""}`}
          >
            {row.badge}
          </span>
        </div>
      ))}
    </div>
  );
}

function ShowsGrid({ shows }: { shows: ShowCard[] }) {
  return (
    <div className="shows-grid">
      {shows.map((show) => (
        <article key={show.title} className="show-card">
          <div className="ph">
            <img src={show.image} alt="" />
            <span className={`when${show.isLive ? " live-tag" : " upcoming"}`}>
              {show.when}
            </span>
            <span className="play">
              <svg viewBox="0 0 24 24">
                <polygon points="6 4 20 12 6 20" />
              </svg>
            </span>
          </div>
          <div className="body">
            <span className="cat">{show.cat}</span>
            <h3>{show.title}</h3>
            <div className="host">{show.host}</div>
            <div className="foot">
              <span>{show.episodes}</span>
              <span>{show.time}</span>
            </div>
          </div>
        </article>
      ))}
    </div>
  );
}
