'use client'

import serviceImage1 from '@/assets/images/blog/service-image-01.webp'
import Image from 'next/image'

type StrategyListItemType = {
  id: number
  title: string
  description: string
}

type RoadmapCardType = {
  id: number
  title: string
  description: string
}

const strategyListData: StrategyListItemType[] = [
  {
    id: 1,
    title: 'Smart insights: ',
    description: 'Leverage data-driven analysis to make informed, forward-thinking business decisions.',
  },
  {
    id: 2,
    title: 'Scalable operations: ',
    description: 'Build flexible systems that adapt seamlessly as your organization grows.',
  },
  {
    id: 3,
    title: 'Resilient strategy: ',
    description: 'Create long-term plans that can withstand market shifts and global disruptions.',
  },
  {
    id: 4,
    title: 'Real-time adaptation: ',
    description: 'Quickly respond to changes in demand, logistics, or consumer behavior with agility.',
  },
]

const roadmapCardsData: RoadmapCardType[] = [
  {
    id: 1,
    title: 'Brand discovery',
    description: "Uncover your brand's core identity, purpose, and audience expectations.",
  },
  {
    id: 2,
    title: 'Market intelligence',
    description: 'Analyze competitors, spot trends, and identify white-space opportunities.',
  },
  {
    id: 3,
    title: 'Strategic Positioning',
    description: 'Craft a compelling market stance and sharpen your unique value.',
  },
  {
    id: 4,
    title: 'Execution Roadmap',
    description: 'Turn strategy into reality with timelines, milestones, and KPIs.',
  },
]

const Solutions = () => {
  return (
    <section className="bg-default-50 py-20 md:py-25 lg:py-32">
      <div className="container">
        <div className="mb-7.5 grid grid-cols-1 items-start gap-7.5 md:grid-cols-2 lg:mb-12.5 lg:items-center lg:gap-20">
          <div>
            <div className="w-full overflow-hidden rounded-3xl shadow-sm lg:aspect-5/3">
              <Image src={serviceImage1} priority alt="Strategy" className="h-52 w-full object-cover md:h-154 lg:h-full" />
            </div>
          </div>

          <div>
            <h2 className="text-default-950 mb-2.5 text-3xl leading-[1.2] font-medium md:mb-5 md:text-[40px]">Purpose-led strategy is your long-term advantage</h2>
            <p className="text-default-500 mb-5 text-base leading-relaxed font-normal">
              In a fast-changing world, brands that lead with clarity, purpose, and resilience are the ones that thrive. Strategy isn&apos;t a one-time document—it&apos;s a continuous process that shapes every decision, action, and result.
            </p>

            <ul className="list text-default-500 list-inside list-disc space-y-2.5 font-normal">
              {strategyListData.map((item) => (
                <li key={item.id}>
                  <strong className="font-semibold">{item.title}</strong>
                  {item.description}
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-7.5 md:grid-cols-3 lg:grid-cols-4 lg:gap-25">
          {roadmapCardsData.map((item) => (
            <div key={item.id} className="text-start">
              <h3 className="text-default-950 mb-2.5 text-lg font-medium md:mb-3.75 md:text-[22px]">{item.title}</h3>
              <p className="text-default-500 text-base leading-relaxed font-normal">{item.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

export default Solutions