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

export default function SustainabilityPage() {
  return (
    <>
      <MarketingSeo
        title="Sustainability"
        description="Fair payment, ethical sourcing, environmental care, and community development framed as a real business responsibility."
      />
      <MarketingLayout>
        <MarketingPageHero
          eyebrow="Sustainability"
          title="Sustainability is our responsibility, not a marketing claim"
          description="This message anchors the brand in seriousness and credibility, especially for buyers evaluating long-term sourcing relationships."
          image="https://images.unsplash.com/photo-1461988320302-91bde64fc8e4?auto=format&fit=crop&w=1400&q=80"
        />

        <MarketingSection
          eyebrow="Responsible sourcing"
          title="A business approach that respects people, land, and long-term supply"
          description="Sustainability should be visible in sourcing behavior, not only in headlines."
          centered
        >
          <div className="grid gap-6 md:grid-cols-2">
            {sustainabilityPoints.map((item) => (
              <div key={item} className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-7 text-sm leading-7 text-[#556257] shadow-[0_20px_65px_rgba(20,38,29,0.06)]">
                {item}
              </div>
            ))}
          </div>
        </MarketingSection>
      </MarketingLayout>
    </>
  );
}

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