import React from "react";

function LanguagestudyPage() {
  return (
    <div className="bg-slate-50 min-h-screen py-8 font-sans text-slate-800">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <header className="text-center border-b border-slate-200 pb-8 mb-12">
          <h1 className="text-3xl md:text-5xl font-extrabold text-slate-900 mb-6 tracking-tight">Wikipedia Sprachstudie</h1>
          <div className="mt-6 flex flex-wrap justify-center gap-4">
            <div className="bg-white px-4 py-2 rounded-full border border-slate-200 shadow-sm flex items-center space-x-2">
              <span className="bg-slate-200 text-slate-700 text-xs font-bold px-2 py-0.5 rounded uppercase tracking-wide">Status</span>
              <span className="text-sm font-medium text-slate-600">Abgeschlossen</span>
            </div>
            <div className="bg-white px-4 py-2 rounded-full border border-slate-200 shadow-sm flex items-center space-x-2">
              <span className="bg-slate-200 text-slate-700 text-xs font-bold px-2 py-0.5 rounded uppercase tracking-wide">Typ</span>
              <span className="text-sm font-medium text-slate-600">Data Science / Analyse</span>
            </div>
            <div className="bg-white px-4 py-2 rounded-full border border-slate-200 shadow-sm flex items-center space-x-2">
              <span className="bg-slate-200 text-slate-700 text-xs font-bold px-2 py-0.5 rounded uppercase tracking-wide">Kontext</span>
              <span className="text-sm font-medium text-slate-600">CS50x Final Project</span>
            </div>
          </div>
          <div className="mt-8">
            <a href="https://github.com/simon-266/WikiDictionaryResearch" target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:text-indigo-800 font-bold inline-flex items-center bg-white px-4 py-2 rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-all">
              <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd"></path></svg>
              GitHub Repository
            </a>
          </div>
        </header>

        <section className="mb-16">
          <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">1. Forschungsfrage & Ziel</h2>
          <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
            <div className="p-4 bg-amber-50 border-l-4 border-amber-400 text-amber-900 font-medium rounded-r">
              "Die 1000 h&auml;ufigsten W&ouml;rter machen etwa 80 % des gesprochenen Wortschatzes aus."
            </div>
            <p className="text-lg leading-relaxed text-slate-700">
              Dieser oft zitierte Fakt beim Sprachenlernen war der Ausgangspunkt für meine Untersuchung.
              Um dies zu verifizieren, habe ich ein Python-Skript entwickelt, das <b>15.000 Wikipedia-Artikel</b> analysiert
              und die Häufigkeit englischer Wörter statistisch auswertet.
            </p>
          </div>
        </section>

        <section className="mb-16">
          <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">2. Visualisierung der Ergebnisse</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
              <img
                src="/assets/projects/languageStudy/images/top1000.png"
                alt="Kreisdiagramm: Die Top 1000 W&ouml;rter im Vergleich zum Rest"
                className="w-full h-auto rounded-lg mb-2"
              />
              <p className="text-sm text-center text-slate-500 font-medium">Top 1000 Wörter vs. Rest</p>
            </div>
            <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
              <img
                src="/assets/projects/languageStudy/images/stats.png"
                alt="Kreisdiagramm: Vergleiche der Vorkommen"
                className="w-full h-auto rounded-lg mb-2"
              />
              <p className="text-sm text-center text-slate-500 font-medium">Häufigkeitsverteilung</p>
            </div>
          </div>
          <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm mt-6">
            <h3 className="text-xl font-bold text-slate-800 mb-2">Das Ergebnis</h3>
            <p className="text-slate-700 leading-relaxed">
              Die Analyse von Millionen von Wörtern zeigte: Die Top 1000 Wörter machen tatsächlich einen
              signifikanten Anteil von <b>knapp 70%</b> aus. Auch wenn die 80%-Marke knapp verfehlt wurde,
              bestätigt die Studie, dass eine Konzentration auf den Grundwortschatz für Lernende extrem effizient ist.
            </p>
          </div>
        </section>

        <section className="mb-16">
          <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">3. Tech Stack & Methoden</h2>
          <div className="bg-slate-50 p-6 rounded-xl border border-slate-200">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Python 3</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Pandas</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Wikipedia API</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Multithreading</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">SQLite</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Matplotlib</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Jupyter Notebooks</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Git</div>
            </div>
          </div>
        </section>

        <section className="mb-16">
          <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">4. Technische Herausforderungen</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
              <h3 className="text-xl font-bold text-slate-800 mb-3 pb-2 border-b border-slate-100">Performance (Multithreading)</h3>
              <p className="text-slate-600 text-sm">
                Um 15.000 Seiten effizient zu verarbeiten, nutzte ich die <b>Python Future Library</b> für
                parallele Requests. Batch-Verarbeitung verhinderte dabei einen RAM-Overflow.
              </p>
            </div>
            <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
              <h3 className="text-xl font-bold text-slate-800 mb-3 pb-2 border-b border-slate-100">Datenbereinigung</h3>
              <p className="text-slate-600 text-sm">
                Der rohe Text aus der <b>Wikipedia Library</b> musste aufbereitet und von Satzzeichen sowie Metadaten befreit werden, um
                verzerrungsfreie Wortzählungen zu ermöglichen.
              </p>
            </div>
          </div>
        </section>

      </div>
    </div>
  );
}

export default LanguagestudyPage;