'use client';

import { useState } from 'react';
import { WebsiteData } from '@/lib/hbfc-data';
import {
  ShieldCheck,
  CheckCircle,
  ArrowRight,
  Flame,
  Compass,
  HeartHandshake,
  Info,
  Sparkles,
} from 'lucide-react';
import { motion } from 'motion/react';
import Link from 'next/link';

interface MembershipSectionProps {
  data: WebsiteData;
  onRegisterWalkathon?: () => void;
  initialOption?: 'walkathon8' | 'events';
}

export function MembershipSection({
  data,
  onRegisterWalkathon,
  initialOption = 'walkathon8',
}: MembershipSectionProps) {
  // 2 volunteer channels:
  // 1. VOLUNTEER FOR CALABAR WALKATHON 8.0
  // 2. VOLUNTEER FOR UPCOMING EVENTS
  const [activeOption, setActiveOption] = useState<'walkathon8' | 'events'>(initialOption);

  // Volunteer Walkathon 8.0 Form state
  const [w8Form, setW8Form] = useState({
    fullName: '',
    email: '',
    phone: '',
    tshirtSize: 'L',
    role: 'Route Marshalls & Safety',
    emergencyContact: '',
  });
  const [w8Confirmed, setW8Confirmed] = useState<{ id: string; name: string; role: string } | null>(null);

  // Volunteer Upcoming Events Form state
  const [evtForm, setEvtForm] = useState({
    fullName: '',
    email: '',
    phone: '',
    eventTarget: 'Obudu Mountain Resort Expedition (OMR)',
    role: 'Trail Guides & Mountain Safety',
    experience: '',
  });
  const [evtConfirmed, setEvtConfirmed] = useState<{ id: string; name: string; event: string; role: string } | null>(null);

  const handleW8Submit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!w8Form.fullName || !w8Form.email || !w8Form.phone) return;
    const volId = `W8-VOL-${Math.floor(1000 + Math.random() * 9000)}`;
    setW8Confirmed({
      id: volId,
      name: w8Form.fullName,
      role: w8Form.role,
    });
  };

  const handleEvtSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!evtForm.fullName || !evtForm.email || !evtForm.phone) return;
    const volId = `EVT-VOL-${Math.floor(1000 + Math.random() * 9000)}`;
    setEvtConfirmed({
      id: volId,
      name: evtForm.fullName,
      event: evtForm.eventTarget,
      role: evtForm.role,
    });
  };

  return (
    <section id="membership" className="py-10 sm:py-16 md:py-20 relative bg-white border-t border-neutral-200 overflow-hidden">
      <div className="max-w-7xl mx-auto px-3.5 sm:px-6 lg:px-8">
        {/* Section Header: Focused on Engagement & Volunteerism */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center max-w-3xl mx-auto mb-8 sm:mb-12"
        >
          <div className="flex justify-center mb-3">
            <motion.div
              whileHover={{ scale: 1.05 }}
              className="w-12 h-12 rounded-2xl bg-black border border-amber-400/70 p-1 shadow-xs flex items-center justify-center"
            >
              <img
                src="/hbfc-logo.jpg"
                alt="HBFC Official Crest"
                className="w-full h-full object-contain"
                referrerPolicy="no-referrer"
              />
            </motion.div>
          </div>

          <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-800 text-[10px] sm:text-xs font-bold uppercase tracking-widest mb-2.5">
            <HeartHandshake className="w-3.5 h-3.5 text-amber-600" />
            <span>Civic Movement & Volunteer Corps</span>
          </div>

          <h2 className="text-2xl sm:text-3xl md:text-4xl font-black text-neutral-900 uppercase tracking-tight mb-2 sm:mb-3">
            VOLUNTEER & PARTICIPATE
          </h2>

          <div className="p-3 rounded-xl bg-amber-50/80 border border-amber-200 text-amber-950 text-xs max-w-xl mx-auto leading-relaxed flex items-center justify-center gap-2 mb-3.5">
            <Info className="w-4 h-4 text-amber-700 shrink-0" />
            <span>
              Official HBFC Club Membership is strictly by executive peer sponsorship and <strong>not open to the general public</strong>. Community members are warmly invited to participate and volunteer below!
            </span>
          </div>

          <p className="text-neutral-600 text-xs sm:text-sm max-w-xl mx-auto">
            Select a volunteer division below to join the ranks of Nigeria’s premier wellness movement:
          </p>
        </motion.div>

        {/* 2 Prominent Volunteer Option Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3.5 sm:gap-5 max-w-3xl mx-auto mb-8 sm:mb-10">
          {/* Option 1: VOLUNTEER FOR CALABAR WALKATHON 8.0 */}
          <motion.button
            whileHover={{ y: -2 }}
            whileTap={{ scale: 0.98 }}
            type="button"
            onClick={() => setActiveOption('walkathon8')}
            className={`p-5 sm:p-6 rounded-2xl text-left border transition-all cursor-pointer flex flex-col justify-between shadow-xs ${
              activeOption === 'walkathon8'
                ? 'bg-emerald-900 text-white border-emerald-400/80 shadow-md ring-2 ring-emerald-400/30'
                : 'bg-neutral-50 hover:bg-white text-neutral-800 border-neutral-200 hover:border-emerald-300'
            }`}
          >
            <div>
              <div className="flex items-center justify-between mb-3">
                <div
                  className={`w-10 h-10 rounded-xl flex items-center justify-center font-bold text-xs ${
                    activeOption === 'walkathon8'
                      ? 'bg-emerald-400 text-black'
                      : 'bg-neutral-200/80 text-neutral-700'
                  }`}
                >
                  <Flame className="w-5 h-5" />
                </div>
                <span
                  className={`text-[9px] font-black uppercase px-2.5 py-1 rounded tracking-wider ${
                    activeOption === 'walkathon8'
                      ? 'bg-emerald-400/20 text-emerald-300 border border-emerald-400/40'
                      : 'bg-emerald-100 text-emerald-800'
                  }`}
                >
                  Walkathon 8.0
                </span>
              </div>
              <h3 className="text-sm sm:text-base font-black uppercase tracking-tight leading-snug">
                VOLUNTEER FOR CALABAR WALKATHON 8.0
              </h3>
              <p
                className={`text-xs mt-2 leading-relaxed ${
                  activeOption === 'walkathon8' ? 'text-emerald-200' : 'text-neutral-500'
                }`}
              >
                Join route marshalls, medical escorts, hydration & media crews for Calabar’s largest fitness trek.
              </p>
            </div>
            <div className="mt-5 pt-3 border-t border-emerald-700/50 flex items-center justify-between text-xs font-bold uppercase tracking-wider">
              <span className={activeOption === 'walkathon8' ? 'text-amber-300' : 'text-emerald-700'}>
                {activeOption === 'walkathon8' ? 'Active Selection' : 'Select Division'}
              </span>
              <ArrowRight className="w-4 h-4" />
            </div>
          </motion.button>

          {/* Option 2: VOLUNTEER FOR UPCOMING EVENTS */}
          <motion.button
            whileHover={{ y: -2 }}
            whileTap={{ scale: 0.98 }}
            type="button"
            onClick={() => setActiveOption('events')}
            className={`p-5 sm:p-6 rounded-2xl text-left border transition-all cursor-pointer flex flex-col justify-between shadow-xs ${
              activeOption === 'events'
                ? 'bg-gradient-to-br from-neutral-900 to-emerald-950 text-white border-amber-400/80 shadow-md ring-2 ring-amber-400/30'
                : 'bg-neutral-50 hover:bg-white text-neutral-800 border-neutral-200 hover:border-amber-300'
            }`}
          >
            <div>
              <div className="flex items-center justify-between mb-3">
                <div
                  className={`w-10 h-10 rounded-xl flex items-center justify-center font-bold text-xs ${
                    activeOption === 'events'
                      ? 'bg-amber-400 text-black'
                      : 'bg-neutral-200/80 text-neutral-700'
                  }`}
                >
                  <Compass className="w-5 h-5" />
                </div>
                <span
                  className={`text-[9px] font-black uppercase px-2.5 py-1 rounded tracking-wider ${
                    activeOption === 'events'
                      ? 'bg-amber-400/20 text-amber-300 border border-amber-400/40'
                      : 'bg-amber-100 text-amber-800'
                  }`}
                >
                  OMR & Outreach
                </span>
              </div>
              <h3 className="text-sm sm:text-base font-black uppercase tracking-tight leading-snug">
                VOLUNTEER FOR UPCOMING EVENTS
              </h3>
              <p
                className={`text-xs mt-2 leading-relaxed ${
                  activeOption === 'events' ? 'text-neutral-300' : 'text-neutral-500'
                }`}
              >
                Obudu Mountain summit expeditions, community health outreaches & morning fitness runs.
              </p>
            </div>
            <div className="mt-5 pt-3 border-t border-neutral-700/50 flex items-center justify-between text-xs font-bold uppercase tracking-wider">
              <span className={activeOption === 'events' ? 'text-amber-300' : 'text-emerald-700'}>
                {activeOption === 'events' ? 'Active Selection' : 'Select Division'}
              </span>
              <ArrowRight className="w-4 h-4" />
            </div>
          </motion.button>
        </div>

        {/* Dynamic Volunteer Application Form Card */}
        <div className="max-w-3xl mx-auto rounded-2xl sm:rounded-3xl bg-neutral-50/90 border border-neutral-200 p-5 sm:p-8 lg:p-10 shadow-sm sm:shadow-md">
          {/* OPTION 1: VOLUNTEER FOR CALABAR WALKATHON 8.0 */}
          {activeOption === 'walkathon8' && (
            <div>
              <div className="text-center max-w-xl mx-auto mb-6">
                <div className="w-10 h-10 rounded-xl bg-emerald-100 text-emerald-800 border border-emerald-200 flex items-center justify-center mx-auto mb-2">
                  <Flame className="w-5 h-5 text-emerald-700" />
                </div>
                <h4 className="text-base sm:text-xl font-black uppercase text-neutral-900">
                  VOLUNTEER FOR CALABAR WALKATHON 8.0
                </h4>
                <p className="text-[11px] sm:text-xs text-neutral-500 mt-1">
                  Be a heartbeat of Nigeria’s flagship 15KM walking movement. Complete your details below to receive your volunteer credentials.
                </p>
              </div>

              {w8Confirmed ? (
                <div className="max-w-md mx-auto p-5 sm:p-6 rounded-2xl bg-gradient-to-br from-emerald-900 via-emerald-950 to-neutral-950 text-white border-2 border-amber-400/60 shadow-lg text-center space-y-4">
                  <div className="w-12 h-12 rounded-full bg-emerald-500/20 border border-emerald-400 flex items-center justify-center mx-auto text-amber-300">
                    <CheckCircle className="w-6 h-6" />
                  </div>
                  <div>
                    <span className="text-[10px] font-black uppercase tracking-widest text-amber-300 block">
                      Walkathon 8.0 Volunteer Badge
                    </span>
                    <h5 className="text-lg font-black text-white mt-0.5">{w8Confirmed.name}</h5>
                    <p className="text-xs text-emerald-300 font-mono mt-1">ID: {w8Confirmed.id}</p>
                    <p className="text-xs text-neutral-300 mt-2 font-semibold">
                      Department: <span className="text-amber-300">{w8Confirmed.role}</span>
                    </p>
                  </div>
                  <div className="pt-3 border-t border-emerald-800/80 text-[11px] text-neutral-300 leading-relaxed">
                    Thank you for volunteering! The Walkathon 8.0 Planning Committee will notify you via WhatsApp for orientation and kit collection.
                  </div>
                  <button
                    type="button"
                    onClick={() => setW8Confirmed(null)}
                    className="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-xs font-bold uppercase tracking-wider text-white border border-white/20 transition-colors cursor-pointer"
                  >
                    Register Another Volunteer
                  </button>
                </div>
              ) : (
                <form onSubmit={handleW8Submit} className="space-y-4 max-w-xl mx-auto">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                    <div>
                      <label className="block text-[10px] sm:text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1">
                        Full Name *
                      </label>
                      <input
                        type="text"
                        required
                        value={w8Form.fullName}
                        onChange={(e) => setW8Form({ ...w8Form, fullName: e.target.value })}
                        placeholder="e.g. David Duke"
                        className="w-full px-3.5 py-2.5 rounded-xl bg-white border border-neutral-300 text-xs sm:text-sm focus:border-emerald-500 focus:outline-none"
                      />
                    </div>

                    <div>
                      <label className="block text-[10px] sm:text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1">
                        Email Address *
                      </label>
                      <input
                        type="email"
                        required
                        value={w8Form.email}
                        onChange={(e) => setW8Form({ ...w8Form, email: e.target.value })}
                        placeholder="david@example.com"
                        className="w-full px-3.5 py-2.5 rounded-xl bg-white border border-neutral-300 text-xs sm:text-sm focus:border-emerald-500 focus:outline-none"
                      />
                    </div>

                    <div>
                      <label className="block text-[10px] sm:text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1">
                        Phone (WhatsApp) *
                      </label>
                      <input
                        type="tel"
                        required
                        value={w8Form.phone}
                        onChange={(e) => setW8Form({ ...w8Form, phone: e.target.value })}
                        placeholder="+234 800 000 0000"
                        className="w-full px-3.5 py-2.5 rounded-xl bg-white border border-neutral-300 text-xs sm:text-sm focus:border-emerald-500 focus:outline-none"
                      />
                    </div>

                    <div>
                      <label className="block text-[10px] sm:text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1">
                        T-Shirt Size
                      </label>
                      <select
                        value={w8Form.tshirtSize}
                        onChange={(e) => setW8Form({ ...w8Form, tshirtSize: e.target.value })}
                        className="w-full px-3.5 py-2.5 rounded-xl bg-white border border-neutral-300 text-xs sm:text-sm focus:border-emerald-500 focus:outline-none"
                      >
                        <option value="S">Small (S)</option>
                        <option value="M">Medium (M)</option>
                        <option value="L">Large (L)</option>
                        <option value="XL">Extra Large (XL)</option>
                        <option value="XXL">Double XL (XXL)</option>
                      </select>
                    </div>

                    <div className="sm:col-span-2">
                      <label className="block text-[10px] sm:text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1">
                        Preferred Volunteer Department *
                      </label>
                      <select
                        value={w8Form.role}
                        onChange={(e) => setW8Form({ ...w8Form, role: e.target.value })}
                        className="w-full px-3.5 py-2.5 rounded-xl bg-white border border-neutral-300 text-xs sm:text-sm focus:border-emerald-500 focus:outline-none font-semibold text-neutral-800"
                      >
                        <option value="Route Marshalls & Safety">Route Marshalls & Traffic Safety</option>
                        <option value="Paramedics & Medical Aid">Paramedics & Medical Aid Escorts</option>
                        <option value="Hydration & Nutrition Stations">Hydration & Refreshment Stations</option>
                        <option value="Media, Photo & Video">Media, Photography & Social Coverage</option>
                        <option value="Kit Handover & Runner Accreditation">Kit Distribution & Runner Accreditation</option>
                      </select>
                    </div>

                    <div className="sm:col-span-2">
                      <label className="block text-[10px] sm:text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1">
                        Emergency Contact (Name & Phone)
                      </label>
                      <input
                        type="text"
                        value={w8Form.emergencyContact}
                        onChange={(e) => setW8Form({ ...w8Form, emergencyContact: e.target.value })}
                        placeholder="e.g. Grace Duke (+234 802 000 0000)"
                        className="w-full px-3.5 py-2.5 rounded-xl bg-white border border-neutral-300 text-xs sm:text-sm focus:border-emerald-500 focus:outline-none"
                      />
                    </div>
                  </div>

                  <div className="pt-2 flex justify-end">
                    <button
                      type="submit"
                      className="w-full sm:w-auto px-7 py-3 rounded-xl font-bold text-xs uppercase tracking-wider bg-emerald-600 hover:bg-emerald-700 text-white shadow-md flex items-center justify-center gap-2 cursor-pointer transition-all"
                    >
                      <span>Submit Walkathon 8.0 Volunteer Application</span>
                      <ArrowRight className="w-3.5 h-3.5 text-amber-300" />
                    </button>
                  </div>
                </form>
              )}
            </div>
          )}

          {/* OPTION 2: VOLUNTEER FOR UPCOMING EVENTS */}
          {activeOption === 'events' && (
            <div>
              <div className="text-center max-w-xl mx-auto mb-6">
                <div className="w-10 h-10 rounded-xl bg-amber-100 text-amber-800 border border-amber-200 flex items-center justify-center mx-auto mb-2">
                  <Compass className="w-5 h-5 text-amber-700" />
                </div>
                <h4 className="text-base sm:text-xl font-black uppercase text-neutral-900">
                  VOLUNTEER FOR UPCOMING EVENTS
                </h4>
                <p className="text-[11px] sm:text-xs text-neutral-500 mt-1">
                  Support our high-altitude mountain expeditions, free community health clinics, and civic sports programs.
                </p>
              </div>

              {evtConfirmed ? (
                <div className="max-w-md mx-auto p-5 sm:p-6 rounded-2xl bg-gradient-to-br from-neutral-900 via-neutral-950 to-emerald-950 text-white border-2 border-amber-400/60 shadow-lg text-center space-y-4">
                  <div className="w-12 h-12 rounded-full bg-amber-500/20 border border-amber-400 flex items-center justify-center mx-auto text-amber-300">
                    <CheckCircle className="w-6 h-6" />
                  </div>
                  <div>
                    <span className="text-[10px] font-black uppercase tracking-widest text-amber-300 block">
                      Events Volunteer Confirmation
                    </span>
                    <h5 className="text-lg font-black text-white mt-0.5">{evtConfirmed.name}</h5>
                    <p className="text-xs text-emerald-300 font-mono mt-1">Ref ID: {evtConfirmed.id}</p>
                    <p className="text-xs text-neutral-300 mt-2">
                      Event: <strong className="text-white">{evtConfirmed.event}</strong>
                    </p>
                    <p className="text-xs text-amber-300">Role: {evtConfirmed.role}</p>
                  </div>
                  <div className="pt-3 border-t border-neutral-800 text-[11px] text-neutral-300 leading-relaxed">
                    Thank you! The HBFC Expeditions & Outreach Directorate will review your details and reach out with event dates and briefing schedules.
                  </div>
                  <button
                    type="button"
                    onClick={() => setEvtConfirmed(null)}
                    className="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-xs font-bold uppercase tracking-wider text-white border border-white/20 transition-colors cursor-pointer"
                  >
                    Submit Another Event Registration
                  </button>
                </div>
              ) : (
                <form onSubmit={handleEvtSubmit} className="space-y-4 max-w-xl mx-auto">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                    <div>
                      <label className="block text-[10px] sm:text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1">
                        Full Name *
                      </label>
                      <input
                        type="text"
                        required
                        value={evtForm.fullName}
                        onChange={(e) => setEvtForm({ ...evtForm, fullName: e.target.value })}
                        placeholder="e.g. Mercy Effiom"
                        className="w-full px-3.5 py-2.5 rounded-xl bg-white border border-neutral-300 text-xs sm:text-sm focus:border-emerald-500 focus:outline-none"
                      />
                    </div>

                    <div>
                      <label className="block text-[10px] sm:text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1">
                        Email Address *
                      </label>
                      <input
                        type="email"
                        required
                        value={evtForm.email}
                        onChange={(e) => setEvtForm({ ...evtForm, email: e.target.value })}
                        placeholder="mercy@example.com"
                        className="w-full px-3.5 py-2.5 rounded-xl bg-white border border-neutral-300 text-xs sm:text-sm focus:border-emerald-500 focus:outline-none"
                      />
                    </div>

                    <div>
                      <label className="block text-[10px] sm:text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1">
                        Phone Number *
                      </label>
                      <input
                        type="tel"
                        required
                        value={evtForm.phone}
                        onChange={(e) => setEvtForm({ ...evtForm, phone: e.target.value })}
                        placeholder="+234 800 000 0000"
                        className="w-full px-3.5 py-2.5 rounded-xl bg-white border border-neutral-300 text-xs sm:text-sm focus:border-emerald-500 focus:outline-none"
                      />
                    </div>

                    <div>
                      <label className="block text-[10px] sm:text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1">
                        Target Event *
                      </label>
                      <select
                        value={evtForm.eventTarget}
                        onChange={(e) => setEvtForm({ ...evtForm, eventTarget: e.target.value })}
                        className="w-full px-3.5 py-2.5 rounded-xl bg-white border border-neutral-300 text-xs sm:text-sm focus:border-emerald-500 focus:outline-none font-semibold text-neutral-800"
                      >
                        <option value="Obudu Mountain Resort Expedition (OMR)">OMR Expedition (Obudu Mountain)</option>
                        <option value="Free Community Health & Medical Outreach">Community Health & Medical Outreach</option>
                        <option value="Weekly Aerofit & City Morning Drills">Weekly Aerofit Drills & Workouts</option>
                        <option value="Eco-Trails Environmental Sanitation Walk">Eco-Trails Environmental Cleanups</option>
                      </select>
                    </div>

                    <div className="sm:col-span-2">
                      <label className="block text-[10px] sm:text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1">
                        Area of Volunteer Support *
                      </label>
                      <select
                        value={evtForm.role}
                        onChange={(e) => setEvtForm({ ...evtForm, role: e.target.value })}
                        className="w-full px-3.5 py-2.5 rounded-xl bg-white border border-neutral-300 text-xs sm:text-sm focus:border-emerald-500 focus:outline-none font-semibold text-neutral-800"
                      >
                        <option value="Paramedics & Medical Aid">Paramedics & Medical Aid / Triage</option>
                        <option value="Trail Guides & Mountain Safety">Trail Guides & Safety Escorts</option>
                        <option value="Hydration & Camp Logistics">Hydration, Camp & Food Logistics</option>
                        <option value="Photography & Media Coverage">Photography & Media Coverage</option>
                        <option value="Community Mobilization">Community Mobilization & Coordination</option>
                      </select>
                    </div>

                    <div className="sm:col-span-2">
                      <label className="block text-[10px] sm:text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1">
                        Relevant Skills / Experience (Optional)
                      </label>
                      <textarea
                        rows={2}
                        value={evtForm.experience}
                        onChange={(e) => setEvtForm({ ...evtForm, experience: e.target.value })}
                        placeholder="e.g. Registered Nurse, certified first responder, drone photographer, hiker..."
                        className="w-full px-3.5 py-2.5 rounded-xl bg-white border border-neutral-300 text-xs sm:text-sm focus:border-emerald-500 focus:outline-none"
                      />
                    </div>
                  </div>

                  <div className="pt-2 flex justify-end">
                    <button
                      type="submit"
                      className="w-full sm:w-auto px-7 py-3 rounded-xl font-bold text-xs uppercase tracking-wider bg-neutral-900 hover:bg-black text-amber-300 border border-amber-400/40 shadow-md flex items-center justify-center gap-2 cursor-pointer transition-all"
                    >
                      <span>Submit Event Volunteer Registration</span>
                      <ArrowRight className="w-3.5 h-3.5 text-amber-300" />
                    </button>
                  </div>
                </form>
              )}
            </div>
          )}
        </div>

        {/* Private Fraternity Charter Note */}
        <div className="max-w-3xl mx-auto mt-8 p-5 sm:p-6 rounded-2xl bg-neutral-900 text-white border border-neutral-800 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-amber-400/10 border border-amber-400/30 flex items-center justify-center text-amber-400 shrink-0">
              <ShieldCheck className="w-5 h-5" />
            </div>
            <div>
              <h4 className="text-xs sm:text-sm font-bold uppercase tracking-wider text-white">
                Executive Fraternity Charter
              </h4>
              <p className="text-[11px] sm:text-xs text-neutral-400 mt-0.5">
                Full HBFC membership is strictly by peer recommendation and Secretariat vetting.
              </p>
            </div>
          </div>

          <Link
            href="/about"
            className="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 border border-white/20 text-xs font-bold uppercase tracking-wider text-amber-300 hover:text-white transition-all whitespace-nowrap"
          >
            Learn About HBFC
          </Link>
        </div>
      </div>
    </section>
  );
}

export default MembershipSection;