"use client";

import React from 'react'
import { scrollToCenterById } from "@/utils/scrollToCenter";
import './Hero.scss'
import Image from 'next/image'


const Hero = () => {

  return (
    <section className="hero-sp">
      <div className="container position-relative">
        <div className="hero-blast"></div>
        <div className="hero-wrap c-grid">
          <div
            className="content"
          >
            <h1 className="title sub-heading">
              Your Next <span className='c-orange'>Amazon Bestseller</span> Starts With Our <span className="c-orange">Free</span> Research.
            </h1>
            <p className="desc">
              Get a <span className="fw-bold">free-of-cost</span>, researched-backed list of future Amazon best-sellers with{' '}
              <span className="fw-bold">real demand, clear margins</span>, and{' '}
              <span className="fw-bold">breakeven timelines as low as 6 months</span>!
            </p>
            <button className='cta' onClick={() => scrollToCenterById("pricing-section")}>
              Get Free Researched Product List
            </button>
            {/* <Link href="#form-section" className="cta" onClick={() => setOpen(true)}>
              Get Free Researched Product List
            </Link>
            {open && <PopForm onClose={() => setOpen(false)} />} */}
            <p className="tag">Based on your budget, breakeven goals, and category preferences.</p>

            <Image src="/images/hero-logo.svg" width={516} height={35} alt="logo" />
          </div>

          <div
            className="hero-img"
          >
            <Image src="/images/hero-img-2.webp" width={700} height={500} alt="hero image" priority fetchPriority="high"
              quality={85} />
          </div>
        </div>
      </div>
    </section>
  )
}

export default Hero