// Tutorial — első indítás útmutató, 12 lépéses animált onboarding.
const { useState: useStateT, useEffect: useEffectT } = React;
const TUTORIAL_KEY = "ok:tutorial:v4";
const STEPS = [
{
icon: "sparkles",
color: "#6B3FE6",
bg: "#EFE7FF",
eyebrow: "üdvözlet · 1 / 14",
title: "Üdvözöl az Osztály!",
body: "Ez a 12.i osztály projektmenedzsment tudásbázisa. 9 csapat dolgozik egy-egy témán, és itt osztják meg kutatásaikat, vázlataikat és összefoglalóikat. Ez a 12 lépéses bemutató segít eligazodni — bármikor visszahívható a fejléc '?' gombjával.",
tip: "Az oldalon minden bejegyzés jelszóval védett, így csak a szerzők módosíthatják őket.",
demo: "overview",
},
{
icon: "layout-grid",
color: "#F26A4B",
bg: "#FFE4DC",
eyebrow: "témakörök · 2 / 14",
title: "A 9 témakör-kártya",
body: "A kezdőlapon 9 kártya mutatja a csapatokat. Minden kártyán látható a csapat neve, fókusza, a tagok száma és az aktuális bejegyzésszám. Kattints bármelyikre a csapat részletes oldalának megnyitásához.",
tip: "Görgess le a kezdőlapon a kártyák megtekintéséhez — az első szekció a témakörök.",
demo: "teams",
},
{
icon: "users",
color: "#1B4B8F",
bg: "#DCE9FB",
eyebrow: "csapat oldal · 3 / 14",
title: "Csapat részletes oldal",
body: "Minden csapatnak saját aloldala van. Itt megtalálod: a tagok nevét, az altémák listáját, a felhasznált szoftvereket és a csapat összes bejegyzését. Vissza gombbal visszatérhetsz a főoldalra.",
tip: "A csapat jelvénye (színes kör az emojival) mindenhol megjelenik — a kártyákon, a feedben és a bejegyzésekben is.",
demo: "teampage",
},
{
icon: "circle-dot",
color: "#0E5C5F",
bg: "#DCEEEF",
eyebrow: "tudásfelhő · 4 / 14",
title: "Kategória-szűrő",
body: "A Tudásfelhő 6 buborékja 6 tartalomtípust képvisel: Kutatás, Design, Kódolás, Prezentáció, Terepgyakorlat és Írás. Kattints egy buborékra — a feed azonnal szűr. A szűrőt a 'törlés' gombbal törölheted.",
tip: "Egyszerre csak egy kategória aktív, de a témakör-szűrővel kombinálható.",
demo: "cloud",
},
{
icon: "newspaper",
color: "#3F5C12",
bg: "#E7F2DC",
eyebrow: "feed + keresés · 5 / 14",
title: "Bejegyzések böngészése",
body: "A feed fordított időrendben mutatja az összes bejegyzést. Az első mindig kiemelt kártyaként jelenik meg. A fejléc keresőjébe gépelve valós időben szűrsz cím és összefoglaló szerint. A 'Mentett bejegyzések' gombbal csak a könyvjelzőzött cikkek jelennek meg.",
tip: "A kártyán látod a kategória chippet, a dátumot, az olvasási időt és a csapat jelvényét.",
demo: "feed",
},
// ── POSZTOLÁS — 5 dedikált lépés ─────────────────────────────────────
{
icon: "plus-circle",
color: "#7B1F61",
bg: "#F6E3F0",
eyebrow: "új bejegyzés · 6 / 14",
title: "Hogyan indíts bejegyzést?",
body: "Az 'Új bejegyzés' gomb a fejléc jobb felső sarkában található — sötét háttérrel, könnyen megtalálható. Kattints rá: megnyílik a szerkesztő panel. Bárki írhat bejegyzést, nincs bejelentkezési követelmény. Az elkészült cikkek, kutatási jegyzetek és összefoglalók így kerülnek fel az osztály közös tudásbázisába.",
tip: "A fejléc rögzített marad görgetés közben is — az 'Új bejegyzés' gomb mindig elérhető az oldal tetején.",
demo: "composerOpen",
},
{
icon: "list",
color: "#7B1F61",
bg: "#F6E3F0",
eyebrow: "alap adatok · 7 / 14",
title: "Cím, témakör és kategória",
body: "A szerkesztőben három mező kötelező — nélkülük a bejegyzés nem tehető közzé:",
bullets: [
{ icon: "type", color: "#7B1F61", text: "Cím — rövid, velős; max. 80 karakter ajánlott (pl. 'A projekt keretei – határidő és költség')" },
{ icon: "users", color: "#7B1F61", text: "Témakör — válaszd a te csapatod témakörét (9 lehetőség a legördülőből)" },
{ icon: "tag", color: "#7B1F61", text: "Kategória — Kutatás / Design / Kódolás / Prezentáció / Terepgyakorlat / Írás" },
{ icon: "align-left", color: "#7B1F61", text: "Összefoglaló — opcionális, de ajánlott: 1-2 mondat, ez látszik a feed-kártyán" },
],
demo: "composerFields",
},
{
icon: "file-text",
color: "#6B4A00",
bg: "#FFEEBB",
eyebrow: "tartalom írása · 8 / 14",
title: "Tartalom és formázás",
body: "A szövegmezőbe írhatod a tartalmat, és az eszköztár gombjaival formázhatsz — nem kell Markdown szintaxist memorizálni. A gombok a szövegmező felett találhatók:",
bullets: [
{ icon: "heading-1", color: "#6B4A00", text: "H1 / H2 — nagy cím és alcím beillesztése (# vagy ##)" },
{ icon: "bold", color: "#6B4A00", text: "Félkövér (**szöveg**) és Dőlt (*szöveg*) formázás" },
{ icon: "list", color: "#6B4A00", text: "Felsorolás (- pont) és Számozott lista (1. elem)" },
{ icon: "code", color: "#6B4A00", text: "Kódrészlet (`kód`) és Idézet (> blockquote)" },
{ icon: "link", color: "#6B4A00", text: "Link beillesztése és --- vízszintes elválasztó" },
],
tip: "Jelölj ki szöveget, majd kattints egy eszköztár gombra — a formázás automatikusan a kijelölés köré kerül.",
demo: "composerMarkdown",
},
{
icon: "file-text",
color: "#3F5C12",
bg: "#E7F2DC",
eyebrow: "docx importálás · 9 / 14",
title: "DOCX fájl importálása",
body: "Ha a szöveget már megírtad Word-ben (.docx), nem kell újra begépelni — töltsd fel közvetlenül a szerkesztőből. A rendszer automatikusan kinyeri a címet és a teljes tartalmat.",
bullets: [
{ icon: "file-text", color: "#3F5C12", text: "Kattints a 'DOCX betöltése' gombra a jobb oldali panelen" },
{ icon: "upload", color: "#3F5C12", text: "Válaszd ki a .docx fájlt a számítógépedről (max. ~10 MB)" },
{ icon: "type", color: "#3F5C12", text: "Ha a dokumentum első sora H1 cím, a cím mező automatikusan kitöltődik" },
{ icon: "align-left", color: "#3F5C12", text: "A tartalom HTML formátumban kerül be — a táblázatok és listák is megőrződnek" },
],
warning: "⚠ A meglévő tartalmat felülírja az importálás! Ha már van szöveg a mezőben, előbb mentsd el.",
tip: "A cím csak akkor töltődik ki, ha a cím mező üres volt — a meglévő titelt nem írja felül.",
demo: "composerDocx",
},
{
icon: "link",
color: "#1B4B8F",
bg: "#DCE9FB",
eyebrow: "forrás hozzáadása · 10 / 14",
title: "Forrás linkelése",
body: "Ha a bejegyzés egy külső cikken, tanulmányon vagy weboldalon alapul, linkeld be a forrást. A rendszer automatikusan lekéri az oldal előnézeti adatait, és egy kártyaként jeleníti meg a bejegyzés alatt.",
bullets: [
{ icon: "link", color: "#1B4B8F", text: "Illeszd be a forrás URL-jét a 'Forrás hozzáadása' mezőbe (https://…)" },
{ icon: "search", color: "#1B4B8F", text: "Nyomj Entert vagy kattints a 'Lekérés' gombra — az oldal OG-adatait olvassa be" },
{ icon: "image", color: "#1B4B8F", text: "Megjelenik az előnézeti kártya: kép, cím, leírás és a domain neve" },
{ icon: "x", color: "#1B4B8F", text: "A 'Forrás eltávolítása' gombbal bármikor törölhető a beállított forrás" },
],
tip: "Ha az oldal nem támogatja az OG meta-adatokat, előfordulhat, hogy a kép vagy leírás hiányzik az előnézetből.",
demo: "composerSource",
},
{
icon: "image",
color: "#0E5C5F",
bg: "#DCEEEF",
eyebrow: "kép hozzáadása · 11 / 14",
title: "Kiemelt kép hozzáadása",
body: "A jobb oldali panelen adhatsz kiemelt képet — megjelenik a feed-kártyán és az overlay tetején is. Kétféleképpen adható meg:",
bullets: [
{ icon: "upload", color: "#0E5C5F", text: "Fájl feltöltése — kattints a 'Kép kiválasztása' gombra, majd válassz JPG / PNG / GIF / WebP képet (max. 5 MB). A kép Supabase Storage-ba töltődik fel automatikusan." },
{ icon: "link", color: "#0E5C5F", text: "URL beillesztése — illeszd be egy nyilvánosan elérhető kép teljes webcímét (https://...) az URL mezőbe." },
],
tip: "A kép opcionális — nélküle is közzétehető a bejegyzés. Ha mindkettőt megadod, a feltöltött fájl URL-je érvényes.",
demo: "composerImage",
},
{
icon: "lock",
color: "#13110F",
bg: "#E8E4DC",
eyebrow: "jelszó + közzétevés · 12 / 14",
title: "Jelszó és közzétevés",
body: "Mielőtt közzéteszed, adj meg egy jelszót. Ez nem a te fiókod jelszava — egy egyedi kód, amit te találsz ki, és a rendszer eltárol a bejegyzésnél. Erre lesz szükség, ha később szerkeszteni vagy törölni akarod a bejegyzést. Ha minden kész, kattints a 'Közzétesz' gombra — a bejegyzés azonnal megjelenik a feedben.",
warning: "⚠ A jelszót nem lehet visszaállítani! Ha elveszíted, a bejegyzést nem tudod módosítani vagy törölni. Írj fel biztonságos helyre.",
tip: "Tipp: válassz 4–8 karakteres, megjegyezhető szót vagy számot. Nem kell bonyolultnak lennie.",
demo: "composerPublish",
},
// ── OLVASÁS ÉS ESZKÖZÖK ───────────────────────────────────────────────
{
icon: "book-open",
color: "#6B4A00",
bg: "#FFEEBB",
eyebrow: "bejegyzés olvasás · 13 / 14",
title: "Bejegyzés megnyitása",
body: "Kattints bármely kártyára az overlay megnyitásához. Láthatod a teljes szöveget, a csapat adatait és az összes metaadatot. Az overlay fejlécén a kategória chip a tudásfelhő szűrőre is vonatkozik. Bezárás: X gomb, háttérre kattintás, vagy Esc billentyű.",
tip: "Ha a bejegyzésnek van kiemelt képe (URL vagy feltöltött), az az overlay tetején jelenik meg.",
demo: "overlay",
},
{
icon: "shield-check",
color: "#13110F",
bg: "#E8E4DC",
eyebrow: "bejegyzés eszközök · 14 / 14",
title: "Mit tehetsz egy cikkel?",
body: "Az overlay alján 5 gomb érhető el minden bejegyzésnél:",
bullets: [
{ icon: "pencil", color: "#6B3FE6", text: "Szerkesztés — jelszóval megnyílik a szerkesztő az összes mezővel kitöltve" },
{ icon: "trash-2", color: "#F26A4B", text: "Törlés — jelszóval véglegesen törli az adatbázisból (nem visszaállítható)" },
{ icon: "bookmark", color: "#3F5C12", text: "Mentés — könyvjelző a feedben, a 'Mentett bejegyzések' gombbal szűrhető" },
{ icon: "message-square", color: "#1B4B8F", text: "Megjegyzések — komment popup: olvasás és írás névvel vagy névtelenül" },
{ icon: "share-2", color: "#6B4A00", text: "Megosztás — az oldal URL-jét másolja a vágólapra, a gomb visszajelzést ad" },
],
demo: "actions",
},
];
// ── Tutorial fő komponens ─────────────────────────────────────────────
function Tutorial() {
const [show, setShow] = useStateT(() => !localStorage.getItem(TUTORIAL_KEY));
const [step, setStep] = useStateT(0);
const [animKey, setAnimKey] = useStateT(0);
useEffectT(() => {
const open = () => { setStep(0); setAnimKey(k => k + 1); setShow(true); };
window.addEventListener("ok:tutorial:open", open);
return () => window.removeEventListener("ok:tutorial:open", open);
}, []);
if (!show) return null;
const total = STEPS.length;
const s = STEPS[step];
const isLast = step === total - 1;
const progress = ((step + 1) / total) * 100;
function finish() { localStorage.setItem(TUTORIAL_KEY, "1"); setShow(false); }
function goTo(n) { setAnimKey(k => k + 1); setStep(n); }
function next() { isLast ? finish() : goTo(step + 1); }
function back() { if (step > 0) goTo(step - 1); }
return (