import Navbar from "@/components/Navbar";
import Hero from "@/components/Hero";
import ProductCard from "@/components/ProductCard";
import ParticleBackground from "@/components/ParticleBackground";
import EncryptionDemo from "@/components/EncryptionDemo";
import ForumBoard from "@/components/ForumBoard";
import AccountCreation from "@/components/AccountCreation";
import ChatWidget from "@/components/ChatWidget";
import Link from "next/link";
import {
  SHOP_PRODUCT_COUNT,
  featuredShopProducts,
  resolveProductImage,
  shopCategoryCounts,
} from "@/lib/shopCatalog";
import { SHOP_SELLER_COUNT, getSellerById } from "@/lib/shopSellers";

export default function Home() {
  const categories = shopCategoryCounts();

  return (
    <>
      <ParticleBackground />
      <Navbar />
      <Hero />
      
      {/* Featured Products */}
      <section id="featured" className="container mx-auto max-w-6xl scroll-mt-24 px-4 py-20">
        <div className="mb-12 flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
          <div className="max-w-xl">
            <p className="mb-2 font-mono text-[10px] uppercase tracking-[0.35em] text-neon-cyan/70">spotlight</p>
            <h2 className="font-orbitron text-3xl font-bold md:text-4xl">ARCANE ARTIFACTS</h2>
            <p className="mt-3 text-foreground/60">
              Conjured relics from <strong className="text-neon-cyan">{SHOP_PRODUCT_COUNT}</strong> in-stock tomes ·{" "}
              <Link href="/vendors" className="text-neon-purple underline hover:text-neon-cyan">
                {SHOP_SELLER_COUNT} alchemist guilds
              </Link>
              . Verify runic signatures on the astral mirror list before your first blood pact.
            </p>
          </div>
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
            <Link
              href="#categories"
              className="glass rounded-full px-6 py-3 text-center text-sm font-medium transition-colors hover:border-neon-cyan/40"
            >
              Jump to categories
            </Link>
            <Link
              href="/market"
              className="rounded-full bg-gradient-to-r from-neon-cyan to-neon-purple px-6 py-3 text-center text-sm font-bold text-background"
            >
              VIEW ALL {SHOP_PRODUCT_COUNT} SKUS
            </Link>
          </div>
        </div>
        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {featuredShopProducts(8).map((p) => {
            const v = getSellerById(p.sellerId)!;
            return (
              <ProductCard
                key={p.id}
                shopProduct={p}
                id={p.id}
                name={p.name}
                description={p.description}
                price={p.price}
                currency={p.currency}
                category={p.category}
                imageUrl={resolveProductImage(p)}
                limited={p.limited}
                glowColor={p.glowColor}
                sellerHandle={v.handle}
                sellerSlug={v.slug}
              />
            );
          })}
        </div>
      </section>

      {/* Category Themes */}
      <section id="categories" className="container mx-auto max-w-6xl px-4 py-20 scroll-mt-24">
        <p className="mb-2 text-center font-mono text-[10px] uppercase tracking-[0.35em] text-neon-purple/70">summon</p>
        <h2 className="mb-10 text-center font-orbitron text-3xl font-bold md:text-4xl">SCHOOLS OF MAGIC</h2>
        <div className="grid grid-cols-2 gap-6 md:grid-cols-5">
          {categories.map((cat) => (
            <Link
              key={cat.name}
              href={`/market?category=${encodeURIComponent(cat.name)}`}
              className="glass group relative block overflow-hidden rounded-2xl border border-white/10 p-6 text-center backdrop-blur-sm transition-all hover:scale-105 hover:border-neon-cyan"
            >
              <div className="mb-4 text-4xl">{cat.icon}</div>
              <h3 className="mb-2 font-bold">{cat.name}</h3>
              <div className="text-sm text-foreground/50">{cat.count} items</div>
              <div className="absolute -inset-1 -z-10 bg-gradient-to-br from-neon-cyan/0 to-neon-purple/0 opacity-0 transition-opacity group-hover:opacity-20"></div>
            </Link>
          ))}
        </div>
      </section>

      {/* Vault Feature */}
      <section id="vault" className="container mx-auto max-w-6xl px-4 py-20">
        <div className="glass overflow-hidden rounded-3xl border border-white/10 p-10 md:p-16">
          <div className="grid items-center gap-10 md:grid-cols-2">
            <div>
              <h2 className="font-orbitron text-4xl font-bold">THE GRIMOIRE</h2>
              <p className="my-6 text-xl text-foreground/80">
                A secure, enchanted space for initiated warlocks. Store spectral receipts, unlock dark rewards, and access forbidden spells.
              </p>
              <Link href="/vault" className="rounded-full bg-gradient-to-r from-neon-green to-neon-cyan px-8 py-4 font-bold text-background inline-block">
                OPEN YOUR GRIMOIRE
              </Link>
            </div>
            <div className="relative">
              <div className="absolute -inset-4 rounded-3xl bg-gradient-to-r from-neon-green/20 to-neon-cyan/20 blur-3xl"></div>
              <div className="relative rounded-2xl border border-neon-green/30 bg-black/50 p-8">
                <div className="font-orbitron text-2xl font-bold text-neon-green">VAULT STATUS: ACTIVE</div>
                <div className="my-4 h-2 rounded-full bg-white/10">
                  <div className="h-full w-3/4 rounded-full bg-gradient-to-r from-neon-green to-neon-cyan"></div>
                </div>
                <div className="text-sm text-foreground/60">Encryption level: Quantum‑256</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Encryption Demo */}
      <section id="encryption" className="container mx-auto max-w-6xl px-4 py-20">
        <div className="mb-12 text-center">
          <h2 className="font-orbitron text-4xl font-bold">ENCRYPTION SUITE</h2>
          <p className="mx-auto mt-4 max-w-2xl text-foreground/70">
            Experience the power of client‑side encryption. Your data stays yours.
          </p>
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          <EncryptionDemo />
          <div className="glass rounded-2xl border border-white/10 p-8">
            <h3 className="mb-6 font-orbitron text-2xl font-bold">HOW IT ACTUALLY WORKS</h3>
            <ul className="space-y-6">
              <li className="flex items-start gap-4">
                <div className="text-2xl">🔑</div>
                <div>
                  <div className="font-bold">Client-side account store</div>
                  <div className="text-sm text-foreground/60">Passwords are hashed in-browser. No plaintext ever sent to a server. Accounts live in your localStorage.</div>
                </div>
              </li>
              <li className="flex items-start gap-4">
                <div className="text-2xl">₿</div>
                <div>
                  <div className="font-bold">Bitcoin on-chain verify</div>
                  <div className="text-sm text-foreground/60">Deposits verified against mempool.space. USD credit applied at CoinGecko spot rate after 1 confirmation.</div>
                </div>
              </li>
              <li className="flex items-start gap-4">
                <div className="text-2xl">🧅</div>
                <div>
                  <div className="font-bold">Tor-deployable architecture</div>
                  <div className="text-sm text-foreground/60">Each .onion is a separate Nginx virtual host looped to the same Next.js process. Documented in DEPLOY.md.</div>
                </div>
              </li>
              <li className="flex items-start gap-4">
                <div className="text-2xl">📦</div>
                <div>
                  <div className="font-bold">Portable identity bundle</div>
                  <div className="text-sm text-foreground/60">Export your account from /dashboard to carry your handle and vault across .onion deployments.</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </section>

      <section className="container mx-auto max-w-6xl px-4 py-12">
        <div className="glass rounded-3xl border border-neon-cyan/25 p-8 md:p-10">
          <h2 className="font-orbitron text-2xl font-bold md:text-3xl">
            Multi‑onion <span className="text-neon-cyan">network</span>
          </h2>
          <p className="mt-3 max-w-3xl text-foreground/75">
            CyberLux runs as a federated ring: this host is the <strong>primary cart</strong>; companion onions
            expose <strong>forums</strong>, <strong>classifieds</strong>, and <strong>wiki</strong> entry points.
            Wallet and checkout stay reachable from every mirror — always confirm the hostname against the
            latest signed canary before you fund a session.
          </p>
          <div className="mt-6 flex flex-wrap gap-4">
            <Link
              href="/forum"
              className="rounded-full border border-neon-cyan bg-neon-cyan/10 px-6 py-2 text-sm font-bold text-neon-cyan hover:bg-neon-cyan/20"
            >
              Forum platform →
            </Link>
            <Link
              href="/chatter"
              className="rounded-full border border-neon-purple/40 bg-neon-purple/10 px-6 py-2 text-sm font-bold text-neon-purple hover:bg-neon-purple/20"
            >
              Hub chatter archive →
            </Link>
            <Link
              href="/exchange"
              className="rounded-full border border-neon-green bg-neon-green/10 px-6 py-2 text-sm font-bold text-neon-green hover:bg-neon-green/20"
            >
              Buy / sell exchange →
            </Link>
            <Link
              href="/barter"
              className="rounded-full border border-emerald-500/50 bg-emerald-500/10 px-6 py-2 text-sm font-bold text-emerald-400 hover:bg-emerald-500/20"
            >
              Ash Pit barter floor →
            </Link>
            <Link
              href="/search"
              className="rounded-full border border-[#00ff41]/40 bg-[#00ff41]/10 px-6 py-2 text-sm font-bold text-[#7af598] hover:bg-[#00ff41]/20"
            >
              Void crawler (internal search) →
            </Link>
            <Link
              href="/hidden-wiki"
              className="rounded-full border border-[#3d5a80]/50 bg-[#1a2740]/40 px-6 py-2 text-sm font-bold text-[#7eb8ff] hover:border-[#5b8def]/60"
            >
              Hidden wiki →
            </Link>
            <Link
              href="/market"
              className="rounded-full border border-white/20 px-6 py-2 text-sm font-medium hover:border-neon-purple/50"
            >
              Candy market →
            </Link>
          </div>
          <p className="mt-6 text-xs text-foreground/45">
            New relay keys publish weekly. Cross-check <code className="rounded bg-white/10 px-1">sha256</code>{" "}
            fingerprints on the vendor PGP bundle — impostor front domains are common this season.
          </p>
        </div>
      </section>

      {/* Forum */}
      <section id="forum" className="container mx-auto max-w-6xl px-4 py-20">
        <ForumBoard />
      </section>

      {/* Account Creation */}
      <section id="account" className="container mx-auto max-w-6xl px-4 py-20">
        <AccountCreation />
      </section>

      {/* Encrypted Chat */}
      <section id="chat" className="container mx-auto max-w-6xl px-4 py-20">
        <ChatWidget />
      </section>


      {/* Footer */}
      <footer className="glass border-t border-white/10 px-4 py-12">
        <div className="container mx-auto max-w-6xl">
          <div className="grid grid-cols-1 gap-10 md:grid-cols-4">
            <div>
              <div className="mb-4 flex items-center gap-3">
                <div className="h-10 w-10 rounded-full bg-gradient-to-br from-neon-cyan to-neon-purple"></div>
                <div className="font-orbitron text-2xl font-bold">EldritchWeave</div>
              </div>
              <p className="text-foreground/60">
                A first‑of‑its‑kind dark magic hacker gathering.
              </p>
            </div>
            <div>
              <h3 className="mb-4 font-bold">EXPLORE</h3>
              <ul className="space-y-2 text-foreground/60">
                <li><Link href="/market" className="hover:text-neon-cyan">Market</Link></li>
                <li><Link href="/vendors" className="hover:text-neon-cyan">Vendor hall</Link></li>
                <li><Link href="/checkout" className="hover:text-neon-cyan">Checkout</Link></li>
                <li><Link href="/forum" className="hover:text-neon-cyan">Forum</Link></li>
                <li><Link href="/sanctuary" className="hover:text-neon-cyan">Sanctuary</Link></li>
                <li><Link href="/drops" className="hover:text-neon-cyan">Limited Drops</Link></li>
              </ul>
            </div>
            <div>
              <h3 className="mb-4 font-bold">TECHNOLOGY</h3>
              <ul className="space-y-2 text-foreground/60">
                <li><Link href="/checkout" className="hover:text-neon-cyan">Settlement &amp; verify</Link></li>
                <li><Link href="/vault" className="hover:text-neon-cyan">Vault &amp; keys</Link></li>
                <li><Link href="/trust" className="hover:text-neon-cyan">Trust metrics</Link></li>
                <li><Link href="/security-analysis" className="hover:text-neon-cyan">Security analysis</Link></li>
              </ul>
            </div>
            <div>
              <h3 className="mb-4 font-bold">CONTACT</h3>
              <p className="text-foreground/60">
                Encrypted messaging only.
                <br />
                <Link href="/support" className="text-neon-cyan hover:underline">Support / offering</Link>
              </p>
              <div className="mt-6 flex gap-3">
                <Link href="/messages" className="rounded-full bg-white/5 p-3 hover:bg-white/10" title="Messages">💬</Link>
                <Link href="/account/add-funds" className="rounded-full bg-white/5 p-3 hover:bg-white/10" title="Add Funds">₿</Link>
                <Link href="/vault" className="rounded-full bg-white/5 p-3 hover:bg-white/10" title="Vault">🔒</Link>
              </div>
            </div>
          </div>
          <div className="mt-12 border-t border-white/10 pt-8 text-center text-sm text-foreground/45">
            <p>© 2026 EldritchWeave · Runic-signed mirrors · Blood pact mandatory for new summoners</p>
            <p className="mt-2 text-foreground/35">
              Finalize only after delivery. Report impostor realms with signed proof. Spells are user-generated — verify before you pay.
            </p>
          </div>
        </div>
      </footer>
    </>
  );
}