import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from '../components/ui/button';
import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter';
import { ArrowDown } from 'lucide-react';

const BecomeMember = () => {
  // Image assets from Figma
  const imgIconAdminFee1 = `${process.env.PUBLIC_URL}/imgIconAdminFee1.png`;
  const imgIconAdminFee2 = `${process.env.PUBLIC_URL}/imgIconAdminFee2.png`;
  const imgIconAdminFee3 = `${process.env.PUBLIC_URL}/imgIconAdminFee3.png`;
  const imgIconAdminFee4 = `${process.env.PUBLIC_URL}/imgIconAdminFee4.png`;
  const imgIconAdminFee5 = `${process.env.PUBLIC_URL}/imgIconAdminFee5.png`;
  const imgShootingStar = `${process.env.PUBLIC_URL}/imgShootingStar.png`;
  
  return (
    <div className="min-h-screen bg-gray-50 relative">
      <PublicNavbar />

      {/* Decorative shooting star element */}
      <div className="hidden lg:block absolute left-[88px] top-[974px] w-[195px] h-[1135px] pointer-events-none opacity-50">
        <img
          src={imgShootingStar}
          alt=""
          className="w-full h-full object-contain"
        />
      </div>

      {/* Hero Section */}
      <div className="relative bg-gray-50 pt-20 pb-24">
        <div className="max-w-7xl mx-auto px-6 text-center">
          <h1
            className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.96px]"
            style={{ fontFamily: "'Poppins', sans-serif" }}
          >
            Become a Member
          </h1>
          <p
            className="text-base sm:text-lg font-medium text-[#48286e] max-w-2xl mx-auto leading-[1.6]"
            style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
          >
            Become a member to receive our monthly newsletter and find out about all the activities LOAF has planned each month. LOAF hosts over 40 social activities each year and occasionally covers the costs for members only
          </p>
        </div>
      </div>

      {/* Annual Administrative Fees Section */}
      <div className="max-w-[1340px] mx-auto px-6 mb-12 sm:mb-16">
        <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
          <div className="w-24 h-24 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
            <img
              src={imgIconAdminFee1}
              alt="Admin Fee Icon"
              className="w-full h-full object-contain"
            />
          </div>
          <div className="flex-1 bg-[#eeebf4] rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
            <h3
              className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
              style={{ fontFamily: "'Poppins', sans-serif" }}
            >
              Annual Administrative Fees
            </h3>
            <p
              className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
              style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
            >
              Annual Administrative Fees for all members are $30 per person. These fees help cover general business expenses (website, advertising, e-newsletter).
            </p>
          </div>
        </div>
      </div>

      {/* Membership Process Section */}
      <div className="relative bg-gray-50 py-16">
        <div className="max-w-7xl mx-auto px-6 text-center">
          <h2
            className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.8px]"
            style={{ fontFamily: "'Poppins', sans-serif" }}
          >
            Membership Process
          </h2>
          <p
            className="text-base sm:text-lg font-medium text-[#48286e] max-w-2xl mx-auto leading-[1.6]"
            style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
          >
            Becoming a member is easy, but for the safety and privacy of our membership, there are a few steps:
          </p>
        </div>
      </div>

      {/* Step 1 */}
      <div className="max-w-[1340px] mx-auto px-6 mb-6 sm:mb-8">
        <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
          <div className="w-24 h-24 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
            <img
              src={imgIconAdminFee2}
              alt="Step 1 Icon"
              className="w-full h-full object-contain"
            />
          </div>
          <div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
            <h3
              className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
              style={{ fontFamily: "'Poppins', sans-serif" }}
            >
              Step 1: Application & Email Confirmation
            </h3>
            <p
              className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
              style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
            >
              Complete the online application form and submit it. Check your email for a confirmation link and use it to verify your email. You will then begin to receive LOAF's monthly e-newsletter where all of the social events are listed. Your application will remain pending, and you won't be able to log into the Members Only section of the website until step 2 is complete and you are validated by an admin.
            </p>
          </div>
        </div>
      </div>

      {/* Arrow Down Icon */}
      <div className="flex justify-center mb-8">
        <ArrowDown className="w-8 h-8 text-[#4f378a]" strokeWidth={2} />
      </div>

      {/* Step 2 */}
      <div className="max-w-[1340px] mx-auto px-6 mb-6 sm:mb-8">
        <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
          <div className="w-24 h-24 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
            <img
              src={imgIconAdminFee3}
              alt="Step 2 Icon"
              className="w-full h-full object-contain"
            />
          </div>
          <div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
            <h3
              className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
              style={{ fontFamily: "'Poppins', sans-serif" }}
            >
              Step 2: Attend an event and meet us!
            </h3>
            <p
              className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
              style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
            >
              You have 3 months to attend a LOAF event and introduce yourself to a board member. If you do not attend an event within 3 months, you will no longer receive the e-newsletter. (This step can be skipped if you have been referred from a current member and list her on your registration form).
            </p>
          </div>
        </div>
      </div>

      {/* Arrow Down Icon */}
      <div className="flex justify-center mb-8">
        <ArrowDown className="w-8 h-8 text-[#4f378a]" strokeWidth={2} />
      </div>

      {/* Step 3 */}
      <div className="max-w-[1340px] mx-auto px-6 mb-6 sm:mb-8">
        <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
          <div className="w-24 h-24 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
            <img
              src={imgIconAdminFee4}
              alt="Step 3 Icon"
              className="w-full h-full object-contain"
            />
          </div>
          <div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
            <h3
              className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
              style={{ fontFamily: "'Poppins', sans-serif" }}
            >
              Step 3: Login and pay the annual fee
            </h3>
            <p
              className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
              style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
            >
              Once we know that you are indeed you, an admin will validate your application and you will receive an email prompting you to login to your user profile and pay the annual administrative fee.
            </p>
          </div>
        </div>
      </div>

      {/* Arrow Down Icon */}
      <div className="flex justify-center mb-8">
        <ArrowDown className="w-8 h-8 text-[#4f378a]" strokeWidth={2} />
      </div>

      {/* Step 4 - With Gradient Background */}
      <div className="max-w-[1340px] mx-auto px-6 mb-12 sm:mb-16">
        <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
          <div className="w-24 h-24 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
            <img
              src={imgIconAdminFee5}
              alt="Step 4 Icon"
              className="w-full h-full object-contain"
            />
          </div>
          <div className="flex-1 bg-gradient-to-r from-[#48286e] to-[#664fa3] rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
            <h3
              className="text-xl sm:text-2xl md:text-[32px] font-semibold text-white mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
              style={{ fontFamily: "'Poppins', sans-serif" }}
            >
              Step 4: Welcome to LOAF!
            </h3>
            <p
              className="text-base sm:text-lg font-medium text-white leading-[1.6]"
              style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
            >
              Congratulations! Your application is complete, and you now have access to Members Only content. We hope to see you at future events soon!
            </p>
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div className="relative bg-gray-50 py-16">
        <div className="max-w-7xl mx-auto px-6 text-center">
          <h2
            className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.8px]"
            style={{ fontFamily: "'Poppins', sans-serif" }}
          >
            Ready to Join Us?
          </h2>
          <Link to="/register">
            <Button
              className="bg-[#664fa3] text-white hover:bg-[#48286e] rounded-[35px] px-6 py-3 sm:px-12 sm:py-5 md:px-16 md:py-6 text-base sm:text-lg font-medium tracking-[-0.09px] h-auto"
              style={{ fontFamily: "'Inter', sans-serif" }}
            >
              Register Now!
            </Button>
          </Link>
        </div>
      </div>

      <PublicFooter />
    </div>
  );
};

export default BecomeMember;