'use client'
import React from 'react'
import type { Page } from '../../payload-types'
import { MessageCircle } from 'lucide-react'

type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'finalCta' }>

export const FinalCTABlock: React.FC<Props> = ({ title, subtitle, buttonText }) => {
  return (
    <section className="py-20 md:py-32 bg-card border-y border-border text-left">
      <div className="container-premium">
        <div className="max-w-3xl">
          <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
            // Kontakt
          </div>

          <h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold text-foreground tracking-tight mb-6 text-balance">
            {title}
          </h2>

          {subtitle && (
            <p className="text-lg md:text-xl font-light text-foreground/75 mb-12 leading-relaxed">
              {subtitle}
            </p>
          )}

        <div>
          <a 
            href={process.env.NEXT_PUBLIC_WHATSAPP_LINK || '#'}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center justify-center gap-2.5 px-8 py-4 bg-green-500 hover:bg-green-600 text-white text-base sm:text-lg font-bold rounded-xl transition-colors shadow-sm"
          >
            <MessageCircle size={22} />
            <span>{buttonText}</span>
          </a>
        </div>
        </div>
      </div>
    </section>
  )
}