'use client'

import { Icon } from '@iconify/react'
import Image, { StaticImageData } from 'next/image'
import { useState } from 'react'

import tabIcon1 from '@/assets/images/icons/tab-icon-01.svg'
import tabIcon2 from '@/assets/images/icons/tab-icon-02.svg'
import tabIcon3 from '@/assets/images/icons/tab-icon-03.svg'
import tabIcon4 from '@/assets/images/icons/tab-icon-04.svg'
import tabIcon5 from '@/assets/images/icons/tab-icon-05.svg'

import tabImage1 from '@/assets/images/about/tab-image-01.webp'
import tabImage2 from '@/assets/images/about/tab-image-02.webp'
import tabImage3 from '@/assets/images/about/tab-image-03.webp'
import tabImage4 from '@/assets/images/about/tab-image-04.webp'
import tabImage5 from '@/assets/images/about/tab-image-05.webp'

type IndustryType = {
  id: string
  title: string
  icon: StaticImageData
  image: StaticImageData
  description: string
  points: string[]
}

const industriesData: IndustryType[] = [
  {
    id: 'retail',
    title: 'Retail & E-commerce',
    icon: tabIcon1,
    image: tabImage1,
    description: 'Eco-Supply Transportation supports retailers and e-commerce businesses in building greener last-mile delivery networks.',
    points: ['Zero-emission last-mile delivery using electric and hybrid vehicles.', 'Eco-friendly packaging logistics to reduce waste.', 'Optimized route planning for faster, greener deliveries.', 'Reverse logistics support for sustainable returns management.'],
  },
  {
    id: 'manufacturing',
    title: 'Manufacturing',
    icon: tabIcon2,
    image: tabImage2,
    description: 'Eco-Supply Transportation helps manufacturers lower their carbon footprint through sustainable logistics and supply chain solutions.',
    points: [
      'Freight consolidation to reduce emissions and transportation costs.',
      'Use of electric trucks for short-haul and inter-facility transfers.',
      'Smart inventory transfers based on energy-efficient schedules.',
      'Smart inventory transfers based on energy-efficient schedules.',
    ],
  },
  {
    id: 'healthcare',
    title: 'Healthcare & Pharma',
    icon: tabIcon3,
    image: tabImage3,
    description: 'We provide sustainable transportation options tailored to the critical needs of the healthcare and pharmaceutical sectors.',
    points: [
      'Temperature-controlled electric vehicles for sensitive shipments.Freight consolidation to reduce emissions and transportation costs.',
      'Safe disposal logistics for expired or unused medical supplies.',
      'Reduced-emission transport of lab samples and vaccines.',
      'Route optimization for time-critical medical deliveries.',
    ],
  },
  {
    id: 'food',
    title: 'Food & Beverage',
    icon: tabIcon4,
    image: tabImage4,
    description: 'Delivering freshness with sustainability in mind — Eco-Supply transforms food logistics into a greener process.',
    points: [
      'Refrigerated electric vehicles to maintain cold chain compliance.',
      'Local sourcing and distribution networks to cut down on transport miles.',
      'Compostable packaging supply and logistics support.',
      'Eco-friendly logistics for restaurants, grocers, and meal services.',
    ],
  },
  {
    id: 'tech',
    title: 'Technology & Electronics',
    icon: tabIcon5,
    image: tabImage5,
    description: 'We support the tech industry in minimizing its environmental impact through innovative and clean logistics.',
    points: ['Low-emission transport of high-value electronics and parts.', 'Secure, sustainable e-waste and battery recycling logistics.', 'Green packaging and reverse logistics for device returns.', 'Emission tracking and reporting tools for supply chain transparency.'],
  },
]

const Industries = () => {
  const [activeTab, setActiveTab] = useState('retail')

  return (
    <section className="bg-default-100 rounded-2xl py-20 md:py-25 lg:py-32.5">
      <div className="container">
        <div className="mb-6 md:max-w-3xl 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">Industries we serve</span>
          </div>
          <h2 className="text-default-950 text-3xl leading-tight font-medium md:text-[40px]">
            Building <span className="text-default-500 font-medium">smarter, cleaner supply chains</span> across diverse industries
          </h2>
        </div>

        <div>
          <nav className="flex flex-wrap gap-3.75 md:gap-5 lg:gap-7.5" aria-label="Tabs" role="tablist">
            {industriesData.map((item, index) => (
              <button
                key={item.id}
                type="button"
                onClick={() => setActiveTab(item.id)}
                className={`${
                  activeTab === item.id ? 'border-default-800 text-default-950 border-dashed bg-white' : 'border-default-300 bg-default-100 text-default-700 border-dashed'
                } hover:border-default-800 inline-flex w-full items-center gap-3 rounded-md border p-2.5 text-base font-normal transition-all hover:bg-white md:w-auto`}
                role="tab"
                aria-selected={activeTab === item.id}
              >
                <span className="bg-default-200 flex size-7.5 items-center justify-center rounded-md lg:size-10">
                  <Image loading="eager" src={item.icon} alt="Icon" className={`${index === 0 ? 'lg:size-4.5' : 'lg:size-5'} size-4`} />
                </span>
                {item.title}
              </button>
            ))}
          </nav>

          <div className="mt-10">
            {industriesData.map((item) => (
              <div key={item.id} className={activeTab === item.id ? '' : 'hidden'} role="tabpanel">
                <div className="rounded-3xl bg-white p-3.75 md:p-5 lg:p-10">
                  <div className="grid items-center gap-6.25 md:grid-cols-2 md:gap-10 lg:gap-16">
                    <div className="group overflow-hidden rounded-xl">
                      <Image src={item.image} alt={item.title} className="h-50 w-full rounded-lg object-cover md:h-102 lg:h-auto" />
                    </div>
                    <div className="flex h-full flex-col justify-between">
                      <div>
                        <h3 className="text-default-950 mb-3.75 text-xl font-medium md:mb-5 md:text-3xl">{item.title}</h3>
                        <p className="text-md text-default-500 mb-5 leading-relaxed md:text-base">{item.description}</p>
                      </div>
                      <div className="space-y-3.75">
                        {item.points.map((point, idx) => (
                          <div key={idx} className="flex items-start gap-2.5">
                            <div>
                              <Icon icon="tabler:sun-high-filled" className="text-default-800 mt-1 size-4.5 md:size-5.5 lg:mt-0" />
                            </div>
                            <p className="text-md text-default-500 leading-normal md:text-base">{point}</p>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}

export default Industries