import { mdiFileDocumentOutline, mdiMessageTextFastOutline, mdiPackageVariantClosed, mdiTruckFastOutline } from '@mdi/js';
import type { ReactElement } from 'react';
import React from 'react';

import BaseIcon from '../components/BaseIcon';
import MarketingLayout from '../components/marketing/MarketingLayout';
import MarketingPageHero from '../components/marketing/MarketingPageHero';
import MarketingSeo from '../components/marketing/MarketingSeo';
import MarketingSection from '../components/marketing/MarketingSection';
import LayoutGuest from '../layouts/Guest';

const logisticsPillars = [
  {
    icon: mdiFileDocumentOutline,
    title: 'Documentation handling',
    description:
      'Export paperwork is managed with care to support smoother communication and reduce uncertainty for international buyers.',
  },
  {
    icon: mdiPackageVariantClosed,
    title: 'Shipment preparation',
    description:
      'Lots are prepared for export with disciplined packaging, timing coordination, and readiness checks before dispatch.',
  },
  {
    icon: mdiTruckFastOutline,
    title: 'Route coordination',
    description:
      'The logistics chain is organized from Addis Ababa to Djibouti and onward to destination markets with responsive updates.',
  },
  {
    icon: mdiMessageTextFastOutline,
    title: 'Buyer communication',
    description:
      'Prompt communication keeps importers, roasters, and distributors informed throughout the export workflow.',
  },
];

const timeline = [
  'Lot confirmation and shipment planning',
  'Internal document preparation and export coordination',
  'Movement from origin handling points toward Djibouti',
  'Final export dispatch with clear buyer communication',
];

export default function LogisticsExportPage() {
  return (
    <>
      <MarketingSeo
        title="Logistics & Export"
        description="Learn how Alem Desta Coffee Export coordinates documentation, shipment preparation, and export communication from Ethiopia to global markets."
      />
      <MarketingLayout>
        <MarketingPageHero
          eyebrow="Logistics & export"
          title="Export coordination that feels disciplined, responsive, and globally ready"
          description="For premium buyers, logistics is part of trust. We present the export chain with the same clarity and professionalism expected from the coffee itself."
          image="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1400&q=80"
        />

        <MarketingSection
          eyebrow="Operational confidence"
          title="The logistics side of the business is built to reduce friction"
          description="This page gives buyers a concise view of how coffee moves from Ethiopian origin into an organized export workflow."
        >
          <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
            {logisticsPillars.map((item) => (
              <div
                key={item.title}
                className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-6 shadow-[0_20px_65px_rgba(20,38,29,0.06)]"
              >
                <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F4F1E6] text-[#1F3A2D]">
                  <BaseIcon path={item.icon} />
                </div>
                <h2 className="font-brand-display mt-5 text-2xl text-[#1F3A2D]">{item.title}</h2>
                <p className="mt-4 text-sm leading-7 text-[#556257]">{item.description}</p>
              </div>
            ))}
          </div>
        </MarketingSection>

        <MarketingSection
          eyebrow="Export flow"
          title="A simple view of how the shipment process is organized"
          description="The sequence below reinforces a premium message: disciplined coffee handling, timely coordination, and dependable communication."
          className="bg-[#F8FAF4]"
        >
          <div className="grid gap-4 lg:grid-cols-2">
            {timeline.map((step, index) => (
              <div
                key={step}
                className="flex items-center gap-4 rounded-[1.5rem] border border-[#1F3A2D]/8 bg-white px-5 py-4 shadow-[0_18px_55px_rgba(20,38,29,0.05)]"
              >
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#1F3A2D] text-sm font-semibold text-[#F4F1E6]">
                  {index + 1}
                </div>
                <p className="text-sm leading-7 text-[#556257]">{step}</p>
              </div>
            ))}
          </div>
        </MarketingSection>
      </MarketingLayout>
    </>
  );
}

LogisticsExportPage.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};
