"use client";
import FloatingBackground from "@/components/floating-background";
import ShortsMarquee from "@/components/shorts-marquee";
import { useEffect, useState } from "react";
import { signIn, signOut, useSession } from "next-auth/react";
import MonthlyBest from "@/components/monthly-best";
import Image from "next/image";
import SiteHeader from "../components/site-header";
import VoltgamingBanner from "@/components/voltgaming-banner";
import {
  faArrowLeft,
  faCheck,
  faClock,
  faComment,
  faThumbsUp,
  faEye,
  faPlay,
  faRocket,
  faUsers,
  faVideo,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";


type Video = {
  id: string;
  title: string;
  thumbnail: string;
  publishedAt: string;
  url: string;
  views: string | null;
  likes: string | null;
  comments: string | null;
};


type Channel = {
  title?: string;
  subscribers?: number | string;
  totalViews?: number | string;
  videoCount?: number | string;
};

type VideosResponse = {
  channel?: Channel;
  videos?: Video[];
  error?: string;
};

type IntroStep = "start" | "source" | "welcome" | "loading";

const messages = [
  "جدیدترین ویدیوهای کانال رو همین‌جا دنبال کن.",
  "عضو خانواده ترونیکس شو تا ویدیوها و چالش‌های جدید رو از دست ندی.",
  "به کانال تلگراممون سر بزن تا از اخبار و اطلاعیه‌ها باخبر بمونی.",
];

const sources = [
  { id: "youtube", label: "یوتیوب", detail: "از طریق ویدیوها و شورت‌ها" },
  { id: "telegram", label: "تلگرام", detail: "از طریق کانال تلگرام" },
  { id: "friends", label: "دوستان", detail: "با معرفی دوستانم" },
  { id: "other", label: "جای دیگه", detail: "از یک مسیر دیگه آشنا شدم" },
];

export default function Home() {
  const [data, setData] = useState<VideosResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [sort, setSort] = useState("newest");
  const [messageIndex, setMessageIndex] = useState(0);

  const [introStep, setIntroStep] = useState<IntroStep | null>(null);
  const [selectedSource, setSelectedSource] = useState("");
  const [introChecked, setIntroChecked] = useState(false);
  
const [activeHeartVideo, setActiveHeartVideo] = useState(-1);

const [fadingHeartVideo, setFadingHeartVideo] = useState(false);


useEffect(() => {
  let timeout: ReturnType<typeof setTimeout>;
  let previousVideo = -1;
  let cancelled = false;

  const runCycle = () => {
    if (cancelled) return;

    const choices = [0, 1, 2].filter(
      (index) => index !== previousVideo
    );

    const nextVideo =
      choices[Math.floor(Math.random() * choices.length)];

    previousVideo = nextVideo;
    setActiveHeartVideo(nextVideo);

    timeout = setTimeout(() => {
      if (cancelled) return;

      setFadingHeartVideo(true);

timeout = setTimeout(() => {
  if (cancelled) return;

  setActiveHeartVideo(-1);
  setFadingHeartVideo(false);
}, 1800);

      timeout = setTimeout(runCycle, 5000);
    }, 10000);
  };

  timeout = setTimeout(runCycle, Math.random() * 3000);

  return () => {
    cancelled = true;
    clearTimeout(timeout);
  };
}, []);


useEffect(() => {
  let timeout: ReturnType<typeof setTimeout>;
  let cancelled = false;
  let previousVideo = -1;

  const scheduleNext = (delay: number) => {
    timeout = setTimeout(() => {
      if (cancelled) return;

      // بین این فاصله‌ها هیچ انیمیشنی فعال نیست
      setActiveHeartVideo(-1);

      const pause = 2500 + Math.random() * 6500;

      timeout = setTimeout(() => {
        if (cancelled) return;

        const choices = [0, 1, 2].filter(
          (index) => index !== previousVideo
        );

        const next =
          choices[Math.floor(Math.random() * choices.length)];

        previousVideo = next;
        setActiveHeartVideo(next);

        // مدت اجرای موج در هر نوبت متفاوت است
        scheduleNext(7000 + Math.random() * 7000);
      }, pause);
    }, delay);
  };

  // شروع اولیه با تأخیر تصادفی
  timeout = setTimeout(() => {
    if (cancelled) return;

    const first = Math.floor(Math.random() * 3);
    previousVideo = first;
    setActiveHeartVideo(first);

    scheduleNext(7000 + Math.random() * 7000);
  }, 1500 + Math.random() * 5000);

  return () => {
    cancelled = true;
    clearTimeout(timeout);
  };
}, []);


  useEffect(() => {
    const completed = localStorage.getItem("tronix-onboarding-complete");
    if (!completed) setIntroStep("start");
    setIntroChecked(true);
  }, []);

  useEffect(() => {
    let cancelled = false;

    async function loadVideos() {
      try {
        const response = await fetch("/api/videos");

        if (!response.ok) {
          throw new Error("دریافت اطلاعات کانال ناموفق بود.");
        }

        const result: VideosResponse = await response.json();

        if (!cancelled) {
          setData(result);
          setError(result.error ?? "");
        }
      } catch {
        if (!cancelled) {
          setError("بارگذاری اطلاعات با خطا مواجه شد. دوباره تلاش کن.");
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    loadVideos();
    return () => {
      cancelled = true;
    };
  }, []);

  useEffect(() => {
    const interval = window.setInterval(() => {
      setMessageIndex((current) => (current + 1) % messages.length);
    }, 10000);

    return () => window.clearInterval(interval);
  }, []);

  useEffect(() => {
    if (introStep !== "loading") return;

    const timer = window.setTimeout(() => {
      localStorage.setItem("tronix-onboarding-complete", "true");
      if (selectedSource) {
        localStorage.setItem("tronix-discovery-source", selectedSource);
      }
      setIntroStep(null);
    }, 3000);

    return () => window.clearTimeout(timer);
  }, [introStep, selectedSource]);

  const channel = data?.channel;
  const videos = data?.videos ?? [];

  const sortedVideos = [...videos].sort((a, b) => {
    const dateA = new Date(a.publishedAt).getTime();
    const dateB = new Date(b.publishedAt).getTime();

    if (sort === "oldest") return dateA - dateB;
    return dateB - dateA;
  });


  const formatNumber = (value?: number | string | null) => {
    const number = Number(value ?? 0);

    if (!Number.isFinite(number)) return "0";

    return new Intl.NumberFormat("en-US", {
      notation: "compact",
      maximumFractionDigits: 1,
    }).format(number);
  };


  const formatDate = (date: string) => {
    if (!date) return "تاریخ نامشخص";

    const parsed = new Date(date);
    if (Number.isNaN(parsed.getTime())) return "تاریخ نامشخص";

    return parsed.toLocaleDateString("fa-IR", {
      year: "numeric",
      month: "long",
      day: "numeric",
    });
  };

const beginLoading = () => setIntroStep("loading");

return (
  <>
   {/* <FloatingBackground /> */}

    <main
      className="relative z-[1] min-h-screen overflow-hidden"
      style={{
        backgroundColor: "var(--background)",
        color: "var(--foreground)",
      }}
      
    ><FloatingBackground />
      <SiteHeader subscriberCount={Number(channel?.subscribers ?? 0)} />

      <div className="mx-auto max-w-[1500px] px-4 pb-16 pt-7 sm:px-6 sm:pt-10 lg:px-8">
        {/* Hero */}
        <section
          className="hero-panel relative overflow-hidden rounded-[30px] border p-6 sm:p-10 lg:p-14"
          style={{
            background:
              "linear-gradient(120deg, color-mix(in srgb, var(--accent) 15%, var(--surface)), var(--surface) 55%, color-mix(in srgb, var(--accent-secondary) 10%, var(--surface)))",
            borderColor: "var(--border)",
          }}
        >
          <div className="hero-glow hero-glow-blue" />
          <div className="hero-glow hero-glow-orange" />

          <div className="relative z-10 grid items-center gap-10 md:grid-cols-[1fr_auto]">
            <div>
              <span
                className="inline-flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-extrabold tracking-widest sm:text-sm"
                style={{
                  borderColor: "var(--border)",
                  color: "var(--accent)",
                  backgroundColor: "color-mix(in srgb, var(--accent) 9%, transparent)",
                }}
              >
                <span className="live-dot" />
                TRONIX COMMUNITY
              </span>

              <h1 className="mt-6 text-3xl font-black leading-[1.5] sm:text-5xl lg:text-6xl">
                به جمع{" "}
                <span className="gradient-text">تروبکس</span>
                <br className="hidden sm:block" /> خوش اومدی
              </h1>

              <p
                key={messageIndex}
                className="message-enter mt-5 max-w-2xl text-base leading-8 sm:text-lg"
                style={{ color: "var(--muted)" }}
              >
                {messages[messageIndex]}
              </p>

              <div className="mt-8 flex flex-wrap gap-3">
                <a
                  href="https://www.youtube.com/@Tronixdh"
                  target="_blank"
                  rel="noreferrer"
                  className="primary-action"
                >
                  <FontAwesomeIcon icon={faPlay} />
                  تماشای کانال
                </a>

                <a
                  href="https://t.me/tronix_channel_tl"
                  target="_blank"
                  rel="noreferrer"
                  className="secondary-action"
                >
                  کانال تلگرام
                  <FontAwesomeIcon icon={faArrowLeft} />
                </a>
              </div>
            </div>

            <div className="profile-stage mx-auto">
              <div className="profile-orbit profile-orbit-one" />
              <div className="profile-orbit profile-orbit-two" />
              <div className="profile-halo" />
              <div className="profile-image-frame">
                <Image
                  src="/profile.png"
                  alt="پروفایل ترونیکس"
                  fill
                  priority
                  sizes="(max-width: 640px) 176px, 240px"
                  className="object-cover"
                />
              </div>
              <div className="profile-tag">
                <span className="live-dot" />
                TRONIX
              </div>
            </div>
          </div>
        </section>



            
        {/* Videos */}
        {/* Shorts Showcase */}
        <section className="shorts-showcase mt-24">
          <div className="mb-12 flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
            <div>
              <p
                className="text-xs font-black tracking-[0.3em]"
                style={{ color: "var(--accent)" }}
              >
                TRONIX / SHORTS
              </p>

              <h2 className="mt-4 text-3xl font-black tracking-tight sm:text-5xl">
                جدیدترین <span className="shorts-gradient">ویدیو ها</span>
              </h2>

              <p
                className="mt-4 max-w-xl text-sm leading-8 sm:text-base"
                style={{ color: "var(--muted)" }}
              >
                جدیدترین اتفاقات کانال ترونیکس؛ کوتاه، سریع و بدون حاشیه.
              </p>
            </div>

            <a
              href="https://www.youtube.com/@Tronixdh/shorts"
              target="_blank"
              rel="noreferrer"
              className="shorts-all-link"
            >
              مشاهده همه شورت‌ها
              <FontAwesomeIcon icon={faArrowLeft} />
            </a>
          </div>

          {error && (
            <div
              className="mb-6 rounded-2xl border p-4 text-sm"
              style={{
                borderColor: "rgba(239,68,68,.25)",
                backgroundColor: "rgba(239,68,68,.08)",
                color: "var(--foreground)",
              }}
            >
              {error}
            </div>
          )}

          {loading ? (
            <div className="grid grid-cols-1 gap-7 sm:grid-cols-2 lg:grid-cols-3">
              {[1, 2, 3].map((item) => (
                <div key={item} className="shorts-skeleton" />
              ))}
            </div>
          ) : sortedVideos.length > 0 ? (
            <div className="shorts-stage">
              {sortedVideos.slice(0, 3).map((video, index) => (
                <a
                  key={video.id}
                  href={video.url}
                  target="_blank"
                  rel="noreferrer"
                  className={`shorts-card shorts-card-${index + 1} group`}
                  aria-label={`تماشای ویدیو: ${video.title}`}
                >
                  <div className="shorts-poster">
                    <img
                      src={video.thumbnail}
                      alt={video.title}
                      loading="lazy"
                      className="shorts-poster-image"
                    />

                    <div className="shorts-poster-shade" />

                    <div className="shorts-topline">
                      <span className="shorts-brand">
                        <span className="shorts-brand-dot" />
                        TRONIX
                      </span>

                      {index === 0 && (
                        <span className="shorts-new-badge">جدیدترین</span>
                      )}
                    </div>

                    <div className="shorts-play">
                      <FontAwesomeIcon icon={faPlay} />
                    </div>

                    <div className="shorts-poster-bottom">
                      <span className="shorts-platform">YOUTUBE SHORTS</span>
                      <h3 className="shorts-title">{video.title}</h3>
                      <p className="shorts-date">
                        <FontAwesomeIcon icon={faClock} />
                        {formatDate(video.publishedAt)}
                      </p>
                    </div>
                  </div>



<div className="shorts-floating-hearts" aria-hidden="true">
  {Array.from({ length: 5 }, (_, i) => (
    <span
      key={i}
      className="shorts-floating-heart"
      style={{
        animationDelay: `${i * 0.8}s`,
        animationDuration: `${3.5 + (i % 3) * 0.5}s`,
        right: `${10 + i * 14}px`,
        fontSize: `${16 + (i % 3) * 5}px`,
      }}
    >
      ♥
    </span>
  ))}
</div>





                  <div className="shorts-stats">
                    <div className="shorts-stat">
                      <FontAwesomeIcon icon={faEye} className="text-blue-400" />
                      <span>
                        {video.views == null ? "—" : formatNumber(video.views)}
                      </span>
                      <small>Views</small>
                    </div>

                    <div className="shorts-stat">
                      <FontAwesomeIcon icon={faThumbsUp} className="text-emerald-400" />
                      <span>
                        {video.likes == null ? "—" : formatNumber(video.likes)}
                      </span>
                      <small>Like</small>
                    </div>

                    <div className="shorts-stat">
                      <FontAwesomeIcon icon={faComment} className="text-purple-400" />
                      <span>
                        {video.comments == null ? "—" : formatNumber(video.comments)}
                      </span>
                      <small>Comments</small>
                    </div>
                  </div>
                </a>
              ))}
            </div>
          ) : (
            <div
              className="rounded-2xl border px-5 py-14 text-center"
              style={{
                borderColor: "var(--border)",
                backgroundColor: "var(--surface)",
              }}
            >
              <FontAwesomeIcon
                icon={faVideo}
                className="text-3xl"
                style={{ color: "var(--muted)" }}
              />
              <p className="mt-4 text-lg font-black">
                ویدیویی برای نمایش پیدا نشد
              </p>
              <p className="mt-2 text-sm" style={{ color: "var(--muted)" }}>
                اتصال رو بررسی کن و دوباره امتحان کن.
              </p>
            </div>
          )}
        </section>


        <VoltgamingBanner />

        <ShortsMarquee videos={sortedVideos} />


<MonthlyBest videos={sortedVideos} />


        {/* Community callout */}
        <section
          className="community-panel mt-16 flex flex-col items-start justify-between gap-6 rounded-3xl border p-6 sm:flex-row sm:items-center sm:p-9"
          style={{ borderColor: "var(--border)" }}
        >
          <div className="flex items-start gap-4">
            <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl" style={{ backgroundColor: "color-mix(in srgb, var(--accent) 12%, transparent)", color: "var(--accent)" }}>
              <FontAwesomeIcon icon={faRocket} className="text-xl" />
            </div>
            <div>
              <h2 className="text-xl font-black">بخشی از تروبکس شو</h2>
              <p className="mt-2 max-w-xl text-sm leading-7" style={{ color: "var(--muted)" }}>
                برای ویدیوهای تازه، خبرها و اطلاعیه‌های ترونیکس همراه جامعه باش.
              </p>
            </div>
          </div>
          <a
            href="https://t.me/tronix_channel_tl"
            target="_blank"
            rel="noreferrer"
            className="primary-action shrink-0"
          >
            عضویت در تلگرام
            <FontAwesomeIcon icon={faArrowLeft} />
          </a>
        </section>

        {/* Monthly Best - placeholder */}


        <footer className="mt-14 border-t pt-7 text-center" style={{ borderColor: "var(--border)" }}>
          <p className="text-sm" style={{ color: "var(--muted)" }}>
            ساخته‌شده برای جامعه‌ی ترونیکس
          </p>
          <p className="mt-2 text-xs" style={{ color: "var(--muted)" }}>
            © TRONIX
          </p>
        </footer>
      </div>

      {/* First-visit onboarding */}
      {introChecked && introStep && (
        <div className="onboarding-backdrop">
          <div className="onboarding-card">
            <div className="onboarding-decoration onboarding-decoration-one" />
            <div className="onboarding-decoration onboarding-decoration-two" />

            {introStep !== "loading" && (
              <div className="relative z-10 mb-8 flex items-center justify-center gap-3">
                <div className="relative h-14 w-14 overflow-hidden rounded-2xl border" style={{ borderColor: "var(--border)" }}>
                  <Image src="/profile.png" alt="Tronix" fill sizes="56px" className="object-cover" />
                </div>
                <div>
                  <div className="text-lg font-black tracking-widest">TRONIX</div>
                  <div className="mt-1 text-xs" style={{ color: "var(--muted)" }}>YOUR NEXT LEVEL</div>
                </div>
              </div>
            )}

            {introStep === "start" && (
              <div className="relative z-10 text-center">
                <div className="mb-5 flex justify-center">
                  <div className="welcome-symbol">
                    <FontAwesomeIcon icon={faRocket} />
                  </div>
                </div>
                <p className="text-xs font-black tracking-[0.2em]" style={{ color: "var(--accent)" }}>
                  WELCOME TO TRONIX
                </p>
                <h2 className="mt-4 text-3xl font-black leading-relaxed sm:text-4xl">
                  اینجا خونه‌ی <span className="gradient-text">تروبکسه</span>
                </h2>
                <p className="mx-auto mt-4 max-w-sm text-sm leading-8" style={{ color: "var(--muted)" }}>
                  به فضای ترونیکس خوش اومدی؛ جایی برای ویدیوها، خبرها و اتفاقات تازه.
                </p>
                <button onClick={() => setIntroStep("source")} className="primary-action mt-8 w-full justify-center">
                  شروع کنیم
                  <FontAwesomeIcon icon={faArrowLeft} />
                </button>
                <button
                  onClick={beginLoading}
                  className="mt-4 text-xs transition hover:opacity-80"
                  style={{ color: "var(--muted)" }}
                >
                  رد کردن معرفی
                </button>
              </div>
            )}

            {introStep === "source" && (
              <div className="relative z-10">
                <p className="text-xs font-black tracking-[0.2em]" style={{ color: "var(--accent)" }}>
                  ONE QUICK QUESTION
                </p>
                <h2 className="mt-3 text-2xl font-black leading-relaxed">
                  از چه طریقی با ترونیکس آشنا شدی؟
                </h2>
                <p className="mt-2 text-sm leading-7" style={{ color: "var(--muted)" }}>
                  انتخابت فقط برای شناخت بهتر جامعه‌مونه.
                </p>

                <div className="mt-6 space-y-3">
                  {sources.map((source) => (
                    <button
                      key={source.id}
                      onClick={() => {
                        setSelectedSource(source.id);
                        setIntroStep("welcome");
                      }}
                      className="source-option"
                      style={{
                        borderColor: selectedSource === source.id ? "var(--accent)" : "var(--border)",
                        backgroundColor: selectedSource === source.id ? "color-mix(in srgb, var(--accent) 10%, var(--surface))" : "var(--surface)",
                      }}
                    >
                      <span>
                        <span className="block font-extrabold">{source.label}</span>
                        <span className="mt-1 block text-xs" style={{ color: "var(--muted)" }}>
                          {source.detail}
                        </span>
                      </span>
                      <span className="source-check">
                        {selectedSource === source.id && <FontAwesomeIcon icon={faCheck} />}
                      </span>
                    </button>
                  ))}
                </div>

                <button
                  onClick={() => setIntroStep("welcome")}
                  className="mt-5 w-full rounded-xl border px-4 py-3 text-sm font-bold"
                  style={{ borderColor: "var(--border)", color: "var(--muted)" }}
                >
                  رد کردن این سؤال
                </button>
              </div>
            )}

            {introStep === "welcome" && (
              <div className="relative z-10 py-5 text-center">
                <div className="mb-6 flex justify-center">
                  <div className="welcome-symbol">
                    <FontAwesomeIcon icon={faCheck} />
                  </div>
                </div>
                <h2 className="text-3xl font-black leading-relaxed">
                  خوش اومدی به جمع <span className="gradient-text">تروبکس!</span>
                </h2>
                <p className="mt-4 text-sm leading-8" style={{ color: "var(--muted)" }}>
                  همه‌چیز آماده‌ست. بریم سراغ دنیای ترونیکس.
                </p>
                <button onClick={beginLoading} className="primary-action mt-8 w-full justify-center">
                  ورود به سایت
                  <FontAwesomeIcon icon={faArrowLeft} />
                </button>
              </div>
            )}

            {introStep === "loading" && (
              <div className="relative z-10 flex min-h-[330px] flex-col items-center justify-center text-center">
                <div className="loader-ring">
                  <div className="loader-ring-inner">
                    <Image src="/profile.png" alt="Tronix" width={62} height={62} className="rounded-2xl object-cover" />
                  </div>
                </div>
                <h2 className="mt-8 text-2xl font-black">
                  داریم همه‌چیز رو آماده می‌کنیم
                </h2>
                <p className="mt-3 text-sm" style={{ color: "var(--muted)" }}>
                  خوش اومدی به جمع تروبکس...
                </p>
                <div className="loading-track mt-7">
                  <div className="loading-track-fill" />
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      <style jsx>{`
        .hero-panel { isolation: isolate; }
        .hero-glow {
          position: absolute;
          width: 280px;
          height: 280px;
          border-radius: 999px;
          filter: blur(90px);
          opacity: .16;
          pointer-events: none;
        }
        .hero-glow-blue { right: -80px; top: -120px; background: var(--accent); }
        .hero-glow-orange { left: -90px; bottom: -150px; background: var(--accent-secondary); }
        .gradient-text {
          background: linear-gradient(100deg, var(--accent), var(--accent-secondary));
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
        .live-dot {
          display: inline-block;
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #35d49a;
          box-shadow: 0 0 12px #35d49a88;
        }
        .message-enter { animation: message-in .5s ease both; }
        @keyframes message-in {
          from { opacity: 0; transform: translateY(7px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .profile-stage {
          position: relative;
          width: 250px;
          height: 270px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .profile-halo {
          position: absolute;
          width: 205px;
          height: 205px;
          border-radius: 50%;
          background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
          filter: blur(32px);
          opacity: .26;
          animation: halo-pulse 4s ease-in-out infinite;
        }
        .profile-image-frame {
          position: relative;
          z-index: 2;
          width: 190px;
          height: 190px;
          overflow: hidden;
          border-radius: 34px;
          border: 1px solid var(--border);
          background: var(--surface);
          box-shadow: 0 20px 60px #0003;
          animation: profile-float 5s ease-in-out infinite;
        }
        .profile-orbit {
          position: absolute;
          width: 228px;
          height: 228px;
          border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
          border-radius: 38px;
          transform: rotate(25deg);
        }
        .profile-orbit-two {
          width: 242px;
          height: 242px;
          border-color: color-mix(in srgb, var(--accent-secondary) 25%, transparent);
          transform: rotate(-25deg);
        }
        .profile-tag {
          position: absolute;
          z-index: 3;
          bottom: 14px;
          right: 8px;
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 9px 13px;
          border: 1px solid var(--border);
          border-radius: 12px;
          background: var(--surface);
          font-size: 11px;
          font-weight: 900;
          letter-spacing: .12em;
        }
        @keyframes profile-float {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-8px); }
        }
        @keyframes halo-pulse {
          0%, 100% { opacity: .18; transform: scale(.94); }
          50% { opacity: .34; transform: scale(1.06); }
        }
        .stat-card {
          min-width: 0;
          border: 1px solid;
          border-radius: 23px;
          padding: 24px;
          background: var(--surface);
          transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
        }
        .stat-card:hover {
          transform: translateY(-4px);
          border-color: var(--accent);
          box-shadow: 0 16px 38px #0001;
        }
        .stat-icon {
          display: flex;
          width: 46px;
          height: 46px;
          align-items: center;
          justify-content: center;
          border-radius: 15px;
          font-size: 18px;
        }
        .primary-action, .secondary-action {
        
background: linear-gradient(110deg, #3b82f6 0%, #6366f1 55%, #8b5cf6 100%);
box-shadow: 0 8px 25px color-mix(in srgb, #6366f1 22%, transparent);

          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          min-height: 48px;
          border-radius: 14px;
          padding: 13px 20px;
          font-size: 14px;
          font-weight: 800;
          transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
        }
        .primary-action {
          background: linear-gradient(110deg, var(--accent), var(--accent-secondary));
          color: white;
          box-shadow: 0 8px 25px color-mix(in srgb, var(--accent) 18%, transparent);
        }
        .primary-action:hover { transform: translateY(-2px); filter: brightness(1.08); }
        .secondary-action {
          border: 1px solid var(--border);
          background: var(--surface);
          color: var(--foreground);
        }
        .secondary-action:hover { transform: translateY(-2px); border-color: var(--accent); }
        .video-card {
          overflow: hidden;
          border: 1px solid var(--border);
          border-radius: 22px;
          background: var(--surface);
          transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
        }
        .video-card:hover {
          transform: translateY(-4px);
          border-color: var(--accent);
          box-shadow: 0 18px 38px #0002;
        }
        .video-thumbnail { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-hover); }
        .video-shade { position: absolute; inset: 0; background: linear-gradient(to top, #0008, transparent 55%); }
        .video-brand {
          position: absolute; right: 12px; bottom: 12px;
          padding: 6px 9px; border: 1px solid #ffffff30; border-radius: 8px;
          background: #0009; color: white; font-size: 10px; font-weight: 900; letter-spacing: .1em;
        }
        .video-play {
          position: absolute; top: 50%; left: 50%; display: flex;
          width: 48px; height: 48px; align-items: center; justify-content: center;
          border: 1px solid #ffffff70; border-radius: 50%; background: #0007;
          color: white; opacity: 0; transform: translate(-50%, -40%);
          transition: opacity .25s ease, transform .25s ease;
        }
        .video-card:hover .video-play { opacity: 1; transform: translate(-50%, -50%); }
        .video-skeleton {
          height: 290px; border: 1px solid var(--border); border-radius: 22px;
          background: linear-gradient(100deg, var(--surface) 30%, var(--surface-hover) 50%, var(--surface) 70%);
          background-size: 200% 100%; animation: skeleton 1.5s linear infinite;
        }
        .loading-shimmer {
          background: linear-gradient(100deg, var(--surface-hover) 30%, var(--border) 50%, var(--surface-hover) 70%);
          background-size: 200% 100%; animation: skeleton 1.3s linear infinite;
        }
        @keyframes skeleton { to { background-position-x: -200%; } }
        .community-panel {
          background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface));
        }
        .onboarding-backdrop {
          position: fixed; inset: 0; z-index: 200;
          display: flex; align-items: center; justify-content: center;
          padding: 18px; background: #03050beF; backdrop-filter: blur(18px);
          animation: backdrop-in .3s ease both;
        }
        .onboarding-card {
          position: relative; isolation: isolate; overflow: hidden;
          width: min(100%, 510px); max-height: min(90vh, 850px); overflow-y: auto;
          border: 1px solid var(--border); border-radius: 30px;
          padding: 28px; background: var(--background); color: var(--foreground);
          box-shadow: 0 30px 100px #0008; animation: card-in .45s cubic-bezier(.2,.8,.2,1) both;
        }
        .onboarding-decoration {
          position: absolute; z-index: -1; width: 220px; height: 220px;
          border-radius: 50%; filter: blur(70px); opacity: .15; pointer-events: none;
        }
        .onboarding-decoration-one { right: -100px; top: -100px; background: var(--accent); }
        .onboarding-decoration-two { left: -120px; bottom: -120px; background: var(--accent-secondary); }
        .welcome-symbol {
          display: flex; width: 68px; height: 68px; align-items: center; justify-content: center;
          border: 1px solid var(--border); border-radius: 22px; font-size: 24px;
          color: white; background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
          box-shadow: 0 10px 35px color-mix(in srgb, var(--accent) 25%, transparent);
        }
        .source-option {
          display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
          border: 1px solid; border-radius: 16px; padding: 15px; text-align: right;
          transition: border-color .2s ease, transform .2s ease, background .2s ease;
        }
        .source-option:hover { transform: translateY(-1px); border-color: var(--accent) !important; }
        .source-check {
          display: flex; width: 25px; height: 25px; flex-shrink: 0; align-items: center; justify-content: center;
          border: 1px solid var(--border); border-radius: 8px; color: var(--accent);
        }
        .loader-ring {
          display: flex; width: 112px; height: 112px; align-items: center; justify-content: center;
          border: 3px solid color-mix(in srgb, var(--accent) 15%, transparent);
          border-top-color: var(--accent); border-right-color: var(--accent-secondary);
          border-radius: 50%; animation: spin 1.2s linear infinite;
        }
        .loader-ring-inner { animation: spin-reverse 1.2s linear infinite; }
        .loading-track { width: 190px; height: 5px; overflow: hidden; border-radius: 20px; background: var(--surface-hover); }
        .loading-track-fill {
          width: 35%; height: 100%; border-radius: inherit;
          background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
          animation: load-progress 3s ease-in-out forwards;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes spin-reverse { to { transform: rotate(-360deg); } }
        @keyframes load-progress { from { width: 0; } to { width: 100%; } }
        @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
        @keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
        @media (max-width: 640px) {
          .profile-stage { width: 210px; height: 220px; }
          .profile-image-frame { width: 155px; height: 155px; border-radius: 28px; }
          .profile-orbit { width: 185px; height: 185px; border-radius: 32px; }
          .profile-orbit-two { width: 198px; height: 198px; }
          .profile-tag { bottom: 5px; right: 0; }
          .onboarding-card { padding: 22px; border-radius: 25px; }
        }
        @media (prefers-reduced-motion: reduce) {
          .profile-image-frame, .profile-halo, .profile-orbit, .message-enter,
          .loader-ring, .loader-ring-inner, .loading-track-fill { animation: none !important; }
        }
      `}</style>

      
    </main>
  </>
  );
}

/* Tronix latest videos animations */