import React from 'react';
import Slider from 'react-slick';
import SocialIcon from "./SocialIcon";
import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
import '../Assets/Css/MainSection.scss';
import { useState } from 'react';  // Assuming this is your main scss file path

const MainSection = () => {
  const settings = { 
    infinite: true, 
    speed: 700, 
    slidesToShow: 1, // How many slides to show at once
    slidesToScroll: 1, // How many slides to scroll at once
    autoplay: true, // Automatically move the slides
    autoplaySpeed: 2000, // 3 seconds delay for autoplay
    pauseOnHover: false,   // Prevent pausing when hovered
    pauseOnDotsHover: false,
    cssEase: 'ease-in-out',
  };

  const productSliderSettings = {
    infinite: true,
    speed: 500,
    slidesToShow: 3, // You want to display 3 slides
    slidesToScroll: 1,
    centerMode: true,  // This is important to ensure the center is correctly identified
    centerPadding: '0px',  // No extra padding around the center slide
    autoplay: true,  // Enable autoplay
    autoplaySpeed: 2000,  // Slide every 2 seconds
    pauseOnHover: false, 
    cssEase: 'ease', // Smooth easing function
  };

  // Dummy data for the products (you can replace this with your actual data)
  const products = [
    { name: 'Custom Conditioner', image: 'iconic1.png', price: '$23.00' },
    { name: 'Custom Shampoo', image: 'iconic2.png', price: '$23.00' },
    { name: 'Custom Cream', image: 'iconic3.png', price: '$23.00' }
  ];

  const slidesData = [
    {
      heading: "SO POPULAR IT SOLD OUT",
      text: "Neque porro quisquam est qui dolorem",
      buttonText: "Shop Now",
    },
    {
      heading: "NEW ARRIVAL",
      text: "Lorem ipsum dolor sit amet",
      buttonText: "View Collection",
    },
    {
      heading: "BEST SELLERS",
      text: "Consectetur adipiscing elit",
      buttonText: "Explore Best Sellers",
    },
  ];

  return (
    <section className="main-section">
      {/* Main Slider */}
      <Slider {...settings}>
        {slidesData.map((slide, index) => (
          <div key={index} className="slide-content">
            <div className="content-wrapper">
              <h1>{slide.heading}</h1>
              <p>{slide.text}</p>
              <button className="shop-now-btn">
                <div className="btn-content">
                  {slide.buttonText}
                  <SocialIcon icon={faChevronRight} link="#" />
                </div>
              </button>
            </div>
          </div>
        ))}
      </Slider>

      {/* New Launched Section */}
      <section className="new-launched-section">
        <div className="heading-container">
          <img
            src={require('../Assets/Image/bloomLeft.png')}
            alt="Flower Icon"
            className="decor-icon left-icon"
          />
          <h2 className="section-heading">
            <span className="decor-line">NEW LAUNCHED</span>
          </h2>
          <img
            src={require('../Assets/Image/bloomRight.png')}
            alt="Flower Icon"
            className="decor-icon right-icon"
          />
        </div>

        <div className="image-container">
          <img
            src={require('../Assets/Image/add-image.png')} // Replace with your actual image path
            alt="New Launch"
            className="launch-image"
          />
          <div className="content-overlay">
            <button className="shop-now-btn">SHOP NOW</button>
          </div>
        </div>
      </section>

      {/* DISCOVER HAIRCARE FOR ALL */}
      <section className="discover-haircare-section">
        <div className="heading-container">
          <img src={require('../Assets/Image/bloomLeft.png')} alt="Flower Icon" className="decor-icon left-icon" />
          <h2 className="section-heading">
            <span className="decor-line">DISCOVER HAIRCARE FOR ALL</span>
          </h2>
          <img src={require('../Assets/Image/bloomRight.png')} alt="Flower Icon" className="decor-icon right-icon"/>
        </div>

        <div className="products-container">
          <div className="product-card">
            <img
              src={require('../Assets/Image/product1.png')}
              alt="Custom Shampoo"
            />
            <h4>HAIRCARE</h4>
            <h3>Custom Shampoo</h3>
            <p>$23.00</p>
          </div>

          <div className="product-card">
            <img
              src={require('../Assets/Image/product2.png')}
              alt="Custom Conditioner"
            />
            <h4>HAIRCARE</h4>
            <h3>Custom Conditioner</h3>
            <p>$23.00</p>
          </div>

          <div className="product-card">
            <img
              src={require('../Assets/Image/product3.png')}
              alt="Custom Cream"
            />
            <h4>HAIRCARE</h4>
            <h3>Custom Cream</h3>
            <p>$23.00</p>
          </div>

          <div className="product-card">
            <img
              src={require('../Assets/Image/product4.png')}
              alt="Custom Facewash"
            />
            <h4>HAIRCARE</h4>
            <h3>Custom Facewash</h3>
            <p>$23.00</p>
          </div>
        </div>
      </section>

      {/* two-image-section */}
      <section className="two-image-section">
        <div className="two-images-container">
          <img
            src={require('../Assets/Image/leftImage.png')}
            alt="Left Image"
            className="left-image"
          />
          <img
            src={require('../Assets/Image/rightImage.png')}
            alt="Right Image"
            className="right-image"
          />
        </div>
      </section>

      {/* commix-iconics-section */}
      <section className="commix-iconics-section">
      <div className="heading-container">
      <img src={require('../Assets/Image/bloomLeft.png')} alt="Flower Icon" className="decor-icon left-icon" />
          <h2 className="section-heading">
            <span className="decor-line">COMMIX ICONICS PRODUCTS  </span>
          </h2>
          <img src={require('../Assets/Image/bloomRight.png')} alt="Flower Icon" className="decor-icon right-icon"/>
      </div>

      <Slider {...productSliderSettings}>
        {products.map((product, index) => (
          <div key={index} className="product-card">
            <img src={require(`../Assets/Image/${product.image}`)} alt={product.name} />
            <h4>HAIRCARE</h4>
            <h3>{product.name}</h3>
            <p>{product.price}</p>
          </div>
        ))}
      </Slider>
    </section>

      {/* Full width Image Section */}
      <section className="full-width-image-section">
        <img
          src={require('../Assets/Image/bottle-image.png')}
          alt="Full width image"
          className="full-width-image"
        />
      </section>

      {/* Exclusive Festive Combos Section */}
      <section className="exclusive-festive-combos-section">
        <div className="heading-container">
          <img
            src={require('../Assets/Image/bloomLeft.png')}
            alt="Flower Icon"
            className="decor-icon left-icon"
          />
          <h2 className="section-heading">
            <span className="decor-line">EXCLUSIVE FESTIVE COMBOS</span>
          </h2>
          <img
            src={require('../Assets/Image/bloomRight.png')}
            alt="Flower Icon"
            className="decor-icon right-icon"
          />
        </div>

        <div className="combo-image-container">
          <img
            src={require('../Assets/Image/combo-image.png')}
            alt="Festive Combos"
            className="combo-image"
          />
        </div>
      </section>

      {/* Offer Section */}
      <section className="offer-section">
        <div className="offer-image-container">
          <img
            src={require('../Assets/Image/offer-image.png')}
            alt="Offer Image"
            className="offer-image"
          />
          <button className="shop-now-btn">SHOP NOW</button>
        </div>
      </section>

      {/* WHAT WE'RE LOVING RIGHT NOW */}
      <section className="featured-section">
        {/* Heading with Flowers */}
        <div className="heading-container">
          <img
            src={require('../Assets/Image/bloomLeft.png')}
            alt="Flower Icon"
            className="decor-icon left-icon"
          />
          <h2 className="section-heading">
            <span className="decor-line">WHAT WE'RE LOVING RIGHT NOW</span>
          </h2>
          <img
            src={require('../Assets/Image/bloomRight.png')}
            alt="Flower Icon"
            className="decor-icon right-icon"
          />
        </div>

        {/* Two Divs with Images and Text */}
        <div className="image-grid">
          <div className="product-card">
            <img
              src={require('../Assets/Image/subscribe-left.png')}
              alt="Product 1"
              className="product-image"
            />
            <div className="product-text">
              <h3>SUBSCRIBE & <br/>SAVE 15%</h3>
              <p>Rinse And Repeat with Comix</p>
              <button className="shop-now-btn">SHOP THE SET $44 - $59</button>
            </div>
          </div>

          <div className="product-card">
            <img
              src={require('../Assets/Image/subscribe-right.png')}
              alt="Product 2"
              className="product-image"
            />
            <div className="product-text">
              <h3>SUBSCRIBE & <br/>SAVE 15%</h3>
              <p>Rinse And Repeat with Comix</p>
              <button className="shop-now-btn">SUBSCRIBE NOW</button>
            </div>
          </div>
        </div>
      </section>

      <section className="blog-section">
  {/* Heading with Flowers */}
  <div className="heading-container">
    <img src={require('../Assets/Image/bloomLeft.png')} alt="Flower Icon" className="decor-icon left-icon" />
    <h2 className="section-heading">
      <span className="decor-line">BLOG</span>
    </h2>
    <img src={require('../Assets/Image/bloomRight.png')} alt="Flower Icon" className="decor-icon right-icon" />
  </div>

  <p className="section-description">
    Lorem Ipsum is simply dummy text of the printing and <br/>typesetting industry.
  </p>

  {/* Blog Post Grid */}
  <div className="blog-grid">
    <div className="blog-post">
      <img src={require('../Assets/Image/blog-image1.png')} alt="Blog 1" className="blog-image" />
      <div className="blog-text">
        <p>It is a long established fact <br/>that</p>
        <h3>The Best Celebrity Beauty Brands to Shop in 2024</h3>
      </div>
    </div>

    <div className="blog-post">
      <img src={require('../Assets/Image/blog-image2.png')} alt="Blog 2" className="blog-image" />
      <div className="blog-text">
        <p>It is a long established fact <br/>that</p>
        <h3>The Best Celebrity Beauty Brands to Shop in 2024</h3>
      </div>
    </div>

    <div className="blog-post">
      <img src={require('../Assets/Image/blog-image2.png')} alt="Blog 2" className="blog-image" />
      <div className="blog-text">
        <p>It is a long established fact <br/>that</p>
        <h3>The Best Celebrity Beauty Brands to Shop in 2024</h3>
      </div>
    </div>
  </div>

  {/* See All Button */}
  <div className="see-all-button-container">
    <button className="see-all-button">SEE ALL</button>
  </div>
</section>

    <section className='subscribe-section'>
        <div className='heading-container'>
            <img src={require('../Assets/Image/bloomLeft.png')} alt="Flower Icon" className='decor-icon left-icon'/>
            <h2 className='section-heading'>
                <span className='decor-line'>LET'S STAY IN TOUCH</span>
            </h2>
            <img src={require('../Assets/Image/bloomRight.png')} alt="Flower Icon" className='decor-icon right-icon'/>
        </div>

        <p className='section-description'>
        Get The Latest Beauty Tips Straight To Your Inbox. Can't Wait To Connect
        </p>

        <div className='subscribe-form'>
            <input type="email" placeholder='Enter Email' className='email-input'/>
            <button className='subscribe-button'>SUBSCRIBE</button>
        </div>
    </section>
    </section>
  );
};

export default MainSection;



@import './variables.scss';  // Correct relative path if 'variables.scss' is in the same directory


html, body {
    overflow-x: hidden;
  }

.main-section {
    background-size: cover;
    background-position: center;
    height: auto;  
    padding-bottom: 50px;
    position: relative;

    .slick-slide {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.5s ease-in-out;
    }

    .slide-content {
      width: 100%;
      min-height: 605px;  
      position: relative;
      background-image: url('../Image/main-image.png'); 
      background-size: cover;
      background-position: center;

      .content-wrapper {
        position: absolute;
        top: 50%;
        left: 10%;
        transform: translateY(-50%);
        color: #4B4A9F;

        h1 {
          font-size: 48px;
          font-weight: bold;
          margin-bottom: 10px;
        }

        p {
          font-size: 16px;
          margin-bottom: 20px;
        }

        .shop-now-btn {
          background-color: #2C2E3A;
          color: white;
          width: 303px;
          height: 48px;
          border: none;
          cursor: pointer;
          font-size: 15px;
          text-transform: uppercase;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;

          &:hover {
            .btn-content {
              transform: scale(0.9);
              color: $highlight-color;
            }

            .social-icon {
              color: $highlight-color;
            }
          }

          .btn-content {
            display: flex;
            align-items: center;
            gap: 10px;
            transition: transform 0.3s ease;
          }

          .social-icon {
            font-size: 14px;
            color: white;
            transition: color 0.3s ease;
          }
        }
      }
    }

    /* New Launched Section Styling */
    .new-launched-section {
        margin-top: 90px;
      
        .heading-container {
          margin-bottom: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
      
          .decor-icon {
            display: inline-block;
            width: 40px; 
            height: auto;
            margin: 0 15px;
          }
      
          .section-heading {
            font-size: 28px;
            color: black;
          }
        }
      
        .image-container {
          height: 326px;
          position: relative;
          width: 1364px;
          margin: 0 auto;
          
          .content-overlay {
            position: absolute;
            top: 69%;
            left: 10%;
      
            .shop-now-btn {
              background-color: white;
              color: black;
              padding: 10px 30px;
              border: 1px solid black;
              cursor: pointer;
              font-size: 20px;
              border-radius: 20%;
              font-style: Montserrat;
      
              &:hover {
                background-color: $highlight-color;
              }
            }
          }
        }
      }

    /* Discover Haircare Section Styling */
    .discover-haircare-section {
      margin-top: 117px;

      .heading-container {
        margin-bottom: 50px;
        display: flex;
        align-items: center;
        justify-content: center;

        .decor-icon {
          display: inline-block;
          width: 40px;
          height: auto;
          margin: 0 15px;
        }

        .section-heading {
          font-size: 28px;
          color: black;
        }
      }

      .products-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
        max-width: 1200px;
        margin: 0 auto;

        .product-card {
          text-align: center;
          width: 250px;  
          height: 350px; 
          display: flex;
          flex-direction: column;
          justify-content: flex-end; /* Ensures equal space between elements */
          align-items: center;

          img { 
            object-fit: contain; /* Keeps aspect ratio intact */
            margin-bottom: 15px;
          }

          h4 {
            font-size: 20px;
            color: black;
            font-weight: 200;
            margin-bottom: 15px;
          }

          h3 {
            font-size: 18px;
            color: black;
            margin-bottom: 5px;
          }

          p {
            font-size: 16px;
            color: #555;
          }
        }
      }
    }

    /* two image Section Styling */
    .two-image-section {
        .two-images-container {
          display: flex;
          justify-content: space-between; /* Ensure the images have space between them */
          margin: 50px auto; /* To center the container and add space above and below */
          max-width: 1400px; /* Set a maximum width for the container */
          gap: 20px; /* Add a gap between the images */
          padding: 20px; /* Add some padding for white space inside the container */
          background-color: #fff; /* Optional: Add a background color for the white space effect */
      
          img {
            width: 670px; /* Both images will take 49% of the container width */
            object-fit: cover; /* Ensures the image covers the container while maintaining aspect ratio */
            height: 317px; /* Set the same height for both images */
            object-fit: contain;
          }
        }
      }

      /* commix-iconics-section*/

      .commix-iconics-section {
        margin-top: 112px;
        text-align: center;
    
        .heading-container {
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
    
            .decor-icon {
                display: inline-block;
                width: 40px;
                height: auto;
                margin: 0 15px;
            }
    
            .section-heading {
                font-size: 32px;
                color: black;
                display: inline-block;
            }
        }
    
        .slick-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.5s ease; /* Smooth slide transition */
        }
    
        .product-card {
            width: 300px;  /* All cards have equal width */
            text-align: center;
            transition: transform 0.5s ease;
            margin: 0 15px; /* Add margin between slides for proper spacing */
    
            img {
                width: 100%; /* Image fills the product card */
                height: 450px;
                object-fit: cover;
            }
    
            h4, h3, p {
                margin: 10px 0;
                color: #333;
            }
    
            /* For left and right (non-center) slides */
            &:not(.slick-center) {
                transform: scale(0.8); /* Smaller size for non-center slides */
            }
        }
    
        /* This ensures the center slide enlarges */
        .slick-center .product-card {
            transform: scale(1.1); /* Larger size for the center slide */
            opacity: 1; /* Full opacity for the center slide */
            z-index: 1; /* Bring it to the front */
        }
    }
    
    
    

    /* bottle image section */

    .full-width-image-section{
        margin-top: 116px;
        width: 100px;
        height: 815px;
    }

    .full-width-image{
        width: 1440px;
        height: 815px;
        object-fit: cover;
    }

    /* Exclusive Festive Combos Section */

    .exclusive-festive-combos-section {
        margin-top: 75px;
    
        /* Heading Styling */
        .heading-container {
            margin-bottom: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
    
            .decor-icon {
                display: inline-block;
                width: 40px;
                height: auto;
                margin: 0 15px;
            }
    
            .section-heading {
                font-size: px;
                color: black;
                display: inline-block;
            }
        }
    
        /* Image Container Styling */
        .combo-image-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
    
            .combo-image {
                width: 1203px;
                height: 311px;
                object-fit: contain;
            }
        }
    }

    /* offer Section Styling */

    .offer-section{
        width: 100%;
        margin-top: 121px;
        display: flex;
        justify-content: center;

        .offer-image-container{
            position: relative;
            width: 1714px; /* Set the width based on your design */
            height: 649px;
            background-size: cover;
            background-position: center;
            overflow: hidden;

            .offer-image{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .shop-now-btn{
                position: absolute;
                top: 65%;
                left: 52%;
                padding: 8px;
                background-color: black;
                color: white;
                font-size: 18px;
                cursor: pointer;

                &:hover{
                    background-color: $highlight-color;
                }
            }
        }
    }

    .featured-section {
        margin-top: 117px;
        text-align: center;
      
        .heading-container {
          margin-bottom: 66px;
          display: flex;
          align-items: center;
          justify-content: center;
      
          .decor-icon {
            width: 40px;
            height: auto;
            margin: 0 15px;
          }
      
          .section-heading {
            font-size: 28px;
            color: black;
            display: inline-block;
          }
        }
      
        .image-grid {
          display: flex;
          justify-content: space-between; /* Space between the images */
          max-width: 1350px; /* Set a max width for the grid */
          margin: 0 auto; /* Center the grid on the page */
          gap: 30px; /* Increase the gap between the divs to add spacing */
      
          .product-card {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            background-color: white;
      
            .product-image {
              width: 671px;
              height: 584px;
              object-fit: cover;
            }
      
            .product-text {
              margin-top: 10px;
              text-align: left;
      
              h3 {
                font-size: 18px;
              }
      
              p {
                font-size: 16px;
              }
      
              .shop-now-btn {
                padding: 10px 20px;
                background-color: #2C2E3A;
                color: white;
                border: none;
                cursor: pointer;
                font-size: 15px;
                text-transform: uppercase;
      
                &:hover {
                  background-color: $highlight-color;
                }
              }
            }
          }
        }
      }

      .blog-section {
        margin-top: 100px;
        text-align: center;
      
        .heading-container {
          margin-bottom: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
      
          .decor-icon {
            width: 40px;
            height: auto;
            margin: 0 15px;
          }
      
          .section-heading {
            font-size: 28px;
            color: black;
          }
        }
      
        .section-description {
          font-size: 16px;
          color: #777;
          margin-bottom: 50px;
        }
      
        .blog-grid {
          display: flex;
          justify-content: space-between;
          max-width: 1300px;
          margin: 0 auto;
          gap: 20px; /* Add spacing between the divs */
      
          .blog-post {
            width: 320px;
            height: 397px; /* Adjust width to ensure both divs fit in one row */
            text-align: left;
            border: 1px solid black;
            padding: 19px;
      
            .blog-image {
              width: 100%;
              height: auto;
            }
      
            .blog-text {
              padding: 15px;
      
              p {
                font-size: 14px;
                color: #999;
              }
      
              h3 {
                font-size: 18px;
                color: black;
              }
            }
          }
        }
      
        .see-all-button-container {
          margin-top: 75px;
          text-align: center;
      
          .see-all-button {
            padding: 10px 20px;
            background-color: #333;
            color: white;
            cursor: pointer;
            font-size: 14px;
            width: 303px;
            height: 50px;
      
            &:hover {
              background-color: $highlight-color;
            }
          }
        }
      }

      .subscribe-section{
          margin-top: 150px;
          text-align: center;

          .heading-container{
              margin-bottom: 0px;
              display: flex;
              align-items: center;
              justify-content: center;

              .decor-icon{
                  width: 40px;
                  height: auto;
              }

              .section-heading {
                font-size: 28px;
                color: black;
              }
          }

          .section-description{
              font-size: 16px;
              color: #777;
              margin-bottom: 20px;
          }

          .subscribe-form{
              display: flex;
              justify-content: center;
              align-items: center;

              .email-input{
                  width: 581px;
                  height: 45px;
                  border: 1px solid black;
                  border-top-left-radius: 5%;
                  border-bottom-left-radius: 5%;
                  padding-left: 15px;
              }

              .subscribe-button{
                  width: 133px;
                  height: 45px;
                  background-color: black;
                  color: white;
                  font-size: 14px;
                  cursor: pointer;
                  font: Montserrat;

                  &:hover{
                      background-color: $highlight-color;
                  }
              }
          }
      }
}


convert the code into different react components and make it responsive