'use client';

import { useTranslation } from '@/lib/i18n';
import Image from 'next/image';
import Link from 'next/link';

export default function AboutPage() {
  const { t, language } = useTranslation();

  const services = [
    {
      icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
      title: t.dealerLicense,
      description: language === 'ko'
        ? '공인 자동차 딜러 자격을 보유하고 있어 안전하고 신뢰할 수 있는 거래를 보장합니다.'
        : language === 'mn'
        ? 'Бид албан ёсны автомашины дилерийн лицензтэй бөгөөд найдвартай, аюулгүй арилжаа хийх боломжтой.'
        : language === 'ru'
        ? 'Мы имеем официальную лицензию автомобильного дилера, обеспечивая безопасные и надёжные сделки.'
        : 'We hold an official car dealer license, ensuring safe and reliable transactions.',
    },
    {
      icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01',
      title: t.exportRegistration,
      description: language === 'ko'
        ? '정식 수출업 등록을 완료하여 합법적인 차량 수출 서비스를 제공합니다.'
        : language === 'mn'
        ? 'Бид албан ёсоор бүртгэлтэй экспортын компани бөгөөд хууль ёсны дагуу машин экспортлох үйлчилгээ үзүүлдэг.'
        : language === 'ru'
        ? 'Мы официально зарегистрированы как экспортёр и предоставляем легальные услуги по экспорту автомобилей.'
        : 'We are officially registered as an exporter and provide legal vehicle export services.',
    },
    {
      icon: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
      title: t.oneStopService,
      description: language === 'ko'
        ? '차량 선택부터 구매, 운송, 통관까지 모든 과정을 원스톱으로 처리해 드립니다.'
        : language === 'mn'
        ? 'Машин сонгохоос эхлээд худалдан авах, тээвэрлэх, гаалийн бүрдүүлэлт хүртэл бүх үйл явцыг нэг дор шийдвэрлэж өгнө.'
        : language === 'ru'
        ? 'Мы обеспечиваем полный цикл услуг: от выбора автомобиля до покупки, доставки и таможенного оформления.'
        : 'We provide comprehensive service from vehicle selection to purchase, shipping, and customs clearance.',
    },
  ];

  const stats = [
    {
      value: '10+',
      label: language === 'ko' ? '년 경력' : language === 'mn' ? 'Жилийн туршлага' : language === 'ru' ? 'Лет опыта' : 'Years Experience',
    },
    {
      value: '500+',
      label: language === 'ko' ? '수출 실적' : language === 'mn' ? 'Экспортлосон машин' : language === 'ru' ? 'Экспортировано авто' : 'Vehicles Exported',
    },
    {
      value: '98%',
      label: language === 'ko' ? '고객 만족도' : language === 'mn' ? 'Үйлчлүүлэгчийн сэтгэл ханамж' : language === 'ru' ? 'Удовлетворённость' : 'Customer Satisfaction',
    },
  ];

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section with Large Image */}
      <div className="relative h-[400px] md:h-[500px]">
        <Image
          src="/images/cars-export.png"
          alt="Car Export Terminal"
          fill
          className="object-cover"
          priority
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent" />
        <div className="absolute inset-0 flex items-end">
          <div className="container mx-auto px-4 pb-12">
            <div className="max-w-4xl">
              <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">{t.aboutTitle}</h1>
              <p className="text-xl text-gray-200">{t.aboutSubtitle}</p>
            </div>
          </div>
        </div>
      </div>

      {/* Company Introduction */}
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-4xl mx-auto">
          <div className="bg-white rounded-lg shadow-md p-8 md:p-12">
            <h2 className="text-2xl font-bold text-gray-800 mb-6">{t.companyIntro}</h2>
            <div className="prose max-w-none text-gray-600">
              {language === 'ko' ? (
                <>
                  <p className="mb-4">
                    <strong>주식회사 그란테크</strong>는 IT 기술과 자동차 수출 사업을 결합한 혁신적인 기업입니다.
                    우리는 한국에서 몽골로의 중고차 수출에 특화되어 있으며, 고객에게 최상의 서비스를 제공하기 위해
                    노력하고 있습니다.
                  </p>
                  <p className="mb-4">
                    그란테크는 공인 자동차 딜러 자격과 수출업 등록을 보유하고 있어, 합법적이고 투명한 거래를
                    보장합니다. IT 기술을 활용하여 차량 검색부터 구매, 운송, 통관까지 모든 과정을 효율적으로
                    관리하며, 고객에게 실시간으로 진행 상황을 제공합니다.
                  </p>
                  <p>
                    우리의 목표는 한국 중고차 시장의 우수한 품질을 몽골 시장에 연결하여, 양국 간의 자동차 무역을
                    활성화하는 것입니다. 신뢰와 품질을 바탕으로 최고의 파트너가 되겠습니다.
                  </p>
                </>
              ) : language === 'mn' ? (
                <>
                  <p className="mb-4">
                    <strong>Грантек ХХК</strong> нь мэдээллийн технологи болон автомашины экспортын бизнесийг хослуулсан
                    шинэлэг компани юм. Бид Солонгосоос Монгол руу хуучин машин экспортлоход мэргэшсэн бөгөөд
                    үйлчлүүлэгчдэд хамгийн сайн үйлчилгээ үзүүлэхийг зорьдог.
                  </p>
                  <p className="mb-4">
                    Грантек нь албан ёсны автомашины дилерийн лицензтэй, экспортлогчоор бүртгэлтэй учир хууль ёсны,
                    ил тод арилжаа хийх баталгаа болдог. Мэдээллийн технологийг ашиглан машин хайхаас эхлээд худалдан
                    авах, тээвэрлэх, гаалийн бүрдүүлэлт хүртэлх бүх үйл явцыг үр ашигтай удирдаж, үйлчлүүлэгчдэд
                    бодит цагийн мэдээлэл өгдөг.
                  </p>
                  <p>
                    Бидний зорилго бол Солонгосын хуучин машины зах зээлийн өндөр чанарыг Монголын зах зээлтэй
                    холбож, хоёр орны хоорондын автомашины худалдааг идэвхжүүлэх явдал юм. Итгэл найдвар, чанарт
                    тулгуурлан шилдэг түнш болохыг зорьж байна.
                  </p>
                </>
              ) : language === 'ru' ? (
                <>
                  <p className="mb-4">
                    <strong>Grantech Co., LTD</strong> — инновационная компания, объединяющая IT-технологии и бизнес
                    по экспорту автомобилей. Мы специализируемся на экспорте подержанных автомобилей из Кореи
                    в Монголию и стремимся предоставлять клиентам услуги высочайшего качества.
                  </p>
                  <p className="mb-4">
                    Grantech имеет официальную лицензию автомобильного дилера и регистрацию экспортёра, что
                    гарантирует законные и прозрачные сделки. Используя IT-технологии, мы эффективно управляем
                    всеми процессами — от поиска автомобиля до покупки, доставки и таможенного оформления,
                    предоставляя клиентам информацию в режиме реального времени.
                  </p>
                  <p>
                    Наша цель — связать высокое качество корейского рынка подержанных автомобилей с монгольским
                    рынком, активизируя торговлю автомобилями между двумя странами. Мы стремимся стать лучшим
                    партнёром, основываясь на доверии и качестве.
                  </p>
                </>
              ) : (
                <>
                  <p className="mb-4">
                    <strong>Grantech Co., LTD</strong> is an innovative company combining IT technology with the
                    automobile export business. We specialize in exporting used cars from Korea to Mongolia and
                    strive to provide the best service to our customers.
                  </p>
                  <p className="mb-4">
                    Grantech holds an official car dealer license and export registration, ensuring legal and
                    transparent transactions. Utilizing IT technology, we efficiently manage all processes from
                    vehicle search to purchase, shipping, and customs clearance, providing customers with
                    real-time progress updates.
                  </p>
                  <p>
                    Our goal is to connect the excellent quality of the Korean used car market with the Mongolian
                    market, activating automobile trade between the two countries. We aim to be the best partner
                    based on trust and quality.
                  </p>
                </>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Stats Section */}
      <div className="bg-primary-600 text-white py-12">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto grid grid-cols-3 gap-8">
            {stats.map((stat, index) => (
              <div key={index} className="text-center">
                <div className="text-4xl md:text-5xl font-bold mb-2">{stat.value}</div>
                <div className="text-primary-100">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Services Section */}
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-2xl font-bold text-gray-800 text-center mb-12">{t.ourServices}</h2>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {services.map((service, index) => (
              <div key={index} className="bg-white rounded-lg shadow-md p-6 text-center">
                <div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <svg className="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={service.icon} />
                  </svg>
                </div>
                <h3 className="text-lg font-semibold text-gray-800 mb-3">{service.title}</h3>
                <p className="text-gray-600 text-sm">{service.description}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Process Section */}
      <div className="bg-gray-100 py-16">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-2xl font-bold text-gray-800 text-center mb-12">{t.processFlow}</h2>

            <div className="relative">
              {/* Timeline Line */}
              <div className="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-primary-200 -translate-x-1/2"></div>

              {/* Process Steps */}
              <div className="space-y-8">
                {[
                  {
                    step: 1,
                    title: language === 'ko' ? '차량 검색 요청' : language === 'mn' ? 'Машин хайх хүсэлт' : language === 'ru' ? 'Запрос на поиск' : 'Request Search',
                    desc: language === 'ko' ? '원하시는 차량 조건을 알려주세요' : language === 'mn' ? 'Хүссэн машины шалгуураа хэлнэ үү' : language === 'ru' ? 'Укажите параметры желаемого автомобиля' : 'Tell us your desired vehicle criteria',
                  },
                  {
                    step: 2,
                    title: language === 'ko' ? '전문가 검토' : language === 'mn' ? 'Мэргэжилтний хяналт' : language === 'ru' ? 'Экспертная проверка' : 'Expert Review',
                    desc: language === 'ko' ? '24시간 내에 맞춤 차량을 찾아드립니다' : language === 'mn' ? '24 цагийн дотор тохирох машин олж өгнө' : language === 'ru' ? 'Найдём подходящие варианты в течение 24 часов' : 'We find matching vehicles within 24 hours',
                  },
                  {
                    step: 3,
                    title: language === 'ko' ? '구매 및 결제' : language === 'mn' ? 'Худалдан авалт' : language === 'ru' ? 'Покупка и оплата' : 'Purchase & Payment',
                    desc: language === 'ko' ? '선택하신 차량을 안전하게 구매합니다' : language === 'mn' ? 'Сонгосон машинаа аюулгүй худалдаж авна' : language === 'ru' ? 'Безопасная покупка выбранного автомобиля' : 'Safely purchase your selected vehicle',
                  },
                  {
                    step: 4,
                    title: language === 'ko' ? '운송 및 통관' : language === 'mn' ? 'Тээвэр ба гааль' : language === 'ru' ? 'Доставка и таможня' : 'Shipping & Customs',
                    desc: language === 'ko' ? '인천에서 울란바토르까지 안전하게 운송합니다' : language === 'mn' ? 'Инчоноос Улаанбаатар хүртэл аюулгүй тээвэрлэнэ' : language === 'ru' ? 'Безопасная доставка из Инчхона в Улан-Батор' : 'Safe shipping from Incheon to Ulaanbaatar',
                  },
                  {
                    step: 5,
                    title: language === 'ko' ? '인수 완료' : language === 'mn' ? 'Хүлээн авалт' : language === 'ru' ? 'Получение' : 'Delivery Complete',
                    desc: language === 'ko' ? '몽골에서 차량을 인수하세요' : language === 'mn' ? 'Монголд машинаа хүлээн аваарай' : language === 'ru' ? 'Получите автомобиль в Монголии' : 'Receive your vehicle in Mongolia',
                  },
                ].map((item, index) => (
                  <div key={item.step} className={`flex items-center gap-6 ${index % 2 === 1 ? 'md:flex-row-reverse' : ''}`}>
                    <div className="flex-1 text-right md:text-left">
                      {index % 2 === 0 && (
                        <div className="bg-white rounded-lg shadow-md p-6">
                          <div className="text-primary-600 font-bold mb-2">Step {item.step}</div>
                          <h3 className="text-lg font-semibold text-gray-800 mb-2">{item.title}</h3>
                          <p className="text-gray-600 text-sm">{item.desc}</p>
                        </div>
                      )}
                    </div>
                    <div className="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center text-white font-bold z-10">
                      {item.step}
                    </div>
                    <div className="flex-1">
                      {index % 2 === 1 && (
                        <div className="bg-white rounded-lg shadow-md p-6">
                          <div className="text-primary-600 font-bold mb-2">Step {item.step}</div>
                          <h3 className="text-lg font-semibold text-gray-800 mb-2">{item.title}</h3>
                          <p className="text-gray-600 text-sm">{item.desc}</p>
                        </div>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-2xl mx-auto text-center">
          <h2 className="text-2xl font-bold text-gray-800 mb-4">{t.readyToFindYourCar}</h2>
          <p className="text-gray-600 mb-8">{t.browseOurCollection}</p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              href="/request"
              className="bg-primary-600 text-white px-8 py-3 rounded-lg hover:bg-primary-700 transition font-medium"
            >
              {t.requestVehicle}
            </Link>
            <Link
              href="/contact"
              className="bg-gray-200 text-gray-800 px-8 py-3 rounded-lg hover:bg-gray-300 transition font-medium"
            >
              {t.contactUs}
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}