import { ImagePath } from "@/utils/imagePath";
import { Texts } from "@/utils/texts";

interface FractalCharacteristic {
  number: number;
  title: string;
  description: string;
  bgColor: string;
}

const characteristics: FractalCharacteristic[] = [
  {
    number: 1,
    title: "Self-Similarity",
    description: "Just as a fractal shape repeats the same pattern at different scales, a fractal organization applies the same leadership principles, values, and practices across all levels and teams. This creates a unified culture and ensures consistency in decision-making and behavior.",
    bgColor: "yellow-50"
  },
  {
    number: 2,
    title: "Decentralization",
    description: "A fractal organization empowers teams and individuals to operate autonomously, make decisions, and take ownership of their work. Leadership is distributed, and authority is delegated to the most appropriate levels, fostering agility and adaptability.",
    bgColor: "green-50"
  },
  {
    number: 3,
    title: "Scalability",
    description: "The fractal structure is inherently scalable, allowing the organization to grow and adapt without losing its core identity and principles. As new teams or departments are added, they adopt the same fractal structure, ensuring seamless integration and alignment.",
    bgColor: "gray-50"
  },
  {
    number: 4,
    title: "Flexibility and Adaptability",
    description: "The fractal structure promotes flexibility and adaptability by enabling teams to respond quickly to changes and challenges. Each team can make decisions and take actions that are best suited to their specific context, while still adhering to the overall organizational principles.",
    bgColor: "yellow-50"
  },
  {
    number: 5,
    title: "Collaboration and Communication",
    description: "Fractal organizations encourage open communication and collaboration across levels and teams. Information flows freely, and teams work together to achieve shared goals and objectives.",
    bgColor: "green-50"
  },
  {
    number: 6,
    title: "Holistic Approach",
    description: "In a fractal organization, each team or unit is seen as a microcosm of the whole, reflecting the broader values and mission of the organization. This holistic approach fosters a sense of unity and purpose, as each team contributes to the larger vision. A fractal structure in leadership allows organizations to maintain a consistent culture and set of principles while remaining agile, adaptable, and responsive to change. It empowers teams and individuals to take initiative, fosters collaboration, and enables the organization to scale effectively.",
    bgColor: "blue-50"
  }
];

export function StoryTwo() {
  return (
    <>
      <p className="text-xl md:text-2xl font-medium text-gray-900">
        A fractal structure in the context of organizational leadership refers
        to a self-similar, decentralized, and scalable organizational model that
        is inspired by the concept of fractals in mathematics and nature.
        Fractals are geometric shapes that exhibit the same pattern or structure
        at different scales, regardless of the level of magnification. In a
        fractal organization, the same principles, values, and decision-making
        processes are replicated at every level, creating a consistent and
        cohesive structure.
      </p>
      <p className="text-xl md:text-2xl font-semibold text-gray-900 mt-10 dark:text-white ">
        <span className="text-transparent bg-clip-text bg-gradient-to-r to-purple-500 from-orange-500">
          Key characteristics of a fractal organizational structure include:
        </span>
      </p>
      <ul className="text-lg font-semibold text-gray-700 dark:text-gray-900">
        {characteristics.map((char, index) => (
          <li key={index}>
            <div className="w-full flex items-start justify-start space-x-12 mt-16">
              <div className={`w-1/12 `}>
                <h1 className={`text-3xl w-24 h-24 rounded-full bg-${char.bgColor} flex items-center justify-center`}>0{char.number}</h1>
              </div>
              <div className="w-11/12 space-y-0.5 font-medium dark:text-white text-left">
                <div className="w-full text-xl md:text-2xl">{char.title}</div>
                <div>{char.description}</div>
              </div>
            </div>
          </li>
        ))}
      </ul>
    </>
  );
}
