import Container from "./Container";

const countries = [
  { name: "انگلستان", flag: "🇬🇧" },
  { name: "فرانسه", flag: "🇫🇷" },
  { name: "ترکیه", flag: "🇹🇷" },
  { name: "هندوستان", flag: "🇮🇳" },
  { name: "چین", flag: "🇨🇳" },
];

export default function ImportCountries() {
  return (
    <section className="py-16 sm:py-20 bg-surface">
      <Container>
        <div className="text-center max-w-xl mx-auto">
          <span className="text-sm font-bold text-accent">شرکای بین‌المللی</span>
          <h2 className="mt-3 text-3xl sm:text-4xl font-extrabold text-primary">
            واردات از تولیدکنندگان معتبر جهانی
          </h2>
          <p className="mt-4 text-foreground">
            آراد آریسمان محصولات خود را عمدتا از تولیدکنندگان معتبر بین‌المللی
            این کشورها وارد می‌کند
          </p>
        </div>

        <div className="mt-12 grid grid-cols-2 sm:grid-cols-5 gap-5">
          {countries.map((c) => (
            <div
              key={c.name}
              className="flex flex-col items-center gap-3 rounded-2xl bg-white border border-black/5 py-8 shadow-sm"
            >
              <span className="text-4xl">{c.flag}</span>
              <span className="font-semibold text-secondary">{c.name}</span>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}
