/*  Direction A — React app (rich Avesis version) */

const { useState, useEffect } = React;
const C = window.SITE_CONTENT;

const ACCENT_OPTIONS = ["#7a1f2b", "#1f3a5f", "#2f5d3a", "#1a1a1a", "#b8732a"];

const SECTION_ORDERS = {
  "research-led": ["about", "metrics", "research", "publications", "books", "projects", "advising", "teaching", "awards", "education", "international", "roles", "news", "office", "contact"],
  "about-led": ["about", "education", "metrics", "research", "publications", "books", "teaching", "projects", "advising", "awards", "international", "roles", "news", "office", "contact"],
  "teaching-led": ["about", "metrics", "teaching", "advising", "books", "research", "publications", "projects", "awards", "education", "international", "roles", "news", "office", "contact"]
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#7a1f2b",
  "dark": false,
  "density": "regular",
  "hero": "portrait",
  "order": "research-led"
} /*EDITMODE-END*/;

// ── Helpers ────────────────────────────────────────────────
function SectionHead({ num, title }) {
  return (
    <div className="section-head">
      <span className="section-num">{num}</span>
      <h2 className="section-title">{title}</h2>
      <span className="section-rule"></span>
    </div>
  );
}

function renderAuthors(authorsStr) {
  if (!authorsStr) return null;
  const parts = authorsStr.split(/(Kınıklı G\.\s*İ\.|KINIKLI G\.\s*İ\.|Guvendik G\.)/g);
  return parts.map((part, idx) => {
    if (/^(Kınıklı G\.\s*İ\.|KINIKLI G\.\s*İ\.|Guvendik G\.)$/.test(part)) {
      return <strong key={idx} className="author-self">{part}</strong>;
    }
    return <span key={idx}>{part}</span>;
  });
}

// ── Section components ────────────────────────────────────
function About({ lang, num }) {
  return (
    <section id="about" className="section" data-screen-label="About">
      <SectionHead num={num} title={C.ui[lang].nav_about} />
      <div className="prose">
        {C.about[lang].map((p, i) => <p key={i} style={{ textAlign: "justify" }}>{p}</p>)}
      </div>
    </section>
  );
}

function Metrics({ lang, num }) {
  return (
    <section id="metrics" className="section" data-screen-label="Metrics">
      <SectionHead num={num} title={C.ui[lang].nav_metrics} />
      <ul className="metrics-grid">
        {C.metrics.map((m) => (
          <li key={m.key} className="metric">
            <div className="num">{m.value}</div>
            <div className="lbl">{lang === "tr" ? m.label_tr : m.label_en}</div>
          </li>
        ))}
      </ul>
      {C.metrics_note[lang] && <p className="pub-note" style={{ marginTop: 18 }}>{C.metrics_note[lang]}</p>}

      <div className="sdg-block">
        <div className="sdg-head">{C.ui[lang].sdg}</div>
        <div className="sdg-row">
          {C.sdgs.map((n) => (
            <span key={n} className="sdg-pill">
              <span className="n">{C.ui[lang].sdg_short} {n}</span>
              <span>{C.sdg_labels[lang][n]}</span>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function Research({ lang, num }) {
  return (
    <section id="research" className="section" data-screen-label="Research">
      <SectionHead num={num} title={C.ui[lang].nav_research} />
      <ul className="interests">
        {C.research_interests[lang].map((interest, i) => (
          <li key={i}>
            <span className="ix">{String(i + 1).padStart(2, "0")}</span>
            <span>{interest}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}

function Publications({ lang, num }) {
  const [filter, setFilter] = useState("all");
  const [expanded, setExpanded] = useState(false);

  const allPubs = C.publications_sample || [];
  const filtered = allPubs.filter((p) => {
    if (filter === "recent") return parseInt(p.year, 10) >= 2025;
    if (filter === "scie") return (p.index || "").includes("SCI-E") || (p.index || "").includes("SSCI");
    if (filter === "rct") return p.tag === "RCT" || p.tag === "Pilot RCT";
    if (filter === "scale") return p.tag === "Scale validation" || p.tag === "Reliability";
    return true;
  });

  const INITIAL_COUNT = 12;
  const visiblePubs = (filter === "all" && !expanded) ? filtered.slice(0, INITIAL_COUNT) : filtered;

  const filters = [
    { key: "all", label: lang === "tr" ? `Tümü (${allPubs.length})` : `All (${allPubs.length})` },
    { key: "recent", label: "2025–2026" },
    { key: "scie", label: "SCI-E · SSCI" },
    { key: "rct", label: lang === "tr" ? "RKT / Klinik" : "RCT" },
    { key: "scale", label: lang === "tr" ? "Ölçek & Güvenirlik" : "Scale & Validity" },
  ];

  return (
    <section id="publications" className="section" data-screen-label="Publications">
      <SectionHead num={num} title={C.ui[lang].nav_publications} />

      <div className="pub-filters" role="tablist">
        {filters.map((f) => (
          <button
            key={f.key}
            type="button"
            className={`filter-pill ${filter === f.key ? "is-active" : ""}`}
            onClick={() => { setFilter(f.key); setExpanded(false); }}
          >
            {f.label}
          </button>
        ))}
      </div>

      <ul className="pub-list">
        {visiblePubs.map((p, i) => (
          <li key={i}>
            <span className="pub-year">{p.year}</span>
            <div>
              <div className="pub-title">{p.title}</div>
              <div className="pub-authors">{renderAuthors(p.authors)}</div>
              <div className="pub-venue">
                {p.venue}
                {p.doi && (
                  <a
                    href={`https://doi.org/${p.doi}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="pub-doi"
                  >
                    doi: {p.doi} ↗
                  </a>
                )}
              </div>
              <div className="pub-index">{p.index}</div>
            </div>
            <span className="pub-tag">{p.tag}</span>
          </li>
        ))}
      </ul>

      {filter === "all" && filtered.length > INITIAL_COUNT && (
        <button
          type="button"
          className="expand-btn"
          onClick={() => setExpanded(!expanded)}
        >
          {expanded
            ? (lang === "tr" ? "Listeyi daralt ↑" : "Show fewer articles ↑")
            : (lang === "tr" ? `Tüm seçilmiş makaleleri göster (${filtered.length}) ↓` : `Show all selected articles (${filtered.length}) ↓`)}
        </button>
      )}

      <p className="pub-note">{C.publications_note[lang]}</p>
      <div className="pub-links">
        <a href={C.contact.links.find((l) => l.label === "ORCID").href} target="_blank" rel="noopener">
          {C.ui[lang].view_orcid} ↗
        </a>
        <a href={C.contact.links.find((l) => l.label === "Avesis").href} target="_blank" rel="noopener">
          {C.ui[lang].view_avesis} ↗
        </a>
      </div>
    </section>
  );
}

function Books({ lang, num }) {
  const [expanded, setExpanded] = useState(false);
  const allChapters = C.book_chapters || [];
  const INITIAL_CHAPTERS = 10;
  const visibleChapters = expanded ? allChapters : allChapters.slice(0, INITIAL_CHAPTERS);

  return (
    <section id="books" className="section" data-screen-label="Books">
      <SectionHead num={num} title={C.ui[lang].nav_books} />

      <h4 style={{
        fontFamily: "var(--sans)", fontSize: 10, textTransform: "uppercase",
        letterSpacing: "0.18em", color: "var(--ink-3)", margin: "8px 0 14px", fontWeight: 600
      }}>{C.ui[lang].authored_books}</h4>

      <ul className="books-authored">
        {C.books_authored[lang].map((b, i) => (
          <li key={i}>
            <div className="yr">{b.year}</div>
            <h3 className="ttl">{b.title}</h3>
            <div className="role">{b.role}</div>
            <div className="pub">{b.publisher}</div>
            <div className="meta">{b.pages} {C.ui[lang].pages} · ISBN {b.isbn}</div>
          </li>
        ))}
      </ul>

      <h4 className="chapters-head">{C.ui[lang].book_chapters} ({allChapters.length})</h4>
      <ul className="chapter-list">
        {visibleChapters.map((c, i) => (
          <li key={i}>
            <span className="yr">{c.year}</span>
            <span className="ttl">
              {lang === "tr" ? c.title_tr : c.title_en}
              <span className="in">— {c.in}</span>
            </span>
          </li>
        ))}
      </ul>

      {allChapters.length > INITIAL_CHAPTERS && (
        <button
          type="button"
          className="expand-btn"
          onClick={() => setExpanded(!expanded)}
        >
          {expanded
            ? (lang === "tr" ? "Bölüm listesini daralt ↑" : "Show fewer chapters ↑")
            : (lang === "tr" ? `Tüm kitap bölümlerini göster (${allChapters.length}) ↓` : `Show all book chapters (${allChapters.length}) ↓`)}
        </button>
      )}
    </section>
  );
}

function Projects({ lang, num }) {
  return (
    <section id="projects" className="section" data-screen-label="Projects">
      <SectionHead num={num} title={C.ui[lang].nav_projects} />
      <ul className="projects-list">
        {C.projects[lang].map((p, i) => (
          <li key={i}>
            <span className="yr">{p.years}</span>
            <div>
              <span className="role">{p.role}</span>
              <span className="ttl">{p.title}</span>
            </div>
            <span className="scope">{p.scope}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}

function Awards({ lang, num }) {
  return (
    <section id="awards" className="section" data-screen-label="Awards">
      <SectionHead num={num} title={C.ui[lang].nav_awards} />
      <ul className="awards-list">
        {C.awards[lang].map((a, i) => (
          <li key={i}>
            <span className="yr">{a.year}</span>
            <div>
              <span className="ttl">{a.name}</span>
              <span className="where">{a.where}</span>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}

function Teaching({ lang, num }) {
  const levels = [
    { key: "doctoral", list: C.teaching[lang].doctoral },
    { key: "masters", list: C.teaching[lang].masters },
    { key: "bachelors", list: C.teaching[lang].bachelors }
  ];

  return (
    <section id="teaching" className="section" data-screen-label="Teaching">
      <SectionHead num={num} title={C.ui[lang].nav_teaching} />
      {levels.map((g) => (
        <div key={g.key} className="teaching-group">
          <div className="teaching-group-head">
            <span>{C.teaching.labels[lang][g.key]}</span>
            <span className="cnt">{g.list.length} {lang === "tr" ? "ders" : "courses"}</span>
          </div>
          <ul>
            {g.list.map((name, i) => <li key={i}>{name}</li>)}
          </ul>
        </div>
      ))}
    </section>
  );
}

function Advising({ lang, num }) {
  return (
    <section id="advising" className="section" data-screen-label="Advising">
      <SectionHead num={num} title={C.ui[lang].nav_advising} />
      <ul className="thesis-list">
        {C.advised_theses.map((t, i) => {
          const isOngoing = t.status_tr === "Devam Ediyor";
          const statusLabel = lang === "tr" ? t.status_tr : t.status_en;
          return (
            <li key={i}>
              <span className="yr">{t.year}</span>
              <div className="thesis-meta">
                <span className="lvl">{t.level}</span>
                {statusLabel && (
                  <span className={`thesis-status ${isOngoing ? "is-ongoing" : ""}`}>
                    {statusLabel}
                  </span>
                )}
              </div>
              <div className="body">
                {lang === "tr" ? t.title_tr : t.title_en}
                <span className="student">{lang === "tr" ? "Öğrenci" : "Student"}: {t.student}</span>
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}

function Education({ lang, num }) {
  return (
    <section id="education" className="section" data-screen-label="Education & Career">
      <SectionHead num={num} title={C.ui[lang].nav_education} />

      <h4 style={{
        fontFamily: "var(--sans)", fontSize: 10, textTransform: "uppercase",
        letterSpacing: "0.18em", color: "var(--ink-3)", margin: "8px 0 14px", fontWeight: 600
      }}>{lang === "tr" ? "Eğitim" : "Degrees"}</h4>

      <ul className="timeline">
        {C.education.map((e, i) => (
          <li key={i}>
            <div className="years">{e.years}</div>
            <h3 className="title">{lang === "tr" ? e.degree_tr : e.degree_en} <em>· {lang === "tr" ? e.field_tr : e.field_en}</em></h3>
            <div className="where">{lang === "tr" ? e.inst_tr : e.inst_en}</div>
            {(e.thesis_tr || e.thesis_en) && (
              <span className="thesis">
                <span className="k">{C.ui[lang].thesis_label}</span>
                {lang === "tr" ? e.thesis_tr : e.thesis_en}
              </span>
            )}
          </li>
        ))}
      </ul>

      <h4 style={{
        fontFamily: "var(--sans)", fontSize: 10, textTransform: "uppercase",
        letterSpacing: "0.18em", color: "var(--ink-3)", margin: "40px 0 14px", fontWeight: 600
      }}>{lang === "tr" ? "Akademik kariyer" : "Academic career"}</h4>

      <ul className="timeline">
        {C.positions.map((p, i) => (
          <li key={i}>
            <div className="years">{p.years}</div>
            <h3 className="title">{lang === "tr" ? p.title_tr : p.title_en}</h3>
            <div className="where">{lang === "tr" ? p.inst_tr : p.inst_en}</div>
          </li>
        ))}
      </ul>

      <p className="pub-note" style={{ marginTop: 28 }}>
        {C.ui[lang].since_2005_inpatient}
      </p>
    </section>
  );
}

function International({ lang, num }) {
  return (
    <section id="international" className="section" data-screen-label="International">
      <SectionHead num={num} title={C.ui[lang].nav_international} />
      <ul className="timeline">
        {C.international[lang].map((v, i) => (
          <li key={i}>
            <div className="years">{v.year}</div>
            <h3 className="title">{v.role}</h3>
            <div className="where">{v.where}</div>
          </li>
        ))}
      </ul>
    </section>
  );
}

function Roles({ lang, num }) {
  return (
    <section id="roles" className="section" data-screen-label="Roles">
      <SectionHead num={num} title={C.ui[lang].nav_roles} />

      <ul className="roles">
        {C.admin_roles[lang].map((r, i) => (
          <li key={i}>
            <span className="yr">{r.years}</span>
            <span className="role">{r.role}</span>
            <span className="where">{r.where}</span>
          </li>
        ))}
      </ul>

      <div className="misc-grid" style={{ marginTop: 32 }}>
        <div className="misc-block">
          <h4>{C.ui[lang].memberships}</h4>
          <ul className="simple">
            {C.memberships[lang].map((m, i) => (
              <li key={i}>
                <span className="yr">{m.year}</span>
                <span>{m.name}<span className="where">{m.role}</span></span>
              </li>
            ))}
          </ul>
        </div>
        <div className="misc-block">
          <h4>{C.ui[lang].editorial}</h4>
          <ul className="simple">
            {C.editorial[lang].map((e, i) => (
              <li key={i}>
                <span className="yr">{e.years}</span>
                <span>{e.role}<span className="where">{e.venue}</span></span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div className="misc-grid" style={{ marginTop: 32 }}>
        <div className="misc-block">
          <h4>{C.ui[lang].languages}</h4>
          <ul className="cert-list">
            {C.languages.map((l, i) => (
              <li key={i}>
                <span className="yr">·</span>
                <span>{l.name} <span className="where">{l.level}</span></span>
              </li>
            ))}
          </ul>
        </div>
        <div className="misc-block">
          <h4>{C.ui[lang].certifications}</h4>
          <ul className="cert-list">
            {C.certifications[lang].slice(0, 6).map((c, i) => (
              <li key={i}>
                <span className="yr">{c.year}</span>
                <span>{c.name}<span className="where">{c.where}</span></span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div className="misc-block" style={{ marginTop: 32 }}>
        <h4>{C.ui[lang].invited_talks}</h4>
        <ul className="simple">
          {C.invited_talks[lang].map((t, i) => (
            <li key={i}>
              <span className="yr">{t.year}</span>
              <span>{t.title}<span className="where">{t.where}</span></span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function News({ lang, num }) {
  return (
    <section id="news" className="section" data-screen-label="News">
      <SectionHead num={num} title={C.ui[lang].nav_news} />
      <ul className="news">
        {C.news[lang].map((n, i) => (
          <li key={i}>
            <span className="news-date">{n.date}</span>
            <span className="news-body">{n.body}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}

function Office({ lang, num }) {
  return (
    <section id="office" className="section" data-screen-label="Office hours">
      <SectionHead num={num} title={C.ui[lang].nav_office} />
      <div className="hours">
        {C.office_hours[lang].map((h, i) => (
          <div key={i}>
            <div className="day">{h.day}</div>
            <div className="time">{h.time}</div>
          </div>
        ))}
      </div>
      <p className="hours-note">{lang === "tr" ? C.office_hours.note_tr : C.office_hours.note_en}</p>
    </section>
  );
}

function Contact({ lang, num }) {
  const address = lang === "tr" ? C.contact.address_tr : C.contact.address_en;
  return (
    <section id="contact" className="section" data-screen-label="Contact">
      <SectionHead num={num} title={C.ui[lang].nav_contact} />
      <div className="contact-grid">
        <div className="contact-block">
          <div className="lbl">{lang === "tr" ? "Posta Adresi" : "Postal Address"}</div>
          <address>
            {address.map((l, i) => <div key={i}>{l}</div>)}
          </address>
          <div className="lbl" style={{ marginTop: 18 }}>{lang === "tr" ? "Ofis" : "Office"}</div>
          <address>
            <div>{lang === "tr" ? C.contact.office_tr : C.contact.office_en}</div>
          </address>
        </div>
        <div className="contact-block">
          <div className="lbl">{lang === "tr" ? "İletişim" : "Get in touch"}</div>
          <address>
            <div><a href={`mailto:${C.contact.email}`}>{C.contact.email}</a></div>
            <div style={{ marginTop: 4 }}>{lang === "tr" ? "Tel" : "Phone"}: {C.contact.phone}</div>
            <div>{lang === "tr" ? "Doğrudan" : "Direct"}: {C.contact.phone_direct}</div>
            <div>Fax: {C.contact.fax}</div>
          </address>
          <div className="links">
            {C.contact.links.map((l, i) => (
              <a key={i} href={l.href} target="_blank" rel="noopener">
                <span className="k">{l.label}</span>
                <span>{l.value}</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const SECTIONS = {
  about: About, metrics: Metrics, research: Research, publications: Publications,
  books: Books, projects: Projects, awards: Awards,
  teaching: Teaching, advising: Advising, education: Education, international: International,
  roles: Roles, news: News, office: Office, contact: Contact
};

// ── Hero ───────────────────────────────────────────────────
function Hero({ lang, heroLayout }) {
  const parts = C.name.split(" ");
  const given = parts.slice(0, parts.length - 1).join(" ");
  const family = parts[parts.length - 1];

  const quickLinks = [
    { label: "ORCID", href: "https://orcid.org/0000-0003-1013-6393" },
    { label: "AVESİS", href: "https://avesis.hacettepe.edu.tr/guvendik" },
    { label: "Scopus", href: "https://www.scopus.com/authid/detail.uri?authorId=36660970600" },
    { label: "Web of Science", href: "https://publons.com/researcher/M-1828-2017" },
    { label: "ResearchGate", href: "https://www.researchgate.net/profile/Gizem-Kinikli-2" },
    { label: C.contact.email, href: `mailto:${C.contact.email}` },
  ];

  return (
    <header className="hero" data-layout={heroLayout}>
      <div>
        <div className="hero-eyebrow">{C.tagline[lang]}</div>
        <h1 className="hero-name">
          <span className="given">{given}</span> <span className="family">{family}</span>
        </h1>
        <div className="hero-titles">
          <div className="role">{lang === "tr" ? C.honorific_tr : C.honorific_en}</div>
          <div className="affil">
            {C.affiliation[lang].map((l, i) => <div key={i}>{l}</div>)}
          </div>
        </div>
        <div className="hero-quicklinks">
          {quickLinks.map((q, i) => (
            <a
              key={i}
              href={q.href}
              target={q.href.startsWith("mailto:") ? undefined : "_blank"}
              rel={q.href.startsWith("mailto:") ? undefined : "noopener noreferrer"}
            >
              <span className="ql-dot"></span>
              <span>{q.label}</span>
            </a>
          ))}
        </div>
      </div>
      <div className="hero-photo">
        <img src={C.photo} alt={`${C.honorific_tr} ${C.name}`} />
      </div>
    </header>
  );
}

// ── Top bar ────────────────────────────────────────────────
function TopBar({ lang, setLang, dark, onToggleDark }) {
  return (
    <div className="topbar">
      <div className="crest">
        <span className="crest-mark"></span>
        <span>
          {lang === "tr"
            ? "Hacettepe Üniversitesi · Fizik Tedavi ve Rehabilitasyon Fakültesi"
            : "Hacettepe University · Faculty of Physical Therapy and Rehabilitation"}
        </span>
      </div>
      <div className="topbar-controls">
        <button
          type="button"
          className="theme-btn"
          onClick={onToggleDark}
          title={lang === "tr" ? "Görünüm temasını değiştir" : "Toggle color theme"}
        >
          {dark ? (lang === "tr" ? "☀ Açık" : "☀ Light") : (lang === "tr" ? "☾ Koyu" : "☾ Dark")}
        </button>
        <div className="lang" role="group" aria-label="Language">
          <button aria-pressed={lang === "tr"} onClick={() => setLang("tr")}>TR</button>
          <button aria-pressed={lang === "en"} onClick={() => setLang("en")}>EN</button>
        </div>
      </div>
    </div>
  );
}

// ── Sidebar nav ────────────────────────────────────────────
function SideNav({ lang, order, active }) {
  const labelFor = (key) => ({
    about: C.ui[lang].nav_about,
    metrics: C.ui[lang].nav_metrics,
    research: C.ui[lang].nav_research,
    publications: C.ui[lang].nav_publications,
    books: C.ui[lang].nav_books,
    projects: C.ui[lang].nav_projects,
    awards: C.ui[lang].nav_awards,
    teaching: C.ui[lang].nav_teaching,
    advising: C.ui[lang].nav_advising,
    education: C.ui[lang].nav_education,
    international: C.ui[lang].nav_international,
    roles: C.ui[lang].nav_roles,
    news: C.ui[lang].nav_news,
    office: C.ui[lang].nav_office,
    contact: C.ui[lang].nav_contact
  })[key];

  return (
    <nav className="sidenav" aria-label="Sections">
      {order.map((k) => (
        <a key={k} href={`#${k}`} className={active === k ? "is-active" : ""}>{labelFor(k)}</a>
      ))}
    </nav>
  );
}

// ── App ────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState("tr");
  const [active, setActive] = useState(null);

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.setAttribute("data-theme", t.dark ? "dark" : "light");
    document.documentElement.setAttribute("data-density", t.density);
    document.documentElement.lang = lang;
  }, [t.accent, t.dark, t.density, lang]);

  // Highlight the active section in the sidebar as the user scrolls
  useEffect(() => {
    const sections = Array.from(document.querySelectorAll("main.shell .section"));
    if (!sections.length) return;
    const io = new IntersectionObserver(
      (entries) => {
        const visible = entries
          .filter((e) => e.isIntersecting)
          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
        if (visible[0]) setActive(visible[0].target.id);
      },
      { rootMargin: "-20% 0px -65% 0px", threshold: 0 }
    );
    sections.forEach((s) => io.observe(s));
    return () => io.disconnect();
  }, [t.order, lang]);

  const order = SECTION_ORDERS[t.order] || SECTION_ORDERS["research-led"];
  const showTweaks = typeof window !== "undefined" && window.location.search.includes("tweaks=1");

  return (
    <>
      <TopBar
        lang={lang}
        setLang={setLang}
        dark={t.dark}
        onToggleDark={() => setTweak("dark", !t.dark)}
      />
      <Hero lang={lang} heroLayout={t.hero} />

      <main className="shell">
        <SideNav lang={lang} order={order} active={active} />
        <div className="main">
          {order.map((key, i) => {
            const Cmp = SECTIONS[key];
            const num = `0${i + 1}`.slice(-2);
            return <Cmp key={key} lang={lang} num={`§ ${num}`} />;
          })}
        </div>
      </main>

      <footer className="footer">
        <span>© {new Date().getFullYear()} {C.honorific_tr} {C.name}</span>
        <span>{C.ui[lang].footer}</span>
      </footer>

      {showTweaks && (
        <TweaksPanel title="Tweaks">
          <TweakSection label={lang === "tr" ? "Görünüm" : "Appearance"} />
          <TweakColor
            label={lang === "tr" ? "Vurgu rengi" : "Accent"}
            value={t.accent}
            options={ACCENT_OPTIONS}
            onChange={(v) => setTweak("accent", v)} />
          <TweakToggle
            label={lang === "tr" ? "Koyu tema" : "Dark mode"}
            value={t.dark}
            onChange={(v) => setTweak("dark", v)} />
          <TweakRadio
            label={lang === "tr" ? "Yoğunluk" : "Density"}
            value={t.density}
            options={["compact", "regular", "comfy"]}
            onChange={(v) => setTweak("density", v)} />
          <TweakSection label={lang === "tr" ? "Düzen" : "Layout"} />
          <TweakRadio
            label={lang === "tr" ? "Hero" : "Hero"}
            value={t.hero}
            options={["split", "portrait"]}
            onChange={(v) => setTweak("hero", v)} />
          <TweakSelect
            label={lang === "tr" ? "Bölüm sırası" : "Section order"}
            value={t.order}
            options={[
              { value: "research-led", label: lang === "tr" ? "Araştırma öncelikli" : "Research-led" },
              { value: "about-led", label: lang === "tr" ? "Tanıtım öncelikli" : "About-led" },
              { value: "teaching-led", label: lang === "tr" ? "Eğitim öncelikli" : "Teaching-led" }
            ]}
            onChange={(v) => setTweak("order", v)} />
        </TweaksPanel>
      )}
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);