const headlineStats = [
  { value: "Flutter", label: "mobil uygulama geliştirme" },
  { value: "Unity / C#", label: "oyun prototipi ve etkileşim" },
  { value: "Google Play", label: "AAB, imzalama, market teslimi" },
  { value: "SEO Web", label: "araç sayfaları ve schema yapısı" },
];

const proofPoints = [
  "EzanVakti için yayın paketi, ikon, feature graphic ve Play Store hazırlığı",
  "Block Bloom için oyun mantığı, kayıt sistemi, testler ve market dokümanları",
  "Fruit Isles Blast için match-3 prototipi ve release appbundle akışı",
  "Instagram İndirici için SEO sayfası, FAQ schema, robots/sitemap ve PHP API notları",
];

const caseStudies = [
  {
    name: "EzanVakti",
    role: "Mobil ürün geliştirme ve yayın hazırlığı",
    summary:
      "Namaz vakitleri, konum tabanlı hesaplama, ezan bildirimleri, kıble, zikirmatik, kaza takibi, radyo ve Kur'an ses kütüphanesiyle kapsamlı dini teknoloji ürünü.",
    outcome:
      "Google Play'e hazırlanabilecek AAB çıktısı, release imzalama notları, debug symbol ayrımı, ikon ve market görsel seti oluşturuldu.",
    stack: ["Flutter", "Dart", "Konum", "Bildirim", "SQLite", "Audio", "Google Play"],
  },
  {
    name: "Block Bloom",
    role: "Oyun mantığı ve mobil MVP",
    summary:
      "Block Blast tarzı 8x8 board, akıllı 3 parça üretimi, satır/sütun temizleme, combo, booster, günlük hedef ve bahçe ilerlemesi bulunan Flutter oyun MVP'si.",
    outcome:
      "Board logic testleri, smoke testleri, release notları, gizlilik politikası taslağı ve market hazırlık kontrol listesiyle düzenli ürün dosyası kuruldu.",
    stack: ["Flutter", "Game Logic", "State", "Persistence", "Testing", "UX Feedback"],
  },
  {
    name: "Fruit Isles Blast",
    role: "Match-3 oyun prototipi",
    summary:
      "Meyve temalı mobil match-3 oyunu için tek dosyada çalışan temel oyun akışı, mobil kurulum notları ve Play Store için appbundle alma süreci.",
    outcome:
      "Android/iOS proje üretimi, bağımlılık kurulumu ve release AAB çıkış adımları netleştirildi.",
    stack: ["Flutter", "Dart", "Match-3", "Mobile Game", "AAB"],
  },
  {
    name: "Instagram İndirici Site",
    role: "SEO odaklı web aracı",
    summary:
      "Reels, video, fotoğraf ve story bağlantıları için kurgulanan tek sayfa web aracı; meta etiketler, FAQ, schema ve backend entegrasyon notlarıyla tasarlandı.",
    outcome:
      "Arama motoru uyumlu sayfa yapısı, sitemap, robots ve PHP çözüm notları hazırlandı.",
    stack: ["HTML", "CSS", "PHP API", "SEO", "Schema", "Responsive UI"],
  },
];

const capabilityGroups = [
  {
    title: "Mobil mühendislik",
    items: ["Flutter / Dart", "Provider ve state yönetimi", "Cihaz izinleri", "Bildirim planlama", "Konum ve audio servisleri"],
  },
  {
    title: "Oyun geliştirme",
    items: ["Unity / C#", "Board ve parça sistemleri", "Skor, combo, booster", "Oyun sonu kontrolü", "Geri bildirim animasyonları"],
  },
  {
    title: "Yayın ve teslim",
    items: ["AAB / APK paketleme", "Release imzalama", "Debug symbol ayrımı", "Market görselleri", "Gizlilik ve release notları"],
  },
  {
    title: "Web ve büyüme",
    items: ["Responsive arayüz", "SEO meta yapısı", "Schema / FAQ", "Sitemap ve robots", "Basit backend entegrasyonu"],
  },
];

const credentials = [
  {
    title: "Sertifika bilgileri",
    body: "Belge adı, veren kurum, tarih ve doğrulama linki paylaşıldığında bu alan doğrudan gerçek sertifikalarla güncellenebilir.",
  },
  {
    title: "Proje kanıtları",
    body: "Kod klasörleri, APK/AAB çıktıları, test dosyaları, market hazırlık dokümanları ve teslim zipleri portfolyo kanıtı olarak hazır.",
  },
  {
    title: "Kaynak kod teslimi",
    body: "Bu site için kaynak dosyalar, kurulum talimatı ve yayınlanabilir kod paketi hazırlanmıştır.",
  },
];

const processSteps = [
  ["Keşif", "Ürün ihtiyacı, hedef kullanıcı ve ilk sürüm kapsamı netleşir."],
  ["Prototip", "Çalışan uygulama, oyun mantığı veya web aracı hızlıca ayağa kaldırılır."],
  ["Yayın", "Paketleme, imzalama, market görselleri ve politika dosyaları tamamlanır."],
  ["İyileştirme", "Test, performans, arayüz akışı ve kullanıcı geri dönüşleriyle sürüm güçlendirilir."],
];

export default function Home() {
  return (
    <main>
      <header className="site-header" aria-label="Ana gezinme">
        <a className="brand" href="#top" aria-label="Muhammed Ali Erol portfolyo ana sayfa">
          <span className="brand-mark">MAE</span>
          <span>Muhammed Ali Erol</span>
        </a>
        <nav className="nav-links" aria-label="Sayfa bölümleri">
          <a href="#projeler">Projeler</a>
          <a href="#yetkinlikler">Yetkinlikler</a>
          <a href="#sertifikalar">Kanıtlar</a>
          <a href="#kaynak">Kaynak Kod</a>
        </nav>
      </header>

      <section id="top" className="hero-section" aria-labelledby="hero-title">
        <div className="hero-copy">
          <p className="eyebrow">Mobil ürün geliştiricisi • oyun prototipleme • yayın hazırlığı</p>
          <h1 id="hero-title">Fikirleri yayına hazır mobil ürünlere dönüştürüyorum.</h1>
          <p className="hero-lede">
            Flutter, Unity ve Google Play süreçlerini birlikte kullanarak çalışan
            uygulamalar, oyun MVP'leri ve SEO odaklı web araçları geliştiriyorum.
            Portfolyom; kod, yayın paketi, görsel hazırlık ve teslim dosyalarıyla
            somut işler üzerine kurulu.
          </p>
          <div className="hero-actions" aria-label="Hızlı bağlantılar">
            <a className="primary-action" href="#projeler">Çalışmaları incele</a>
            <a className="secondary-action" href="#kaynak">Açık kodu gör</a>
          </div>
          <dl className="headline-grid">
            {headlineStats.map((item) => (
              <div key={item.value} className="headline-stat">
                <dt>{item.value}</dt>
                <dd>{item.label}</dd>
              </div>
            ))}
          </dl>
        </div>

        <div className="hero-visual" aria-label="Portfolyo ürün vitrini">
          <div className="feature-art">
            <img src="/portfolio/ezan-vakti-feature.png" alt="EzanVakti market görseli" />
          </div>
          <div className="phone-preview">
            <img src="/portfolio/ezan-vakti-screen.png" alt="EzanVakti uygulama ekranı" />
          </div>
          <aside className="release-panel" aria-label="Yayın hazırlığı özeti">
            <span className="panel-label">Yayın Dosyası</span>
            <strong>EzanVakti</strong>
            <p>AAB, APK, ikon, feature graphic ve market hazırlık notları.</p>
          </aside>
        </div>
      </section>

      <section className="proof-strip" aria-labelledby="proof-title">
        <div>
          <p className="section-kicker">Kariyer odağı</p>
          <h2 id="proof-title">Sadece arayüz değil, yayınlanabilir ürün teslimi.</h2>
        </div>
        <ul>
          {proofPoints.map((point) => (
            <li key={point}>{point}</li>
          ))}
        </ul>
      </section>

      <section id="projeler" className="section projects-section" aria-labelledby="projects-title">
        <div className="section-heading">
          <p className="section-kicker">Seçili projeler</p>
          <div>
            <h2 id="projects-title">Gerçek dosyalara dayanan profesyonel iş vitrini.</h2>
            <p>
              Aşağıdaki çalışmalar klasördeki proje yapılarından, paketlerden ve
              dokümanlardan derlendi. Her proje için rol, kapsam, sonuç ve teknoloji
              seti ayrı gösterildi.
            </p>
          </div>
        </div>

        <div className="case-grid">
          {caseStudies.map((project) => (
            <article className="case-card" key={project.name}>
              <div className="case-topline">
                <span>{project.role}</span>
              </div>
              <h3>{project.name}</h3>
              <p>{project.summary}</p>
              <div className="outcome-box">
                <span>Sonuç</span>
                <p>{project.outcome}</p>
              </div>
              <div className="tag-list" aria-label={`${project.name} teknoloji seti`}>
                {project.stack.map((tag) => (
                  <span key={tag}>{tag}</span>
                ))}
              </div>
            </article>
          ))}
        </div>
      </section>

      <section id="yetkinlikler" className="section capability-section" aria-labelledby="capability-title">
        <div className="section-heading">
          <p className="section-kicker">Yetkinlik haritası</p>
          <div>
            <h2 id="capability-title">Mobil, oyun, yayın ve web tarafını birlikte taşıyan profil.</h2>
            <p>
              Portfolyonun güçlü tarafı tek bir teknoloji adı değil; çalışan ürünü
              tasarlama, paketleme ve yayına hazırlama becerisinin aynı akışta olması.
            </p>
          </div>
        </div>
        <div className="capability-grid">
          {capabilityGroups.map((group) => (
            <article className="capability-card" key={group.title}>
              <h3>{group.title}</h3>
              <ul>
                {group.items.map((item) => (
                  <li key={item}>{item}</li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </section>

      <section id="sertifikalar" className="section evidence-section" aria-labelledby="evidence-title">
        <div className="evidence-copy">
          <p className="section-kicker">Sertifikalar ve kanıtlar</p>
          <h2 id="evidence-title">Doğrulanabilir bilgiye dayalı kariyer sayfası.</h2>
          <p>
            Sertifika adları ve linkleri henüz paylaşılmadığı için burada sahte iddia
            yerine hazır alanlar ve mevcut proje kanıtları gösteriliyor. Belge
            bilgileri geldiğinde sayfa gerçek doğrulama linkleriyle güncellenebilir.
          </p>
        </div>
        <div className="evidence-list">
          {credentials.map((item) => (
            <article className="evidence-item" key={item.title}>
              <h3>{item.title}</h3>
              <p>{item.body}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="section process-section" aria-labelledby="process-title">
        <div className="section-heading compact">
          <p className="section-kicker">Çalışma akışı</p>
          <h2 id="process-title">Fikirden yayın paketine net süreç.</h2>
        </div>
        <ol className="process-list">
          {processSteps.map(([title, body], index) => (
            <li key={title}>
              <span>{String(index + 1).padStart(2, "0")}</span>
              <strong>{title}</strong>
              <p>{body}</p>
            </li>
          ))}
        </ol>
      </section>

      <section id="kaynak" className="source-section" aria-labelledby="source-title">
        <div>
          <p className="section-kicker">Açık kod teslimi</p>
          <h2 id="source-title">Kaynak kod, düzenli proje paketi olarak hazır.</h2>
          <p>
            Site kodu Next/Vinext yapısında; ana sayfa, stil dosyası, metadata ve
            görsel varlıklar ayrılmış durumda. Kod paketinde kurulum notları ve
            düzenlenecek alanlar ayrıca belirtilmiştir.
          </p>
        </div>
        <a className="primary-action light" href="/muhammed-ali-erol-portfolio-source.zip">
          Kaynak kod paketini indir
        </a>
      </section>
    </main>
  );
}