import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Film, Music, Server, Users, Heart, Rocket } from "lucide-react"
import Image from "next/image"
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 via-background to-green-50" />
        <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>
              <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>
              <h1
                className="text-5xl font-black text-balance leading-tight md:text-6xl"
                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>

            {/* Comic Panel Grid with Photos */}
            <div className="grid md:grid-cols-3 gap-6 mb-12">
              {/* Panel 1 */}
              <div className="bg-card border-2 border-border rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden">
                <div className="relative aspect-square">
                  <Image src="/images/jeff-tea.jpg" alt="Having tea with nature" fill className="object-cover" />
                </div>
                <div className="p-4 space-y-2">
                  <p className="font-semibold text-sm text-muted-foreground">Build communities, not customer bases</p>
                </div>
              </div>

              {/* Panel 2 */}
              <div className="bg-card border-2 border-border rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden">
                <div className="relative aspect-square">
                  <Image
                    src="/images/jeff-blueberries.jpg"
                    alt="Seeing through the matrix"
                    fill
                    className="object-cover"
                  />
                </div>
                <div className="p-4 space-y-2">
                  <p className="font-semibold text-sm text-muted-foreground">See through artificial scarcity</p>
                </div>
              </div>

              {/* Panel 3 */}
              <div className="bg-card border-2 border-border rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden">
                <div className="relative aspect-square">
                  <Image src="/images/jeff-donkey.jpg" alt="Building bridges" fill className="object-cover" />
                </div>
                <div className="p-4 space-y-2">
                  <p className="font-semibold text-sm text-muted-foreground">Infrastructure scales with solidarity</p>
                </div>
              </div>
            </div>

            {/* Action Buttons */}
            <div className="text-center space-y-4">
              <p className="text-lg font-medium text-muted-foreground">
                Need a place to start? Try these servers (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" variant="default">
                  <a href="https://movies.jeffemmett.com">
                    <Film className="mr-2 h-5 w-5" />
                    Movies Server
                  </a>
                </Button>
                <Button asChild size="lg" className="text-lg px-8 py-6 font-bold bg-transparent" variant="outline">
                  <a href="https://music.jeffemmett.com">
                    <Music className="mr-2 h-5 w-5" />
                    Music Server
                  </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">
              <h2 className="text-4xl md:text-5xl font-black text-balance mb-4">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>
        </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">
              <h2 className="text-4xl md:text-5xl font-black text-balance">Beyond Digital Feudalism</h2>
              <div className="flex justify-center py-4">
                <JefflixLogo />
              </div>
              <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-2xl font-bold mb-3">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-2xl font-bold mb-3">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-2xl font-bold mb-3">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-4xl md:text-5xl font-black text-balance">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">
                <a href="https://movies.jeffemmett.com">
                  <Film className="mr-2 h-5 w-5" />
                  Try Movies
                </a>
              </Button>
              <Button asChild size="lg" variant="outline" className="text-lg px-8 py-6 font-bold bg-transparent">
                <a href="https://music.jeffemmett.com">
                  <Music className="mr-2 h-5 w-5" />
                  Try 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>

      {/* 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" />
            <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>
  )
}