import React from "react";

export default function Export() {
  return (
    <div style={{ padding: "10px", maxWidth: "1200px", margin: "0 auto" }}>
      
      {/* Title Section */}
      <div style={{ textAlign: "center",marginTop:"-15px", marginBottom: "20px" }}>
        <h1 style={{  fontSize: "2rem" }}>Export Destinations</h1>
        <p style={{ margin: 0, fontWeight: "400", color: "#555" }}>
          We follow a strict export process to ensure product quality and timely delivery.
        </p>
      </div>

      {/* Main Export Image */}
      <div style={{ textAlign: "center", marginBottom: "40px" }}>
        <img
          src="/images/country/export.png"
          alt="Export Destinations"
          style={{
            width: "100%",
            maxHeight: "550px",
            objectFit: "cover",
            borderRadius: "12px",
            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)"
          }}
        />
      </div>

      {/* Country Flags Grid */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
          gap: "40px",
          padding: "0 10px"
        }}
      >
        
        {/* Country Card Component */}
        {[
          { name: "UK", code: "gb" },
          { name: "Canada", code: "ca" },
          { name: "South Africa", code: "za" },
          { name: "Malaysia", code: "my" },
          { name: "Singapore", code: "sg" },
          { name: "Qatar", code: "qa" },
          { name: "Dubai (UAE)", code: "ae" },
          { name: "Maldives", code: "mv" },
          { name: "Oman", code: "om" }
        ].map((country) => (
          <div
            key={country.code}
            style={{
              textAlign: "center",
              border: "1px solid #ddd",
              padding: "15px",
              borderRadius: "12px",
              backgroundColor: "#fff",
              boxShadow: "0 4px 8px rgba(0, 0, 0, 0.05)",
              transition: "transform 0.3s ease, box-shadow 0.3s ease"
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = "scale(1.05)";
              e.currentTarget.style.boxShadow = "0 8px 16px rgba(0, 0, 0, 0.1)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = "scale(1)";
              e.currentTarget.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.05)";
            }}
          >
            <img
              src={`https://flagcdn.com/w80/${country.code}.png`}
              alt={country.name}
              style={{
                width: "100px",
                height: "90px",
                borderRadius: "8px",
                border: "2px solid #ddd",
                objectFit: "cover"
                
              }}
            />
            <p style={{ marginTop: "10px", fontWeight: "500", color: "#333" }}>
              {country.name}
            </p>
          </div>
        ))}
        
      </div>
    </div>
  );
}
