import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ScrollArea } from "@/components/ui/scroll-area";

export default function TNOUSAWebsite() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-black via-blue-950 to-black text-white p-4 font-mono">
      <header className="text-center mb-6">
        <h1 className="text-4xl font-bold">United States of America</h1>
        <p className="text-lg text-neutral-400">The New Order: Last Days of America</p>
      </header>

      <Tabs defaultValue="info" className="w-full max-w-5xl mx-auto">
        <TabsList className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-2 bg-blue-900 rounded-xl p-1">
          <TabsTrigger value="info" className="data-[state=active]:bg-blue-700 data-[state=active]:text-white rounded-md">Information</TabsTrigger>
          <TabsTrigger value="ofn" className="data-[state=active]:bg-blue-700 data-[state=active]:text-white rounded-md">OFN</TabsTrigger>
          <TabsTrigger value="allies" className="data-[state=active]:bg-blue-700 data-[state=active]:text-white rounded-md">Allies</TabsTrigger>
          <TabsTrigger value="military" className="data-[state=active]:bg-blue-700 data-[state=active]:text-white rounded-md">Military</TabsTrigger>
          <TabsTrigger value="government" className="data-[state=active]:bg-blue-700 data-[state=active]:text-white rounded-md">Government</TabsTrigger>
          <TabsTrigger value="elections" className="data-[state=active]:bg-blue-700 data-[state=active]:text-white rounded-md">Elections</TabsTrigger>
          <TabsTrigger value="economy" className="data-[state=active]:bg-blue-700 data-[state=active]:text-white rounded-md">Economy</TabsTrigger>
          <TabsTrigger value="crisis" className="data-[state=active]:bg-blue-700 data-[state=active]:text-white rounded-md">National Crisis</TabsTrigger>
        </TabsList>

        <TabsContent value="info">
          <Card className="bg-blue-950 border border-blue-800">
            <CardContent className="p-4">
              <ScrollArea className="h-96 pr-4">
                <p className="text-neutral-300">
                  The United States of America, once the leader of the free world, now lies divided,
                  weakened by internal strife and foreign threats. Following the Axis victory in the
                  Second World War, America struggles to maintain its grip on democracy, facing both
                  ideological and existential threats.
                </p>
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="ofn">
          <Card className="bg-blue-950 border border-blue-800">
            <CardContent className="p-4">
              <p className="text-neutral-300">
                The Organization of Free Nations (OFN) is America's last stand against totalitarianism.
                A fragile alliance of democracies resisting the global tide of fascism and chaos.
              </p>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="allies">
          <Card className="bg-blue-950 border border-blue-800">
            <CardContent className="p-4">
              <ul className="list-disc list-inside text-neutral-300">
                <li>Canada</li>
                <li>United Kingdom-in-Exile</li>
                <li>Japan (post-democratization)</li>
                <li>Brazil</li>
                <li>Australia</li>
              </ul>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="military">
          <Card className="bg-blue-950 border border-blue-800">
            <CardContent className="p-4">
              <p className="text-neutral-300">
                America's military remains potent, though overstretched. It relies on elite divisions,
                experimental technologies, and strategic air power to maintain global presence.
              </p>
              <ul className="list-disc list-inside text-neutral-400 mt-2">
                <li>Army: 12 Active Divisions</li>
                <li>Navy: 5 Carrier Groups</li>
                <li>Air Force: Strategic Bombers and Jet Interceptors</li>
              </ul>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="government">
          <Card className="bg-blue-950 border border-blue-800">
            <CardContent className="p-4">
              <p className="text-neutral-300">
                A fragile democratic republic teetering on the edge. Infighting among parties, corruption,
                and pressure from extremist groups has severely undermined federal authority.
              </p>
              <p className="text-neutral-400 mt-2">
                President: Richard Nixon (Republican)<br />
                Vice President: Nelson Rockefeller<br />
                Congress: Split, high partisan gridlock
              </p>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="elections">
          <Card className="bg-blue-950 border border-blue-800">
            <CardContent className="p-4">
              <p className="text-neutral-300">
                The upcoming elections could determine the very survival of American democracy.
                Radical parties gain ground while moderates struggle to unite.
              </p>
              <ul className="list-disc list-inside text-neutral-400 mt-2">
                <li>Republican Party (Status Quo / Anti-Fascist)</li>
                <li>Democratic Reform Bloc (Progressive)</li>
                <li>National Vanguard (Far-Right)</li>
                <li>Liberty League (Libertarian)</li>
              </ul>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="economy">
          <Card className="bg-blue-950 border border-blue-800">
            <CardContent className="p-4">
              <p className="text-neutral-300">
                America’s economy is still formidable, but marred by inequality, corporate overreach,
                and infrastructure decay. The Rust Belt continues to decline while coastal cities flourish.
              </p>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="crisis">
          <Card className="bg-blue-950 border border-blue-800">
            <CardContent className="p-4">
              <p className="text-neutral-300">
                The American Crisis is not just political or economic — it is existential. The people are
                losing faith in democracy. Violence simmers in the streets. The question looms: can the
                Union survive?
              </p>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}