"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui/card";
import { ArrowLeft, Info } from "lucide-react";
import { useRouter } from "next/navigation";

export default function AboutUsPage() {
  const router = useRouter();
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  if (!isClient) {
    return (
      <div className="min-h-screen flex items-center justify-center p-4">
        <Card className="w-full max-w-3xl">
          <CardHeader><CardTitle>Loading...</CardTitle></CardHeader>
          <CardContent><p>Please wait.</p></CardContent>
        </Card>
      </div>
    );
  }

  return (
    <main className="min-h-screen flex flex-col items-center p-4 sm:p-6 md:p-8">
      <div className="w-full max-w-3xl space-y-6">
        <Card className="shadow-xl rounded-lg">
          <CardHeader>
            <div className="flex justify-between items-center">
              <div className="flex items-center gap-2">
                <Info className="w-8 h-8 text-primary" />
                <CardTitle className="text-3xl font-bold text-foreground">
                  About RUNINGA
                </CardTitle>
              </div>
              <Button variant="outline" onClick={() => router.push('/')} aria-label="Go to Home">
                <ArrowLeft className="mr-2 h-4 w-4" /> Home
              </Button>
            </div>
          </CardHeader>
          <CardContent className="space-y-6 text-foreground/90 prose prose-invert prose-sm sm:prose-base lg:prose-lg xl:prose-xl 2xl:prose-2xl mx-auto">
            <section>
              <h2 className="text-2xl font-semibold border-b pb-2 mb-3">Our Mission & Vision</h2>
              <p>
                RUNINGA is a dynamic and user-friendly web-based streaming platform designed to empower content creators and engage viewers with a diverse range of live video, audio streams, and curated video content. Our mission is to simplify the process for creators to broadcast their content and for viewers to discover and interact with it. We envision a scalable and engaging streaming ecosystem built on a foundation of accessibility and community.
              </p>
              <div className="my-4 rounded-lg overflow-hidden shadow-md">
                <Image
                  src="https://picsum.photos/seed/about-mission/600/300"
                  alt="Our Mission & Vision Illustration"
                  width={600}
                  height={300}
                  className="w-full h-auto object-cover"
                  data-ai-hint="community collaboration"
                />
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-semibold border-b pb-2 mb-3">The Challenge We Address</h2>
              <p>
                The demand for online video and live streaming continues to surge. However, challenges persist:
              </p>
              <ul className="list-disc list-inside space-y-1 pl-4">
                <li><strong>Complexity for Creators:</strong> Many find existing professional streaming solutions complex to set up or manage.</li>
                <li><strong>Content Discovery:</strong> Viewers often struggle to find diverse, independent, or niche content.</li>
                <li><strong>Engagement Barriers:</strong> Traditional streaming often lacks robust, easy-to-use tools for viewer interaction.</li>
              </ul>
            </section>

            <section>
              <h2 className="text-2xl font-semibold border-b pb-2 mb-3">The RUNINGA Solution</h2>
              <p>
                RUNINGA addresses these challenges by providing a comprehensive, yet accessible, streaming solution built on a powerful Firebase backend.
              </p>
              <div className="my-4 rounded-lg overflow-hidden shadow-md">
                <Image
                  src="https://picsum.photos/seed/about-solution/600/350"
                  alt="RUNINGA Platform Solution Illustration"
                  width={600}
                  height={350}
                  className="w-full h-auto object-cover"
                  data-ai-hint="platform interface"
                />
              </div>
              <h3 className="text-xl font-medium mt-2 mb-1">For Viewers:</h3>
              <ul className="list-disc list-inside space-y-1 pl-4">
                <li>An intuitive interface to browse and watch live video and audio streams.</li>
                <li>Discover and watch curated video playlists from their favorite creators.</li>
                <li>A smooth playback experience for various formats (HLS, YouTube, and other embeds).</li>
                <li>Ability to like and comment on streams, fostering community.</li>
              </ul>
              <h3 className="text-xl font-medium mt-2 mb-1">For Content Creators:</h3>
              <ul className="list-disc list-inside space-y-1 pl-4">
                <li>Easy submission of live stream URLs (HLS, YouTube, Dacast, etc.).</li>
                <li>Ability to create and manage video playlists using YouTube content.</li>
                <li>A dedicated dashboard to manage content, edit details, and view key performance analytics to compare with platform trends.</li>
              </ul>
              <h3 className="text-xl font-medium mt-2 mb-1">For Administrators:</h3>
              <ul className="list-disc list-inside space-y-1 pl-4">
                <li>A comprehensive dashboard with tools for content moderation, user oversight, and platform health management.</li>
                <li>Advanced analytics, including real-time RTMP stream status and detailed viewership charts.</li>
                <li>Ability to feature content by pinning video and audio streams separately.</li>
              </ul>
            </section>

            <section>
              <h2 className="text-2xl font-semibold border-b pb-2 mb-3">Our Target Audience</h2>
              <ul className="list-disc list-inside space-y-1 pl-4">
                <li><strong>Content Creators:</strong> Independent broadcasters, educators, gamers, musicians, radio stations, and community event organizers.</li>
                <li><strong>Viewers:</strong> Individuals seeking diverse content and interactive experiences.</li>
                <li><strong>Administrators:</strong> Platform owners and moderation teams.</li>
              </ul>
            </section>

            <section>
              <h2 className="text-2xl font-semibold border-b pb-2 mb-3">Why RUNINGA is Unique</h2>
              <ul className="list-disc list-inside space-y-1 pl-4">
                <li><strong>Simplicity & Accessibility:</strong> Focus on ease of use for creators of all media types.</li>
                <li><strong>Integrated Community Features:</strong> Built-in likes and comments encourage engagement.</li>
                <li><strong>Data-Driven Creator Tools:</strong> Dashboards with analytics empower creators to grow.</li>
                <li><strong>Flexible Content Sourcing:</strong> Robust support for HLS, YouTube, direct embeds, and audio-only streams.</li>
                <li><strong>Solid Foundation for Growth:</strong> Modern architecture using Next.js and Firebase, ready for future enhancements.</li>
              </ul>
            </section>
            
            <section>
              <h2 className="text-2xl font-semibold border-b pb-2 mb-3">Technology Powering RUNINGA</h2>
              <ul className="list-disc list-inside space-y-1 pl-4">
                <li><strong>Frontend:</strong> Next.js, React, TypeScript</li>
                <li><strong>UI Components:</strong> ShadCN UI & Tailwind CSS</li>
                <li><strong>Video/Audio Playback:</strong> HLS.js</li>
                <li><strong>Backend & Database:</strong> Firebase Authentication & Realtime Database</li>
                <li><strong>Live Ingest:</strong> Nginx with RTMP module</li>
                <li><strong>AI (Future Integration):</strong> Genkit</li>
              </ul>
              <div className="my-4 grid grid-cols-2 sm:grid-cols-3 gap-4">
                <div className="p-3 bg-muted rounded-lg shadow text-center">
                    <Image src="https://picsum.photos/seed/nextjs-logo/150/100" alt="Next.js Logo" width={150} height={100} className="mx-auto mb-2 rounded" data-ai-hint="nextjs logo"/>
                    <p className="text-sm font-medium">Next.js</p>
                </div>
                 <div className="p-3 bg-muted rounded-lg shadow text-center">
                    <Image src="https://picsum.photos/seed/react-logo/150/100" alt="React Logo" width={150} height={100} className="mx-auto mb-2 rounded" data-ai-hint="react logo"/>
                    <p className="text-sm font-medium">React</p>
                </div>
                 <div className="p-3 bg-muted rounded-lg shadow text-center">
                    <Image src="https://picsum.photos/seed/tailwind-logo/150/100" alt="Tailwind CSS Logo" width={150} height={100} className="mx-auto mb-2 rounded" data-ai-hint="tailwind logo"/>
                    <p className="text-sm font-medium">Tailwind CSS</p>
                </div>
                 <div className="p-3 bg-muted rounded-lg shadow text-center">
                    <Image src="https://picsum.photos/seed/hlsjs-logo/150/100" alt="HLS.js Logo" width={150} height={100} className="mx-auto mb-2 rounded" data-ai-hint="hlsjs logo"/>
                    <p className="text-sm font-medium">HLS.js</p>
                </div>
                 <div className="p-3 bg-muted rounded-lg shadow text-center">
                    <Image src="https://picsum.photos/seed/genkit-logo/150/100" alt="Genkit Logo" width={150} height={100} className="mx-auto mb-2 rounded" data-ai-hint="genkit logo"/>
                    <p className="text-sm font-medium">Genkit</p>
                </div>
                 <div className="p-3 bg-muted rounded-lg shadow text-center">
                    <Image src="https://picsum.photos/seed/firebase-logo/150/100" alt="Firebase Logo" width={150} height={100} className="mx-auto mb-2 rounded" data-ai-hint="firebase logo"/>
                    <p className="text-sm font-medium">Firebase</p>
                </div>
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-semibold border-b pb-2 mb-3">Our Journey & Future</h2>
              <h3 className="text-xl font-medium mt-2 mb-1">Current & Near-Term:</h3>
              <ul className="list-disc list-inside space-y-1 pl-4">
                <li>Refine existing features and UI/UX based on user feedback.</li>
                <li>Expand creator tools, including more advanced analytics.</li>
                <li>Integrate cloud storage for direct video uploads (VOD).</li>
              </ul>
              <h3 className="text-xl font-medium mt-2 mb-1">Growth Phase:</h3>
              <ul className="list-disc list-inside space-y-1 pl-4">
                <li>Enhanced search, discovery, and recommendation algorithms.</li>
                <li>Introduction of initial monetization features (e.g., tips or ads).</li>
                <li>Basic AI-powered tools (e.g., auto-tagging for streams).</li>
              </ul>
              <h3 className="text-xl font-medium mt-2 mb-1">Expansion:</h3>
              <ul className="list-disc list-inside space-y-1 pl-4">
                <li>Mobile applications for viewers and creators.</li>
                <li>Advanced AI features (e.g., content summarization, personalized feeds).</li>
                <li>Expanded monetization options and scalable infrastructure.</li>
              </ul>
               <div className="my-4 rounded-lg overflow-hidden shadow-md">
                <Image
                  src="https://picsum.photos/seed/about-roadmap/600/300"
                  alt="Future Roadmap Illustration"
                  width={600}
                  height={300}
                  className="w-full h-auto object-cover"
                  data-ai-hint="roadmap growth"
                />
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-semibold border-b pb-2 mb-3">Join Us</h2>
              <p>
                RUNINGA is more than just a platform; it's a growing community. We are committed to continuous improvement and innovation to provide the best possible experience for both content creators and viewers. Explore our streams, engage with content, and see what RUNINGA has to offer!
              </p>
            </section>
          </CardContent>
          <CardFooter className="flex justify-center">
             <Button variant="default" onClick={() => router.back()} aria-label="Go Back">
                <ArrowLeft className="mr-2 h-4 w-4" /> Go Back
              </Button>
          </CardFooter>
        </Card>
      </div>
    </main>
  );
}