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

const MissionValues = () => {
  const { getLogoUrl } = useThemeConfig();
  const loafLogo = getLogoUrl();

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

      <main className="bg-gradient-to-b from-[var(--neutral-100)] to-[var(--neutral-800)] px-4 sm:px-6 py-8 sm:py-12 md:py-20">
        <div className="max-w-[1400px] mx-auto">
          <div className="flex md:flex-row flex-col gap-10 items-stretch">
            {/* Left Card - Mission (Purple Gradient) */}
            <Card className=" bg-gradient-to-br from-[var(--purple-lavender)] to-[var(--purple-deep)] p-16 rounded-2xl shadow-lg flex flex-col items-center justify-between  flex-1 w-full md:w-1/2 ">
              <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-xl 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="size-32 sm:size-40 md:size-64 lg:size-96 object-contain" />
              </div>
            </Card>

            {/* Right Card - Values */}
            <Card className="bg-background p-16 rounded-2xl shadow-lg flex-1  w-full md:w-1/2 ">
              <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[var(--purple-deep)] text-center mb-6"
                style={{ fontFamily: "'Poppins', sans-serif" }}>
                LOAF Values
              </h2>
              <ol className="list-decimal list-inside space-y-8 text-lg text-[var(--purple-deep)]"
                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;
