import type { Metadata } from "next";

export const metadata: Metadata = { title: "Red Teamer Roadmap" };

interface RoadmapItem {
  title: string;
  description: string;
  resources: { name: string; url?: string }[];
  level: "beginner" | "intermediate" | "advanced";
}

interface Phase {
  phase: number;
  title: string;
  subtitle: string;
  duration: string;
  items: RoadmapItem[];
}

const phases: Phase[] = [
  {
    phase: 1,
    title: "Temel Kavramlar",
    subtitle: "Foundation",
    duration: "1-3 ay",
    items: [
      {
        title: "Ağ Temelleri",
        description: "TCP/IP, OSI modeli, DNS, HTTP/S, temel protokoller",
        resources: [
          { name: "TryHackMe — Pre-Security path" },
          { name: "Professor Messer Network+", url: "https://www.professormesser.com" },
          { name: "Practical Networking", url: "https://www.practicalnetworking.net" },
        ],
        level: "beginner",
      },
      {
        title: "Linux Temelleri",
        description: "Komut satırı, dosya sistemi, izinler, scripting",
        resources: [
          { name: "OverTheWire: Bandit", url: "https://overthewire.org/wargames/bandit" },
          { name: "TryHackMe — Linux Fundamentals" },
          { name: "The Linux Command Line (kitap)" },
        ],
        level: "beginner",
      },
      {
        title: "Python ile Scripting",
        description: "Temel Python, otomasyon, araç geliştirme",
        resources: [
          { name: "Automate the Boring Stuff with Python", url: "https://automatetheboringstuff.com" },
          { name: "Violent Python (kitap)" },
        ],
        level: "beginner",
      },
    ],
  },
  {
    phase: 2,
    title: "Güvenlik Temelleri",
    subtitle: "Security Basics",
    duration: "2-4 ay",
    items: [
      {
        title: "Web Uygulama Güvenliği",
        description: "OWASP Top 10, SQL injection, XSS, CSRF, authentication bypass",
        resources: [
          { name: "PortSwigger Web Academy", url: "https://portswigger.net/web-security" },
          { name: "OWASP WebGoat", url: "https://owasp.org/www-project-webgoat" },
          { name: "The Web Application Hacker's Handbook" },
        ],
        level: "intermediate",
      },
      {
        title: "Pentest Temelleri",
        description: "Metodoloji, keşif, tarama, exploitation, raporlama",
        resources: [
          { name: "TryHackMe — Jr Penetration Tester path" },
          { name: "eJPT (eLearnSecurity)" },
          { name: "Penetration Testing (Georgia Weidman)" },
        ],
        level: "intermediate",
      },
      {
        title: "Kriptografi Temelleri",
        description: "Şifreleme algoritmaları, hash fonksiyonları, PKI",
        resources: [
          { name: "CryptoHack", url: "https://cryptohack.org" },
          { name: "Cryptopals Challenges", url: "https://cryptopals.com" },
        ],
        level: "intermediate",
      },
    ],
  },
  {
    phase: 3,
    title: "Offensive Security",
    subtitle: "Going Deeper",
    duration: "3-6 ay",
    items: [
      {
        title: "Active Directory Saldırıları",
        description: "Kerberoasting, Pass-the-Hash, DCSync, BloodHound, lateral movement",
        resources: [
          { name: "HackTheBox — AD machines" },
          { name: "Red Team Notes — AD", url: "https://www.ired.team" },
          { name: "Impacket tools" },
        ],
        level: "advanced",
      },
      {
        title: "OSCP Hazırlığı",
        description: "Buffer overflow, privilege escalation, pivoting, tunneling",
        resources: [
          { name: "OffSec PEN-200 course" },
          { name: "HackTheBox — OSCP-like machines" },
          { name: "The Hacker Playbook 3" },
        ],
        level: "advanced",
      },
      {
        title: "Malware Analizi",
        description: "Statik ve dinamik analiz, reverse engineering, sandbox",
        resources: [
          { name: "Malware Traffic Analysis", url: "https://malware-traffic-analysis.net" },
          { name: "Ghidra kullanımı" },
          { name: "Practical Malware Analysis (kitap)" },
        ],
        level: "advanced",
      },
    ],
  },
  {
    phase: 4,
    title: "Red Team Operasyonları",
    subtitle: "Professional Level",
    duration: "Süregelen",
    items: [
      {
        title: "C2 Framework & İmplant Geliştirme",
        description: "Cobalt Strike, Havoc, Sliver — C2 mimarisi ve özel implant yazımı",
        resources: [
          { name: "Red Team Development and Operations (kitap)" },
          { name: "Sektor7 courses", url: "https://institute.sektor7.net" },
          { name: "VX Underground malware samples" },
        ],
        level: "advanced",
      },
      {
        title: "Physical & Social Engineering",
        description: "Fiziksel saldırılar, phishing kampanyaları, vishing",
        resources: [
          { name: "The Art of Intrusion (kitap)" },
          { name: "Hacking: The Art of Exploitation" },
        ],
        level: "advanced",
      },
    ],
  },
];

const levelColors = { beginner: "#22c55e", intermediate: "#f59e0b", advanced: "#ef4444" };
const phaseColors = ["#00d4aa", "#7c6af7", "#f59e0b", "#ef4444"];

export default function RoadmapPage() {
  return (
    <div style={{ maxWidth: "100%" }}>
      <div className="page-title">Red Teamer Roadmap</div>
      <p style={{ fontSize: "0.8rem", color: "var(--text-muted)", marginBottom: "0.5rem" }}>
        Red teamer olmak isteyenler için kişisel rehberim
      </p>
      <div style={{ fontSize: "0.75rem", color: "var(--text-muted)", marginBottom: "2rem", padding: "0.6rem 0.75rem", background: "var(--bg-card)", border: "1px solid var(--border)", borderRadius: "4px" }}>
        ⚠ Bu yalnızca benim izlediğim yol. Herkes farklı öğrenir. Ayrıca: her zaman etik ve yasal sınırlar içinde kalın.
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
        {phases.map((phase, pi) => (
          <div key={phase.phase}>
            {/* Phase Header */}
            <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", marginBottom: "1rem", paddingBottom: "0.75rem", borderBottom: `2px solid ${phaseColors[pi]}` }}>
              <div style={{ width: "32px", height: "32px", background: phaseColors[pi], color: "#000", borderRadius: "4px", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: "0.9rem", flexShrink: 0 }}>
                {phase.phase}
              </div>
              <div>
                <div style={{ fontWeight: 700, fontSize: "1rem", color: "var(--text)" }}>{phase.title}</div>
                <div style={{ fontSize: "0.72rem", color: "var(--text-muted)" }}>{phase.subtitle} · {phase.duration}</div>
              </div>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
              {phase.items.map((item) => (
                <div key={item.title} className="card">
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.4rem" }}>
                    <h3 style={{ fontSize: "0.9rem", fontWeight: 600, color: "var(--text)" }}>{item.title}</h3>
                    <span style={{
                      fontSize: "0.6rem",
                      padding: "0.1rem 0.4rem",
                      borderRadius: "3px",
                      fontWeight: 700,
                      color: levelColors[item.level],
                      border: `1px solid ${levelColors[item.level]}`,
                      textTransform: "uppercase",
                    }}>
                      {item.level}
                    </span>
                  </div>
                  <p style={{ fontSize: "0.8rem", color: "var(--text-muted)", marginBottom: "0.75rem" }}>{item.description}</p>
                  <div>
                    <div style={{ fontSize: "0.65rem", color: "var(--text-muted)", marginBottom: "0.3rem", textTransform: "uppercase", letterSpacing: "0.08em" }}>Kaynaklar</div>
                    <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: "0.2rem" }}>
                      {item.resources.map((r) => (
                        <li key={r.name} style={{ fontSize: "0.78rem", display: "flex", alignItems: "center", gap: "0.4rem" }}>
                          <span style={{ color: "var(--accent)", fontSize: "0.6rem" }}>→</span>
                          {r.url ? (
                            <a href={r.url} target="_blank" rel="noopener noreferrer">{r.name}</a>
                          ) : (
                            <span style={{ color: "var(--text-muted)" }}>{r.name}</span>
                          )}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}