'use client'

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


const accordionData = [
    {
        title: 'Real Market Demand',
        content:
            'We start by confirming real demand. That means consistent sales, steady search interest, and products people already buy regularly, not short-lived trends. If demand isn’t strong enough to support growth, we move on.',
    },
    {
        title: 'Competition Level',
        content:
            'Next, we look at how competitive the market really is. We assess review counts, brand dominance, pricing pressure, and how difficult it would be for a new product to gain traction. If success depends on heavy ad spend or price cuts, we rule it out.',
    },
    {
        title: 'Profit and Breakeven Fit',
        content:
            'Finally, we run the numbers. We factor in Amazon fees, logistics, and advertising to understand true margins and realistic breakeven timelines. If it doesn’t make sense on paper, it doesn’t make the list.',
    },
]

const Accordion = () => {
    const [openIndex, setOpenIndex] = useState(0)

    const toggleIndex = (index) => {
        setOpenIndex(index === openIndex ? null : index)
    }
    return (
        <section className='Accordion-sp sec-sp'>
            <div className="container">
                <div className="Accordion-wrap c-grid">
                    <div className="content">
                        <h2 className='sub-heading'>How Bridgeway Finds High-Potential Amazon Products</h2>
                        <p className='desc'>We focus on three things that matter most to investors: <span className='fw-bold'>real demand, manageable competition</span>, and <span className='fw-bold'>financial growth</span>.</p>

                        <div className="accordion">
                            {accordionData.map((item, index) => (
                                <div
                                    className='accordion-item '
                                    key={index}
                                >
                                    <div className="accordion-header" onClick={() => toggleIndex(index)}>
                                        {item.title}
                                        <div className={`icon ${openIndex === index ? 'rotated' : ''}`}>
                                            {openIndex === index ? '↑' : '↑'}
                                        </div>
                                    </div>
                                    <div
                                        className={`accordion-content ${openIndex === index ? 'open' : ''}`}
                                    >
                                        {item.content}
                                    </div>
                                </div>
                            ))}
                        </div>
                        <button className='cta' onClick={() => scrollToCenterById("pricing-section")}>Find Profitable Amazon Products Now </button>
                    </div>

                    <div className="content-img">
                        <Image src="/images/Accordion-img.webp" width={650} height={500} alt='' />
                    </div>
                </div>
            </div>
        </section>
    )
}

export default Accordion