import React, { Component } from 'react'

import SectionIntro from './SectionIntro'
import Button from './Button'

class PageIntro extends Component {
  componentDidMount() {
    let tiltjs = require('vanilla-tilt')
    if (this.props.tiltImage) {
      tiltjs.init(document.querySelector('.tiltImage'), {
        max: 20,
        speed: 400,
        easing: 'cubic-bezier(.03,.98,.52,.99)',
        glare: true,
        'max-glare': 0.8,
        'glare-prerender': false,
      })
    }
  }
  render() {
    return (
      <section className="saburly-intro bg-saburly-light relative">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4">
          <title>bg-saburly-white</title>
          <path
            d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z"
            transform="translate(0 0)"
            style={{ fill: '#fff' }}
          />
        </svg>
        <div
          className={`relative container mx-auto items-center flex lg:flex-row justify-between flex-col ${
            this.props.reversed ? 'flex-col-reverse' : ''
          } p-4`}
        >
          <div className="text-center lg:text-left">
            {this.props.children}
            <SectionIntro
              header
              h2Classes="text-4xl lg:mb-2 md:text-5xl"
              intro={this.props.intro}
              classes={`p-4 lg:text-left lg:max-w-sm content-center ${
                this.props.sectionClasses
              }`}
              textClasses="font-medium opacity-80"
              headline={this.props.headline}
              text={this.props.text}
            />
            {this.props.button && (
              <Button
                text={this.props.buttonText}
                url={this.props.url}
                classes={this.props.buttonClasses}
              />
            )}
          </div>
          {this.props.image && (
            <div>
              <img
                src={this.props.image}
                className={`${
                  this.props.imgClasses
                } tiltImage md:max-h-sm md:max-w-35 mx-auto`}
                alt="Software Development Agency"
              />
            </div>
          )}
        </div>
      </section>
    )
  }
}

export default PageIntro
