// Era Koleji Ulusal Formu — main app

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#d4af37",
  "title1": "Era Koleji",
  "title2": "Ulusal",
  "title3": "Formu",
  "stat1": "6",
  "stat1Lbl": "Komite",
  "stat2": "150+",
  "stat2Lbl": "Katılımcı",
  "stat3": "3",
  "stat3Lbl": "Gün",
  "anim": "high"
}/*EDITMODE-END*/;

const ACCENT_PRESETS = [
  { val: "#d4af37", name: "Altın" },
  { val: "#e63946", name: "Bordo" },
  { val: "#06b6d4", name: "Camgöbeği" },
  { val: "#a78bfa", name: "Lila" },
  { val: "#4ade80", name: "Yeşil" },
  { val: "#f97316", name: "Turuncu" },
];

function hexToRgb(hex) {
  const h = hex.replace("#", "");
  const v = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
  return { r: (v >> 16) & 255, g: (v >> 8) & 255, b: v & 255 };
}
function lighten(hex, amt) {
  const { r, g, b } = hexToRgb(hex);
  return `rgb(${Math.min(255, r + amt)}, ${Math.min(255, g + amt)}, ${Math.min(255, b + amt)})`;
}
function darken(hex, amt) {
  const { r, g, b } = hexToRgb(hex);
  return `rgb(${Math.max(0, r - amt)}, ${Math.max(0, g - amt)}, ${Math.max(0, b - amt)})`;
}

const Nav = () => {
  const [open, setOpen] = React.useState(false);
  return (
    <nav className={`nav${open ? " open" : ""}`}>
      <a href="#hero" className="nav-brand" onClick={() => setOpen(false)}>
        <div className="nav-mark">E</div>
        <div className="nav-name">Era Koleji Ulusal Formu</div>
      </a>
      <div className="nav-links">
        <a href="#about" onClick={() => setOpen(false)}>Hakkında</a>
        <a href="#committees" onClick={() => setOpen(false)}>Komiteler</a>
        <a href="#schedule" onClick={() => setOpen(false)}>Program</a>
        <a href="#sponsors" onClick={() => setOpen(false)}>Sponsorlar</a>
      </div>
      <a href="#apply" className="nav-cta" onClick={() => setOpen(false)}>Başvur</a>
      <button className="nav-burger" onClick={() => setOpen(!open)} aria-label="Menü">
        <Icon name={open ? "x" : "menu"} size={18} />
      </button>
    </nav>
  );
};

const TweaksUI = ({ tweaks, setTweak }) => {
  if (typeof TweaksPanel === "undefined") return null;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Tema">
        <TweakRadio
          label="Renk teması"
          value={tweaks.theme}
          options={[{ value: "dark", label: "Koyu" }, { value: "light", label: "Açık" }]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakRadio
          label="Animasyon"
          value={tweaks.anim}
          options={[{ value: "high", label: "Tam" }, { value: "low", label: "Sade" }]}
          onChange={(v) => setTweak("anim", v)}
        />
        <div style={{ marginTop: 12 }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: ".15em", textTransform: "uppercase", marginBottom: 8, opacity: .7 }}>
            Vurgu Rengi
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {ACCENT_PRESETS.map(p => (
              <button
                key={p.val}
                title={p.name}
                onClick={() => setTweak("accent", p.val)}
                style={{
                  width: 32, height: 32,
                  borderRadius: "50%",
                  border: tweaks.accent === p.val ? "2px solid #fff" : "2px solid transparent",
                  background: p.val,
                  cursor: "pointer",
                  outline: tweaks.accent === p.val ? `2px solid ${p.val}` : "none",
                  outlineOffset: 2,
                }}
              />
            ))}
          </div>
        </div>
      </TweakSection>

      <TweakSection title="Hero Başlık">
        <TweakText label="1. Satır" value={tweaks.title1} onChange={(v) => setTweak("title1", v)} />
        <TweakText label="2. Satır (italik)" value={tweaks.title2} onChange={(v) => setTweak("title2", v)} />
        <TweakText label="3. Satır" value={tweaks.title3} onChange={(v) => setTweak("title3", v)} />
      </TweakSection>

      <TweakSection title="İstatistikler">
        <TweakText label="1. Sayı" value={tweaks.stat1} onChange={(v) => setTweak("stat1", v)} />
        <TweakText label="1. Etiket" value={tweaks.stat1Lbl} onChange={(v) => setTweak("stat1Lbl", v)} />
        <TweakText label="2. Sayı" value={tweaks.stat2} onChange={(v) => setTweak("stat2", v)} />
        <TweakText label="2. Etiket" value={tweaks.stat2Lbl} onChange={(v) => setTweak("stat2Lbl", v)} />
        <TweakText label="3. Sayı" value={tweaks.stat3} onChange={(v) => setTweak("stat3", v)} />
        <TweakText label="3. Etiket" value={tweaks.stat3Lbl} onChange={(v) => setTweak("stat3Lbl", v)} />
      </TweakSection>
    </TweaksPanel>
  );
};

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply theme + animation level
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme);
    document.documentElement.setAttribute("data-anim", tweaks.anim);
  }, [tweaks.theme, tweaks.anim]);

  // Apply accent color
  React.useEffect(() => {
    const root = document.documentElement;
    const accent = tweaks.accent;
    root.style.setProperty("--gold", accent);
    root.style.setProperty("--gold-soft", lighten(accent, 30));
    root.style.setProperty("--gold-deep", darken(accent, 40));
  }, [tweaks.accent]);

  // Reveal on scroll
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (tweaks.anim === "low") {
      els.forEach(el => el.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach(e => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -50px 0px" }
    );
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [tweaks.anim]);

  return (
    <>
      <div className="ambient" />
      <div className="grain" />
      <Nav />
      <main>
        <Hero tweaks={tweaks} />
        <About />
        <Committees />
        <Schedule />
        <Sponsors />
        <Apply />
      </main>
      <Footer />
      <TweaksUI tweaks={tweaks} setTweak={setTweak} />
    </>
  );
};

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