/* embeddedTR — Nav, Hero, Stats, Pillars */
const { useState, useEffect } = React;

/* ---------------- NAV ---------------- */
function Nav({ theme, toggleTheme, onJoin }) {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 12);
    f(); window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  const links = [
    ["Projeler", "#projeler"], ["Blog", "blog.html"], ["Soru-Cevap", "#soru-cevap"],
    ["Kütüphaneler", "#kutuphaneler"], ["Topluluk", "#topluluk"],
  ];
  return (
    <header className={"nav" + (scrolled ? " nav--scrolled" : "")}>
      <div className="wrap nav__in">
        <a href="#top" className="brand" aria-label="embeddedTR ana sayfa">
          <BrandMark size={38} />
          <span className="brand__word">embedded<b>TR</b></span>
          <span className="brand__dot" title="online" />
        </a>

        <nav className="nav__links">
          {links.map(([t, h]) => <a key={t} href={h}>{t}</a>)}
        </nav>

        <div className="nav__actions">
          <button className="icon-btn" onClick={toggleTheme} aria-label="Tema değiştir" title="Tema">
            {theme === "dark" ? <Icons.sun size={19} /> : <Icons.moon size={19} />}
          </button>
          <a className="btn btn-ghost btn-sm nav__login" href="#topluluk">Giriş Yap</a>
          <button className="btn btn-primary btn-sm" onClick={onJoin}>Topluluğa Katıl</button>
          <button className="icon-btn nav__burger" onClick={() => setOpen(true)} aria-label="Menü"><Icons.menu /></button>
        </div>
      </div>

      {open && (
        <div className="sheet" onClick={() => setOpen(false)}>
          <div className="sheet__panel" onClick={(e) => e.stopPropagation()}>
            <div className="sheet__top">
              <span className="brand__word">embedded<b>TR</b></span>
              <button className="icon-btn" onClick={() => setOpen(false)} aria-label="Kapat"><Icons.close /></button>
            </div>
            {links.map(([t, h]) => <a key={t} href={h} onClick={() => setOpen(false)} className="sheet__link">{t}</a>)}
            <button className="btn btn-primary" style={{ marginTop: 18, width: "100%", justifyContent: "center" }}
              onClick={() => { setOpen(false); onJoin(); }}>Topluluğa Katıl</button>
          </div>
        </div>
      )}
    </header>
  );
}

/* ---------------- HERO ---------------- */
function CodeCard() {
  return (
    <div className="codecard card">
      <div className="codecard__bar">
        <span className="dot dot--r" /><span className="dot dot--y" /><span className="dot dot--g" />
        <span className="codecard__file">main.c — STM32F4</span>
        <Icons.terminal size={15} style={{ marginLeft: "auto", opacity: .6 }} />
      </div>
      <pre className="codecard__code"><code>
{<><span className="c-com">// embeddedTR · topluluk firmware örneği</span>{"\n"}
<span className="c-pp">#include</span> <span className="c-str">"stm32f4xx_hal.h"</span>{"\n\n"}
<span className="c-kw">void</span> <span className="c-fn">community_blink</span>(<span className="c-ty">void</span>) {"{"}{"\n"}
{"  "}<span className="c-kw">while</span> (<span className="c-num">1</span>) {"{"}{"\n"}
{"    "}<span className="c-fn">HAL_GPIO_TogglePin</span>(GPIOD, <span className="c-num">LED_TR</span>);{"\n"}
{"    "}<span className="c-fn">HAL_Delay</span>(<span className="c-num">500</span>);  <span className="c-com">// 2 Hz</span>{"\n"}
{"  "}{"}"}{"\n"}
{"}"}<span className="cursor">▍</span>
</>}
      </code></pre>
      <div className="codecard__scope">
        <span className="scope-led" />
        <span className="scope-label">CH1 · PD12 · LED</span>
        <Waveform h={42} shape="square" />
      </div>
    </div>
  );
}

function Hero({ layout, onJoin }) {
  const centered = layout === "centered";
  const ref = useReveal();
  return (
    <section className={"hero gridlines hero--" + layout} id="top" ref={ref}>
      <div className="hero__glow" aria-hidden="true" />
      <div className="wrap hero__in">
        <div className="hero__copy reveal">
          <span className="kicker">~/ Türkiye · gömülü sistemler</span>
          <h1 className="hero__title">
            Türkiye’nin gömülü sistem<br />
            <span className="hl">topluluğu</span> burada toplanıyor.
          </h1>
          <p className="hero__sub">
            Mühendisler, öğrenciler ve meraklılar tek bir platformda: projeni paylaş,
            teknik yaz, sorularını sor — STM32’den ESP32’ye birlikte öğren ve geliştir.
          </p>
          <div className="hero__cta">
            <button className="btn btn-primary" onClick={onJoin}>
              Topluluğa Katıl <Icons.arrow size={18} />
            </button>
            <a className="btn btn-ghost" href="#projeler">
              <Icons.chip size={18} /> Projeleri Keşfet
            </a>
          </div>
          <div className="hero__trust">
            <div className="avatars">
              {["#E11D48", "#F97316", "#0EA5E9", "#10B981", "#8B5CF6"].map((c, i) =>
                <span key={i} className="av" style={{ background: c, zIndex: 5 - i }} />)}
            </div>
            <span><b>2.400+</b> mühendis çoktan katıldı</span>
          </div>
        </div>

        {!centered && <div className="hero__visual reveal"><CodeCard /></div>}
      </div>
      {centered && <div className="wrap hero__visual hero__visual--wide reveal"><CodeCard /></div>}
    </section>
  );
}

/* ---------------- STATS ---------------- */
function Stats() {
  const ref = useReveal();
  return (
    <section className="section stats-sec" ref={ref} style={{ paddingBlock: "calc(40px * var(--sp))" }}>
      <div className="wrap stats reveal">
        {STATS.map((s, i) => (
          <div className="stat" key={i}>
            <div className="stat__num"><Counter to={s.value} suffix={s.suffix} /></div>
            <div className="stat__label">{s.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------------- PILLARS ---------------- */
function Pillars() {
  const ref = useReveal();
  return (
    <section className="section" ref={ref}>
      <div className="wrap">
        <div className="section-head reveal">
          <span className="kicker">Ne yapabilirsin</span>
          <h2>Tek çatı altında dört şey.</h2>
          <p>embeddedTR; paylaşmak, yazmak, sormak ve birlikte öğrenmek için kurulmuş bir topluluk altyapısı.</p>
        </div>
        <div className="pillars">
          {PILLARS.map((p, i) => {
            const I = Icons[p.icon];
            return (
              <div className="pillar card reveal" key={p.key} style={{ transitionDelay: i * 70 + "ms" }}>
                <div className="pillar__top">
                  <span className="pillar__ic"><I size={24} /></span>
                  <span className="pillar__key">{p.key}</span>
                </div>
                <h3>{p.title}</h3>
                <p>{p.desc}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Stats, Pillars });