import { mdiChartWaterfall, mdiCupOutline, mdiWaterOutline } 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 { qualityMetrics, qualityProcesses } from '../components/marketing/marketingData';
import LayoutGuest from '../layouts/Guest';

const processIcons = [mdiWaterOutline, mdiChartWaterfall, mdiCupOutline];

export default function QualityControlPage() {
  return (
    <>
      <MarketingSeo
        title="Quality Control"
        description="Washed, natural, and honey processing workflows with moisture control and cupping evaluation standards."
      />
      <MarketingLayout>
        <MarketingPageHero
          eyebrow="Quality control"
          title="Structured processing and disciplined quality review"
          description="This page turns processing detail into buyer confidence by showing how washed, natural, and honey methods are handled and evaluated."
          image="https://images.unsplash.com/photo-1511920170033-f8396924c348?auto=format&fit=crop&w=1400&q=80"
        />

        <MarketingSection
          eyebrow="Processing systems"
          title="Three process pathways, each explained with clarity"
          description="The goal is simple: make process detail easy to read, visually elegant, and commercially reassuring."
        >
          <div className="grid gap-6 lg:grid-cols-3">
            {qualityProcesses.map((item, index) => (
              <div key={item.title} className="rounded-[1.85rem] border border-[#1F3A2D]/8 bg-white p-7 shadow-[0_24px_70px_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={processIcons[index]} />
                </div>
                <h3 className="font-brand-display mt-5 text-3xl text-[#1F3A2D]">{item.title}</h3>
                <p className="mt-4 text-sm leading-7 text-[#556257]">{item.highlight}</p>
                <div className="mt-6 space-y-3">
                  {item.steps.map((step, stepIndex) => (
                    <div key={step} className="flex items-center gap-3 rounded-2xl bg-[#EEF3E7] px-4 py-3 text-sm text-[#4F5E53]">
                      <span className="flex h-8 w-8 items-center justify-center rounded-full bg-[#1F3A2D] text-xs font-semibold text-[#F4F1E6]">
                        {stepIndex + 1}
                      </span>
                      {step}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </MarketingSection>

        <MarketingSection
          eyebrow="Quality system"
          title="Measured, tasted, and reviewed before export"
          description="Moisture control and cupping evaluation help translate process discipline into export confidence."
          className="bg-[#F8FAF4]"
        >
          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            {qualityMetrics.map((item) => (
              <div key={item} className="rounded-[1.5rem] border border-[#1F3A2D]/8 bg-white px-5 py-4 text-sm leading-7 text-[#556257] shadow-[0_18px_55px_rgba(20,38,29,0.05)]">
                {item}
              </div>
            ))}
          </div>
        </MarketingSection>
      </MarketingLayout>
    </>
  );
}

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