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

export default function AboutPage() {
  return (
    <>
      <MarketingSeo
        title="About Alem Desta Coffee Export"
        description="Founder story, Ethiopian coffee heritage, U.S. market exposure, and the roots behind Alem Desta Coffee Export."
      />
      <MarketingLayout>
        <MarketingPageHero
          eyebrow="About us"
          title="A heritage-led coffee export business shaped by global perspective"
          description="Our story combines Ethiopian coffee culture, family tradition, U.S. market exposure, and practical export learning grounded in real relationships."
          image="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1400&q=80"
        />

        <MarketingSection
          eyebrow="Founder story"
          title="From Ethiopian coffee culture to global buyer understanding"
          description="The company story is personal, emotional, and practical — exactly the mix international buyers often trust most when choosing who to work with."
        >
          <div className="grid gap-6 lg:grid-cols-[0.8fr_1.2fr]">
            <div className="rounded-[2rem] bg-[#1F3A2D] p-8 text-white shadow-[0_24px_80px_rgba(20,38,29,0.14)]">
              <p className="text-sm uppercase tracking-[0.32em] text-[#B7C78B]">What shapes the company</p>
              <ul className="mt-6 space-y-4 text-sm leading-7 text-white/78">
                <li>• Ethiopian coffee culture upbringing</li>
                <li>• Family coffee tradition</li>
                <li>• U.S. experience in Chicago, San Francisco, and the DMV</li>
                <li>• Return to Ethiopia with renewed business purpose</li>
                <li>• Export learning through close family mentorship</li>
              </ul>
            </div>
            <div className="space-y-6">
              {founderStory.map((paragraph) => (
                <div key={paragraph} className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-7 shadow-[0_18px_60px_rgba(20,38,29,0.06)]">
                  <p className="text-base leading-8 text-[#556257]">{paragraph}</p>
                </div>
              ))}
            </div>
          </div>
        </MarketingSection>
      </MarketingLayout>
    </>
  );
}

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