import { mdiHandshakeOutline, mdiLeaf, mdiMedalOutline, mdiScaleBalance, mdiSeedOutline, mdiShieldCheck } 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 { principles, values } from '../components/marketing/marketingData';
import LayoutGuest from '../layouts/Guest';

const icons = [mdiShieldCheck, mdiSeedOutline, mdiMedalOutline, mdiHandshakeOutline, mdiScaleBalance, mdiLeaf];

export default function VisionMissionValuesPage() {
  return (
    <>
      <MarketingSeo
        title="Vision Mission and Values"
        description="Vision, mission, values, and business principles that define Alem Desta Coffee Export."
      />
      <MarketingLayout>
        <MarketingPageHero
          eyebrow="Vision, mission & values"
          title="A long-term export business built on trust, quality, and partnership"
          description="International buyers need more than attractive language. They need a clear statement of vision, mission, principles, and values that signal operational maturity."
          image="https://images.unsplash.com/photo-1442512595331-e89e73853f31?auto=format&fit=crop&w=1400&q=80"
        />

        <MarketingSection title="Vision" description="To become a globally trusted Ethiopian coffee exporter known for quality, traceability, and long-term partnerships." />
        <MarketingSection title="Mission" description="To export premium Ethiopian coffee with strict quality control, transparency, and sustainable partnerships." className="pt-0" />

        <MarketingSection
          eyebrow="Core values"
          title="The values that guide how we source, communicate, and deliver"
          centered
          className="bg-[#F8FAF4]"
        >
          <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
            {values.map((item, index) => (
              <div key={item.title} className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-7 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={icons[index]} />
                </div>
                <h3 className="font-brand-display mt-5 text-2xl text-[#1F3A2D]">{item.title}</h3>
                <p className="mt-4 text-sm leading-7 text-[#556257]">{item.description}</p>
              </div>
            ))}
          </div>
        </MarketingSection>

        <MarketingSection
          eyebrow="Principles"
          title="Execution principles buyers can recognize immediately"
          description="These principles turn brand values into supplier behavior."
        >
          <div className="grid gap-4 md:grid-cols-2">
            {principles.map((item) => (
              <div key={item} className="rounded-[1.5rem] border border-[#1F3A2D]/8 bg-white px-5 py-4 text-sm font-medium text-[#1F3A2D] shadow-[0_18px_60px_rgba(20,38,29,0.05)]">
                {item}
              </div>
            ))}
          </div>
        </MarketingSection>
      </MarketingLayout>
    </>
  );
}

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