"use client";

import Link from "next/link";

type Props = {
  data: {
    title: string;
    description: string;
    registerBtn: string;
    viewMembersBtn: string;
  };
};

export default function ReadyToJoin({ data }: Props) {
  return (
    <section className="py-[var(--spacing-section-gap)] relative px-[var(--spacing-gutter)] max-w-hd mx-auto">
      <div className="max-w-5xl mx-auto glass-panel gold-border p-8 sm:p-12 lg:p-20 rounded-[2.5rem] lg:rounded-[4rem] overflow-hidden relative shadow-2xl">
        {/* Background Decor */}
        <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-primary/5 to-transparent pointer-events-none" />
        <div className="absolute -bottom-24 -right-24 w-96 h-96 bg-primary/10 blur-[120px] rounded-full pointer-events-none" />
        <div className="absolute -top-24 -left-24 w-96 h-96 bg-primary/5 blur-[120px] rounded-full pointer-events-none" />

        <div className="relative z-10 text-center space-y-6 sm:space-y-8">
          {/* Title */}
          <h2 className="font-[var(--font-display-lg)] text-[clamp(1.75rem,3.5vw,3rem)] text-on-surface mb-4 leading-[1.1] tracking-tight">
            {data.title}
          </h2>

          {/* Description */}
          <p className="font-[var(--font-body-base)] text-sm sm:text-base lg:text-[18px] text-on-surface-variant max-w-3xl mx-auto leading-relaxed opacity-80">
            {data.description}
          </p>

          {/* Call-to-Action Buttons */}
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-6 pt-4">
            <Link
              href="/registration"
              className="w-full sm:w-auto inline-flex items-center justify-center gap-2 gold-gradient-bg text-on-primary px-8 lg:px-10 py-4 rounded-xl font-bold uppercase tracking-widest text-xs lg:text-sm shadow-2xl shadow-primary/20 hover:shadow-primary/40 hover:scale-105 active:scale-95 transition-all duration-300 group"
            >
              <span>{data.registerBtn}</span>
              <span className="material-symbols-outlined group-hover:translate-x-1.5 transition-transform text-lg">
                arrow_forward
              </span>
            </Link>
            
            <Link
              href="/#agenda"
              className="w-full sm:w-auto inline-flex items-center justify-center gap-2 bg-surface-container-high hover:bg-surface-container-highest border border-white/10 hover:border-primary/40 text-on-surface-variant px-8 lg:px-10 py-4 rounded-xl font-bold uppercase tracking-widest text-xs lg:text-sm hover:scale-105 active:scale-95 transition-all duration-300"
            >
              <span>{data.viewMembersBtn}</span>
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}