import React from 'react';
import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter';
import { Button } from '../components/ui/button';
import { Card } from '../components/ui/card';
import { Pen } from 'lucide-react';

const History = () => {
  const ardenCharlotteImg = `${process.env.PUBLIC_URL}/history-arden-charlotte.png`;
  const pride1Img = `${process.env.PUBLIC_URL}/history-pride-1.png`;
  const pride2Img = `${process.env.PUBLIC_URL}/history-pride-2.png`;
  const part3Img = `${process.env.PUBLIC_URL}/history-part3.png`;
  const part7Img = `${process.env.PUBLIC_URL}/history-part7.png`;

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

      <main className="bg-gradient-to-b from-white to-[#f1eef9] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
        {/* Hero Section */}
        <section className="py-12">
          <div className="max-w-5xl mx-auto text-center">
            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-4"
              style={{ fontFamily: "'Poppins', sans-serif" }}>
              History of LOAF
            </h1>
            <div className="flex items-center justify-center gap-2 text-[#48286e]">
              <Pen className="h-5 w-5" />
              <p className="text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                By Arden Eversmeyer
              </p>
            </div>
          </div>
        </section>

        {/* Part 1 - With Image */}
        <section className="py-12">
          <div className="max-w-5xl mx-auto">
            <Card className="p-8 bg-white rounded-2xl shadow-lg">
              <div className="flex flex-col md:flex-row gap-8 items-start">
                <div className="md:w-1/3">
                  <img src={ardenCharlotteImg} alt="Arden Eversmeyer and Charlotte Avery"
                    className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
                  <p className="text-sm text-[#48286e] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    Arden Eversmeyer and Charlotte Avery
                  </p>
                </div>
                <div className="md:w-2/3">
                  <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                    Part 1
                  </h2>
                  <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    In 1985 my life partner of 33 years died. For many years we had been part of a large "friendship group" that got together for meals and games. After her death, I found myself on the edge of the group. I felt invisible. The group, composed primarily of couples, didn't know what to do with the single person they had suddenly become.
                  </p>
                  <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    When I moved to Houston in 1992, I again found myself isolated. I had friends, but not being "coupled" in a "couples world" left me on the outside. I was aware of my advancing age – I was 63 at the time - and I was sure that I was the only "old lesbian" in Houston. I checked out the Montrose bars, but to my dismay, found that older lesbians were non-existent; at least they didn't hang out in bars.
                  </p>
                </div>
              </div>
            </Card>
          </div>
        </section>

        {/* Part 2 */}
        <section className="py-12">
          <div className="max-w-5xl mx-auto">
            <Card className="p-8 bg-white rounded-2xl shadow-lg">
              <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                Part 2
              </h2>
              <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                The Founding Mothers of LOAF are Ruth Sathre (nurse), JoAnn Beene (psychologist), Delores Nason (business woman), JoAnn Loulan (psychologist and writer, now living in Guerneville, CA), and Judy Peyton (social worker). We decided to form a group for Lesbians Over Fifty and began the search for others "like us."
              </p>
              <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                In 1993, we advertised in OutSmart Magazine, the Houston gay magazine, and invited interested women to join us at a local restaurant. Founding mothers and 19 other women came to that first meeting. Since then the group has gone through many evolutions.
              </p>
              <ul className="list-disc ml-6 mt-4 space-y-2 text-lg text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                <li><strong>AGE OF PARTICIPANTS</strong> - we started off as LOAFF - Lesbians over Age Fifty-Five. The extra F stood for 55, which didn't work very well, so we changed to LOAF and lowered the age to 50.</li>
                <li><strong>NAME FOR THE GROUP</strong> - LOAFF and then LOAF</li>
                <li><strong>NUMBER OF EVENTS</strong> - Some of the early years we had events every Saturday afternoon, but as we aged, we cut back to one event each month, then we went to the current format of one event during the week, either afternoon or evening, and a weekend activity.</li>
                <li><strong>TYPES OF EVENTS</strong> - We've had LOTS of different events. Some of the events we have had include: going to a museum, going to the symphony, seeing a play or movie together, going out to dinner, pot luck dinners, game nights, campfires, hiking, kayaking, and more.</li>
              </ul>
            </Card>
          </div>
        </section>

        {/* Part 3 - With Image */}
        <section className="py-12">
          <div className="max-w-5xl mx-auto">
            <Card className="p-8 bg-white rounded-2xl shadow-lg">
              <div className="flex flex-col md:flex-row gap-8 items-start">
                <div className="md:w-2/3">
                  <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                    Part 3
                  </h2>
                  <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    We have never had a formal organization with by-laws and officers. We have operated on a consensus basis with the founders making most of the decisions. One of the early decisions we made was that we would not have any kind of formal membership. We wanted to be as inclusive as possible and not create any barriers to participation.
                  </p>
                  <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    We have always been self-supporting. We have never charged dues or asked for donations. Each person pays for their own meal or activity. We have never had a budget or a bank account. We have been able to operate this way because we have always kept our activities simple and inexpensive.
                  </p>
                </div>
                <div className="md:w-1/3">
                  <img src={part3Img} alt="LOAF Community"
                    className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
                  <p className="text-sm text-[#48286e] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    LOAF Community
                  </p>
                </div>
              </div>
            </Card>
          </div>
        </section>

        {/* Part 4 - With Image */}
        <section className="py-12">
          <div className="max-w-5xl mx-auto">
            <Card className="p-8 bg-white rounded-2xl shadow-lg">
              <div className="flex flex-col md:flex-row gap-8 items-start">
                <div className="md:w-2/3">
                  <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                    Part 4
                  </h2>
                  <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    Over the years, LOAF has been a place where women can be themselves, where they can talk about their lives and their experiences without fear of judgment. We have created a safe space for women to explore their sexuality and their identity as lesbians.
                  </p>
                  <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    Many women have told us that LOAF has been a lifeline for them, especially as they age and find themselves increasingly isolated. LOAF has provided a community and a sense of belonging that has been invaluable.
                  </p>
                </div>
                <div className="md:w-1/3">
                  <img src={pride1Img} alt="Pride Parade"
                    className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
                  <img src={pride2Img} alt="Pride Parade"
                    className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
                  <p className="text-sm text-[#48286e] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    LOAF at Pride
                  </p>
                </div>
              </div>
            </Card>
          </div>
        </section>

        {/* Part 5 */}
        <section className="py-12">
          <div className="max-w-5xl mx-auto">
            <Card className="p-8 bg-white rounded-2xl shadow-lg">
              <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                Part 5
              </h2>
              <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                LOAF has also been a place where women can give back to the community. Many of our members have been active in various LGBTQ+ organizations and causes. We have marched in Pride parades, volunteered at LGBTQ+ events, and supported various LGBTQ+ initiatives.
              </p>
              <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                As we look to the future, we are committed to continuing to provide a welcoming and inclusive space for lesbians over 50. We know that there are many women out there who are looking for a community like ours, and we want to make sure that they know that LOAF is here for them.
              </p>
            </Card>
          </div>
        </section>

        {/* Part 6 */}
        <section className="py-12">
          <div className="max-w-5xl mx-auto">
            <Card className="p-8 bg-white rounded-2xl shadow-lg">
              <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                Part 6
              </h2>
              <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                One of the things that has made LOAF special is the diversity of our members. We have women from all walks of life, all backgrounds, all races, all religions, and all political persuasions. What we have in common is our age and our sexual orientation.
              </p>
              <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                We have learned so much from each other over the years. We have shared our stories, our wisdom, and our experiences. We have laughed together, cried together, and supported each other through good times and bad.
              </p>
            </Card>
          </div>
        </section>

        {/* Part 7 - With Image */}
        <section className="py-12">
          <div className="max-w-5xl mx-auto">
            <Card className="p-8 bg-white rounded-2xl shadow-lg">
              <div className="flex flex-col md:flex-row gap-8 items-start">
                <div className="md:w-1/3">
                  <img src={part7Img} alt="LOAF Members"
                    className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
                  <p className="text-sm text-[#48286e] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    LOAF Members
                  </p>
                </div>
                <div className="md:w-2/3">
                  <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                    Part 7
                  </h2>
                  <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    LOAF has evolved over the years, but our core mission has remained the same: to provide a welcoming and inclusive community for lesbians over 50. We have adapted to the changing times and the changing needs of our members, but we have never lost sight of what makes LOAF special.
                  </p>
                  <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    We are proud of what we have accomplished over the years, and we are excited about the future. We know that there will always be a need for a community like LOAF, and we are committed to being here for as long as we are needed.
                  </p>
                </div>
              </div>
            </Card>
          </div>
        </section>

        {/* Part 8 */}
        <section className="py-12">
          <div className="max-w-5xl mx-auto">
            <Card className="p-8 bg-white rounded-2xl shadow-lg">
              <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                Part 8
              </h2>
              <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                As I reflect on the history of LOAF, I am filled with gratitude for all of the women who have been part of this community over the years. Each one of you has made LOAF what it is today, and I am so proud of what we have created together.
              </p>
              <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                LOAF has been a place where we can be ourselves, where we can celebrate who we are, and where we can support each other through all of life's challenges. It has been a place of joy, laughter, friendship, and love.
              </p>
              <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                Thank you for being part of LOAF. Thank you for making this community what it is. And thank you for continuing to support LOAF into the future.
              </p>
            </Card>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-12 bg-[#48286e] rounded-2xl">
          <div className="max-w-5xl mx-auto px-8">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <Card className="p-8 text-center bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
                <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                  A Life Remembered
                </h3>
                <p className="text-[#48286e] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                  Check out "A Life Remembered", a tribute dedicated to Arden Eversmeyer, one of the founding mothers of LOAF.
                </p>
                <a href="https://www.oldlesbianhistory.org/arden-eversmeyer" target="_blank" rel="noopener noreferrer">
                  <Button className="bg-[#664fa3] hover:bg-[#48286e] text-white rounded-full px-6 py-3">
                    View Arden's Tribute
                  </Button>
                </a>
              </Card>

              <Card className="p-8 text-center bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
                <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                  The Old Lesbian Oral Herstory Project
                </h3>
                <p className="text-[#48286e] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                  Arden Eversmeyer was also involved with The Old Lesbian Oral Herstory Project, preserving the stories of old lesbians.
                </p>
                <a href="https://www.olohp.org" target="_blank" rel="noopener noreferrer">
                  <Button className="bg-[#664fa3] hover:bg-[#48286e] text-white rounded-full px-6 py-3">
                    Learn More About OLOHP
                  </Button>
                </a>
              </Card>
            </div>
          </div>
        </section>
      </main>

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

export default History;
