import {
  mdiCompassOutline,
  mdiLeaf,
  mdiShieldCheckOutline,
  mdiTruckFastOutline,
} from '@mdi/js';
import type { ReactElement } from 'react';
import React from 'react';

import BaseIcon from '../components/BaseIcon';
import MarketingButton from '../components/marketing/MarketingButton';
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 { exportServiceItems } from '../components/marketing/marketingData';
import LayoutGuest from '../layouts/Guest';

const iconByHref = {
  '/coffee-origins': mdiCompassOutline,
  '/quality-control': mdiShieldCheckOutline,
  '/sustainability': mdiLeaf,
  '/logistics-export': mdiTruckFastOutline,
};

const workflowSteps = [
  {
    title: 'Origin matching',
    description:
      'We align buyer taste goals, processing preferences, and market needs with the most suitable Ethiopian origins.',
  },
  {
    title: 'Quality verification',
    description:
      'Lots move through disciplined selection, moisture review, and cupping evaluation before they are prepared for export.',
  },
  {
    title: 'Shipment coordination',
    description:
      'Documentation, communication, and logistics are handled with clarity from Addis Ababa through Djibouti to destination.',
  },
];

export default function ExportServicesPage() {
  return (
    <>
      <MarketingSeo
        title="Export Services"
        description="Explore Alem Desta Coffee Export's service hub covering coffee origins, quality control, sustainability, and logistics coordination for global buyers."
      />
      <MarketingLayout>
        <MarketingPageHero
          eyebrow="Export services"
          title="A premium export hub designed for serious international coffee buyers"
          description="The Export Services page brings every key decision area into one elegant overview — origin selection, quality assurance, sustainability expectations, and shipment coordination."
          image="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1400&q=80"
        />

        <MarketingSection
          eyebrow="Service hub"
          title="Explore the four pillars behind our export offer"
          description="Rather than overcrowding the main navigation, the website groups our detailed export capabilities here in one clear buyer-focused hub."
        >
          <div className="grid gap-6 md:grid-cols-2">
            {exportServiceItems.map((item) => (
              <article
                key={item.href}
                className="rounded-[2rem] border border-[#1F3A2D]/8 bg-white p-7 shadow-[0_20px_65px_rgba(20,38,29,0.06)]"
              >
                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#F4F1E6] text-[#1F3A2D]">
                  <BaseIcon path={iconByHref[item.href as keyof typeof iconByHref]} />
                </div>
                <h2 className="font-brand-display mt-6 text-3xl text-[#1F3A2D]">{item.label}</h2>
                <p className="mt-4 text-sm leading-7 text-[#556257]">{item.description}</p>
                <div className="mt-6">
                  <MarketingButton href={item.href} variant="ghost">
                    View details
                  </MarketingButton>
                </div>
              </article>
            ))}
          </div>
        </MarketingSection>

        <MarketingSection
          eyebrow="Buyer workflow"
          title="How the export relationship is structured"
          description="International buyers need more than storytelling. They need a process that feels organized, transparent, and commercially dependable."
          className="bg-[#F8FAF4]"
        >
          <div className="grid gap-6 lg:grid-cols-3">
            {workflowSteps.map((step, index) => (
              <div
                key={step.title}
                className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-7 shadow-[0_18px_55px_rgba(20,38,29,0.05)]"
              >
                <div className="flex h-11 w-11 items-center justify-center rounded-full bg-[#1F3A2D] text-sm font-semibold text-[#F4F1E6]">
                  {index + 1}
                </div>
                <h3 className="font-brand-display mt-6 text-2xl text-[#1F3A2D]">{step.title}</h3>
                <p className="mt-4 text-sm leading-7 text-[#556257]">{step.description}</p>
              </div>
            ))}
          </div>
          <div className="mt-10 flex flex-col gap-4 sm:flex-row">
            <MarketingButton href="/contact?type=request_samples">Request Samples</MarketingButton>
            <MarketingButton href="/contact?type=get_a_quote" variant="ghost">
              Request a tailored quote
            </MarketingButton>
          </div>
        </MarketingSection>
      </MarketingLayout>
    </>
  );
}

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