/* embeddedTR — Q&A, Libraries, Roadmap, CTA, Footer, Join modal */
const { useState: useStateC } = React;

/* ---------------- Q&A ---------------- */
function QuestionRow({ q }) {
  const [v, setV] = useStateC(q.votes);
  const [up, setUp] = useStateC(false);
  const toggle = () => { setUp(!up); setV(v + (up ? -1 : 1)); };
  return (
    <div className="qrow card reveal">
      <button className={"qvote" + (up ? " qvote--on" : "")} onClick={toggle} aria-pressed={up} aria-label="Oy ver">
        <Icons.arrowUp size={17} />
        <b>{v}</b>
      </button>
      <div className={"qans" + (q.solved ? " qans--solved" : "")}>
        <b>{q.answers}</b>
        <span>{q.solved ? "çözüldü" : "cevap"}</span>
        {q.solved && <Icons.check size={13} className="qans__tick" />}
      </div>
      <div className="qbody">
        <h3 className="qtitle">{q.q}</h3>
        <div className="qmeta">
          <div className="qtags">{q.tags.map((t) => <span key={t} className="tag">{t}</span>)}</div>
          <span className="qmeta__by">@{q.author} · {q.time}</span>
        </div>
      </div>
    </div>
  );
}

function QA({ onJoin }) {
  const ref = useReveal();
  return (
    <section className="section section--alt" id="soru-cevap" ref={ref}>
      <div className="wrap qa">
        <aside className="qa__aside reveal">
          <span className="kicker">Soru-Cevap</span>
          <h2>Takıldığın yerde yalnız değilsin.</h2>
          <p>Sorununu sor, deneyimini paylaş. Oylama ve çözüm işaretlemeyle en iyi cevaplar yükselir; topluluğun bilgi bankası büyür.</p>
          <div className="qa__stats">
            <div><b>12K+</b><span>çözülen soru</span></div>
            <div><b>%92</b><span>cevaplanma oranı</span></div>
            <div><b>~3s</b><span>ort. ilk cevap</span></div>
          </div>
          <button className="btn btn-primary" onClick={onJoin}>Soru Sor <Icons.arrow size={17} /></button>
        </aside>
        <div className="qa__list">
          {QUESTIONS.map((q) => <QuestionRow key={q.q} q={q} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------------- YOUTUBE ---------------- */
function VidThumb({ v }) {
  const [err, setErr] = useStateC(false);
  const I = Icons[v.icon] || Icons.play;
  return (
    <div className={"vid__thumb" + (err || !v.img ? " gridlines" : " vid__thumb--img")}>
      {v.img && !err ? (
        <img className="vid__img" src={v.img} alt={v.title} loading="lazy" onError={() => setErr(true)} />
      ) : (
        <span className="vid__ic"><I size={26} /></span>
      )}
      <span className="vid__play"><Icons.play size={20} /></span>
      {v.dur && <span className="vid__dur">{v.dur}</span>}
    </div>
  );
}

function YouTube() {
  const ref = useReveal();
  return (
    <section className="section section--tube" id="youtube" ref={ref}>
      <div className="wrap">
        <div className="tube reveal">
          <div className="tube__intro">
            <span className="kicker kicker--yt"><Icons.youtube size={16} /> Video · YouTube</span>
            <h2>İzleyerek öğren, uygulayarak pekiştir.</h2>
            <p>Topluluğun video tarafı <b>{CHANNEL.name}</b> kanalında. Gömülü sistem projeleri, kod incelemeleri ve uygulamalı dersler — gerçek donanım üzerinde, baştan sona.</p>
            <div className="tube__channel">
              <span className="tube__avatar"><Icons.youtube size={22} /></span>
              <div className="tube__cmeta">
                <b>{CHANNEL.name}</b>
                <span>{CHANNEL.handle}</span>
              </div>
              <a className="btn tube__sub" href={CHANNEL.url} target="_blank" rel="noopener noreferrer">
                <Icons.youtube size={18} /> Abone Ol
              </a>
            </div>
          </div>

          <div className="tube__videos">
            {VIDEOS.map((v) => (
              <a className="vid card" href={v.url} target="_blank" rel="noopener noreferrer" key={v.id}>
                <VidThumb v={v} />
                <div className="vid__body">
                  <span className="tag">{v.tag}</span>
                  <h3 className="vid__title">{v.title}</h3>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
function Libraries() {
  const ref = useReveal();
  return (
    <section className="section" id="kutuphaneler" ref={ref}>
      <div className="wrap">
        <div className="section-head reveal">
          <span className="kicker">Kütüphaneler & sürücüler</span>
          <h2>Tekerleği yeniden icat etme.</h2>
          <p>STM32, ESP32, TMS320F ve Nuvoton için topluluk tarafından bakımı yapılan açık kaynak sürücüler.</p>
        </div>
        <div className="libs">
          {LIBS.map((l) => (
            <a className="lib card reveal" href="#kutuphaneler" key={l.name}>
              <div className="lib__top">
                <span className="lib__ic"><Icons.terminal size={18} /></span>
                <span className="tag tag-accent">{l.mcu}</span>
                <span className="metric metric--mut"><Icons.star size={14} />{l.stars}</span>
              </div>
              <h3 className="lib__name">{l.name}</h3>
              <p className="lib__desc">{l.desc}</p>
              <div className="lib__foot">
                <span className="lib__lang"><i style={{ background: l.lang === "C++" ? "#f34b7d" : "#555" }} />{l.lang}</span>
                <span className="lib__inst">$ etr add {l.name}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- ROADMAP / VISION ---------------- */
function Roadmap() {
  const ref = useReveal();
  const tr = { live: "yayında", progress: "geliştiriliyor", planned: "planlandı" };
  return (
    <section className="section section--vision" id="topluluk" ref={ref}>
      <div className="wrap vision">
        <div className="vision__copy reveal">
          <span className="kicker">Vizyon & yol haritası</span>
          <h2>Türkiye’nin en büyük gömülü sistem topluluğunu kuruyoruz.</h2>
          <p>Mühendisleri, öğrencileri ve meraklıları tek platformda buluşturmak için adım adım ilerliyoruz. İşte yol haritamız:</p>
          <div className="vision__cta">
            <span className="kicker" style={{ color: "var(--ink-3)" }}>~/ açık geliştirme · topluluk önerileriyle</span>
          </div>
        </div>
        <ol className="roadmap reveal">
          {ROADMAP.map((r) => (
            <li className={"rm rm--" + r.status} key={r.label}>
              <span className="rm__node" />
              <div className="rm__body">
                <div className="rm__head">
                  <h3>{r.label}</h3>
                  <span className={"rm__badge rm__badge--" + r.status}>{tr[r.status]}</span>
                </div>
                <p>{r.desc}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ---------------- CTA BAND ---------------- */
function CTA({ onJoin }) {
  const ref = useReveal();
  return (
    <section className="section cta-sec" ref={ref}>
      <div className="wrap">
        <div className="cta card reveal gridlines">
          <div className="cta__glow" aria-hidden="true" />
          <span className="kicker" style={{ color: "var(--accent-ink)", opacity: .85 }}>~/ embeddedTR</span>
          <h2 className="cta__title">Bir lehim teli kadar yakınsın topluluğa.</h2>
          <p className="cta__sub">Ücretsiz katıl; ilk projeni paylaş, ilk sorunu sor. Türkiye’nin gömülü sistem mühendisleriyle aynı masada ol.</p>
          <div className="cta__btns">
            <button className="btn cta__primary" onClick={onJoin}>Topluluğa Katıl <Icons.arrow size={18} /></button>
            <a className="btn cta__ghost" href="#projeler">Önce keşfet</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer() {
  const cols = [
    ["Topluluk", [["Projeler","#projeler"],["Blog","blog.html"],["Soru-Cevap","#soru-cevap"],["Kütüphaneler","#kutuphaneler"]]],
    ["Platformlar", [["STM32","#projeler"],["ESP32","#projeler"],["TMS320F","#projeler"],["Nuvoton","#projeler"]]],
    ["Kaynaklar", [["Başlangıç rehberi","blog.html"],["Katkı kuralları","#"],["Etiketler","#"],["SSS","#"]]],
  ];
  return (
    <footer className="footer">
      <div className="wrap footer__in">
        <div className="footer__brand">
          <a href="#top" className="brand">
            <BrandMark size={34} />
            <span className="brand__word">embedded<b>TR</b></span>
          </a>
          <p>Türkiye’nin gömülü sistem topluluğu. Projeni paylaş, teknik yaz, sor & cevapla, birlikte öğren.</p>
          <div className="footer__social">
            <a className="icon-btn" href="#" aria-label="GitHub"><Icons.github size={18} /></a>
            <a className="icon-btn" href="#" aria-label="Forum"><Icons.qa size={18} /></a>
            <a className="icon-btn" href="#" aria-label="Topluluk"><Icons.users size={18} /></a>
          </div>
        </div>
        {cols.map(([h, items]) => (
          <div className="footer__col" key={h}>
            <h4>{h}</h4>
            {items.map(([label, href]) => <a key={label} href={href}>{label}</a>)}
          </div>
        ))}
      </div>
      <div className="wrap footer__bottom">
        <span>© 2026 embeddedTR — topluluk tarafından, topluluk için.</span>
        <span className="footer__mono">build · v0.1.0 · made in Türkiye 🇹🇷</span>
      </div>
    </footer>
  );
}

/* ---------------- JOIN MODAL ---------------- */
function JoinModal({ open, onClose }) {
  const [email, setEmail] = useStateC("");
  const [done, setDone] = useStateC(false);
  React.useEffect(() => { if (open) { setDone(false); setEmail(""); } }, [open]);
  if (!open) return null;
  const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  return (
    <div className="modal" onClick={onClose}>
      <div className="modal__card card" onClick={(e) => e.stopPropagation()}>
        <button className="icon-btn modal__x" onClick={onClose} aria-label="Kapat"><Icons.close size={18} /></button>
        {!done ? (
          <>
            <span className="modal__ic"><Icons.bolt size={22} /></span>
            <h3 className="modal__title">Topluluğa katıl</h3>
            <p className="modal__sub">E-postanı bırak, açılışta ilk sen haberdar ol. Spam yok — sadece gömülü sistemler.</p>
            <form className="modal__form" onSubmit={(e) => { e.preventDefault(); if (valid) setDone(true); }}>
              <input type="email" inputMode="email" placeholder="muhendis@embeddedtr.com"
                value={email} onChange={(e) => setEmail(e.target.value)} aria-label="E-posta" />
              <button className="btn btn-primary" type="submit" disabled={!valid}>Katıl</button>
            </form>
            <div className="modal__alt">
              <span className="rule" /><span>veya</span><span className="rule" />
            </div>
            <button className="btn btn-ghost modal__gh" onClick={() => setDone(true)}>
              <Icons.github size={18} /> GitHub ile devam et
            </button>
          </>
        ) : (
          <div className="modal__done">
            <span className="modal__ic modal__ic--ok"><Icons.check size={26} /></span>
            <h3 className="modal__title">Listeye eklendin! 🎉</h3>
            <p className="modal__sub">Teşekkürler — embeddedTR açılırken ilk davet sana gelecek.</p>
            <button className="btn btn-primary" onClick={onClose} style={{ justifyContent: "center" }}>Harika</button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { QA, YouTube, Libraries, Roadmap, CTA, Footer, JoinModal });