import type { ReactElement } from 'react';
import React from 'react';

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

export default function CoffeeOriginsPage() {
  return (
    <>
      <MarketingSeo
        title="Coffee Origins"
        description="Explore Ethiopian coffee regions including Yirgacheffe, Guji, Sidama, Harrar, Limu, and Jimma."
      />
      <MarketingLayout>
        <MarketingPageHero
          eyebrow="Coffee origins"
          title="Regional character that gives Ethiopian coffee its global distinction"
          description="Each origin tells a different flavor story, giving international buyers a practical way to align sourcing decisions with roast goals and customer preferences."
          image="https://images.unsplash.com/photo-1455470956270-4cbb357f60f6?auto=format&fit=crop&w=1400&q=80"
        />

        <MarketingSection
          eyebrow="Origin portfolio"
          title="A curated overview of key coffee-producing regions"
          description="These region cards provide a premium, buyer-friendly snapshot of profile, altitude, and growing context."
        >
          <div className="grid gap-6 lg:grid-cols-2 xl:grid-cols-3">
            {origins.map((item) => (
              <article key={item.name} className="overflow-hidden rounded-[2rem] bg-white shadow-[0_24px_70px_rgba(20,38,29,0.08)]">
                <div className="relative">
                  <img className="h-64 w-full object-cover saturate-[0.9]" loading="lazy" src={item.image} alt={item.name} />
                  <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(18,38,29,0.05),rgba(18,38,29,0),rgba(18,38,29,0.25))]" />
                </div>
                <div className="p-6">
                  <p className="text-sm uppercase tracking-[0.28em] text-[#9FB06F]">{item.altitude}</p>
                  <h2 className="font-brand-display mt-3 text-3xl text-[#1F3A2D]">{item.name}</h2>
                  <p className="mt-4 text-sm leading-7 text-[#556257]">{item.profile}</p>
                  <div className="mt-5 rounded-2xl bg-[#F4F1E6] px-4 py-3 text-sm text-[#556257]">Rainfall: {item.rainfall}</div>
                </div>
              </article>
            ))}
          </div>
        </MarketingSection>
      </MarketingLayout>
    </>
  );
}

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