/* eslint-disable @next/next/no-img-element */
"use client";

import Title from "@/components/atoms/Title";
import type { StoryPageData } from "@/utils/strapi";

interface GuidingPrinciplesSectionProps {
  storyData: StoryPageData | null;
}

const GuidingPrinciplesSection = ({
  storyData,
}: GuidingPrinciplesSectionProps) => {
  const principlesTitle =
    storyData?.principlesTitle || "Guiding Principles";
  const principlesSubtitle =
    storyData?.principlesSubtitle ||
    "Our guiding principles are our core behaviors that enable our values to help us achieve our mission and vision";
  const principlesFooterText =
    storyData?.principlesFooterText ||
    "The Navana Way is only as good as our commitment to the vision, the mission, the values and the guiding principles. Let's work together to internalize and embed The Navana Way to shape our organization.";

  // Helper function to get image URL
  const getImageUrl = (imageData: any) => {
    if (!imageData) return "";
    const imageUrl = imageData.url || imageData.data?.attributes?.url;
    if (!imageUrl) return "";
    if (imageUrl.startsWith("http://") || imageUrl.startsWith("https://")) {
      return imageUrl;
    }
    const strapiUrl = process.env.NEXT_PUBLIC_STRAPI_URL || "http://localhost:1337";
    const cleanStrapiUrl = strapiUrl.replace(/\/$/, "");
    const cleanImageUrl = imageUrl.startsWith("/") ? imageUrl : `/${imageUrl}`;
    return `${cleanStrapiUrl}${cleanImageUrl}`;
  };

  const principles = storyData?.principles || [];
  return (
    <section className="bg-[#FAFAFA] py-16 md:py-20 xl:py-24">
      <div className="max-w-5xl mx-auto px-4 md:px-6 xl:px-8">
        {/* Section Title & Subtitle */}
        <div className="text-center mb-10 md:mb-14">
          <Title
            Tag="h2"
            text={principlesTitle}
            className="text-[#28241E] font-times-sans text-[32px] md:text-[40px] lg:text-[48px] leading-[1.1] mb-4 md:mb-6"
          />
          <p className="font-creato font-normal text-[14px] md:text-[15px] lg:text-[16px] text-[#28241E]/80 leading-relaxed tracking-wide max-w-2xl mx-auto">
            {principlesSubtitle}
          </p>
        </div>

        {/* Principles Grid */}
        {/* Mobile: 1 col | Tablet+: 2 cols */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 2xl:gap-8 mb-12 md:mb-16">
          {principles.length > 0
            ? principles.map((principle, index) => {
                const iconUrl =
                  getImageUrl(principle.icon) || "/icons/projects/house.svg";
                return (
                  <div
                    key={index}
                    className={`flex items-center gap-4 py-4 px-5 bg-white border-b border-[#28241E] ${
                      index === principles.length - 1 ? "md:col-span-1" : ""
                    }`}
                  >
                    <img
                      src={iconUrl}
                      alt={principle.label}
                      className="w-7 h-7 md:w-10 md:h-10"
                      style={{
                        filter:
                          "invert(36%) sepia(85%) saturate(1000%) hue-rotate(314deg) brightness(90%) contrast(95%)",
                      }}
                    />
                    <span className="font-creato font-medium text-[13px] md:text-[16px] lg:text-[17px] text-[#28241E] tracking-wide">
                      {principle.label}
                    </span>
                  </div>
                );
              })
            : null}
        </div>

        {/* Footer Text */}
        <div className="hidden xl:block text-center">
          <p className="font-creato font-normal text-[14px] md:text-[15px] lg:text-[16px] text-[#28241E] leading-relaxed tracking-wide max-w-2xl mx-auto">
            {principlesFooterText}
          </p>
        </div>
      </div>
    </section>
  );
};

export default GuidingPrinciplesSection;