import { QRCodeSVG } from "qrcode.react";
import { Link } from "wouter";
import { Diamond, ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { LandingHeader } from "@/components/landing-header";

const REFERRAL_URL = "https://replit.com/refer/Jcazer";

export default function Home() {
  return (
    <div className="min-h-screen bg-background flex flex-col">
      <LandingHeader active="home" />

      <section className="hero-aura flex-1 flex flex-col items-center justify-center px-6 py-24 text-center">
        <div className="max-w-2xl mx-auto animate-fade-up">
          <div className="flex justify-center mb-8">
            <img
              src="/logo-coth.png"
              alt="Comps On The House"
              className="logo-invert h-24 w-auto"
            />
          </div>

          <h1 className="brand-heading text-gradient-brand text-4xl md:text-6xl leading-[1.04] mb-5 tracking-widest uppercase">
            Comps On The House
          </h1>
          <p className="brand-subheading text-muted-foreground text-lg md:text-2xl tracking-[0.22em] italic">
            the players advantage
          </p>

          <div className="rule-diamond my-10">
            <Diamond className="h-3 w-3" />
          </div>

          <p className="text-sm md:text-base text-muted-foreground leading-relaxed max-w-md mx-auto">
            A private back office and an insider team for casino hosts, reps, and
            operators — built to grow players, comps, and revenue.
          </p>

          <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
            <Button
              asChild
              size="lg"
              className="gap-2 tracking-wider uppercase text-xs"
              data-testid="button-enter-back-office"
            >
              <Link href="/sign-up">
                Enter the back office
                <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
            <Button
              asChild
              variant="outline"
              size="lg"
              className="tracking-wider uppercase text-xs"
              data-testid="button-learn-more"
            >
              <Link href="/about">Learn more</Link>
            </Button>
          </div>
        </div>

        <div
          className="mt-16 flex flex-col items-center gap-3 animate-fade-up"
          style={{ animationDelay: "0.15s" }}
        >
          <a
            href={REFERRAL_URL}
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Scan to join Replit (referral)"
            className="inline-block rounded-2xl card-lux p-4 transition-transform duration-300 hover:-translate-y-0.5"
            data-testid="link-referral-qr"
          >
            <div className="rounded-xl bg-white p-3 ring-1 ring-border">
              <QRCodeSVG
                value={REFERRAL_URL}
                size={150}
                bgColor="#FFFFFF"
                fgColor="#0F1419"
                level="M"
                marginSize={0}
              />
            </div>
          </a>
          <p className="brand-subheading text-[11px] text-muted-foreground tracking-[0.25em] uppercase">
            Scan to join Replit
          </p>
        </div>
      </section>

      <footer className="border-t border-border px-6 py-5 text-center">
        <p className="brand-subheading text-xs text-muted-foreground tracking-widest">
          Comps On The House — the players advantage
        </p>
      </footer>
    </div>
  );
}