export default function ElmIBWebsite() {
  const navItems = [
    "Ana səhifə",
    "ELM İB haqqında",
    "Məqalə qəbulu",
    "Müəllif qeydiyyatı",
    "ELM və İnnovasiya jurnalı",
    "Məqalələr toplusu",
    "Tədbirlər",
    "Elm və təhsil xəbərləri",
    "Elm və təhsil sənədləri",
    "Əlaqə",
  ];

  const journalIssues = [
    { id: "№ 12", title: "ELM və İnnovasiya", year: "2026", desc: "Jurnalın son sayı və məqalə arxivi" },
    { id: "№ 11", title: "ELM və İnnovasiya", year: "2025", desc: "Elmi məqalələr və innovativ yanaşmalar" },
    { id: "№ 10", title: "ELM və İnnovasiya", year: "2025", desc: "Təhsil, elm və gənclər fəaliyyəti" },
    { id: "№ 09", title: "ELM və İnnovasiya", year: "2024", desc: "Akademik və ictimai layihələr" },
  ];

  const articleCollections = [
    { title: "Konfrans materialları toplusu", date: "Mart 2026", type: "PDF" },
    { title: "Doktorant və gənc tədqiqatçılar toplusu", date: "Dekabr 2025", type: "PDF" },
    { title: "Elm Günü elmi seminar məqalələri", date: "Mart 2025", type: "PDF" },
    { title: "Lütfi Zadə məntiq olimpiadası materialları", date: "Oktyabr 2024", type: "PDF" },
  ];

  const events = [
    {
      title: "Elm Günü elmi seminarı",
      date: "27 Mart 2026",
      place: "Bakı",
      desc: "Doktorantlar və gənc tədqiqatçılar üçün elmi seminar və müzakirə platforması.",
    },
    {
      title: "Lütfi Zadə adına Məntiq Olimpiadası",
      date: "Oktyabr 2026",
      place: "Azərbaycan",
      desc: "Məntiq, analitik düşüncə və gənclərin elmi potensialının inkişafına yönəlmiş müsabiqə.",
    },
    {
      title: "Doktorantura istiqamətləndirmə görüşü",
      date: "Aprel 2026",
      place: "Hibrid format",
      desc: "Sənədləşmə, ixtisas seçimi, elmi rəhbər və qəbul prosesi üzrə məlumat sessiyası.",
    },
  ];

  const news = [
    "Doktorantura və magistratura istiqamətində yeni maarifləndirici proqramlar",
    "Gənclər üçün elmi yazı və məqalə hazırlığı üzrə təlimlər",
    "Elm və təhsil sahəsində yeni layihələr və tərəfdaşlıqlar",
    "Tədqiqatçıların beynəlxalq elmi platformalara inteqrasiyası",
  ];

  const documents = [
    "Nizamnamə və fəaliyyət istiqamətləri",
    "Məqalə göndərmə qaydaları",
    "Müəllif üçün texniki tələblər",
    "Jurnalda dərc siyasəti",
    "Etik qaydalar və plagiat siyasəti",
    "Konfrans və seminar iştirak qaydaları",
  ];

  const sectionTitle = "text-2xl md:text-3xl font-bold tracking-tight";
  const card = "rounded-3xl border border-slate-200 bg-white shadow-sm hover:shadow-lg transition p-6";

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900">
      <header className="sticky top-0 z-50 border-b border-slate-200 bg-white/95 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 md:px-8">
          <div className="flex items-center gap-3">
            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-red-700 to-blue-700 text-lg font-extrabold text-white shadow">
              ELM
            </div>
            <div>
              <div className="text-lg font-bold md:text-xl">ELM İB</div>
              <div className="text-xs text-slate-500 md:text-sm">Gənclərin sosial-intellektual inkişafına dəstək</div>
            </div>
          </div>

          <nav className="hidden gap-5 lg:flex">
            {navItems.slice(0, 7).map((item) => (
              <a key={item} href={`#${item}`} className="text-sm font-medium text-slate-700 transition hover:text-red-700">
                {item}
              </a>
            ))}
          </nav>

          <button className="rounded-2xl bg-blue-700 px-4 py-2 text-sm font-semibold text-white shadow hover:opacity-90">
            Qeydiyyat
          </button>
        </div>
      </header>

      <section className="relative overflow-hidden bg-gradient-to-r from-red-700 via-red-600 to-blue-800 text-white">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.2),transparent_30%),radial-gradient(circle_at_bottom_left,rgba(255,255,255,0.15),transparent_25%)]" />
        <div className="relative mx-auto grid max-w-7xl gap-10 px-4 py-16 md:grid-cols-2 md:px-8 md:py-24">
          <div className="space-y-6">
            <div className="inline-flex rounded-full border border-white/20 bg-white/10 px-4 py-2 text-sm font-medium">
              Elm, təhsil və gənclərin inkişafı üçün vahid platforma
            </div>
            <h1 className="text-4xl font-black leading-tight md:text-6xl">
              ELM Gənclərin Sosial-İntellektual İnkişafına Dəstək İctimai Birliyi
            </h1>
            <p className="max-w-2xl text-base leading-7 text-white/90 md:text-lg">
              Məqalə qəbulu, müəllif qeydiyyatı, jurnal nəşrləri, tədbirlər, elm və təhsil xəbərləri, sənədlər və əlaqə məlumatlarını bir araya gətirən müasir rəsmi sayt konsepsiyası.
            </p>
            <div className="flex flex-wrap gap-3">
              <a href="#Məqalə qəbulu" className="rounded-2xl bg-white px-5 py-3 font-semibold text-red-700 shadow">
                Məqalə göndər
              </a>
              <a href="#ELM və İnnovasiya jurnalı" className="rounded-2xl border border-white/30 px-5 py-3 font-semibold text-white">
                Jurnala bax
              </a>
            </div>
          </div>

          <div className="grid gap-4 sm:grid-cols-2">
            {[
              ["200+", "Qəbul edilən məqalə və materiallar"],
              ["50+", "Elmi seminar və tədbir"],
              ["10+", "İllik ictimai-elmi fəaliyyət"],
              ["24/7", "Onlayn müraciət və qeydiyyat"],
            ].map(([value, label]) => (
              <div key={label} className="rounded-3xl border border-white/20 bg-white/10 p-6 backdrop-blur">
                <div className="text-3xl font-black">{value}</div>
                <div className="mt-2 text-sm text-white/85">{label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <main className="mx-auto max-w-7xl space-y-20 px-4 py-14 md:px-8 md:py-20">
        <section id="ELM İB haqqında" className="grid gap-8 md:grid-cols-[1.2fr_0.8fr]">
          <div className={card}>
            <h2 className={sectionTitle}>ELM İB haqqında</h2>
            <p className="mt-4 text-base leading-7 text-slate-600">
              ELM İB gənclərin sosial, intellektual və elmi inkişafını dəstəkləyən, təhsil və tədqiqat mühitinə töhfə verən ictimai birlikdir. Saytın bu bölməsində təşkilatın missiyası, fəaliyyət istiqamətləri, prioritetləri, tərəfdaşlıqları və həyata keçirdiyi layihələr təqdim olunur.
            </p>
            <div className="mt-6 grid gap-4 sm:grid-cols-2">
              {[
                "Elmi və tədris layihələri",
                "Gənclərin inkişaf proqramları",
                "Konfrans və seminarlar",
                "Jurnal və nəşr fəaliyyəti",
              ].map((item) => (
                <div key={item} className="rounded-2xl bg-slate-100 p-4 font-medium text-slate-700">
                  {item}
                </div>
              ))}
            </div>
          </div>

          <div className={card}>
            <h3 className="text-xl font-bold">Sürətli keçidlər</h3>
            <div className="mt-5 space-y-3">
              {[
                "Məqalə qəbul qaydaları",
                "Müəllif kabineti",
                "Jurnalın sayları",
                "Tədbirlər təqvimi",
                "Xəbərlər və elanlar",
                "Rəsmi sənədlər",
              ].map((item) => (
                <div key={item} className="rounded-2xl border border-slate-200 p-4 text-sm font-medium text-slate-700 hover:border-blue-400">
                  {item}
                </div>
              ))}
            </div>
          </div>
        </section>

        <section id="Məqalə qəbulu" className="grid gap-8 md:grid-cols-2">
          <div className={card}>
            <h2 className={sectionTitle}>Məqalə qəbulu</h2>
            <p className="mt-4 text-slate-600">
              Müəlliflər məqalələrini elektron formada göndərə, mövzu sahəsini seçə, faylları əlavə edə və redaksiya prosesi ilə bağlı statusu izləyə bilərlər.
            </p>
            <div className="mt-6 grid gap-4">
              <input className="rounded-2xl border border-slate-300 px-4 py-3 outline-none focus:border-red-600" placeholder="Məqalənin adı" />
              <input className="rounded-2xl border border-slate-300 px-4 py-3 outline-none focus:border-red-600" placeholder="Müəllifin adı və soyadı" />
              <input className="rounded-2xl border border-slate-300 px-4 py-3 outline-none focus:border-red-600" placeholder="E-poçt ünvanı" />
              <select className="rounded-2xl border border-slate-300 px-4 py-3 outline-none focus:border-red-600">
                <option>İstiqaməti seçin</option>
                <option>Riyaziyyat</option>
                <option>Təhsil</option>
                <option>İnnovasiya</option>
                <option>Sosial elmlər</option>
              </select>
              <div className="rounded-2xl border border-dashed border-slate-300 px-4 py-8 text-center text-sm text-slate-500">
                Məqalə faylını yükləyin (PDF / DOC / DOCX)
              </div>
              <button className="rounded-2xl bg-red-700 px-5 py-3 font-semibold text-white hover:opacity-90">
                Göndər
              </button>
            </div>
          </div>

          <div id="Müəllif qeydiyyatı" className={card}>
            <h2 className={sectionTitle}>Müəllif qeydiyyatı</h2>
            <p className="mt-4 text-slate-600">
              Müəlliflər şəxsi kabinet yaradaraq məqalələrini izləyə, redaksiya bildirişlərini görə və növbəti nəşrlər üçün müraciətlərini idarə edə bilərlər.
            </p>
            <div className="mt-6 grid gap-4">
              <input className="rounded-2xl border border-slate-300 px-4 py-3 outline-none focus:border-blue-700" placeholder="Ad" />
              <input className="rounded-2xl border border-slate-300 px-4 py-3 outline-none focus:border-blue-700" placeholder="Soyad" />
              <input className="rounded-2xl border border-slate-300 px-4 py-3 outline-none focus:border-blue-700" placeholder="İstifadəçi adı" />
              <input className="rounded-2xl border border-slate-300 px-4 py-3 outline-none focus:border-blue-700" placeholder="Şifrə" type="password" />
              <button className="rounded-2xl bg-blue-700 px-5 py-3 font-semibold text-white hover:opacity-90">
                Qeydiyyatdan keç
              </button>
            </div>
          </div>
        </section>

        <section id="ELM və İnnovasiya jurnalı" className="grid gap-8 lg:grid-cols-2">
          <div className={card}>
            <div className="flex items-center justify-between gap-4">
              <div>
                <h2 className={sectionTitle}>ELM və İnnovasiya jurnalı</h2>
                <p className="mt-3 text-slate-600">Jurnalın dərc olunmuş sayları ardıcıllıqla təqdim edilir.</p>
              </div>
              <button className="rounded-2xl bg-blue-700 px-4 py-3 text-sm font-semibold text-white">Arxivə keç</button>
            </div>
            <div className="mt-6 space-y-4">
              {journalIssues.map((issue) => (
                <div key={issue.id} className="rounded-2xl border border-slate-200 p-5 hover:border-blue-400">
                  <div className="flex items-center justify-between gap-4">
                    <div>
                      <div className="text-sm font-semibold text-red-700">{issue.id}</div>
                      <div className="mt-1 text-lg font-bold">{issue.title}</div>
                      <div className="mt-1 text-sm text-slate-500">{issue.desc}</div>
                    </div>
                    <div className="rounded-xl bg-slate-100 px-3 py-2 text-sm font-semibold text-slate-700">{issue.year}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div id="Məqalələr toplusu" className={card}>
            <h2 className={sectionTitle}>Məqalələr toplusu</h2>
            <p className="mt-3 text-slate-600">Topluların yüklənməsi üçün ayrıca arxiv bölməsi.</p>
            <div className="mt-6 space-y-4">
              {articleCollections.map((item) => (
                <div key={item.title} className="flex items-center justify-between rounded-2xl border border-slate-200 p-4 hover:border-red-400">
                  <div>
                    <div className="font-semibold">{item.title}</div>
                    <div className="mt-1 text-sm text-slate-500">{item.date}</div>
                  </div>
                  <button className="rounded-xl bg-red-700 px-4 py-2 text-sm font-semibold text-white">
                    {item.type}
                  </button>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section id="Tədbirlər" className="space-y-6">
          <div className="flex items-end justify-between gap-4">
            <div>
              <h2 className={sectionTitle}>Keçirilən tədbirlər</h2>
              <p className="mt-2 text-slate-600">Saytda seminar, konfrans, olimpiada və digər tədbirləri izləmək mümkündür.</p>
            </div>
            <button className="rounded-2xl border border-slate-300 px-4 py-3 text-sm font-semibold text-slate-700">Bütün tədbirlər</button>
          </div>
          <div className="grid gap-6 md:grid-cols-3">
            {events.map((event) => (
              <div key={event.title} className={card}>
                <div className="inline-flex rounded-full bg-red-100 px-3 py-1 text-xs font-bold text-red-700">{event.date}</div>
                <h3 className="mt-4 text-xl font-bold">{event.title}</h3>
                <div className="mt-2 text-sm font-medium text-blue-700">{event.place}</div>
                <p className="mt-3 text-sm leading-6 text-slate-600">{event.desc}</p>
              </div>
            ))}
          </div>
        </section>

        <section className="grid gap-8 lg:grid-cols-2">
          <div id="Elm və təhsil xəbərləri" className={card}>
            <h2 className={sectionTitle}>Elm və təhsil xəbərləri</h2>
            <div className="mt-6 space-y-4">
              {news.map((item, index) => (
                <div key={item} className="rounded-2xl bg-slate-100 p-4">
                  <div className="text-xs font-bold text-red-700">Xəbər {index + 1}</div>
                  <div className="mt-2 font-semibold text-slate-800">{item}</div>
                </div>
              ))}
            </div>
          </div>

          <div id="Elm və təhsil sənədləri" className={card}>
            <h2 className={sectionTitle}>Elm və təhsil sənədləri</h2>
            <div className="mt-6 grid gap-4 sm:grid-cols-2">
              {documents.map((doc) => (
                <div key={doc} className="rounded-2xl border border-slate-200 p-4 text-sm font-medium text-slate-700 hover:border-blue-400">
                  {doc}
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="grid gap-8 lg:grid-cols-[0.9fr_1.1fr]">
          <div className={card}>
            <h2 className={sectionTitle}>Digər vacib bölmələr</h2>
            <div className="mt-6 space-y-3">
              {[
                "Tez-tez verilən suallar",
                "Tərəfdaşlar və əməkdaşlıqlar",
                "Foto və video qalereya",
                "Elanlar və müsabiqələr",
                "Onlayn müraciət sistemi",
                "Könüllülük və üzvlük proqramı",
              ].map((item) => (
                <div key={item} className="rounded-2xl bg-slate-100 p-4 font-medium text-slate-700">
                  {item}
                </div>
              ))}
            </div>
          </div>

          <div id="Əlaqə" className={card}>
            <h2 className={sectionTitle}>Ünvan və əlaqə</h2>
            <div className="mt-6 grid gap-4 md:grid-cols-2">
              <div className="rounded-2xl bg-slate-100 p-5">
                <div className="text-sm font-bold text-red-700">Ünvan</div>
                <div className="mt-2 leading-7 text-slate-700">Bakı şəhəri, Azərbaycan<br />ELM İB ofisi</div>
              </div>
              <div className="rounded-2xl bg-slate-100 p-5">
                <div className="text-sm font-bold text-blue-700">Əlaqə</div>
                <div className="mt-2 leading-7 text-slate-700">Telefon: +994 XX XXX XX XX<br />E-poçt: info@elmib.az</div>
              </div>
            </div>
            <div className="mt-6 grid gap-4">
              <input className="rounded-2xl border border-slate-300 px-4 py-3 outline-none focus:border-blue-700" placeholder="Ad və soyad" />
              <input className="rounded-2xl border border-slate-300 px-4 py-3 outline-none focus:border-blue-700" placeholder="E-poçt" />
              <textarea className="min-h-32 rounded-2xl border border-slate-300 px-4 py-3 outline-none focus:border-blue-700" placeholder="Mesajınız" />
              <button className="w-fit rounded-2xl bg-blue-700 px-5 py-3 font-semibold text-white">Göndər</button>
            </div>
          </div>
        </section>
      </main>

      <footer className="border-t border-slate-200 bg-white">
        <div className="mx-auto flex max-w-7xl flex-col gap-4 px-4 py-8 text-sm text-slate-500 md:flex-row md:items-center md:justify-between md:px-8">
          <div>© 2026 ELM Gənclərin Sosial-İntellektual İnkişafına Dəstək İctimai Birliyi</div>
          <div className="flex flex-wrap gap-4">
            <span>Rəsmi sayt konsepsiyası</span>
            <span>Məqalə qəbulu</span>
            <span>Jurnal arxivi</span>
            <span>Tədbirlər və xəbərlər</span>
          </div>
        </div>
      </footer>
    </div>
  );
}