"use client";

import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";

/**
 * Landing hero: wordmark, tagline, value prop, trust line, and the primary
 * wallet call-to-action. Wording rules apply — this is a scan/preview only.
 */
export function Hero({ connected }: { connected: boolean }) {
  return (
    <header className="hero">
      <div className="hero__glow" aria-hidden="true" />
      <p className="hero__eyebrow">Solana wallet cleanup ritual</p>
      <h1 className="hero__title">PYRE</h1>
      <p className="hero__tagline">
        Burn the dead. Feed the PYRE. Claim the Spawn.
      </p>
      <p className="hero__value">
        Clean dead Solana token accounts and reclaim the SOL rent trapped in
        them.
      </p>
      <p className="hero__trust">
        PYRE returns your rent. The scraps feed the fire.
      </p>

      <div className="hero__cta">
        <WalletMultiButton />
        <a className="hero__secondary" href="#scanner">
          {connected ? "Go to scanner" : "See how it works"}
        </a>
      </div>

      <p className="hero__note">
        Read-only scan. Nothing is signed — you stay in control of your wallet.
      </p>
    </header>
  );
}