"use client";

import { useState, useCallback } from "react";
import { useLanguage } from "@/contexts/LanguageContext";

interface UseCase {
  id: string;
  icon: React.ReactNode;
  benefits: string[];
  examples: string[];
}

const icons = {
  education: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 10v6M2 10l10-5 10 5-10 5z"/>
      <path d="M6 12v5c3 3 9 3 12 0v-5"/>
    </svg>
  ),
  tourism: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
    </svg>
  ),
  support: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
      <path d="M8 10h.01M12 10h.01M16 10h.01"/>
    </svg>
  ),
  ecommerce: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="9" cy="21" r="1"/>
      <circle cx="20" cy="21" r="1"/>
      <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
    </svg>
  ),
  healthcare: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
    </svg>
  ),
  realestate: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
      <polyline points="9 22 9 12 15 12 15 22"/>
    </svg>
  ),
  restaurant: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 8h1a4 4 0 0 1 0 8h-1M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8zM6 1v3M10 1v3M14 1v3"/>
    </svg>
  ),
  hr: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
      <circle cx="9" cy="7" r="4"/>
      <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
    </svg>
  ),
  automotive: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 17H3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h2m14 7h2a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2h-2M5 10l2-5h10l2 5M5 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM19 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
    </svg>
  ),
};

export default function UseCasesHomeTwo() {
  const { t, language } = useLanguage();
  const [activeCase, setActiveCase] = useState("education");
  const [isAnimating, setIsAnimating] = useState(false);
  const [displayedCase, setDisplayedCase] = useState("education");
  const [animationKey, setAnimationKey] = useState(0);

  const useCases: UseCase[] = [
    {
      id: "education",
      icon: icons.education,
      benefits: [
        t("useCases.education.benefit1"),
        t("useCases.education.benefit2"),
        t("useCases.education.benefit3"),
        t("useCases.education.benefit4"),
      ],
      examples: [
        t("useCases.education.example1"),
        t("useCases.education.example2"),
        t("useCases.education.example3"),
        t("useCases.education.example4"),
      ],
    },
    {
      id: "tourism",
      icon: icons.tourism,
      benefits: [
        t("useCases.tourism.benefit1"),
        t("useCases.tourism.benefit2"),
        t("useCases.tourism.benefit3"),
        t("useCases.tourism.benefit4"),
      ],
      examples: [
        t("useCases.tourism.example1"),
        t("useCases.tourism.example2"),
        t("useCases.tourism.example3"),
        t("useCases.tourism.example4"),
      ],
    },
    {
      id: "support",
      icon: icons.support,
      benefits: [
        t("useCases.support.benefit1"),
        t("useCases.support.benefit2"),
        t("useCases.support.benefit3"),
        t("useCases.support.benefit4"),
      ],
      examples: [
        t("useCases.support.example1"),
        t("useCases.support.example2"),
        t("useCases.support.example3"),
        t("useCases.support.example4"),
      ],
    },
    {
      id: "ecommerce",
      icon: icons.ecommerce,
      benefits: [
        t("useCases.ecommerce.benefit1"),
        t("useCases.ecommerce.benefit2"),
        t("useCases.ecommerce.benefit3"),
        t("useCases.ecommerce.benefit4"),
      ],
      examples: [
        t("useCases.ecommerce.example1"),
        t("useCases.ecommerce.example2"),
        t("useCases.ecommerce.example3"),
        t("useCases.ecommerce.example4"),
      ],
    },
    {
      id: "healthcare",
      icon: icons.healthcare,
      benefits: [
        t("useCases.healthcare.benefit1"),
        t("useCases.healthcare.benefit2"),
        t("useCases.healthcare.benefit3"),
        t("useCases.healthcare.benefit4"),
      ],
      examples: [
        t("useCases.healthcare.example1"),
        t("useCases.healthcare.example2"),
        t("useCases.healthcare.example3"),
        t("useCases.healthcare.example4"),
      ],
    },
    {
      id: "realestate",
      icon: icons.realestate,
      benefits: [
        t("useCases.realestate.benefit1"),
        t("useCases.realestate.benefit2"),
        t("useCases.realestate.benefit3"),
        t("useCases.realestate.benefit4"),
      ],
      examples: [
        t("useCases.realestate.example1"),
        t("useCases.realestate.example2"),
        t("useCases.realestate.example3"),
        t("useCases.realestate.example4"),
      ],
    },
    {
      id: "restaurant",
      icon: icons.restaurant,
      benefits: [
        t("useCases.restaurant.benefit1"),
        t("useCases.restaurant.benefit2"),
        t("useCases.restaurant.benefit3"),
        t("useCases.restaurant.benefit4"),
      ],
      examples: [
        t("useCases.restaurant.example1"),
        t("useCases.restaurant.example2"),
        t("useCases.restaurant.example3"),
        t("useCases.restaurant.example4"),
      ],
    },
    {
      id: "hr",
      icon: icons.hr,
      benefits: [
        t("useCases.hr.benefit1"),
        t("useCases.hr.benefit2"),
        t("useCases.hr.benefit3"),
        t("useCases.hr.benefit4"),
      ],
      examples: [
        t("useCases.hr.example1"),
        t("useCases.hr.example2"),
        t("useCases.hr.example3"),
        t("useCases.hr.example4"),
      ],
    },
    {
      id: "automotive",
      icon: icons.automotive,
      benefits: [
        t("useCases.automotive.benefit1"),
        t("useCases.automotive.benefit2"),
        t("useCases.automotive.benefit3"),
        t("useCases.automotive.benefit4"),
      ],
      examples: [
        t("useCases.automotive.example1"),
        t("useCases.automotive.example2"),
        t("useCases.automotive.example3"),
        t("useCases.automotive.example4"),
      ],
    },
  ];

  const handleCaseChange = useCallback((caseId: string) => {
    if (caseId === activeCase || isAnimating) return;
    
    setIsAnimating(true);
    setActiveCase(caseId);
    
    setTimeout(() => {
      setDisplayedCase(caseId);
      setAnimationKey(prev => prev + 1);
      setIsAnimating(false);
    }, 200);
  }, [activeCase, isAnimating]);

  const activeUseCase = useCases.find((uc) => uc.id === displayedCase) || useCases[0];

  return (
    <section className="use-cases-section">
      <style jsx>{`
        .use-cases-section {
          padding: 100px 0;
          background: #000000;
          position: relative;
        }

        .section-header {
          text-align: center;
          margin-bottom: 48px;
        }

        .section-badge {
          display: inline-block;
          padding: 6px 16px;
          background: rgba(255, 255, 255, 0.06);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 20px;
          font-size: 13px;
          font-weight: 500;
          color: #94a3b8;
          letter-spacing: 0.5px;
          text-transform: uppercase;
          margin-bottom: 20px;
        }

        .section-header h2 {
          font-size: 40px;
          font-weight: 700;
          margin-bottom: 16px;
          color: #fff;
          letter-spacing: -0.5px;
        }

        .section-header p {
          font-size: 17px;
          color: #94a3b8;
          max-width: 600px;
          margin: 0 auto;
          line-height: 1.7;
        }

        .view-all-link {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          margin-top: 20px;
          padding: 10px 22px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 8px;
          color: #cbd5e1;
          font-size: 14px;
          font-weight: 500;
          text-decoration: none;
          transition: all 0.2s ease;
        }

        .view-all-link:hover {
          background: rgba(255, 255, 255, 0.08);
          border-color: rgba(255, 255, 255, 0.18);
          color: #fff;
        }

        .view-all-link svg {
          width: 16px;
          height: 16px;
        }

        .tabs-container {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 8px;
          margin-bottom: 48px;
        }

        .tab-btn {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 20px;
          border-radius: 8px;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          border: 1px solid rgba(255, 255, 255, 0.08);
          background: rgba(255, 255, 255, 0.03);
          color: #94a3b8;
        }

        .tab-btn:hover {
          border-color: rgba(255, 255, 255, 0.15);
          background: rgba(255, 255, 255, 0.06);
          color: #e2e8f0;
        }

        .tab-btn.active {
          background: #6610f2;
          border-color: #6610f2;
          color: #fff;
        }

        .tab-icon {
          width: 18px;
          height: 18px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .tab-icon svg {
          width: 100%;
          height: 100%;
        }

        .content-container {
          max-width: 1100px;
          margin: 0 auto;
        }

        .content-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 24px;
          align-items: start;
        }

        .content-main {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 16px;
          padding: 36px;
          transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .content-main.animating {
          opacity: 0;
          transform: translateY(8px);
        }

        .content-main.animate-in {
          animation: fadeIn 0.35s ease forwards;
        }

        .benefits-section.animate-in {
          animation: fadeIn 0.35s ease 0.05s forwards;
          opacity: 0;
        }

        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(8px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .content-icon {
          width: 44px;
          height: 44px;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(102, 16, 242, 0.12);
          border-radius: 12px;
          color: #a78bfa;
        }

        .content-icon svg {
          width: 24px;
          height: 24px;
        }

        .content-title {
          font-size: 26px;
          font-weight: 700;
          color: #fff;
          margin-bottom: 12px;
        }

        .content-description {
          font-size: 15px;
          color: #94a3b8;
          line-height: 1.7;
          margin-bottom: 24px;
        }

        .results-link {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          color: #94a3b8;
          font-size: 13px;
          font-weight: 500;
          margin-bottom: 10px;
          text-decoration: none;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .results-link svg {
          width: 14px;
          height: 14px;
        }

        .results-text {
          font-size: 14px;
          color: #cbd5e1;
          line-height: 1.6;
          padding: 14px 18px;
          background: rgba(255, 255, 255, 0.03);
          border-radius: 10px;
          border-left: 3px solid #6610f2;
        }

        html[dir="rtl"] .results-text {
          border-left: none;
          border-right: 3px solid #6610f2;
        }

        .benefits-section {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 16px;
          padding: 36px;
          transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .benefits-section.animating {
          opacity: 0;
          transform: translateY(8px);
        }

        .benefits-title {
          font-size: 18px;
          font-weight: 600;
          color: #fff;
          margin-bottom: 20px;
          padding-bottom: 16px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .benefits-list {
          list-style: none;
          padding: 0;
          margin: 0 0 28px 0;
        }

        .benefit-item {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          padding: 10px 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.04);
          font-size: 14px;
          color: #cbd5e1;
          line-height: 1.5;
        }

        .benefit-item:last-child {
          border-bottom: none;
        }

        .benefit-check {
          width: 20px;
          height: 20px;
          border-radius: 6px;
          background: rgba(16, 185, 129, 0.12);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          margin-top: 1px;
        }

        .benefit-check svg {
          width: 11px;
          height: 11px;
          color: #10b981;
        }

        .examples-title {
          font-size: 13px;
          font-weight: 600;
          color: #94a3b8;
          margin-bottom: 14px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .examples-grid {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }

        .example-tag {
          padding: 8px 14px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.07);
          border-radius: 6px;
          font-size: 13px;
          color: #cbd5e1;
          transition: all 0.2s ease;
        }

        .example-tag:hover {
          background: rgba(255, 255, 255, 0.07);
          border-color: rgba(255, 255, 255, 0.12);
          color: #fff;
        }

        @media (max-width: 992px) {
          .content-grid {
            grid-template-columns: 1fr;
            gap: 20px;
          }
        }

        @media (max-width: 768px) {
          .use-cases-section {
            padding: 60px 0;
          }

          .section-header h2 {
            font-size: 28px;
          }

          .tabs-container {
            gap: 6px;
          }

          .tab-btn {
            padding: 8px 14px;
            font-size: 13px;
          }

          .content-main,
          .benefits-section {
            padding: 24px;
          }

          .content-title {
            font-size: 22px;
          }
        }
      `}</style>

      <div className="container">
        <div className="section-header" data-aos="fade-up">
          <span className="section-badge">Use Cases</span>
          <h2>{t("useCases.title")}</h2>
          <p>{t("useCases.subtitle")}</p>
          <a href={`/${language}/use-cases`} className="view-all-link">
            {t("useCases.viewAll")}
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M5 12h14M12 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
        </div>

        <div className="tabs-container" data-aos="fade-up" data-aos-delay="200">
          {useCases.map((useCase) => (
            <button
              key={useCase.id}
              type="button"
              className={`tab-btn ${activeCase === useCase.id ? "active" : ""}`}
              onClick={() => handleCaseChange(useCase.id)}
            >
              <span className="tab-icon">{useCase.icon}</span>
              {t(`useCases.${useCase.id}.name`)}
            </button>
          ))}
        </div>

        <div className="content-container">
          <div className="content-grid" data-aos="fade-up" data-aos-delay="300">
            <div 
              key={`main-${animationKey}`}
              className={`content-main ${isAnimating ? 'animating' : 'animate-in'}`}
            >
              <div className="content-icon">
                {activeUseCase.icon}
              </div>
              <h3 className="content-title">
                {t(`useCases.${displayedCase}.name`)}
              </h3>
              <p className="content-description">
                {t(`useCases.${displayedCase}.description`)}
              </p>
              
              <span className="results-link">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <polyline points="23 6 13.5 15.5 8.5 10.5 1 18" strokeLinecap="round" strokeLinejoin="round"/>
                  <polyline points="17 6 23 6 23 12" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                {t("useCases.expectedResults")}
              </span>
              <p className="results-text">
                {t(`useCases.${displayedCase}.results`)}
              </p>
            </div>

            <div 
              key={`benefits-${animationKey}`}
              className={`benefits-section ${isAnimating ? 'animating' : 'animate-in'}`}
            >
              <h4 className="benefits-title">
                {t("useCases.keyBenefits")}
              </h4>
              <ul className="benefits-list">
                {activeUseCase.benefits.map((benefit, index) => (
                  <li 
                    key={`${displayedCase}-benefit-${index}`} 
                    className="benefit-item"
                  >
                    <span className="benefit-check">
                      <svg viewBox="0 0 12 12" fill="none">
                        <path
                          d="M10 3L4.5 8.5L2 6"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>
                    </span>
                    {benefit}
                  </li>
                ))}
              </ul>

              <h5 className="examples-title">
                {t("useCases.usageExamples")}
              </h5>
              <div className="examples-grid">
                {activeUseCase.examples.map((example, index) => (
                  <span 
                    key={`${displayedCase}-example-${index}`} 
                    className="example-tag"
                  >
                    {example}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}