import type { ReactNode } from 'react';
import { ButtonLink } from '@/components/ui/Button';
import { Heading } from '@/components/ui/Heading';
import { ArrowRightIcon, PlayIcon } from '@/components/ui/icons';
import { Section } from '@/components/ui/Section';

/** Closing call to action used at the bottom of every marketing page. */
export function CtaBand({
  title = 'Last call for quiet weeknights.',
  lead = 'Bring PintRush to your bar this season. We’re starting with a handful of pilot venues on Long Island.',
}: {
  title?: ReactNode;
  lead?: ReactNode;
}) {
  return (
    <Section spacing="md" aria-labelledby="cta-title">
      <div className="relative isolate overflow-hidden rounded-[2rem] border border-violet/45 bg-[linear-gradient(135deg,rgb(106_75_245/0.4),rgb(13_20_51/0.96)_50%,rgb(14_116_144/0.35))] px-6 py-14 shadow-glow-violet sm:px-12 sm:py-16 lg:px-16">
        <div aria-hidden="true" className="bg-streaks absolute inset-0 -z-10 opacity-80" />
        {/* oversized board motif */}
        <div aria-hidden="true" className="absolute top-1/2 -right-10 -z-10 hidden -translate-y-1/2 grid-cols-3 gap-3 opacity-70 md:grid">
          {Array.from({ length: 9 }, (_, i) => (
            <span
              key={i}
              className={
                [0, 4, 8].includes(i)
                  ? 'size-20 rounded-2xl border border-white/30 bg-[linear-gradient(135deg,var(--color-violet),var(--color-cyan))] shadow-[0_0_40px_-8px_rgb(124_92_255/0.9)] lg:size-24'
                  : 'size-20 rounded-2xl border border-line-strong/50 bg-night/40 lg:size-24'
              }
            />
          ))}
        </div>
        <div className="flex max-w-xl flex-col gap-5">
          <Heading id="cta-title" size="title">
            {title}
          </Heading>
          <p className="text-lg leading-relaxed text-muted">{lead}</p>
          <div className="mt-2 flex flex-col gap-3 sm:flex-row">
            <ButtonLink href="/pilot" size="lg">
              Join the pilot
              <ArrowRightIcon />
            </ButtonLink>
            <ButtonLink href="/demo" size="lg" variant="secondary">
              <PlayIcon />
              Try the live demo
            </ButtonLink>
          </div>
        </div>
      </div>
    </Section>
  );
}