import {
  mdiEarth,
  mdiLeaf,
  mdiMapMarker,
  mdiShieldCheck,
  mdiTruckFastOutline,
} from '@mdi/js';
import type { ReactElement } from 'react';
import React from 'react';

import BaseIcon from '../components/BaseIcon';
import MarketingButton from '../components/marketing/MarketingButton';
import MarketingLayout from '../components/marketing/MarketingLayout';
import MarketingSection from '../components/marketing/MarketingSection';
import MarketingSeo from '../components/marketing/MarketingSeo';
import NewsletterForm from '../components/marketing/NewsletterForm';
import {
  brand,
  exportServices,
  featureHighlights,
  galleryItems,
  origins,
  testimonials,
} from '../components/marketing/marketingData';
import LayoutGuest from '../layouts/Guest';

const statItems = [
  { label: 'Origin-driven sourcing', value: 'Ethiopia first' },
  { label: 'Export route', value: 'Addis Ababa → Djibouti → Global markets' },
  { label: 'Buyer focus', value: 'Roasters, importers, distributors, wholesalers' },
];

const trustPillars = [
  {
    icon: mdiShieldCheck,
    title: 'Trust & transparency',
    description: 'Clear communication, honest documentation, and disciplined follow-through for international buyers.',
  },
  {
    icon: mdiMapMarker,
    title: 'Origin expertise',
    description: 'Regional understanding supports lot selection aligned with buyer taste profiles and sourcing goals.',
  },
  {
    icon: mdiTruckFastOutline,
    title: 'Export reliability',
    description: 'A structured logistics chain supports timely movement from origin to destination.',
  },
  {
    icon: mdiLeaf,
    title: 'Responsible sourcing',
    description: 'Sustainability is treated as a business responsibility, not a campaign message.',
  },
];

export default function HomePage() {
  return (
    <>
      <MarketingSeo
        title="Ethiopian Premium Coffee Export"
        description="Premium Ethiopian coffee exporter connecting origin, traceability, and global buyer confidence with elegant, professional service."
      />
      <MarketingLayout>
        <section className="relative -mt-[88px] overflow-hidden bg-[#16271F] px-5 pb-16 pt-36 text-white lg:px-8 lg:pb-24 lg:pt-44">
          <div className="absolute inset-0">
            <img
              className="h-full w-full scale-[1.02] object-cover opacity-32 saturate-[0.82]"
              loading="eager"
              src="https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=1600&q=80"
              alt="Ethiopian coffee farm"
            />
            <div className="absolute inset-0 bg-[linear-gradient(135deg,rgba(18,38,29,0.88),rgba(31,58,45,0.72),rgba(18,38,29,0.9))]" />
          </div>

          <div className="coffee-fade-in relative mx-auto grid max-w-7xl gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-end">
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.38em] text-[#B7C78B]">Specialty green coffee export</p>
              <h1 className="font-brand-display mt-6 max-w-4xl text-5xl leading-[1.05] text-[#F4F1E6] md:text-7xl">
                Ethiopian Premium Coffee – Sourced with Experience, Exported with Integrity
              </h1>
              <p className="mt-6 max-w-3xl text-lg leading-8 text-white/78">
                Achieving premium coffee excellence from its origin.
              </p>
              <p className="mt-6 max-w-3xl text-base leading-8 text-white/72">
                {brand.name} bridges Ethiopian premium coffee producers with global buyers, focusing on traceability,
                single-origin green coffee sourcing, export-ready preparation, and uncompromising quality.
              </p>
              <div className="mt-10 flex flex-col gap-4 sm:flex-row">
                <MarketingButton href="/contact?type=request_samples">Request Samples</MarketingButton>
                <MarketingButton href="/contact?type=get_a_quote" variant="secondary">
                  Get a Quote
                </MarketingButton>
              </div>
            </div>

            <div className="rounded-[2rem] border border-white/10 bg-white/10 p-6 backdrop-blur-md shadow-[0_30px_80px_rgba(0,0,0,0.25)] md:p-8">
              <p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#B7C78B]">Why buyers trust us</p>
              <div className="mt-8 space-y-5">
                {statItems.map((item) => (
                  <div key={item.label} className="border-b border-white/10 pb-5 last:border-b-0 last:pb-0">
                    <p className="text-sm uppercase tracking-[0.28em] text-white/48">{item.label}</p>
                    <p className="mt-2 text-lg font-medium text-white">{item.value}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        <MarketingSection
          eyebrow="Immediate confidence"
          title="A refined sourcing experience for global coffee buyers"
          description="The first impression international buyers need is clarity: where coffee comes from, how quality is protected, and whether export communication will be dependable. This website presents that trust story with elegance and precision."
        >
          <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
            {trustPillars.map((item) => (
              <div key={item.title} className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-6 shadow-[0_20px_65px_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={item.icon} />
                </div>
                <h3 className="font-brand-display mt-5 text-2xl text-[#1F3A2D]">{item.title}</h3>
                <p className="mt-3 text-sm leading-7 text-[#556257]">{item.description}</p>
              </div>
            ))}
          </div>
        </MarketingSection>

        <MarketingSection
          eyebrow="Feature highlights"
          title="Built around traceability, premium handling, and long-term export partnerships"
          description="Each highlight below mirrors the core buying questions of roasters, green coffee importers, and wholesale partners evaluating a supplier relationship."
          centered
          className="bg-[#F8FAF4]"
        >
          <div className="grid gap-6 lg:grid-cols-2 xl:grid-cols-4">
            {featureHighlights.map((item) => (
              <div key={item.title} className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-7 shadow-[0_20px_70px_rgba(20,38,29,0.07)]">
                <h3 className="font-brand-display text-2xl text-[#1F3A2D]">{item.title}</h3>
                <p className="mt-4 text-sm leading-7 text-[#556257]">{item.description}</p>
              </div>
            ))}
          </div>
        </MarketingSection>

        <MarketingSection
          eyebrow="Visual origin story"
          title="From farms to cupping tables to export readiness"
          description="The buyer journey starts with visual confidence: clean origin imagery, disciplined processing, and a clear sense of how coffee moves professionally toward shipment."
        >
          <div className="grid gap-6 md:grid-cols-2">
            {galleryItems.map((item) => (
              <article key={item.title} className="group overflow-hidden rounded-[2rem] bg-white shadow-[0_24px_70px_rgba(20,38,29,0.08)]">
                <div className="relative h-72 overflow-hidden">
                  <img
                    className="h-full w-full object-cover saturate-[0.88] transition duration-700 group-hover:scale-105"
                    loading="lazy"
                    src={item.image}
                    alt={item.title}
                  />
                  <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(18,38,29,0.08),rgba(18,38,29,0),rgba(18,38,29,0.28))]" />
                </div>
                <div className="p-6">
                  <h3 className="font-brand-display text-2xl text-[#1F3A2D]">{item.title}</h3>
                  <p className="mt-3 text-sm leading-7 text-[#556257]">{item.caption}</p>
                </div>
              </article>
            ))}
          </div>
        </MarketingSection>

        <MarketingSection
          eyebrow="Origin snapshots"
          title="Distinctive Ethiopian regions, each with its own flavor narrative"
          description="A quick regional preview gives buyers a sense of sourcing depth before they request samples or a tailored quote."
          className="bg-[#F4F1E6]/45"
        >
          <div className="grid gap-6 lg:grid-cols-3">
            {origins.slice(0, 3).map((item) => (
              <div 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-56 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.24))]" />
                </div>
                <div className="p-6">
                  <p className="text-sm uppercase tracking-[0.28em] text-[#9FB06F]">{item.altitude}</p>
                  <h3 className="font-brand-display mt-3 text-2xl text-[#1F3A2D]">{item.name}</h3>
                  <p className="mt-3 text-sm leading-7 text-[#556257]">{item.profile}</p>
                </div>
              </div>
            ))}
          </div>
          <div className="mt-8">
            <MarketingButton href="/coffee-origins" variant="ghost">
              Explore all origins
            </MarketingButton>
          </div>
        </MarketingSection>

        <MarketingSection
          eyebrow="Export capability"
          title="Professional export services built for international buyers"
          description="Reliable logistics, internal documentation handling, and strong communication help create a premium corporate buying experience."
        >
          <div className="grid gap-4 md:grid-cols-2">
            {exportServices.slice(0, 4).map((item) => (
              <div key={item} className="flex gap-4 rounded-[1.5rem] border border-[#1F3A2D]/8 bg-white p-5 shadow-[0_18px_60px_rgba(20,38,29,0.06)]">
                <div className="mt-1 text-[#9FB06F]">
                  <BaseIcon path={mdiEarth} />
                </div>
                <p className="text-sm leading-7 text-[#556257]">{item}</p>
              </div>
            ))}
          </div>
        </MarketingSection>

        <MarketingSection
          eyebrow="Testimonials"
          title="Commercial credibility, with room to grow into buyer proof"
          description="These premium placeholders establish the intended testimonial zone so future buyer feedback can be added without redesigning the site."
          centered
          className="bg-[#F8FAF4]"
        >
          <div className="grid gap-6 lg:grid-cols-2">
            {testimonials.map((item) => (
              <blockquote key={item.author} className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-7 shadow-[0_18px_60px_rgba(20,38,29,0.06)]">
                <p className="font-brand-display text-2xl leading-10 text-[#1F3A2D]">“{item.quote}”</p>
                <footer className="mt-6 text-sm font-medium uppercase tracking-[0.24em] text-[#72816F]">{item.author}</footer>
              </blockquote>
            ))}
          </div>
        </MarketingSection>

        <MarketingSection
          eyebrow="Stay informed"
          title="Subscribe for sourcing updates"
          description="Newsletter sign-up is already connected to the admin subscriber list, giving your team a real conversion path from day one."
          className="bg-[#1F3A2D] text-white"
        >
          <div className="grid gap-10 lg:grid-cols-[1fr_0.9fr] lg:items-center">
            <div>
              <h3 className="font-brand-display text-4xl text-[#F4F1E6]">Receive buyer-focused green coffee updates</h3>
              <p className="mt-5 max-w-2xl text-base leading-8 text-white/72">
                Join the list for availability updates, new origin highlights, and company announcements shaped for professional buyers.
              </p>
            </div>
            <div className="rounded-[2rem] border border-white/10 bg-white/10 p-6 backdrop-blur-md">
              <NewsletterForm source="home_cta" />
            </div>
          </div>
        </MarketingSection>
      </MarketingLayout>
    </>
  );
}

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