// Era Koleji — page sections (hero, about, committees, schedule, sponsors, footer)

const Hero = ({ tweaks }) => {
  const { title1, title2, title3, stat1, stat1Lbl, stat2, stat2Lbl, stat3, stat3Lbl } = tweaks;
  return (
    <section className="hero" id="hero">
      <div className="hero-ornament hero-orn-1" />
      <div className="hero-ornament hero-orn-2" />
      <div className="hero-inner">
        <div className="hero-badge">
          <span className="hero-badge-dot">✦</span>
          2026 Ulusal Forum
        </div>
        <h1>
          {title1}
          <br />
          {title2}
          <br />
          {title3}
        </h1>
        <p className="lead">
          Geleceğin liderlerini bugünden yetiştiriyoruz. Akademik mükemmellik,
          liderlik becerileri ve küresel vizyon ile donanmış bir nesil için
          benzersiz bir deneyim.
        </p>
        <div className="hero-cta">
          <a href="#apply" className="btn btn-primary">
            Hemen Başvur
            <Icon name="arrow" size={18} />
          </a>
          <a href="#about" className="btn btn-ghost">
            Daha Fazla Bilgi
          </a>
        </div>

        <div className="hero-stats reveal">
          <div className="hero-stat">
            <div className="hero-stat-num">{stat1}</div>
            <div className="hero-stat-lbl">{stat1Lbl}</div>
          </div>
          <div className="hero-stat">
            <div className="hero-stat-num">{stat2}</div>
            <div className="hero-stat-lbl">{stat2Lbl}</div>
          </div>
          <div className="hero-stat">
            <div className="hero-stat-num">{stat3}</div>
            <div className="hero-stat-lbl">{stat3Lbl}</div>
          </div>
        </div>
      </div>

      <div className="scroll-ind">
        <span>Aşağı Kaydır</span>
        <div className="scroll-ind-line" />
      </div>
    </section>
  );
};

const About = () => {
  const cards = [
    { icon: "academic", title: "Akademik Mükemmellik", text: "Uzman akademisyenler ve mentorlar eşliğinde, güncel konularda derinlemesine araştırma ve analiz yapma fırsatı." },
    { icon: "leadership", title: "Liderlik Gelişimi", text: "Takım çalışması, müzakere ve karar alma süreçlerinde aktif rol alarak liderlik becerilerinizi geliştirin." },
    { icon: "globe", title: "Küresel Perspektif", text: "Dünya gündemindeki konuları farklı bakış açılarından değerlendirerek küresel vatandaşlık bilinci kazanın." },
    { icon: "spark", title: "Unutulmaz Deneyim", text: "Yeni arkadaşlıklar, networking fırsatları ve hayat boyu hatırlayacağınız anılar biriktirin." },
  ];
  return (
    <section id="about">
      <div className="container">
        <SectionHead
          eyebrow="Forum Hakkında"
          title="Neden Era Koleji <em>Ulusal Formu?</em>"
          lead="Türkiye'nin dört bir yanından gelen genç liderlerin bir araya geldiği, üç günlük yoğun bir entelektüel deneyim."
        />
        <div className="about-grid">
          {cards.map((c, i) => (
            <div className="about-card reveal" key={i} style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="about-icon"><Icon name={c.icon} size={24} /></div>
              <h3>{c.title}</h3>
              <p>{c.text}</p>
            </div>
          ))}
        </div>

        <div className="about-quote reveal">
          <blockquote>
            Gençler sadece geleceğin değil, bugünün de liderleridir. Era Koleji Ulusal Formu, bu potansiyeli açığa çıkarmak için tasarlandı.
          </blockquote>
          <cite>— Era Koleji Akademik Kurulu</cite>
        </div>
      </div>
    </section>
  );
};

const Committees = () => {
  return (
    <section id="committees">
      <div className="container">
        <SectionHead
          eyebrow="Komiteler"
          title="İlgi Alanınızı <em>Seçin</em>"
          lead="Her biri farklı bir alana odaklanan altı komitemizden, başvuruda 1. ve 2. tercihinizi belirtebilirsiniz."
        />
        <div className="com-grid">
          {COMMITTEES.map((c, i) => (
            <div className="com-card reveal" key={c.id} style={{ transitionDelay: `${i * 60}ms` }}>
              <div className="com-num">{String(i + 1).padStart(2, "0")}</div>
              <div className="com-cat">{c.cat}</div>
              <h3>{c.name}</h3>
              <p className="com-desc">{c.desc}</p>
              <div className="com-people">
                <div>
                  <div className="com-person-role">Başkan</div>
                  <div className="com-person-name">{c.chair}</div>
                </div>
                <div>
                  <div className="com-person-role">Bşk. Yardımcısı</div>
                  <div className="com-person-name">{c.vice}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Schedule = () => (
  <section id="schedule">
    <div className="container">
      <SectionHead
        eyebrow="Program"
        title="Üç Günde <em>Forum Akışı</em>"
        lead="Açılıştan ödül törenine kadar, her dakikası özenle planlanmış bir deneyim."
      />
      <div className="sched-wrap reveal">
        {SCHEDULE.map((d, i) => (
          <div className="sched-day" key={i}>
            <div className="sched-day-num">{d.day}</div>
            <div className="sched-day-title">{d.title}</div>
            <ul className="sched-list">
              {d.items.map((it, j) => (
                <li className="sched-item" key={j}>
                  <div className="sched-time">{it.time}</div>
                  <div className="sched-evt">
                    {it.evt}
                    {it.note && <small>{it.note}</small>}
                  </div>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Sponsors = () => (
  <section id="sponsors">
    <div className="container">
      <SectionHead
        eyebrow="Destekçilerimiz"
        title="Bizi <em>Destekleyenler</em>"
        lead="Forumumuzu mümkün kılan kıymetli kurum ve kuruluşlar."
      />
      <div className="sponsors-strip reveal">
        {SPONSORS.map((s, i) => (
          <div className="sponsor" key={i}>
            <div className="sponsor-mark">{s.mark}</div>
            {s.name}
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="foot">
    <div className="container">
      <div className="foot-grid">
        <div>
          <div className="foot-brand">
            <div className="nav-mark">E</div>
            <div className="nav-name">Era Koleji Ulusal Formu</div>
          </div>
          <p className="foot-blurb">
            Era Koleji Ulusal Formu, geleceğin liderlerini bugünden yetiştirmek için tasarlanmış benzersiz bir akademik deneyimdir.
          </p>
        </div>
        <div className="foot-col">
          <h4>Hızlı Erişim</h4>
          <ul>
            <li><a href="#hero">Ana Sayfa</a></li>
            <li><a href="#about">Hakkında</a></li>
            <li><a href="#committees">Komiteler</a></li>
            <li><a href="#schedule">Program</a></li>
            <li><a href="#apply">Başvuru</a></li>
            <li><a href="admin-login.html">Admin Paneli</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h4>İletişim</h4>
          <ul>
            <li><a href="#"><Icon name="mail" size={14}/> erakolejiulusalformu@gmail.com</a></li>
            <li><a href="#"><Icon name="phone" size={14}/> +90 530 422 08 35</a></li>
            <li><a href="#"><Icon name="pin" size={14}/> Era Koleji, İzmir</a></li>
          </ul>
        </div>
      </div>
      <div className="foot-bottom">
        <div>© 2026 Era Koleji Ulusal Formu. Tüm hakları saklıdır.</div>
        <div>Tasarım & Geliştirme · Era Koleji</div>
      </div>
    </div>
  </footer>
);

window.Hero = Hero;
window.About = About;
window.Committees = Committees;
window.Schedule = Schedule;
window.Sponsors = Sponsors;
window.Footer = Footer;