import React from 'react';
import { motion } from 'motion/react';
import { Twitter, MessageSquare, Send, Youtube, ShieldCheck, CheckCircle2, Heart } from 'lucide-react';
import { SectionHeading } from '../ui/SectionHeading';
import { GlassCard } from '../ui/GlassCard';
import { Badge } from '../ui/Badge';

export const CommunitySection: React.FC = () => {
  const socialChannels = [
    {
      name: 'X (Twitter)',
      icon: Twitter,
      members: '12,400+ Followers',
      description: 'Daily product updates, engineering deep dives & founder announcements.',
      link: 'https://x.com/TheBMBlueprint',
      badge: 'Official Feed'
    },
    {
      name: 'Discord Community',
      icon: MessageSquare,
      members: '8,200+ Members',
      description: 'Engage with core engineers, test private beta builds & join dev workshops.',
      link: 'https://discord.com/channels/980516717648298065/1539503547211718656',
      badge: 'Beta Testing'
    },
    {
      name: 'WhatsApp Community',
      icon: Send,
      members: 'Community Chat',
      description: 'Join the community for updates, conversations, and project announcements.',
      link: 'https://chat.whatsapp.com/LBsTvHFSZOPJ7e3ru1Covq',
      badge: 'Live Chat'
    },
    {
      name: 'YouTube Channel',
      icon: Youtube,
      members: 'Video Updates',
      description: 'Watch project updates, educational content, and community videos.',
      link: 'https://www.youtube.com/@birthdaymessaging',
      badge: 'Watch Now'
    }
  ];

  return (
    <section id="community" className="py-24 bg-slate-950 relative overflow-hidden border-t border-slate-900">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <SectionHeading
          badgeText="Join The Movement"
          badgeVariant="tangerine"
          title="Built Out in the Open."
          gradientTitle="Backed by Community."
          subtitle="BM Connect is guided by real users, software engineers, and community members worldwide."
        />

        {/* Social Cards Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
          {socialChannels.map((channel) => {
            const Icon = channel.icon;
            return (
              <GlassCard key={channel.name} className="flex flex-col justify-between group">
                <div>
                  <div className="flex items-center justify-between mb-4">
                    <div className="w-10 h-10 rounded-xl bg-slate-800 border border-slate-700 flex items-center justify-center text-orange-400 group-hover:scale-110 transition-transform">
                      <Icon className="w-5 h-5" />
                    </div>
                    <Badge variant="neutral">{channel.badge}</Badge>
                  </div>

                  <h3 className="text-lg font-bold text-white group-hover:text-orange-400 transition-colors">
                    {channel.name}
                  </h3>
                  <p className="text-xs text-slate-400 mt-2 leading-relaxed">
                    {channel.description}
                  </p>
                </div>

                <div className="mt-6 pt-3 border-t border-slate-800/80 flex items-center justify-between text-xs">
                  <span className="font-mono text-slate-400">{channel.members}</span>
                  <a
                    href={channel.link}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-orange-400 hover:text-orange-300 font-medium transition-colors"
                  >
                    Join Channel →
                  </a>
                </div>
              </GlassCard>
            );
          })}
        </div>

        {/* Founder's Signed Transparency Pledge Card */}
        <div className="p-8 sm:p-10 rounded-3xl bg-slate-900/90 border border-sky-500/30 shadow-2xl relative overflow-hidden backdrop-blur-xl">
          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 pb-6 border-b border-slate-800">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-sky-950 border border-sky-500/30 flex items-center justify-center text-sky-400">
                <ShieldCheck className="w-5 h-5" />
              </div>
              <div>
                <h3 className="text-xl font-bold text-white">Founders' Public Commitment Pledge</h3>
                <p className="text-xs text-slate-400 font-mono">Signed by the BM Connect & BirthdayMessaging.io Core Team</p>
              </div>
            </div>
            <Badge variant="sky" showDot={true}>
              100% Irrevocable
            </Badge>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
            <div className="flex items-start gap-3">
              <CheckCircle2 className="w-5 h-5 text-sky-400 mt-0.5 flex-shrink-0" />
              <div>
                <h4 className="text-sm font-bold text-white">Product Before Token</h4>
                <p className="text-xs text-slate-400 mt-1 leading-relaxed">
                  We pledge to prioritize real software updates across BirthdayMessaging.io and the 30+ products above speculative token marketing.
                </p>
              </div>
            </div>

            <div className="flex items-start gap-3">
              <CheckCircle2 className="w-5 h-5 text-sky-400 mt-0.5 flex-shrink-0" />
              <div>
                <h4 className="text-sm font-bold text-white">Zero Insider Deals or Secret Discounts</h4>
                <p className="text-xs text-slate-400 mt-1 leading-relaxed">
                  No venture capital funds or private insiders hold secret discounted tokens. Public liquidity is 100% permanently locked.
                </p>
              </div>
            </div>

            <div className="flex items-start gap-3">
              <CheckCircle2 className="w-5 h-5 text-sky-400 mt-0.5 flex-shrink-0" />
              <div>
                <h4 className="text-sm font-bold text-white">Multi-Sig Public Treasury Verification</h4>
                <p className="text-xs text-slate-400 mt-1 leading-relaxed">
                  100% of engineering expenditure and subscription revenue buy-backs are viewable on public smart contracts with real-time telemetry.
                </p>
              </div>
            </div>

            <div className="flex items-start gap-3">
              <CheckCircle2 className="w-5 h-5 text-sky-400 mt-0.5 flex-shrink-0" />
              <div>
                <h4 className="text-sm font-bold text-white">Continuous Revenue Buy-Backs</h4>
                <p className="text-xs text-slate-400 mt-1 leading-relaxed">
                  A dedicated percentage of subscription revenues generated by ecosystem products is automatically routed into $SX token buy-backs.
                </p>
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>
  );
};