import React from 'react';
import usePopup from "@epicformbuilder/admin/hooks/Popup/index.js";

const WelcomePage = () => {
    const { openPopup } = usePopup()

    return (
    <div style={{
      maxWidth: 680,
      margin: '60px auto',
      padding: 32,
      background: '#fff',
      borderRadius: 16,
      boxShadow: '0 4px 32px rgba(0,0,0,0.07)',
      textAlign: 'center',
    }}>
      <h1 style={{ fontSize: 32, marginBottom: 16 }}>Welcome to Epic Forms!</h1>
      <div style={{ fontSize: 18, color: '#555', marginBottom: 32 }}>
        This plugin helps you create forms and accept online payments directly on your WordPress site.
      </div>
      <button
        onClick={ (e) => openPopup( { type: 'create-form' }) }
        className={ 'btn__create-first-form' }
      >
        Create your first form
      </button>
      <div style={{ margin: '32px 0' }}>
        <div style={{ fontWeight: 600, fontSize: 17, marginBottom: 12 }}>Or start with a template:</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 16 }}>
          <button style={{ minWidth: 140, padding: '12px 18px', background: '#f3f4f6', border: '1px solid #e5e7eb', borderRadius: 7, cursor: 'pointer', fontSize: 15 }} onClick={() => openPopup( { type: 'create-form', alias: 'contact', title: 'Contact Form' })}>Contact Form</button>
          <button style={{ minWidth: 140, padding: '12px 18px', background: '#f3f4f6', border: '1px solid #e5e7eb', borderRadius: 7, cursor: 'pointer', fontSize: 15 }} onClick={() => openPopup( { type: 'create-form', alias: 'feedback', title: 'Feedback Form' })}>Feedback Form</button>
          <button style={{ minWidth: 140, padding: '12px 18px', background: '#f3f4f6', border: '1px solid #e5e7eb', borderRadius: 7, cursor: 'pointer', fontSize: 15 }} onClick={() => openPopup( { type: 'create-form', alias: 'payment', title: 'Payment Form' })}>Payment Form</button>
        </div>
        <div style={{ marginTop: 24 }}>
          <a href="#/templates" style={{ color: '#fe544b', fontWeight: 600, fontSize: 15, textDecoration: 'none', cursor: 'pointer' }}>
            View all templates
          </a>
        </div>
      </div>
    </div>
  );
};

export default WelcomePage;