'use client';

import { FiMapPin, FiTruck, FiBarChart3 } from 'react-icons/fi';
import { globalPresence } from '@/lib/constants';

export default function GlobalReachSection() {
  return (
    <section id="global" className="py-16 md:py-24 bg-gradient-to-r from-primary-50 to-blue-50">
      <div className="container-custom">
        <h2 className="section-title text-center">Global Reach & Supply Network</h2>
        <p className="section-subtitle text-center max-w-2xl mx-auto">
          Connecting quality food products to markets worldwide
        </p>

        {/* Distribution info */}
        <div className="grid md:grid-cols-3 gap-8 mb-12">
          <div className="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
            <FiMapPin className="mx-auto text-4xl text-primary-600 mb-4" />
            <h3 className="text-2xl font-bold text-gray-900 mb-2">{globalPresence.countries}+ Countries</h3>
            <p className="text-gray-600">Presence in major markets across continents</p>
          </div>

          <div className="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
            <FiTruck className="mx-auto text-4xl text-primary-600 mb-4" />
            <h3 className="text-2xl font-bold text-gray-900 mb-2">24/7 Logistics</h3>
            <p className="text-gray-600">Reliable supply chain and distribution</p>
          </div>

          <div className="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
            <FiBarChart3 className="mx-auto text-4xl text-primary-600 mb-4" />
            <h3 className="text-2xl font-bold text-gray-900 mb-2">{globalPresence.productionCapacity}</h3>
            <p className="text-gray-600">Annual production and export capacity</p>
          </div>
        </div>

        {/* Map placeholder and regions */}
        <div className="grid md:grid-cols-2 gap-12 items-center">
          {/* Map placeholder */}
          <div className="bg-gradient-to-br from-blue-200 to-blue-300 rounded-lg h-96 flex items-center justify-center text-9xl">
            🌍
          </div>

          {/* Regional breakdown */}
          <div className="space-y-6">
            <h3 className="text-2xl font-bold text-gray-900">Key Markets</h3>

            <div className="space-y-4">
              <div className="border-l-4 border-primary-600 pl-4">
                <h4 className="font-semibold text-gray-900">South Asia</h4>
                <p className="text-gray-600 text-sm">Bangladesh, India, Pakistan, Sri Lanka</p>
              </div>

              <div className="border-l-4 border-accent-red pl-4">
                <h4 className="font-semibold text-gray-900">Middle East</h4>
                <p className="text-gray-600 text-sm">UAE, Saudi Arabia, Qatar, Kuwait</p>
              </div>

              <div className="border-l-4 border-accent-gold pl-4">
                <h4 className="font-semibold text-gray-900">Europe & North America</h4>
                <p className="text-gray-600 text-sm">UK, Germany, USA, Canada</p>
              </div>

              <div className="border-l-4 border-blue-600 pl-4">
                <h4 className="font-semibold text-gray-900">Southeast Asia & Oceania</h4>
                <p className="text-gray-600 text-sm">Thailand, Singapore, Australia</p>
              </div>
            </div>

            <button className="btn-primary">
              Download Supply Network Map
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}