import React from 'react'
import Heading from '../Heading'
import Line from '../Line'
import newsletterButton from '../../assets/images/newsletter-button.png'
import { MAILSTER_FORM_URL } from '../../constants/newsletter'

const NewsletterTab = () => {
  return (
    <div className="dreamfox-tab dreamfox-newsletter">
      <Heading text="Newsletter" />
      <Line />
      <p className="dreamfox-newsletter__intro">
        Subscribe to the Dreamfox newsletter for plugin updates, WooCommerce tips, and new feature announcements.
      </p>
      <img
        src={newsletterButton}
        alt="Subscribe to the Dreamfox newsletter"
        className="dreamfox-newsletter__banner"
      />
      <iframe
        title="Dreamfox newsletter signup"
        width="540"
        height="605"
        src={MAILSTER_FORM_URL}
        frameBorder="0"
        scrolling="auto"
        allowFullScreen
        className="dreamfox-newsletter__iframe"
      />
      <Line />
    </div>
  )
}

export default NewsletterTab
