"use client";

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

export default function TreesAuthorityPage() {
  const { vault } = useWallet();
  const keyCount = vault.keys.length;

  return (
    <ThemedLayout
      theme="nature"
      siteTitle="Trees Authority"
      siteSubtitle="We regulate trees. We certify bark."
    >
      <section className="container mx-auto max-w-5xl px-4 py-12">
        <div className="theme-card rounded-3xl p-10 md:p-14">
          <div className="text-center">
            <div className="text-xs opacity-70">official government website</div>
            <h1 className="text-4xl font-bold md:text-5xl theme-accent">
              TREES AUTHORITY
            </h1>
            <p className="mx-auto mt-6 max-w-3xl text-xl opacity-90">
              We regulate trees. We certify bark. We prosecute counterfeit leaves.
            </p>
          </div>

          <div className="mt-12 grid grid-cols-1 gap-6 md:grid-cols-2">
            <div className="theme-card rounded-2xl p-6">
              <div className="font-bold mb-2">Tree News</div>
              <ul className="space-y-3 text-foreground/70 text-sm">
                <li>- Birch denies involvement in the “Canned Wi‑Fi” scandal.</li>
                <li>- Oak lobby demands mandatory encryption for acorns.</li>
                <li>- Pine confirms needles are “opt-in telemetry.”</li>
                <li>- Maple syrup now classified as a controlled substance (by vibes).</li>
              </ul>
              <div className="mt-4 text-xs opacity-70">
                Public service notice: trees are innocent until proven leafy.
              </div>
            </div>

            <div className="theme-card rounded-2xl p-6">
              <div className="font-bold mb-2">Verified Working Site</div>
              <div className="text-sm opacity-90">
                We certify that CyberLux is a working website. Not morally. Technically.
              </div>
              <div className="theme-card mt-4 rounded-xl p-4 text-sm opacity-90">
                Current investigator notes: You have <span className="font-bold">{keyCount}</span> keys in
                your Vault. This is either progress or a cry for help.
              </div>
              <div className="mt-6 flex flex-wrap gap-3">
                <Link
                  href="/"
                  className="theme-accent rounded-full border-2 border-current bg-current px-6 py-3 font-bold text-white hover:opacity-90"
                >
                  Visit CyberLux →
                </Link>
                <Link
                  href="/w/trees"
                  className="theme-card rounded-full border-2 border-current px-6 py-3 font-bold"
                >
                  Read the Trees microsite
                </Link>
              </div>
            </div>
          </div>

          <div className="mt-12 text-center">
            <Link href="/presswire" className="theme-accent hover:underline">
              for scandals, consult Presswire →
            </Link>
          </div>

          <WebringBadge storeHref="/" />
        </div>
      </section>
    </ThemedLayout>
  );
}