import React from 'react';
import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter';
import { Card } from '../components/ui/card';

const MissionValues = () => {
  const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;

  return (
    <div className="min-h-screen bg-white">
      <PublicNavbar />

      <main className="bg-gradient-to-b from-[#f9fafb] to-[#ddd8eb] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-12 md:py-16">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {/* Left Card - Mission (Purple Gradient) */}
            <Card className="bg-gradient-to-br from-[#664fa3] to-[#48286e] p-8 rounded-2xl shadow-lg">
              <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white text-center mb-6"
                style={{ fontFamily: "'Poppins', sans-serif" }}>
                LOAF Mission
              </h2>
              <p className="text-white text-lg text-center leading-relaxed"
                style={{ fontFamily: "'Poppins', sans-serif" }}>
                LOAF's mission is to alleviate isolation and enrich the lives of lesbians
                over the age of 50 by providing several social networking events every month
                in Houston and the surrounding areas.
              </p>
              <div className="flex justify-center mb-6">
                <img src={loafLogo} alt="LOAF Logo" className="w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 lg:w-64 lg:h-64 object-contain" />
              </div>
            </Card>

            {/* Right Card - Values */}
            <Card className="bg-white p-8 rounded-2xl shadow-lg">
              <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] text-center mb-6"
                style={{ fontFamily: "'Poppins', sans-serif" }}>
                LOAF Values
              </h2>
              <ol className="list-decimal list-inside space-y-3 text-lg text-[#48286e]"
                style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                <li>Safe environments for lesbians to gather for a variety of social activities and interaction.</li>
                <li>Social support for lesbians.</li>
                <li>Diversity and inclusivity.</li>
                <li>The varying social needs of lesbians between the ages of 50 and 99+.</li>
                <li>Collective wisdom and feedback from the membership.</li>
                <li>Educational programs on topics that are important to the membership.</li>
                <li>Safe environments for women who are exploring their sexuality.</li>
                <li>Alleviating internalized homophobia.</li>
              </ol>
            </Card>
          </div>
        </div>
      </main>

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

export default MissionValues;
