'use client';

import { useRef } from 'react';
import Button from '@/components/ui/Button';
import { useScrollProgress } from '@/hooks/useScrollProgress';

export default function DiscordCTA() {
  const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || '#';

  return (
    <section id="community" className="relative py-4 md:py-12 lg:py-16 bg-gradient-to-b from-deep-graphite to-iron-gray">
      <div className="max-w-4xl mx-auto px-2 md:px-3 lg:px-4">
        <div
          className="relative rounded-xl bg-gradient-to-br from-iron-gray via-deep-graphite to-iron-gray p-3 md:p-6 lg:p-10 border border-charcoal-outline shadow-[0_0_80px_rgba(88,101,242,0.15)]"
          style={{
            opacity: 1,
            transform: 'scale(1)'
          }}
        >
          {/* Discord brand accent */}
          <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-[#5865F2]/60 to-transparent" />
          
          <div className="text-center space-y-2 md:space-y-4 lg:space-y-6">
            {/* Header */}
            <div className="space-y-1.5 md:space-y-3 lg:space-y-4">
              <div
                className="inline-flex items-center justify-center w-10 h-10 md:w-14 md:h-14 lg:w-18 lg:h-18 rounded-full bg-[#5865F2]/20 border border-[#5865F2]/30 mb-1.5 md:mb-3"
                style={{
                  opacity: 1,
                  transform: 'scale(1) rotate(0deg)'
                }}
              >
                <svg className="w-6 h-6 md:w-8 md:h-8 text-[#5865F2]" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
                </svg>
              </div>
              
              <div
                style={{
                  opacity: 1,
                  transform: 'translateY(0)'
                }}
              >
                <h2 className="text-lg md:text-2xl lg:text-3xl font-semibold text-white">
                  Join us on Discord
                </h2>
                <div className="w-16 md:w-24 lg:w-32 h-0.5 md:h-1 bg-gradient-to-r from-[#5865F2] to-[#7289DA] mx-auto rounded-full" />
              </div>
            </div>

            {/* Personal message */}
            <div
              className="max-w-2xl mx-auto space-y-1.5 md:space-y-3 lg:space-y-4"
              style={{
                opacity: 1,
                transform: 'translateY(0)'
              }}
            >
              <p className="text-xs md:text-sm lg:text-base text-gray-300 font-light leading-relaxed">
                GridPilot is a <strong className="text-white">solo developer project</strong>, and I'm building it because I got tired of the chaos in league racing.
              </p>
              <p className="text-xs md:text-sm text-gray-400 font-light leading-relaxed">
                This is <strong className="text-gray-300">early days</strong>, and I need your help. Join the Discord to:
              </p>
            </div>

            {/* Benefits grid */}
            <div
              className="grid md:grid-cols-2 gap-1.5 md:gap-2 lg:gap-3 max-w-2xl mx-auto mt-2 md:mt-4 lg:mt-6"
              style={{
                opacity: 1,
                transform: 'scale(1)'
              }}
            >
              <div className="flex items-start gap-1.5 md:gap-2.5 text-left p-2 md:p-3.5 rounded-lg bg-iron-gray/50 border border-charcoal-outline hover:border-[#5865F2]/30 transition-colors">
                <div className="flex-shrink-0 w-5 h-5 md:w-6 md:h-6 rounded-lg bg-[#5865F2]/20 border border-[#5865F2]/30 flex items-center justify-center mt-0.5">
                  <svg className="w-3 h-3 md:w-4 md:h-4 text-[#5865F2]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                  </svg>
                </div>
                <div>
                  <h3 className="text-[10px] md:text-xs text-white font-medium mb-0.5">Share your pain points</h3>
                  <p className="text-[9px] md:text-xs text-gray-400 leading-relaxed">Tell me what frustrates you about league racing today</p>
                </div>
              </div>

              <div className="flex items-start gap-1.5 md:gap-2.5 text-left p-2 md:p-3.5 rounded-lg bg-iron-gray/50 border border-charcoal-outline hover:border-[#5865F2]/30 transition-colors">
                <div className="flex-shrink-0 w-5 h-5 md:w-6 md:h-6 rounded-lg bg-[#5865F2]/20 border border-[#5865F2]/30 flex items-center justify-center mt-0.5">
                  <svg className="w-3 h-3 md:w-4 md:h-4 text-[#5865F2]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                  </svg>
                </div>
                <div>
                  <h3 className="text-[10px] md:text-xs text-white font-medium mb-0.5">Shape the product</h3>
                  <p className="text-[9px] md:text-xs text-gray-400 leading-relaxed">Your ideas will directly influence what gets built</p>
                </div>
              </div>

              <div className="flex items-start gap-1.5 md:gap-2.5 text-left p-2 md:p-3.5 rounded-lg bg-iron-gray/50 border border-charcoal-outline hover:border-[#5865F2]/30 transition-colors">
                <div className="flex-shrink-0 w-5 h-5 md:w-6 md:h-6 rounded-lg bg-[#5865F2]/20 border border-[#5865F2]/30 flex items-center justify-center mt-0.5">
                  <svg className="w-3 h-3 md:w-4 md:h-4 text-[#5865F2]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                  </svg>
                </div>
                <div>
                  <h3 className="text-[10px] md:text-xs text-white font-medium mb-0.5">Be part of the community</h3>
                  <p className="text-[9px] md:text-xs text-gray-400 leading-relaxed">Connect with other league racers who get it</p>
                </div>
              </div>

              <div className="flex items-start gap-1.5 md:gap-2.5 text-left p-2 md:p-3.5 rounded-lg bg-iron-gray/50 border border-charcoal-outline hover:border-[#5865F2]/30 transition-colors">
                <div className="flex-shrink-0 w-5 h-5 md:w-6 md:h-6 rounded-lg bg-[#5865F2]/20 border border-[#5865F2]/30 flex items-center justify-center mt-0.5">
                  <svg className="w-3 h-3 md:w-4 md:h-4 text-[#5865F2]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                  </svg>
                </div>
                <div>
                  <h3 className="text-[10px] md:text-xs text-white font-medium mb-0.5">Get early access</h3>
                  <p className="text-[9px] md:text-xs text-gray-400 leading-relaxed">Test features first and help iron out the rough edges</p>
                </div>
              </div>
            </div>

            {/* CTA Button */}
            <div
              className="pt-2 md:pt-4 lg:pt-6"
              style={{
                opacity: 1,
                transform: 'translateY(0) scale(1)'
              }}
            >
              <Button
                as="a"
                href={discordUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1.5 md:gap-2.5 px-3 py-2 md:px-5 md:py-3 text-sm md:text-base bg-[#5865F2] hover:bg-[#4752C4] shadow-[0_0_40px_rgba(88,101,242,0.3)] hover:shadow-[0_0_60px_rgba(88,101,242,0.5)] transition-all duration-300 hover:scale-105"
              >
                <svg className="w-4 h-4 md:w-5 md:h-5" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
                </svg>
                Join the Discord
              </Button>
              {!process.env.NEXT_PUBLIC_DISCORD_URL && (
                <p className="mt-4 text-xs text-gray-500">
                  Note: Configure NEXT_PUBLIC_DISCORD_URL in your environment variables
                </p>
              )}
            </div>

            {/* Footer note */}
            <p
              className="text-[9px] md:text-xs text-gray-500 font-light leading-relaxed max-w-xl mx-auto pt-2 md:pt-4"
              style={{
                opacity: 1
              }}
            >
              This is a community effort. Every voice matters. Let's build something that actually works for league racing.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}