'use client'

type TagType = {
  id: number
  name: string
}

const tagsData: TagType[] = [
  { id: 1, name: 'Eco deliveries' },
  { id: 2, name: 'Sustainable supply' },
  { id: 3, name: 'Green operations' },
  { id: 4, name: 'Planet contribution' },
  { id: 5, name: 'Clean air' },
  { id: 6, name: 'Business sustainability' },
  { id: 7, name: 'Carbon footprint' },
  { id: 8, name: 'Positive impact' },
]

const MissionVision = () => {
  return (
    <section className="bg-white py-20 lg:py-32.5">
      <div className="container">
        <div className="mb-6 lg:mb-17.5">
          <div className="border-default-200 mb-2.5 inline-flex rounded-full border px-3.75 py-1.25">
            <span className="text-default-500 text-xs font-normal tracking-tight uppercase md:text-sm">Our mission & vision</span>
          </div>
          <h2 className="text-default-950 text-3xl leading-tight font-medium md:text-[40px]">
            Committed to an eco-friendly world: <span className="text-default-500 font-medium">Our vision & mission</span> explained
          </h2>
        </div>

        <div className="border-default-300 rounded-lg border border-dashed bg-white">
          <div className="divide-default-300 grid grid-cols-1 divide-y-0 divide-dashed md:grid-cols-2 md:divide-x">
            <div className="p-3.75 md:p-5 lg:p-7.5">
              <h3 className="text-default-950 mb-3.75 text-3xl font-medium md:mb-5 lg:mb-7.5">Mission</h3>
              <p className="text-default-500 text-base leading-relaxed font-normal">
                At <span className="text-default-950 font-medium">Mivora</span>, our mission is clear — to reshape the future of transportation through sustainable and intelligent logistics solutions. We are dedicated to reducing environmental impact by offering eco-friendly
                supply chain services that combine innovation, efficiency, and environmental responsibility.
              </p>
            </div>

            <div className="p-3.75 md:p-5 lg:p-7.5">
              <h3 className="text-default-950 mb-3.75 text-3xl font-medium md:mb-5 lg:mb-7.5">Vision</h3>
              <p className="text-default-500 mb-5 text-base leading-relaxed font-normal lg:mb-7.5">
                Our vision is to lead the transformation of global logistics into a cleaner, greener, and smarter ecosystem. We aim to set a new standard where eco-supply transportation becomes the backbone of sustainable business practices.
              </p>

              <div className="flex flex-wrap gap-2.5">
                {tagsData.map((tag) => (
                  <span key={tag.id} className="bg-default-100/50 text-default-500 rounded-md px-3.5 py-1.5 text-sm font-normal transition-colors">
                    {tag.name}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

export default MissionVision