describe('contact page', () => {
  beforeEach(() => {
    cy.visit('/contact')
  })

  it('renders the header and contact intro', () => {
    cy.get('header.site-header').within(() => {
      cy.contains('Torah Media').should('be.visible')
      cy.contains('About').should('be.visible')
      cy.contains('Contact').should('be.visible')
      cy.contains('Donate').should('be.visible')
    })

    cy.get('[data-cy="contact-hero"]').within(() => {
      cy.contains('h1', 'Contact').should('be.visible')
      cy.contains('Rabbi Gerzi receives numerous messages each week')
        .should('be.visible')
      cy.contains('get back to you').should('be.visible')
    })
  })

  it('renders the copied message form fields', () => {
    cy.get('[data-cy="contact-form"]').within(() => {
      cy.contains('h2', 'Send Rabbi Gerzi a Message').should('be.visible')
      cy.get('input[name="firstName"]').should('be.visible')
      cy.get('input[name="lastName"]').should('be.visible')
      cy.get('input[name="city"]').should('be.visible')
      cy.get('input[name="country"]').should('be.visible')
      cy.get('input[name="email"]')
        .should('be.visible')
        .and('have.attr', 'type', 'email')
      cy.get('textarea[name="message"]').should('be.visible')
      cy.contains('button', 'Submit').should('be.visible')
    })
  })

  it('clears the static contact form when submitted', () => {
    cy.get('[data-cy="contact-form"]').within(() => {
      cy.get('input[name="firstName"]').type('Yehuda')
      cy.get('input[name="lastName"]').type('Cohen')
      cy.get('input[name="city"]').type('Ramat Beit Shemesh')
      cy.get('input[name="country"]').type('Israel')
      cy.get('input[name="email"]').type('yehuda@example.com')
      cy.get('textarea[name="message"]').type('Please send details.')
      cy.contains('button', 'Submit').click()

      cy.get('input[name="firstName"]').should('have.value', '')
      cy.get('input[name="lastName"]').should('have.value', '')
      cy.get('input[name="city"]').should('have.value', '')
      cy.get('input[name="country"]').should('have.value', '')
      cy.get('input[name="email"]').should('have.value', '')
      cy.get('textarea[name="message"]').should('have.value', '')
    })
  })

  it('renders social media links', () => {
    cy.get('[data-cy="contact-social"]').within(() => {
      cy.contains('h2', 'Follow Rabbi Gerzi on Social Media')
        .should('be.visible')
      cy.contains('a', 'YouTube')
        .should('be.visible')
        .and('have.attr', 'href', 'https://www.youtube.com/@rabbigerzi')
        .and('have.attr', 'target', '_blank')
      cy.contains('a', 'Spotify')
        .should('be.visible')
        .and(
          'have.attr',
          'href',
          'https://open.spotify.com/show/49H1X9A7KZWAnnIbcoQXQR?si=6253691f23be44ad',
        )
        .and('have.attr', 'target', '_blank')
    })
  })

  it('keeps the page readable on mobile', () => {
    cy.viewport(390, 900)

    cy.get('[data-cy="contact-hero"]').should('be.visible')
    cy.get('[data-cy="contact-form"]').should('be.visible')
    cy.get('[data-cy="contact-social"]').should('be.visible')
  })

  it('centers the subscribe card vertically in its section', () => {
    cy.get('[data-cy="get-involved"]').then((sectionElements) => {
      const sectionElement = sectionElements[0]
      const cardElement = sectionElement.querySelector('.get-involved__card')

      if (cardElement === null) {
        throw new Error('Get involved card is missing')
      }

      const sectionBounds = sectionElement.getBoundingClientRect()
      const cardBounds = cardElement.getBoundingClientRect()
      const topBuffer = cardBounds.top - sectionBounds.top
      const bottomBuffer = sectionBounds.bottom - cardBounds.bottom

      expect(topBuffer).to.be.closeTo(bottomBuffer, 1)
    })
  })

  it('renders the get involved form and footer', () => {
    cy.get('[data-cy="get-involved"]').within(() => {
      cy.contains('h2', 'Get Involved').should('be.visible')
      cy.contains('Subscribe for updates as we release new content')
        .should('be.visible')
      cy.get('input[name="fullName"]').should('be.visible')
      cy.get('input[name="newsletterEmail"]').should('be.visible')
      cy.contains('button', 'Submit').should('be.visible')
    })

    cy.get('[data-cy="footer"]').within(() => {
      cy.contains('Torah Media').should('be.visible')
      cy.contains('About').should('be.visible')
      cy.contains('Donate').should('be.visible')
      cy.contains('Contact').should('be.visible')
      cy.contains(/Rabbi Gerzi 2025/).should('be.visible')
    })
  })
})