"use client";

import { useLanguage } from "@/contexts/LanguageContext";

const featureCategories = [
  {
    id: "ai",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M12 2a4 4 0 0 1 4 4v1a1 1 0 0 0 1 1h1a4 4 0 0 1 0 8h-1a1 1 0 0 0-1 1v1a4 4 0 0 1-8 0v-1a1 1 0 0 0-1-1H6a4 4 0 0 1 0-8h1a1 1 0 0 0 1-1V6a4 4 0 0 1 4-4z" strokeLinecap="round" strokeLinejoin="round"/>
        <circle cx="12" cy="12" r="2"/>
      </svg>
    ),
    color: "#8B5CF6",
    features: ["ai1", "ai2", "ai3", "ai4", "ai5", "ai6"],
  },
  {
    id: "channels",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
    color: "#10B981",
    features: ["channels1", "channels2", "channels3", "channels4", "channels5", "channels6", "channels7", "channels8"],
  },
  {
    id: "automation",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
    color: "#F59E0B",
    features: ["automation2", "automation3", "automation4", "automation5", "automation6"],
  },
  {
    id: "analytics",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M18 20V10M12 20V4M6 20v-6" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
    color: "#EC4899",
    features: ["analytics1", "analytics2", "analytics4", "analytics5", "analytics6"],
  },
  {
    id: "knowledge",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
    color: "#06B6D4",
    features: ["knowledge1", "knowledge2", "knowledge3", "knowledge4", "knowledge5"],
  },
  {
    id: "team",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" strokeLinecap="round" strokeLinejoin="round"/>
        <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" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
    color: "#3B82F6",
    features: ["team1", "team2", "team3", "team4", "team5"],
  },
  {
    id: "security",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M9 12l2 2 4-4" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
    color: "#EF4444",
    features: ["security1", "security2", "security3", "security4"],
  },
  {
    id: "api",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M8 9l-3 3 3 3M16 9l3 3-3 3M10 17l4-10" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
    color: "#6366F1",
    features: ["api2", "api3", "api4"],
  },
];

export default function FeaturesArea() {
  const { t, language } = useLanguage();

  return (
    <section className="features-page-area">
      <style jsx>{`
        .features-page-area {
          padding: 120px 0 100px;
          background: #000000;
          min-height: 100vh;
          position: relative;
        }

        .page-header {
          text-align: center;
          margin-bottom: 72px;
        }

        .page-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: 24px;
        }

        .page-header h1 {
          font-size: 48px;
          font-weight: 700;
          margin-bottom: 20px;
          color: #fff;
          letter-spacing: -0.5px;
        }

        .page-header p {
          font-size: 18px;
          color: #94a3b8;
          max-width: 640px;
          margin: 0 auto;
          line-height: 1.7;
        }

        .features-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
          gap: 24px;
        }

        .feature-category {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 16px;
          padding: 32px;
          transition: border-color 0.2s ease, background 0.2s ease;
        }

        .feature-category:hover {
          border-color: rgba(255, 255, 255, 0.12);
          background: rgba(255, 255, 255, 0.04);
        }

        .category-header {
          display: flex;
          align-items: center;
          gap: 16px;
          margin-bottom: 16px;
        }

        .category-icon {
          width: 48px;
          height: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 12px;
          background: var(--category-color);
          opacity: 0.9;
          color: #fff;
        }

        .category-icon svg {
          width: 26px;
          height: 26px;
        }

        .category-title {
          font-size: 22px;
          font-weight: 600;
          color: #fff;
          margin: 0;
        }

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

        .feature-list {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .feature-item {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          padding: 12px 14px;
          background: rgba(255, 255, 255, 0.02);
          border-radius: 10px;
          border: 1px solid transparent;
          transition: border-color 0.2s ease, background 0.2s ease;
        }

        .feature-item:hover {
          background: rgba(255, 255, 255, 0.04);
          border-color: rgba(255, 255, 255, 0.06);
        }

        .feature-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: 2px;
        }

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

        .feature-content h4 {
          font-size: 15px;
          font-weight: 600;
          color: #e2e8f0;
          margin: 0 0 4px 0;
        }

        .feature-content p {
          font-size: 13px;
          color: #94a3b8;
          margin: 0;
          line-height: 1.6;
        }

        .highlight-section {
          margin-top: 80px;
        }

        .highlight-header {
          text-align: center;
          margin-bottom: 40px;
        }

        .highlight-header h2 {
          font-size: 32px;
          font-weight: 700;
          color: #fff;
        }

        .highlight-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
        }

        .highlight-card {
          text-align: center;
          padding: 36px 28px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 16px;
          transition: border-color 0.2s ease;
        }

        .highlight-card:hover {
          border-color: rgba(255, 255, 255, 0.12);
        }

        .highlight-number {
          font-size: 44px;
          font-weight: 800;
          color: #fff;
          margin-bottom: 8px;
        }

        .highlight-label {
          font-size: 15px;
          color: #94a3b8;
        }

        .highlight-card-full-label .highlight-label {
          font-size: 17px;
          font-weight: 600;
          color: #cbd5e1;
        }

        .highlight-card-channels .highlight-channels-icons {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          margin-bottom: 12px;
        }
        .highlight-card-channels .highlight-channels-icons img {
          width: 36px;
          height: 36px;
          object-fit: contain;
        }

        .cta-section {
          text-align: center;
          margin-top: 80px;
          padding: 56px 40px;
          background: rgba(255, 255, 255, 0.03);
          border-radius: 20px;
          border: 1px solid rgba(255, 255, 255, 0.06);
        }

        .cta-section h2 {
          font-size: 32px;
          font-weight: 700;
          color: #fff;
          margin-bottom: 12px;
        }

        .cta-section p {
          font-size: 16px;
          color: #94a3b8;
          margin-bottom: 32px;
          max-width: 520px;
          margin-left: auto;
          margin-right: auto;
        }

        .cta-button {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 14px 32px;
          background: #6610f2;
          border: none;
          border-radius: 10px;
          font-size: 16px;
          font-weight: 600;
          color: #fff;
          cursor: pointer;
          transition: background 0.2s ease, transform 0.15s ease;
          text-decoration: none;
        }

        .cta-button:hover {
          background: #5a0cd6;
          transform: translateY(-1px);
        }

        @media (max-width: 1200px) {
          .highlight-grid {
            grid-template-columns: repeat(2, 1fr);
          }
        }

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

        @media (max-width: 768px) {
          .features-page-area {
            padding: 100px 0 60px;
          }

          .page-header h1 {
            font-size: 32px;
          }

          .page-header p {
            font-size: 16px;
          }

          .feature-category {
            padding: 24px;
          }

          .category-title {
            font-size: 20px;
          }

          .highlight-grid {
            grid-template-columns: 1fr;
          }

          .highlight-number {
            font-size: 36px;
          }

          .cta-section {
            padding: 36px 20px;
          }

          .cta-section h2 {
            font-size: 26px;
          }
        }
      `}</style>

      <div className="container">
        <div className="page-header" data-aos="fade-up">
          <span className="page-badge">{t("featuresPage.badge")}</span>
          <h1>{t("featuresPage.title")}</h1>
          <p>{t("featuresPage.subtitle")}</p>
        </div>

        <div className="features-grid">
          {featureCategories.map((category, index) => (
            <div
              key={category.id}
              className="feature-category"
              style={{ "--category-color": category.color } as React.CSSProperties}
              data-aos="fade-up"
              data-aos-delay={index * 80}
            >
              <div className="category-header">
                <div className="category-icon">{category.icon}</div>
                <h3 className="category-title">{t(`featuresPage.${category.id}.title`)}</h3>
              </div>

              <p className="category-description">{t(`featuresPage.${category.id}.description`)}</p>

              <div className="feature-list">
                {category.features.map((featureKey, idx) => (
                  <div key={idx} className="feature-item">
                    <span className="feature-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>
                    <div className="feature-content">
                      <h4>{t(`featuresPage.${category.id}.${featureKey}.title`)}</h4>
                      <p>{t(`featuresPage.${category.id}.${featureKey}.description`)}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div className="highlight-section" data-aos="fade-up">
          <div className="highlight-header">
            <h2>{t("featuresPage.highlights.title")}</h2>
          </div>

          <div className="highlight-grid">
            <div className="highlight-card" data-aos="fade-up" data-aos-delay="100">
              <div className="highlight-number">{language === "ar" ? "مباشر" : "Live"}</div>
              <div className="highlight-label">{t("featuresPage.highlights.uptime")}</div>
            </div>
            <div className="highlight-card" data-aos="fade-up" data-aos-delay="200">
              <div className="highlight-number">24/7</div>
              <div className="highlight-label">{t("featuresPage.highlights.support")}</div>
            </div>
            <div className="highlight-card highlight-card-full-label highlight-card-channels" data-aos="fade-up" data-aos-delay="300">
              <div className="highlight-channels-icons">
                <img src="/assets/images/home2/5.svg" alt="WhatsApp" width={32} height={32} />
                <img src="/assets/images/home2/3.svg" alt="Instagram" width={32} height={32} />
                <img src="/assets/images/home2/4.svg" alt="Telegram" width={32} height={32} />
                <img src="/assets/images/home2/linkedin.svg" alt="LinkedIn" title="LinkedIn" width={32} height={32} />
                <img src="/assets/images/home2/globe.svg" alt="Web Widget" width={32} height={32} />
              </div>
              <div className="highlight-label">{t("featuresPage.highlights.channelsPresent")}</div>
            </div>
          </div>
        </div>

        <div className="cta-section" data-aos="fade-up">
          <h2>{t("featuresPage.cta.title")}</h2>
          <p>{t("featuresPage.cta.subtitle")}</p>
          <a href="https://dashboard.skylightchat.com" className="cta-button">
            {t("featuresPage.cta.button")}
            <svg width="18" height="18" 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>
    </section>
  );
}