<script setup lang="ts">
import { ref } from 'vue'
import SiteHeader from '@/components/SiteHeader.vue'
import SiteFooter from '@/components/SiteFooter.vue'

interface MissionPoint {
  title: string
  body: string
}

interface Teacher {
  name: string
  description: string
}

interface Rabbi {
  name: string
  imagePath: string
  quote: string
}

interface HaskamahImage {
  alt: string
  src: string
}

const biographyParagraphs = [
  'Rabbi Yehoshua Gerzi, affectionately known as the "Pilzno Rebbe," ' +
    'is a visionary teacher, spiritual mentor, and community leader. ' +
    'His journey is rooted in a profound mesorah, tracing back to the ' +
    'Baal Shem Tov and the Vilna Gaon, alongside the rich traditions ' +
    'of Sefardi and Edot HaMizrach. He descends from an illustrious ' +
    'lineage on both sides, with ancestors including the Vilna Gaon, ' +
    'the Noam Elimelech, R Zusha, and the heilige Ropshitzer, among ' +
    'others including numerous Sefardi Mekubalim.',
  'He received his semicha from Dayan Gershon Lopian of London, and ' +
    "has trained under a handful of the generation's pre-eminent " +
    'Rabbanim. He possesses a wide range of skills and has trained as ' +
    'a physical therapist, music instructor, martial artist, teacher, ' +
    'counselor, and lecturer. His wife, Rebbetzin Judith Gerzi, is an ' +
    'accomplished musician and educator. He resides in Ramat Beit ' +
    'Shemesh, where he presides as Rabbi of Kehillas Beis David ' +
    'Pilzno and director of the Pilzno Institute of Higher Education.',
]

const missionPoints: MissionPoint[] = [
  {
    title: 'A Clear Framework',
    body:
      'A structured syllabus that illuminates the core areas of life, ' +
      'guiding individuals toward a more meaningful, integrated ' +
      'existence.',
  },
  {
    title: 'Community and Support',
    body:
      'Small groups and supportive networks where individuals ' +
      'experience shared growth, accountability, and transformation.',
  },
  {
    title: 'Professional Structure',
    body:
      'A well-organized life framework that allows individuals to ' +
      'interface with his teachings in a seamless and professional ' +
      'manner, ensuring clarity and accessibility.',
  },
]

const teachers: Teacher[] = [
  {
    name: 'Rabbi Yosef Singer',
    description: 'Pilzno Rav, mentor, and source of deep Torah wisdom.',
  },
  {
    name: 'Rabbi Efraim Greenblatt',
    description: 'Halachic authority and loyal student of Rabbi Moshe Feinstein.',
  },
  {
    name: 'The Sassover Rebbe, The Biala Rebbe, and Rabbi Mordechai Zukerman',
    description: "Spiritual influences who shaped Rabbi Gerzi's avodah.",
  },
]

const rabbanim: Rabbi[] = [
  {
    name: 'The Biala Rebbe',
    imagePath: '/assets/about/rabbanim/biala-rebbe.png',
    quote:
      'What I have noticed and what I have learned from the Biala ' +
      'Rebbe from age 5, hopefully for many years to come, is to match ' +
      'the person in front of you; how much you have to care for them ' +
      'and give them the ability to know what they are seeing is very ' +
      'real...and to respect them.',
  },
  {
    name: 'The Pilzno Rebbe, Rabbi Yosef Singer',
    imagePath: '/assets/about/rabbanim/pilzno-rebbe.png',
    quote:
      'What I learned from Rabbi Singer, amongst many things, was the ' +
      'depth and the profundity of love that he had for all of ' +
      'humanity; and the recognition that everything has its journey ' +
      'and the tremendous patience that he expressed.',
  },
  {
    name: 'Dayan Gershon Lopian',
    imagePath: '/assets/about/rabbanim/dayan-gershon-lopian.png',
    quote:
      'What I learned from Dayan Lopian is the importance of humor ' +
      'blending with Torah and Psak halacha, and how important it is ' +
      "to make Torah relevant to people's lives. To have the ability " +
      'to treat every single person individually as they come your way.',
  },
  {
    name: 'Rabbi Efraim Greenblatt',
    imagePath: '/assets/about/rabbanim/rabbi-efraim-greenblatt.png',
    quote:
      'What impacted me incredibly deeply about Rabbi Greenblatt was ' +
      'his out of the box halachic thinking; and being a loyal student ' +
      'of Rabbi Moshe Feinstein. He went out to the middle of nowhere ' +
      'and built what he built, because he trusted his Rebbe.',
  },
  {
    name: 'The Sassover Rebbe',
    imagePath: '/assets/about/rabbanim/sassover-rebbe.png',
    quote:
      'The Sassover Rebbe imparted in me the importance of mesiras ' +
      'nefesh to help, aid, guide our brethren. There was nothing that ' +
      'was too difficult. No wall too high. No river too wide to cross. ' +
      'He always found a way. His creativity. His ability to think ' +
      'outside the box. Anything to help another Jew.',
  },
  {
    name: 'The Pashkana Rebbe',
    imagePath: '/assets/about/rabbanim/pashkana-rebbe.png',
    quote:
      'What I found incredibly striking about the Pashkana Rebbe was ' +
      'the fact that everything he met, whether good or bad in his ' +
      'life, was met from him with gratitude. There is no such ' +
      'situation in the universe that cannot be met with gratitude. ' +
      'One thing I learned from him that will last for a very, very ' +
      'long time was to approach every situation with hakarat hatov, ' +
      'whatever it may be.',
  },
  {
    name: 'Rabbi Mordechai Zukerman',
    imagePath: '/assets/about/rabbanim/rabbi-mordechai-zukerman.png',
    quote:
      'When coming to Rav Mordechai Zukerman, I found my learning very ' +
      'difficult because of the dyslexia. When I told Rabbi Zukerman ' +
      'about my dyslexia, reading, and difficulties in learning, he ' +
      'said to me something that changed the way I functioned in ' +
      'Jewish life. He said, "You may not be able to read; however, ' +
      'you do not need to read to work on your middot to become a Baal ' +
      'Mussar." And that is something that has affected me forever.',
  },
  {
    name: 'The Radamishler Rebbe',
    imagePath: '/assets/about/rabbanim/radamishler-rebbe.png',
    quote:
      'What I learned from Rav Chuna, the Radamishler Rebbe, was the ' +
      'importance of tradition and the importance of kedusha and ' +
      'tahara. It does not matter whatever generation we are living in. ' +
      'Those standards need to be kept and met.',
  },
  {
    name: 'Rabbi Yoseph Leiberman',
    imagePath: '/assets/about/rabbanim/rabbi-yoseph-leiberman.png',
    quote:
      'Rabbi Leiberman was like a walking Mussar sefer. He stopped to ' +
      'think and to act upon his thinking to make sure that it falls ' +
      'within the realms of halacha and derech eretz.',
  },
  {
    name: 'The Krechnover Rebbe',
    imagePath: '/assets/about/rabbanim/krechnover-rebbe.png',
    quote:
      'The Krechnover Rebbe imparted in me the power of stories, ' +
      'handed down from generation to generation, including a number ' +
      'of practices. The time that I spent with him definitely gave me ' +
      'a much deeper appreciation for tradition and keeping the ' +
      'tradition that was passed down, through the art of stories.',
  },
]

const haskamahImages: HaskamahImage[] = [
  {
    alt: 'Haskamah letter 1',
    src: '/assets/about/haskamot/haskamah-1.jpg',
  },
  {
    alt: 'Haskamah letter 2',
    src: '/assets/about/haskamot/haskamah-2.jpg',
  },
  {
    alt: 'Haskamah letter 3',
    src: '/assets/about/haskamot/haskamah-3.jpg',
  },
  {
    alt: 'Haskamah letter 4',
    src: '/assets/about/haskamot/haskamah-4.jpg',
  },
  {
    alt: 'Haskamah letter 5',
    src: '/assets/about/haskamot/haskamah-5.jpg',
  },
  {
    alt: 'Haskamah letter 6',
    src: '/assets/about/haskamot/haskamah-6.jpg',
  },
]

const newsletterFullName = ref('')
const newsletterEmail = ref('')

function submitNewsletter(submitEvent: Event): void {
  submitEvent.preventDefault()
  newsletterFullName.value = ''
  newsletterEmail.value = ''
}
</script>

<template>
  <div class="about-page">
    <SiteHeader />

    <main>
      <section class="about-hero" data-cy="about-hero">
        <div class="about-hero__inner">
          <div class="about-hero__copy">
            <p class="about-hero__eyebrow">Pilzno Institute</p>
            <h1 class="about-hero__heading">About Rabbi Gerzi</h1>
            <p class="about-hero__lede">
              Healthy, Integrated and Balanced Torah living, rooted in mesorah and made practical
              for real people building real lives.
            </p>
          </div>
          <img
            src="/assets/about/about-hero.jpg"
            alt="Rabbi Yehoshua Gerzi teaching"
            class="about-hero__image"
            data-cy="about-hero-image"
          />
        </div>
      </section>

      <section class="about-section about-section--white" data-cy="about-story">
        <div class="about-section__inner about-section__inner--split">
          <div class="about-section__title">
            <p class="about-section__kicker">Biography</p>
            <h2 class="about-section__heading">About Rabbi Gerzi</h2>
          </div>
          <div class="about-section__body">
            <p
              v-for="paragraph in biographyParagraphs"
              :key="paragraph"
              class="about-section__paragraph"
            >
              {{ paragraph }}
            </p>
          </div>
        </div>
      </section>

      <section class="about-section about-section--slate" data-cy="about-vision">
        <div class="about-section__inner about-section__inner--narrow">
          <p class="about-section__kicker">Vision</p>
          <h2 class="about-section__heading">Rabbi Gerzi's Vision</h2>
          <p class="about-section__paragraph">
            Rabbi Gerzi guides individuals from vagueness to clarity, from surviving to thriving,
            from a galut to a geula mindset. Through profound teachings rooted in Torah wisdom,
            Rabbi Gerzi aims to connect students with their divine purpose, discover balance, and
            live a life of authentic joy and fulfillment.
          </p>
          <p class="about-section__paragraph">
            As spiritual growth can only be accomplished within a fertile social framework, Rabbi
            Gerzi hosts regular weekly chaburot and various events that create the conditions for
            authentic life transformation.
          </p>
        </div>
      </section>

      <section class="about-section about-section--cream" data-cy="about-mission">
        <div class="about-section__inner">
          <div class="about-section__header">
            <p class="about-section__kicker">Mission</p>
            <h2 class="about-section__heading">
              The Mission: To Provide a Clear Path to Wholesome Living
            </h2>
            <p class="about-section__intro">
              Rabbi Gerzi provides a structured path to wisdom, personal growth, and transformation.
              His educational system is designed to guide individuals through essential life areas,
              creating not just intellectual understanding but genuine change.
            </p>
          </div>

          <div class="mission-grid">
            <article
              v-for="missionPoint in missionPoints"
              :key="missionPoint.title"
              class="mission-grid__item"
            >
              <h3 class="mission-grid__title">{{ missionPoint.title }}</h3>
              <p class="mission-grid__body">{{ missionPoint.body }}</p>
            </article>
          </div>

          <p class="about-section__closing">
            Together, this yields Healthy, Integrated and Balanced Torah living.
          </p>
        </div>
      </section>

      <section class="about-section about-section--white">
        <div class="about-section__inner about-section__inner--split">
          <div class="about-section__title">
            <p class="about-section__kicker">Mesorah</p>
            <h2 class="about-section__heading">The Pilzno Rav</h2>
          </div>
          <div class="about-section__body">
            <p class="about-section__paragraph">
              Rabbi Gerzi's teachings are deeply influenced by his mentor, Rabbi Yosef Singer, the
              Pilzno Rav. Under Rabbi Singer's guidance, Rabbi Gerzi absorbed the teachings of the
              Baal Shem Tov, Chassidut, Kabbalah, and Halacha.
            </p>
            <p class="about-section__paragraph">
              In 2005, the Pilzno Rav instructed Rabbi Gerzi to continue his legacy by building a
              community in Eretz Yisrael dedicated to this unique form of Healthy, Integrated and
              Balanced Torah living.
            </p>
          </div>
        </div>
      </section>

      <section class="about-section about-section--cream" data-cy="about-teachers">
        <div class="about-section__inner">
          <div class="about-section__header">
            <p class="about-section__kicker">Teachers</p>
            <h2 class="about-section__heading">Rabbi Gerzi's Teachers</h2>
          </div>
          <ol class="teacher-list">
            <li v-for="teacher in teachers" :key="teacher.name" class="teacher-list__item">
              <span class="teacher-list__name">{{ teacher.name }}</span>
              <span class="teacher-list__description">
                {{ teacher.description }}
              </span>
            </li>
          </ol>
        </div>
      </section>

      <section class="rabbanim" data-cy="rabbanim">
        <div class="rabbanim__inner">
          <p class="about-section__kicker">Influences</p>
          <h2 class="about-section__heading">Rabbanim</h2>
          <div class="rabbanim__grid">
            <article
              v-for="rabbi in rabbanim"
              :key="rabbi.name"
              class="rabbanim__card"
              data-cy="rabbanim-card"
            >
              <img
                :src="rabbi.imagePath"
                :alt="rabbi.name"
                class="rabbanim__image"
                loading="lazy"
              />
              <div class="rabbanim__content">
                <h3 class="rabbanim__name">{{ rabbi.name }}</h3>
                <p class="rabbanim__quote">{{ rabbi.quote }}</p>
              </div>
            </article>
          </div>
        </div>
      </section>

      <section class="haskamot" data-cy="haskamot">
        <div class="haskamot__inner">
          <p class="about-section__kicker">Letters</p>
          <h2 class="about-section__heading">Haskamot</h2>
          <div class="haskamot__grid">
            <img
              v-for="haskamahImage in haskamahImages"
              :key="haskamahImage.src"
              :src="haskamahImage.src"
              :alt="haskamahImage.alt"
              class="haskamot__image"
              data-cy="haskamah-image"
              loading="lazy"
            />
          </div>
        </div>
      </section>

      <section class="get-involved" data-cy="get-involved">
        <div class="get-involved__card">
          <div class="get-involved__copy">
            <h2 class="get-involved__heading">Get Involved</h2>
            <p class="get-involved__subtext">
              Subscribe for updates as we release new content, chaburot and events.
            </p>
          </div>
          <form class="get-involved__form" @submit="submitNewsletter">
            <label class="get-involved__field">
              <span class="get-involved__label">Full Name</span>
              <input
                v-model="newsletterFullName"
                name="fullName"
                type="text"
                class="get-involved__input"
                autocomplete="name"
              />
            </label>
            <label class="get-involved__field">
              <span class="get-involved__label">Email Address</span>
              <input
                v-model="newsletterEmail"
                name="email"
                type="email"
                class="get-involved__input"
                autocomplete="email"
              />
            </label>
            <button type="submit" class="get-involved__submit">Submit</button>
          </form>
        </div>
      </section>
    </main>

    <SiteFooter />
  </div>
</template>

<style scoped>
.about-page {
  min-height: 100vh;
  background: var(--color-white);
}

.about-hero {
  background: var(--color-cream);
  padding: 4rem 2rem 5rem;
}

.about-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(300px, 1fr);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.about-hero__copy {
  max-width: 34rem;
}

.about-hero__eyebrow,
.about-section__kicker {
  margin: 0 0 0.75rem;
  color: var(--color-olive);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.about-hero__heading,
.about-section__heading {
  margin: 0;
  color: var(--color-slate);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.35rem);
  font-weight: 400;
  line-height: 1.12;
}

.about-hero__lede {
  max-width: 33rem;
  margin: 1.35rem 0 0;
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.65;
}

.about-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 18px 48px rgb(33 50 64 / 16%);
}

.about-section {
  padding: 5rem 2rem;
}

.about-section--white {
  background: var(--color-white);
}

.about-section--cream {
  background: var(--color-cream);
}

.about-section--slate {
  background: var(--color-slate);
  color: var(--color-white);
}

.about-section__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.about-section__inner--split {
  display: grid;
  grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}

.about-section__inner--narrow {
  max-width: 760px;
  text-align: center;
}

.about-section__header {
  max-width: 780px;
  margin: 0 auto 3rem;
  text-align: center;
}

.about-section__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.about-section__paragraph,
.about-section__intro,
.about-section__closing {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.78;
}

.about-section--slate .about-section__heading,
.about-section--slate .about-section__paragraph {
  color: var(--color-white);
}

.about-section--slate .about-section__kicker {
  color: rgb(244 239 225 / 82%);
}

.about-section__intro {
  margin-top: 1.25rem;
}

.about-section__closing {
  margin-top: 2.5rem;
  text-align: center;
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.mission-grid__item,
.rabbanim__card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.mission-grid__item {
  padding: 1.5rem;
}

.mission-grid__title,
.rabbanim__name {
  margin: 0;
  color: var(--color-slate);
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.35;
}

.mission-grid__body,
.rabbanim__quote,
.teacher-list__description {
  margin: 0.85rem 0 0;
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-size: 0.94rem;
  line-height: 1.65;
}

.teacher-list {
  display: grid;
  max-width: 840px;
  margin: 0 auto;
  padding: 0;
  gap: 0.85rem;
  list-style: none;
}

.teacher-list__item {
  display: grid;
  grid-template-columns: minmax(180px, 0.38fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.teacher-list__name {
  color: var(--color-slate);
  font-family: var(--font-serif);
  font-weight: 500;
}

.teacher-list__description {
  margin: 0;
}

.rabbanim {
  background: var(--color-white);
  padding: 5rem 2rem;
  text-align: center;
}

.rabbanim__inner,
.haskamot__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.rabbanim__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
  text-align: left;
}

.rabbanim__card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1rem;
}

.rabbanim__image {
  width: 116px;
  height: 132px;
  border-radius: 6px;
  object-fit: cover;
  object-position: center top;
  background: var(--color-cream);
}

.rabbanim__content {
  min-width: 0;
}

.haskamot {
  background: var(--color-cream);
  padding: 5rem 2rem;
  text-align: center;
}

.haskamot__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
}

.haskamot__image {
  display: block;
  width: 100%;
  aspect-ratio: 0.7;
  border-radius: 8px;
  object-fit: cover;
  object-position: center top;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 30px rgb(33 50 64 / 10%);
}

.get-involved {
  background: var(--color-cream);
  padding: 0 2rem 5rem;
}

.get-involved__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem;
  gap: 3rem;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgb(230 225 210 / 70%);
  border-radius: 8px;
}

.get-involved__heading {
  margin: 0 0 1.25rem;
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 400;
}

.get-involved__subtext {
  max-width: 36ch;
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
}

.get-involved__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.get-involved__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.get-involved__label {
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.85rem;
}

.get-involved__input {
  padding: 0.75rem 1rem;
  color: var(--color-text);
  background: var(--color-cream);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 1rem;
}

.get-involved__input:focus {
  outline: 2px solid var(--color-slate);
  outline-offset: 2px;
}

.get-involved__submit {
  margin-top: 0.5rem;
  padding: 0.85rem 1rem;
  color: var(--color-white);
  background: var(--color-text);
  border: none;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
}

.get-involved__submit:hover {
  background: var(--color-slate);
}

@media (max-width: 860px) {
  .about-hero__inner,
  .about-section__inner--split,
  .get-involved__card {
    grid-template-columns: 1fr;
  }

  .about-hero {
    padding: 3rem 1rem 4rem;
  }

  .about-section,
  .rabbanim,
  .haskamot {
    padding: 4rem 1rem;
  }

  .mission-grid,
  .rabbanim__grid,
  .haskamot__grid {
    grid-template-columns: 1fr;
  }

  .teacher-list__item,
  .rabbanim__card {
    grid-template-columns: 1fr;
  }

  .rabbanim__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .get-involved {
    padding: 0 1rem 4rem;
  }

  .get-involved__card {
    padding: 2rem;
    gap: 2rem;
  }
}
</style>
