const steps = [
  ["01", "Open Discord", "Run /register or /account in the community server."],
  ["02", "Link your account", "Use the private, one-time link sent by the bot."],
  ["03", "Join the server", "Add your Java account and connect once approved."],
] as const;

export default async function HomePage({
  searchParams,
}: {
  searchParams: Promise<{ portal?: string }>;
}) {
  const { portal } = await searchParams;
  const inviteUrl = process.env.DISCORD_INVITE_URL?.trim();
  const guildId = process.env.DISCORD_GUILD_ID?.trim();

  return (
    <main className="relative min-h-screen overflow-hidden bg-canvas text-ink">
      <div className="terrain" aria-hidden="true" />
      <div className="relative mx-auto flex min-h-screen max-w-7xl flex-col px-6 pb-10 pt-7 sm:px-10 lg:px-16">
        <header className="flex items-center justify-between border-b border-line pb-5">
          <a className="flex items-center gap-3" href="#top" aria-label="Blocklist home">
            <span className="grid size-9 place-items-center border border-accent bg-accent text-sm font-black text-canvas shadow-[4px_4px_0_var(--color-shadow)]">
              B
            </span>
            <span className="font-display text-sm font-bold uppercase tracking-[0.22em]">Blocklist</span>
          </a>
          <span className="hidden items-center gap-2 font-mono text-xs uppercase tracking-widest text-muted sm:flex">
            <span className="size-2 bg-signal shadow-[0_0_12px_var(--color-signal)]" />
            Registration online
          </span>
        </header>

        {portal && (
          <div className="mt-8 border border-accent bg-panel px-5 py-4 font-mono text-xs leading-6 shadow-[5px_5px_0_var(--color-accent)]">
            The account portal starts in Discord. Join the server, then run <strong>/register</strong> or <strong>/account</strong> to receive your private sign-in link.
          </div>
        )}

        <section id="top" className="grid flex-1 items-center gap-14 py-20 lg:grid-cols-[1.15fr_0.85fr] lg:py-24">
          <div>
            <p className="mb-7 font-mono text-xs font-semibold uppercase tracking-[0.3em] text-accent">
              Discord → Java Edition
            </p>
            <h1 className="max-w-4xl font-display text-6xl font-black uppercase leading-[0.86] tracking-[-0.07em] sm:text-8xl lg:text-[7.5rem]">
              Your name.
              <span className="block text-outline">Your blocks.</span>
              One account.
            </h1>
            <p className="mt-9 max-w-xl border-l-2 border-accent pl-5 text-base leading-7 text-muted sm:text-lg">
              Securely connect Discord to your approved Minecraft accounts. No passwords. No public links. Just a quick handoff from the server you already know.
            </p>
          </div>

          <aside className="relative border border-line bg-panel/90 p-6 shadow-[10px_10px_0_var(--color-shadow)] backdrop-blur sm:p-8">
            <span className="absolute -right-px -top-px bg-accent px-3 py-1 font-mono text-[10px] font-bold uppercase tracking-widest text-canvas">
              Start here
            </span>
            <h2 className="font-display text-2xl font-bold uppercase tracking-tight">Three steps to the gate</h2>
            <ol className="mt-8 space-y-1">
              {steps.map(([number, title, description]) => (
                <li key={number} className="group grid grid-cols-[3rem_1fr] gap-4 border-t border-line py-5 first:border-t-0">
                  <span className="font-mono text-xs font-bold text-accent">{number}</span>
                  <div>
                    <h3 className="font-display text-sm font-bold uppercase tracking-wider">{title}</h3>
                    <p className="mt-2 text-sm leading-6 text-muted">{description}</p>
                  </div>
                </li>
              ))}
            </ol>
            <div className="mt-5 bg-ink px-5 py-4 font-mono text-xs leading-6 text-canvas">
              <span className="text-signal">&gt;</span> Open Discord and type <strong>/register</strong>
              <span className="cursor ml-1 inline-block h-4 w-2 bg-signal align-middle" />
            </div>
            <div className="mt-5 grid gap-3 sm:grid-cols-2">
              {inviteUrl ? (
                <a className="border border-ink bg-accent px-4 py-3 text-center font-mono text-[10px] font-bold uppercase tracking-widest text-canvas" href={inviteUrl} rel="noreferrer" target="_blank">Join Discord server</a>
              ) : (
                <span className="border border-line px-4 py-3 text-center font-mono text-[10px] uppercase tracking-widest text-muted">Invite not configured</span>
              )}
              {guildId && (
                <a className="border border-ink px-4 py-3 text-center font-mono text-[10px] font-bold uppercase tracking-widest" href={`discord://-/channels/${guildId}`}>Open Discord app</a>
              )}
            </div>
          </aside>
        </section>

        <footer className="flex flex-col gap-3 border-t border-line pt-5 font-mono text-[10px] uppercase tracking-[0.18em] text-muted sm:flex-row sm:items-center sm:justify-between">
          <span>Java Edition only</span>
          <span>Unknown players are denied by default</span>
        </footer>
      </div>
    </main>
  );
}