import Link from "next/link";
import Container from "@/components/ui/Container";
import Hero from "@/components/sections/Hero";
import BetaAccessSection from "@/components/sections/BetaAccessSection";
import { getSiteSettings } from "@/lib/api";

export const revalidate = 300;

export default async function HomePage() {
  const site = await getSiteSettings();

  return (
    <>
      <Hero />

      <Container className="!max-w-content py-10 lg:py-14">
        <div className="relative overflow-hidden bg-ink rounded-[22px] p-7 sm:p-10 lg:p-[52px]">
          <div className="absolute inset-y-0 left-0 w-1.5 bg-gold-500" />
          <div className="inline-flex items-center gap-2 bg-gold-500 text-ink font-display font-black text-xs tracking-[0.18em] uppercase px-3.5 py-[7px] rounded-full mb-5">
            IYKYK
          </div>
          <p className="m-0 font-display font-semibold text-[19px] sm:text-2xl lg:text-[28px] leading-[1.45] text-white text-pretty">
            Somebody always thinks they&apos;re right. Now there&apos;s a way to settle it. Start an
            iBETcha on allBETs Go and put a friendly wager on anything — Sunday&apos;s game, tonight&apos;s
            game night, who actually hits their step count this week. Name your stake, call out your
            opponent, and let them find out.
          </p>
        </div>
      </Container>

      <BetaAccessSection />

      <div className="border-t border-neutral-300 px-[5%] lg:px-10 py-5 flex flex-wrap items-center justify-between gap-3.5 text-sm text-neutral-700">
        <div className="flex flex-wrap gap-4.5 gap-x-[18px]">
          <a href="https://app.allbetsgo.com" className="hover:text-ink">Contact Us</a>
          <Link href="/delete-account-request" className="hover:text-ink">Delete account</Link>
          <Link href="/legal" className="hover:text-ink">Privacy Page</Link>
        </div>
      </div>

      <div className="bg-ink text-white px-[5%] lg:px-10 py-7 flex flex-wrap items-center justify-between gap-5 border-t border-neutral-300">
        <div className="flex items-center gap-3.5 flex-wrap">
          <span className="font-display font-black text-lg uppercase tracking-tight">
            <span className="text-gold-400">all</span>
            <span className="text-accent-300">:</span>
            <span className="text-white">BETs</span>
          </span>
          <span className="text-sm">Follow Us On</span>
          <div className="flex flex-wrap gap-3.5 text-sm">
            {site.social.map((s) => (
              <a key={s.platform} href={s.url} target="_blank" rel="noreferrer" className="text-inherit hover:text-gold-400 capitalize">
                {s.platform === "x" ? "Twitter" : s.platform}
              </a>
            ))}
          </div>
        </div>
        <div className="text-right text-xs text-neutral-400 flex flex-col gap-0.5">
          <span>{site.phone}</span>
          <span>Washington DC</span>
          <span>Copyright {new Date().getFullYear()} All Bets. All rights reserved.</span>
        </div>
      </div>
    </>
  );
}