"use client";

import Link from "next/link";
import ThemedLayout from "@/components/layouts/ThemedLayout";
import { useWallet } from "@/contexts/WalletContext";

export default function PresswirePage() {
  const { vault } = useWallet();

  const keyCount = vault.keys.length;
  const urgency =
    keyCount >= 10 ? "CODE BLACK" : keyCount >= 6 ? "ELEVATED" : keyCount >= 2 ? "MILD" : "NORMAL";

  const headlines = [
    "Local Man Discovers New Way To Lose Money (Again)",
    "CyberLux Denies Allegations Of Selling “Canned Wi‑Fi”",
    "Exclusive: The Left Sock Was Always Quantum",
    "Breaking: Cat Facts Leak Into Public Internet, Experts Concerned",
    "Authorities Confirm Trees Are “Very Online” Now",
  ];

  return (
    <ThemedLayout
      theme="editorial"
      siteTitle="CyberLux Presswire"
      siteSubtitle="Independent journalism sponsored by vibes and paranoia"
    >
      <section className="container mx-auto max-w-6xl px-4 py-12">
        <div className="text-center">
          <h1 className="text-4xl font-bold md:text-5xl">
            CYBERLUX <span className="theme-accent">PRESSWIRE</span>
          </h1>
          <p className="mx-auto mt-6 max-w-3xl text-xl opacity-90">
            Independent journalism sponsored by vibes, paranoia, and extremely clickable headlines.
          </p>
        </div>

        <div className="theme-card mt-12 rounded-3xl p-8 md:p-10">
          <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
            <div>
              <div className="text-xs opacity-70">rumor heat</div>
              <div className="text-3xl font-bold theme-accent">{urgency}</div>
              <div className="mt-2 text-sm opacity-80">
                Your Vault currently contains <span className="font-bold">{keyCount}</span> keys.
                The newsroom is reacting normally (untrue).
              </div>
            </div>
            <div className="flex flex-wrap gap-3">
              <Link
                href="/webring"
                className="theme-accent rounded-full border-2 border-current bg-current px-6 py-3 font-bold text-white hover:opacity-90"
              >
                Chase rumors in the webring →
              </Link>
              <Link
                href="/vault"
                className="theme-card rounded-full border-2 border-current px-6 py-3 font-bold"
              >
                View Vault
              </Link>
            </div>
          </div>

          <div className="mt-10 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
            {headlines.map((h) => (
              <div key={h} className="theme-card rounded-2xl p-6 transition-all hover:shadow-lg">
                <div className="text-xs opacity-70">breaking</div>
                <div className="mt-2 font-bold text-lg">{h}</div>
                <div className="mt-3 text-sm opacity-80">
                  Sources confirm this story is 80% dramatic tension and 20% an accidental CSS gradient.
                </div>
                <div className="mt-6 flex items-center justify-between">
                  <Link href="/market" className="theme-accent hover:underline">related: market</Link>
                  <Link href="/game" className="theme-accent hover:underline">related: profit sim</Link>
                </div>
              </div>
            ))}
          </div>

          <div className="theme-card mt-10 rounded-2xl p-6 text-sm opacity-80">
            Editorial note: this is parody. No real goods. No real crypto. But the trees are definitely real.
            For tree matters, consult the{" "}
            <Link className="theme-accent hover:underline" href="/trees">
              Trees Authority
            </Link>
            .
          </div>
        </div>
      </section>
    </ThemedLayout>
  );
}