import { animated, useSpring } from "@react-spring/web";
import WBSpacer from "../../../../components/WBSpacer";
// import "./Welcome.css"; // Supprimer l'importation du fichier CSS local

const Welcome = () => {
  const styles = useSpring({
    from: {
      opacity: 0,
      y: 24,
    },
    to: {
      opacity: 1,
      y: 0,
    },
  });

  return (
    <animated.div style={styles} className="welcome-container">
      <div className="welcome-header">
        <h1>Welcome to your MioCommerce E-Commerce Website Builder!</h1>
        <p className="subtitle">
          Use this EASY step-by-step website builder to create and review the
          content that will be displayed on your website.
        </p>
      </div>
      <div className="welcome-main-content">
        <div className="welcome-columns-wrap">
          <div className="welcome-text-content">
            <h2>
              Let's Build Your Website — Step by Step - in just a few minutes!
            </h2>
            <p>
              Congrats on starting your new E-commerce Website for your service
              offering! We're here to make creating your website easy and
              intuitive. Just follow the steps below, and you'll have a
              professionally branded and customized online presence for your
              brand in just a few minutes.
            </p>
            <p style={{ fontWeight: 600 }}>Here's what you'll do:</p>
            <ol>
              <li>Add your logo, general business and contact information</li>
              <li>Add your service descriptions</li>
              <li>Add your home page content</li>
              <li>Add your story on the "About Us" page</li>
              <li>
                Add your FAQs (frequently asked customer questions) with answers
              </li>
              <li>
                Set up your booking pages and add install them to your website
              </li>
              <li>"Go Live" and launch your site!</li>
            </ol>
            <p>
              In each step, use the Preview button (in the sidebar or at the
              bottom) to see your website take shape in real time. Once you're
              happy with everything, click Go Live to share your site with the
              world! 🚀
            </p>
          </div>
          <div className="welcome-image-content">
            <img
              src="https://themesondemand.b-cdn.net/MioCommerce/Olympus/website-themes-miocommerce.89728c74.png"
              className="wb-theme-preview-img"
              alt="MioCommerce Theme Preview"
            />
          </div>
        </div>
      </div>
    </animated.div>
  );
};
export default Welcome;
