/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import React from 'react';
import { useTranslation } from 'react-i18next';
import { IconChevronRight } from '@douyinfe/semi-icons';

const ToolCard = ({ icon, brand, brandColor, title, description, link, glowClass }) => {
  const brandColorClasses = {
    amber: 'text-amber-400 hover-glow-amber',
    blue: 'text-blue-400 hover-glow-blue',
    purple: 'text-purple-400 hover-glow-purple',
  };

  return (
    <div className="group cursor-pointer h-full">
      <div
        className={`h-full rounded-2xl sm:rounded-[2rem] border bg-white border-black/5 p-8 sm:p-10 lg:p-12 shadow-sm transition-all duration-500 hover:shadow-2xl ${brandColorClasses[glowClass]}`}
      >
        {/* Logo + Title */}
        <div className="mb-3 sm:mb-4 flex items-center gap-3 sm:gap-4">
          <img
            src={icon}
            alt={title}
            className="h-8 w-8 object-contain"
          />
          <h3 className="text-xl sm:text-2xl font-bold tracking-tight line-clamp-1">
            {title}
          </h3>
        </div>

        {/* Description */}
        <p className="mb-6 sm:mb-8 text-sm sm:text-base font-light leading-relaxed opacity-40 line-clamp-3">
          {description}
        </p>

        {/* Link */}
        <a
          href={link}
          target="_top"
          className="flex items-center gap-2 text-[10px] font-bold opacity-0 transition-opacity group-hover:opacity-100"
        >
          LEARN CONFIG
          <IconChevronRight size={14} />
        </a>
      </div>
    </div>
  );
};

const ToolsSection = () => {
  const { t } = useTranslation();

  const tools = [
    {
      icon: '/images/Anthropic.png',
      brand: 'Anthropic',
      brandColor: 'amber',
      title: 'AI编程',
      description: '无缝支持AI编程工具，涵盖顶级模型。',
      link: '/pricing',
      glowClass: 'amber',
    },
    {
      icon: '/images/create.png',
      brand: ' ',
      brandColor: 'blue',
      title: '创作',
      description: '顶级多模态模型，统一API使用。',
      link: '/pricing',
      glowClass: 'blue',
    },
    {
      icon: '/images/openclaw-3.jpg',
      brand: 'OpenClaw',
      brandColor: 'purple',
      title: '龙虾',
      description: '无缝接入龙虾，顶级模型构建聪明大脑。',
      link: '/pricing',
      glowClass: 'purple',
    },
  ];

  return (
    <section className="home-snap-section bg-[var(--semi-color-bg-0)]">
      <div className="mx-auto w-full max-w-6xl px-5 py-16 md:px-6 lg:px-8">
        {/* Header */}
        <div className="mb-16 flex flex-col items-start justify-between gap-4 sm:mb-20 sm:flex-row sm:items-end sm:gap-6 lg:mb-24">
          <h2 className="whitespace-pre-line text-[clamp(1.75rem,5vw,3.5rem)] font-black tracking-[-0.03em]">
            {t('原生支持\n极致工具链')}
          </h2>
          <p className="max-w-xs text-xs font-light opacity-40 sm:text-sm">
            {t('深度优化 API 路由，确保在 CLI 环境下依然拥有流畅的流式交互体验。')}
          </p>
        </div>

        {/* Cards Grid */}
        <div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-3 items-stretch">
          {tools.map((tool, index) => (
            <ToolCard key={index} {...tool} />
          ))}
        </div>
      </div>
    </section>
  );
};

export default ToolsSection;
