'use client';

import Image from 'next/image';

const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || 'https://discord.gg/gridpilot';
const xUrl = process.env.NEXT_PUBLIC_X_URL || '#';

export default function Footer() {
  return (
    <footer className="relative bg-deep-graphite">
      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary-blue to-transparent" />
      
      <div className="max-w-4xl mx-auto px-[calc(1.5rem+var(--sal))] pr-[calc(1.5rem+var(--sar))] py-2 md:py-8 lg:py-12 pb-[calc(0.5rem+var(--sab))] md:pb-[calc(1.5rem+var(--sab))]">
        {/* Racing stripe accent */}
        <div
          className="flex gap-1 mb-2 md:mb-4 lg:mb-6 justify-center"
          style={{
            opacity: 1,
            transform: 'scaleX(1)'
          }}
        >
          <div className="w-12 md:w-20 lg:w-28 h-[2px] md:h-0.5 lg:h-1 bg-white rounded-full" />
          <div className="w-12 md:w-20 lg:w-28 h-[2px] md:h-0.5 lg:h-1 bg-primary-blue rounded-full" />
          <div className="w-12 md:w-20 lg:w-28 h-[2px] md:h-0.5 lg:h-1 bg-white rounded-full" />
        </div>

        {/* Personal message */}
        <div
          className="text-center mb-3 md:mb-6 lg:mb-8"
          style={{
            opacity: 1,
            transform: 'translateY(0)'
          }}
        >
          <div className="mb-2 flex justify-center">
            <Image
              src="/images/logos/icon-square-dark.svg"
              alt="GridPilot"
              width={40}
              height={40}
              className="h-8 w-auto md:h-10"
            />
          </div>
          <p className="text-[9px] md:text-xs lg:text-sm text-gray-300 mb-1 md:mb-2">
            🏁 Built by a sim racer, for sim racers
          </p>
          <p className="text-[9px] md:text-xs text-gray-400 font-light max-w-2xl mx-auto">
            Just a fellow racer tired of spreadsheets and chaos. GridPilot is my passion project to make league racing actually fun again.
          </p>
        </div>

        {/* Community links */}
        <div
          className="flex justify-center gap-4 md:gap-6 lg:gap-8 mb-3 md:mb-6 lg:mb-8"
          style={{
            opacity: 1,
            transform: 'scale(1)'
          }}
        >
          <a
            href={discordUrl}
            className="text-[9px] md:text-xs text-primary-blue hover:text-neon-aqua transition-colors font-medium inline-flex items-center justify-center min-h-[44px] min-w-[44px] px-3 py-2 active:scale-95 transition-transform"
          >
            💬 Join Discord
          </a>
          <a
            href={xUrl}
            className="text-[9px] md:text-xs text-gray-300 hover:text-neon-aqua transition-colors font-medium inline-flex items-center justify-center min-h-[44px] min-w-[44px] px-3 py-2 active:scale-95 transition-transform"
          >
            𝕏 Follow on X
          </a>
        </div>

        {/* Development status */}
        <div
          className="text-center pt-2 md:pt-4 lg:pt-6 border-t border-charcoal-outline"
          style={{
            opacity: 1,
            transform: 'translateY(0)'
          }}
        >
          <p className="text-[9px] md:text-xs lg:text-sm text-gray-500 mb-1 md:mb-2">
            ⚡ Early development • Feedback welcome
          </p>
          <p className="text-[9px] md:text-xs text-gray-600">
            Questions? Find me on Discord
          </p>
        </div>
      </div>
    </footer>
  );
}