import { mdiTerrain, mdiWeatherPartlyCloudy, mdiSprout, mdiHumanGreeting } 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 { philosophyPillars } from '../components/marketing/marketingData';
import LayoutGuest from '../layouts/Guest';

const icons = [mdiTerrain, mdiSprout, mdiWeatherPartlyCloudy, mdiHumanGreeting];

export default function CoffeePhilosophyPage() {
  return (
    <>
      <MarketingSeo
        title="Coffee Philosophy"
        description="Coffee excellence begins at origin — patience, altitude, climate, soil, and craftsmanship define premium Ethiopian coffee."
      />
      <MarketingLayout>
        <MarketingPageHero
          eyebrow="Coffee philosophy"
          title="Coffee Excellence Begins at Origin"
          description="Coffee is not industrial. It is crafted — by land, weather, skilled hands, and the patience required to let quality mature naturally."
          image="https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&w=1400&q=80"
        />

        <MarketingSection
          eyebrow="Our belief"
          title="Great coffee is the result of nature and human discipline working together"
          description="This page articulates a premium sourcing philosophy buyers can feel: Ethiopian coffee is a crafted product, not a commodity shortcut."
          centered
        >
          <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
            {philosophyPillars.map((item, index) => (
              <div key={item.title} className="rounded-[1.75rem] border border-[#3E2723]/8 bg-white p-7 shadow-[0_20px_65px_rgba(35,24,18,0.06)]">
                <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F5E9DA] text-[#3E2723]">
                  <BaseIcon path={icons[index]} />
                </div>
                <h3 className="font-brand-display mt-5 text-2xl text-[#3E2723]">{item.title}</h3>
                <p className="mt-4 text-sm leading-7 text-[#5B4A43]">{item.description}</p>
              </div>
            ))}
          </div>
        </MarketingSection>
      </MarketingLayout>
    </>
  );
}

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