"use client";

import Link from "next/link";
import { useLanguage } from "@/contexts/LanguageContext";
import { localizedPath } from "@/lib/localized-path";

const CERTIFICATIONS = [
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width="28" height="28">
        <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: "#10B981",
    key: "gdpr",
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width="28" height="28">
        <rect x="3" y="11" width="18" height="11" rx="2" ry="2" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M7 11V7a5 5 0 0 1 10 0v4" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
    color: "#6610f2",
    key: "encryption",
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width="28" height="28">
        <circle cx="12" cy="12" r="10" strokeLinecap="round" strokeLinejoin="round"/>
        <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" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
    color: "#3B82F6",
    key: "dataResidency",
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width="28" height="28">
        <path d="M12 2L2 7l10 5 10-5-10-5z" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M2 17l10 5 10-5M2 12l10 5 10-5" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
    color: "#F59E0B",
    key: "pdpl",
  },
];

const SECURITY_PILLARS = [
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width="24" height="24">
        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
        <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
      </svg>
    ),
    color: "#6610f2",
    key: "infra",
    specs: ["infraSpec1", "infraSpec2", "infraSpec3"],
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width="24" height="24">
        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
        <circle cx="12" cy="7" r="4"/>
      </svg>
    ),
    color: "#10B981",
    key: "access",
    specs: ["accessSpec1", "accessSpec2", "accessSpec3"],
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width="24" height="24">
        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
      </svg>
    ),
    color: "#3B82F6",
    key: "audit",
    specs: ["auditSpec1", "auditSpec2", "auditSpec3"],
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width="24" height="24">
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
      </svg>
    ),
    color: "#EF4444",
    key: "pentest",
    specs: ["pentestSpec1", "pentestSpec2", "pentestSpec3"],
  },
];

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

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

        /* ── Hero ── */
        .sec-hero {
          text-align: center;
          margin-bottom: 80px;
        }
        .sec-badge {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 6px 16px;
          background: rgba(102, 16, 242, 0.12);
          border: 1px solid rgba(102, 16, 242, 0.3);
          border-radius: 20px;
          font-size: 13px;
          font-weight: 500;
          color: #a78bfa;
          letter-spacing: 0.5px;
          text-transform: uppercase;
          margin-bottom: 24px;
        }
        .sec-badge-dot {
          width: 7px; height: 7px;
          background: #10b981;
          border-radius: 50%;
          animation: pulse-dot 2s ease-in-out infinite;
        }
        @keyframes pulse-dot {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.6; transform: scale(1.3); }
        }
        .sec-hero h1 {
          font-size: clamp(36px, 5vw, 58px);
          font-weight: 800;
          color: #fff;
          letter-spacing: -1px;
          margin-bottom: 20px;
          line-height: 1.1;
        }
        .sec-hero h1 span {
          background: linear-gradient(135deg, #6610f2, #a78bfa);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
        .sec-hero p {
          font-size: 18px;
          color: #94a3b8;
          max-width: 620px;
          margin: 0 auto 40px;
          line-height: 1.7;
        }
        .sec-hero-stats {
          display: flex;
          justify-content: center;
          gap: 48px;
          flex-wrap: wrap;
        }
        .sec-stat {
          text-align: center;
        }
        .sec-stat-value {
          display: block;
          font-size: 28px;
          font-weight: 800;
          color: #fff;
          margin-bottom: 4px;
        }
        .sec-stat-label {
          font-size: 13px;
          color: #64748b;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        /* ── Certifications ── */
        .sec-certs {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 16px;
          margin-bottom: 80px;
        }
        .sec-cert-card {
          background: rgba(255,255,255,0.03);
          border: 1px solid rgba(255,255,255,0.06);
          border-radius: 16px;
          padding: 28px 20px;
          text-align: center;
          transition: border-color 0.2s, background 0.2s;
        }
        .sec-cert-card:hover {
          border-color: rgba(255,255,255,0.14);
          background: rgba(255,255,255,0.05);
        }
        .sec-cert-icon {
          width: 56px; height: 56px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 16px;
        }
        .sec-cert-title {
          font-size: 15px;
          font-weight: 700;
          color: #fff;
          margin-bottom: 6px;
        }
        .sec-cert-desc {
          font-size: 12px;
          color: #64748b;
          line-height: 1.5;
        }

        /* ── Section title ── */
        .sec-section-header {
          margin-bottom: 40px;
        }
        .sec-section-header h2 {
          font-size: 32px;
          font-weight: 700;
          color: #fff;
          margin-bottom: 12px;
        }
        .sec-section-header p {
          font-size: 16px;
          color: #94a3b8;
          max-width: 560px;
        }

        /* ── Pillars ── */
        .sec-pillars {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;
          margin-bottom: 80px;
        }
        .sec-pillar-card {
          background: rgba(255,255,255,0.03);
          border: 1px solid rgba(255,255,255,0.06);
          border-radius: 16px;
          padding: 28px;
          transition: border-color 0.2s, background 0.2s;
        }
        .sec-pillar-card:hover {
          border-color: rgba(255,255,255,0.12);
          background: rgba(255,255,255,0.05);
        }
        .sec-pillar-header {
          display: flex;
          align-items: center;
          gap: 14px;
          margin-bottom: 12px;
        }
        .sec-pillar-icon {
          width: 44px; height: 44px;
          border-radius: 11px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }
        .sec-pillar-title {
          font-size: 18px;
          font-weight: 700;
          color: #fff;
          margin: 0;
        }
        .sec-pillar-desc {
          font-size: 14px;
          color: #64748b;
          line-height: 1.6;
          margin-bottom: 16px;
        }
        .sec-pillar-specs {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        .sec-pillar-specs li {
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 13px;
          color: #cbd5e1;
        }
        .sec-spec-dot {
          width: 6px; height: 6px;
          border-radius: 50%;
          flex-shrink: 0;
        }

        /* ── Encryption visual ── */
        .sec-encryption-banner {
          background: linear-gradient(135deg, rgba(102,16,242,0.1) 0%, rgba(16,185,129,0.06) 100%);
          border: 1px solid rgba(102,16,242,0.2);
          border-radius: 20px;
          padding: 40px;
          margin-bottom: 80px;
          display: flex;
          align-items: center;
          gap: 40px;
          flex-wrap: wrap;
        }
        .sec-enc-text { flex: 1; min-width: 260px; }
        .sec-enc-text h3 {
          font-size: 22px;
          font-weight: 700;
          color: #fff;
          margin-bottom: 10px;
        }
        .sec-enc-text p {
          color: #94a3b8;
          font-size: 15px;
          line-height: 1.6;
          margin: 0;
        }
        .sec-enc-badges {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
          flex-shrink: 0;
        }
        .sec-enc-badge {
          padding: 8px 18px;
          background: rgba(255,255,255,0.06);
          border: 1px solid rgba(255,255,255,0.1);
          border-radius: 8px;
          font-size: 13px;
          font-weight: 700;
          color: #e2e8f0;
          font-family: monospace;
        }

        /* ── CTA ── */
        .sec-cta {
          text-align: center;
          padding: 56px 40px;
          background: rgba(255,255,255,0.02);
          border: 1px solid rgba(255,255,255,0.06);
          border-radius: 20px;
        }
        .sec-cta h2 {
          font-size: 28px;
          font-weight: 700;
          color: #fff;
          margin-bottom: 12px;
        }
        .sec-cta p {
          color: #94a3b8;
          font-size: 15px;
          margin-bottom: 28px;
        }
        .sec-cta-btns {
          display: flex;
          justify-content: center;
          gap: 16px;
          flex-wrap: wrap;
        }
        .sec-btn-primary {
          padding: 12px 28px;
          background: linear-gradient(135deg, #6610f2, #4a0bb3);
          color: #fff;
          border-radius: 10px;
          font-weight: 600;
          font-size: 15px;
          text-decoration: none;
          transition: opacity 0.2s;
        }
        .sec-btn-primary:hover { opacity: 0.9; color: #fff; }
        .sec-btn-ghost {
          padding: 12px 28px;
          background: transparent;
          color: #94a3b8;
          border: 1px solid rgba(255,255,255,0.12);
          border-radius: 10px;
          font-weight: 600;
          font-size: 15px;
          text-decoration: none;
          transition: border-color 0.2s, color 0.2s;
        }
        .sec-btn-ghost:hover { border-color: rgba(255,255,255,0.3); color: #fff; }

        @media (max-width: 992px) {
          .sec-certs { grid-template-columns: repeat(2, 1fr); }
          .sec-pillars { grid-template-columns: 1fr; }
        }
        @media (max-width: 576px) {
          .sec-certs { grid-template-columns: 1fr 1fr; }
          .sec-hero-stats { gap: 28px; }
          .sec-encryption-banner { padding: 24px; }
          .sec-cta { padding: 32px 20px; }
        }
      `}</style>

      <div className="container">
        {/* Hero */}
        <div className="sec-hero" data-aos="fade-up">
          <div className="sec-badge">
            <span className="sec-badge-dot" />
            {t("security.badge")}
          </div>
          <h1>
            {t("security.heroTitle1")} <span>{t("security.heroTitle2")}</span>
          </h1>
          <p>{t("security.heroSubtitle")}</p>
          <div className="sec-hero-stats">
            {[
              { value: "AES-256", label: t("security.stat1") },
              { value: language === "ar" ? "مستمر" : "Continuous", label: t("security.stat2") },
              { value: "TLS 1.3", label: t("security.stat3") },
              { value: "24/7", label: t("security.stat4") },
            ].map((s) => (
              <div key={s.label} className="sec-stat">
                <span className="sec-stat-value">{s.value}</span>
                <span className="sec-stat-label">{s.label}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Certifications */}
        <div className="sec-certs" data-aos="fade-up">
          {CERTIFICATIONS.map((cert) => (
            <div key={cert.key} className="sec-cert-card">
              <div className="sec-cert-icon" style={{ background: `${cert.color}1a` }}>
                <span style={{ color: cert.color }}>{cert.icon}</span>
              </div>
              <div className="sec-cert-title">{t(`security.cert.${cert.key}.title`)}</div>
              <div className="sec-cert-desc">{t(`security.cert.${cert.key}.desc`)}</div>
            </div>
          ))}
        </div>

        {/* Encryption banner */}
        <div className="sec-encryption-banner" data-aos="fade-up">
          <div className="sec-enc-text">
            <h3>{t("security.enc.title")}</h3>
            <p>{t("security.enc.desc")}</p>
          </div>
          <div className="sec-enc-badges">
            <span className="sec-enc-badge">AES-256-GCM</span>
            <span className="sec-enc-badge">TLS 1.3</span>
            <span className="sec-enc-badge">SHA-256</span>
            <span className="sec-enc-badge">HSTS</span>
          </div>
        </div>

        {/* Pillars */}
        <div className="sec-section-header" data-aos="fade-up">
          <h2>{t("security.pillars.title")}</h2>
          <p>{t("security.pillars.subtitle")}</p>
        </div>
        <div className="sec-pillars">
          {SECURITY_PILLARS.map((p, i) => (
            <div key={p.key} className="sec-pillar-card" data-aos="fade-up" data-aos-delay={i * 80}>
              <div className="sec-pillar-header">
                <div className="sec-pillar-icon" style={{ background: `${p.color}1a`, color: p.color }}>
                  {p.icon}
                </div>
                <h3 className="sec-pillar-title">{t(`security.pillar.${p.key}.title`)}</h3>
              </div>
              <p className="sec-pillar-desc">{t(`security.pillar.${p.key}.desc`)}</p>
              <ul className="sec-pillar-specs">
                {p.specs.map((spec) => (
                  <li key={spec}>
                    <span className="sec-spec-dot" style={{ background: p.color }} />
                    {t(`security.pillar.${p.key}.${spec}`)}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* CTA */}
        <div className="sec-cta" data-aos="fade-up">
          <h2>{t("security.cta.title")}</h2>
          <p>{t("security.cta.subtitle")}</p>
          <div className="sec-cta-btns">
            <Link href={localizedPath("/contact-us", language)} className="sec-btn-primary">{t("security.cta.contact")}</Link>
            <Link href={localizedPath("/privacy", language)} className="sec-btn-ghost">{t("security.cta.privacy")}</Link>
          </div>
        </div>
      </div>
    </section>
  );
}