import clsx from 'clsx';
import Heading from '@theme/Heading';
import styles from './styles.module.css';

type FeatureItem = {
  title: string;
  target: string;
  description: JSX.Element;
  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
};

const FeatureList: FeatureItem[] = [
  {
    title: 'Robust Documentation',
    target: 'Everyone',
    Svg: require('@site/static/homepage/icons/Infra.svg').default,
    description: (
      <>
        Access detailed guides, tutorials, and examples to get started quickly,
        whether you're new to web development or an experienced developer.
      </>
    ),
  },
  {
    title: 'Compliance and Standards',
    target: 'Product managers',
    Svg: require('@site/static/homepage/icons/Standards.svg').default,
    description: (
      <>
        Ensure all modules adhere to essential standards and regulations,
        including accessibility, terms of conditions, theming, language support,
        and recovery handling, providing a robust and compliant platform
        experience.
      </>
    ),
  },
  {
    title: 'Reusable Experiences',
    target: 'Product managers & developers',
    Svg: require('@site/static/homepage/icons/Infra.svg').default,
    description: (
      <>
        Benefit from highly reusable components and modules designed to ensure
        consistency and reduce development time.
      </>
    ),
  },
  {
    title: 'Kaltura Player Integration',
    target: 'Product managers',
    Svg: require('@site/static/homepage/icons/Architecture.svg').default,
    description: (
      <>
        Leverage deep integration with the Kaltura player, allowing seamless
        synchronization between the player’s current time and Unisphere modules.
        This enables displaying visual elements on the player area, player seek
        bar, and content modules based on the current playback time.
      </>
    ),
  },
  {
    title: 'Dynamic Workspaces',
    target: 'Product managers & professional services',
    Svg: require('@site/static/homepage/icons/Redundancies.svg').default,
    description: (
      <>
        Effortlessly create and configure an Unisphere workspace at runtime in
        the application, allowing you to adapt to changes and updates without
        significant code modifications.
      </>
    ),
  },
  {
    title: 'Enhanced Developer Experience',
    target: 'Developers',
    Svg: require('@site/static/homepage/icons/Unified.svg').default,
    description: (
      <>
        Take advantage of a robust suite of tools tailored to streamline your
        development workflow. This includes generators, boilerplates, CLI,
        playground applications, Storybook integration, and runtime features
        like theming and translation infrastructure.
      </>
    ),
  },
  {
    title: 'Advanced Customization',
    target: 'Developers',
    Svg: require('@site/static/homepage/icons/Architecture.svg').default,
    description: (
      <>
        For more advanced needs, directly consume components and modules from
        NPM or Yarn. Customize these elements to perfectly suit your specific
        requirements.
      </>
    ),
  },
  {
    title: 'Version Control',
    target: 'Developers',
    Svg: require('@site/static/homepage/icons/Architecture.svg').default,
    description: (
      <>
        Grow confidently with versioned components and modules that effectively
        manage dependencies and ensure backward compatibility.
      </>
    ),
  },
  {
    title: 'Dynamic Workspaces',
    target: 'Professional services',
    Svg: require('@site/static/homepage/icons/Infra.svg').default,
    description: (
      <>
        Effortlessly create and configure an Unisphere workspace at runtime in
        the application, allowing you to adapt to changes and updates without
        significant code modifications.
      </>
    ),
  },
  {
    title: 'Streamlined Delivery',
    target: 'Professional services',
    Svg: require('@site/static/homepage/icons/Speed.svg').default,
    description: (
      <>
        Leverage our platform to accelerate project delivery, minimize risks,
        and ensure successful implementations.
      </>
    ),
  },
  {
    title: 'Enhanced Client Value',
    target: 'Professional services',
    Svg: require('@site/static/homepage/icons/Cost.svg').default,
    description: (
      <>
        Deliver exceptional value to your clients by creating tailored,
        innovative solutions that exceed their expectations.
      </>
    ),
  },
];

function Feature({ title, target, Svg, description }: FeatureItem) {
  return (
    <div className="group relative bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-sm hover:shadow-xl border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:-translate-y-1">
      {/* Gradient background on hover */}
      <div className="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-purple-100/50 dark:from-blue-900/20 dark:to-purple-800/20 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

      <div className="relative z-10">
        {/* Icon with modern styling */}
        <div className="w-16 h-16 mb-6 bg-gradient-to-br from-blue-500 to-purple-400 rounded-xl flex items-center justify-center shadow-lg group-hover:shadow-xl transition-shadow duration-300">
          <Svg className="w-8 h-8 text-white" role="img" />
        </div>

        {/* Content */}
        <div className="space-y-4">
          <div>
            <Heading as="h3" className="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200">
              {title}
            </Heading>
            <div className="inline-flex items-center px-3 py-1 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-sm font-medium rounded-full">
              <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              {target} love this
            </div>
          </div>

          <div className="text-gray-600 dark:text-gray-300 leading-relaxed">
            {description}
          </div>
        </div>
      </div>
    </div>
  );
}

export default function HomepageFeatures(): JSX.Element {
  return (
    <section className="py-20 px-4 max-w-7xl mx-auto">
      {/* Modern section header */}
      <div className="text-center mb-16">
        <Heading as="h2" className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
          <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-400 dark:from-blue-400 dark:to-purple-300">
            The Unisphere
          </span>
          {' '}
          <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400 dark:from-purple-300 dark:to-pink-300">
            Advantage
          </span>
        </Heading>
        <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
          Discover the powerful features that make Unisphere the perfect choice for modern development teams
        </p>
      </div>

      {/* Features grid with modern responsive design */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {FeatureList.map((props, idx) => (
          <Feature key={idx} {...props} />
        ))}
      </div>

      {/* Call-to-action section */}
      <div className="mt-16 text-center">
        <div className="bg-gradient-to-r from-blue-50 to-purple-100 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-8">
          <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
            Ready to get started?
          </h3>
          <p className="text-gray-600 dark:text-gray-300 mb-6 max-w-2xl mx-auto">
            Join thousands of developers who are already building amazing applications with Unisphere
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <a
              href="/docs/documentation/overview"
              className="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5"
            >
              <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
              Get Started
            </a>
            <a
              href="/docs/documentation/overview"
              className="inline-flex items-center px-6 py-3 bg-white dark:bg-gray-600 text-gray-700 dark:text-gray-200 font-semibold rounded-lg border border-gray-200 dark:border-gray-500 hover:border-gray-300 dark:hover:border-gray-400 shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5"
            >
              <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
              Learn About Unisphere
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}
