import type { Metadata } from "next";

export const metadata: Metadata = { title: "Hobilerim" };

const hobbies = [
  {
    name: "CTF (Capture The Flag)",
    icon: "◆",
    desc: "CTF yarışmaları benim için hem öğrenme hem de eğlence. Kriptografi, binary exploitation, web, OSINT kategorilerinde oynuyorum.",
    tags: ["pwn", "crypto", "web", "osint"],
  },
  {
    name: "Müzik Dinleme",
    icon: "◉",
    desc: "Darksynth, industrial, dark ambient ve black metal. Çalışırken müzik şart.",
    tags: ["darksynth", "industrial", "metal"],
  },
  {
    name: "Kitap Okuma",
    icon: "▤",
    desc: "Teknik kitaplar, felsefe ve distopik roman. Son okuduğum: Neuromancer.",
    tags: ["fiction", "philosophy", "technical"],
  },
  {
    name: "Araç Geliştirme",
    icon: "◈",
    desc: "Açık kaynak güvenlik araçları geliştirmek. Python ve Rust ile kendi toollarımı yazıyorum.",
    tags: ["python", "rust", "open-source"],
  },
  {
    name: "Elektronik & Donanım",
    icon: "⊡",
    desc: "Flipper Zero, Raspberry Pi, Arduino ile oynamak. RF sinyalleri, protokol analizi.",
    tags: ["hardware", "RF", "embedded"],
  },
  {
    name: "Fotoğrafçılık",
    icon: "◎",
    desc: "Özellikle urban exploration ve siyah-beyaz fotoğrafçılık. Dijital değil, analog film.",
    tags: ["film", "analog", "urbex"],
  },
  {
    name: "Yürüyüş & Doğa",
    icon: "◇",
    desc: "Ekrandan uzaklaşmak için en iyi şey. Orman yürüyüşleri, mümkün olduğunda kamp.",
    tags: ["hiking", "nature", "camping"],
  },
];

export default function HobilerimPage() {
  return (
    <div style={{ maxWidth: "100%" }}>
      <div className="page-title">Hobilerim</div>
      <p style={{ fontSize: "0.8rem", color: "var(--text-muted)", marginBottom: "2rem" }}>
        İş dışında neler yapıyorum
      </p>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: "0.75rem" }}>
        {hobbies.map((h) => (
          <div key={h.name} className="card">
            <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.5rem" }}>
              <span style={{ color: "var(--accent)", fontSize: "0.9rem" }}>{h.icon}</span>
              <h3 style={{ fontSize: "0.9rem", fontWeight: 600, color: "var(--text)" }}>{h.name}</h3>
            </div>
            <p style={{ fontSize: "0.8rem", color: "var(--text-muted)", lineHeight: 1.6, marginBottom: "0.6rem" }}>{h.desc}</p>
            <div style={{ display: "flex", gap: "0.3rem", flexWrap: "wrap" }}>
              {h.tags.map((t) => <span key={t} className="tag">{t}</span>)}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}