import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Film, Music, Server, Users, Heart, Rocket, Tv, Home, FolderGitIcon as SolidarityFistIcon, HandHeart, Landmark, Palette } from "lucide-react"
import { JefflixLogo } from "@/components/jefflix-logo"

export default function JefflixPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Hero Section */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-yellow-50/80 via-background/90 to-green-50/80" />
        <div
          className="absolute inset-0 opacity-30"
          style={{
            backgroundImage:
              "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.02) 2px, rgba(0,0,0,.02) 4px)",
          }}
        />
        <div className="relative container mx-auto px-4 py-12 md:py-20">
          <div className="max-w-6xl mx-auto">
            {/* Comic Panel Header */}
            <div className="text-center space-y-6 mb-12">
              <div className="mb-4">
                <JefflixLogo />
              </div>
              <h1
                className="text-3xl font-black text-balance leading-tight md:text-4xl font-marker"
                style={{
                  textShadow: "3px 3px 0px rgba(0,0,0,0.1)",
                  color: "hsl(var(--foreground))",
                }}
              >
                Seizing the Streams of Production :P
              </h1>
              <div className="relative inline-block max-w-3xl">
                <p className="text-xl md:text-2xl font-medium leading-relaxed text-muted-foreground">
                  Self-hosted media servers aren't just for tech nerds anymore. They're infrastructure for digital
                  solidarity—scalable to groups, communities, and organizations of any size. Break down the fortress
                  walls of digital feudalism, one server at a time.
                </p>
              </div>
            </div>

            {/* Action Buttons */}
            <div className="text-center space-y-4">
              <p className="text-lg font-medium text-muted-foreground">Try it out on Jefflix (or build your own!)</p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
                <Button
                  asChild
                  size="lg"
                  className="text-lg px-8 py-6 font-bold bg-red-600 hover:bg-red-700 text-white"
                  variant="default"
                >
                  <a href="https://movies.jefflix.lol">
                    <Film className="mr-2 h-5 w-5" />
                    Movies
                  </a>
                </Button>
                <Button
                  asChild
                  size="lg"
                  className="text-lg px-8 py-6 font-bold bg-blue-600 hover:bg-blue-700 text-white"
                  variant="default"
                >
                  <a href="https://shows.jefflix.lol">
                    <Tv className="mr-2 h-5 w-5" />
                    Shows
                  </a>
                </Button>
                <Button
                  asChild
                  size="lg"
                  className="text-lg px-8 py-6 font-bold bg-green-600 hover:bg-green-700 text-white"
                  variant="outline"
                >
                  <a href="https://music.jefflix.lol">
                    <Music className="mr-2 h-5 w-5" />
                    Music
                  </a>
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Self-Hosting Empowerment Section */}
      <section className="border-y border-border bg-muted/30">
        <div className="container mx-auto px-4 py-16 md:py-24">
          <div className="max-w-5xl mx-auto">
            <div className="text-center mb-12">
              <div className="inline-block p-6 bg-primary/10 rounded-full mb-6">
                <Home className="h-12 w-12 text-primary" strokeWidth={2.5} />
              </div>
              <h2 className="text-3xl md:text-3xl font-black text-balance mb-4 font-marker">Why Self-Host?</h2>
              <p className="text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
                Technology promised abundance, but corporations chose artificial scarcity. Let's build the alternative.
              </p>
            </div>

            <div className="grid md:grid-cols-3 gap-8">
              <div className="bg-card p-8 rounded-lg border-2 border-border shadow-sm hover:shadow-md transition-shadow">
                <div className="flex flex-col items-center text-center space-y-4">
                  <div className="p-4 bg-green-100 dark:bg-green-900/30 rounded-full">
                    <Server className="h-8 w-8 text-green-600 dark:text-green-400" strokeWidth={2.5} />
                  </div>
                  <h3 className="text-xl font-bold">Own Your Infrastructure</h3>
                  <p className="text-muted-foreground leading-relaxed">
                    No remote kill switches. No disappearing content. Your data, your rules, your timeline.
                  </p>
                </div>
              </div>

              <div className="bg-card p-8 rounded-lg border-2 border-border shadow-sm hover:shadow-md transition-shadow">
                <div className="flex flex-col items-center text-center space-y-4">
                  <div className="p-4 bg-blue-100 dark:bg-blue-900/30 rounded-full">
                    <Users className="h-8 w-8 text-blue-600 dark:text-blue-400" strokeWidth={2.5} />
                  </div>
                  <h3 className="text-xl font-bold">Scale with Community</h3>
                  <p className="text-muted-foreground leading-relaxed">
                    Start small, grow with your network. From friend groups to organizations—the infrastructure adapts.
                  </p>
                </div>
              </div>

              <div className="bg-card p-8 rounded-lg border-2 border-border shadow-sm hover:shadow-md transition-shadow">
                <div className="flex flex-col items-center text-center space-y-4">
                  <div className="p-4 bg-purple-100 dark:bg-purple-900/30 rounded-full">
                    <Heart className="h-8 w-8 text-purple-600 dark:text-purple-400" strokeWidth={2.5} />
                  </div>
                  <h3 className="text-xl font-bold">Digital Mutual Aid</h3>
                  <p className="text-muted-foreground leading-relaxed">
                    Sharing isn't piracy—it's solidarity. Build movements, not monopolies.
                  </p>
                </div>
              </div>
            </div>

            <div className="flex justify-center mt-12">
              <Badge className="bg-green-600 text-white text-lg px-4 py-2 font-bold border-2 border-green-800 shadow-md">
                An Experiment in Digital Solidarity
              </Badge>
            </div>
          </div>
        </div>
      </section>

      {/* Resistance Section */}
      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto space-y-12">
            <div className="text-center space-y-4">
              <div className="inline-block p-6 bg-primary/10 rounded-full mb-2">
                <SolidarityFistIcon className="h-12 w-12 text-primary" />
              </div>
              <h2 className="text-3xl md:text-3xl font-black text-balance font-marker">Beyond Digital Feudalism</h2>
              <p className="text-xl text-muted-foreground leading-relaxed">
                Streaming platforms aren't just bad business—they're architecture for extraction.
              </p>
            </div>

            <div className="space-y-6">
              <div className="bg-card p-8 rounded-lg border-l-4 border-l-red-500 shadow-sm">
                <h3 className="text-xl font-bold mb-3 font-marker">They Don't Own What They Sell</h3>
                <p className="text-muted-foreground text-lg leading-relaxed">
                  Content rotates based on licensing deals, not user needs. You're not buying access—you're renting
                  temporary gates to shifting catalogs.
                </p>
              </div>

              <div className="bg-card p-8 rounded-lg border-l-4 border-l-blue-500 shadow-sm">
                <h3 className="text-xl font-bold mb-3 font-marker">Subscription Fatigue is Designed</h3>
                <p className="text-muted-foreground text-lg leading-relaxed">
                  The "streaming wars" recreated cable monopolies with extra steps. Fragmentation isn't a bug—it's the
                  business model.
                </p>
              </div>

              <div className="bg-card p-8 rounded-lg border-l-4 border-l-green-500 shadow-sm">
                <h3 className="text-xl font-bold mb-3 font-marker">Technology Enables Abundance</h3>
                <p className="text-muted-foreground text-lg leading-relaxed">
                  Digital goods cost nothing to copy, but everything to gate. Self-hosting is how we build
                  infrastructure for sharing, starting with media.
                </p>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* Empowerment-Focused CTA */}
      <section className="py-16 md:py-24 bg-gradient-to-b from-green-50 to-blue-50 dark:from-green-950/20 dark:to-blue-950/20">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center space-y-8">
            <div className="space-y-6">
              <div className="inline-block p-6 bg-primary/10 rounded-full">
                <Rocket className="h-12 w-12 text-primary" strokeWidth={2.5} />
              </div>
              <h2 className="text-3xl md:text-3xl font-black text-balance font-marker">Start Your Own Server</h2>
              <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
                Tools like Jellyfin make self-hosting accessible. Start with your own library, share with friends, scale
                to your community. Or use mine while you figure it out—that's the point.
              </p>
            </div>
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-6">
              <Button asChild size="lg" className="text-lg px-8 py-6 font-bold bg-red-600 hover:bg-red-700 text-white">
                <a href="https://movies.jefflix.lol">
                  <Film className="mr-2 h-5 w-5" />
                  Movies
                </a>
              </Button>
              <Button
                asChild
                size="lg"
                className="text-lg px-8 py-6 font-bold bg-blue-600 hover:bg-blue-700 text-white"
              >
                <a href="https://shows.jefflix.lol">
                  <Tv className="mr-2 h-5 w-5" />
                  Shows
                </a>
              </Button>
              <Button
                asChild
                size="lg"
                className="text-lg px-8 py-6 font-bold bg-green-600 hover:bg-green-700 text-white"
              >
                <a href="https://music.jefflix.lol">
                  <Music className="mr-2 h-5 w-5" />
                  Music
                </a>
              </Button>
            </div>
            <p className="text-sm text-muted-foreground pt-4">
              Or learn how to set up your own Jellyfin server and join the movement
            </p>
          </div>
        </div>
      </section>

      {/* Support Real Artists Section */}
      <section className="py-16 md:py-24 border-t border-border">
        <div className="container mx-auto px-4">
          <div className="max-w-5xl mx-auto">
            <div className="text-center mb-12">
              <div className="inline-block p-6 bg-yellow-100 dark:bg-yellow-900/30 rounded-full mb-6">
                <HandHeart className="h-12 w-12 text-yellow-600 dark:text-yellow-400" strokeWidth={2.5} />
              </div>
              <h2 className="text-3xl md:text-3xl font-black text-balance mb-4 font-marker">Redirect Your Subscriptions</h2>
              <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
                Your streaming dollars mostly feed corporate executives and shareholders—not the artists creating the work you love.
                Cancel the middlemen. Support creators directly.
              </p>
            </div>

            <div className="grid md:grid-cols-3 gap-8 mb-12">
              <div className="bg-card p-8 rounded-lg border-2 border-border shadow-sm hover:shadow-md transition-shadow">
                <div className="flex flex-col items-center text-center space-y-4">
                  <div className="p-4 bg-orange-100 dark:bg-orange-900/30 rounded-full">
                    <Landmark className="h-8 w-8 text-orange-600 dark:text-orange-400" strokeWidth={2.5} />
                  </div>
                  <h3 className="text-xl font-bold">Filmworkers Unions</h3>
                  <p className="text-muted-foreground leading-relaxed">
                    Support strike funds, mutual aid networks, and worker-owned cooperatives fighting for fair wages in Hollywood and beyond.
                  </p>
                </div>
              </div>

              <div className="bg-card p-8 rounded-lg border-2 border-border shadow-sm hover:shadow-md transition-shadow">
                <div className="flex flex-col items-center text-center space-y-4">
                  <div className="p-4 bg-pink-100 dark:bg-pink-900/30 rounded-full">
                    <Palette className="h-8 w-8 text-pink-600 dark:text-pink-400" strokeWidth={2.5} />
                  </div>
                  <h3 className="text-xl font-bold">Local Arts Funds</h3>
                  <p className="text-muted-foreground leading-relaxed">
                    Fund artists in your community creating real work—theaters, galleries, independent filmmakers, and musicians who need it most.
                  </p>
                </div>
              </div>

              <div className="bg-card p-8 rounded-lg border-2 border-border shadow-sm hover:shadow-md transition-shadow">
                <div className="flex flex-col items-center text-center space-y-4">
                  <div className="p-4 bg-red-100 dark:bg-red-900/30 rounded-full">
                    <Heart className="h-8 w-8 text-red-600 dark:text-red-400" strokeWidth={2.5} />
                  </div>
                  <h3 className="text-xl font-bold">Direct to Artists</h3>
                  <p className="text-muted-foreground leading-relaxed">
                    Patreon, Bandcamp, Ko-fi, or just Venmo your favorite indie creators. Cut out the platform rent-seekers entirely.
                  </p>
                </div>
              </div>
            </div>

            <div className="bg-muted/50 p-8 rounded-lg border-2 border-border">
              <div className="max-w-3xl mx-auto text-center space-y-4">
                <p className="text-lg text-muted-foreground leading-relaxed">
                  <span className="font-bold text-foreground">The math is simple:</span> A single Netflix subscription costs ~$15/month.
                  That's $180/year going to a corporation that pays artists pennies per stream, cancels beloved shows for tax write-offs,
                  and fights against fair labor practices.
                </p>
                <p className="text-lg text-muted-foreground leading-relaxed">
                  Imagine if that money went directly to your local theater company, a struggling musician's Patreon,
                  or the SAG-AFTRA Foundation instead. <span className="font-bold text-foreground">Real solidarity means real redistribution.</span>
                </p>
                <p className="text-lg font-medium text-foreground pt-4">
                  Stop feeding extractive corporate gatekeepers. Fund the people actually making art.
                </p>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-border bg-muted/50">
        <div className="container mx-auto px-4 py-12">
          <div className="max-w-4xl mx-auto text-center space-y-4">
            <JefflixLogo className="justify-center" size="small" />
            <p className="text-muted-foreground leading-relaxed max-w-2xl mx-auto">
              Powered by Jellyfin. Built on solidarity. Infrastructure for the sharing economy—starting digitally.
            </p>
            <div className="pt-4 text-sm text-muted-foreground">
              © 2025 • Support artists • Build movements • Question everything
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}