ipv6-sims/app/components/sponsor/SponsorContact.tsx

type SponsorContactData = {
  id: string;
  title: string;
  description: string;
  phone: { label: string; value: string };
  email: { label: string; value: string };
  cta: string;
  image: { src: string; alt: string };
};

export default function SponsorContact({ data }: { data: SponsorContactData }) {
  return (
    <section id={data.id} className="py-[var(--spacing-section-gap)] relative px-[var(--spacing-gutter)]">
      <div className="max-w-hd mx-auto">
        <div className="glass-panel gold-border p-6 sm:p-10 lg:p-24 rounded-[2.5rem] lg:rounded-[4rem] overflow-hidden relative">
          {/* 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="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 items-center">
            {/* Left Content */}
            <div className="space-y-8">
              <div>
                <h2 className="font-[var(--font-display-lg)] text-[clamp(1.75rem,3.5vw,3rem)] text-on-surface mb-4 leading-[1.1]">
                  {data.title}
                </h2>
                <p className="font-body-base text-sm lg:text-[17px] text-on-surface-variant max-w-xl leading-relaxed opacity-80">
                  {data.description}
                </p>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                {/* Phone */}
                <div className="group">
                  <div className="flex items-center gap-4">
                    <div className="w-13 h-13 shrink-0 border border-primary/20 bg-primary/5 rounded-xl flex items-center justify-center group-hover:border-primary/50 group-hover:bg-primary/10 transition-all duration-300">
                      <span className="material-symbols-outlined text-primary text-2xl">call</span>
                    </div>
                    <div className="min-w-0">
                      <p className="font-[var(--font-label-caps)] text-[10px] font-bold tracking-[0.2em] uppercase text-primary mb-1 opacity-60">
                        {data.phone.label}
                      </p>
                      <p className="font-[var(--font-display-lg)] text-base text-on-surface whitespace-nowrap">
                        {data.phone.value}
                      </p>
                    </div>
                  </div>
                </div>

                {/* Email */}
                <div className="group">
                  <div className="flex items-center gap-4">
                    <div className="w-13 h-13 shrink-0 border border-primary/20 bg-primary/5 rounded-xl flex items-center justify-center group-hover:border-primary/50 group-hover:bg-primary/10 transition-all duration-300">
                      <span className="material-symbols-outlined text-primary text-2xl">mail</span>
                    </div>
                    <div className="min-w-0">
                      <p className="font-[var(--font-label-caps)] text-[10px] font-bold tracking-[0.2em] uppercase text-primary mb-1 opacity-60">
                        {data.email.label}
                      </p>
                      <p className="font-[var(--font-display-lg)] text-base text-on-surface truncate">
                        {data.email.value}
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <button
                type="button"
                className="gold-gradient-bg text-on-primary w-full sm:w-auto px-8 lg:px-10 py-3.5 rounded-xl font-bold uppercase tracking-widest text-sm shadow-2xl shadow-primary/20 hover:shadow-primary/40 transition-all duration-500 active:scale-95 flex items-center justify-center gap-3 group"
              >
                {data.cta}
                <span className="material-symbols-outlined group-hover:translate-x-2 transition-transform">
                  arrow_forward
                </span>
              </button>
            </div>

            {/* Right Image */}
            <div className="relative group lg:mt-0 mt-8">
              <div className="relative aspect-[4/5] rounded-[2rem] lg:rounded-[3rem] overflow-hidden">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={data.image.src}
                  alt={data.image.alt}
                  className="w-full h-full object-cover opacity-70 mix-blend-luminosity grayscale group-hover:scale-110 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-1000"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent opacity-80" />
                <div className="absolute inset-0 ring-1 ring-inset ring-white/10 rounded-[2rem] lg:rounded-[3rem]" />
              </div>
              
              {/* Decorative Frame */}
              <div className="absolute -inset-4 lg:-inset-6 border border-primary/10 rounded-[2.5rem] lg:rounded-[3.5rem] -z-10 pointer-events-none group-hover:border-primary/30 transition-colors duration-500" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}