/**
 * WelcomeFinalCtaSection — editorial final CTA + newsletter/community band (DEBT-005 extraction).
 *
 * Sections 11 + newsletter from Welcome.tsx.
 * Extracted verbatim (Wave-2 content preserved, move not rewrite).
 */
import { ArrowRight } from 'lucide-react';

import { Link } from '@inertiajs/react';

import { NewsletterSignup } from '@/Components/marketing/NewsletterSignup';
import { Button } from '@/Components/ui/button';
import { CTA_SUBTITLES } from '@/config/cta-labels';
import { trackEvent } from '@/lib/analytics';
import { CTA_CLICKED, COMMUNITY_LINK_CLICKED } from '@/lib/event-catalog';

export interface WelcomeFinalCtaSectionProps {
  canRegister: boolean;
  heroCta: string;
}

export function WelcomeFinalCtaSection({ canRegister, heroCta }: WelcomeFinalCtaSectionProps) {
  return (
    <>
      {/* ========================================================================
          11. FINAL CTA - editorial split with operator signature, dropping the
          centered-pill-on-tinted-background pattern that reads generic.
          ======================================================================== */}
      <section className="relative overflow-hidden border-b border-border bg-background">
        <div className="absolute inset-0 bg-grid-hair opacity-30" aria-hidden="true" />
        <div className="absolute inset-0 bg-spotlight" aria-hidden="true" />
        <div className="container relative max-w-5xl py-28 md:py-36">
          <div className="grid gap-10 md:grid-cols-[2fr_1fr] md:items-center md:gap-12">
            <div>
              <div className="editorial-rule left max-w-md">
                <span className="font-data">Your turn</span>
              </div>
              <h2 className="mt-6 text-balance font-display text-3xl font-semibold tracking-tight text-foreground sm:text-4xl md:text-5xl">
                Your GSC data is already telling you which pages lost traffic.{' '}
                <span className="marker">Turn it into results.</span>
              </h2>
              <p className="mt-5 max-w-xl text-base text-muted-foreground sm:text-lg">
                5 minutes to connect. First insights in 10. No card. The product grades its own
                work — if it doesn't move your numbers, you'll know within 30 days.
              </p>
              {canRegister && (
                <div className="mt-8 flex flex-wrap items-center gap-4">
                  <Button variant="default" size="lg" asChild>
                    <Link
                      href={route('register')}
                      onClick={() =>
                        trackEvent(CTA_CLICKED, {
                          cta_text: heroCta,
                          cta_location: 'bottom_cta',
                          page: 'homepage',
                        })
                      }
                    >
                      {heroCta}
                      <ArrowRight className="ml-2 size-4" aria-hidden="true" />
                    </Link>
                  </Button>
                  <p className="font-data text-xs text-muted-foreground">
                    {CTA_SUBTITLES.NO_CREDIT_CARD}
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* ========================================================================
          Newsletter + Communities - combined into a single "stay in the loop"
          band so they don't compete as separate full-width sections.
          ======================================================================== */}
      <section className="border-b border-border bg-muted/20">
        <div className="container grid gap-10 py-16 md:grid-cols-[1.5fr_1fr] md:gap-14">
          <div>
            <p className="font-data text-xs uppercase tracking-[0.18em] text-primary">
              Stay in the loop
            </p>
            <h2 className="mt-3 font-display text-2xl font-semibold tracking-tight text-foreground">
              One short email per week.
            </h2>
            <p className="mt-2 max-w-md text-sm text-muted-foreground">
              What I shipped, what I'm learning about WordPress SEO in 2026, and the data behind it.
              No fluff. Easy unsubscribe.
            </p>
            <div className="mt-5 max-w-md">
              <NewsletterSignup />
            </div>
          </div>
          <div>
            <p className="font-data text-xs uppercase tracking-[0.18em] text-muted-foreground">
              Or find me here
            </p>
            <h3 className="mt-3 text-lg font-semibold text-foreground">
              The communities where WordPress SEOs actually hang out.
            </h3>
            <div className="mt-4 flex flex-wrap gap-2">
              {[
                { href: 'https://www.reddit.com/r/SEO/', label: 'r/SEO', tag: 'reddit_seo' },
                {
                  href: 'https://www.reddit.com/r/Wordpress/',
                  label: 'r/Wordpress',
                  tag: 'reddit_wordpress',
                },
                {
                  href: 'https://wordpress.org/support/forum/how-to-and-troubleshooting/',
                  label: 'WP.org Forums',
                  tag: 'wordpress_org_forums',
                },
              ].map((c) => (
                <a
                  key={c.tag}
                  href={c.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 font-data text-xs font-medium text-muted-foreground transition-colors hover:border-primary/50 hover:text-foreground"
                  onClick={() => trackEvent(COMMUNITY_LINK_CLICKED, { community: c.tag })}
                >
                  {c.label}
                </a>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}