// Main app: Stronka (black & gold)
const { useState, useEffect, useMemo, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#d6a647",
  "audienceLayout": "grid",
  "processLayout": "horizontal",
  "density": "regular",
  "light": false,
  "lang": "PL"
}/*EDITMODE-END*/;

// Gold variants. Each tuple = [accent, soft, ink]
const ACCENT_PRESETS = {
  "#d6a647": ["oklch(0.30 0.06 80)", "oklch(0.86 0.14 88)"],   // classic gold
  "#e7b94a": ["oklch(0.32 0.07 90)", "oklch(0.90 0.14 92)"],   // bright gold
  "#b8893a": ["oklch(0.26 0.05 75)", "oklch(0.78 0.12 80)"],   // antique brass
  "#c9a98a": ["oklch(0.28 0.04 70)", "oklch(0.84 0.06 75)"]    // champagne
};

function applyTheme(t) {
  const root = document.documentElement;
  root.setAttribute("data-theme", t.light ? "light" : "dark");
  root.setAttribute("data-density", t.density);
  const preset = ACCENT_PRESETS[t.accent] || ACCENT_PRESETS["#d6a647"];
  root.style.setProperty("--gold", t.accent);
  root.style.setProperty("--accent", t.accent);
  root.style.setProperty("--accent-soft", preset[0]);
  root.style.setProperty("--accent-ink", preset[1]);
  root.style.setProperty("--gold-bright", preset[1]);
}

function scrollToId(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const y = el.getBoundingClientRect().top + window.scrollY - 64;
  window.scrollTo({ top: y, behavior: "smooth" });
}

// ── Hero feed data ─────────────────────────────────────────────────────────
// Real student opinions. Mixed PL + UA (the actual audience).
// Each comment stays in the language the student wrote it. No badges, just words.
const FEED_CARDS_A = [
  { name: "Anna K.",    role: "Zarządzanie",   hours: "120h", initial: "A", av: "gold", body: "nie musiałam się o nic martwić, wszystko ogarnięte" },
  { name: "Marko V.",   role: "Маркетинг",     hours: "90h",  initial: "M", av: "ink",  body: "все чітко, без зайвих питань" },
  { name: "Iryna P.",   role: "Фінанси",       hours: "150h", initial: "I", av: "mute", body: "думала що буде складно, але пройшло легко" },
  { name: "Tomasz B.",  role: "IT",            hours: "75h",  initial: "T", av: "gold", body: "dokumenty dostałem w tydzień, szybciej niż myślałem" },
  { name: "Olha S.",    role: "HR",            hours: "120h", initial: "O", av: "ink",  body: "координатор завжди на зв'язку, реально допомогли" },
  { name: "Piotr R.",   role: "Logistyka",     hours: "100h", initial: "P", av: "mute", body: "poszło sprawniej niż się spodziewałem, spoko opcja" },
  { name: "Julia N.",   role: "Filologia",     hours: "60h",  initial: "J", av: "gold", body: "łączyłam z pracą na pół etatu, żaden problem" },
  { name: "Bartek L.",  role: "Informatyka",   hours: "100h", initial: "B", av: "ink",  body: "uczelnia przyjęła dokumenty bez uwag, git" },
  { name: "Nika H.",    role: "Міжнародні",    hours: "120h", initial: "N", av: "mute", body: "графік підлаштували під мою роботу, зручно" },
  { name: "Rafał S.",   role: "Mechatronika",  hours: "80h",  initial: "R", av: "gold", body: "koordynator odpisywał nawet wieczorami, dzięki" }
];
const FEED_CARDS_B = [
  { name: "Mariia D.",  role: "Дизайн",        hours: "60h",  initial: "M", av: "gold", body: "документи оформили швидко, все як обіцяли" },
  { name: "Kuba W.",    role: "Prawo",         hours: "200h", initial: "K", av: "ink",  body: "piwko w jednej, praktyki w drugiej 🍺" },
  { name: "Sofiia L.",  role: "Психологія",    hours: "90h",  initial: "S", av: "mute", body: "відповідали навіть у вихідні, дякую" },
  { name: "Dominik Z.", role: "Ekonomia",      hours: "120h", initial: "D", av: "gold", body: "nie wiedziałem od czego zacząć, pomogli ogarniać krok po kroku" },
  { name: "Vlad K.",    role: "Архітектура",   hours: "80h",  initial: "V", av: "ink",  body: "спочатку сумнівався, але все вийшло добре" },
  { name: "Hanna F.",   role: "Педагогіка",    hours: "60h",  initial: "H", av: "mute", body: "все без сюрпризів, рекомендую" },
  { name: "Aleks W.",   role: "Socjologia",    hours: "90h",  initial: "A", av: "gold", body: "myślałem że z tym kierunkiem będzie ciężko, a okazało się ok" },
  { name: "Karina P.",  role: "Dziennikarstwo", hours: "75h", initial: "K", av: "ink",  body: "miła obsługa, wszystko jasno wytłumaczone" },
  { name: "Michał T.",  role: "Budownictwo",   hours: "150h", initial: "M", av: "mute", body: "z pracy zdalnej robiłem zadania wieczorami, spoko" },
  { name: "Eliza R.",   role: "Turystyka",     hours: "60h",  initial: "E", av: "gold", body: "koordynatorka odpisywała naprawdę szybko, polecam" }
];

function FeedCard({ c }) {
  return (
    <div className="feed-card">
      <div className="row">
        <div className={"av " + c.av}>{c.initial}</div>
        <div>
          <div className="name">{c.name}</div>
          <div className="meta">{c.role} · {c.hours}</div>
        </div>
      </div>
      <div className="body">{c.body}</div>
    </div>
  );
}

function HeroFeed({ lang }) {
  // Duplicate cards for seamless infinite loop
  const a = [...FEED_CARDS_A, ...FEED_CARDS_A];
  const b = [...FEED_CARDS_B, ...FEED_CARDS_B];
  return (
    <div className="hero-feed" aria-hidden="true">
      <div className="hero-feed-col">
        <div className="hero-feed-track">
          {a.map((c, i) => <FeedCard key={"a" + i} c={c} />)}
        </div>
      </div>
      <div className="hero-feed-col b">
        <div className="hero-feed-track">
          {b.map((c, i) => <FeedCard key={"b" + i} c={c} />)}
        </div>
      </div>
    </div>
  );
}

// ── Marquee ────────────────────────────────────────────────────────────────
const MARQUEE_TERMS = {
  PL:  ["praktyki online", "elastycznie", "PL · ENG · UA", "wsparcie 24/7", "studenci", "2026"],
  ENG: ["online internships", "flexible", "PL · ENG · UA", "24/7 support", "students", "2026"],
  UA:  ["онлайн-практика", "гнучко", "PL · ENG · UA", "підтримка 24/7", "студенти", "2026"]
};
function Marquee({ lang }) {
  const items = [...MARQUEE_TERMS[lang], ...MARQUEE_TERMS[lang]];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {items.map((w, i) => (
          <span className={"marquee-item" + (i % 2 === 1 ? " gold" : "")} key={i}>
            {w}<span className="star"></span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ── Components ─────────────────────────────────────────────────────────────

function Nav({ lang, setLang }) {
  return (
    <nav className="nav" data-comment-anchor="nav">
      <div className="container nav-inner">
        <a className="brand" href="#top" onClick={(e) => { e.preventDefault(); scrollToId("top"); }}>
          <span className="brand-mark">p</span>
          <span className="brand-word">praktyki-online.pl</span>
        </a>
        <div className="lang" role="tablist" aria-label="Language">
          {["PL", "ENG", "UA"].map((L) => (
            <button key={L} type="button" data-on={lang === L ? "1" : "0"}
                    onClick={() => setLang(L)} aria-pressed={lang === L}>{L}</button>
          ))}
        </div>
      </div>
    </nav>
  );
}

function Hero({ t, lang }) {
  return (
    <section id="top" className="hero" data-screen-label="01 Hero" data-comment-anchor="hero">
      <div className="hero-bg" aria-hidden="true"></div>
      <div className="container">
        <div className="hero-grid">
          <div>
            <span className="eyebrow">{t.eyebrow}</span>
            <h1 className="hero-title">
              <span className="br">{t.title_a}</span>
              <span className="br"><em className="serif">{t.title_em}</em></span>
              <span className="br">{t.title_b}</span>
            </h1>
            <p className="hero-sub">{t.sub}</p>
            <div className="hero-cta">
              <button className="btn btn-primary"
                      onClick={() => scrollToId("apply")}>
                {t.cta_apply} <span className="arr">{Icons.arrow}</span>
              </button>
              <button className="btn btn-ghost"
                      onClick={() => scrollToId("contact")}>
                {t.cta_contact}
              </button>
            </div>
            <div className="hero-meta">
              <div><span className="gold-dot"></span><b>{t.meta_a}</b></div>
              <div><b>{t.meta_b}</b></div>
              <div><b>{t.meta_c}</b></div>
            </div>
          </div>
          <HeroFeed lang={lang} />
        </div>
      </div>
      <Marquee lang={lang} />
    </section>
  );
}

function Intro({ t }) {
  const icons = [Icons.online, Icons.flex, Icons.easy, Icons.support];
  return (
    <section className="sec container" data-screen-label="02 Intro">
      <div className="sec-head">
        <div>
          <span className="eyebrow">{t.eyebrow}</span>
          <h2 style={{ marginTop: 20 }}>{t.title}</h2>
        </div>
        <p className="desc">{t.desc}</p>
      </div>
      <div className="features">
        {t.features.map((f, i) => (
          <div className="feat" key={i}>
            <div className="feat-ico">{icons[i]}</div>
            <h3>{f.t}</h3>
            <p>{f.d}</p>
            <span className="feat-tag">0{i + 1}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function Audience({ t, layout }) {
  return (
    <section id="who" className="sec container" data-screen-label="03 Audience">
      <div className="sec-head">
        <div>
          <span className="sec-num">{t.num}</span>
          <div className="eyebrow" style={{ marginTop: 10 }}>{t.eyebrow}</div>
          <h2 style={{ marginTop: 20 }}>{t.title}</h2>
        </div>
        <p className="desc">{t.desc}</p>
      </div>
      <div className={"audience" + (layout === "stacked" ? " stacked" : "")}>
        {t.items.map((it, i) => (
          <div className="aud" key={i}>
            <div className="idx">0{i + 1}</div>
            <h3>{it.t}</h3>
            <p>{it.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function Process({ t, layout }) {
  return (
    <section id="how" className="sec container" data-screen-label="04 Process">
      <div className="sec-head">
        <div>
          <span className="sec-num">{t.num}</span>
          <div className="eyebrow" style={{ marginTop: 10 }}>{t.eyebrow}</div>
          <h2 style={{ marginTop: 20 }}>{t.title}</h2>
        </div>
        <p className="desc">{t.desc}</p>
      </div>
      <div className={"process" + (layout === "vertical" ? " vertical" : "")}>
        {t.steps.map((s, i) => (
          <div className="step" key={i}>
            <div className="step-dot">{i + 1}</div>
            <div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Offer({ t }) {
  return (
    <section className="sec container" data-screen-label="05 Offer">
      <div className="sec-head">
        <div>
          <span className="sec-num">{t.num}</span>
          <div className="eyebrow" style={{ marginTop: 10 }}>{t.eyebrow}</div>
          <h2 style={{ marginTop: 20 }}>{t.title}</h2>
        </div>
        <p className="desc">{t.desc}</p>
      </div>
      <div className="offer">
        {t.items.map((it, i) => (
          <div className="offer-item" key={i}>
            <div className="chk">{Icons.check}</div>
            <span>{it}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function Faq({ t }) {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="sec container" data-screen-label="06 FAQ">
      <div className="sec-head" style={{ gridTemplateColumns: "1fr 1.3fr" }}>
        <div>
          <span className="sec-num">{t.num}</span>
          <div className="eyebrow" style={{ marginTop: 10 }}>{t.eyebrow}</div>
          <h2 style={{ marginTop: 20 }}>{t.title}</h2>
        </div>
        <div />
      </div>
      <div className="faq">
        {t.items.map((it, i) => (
          <div className="qa" key={i} data-open={open === i ? "1" : "0"}>
            <button className="qa-q" onClick={() => setOpen(open === i ? -1 : i)}>
              <span className="qn">0{i + 1}</span>
              <span>{it.q}</span>
              <span className="qa-toggle" aria-hidden="true"></span>
            </button>
            <div className="qa-a">
              <div className="qa-a-inner">{it.a}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Form({ t, lang }) {
  const [v, setV] = useState({
    name: "", email: "", phone: "", lang: t.lang_opts[0],
    univ: "", major: "", hours: "", msg: ""
  });
  const [err, setErr] = useState({});
  const [done, setDone] = useState(false);

  useEffect(() => { setV((p) => ({ ...p, lang: t.lang_opts[0] })); }, [t.lang_opts[0]]);

  const set = (k) => (e) => setV({ ...v, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    const E = {};
    if (!v.name.trim()) E.name = t.errors.name;
    if (!/.+@.+\..+/.test(v.email)) E.email = t.errors.email;
    if (!v.phone.trim()) E.phone = t.errors.phone;
    if (!v.univ.trim()) E.univ = t.errors.univ;
    if (!v.major.trim()) E.major = t.errors.major;
    if (!v.hours.toString().trim()) E.hours = t.errors.hours;
    setErr(E);
    if (Object.keys(E).length === 0) {
      setDone(true);
    }
  };

  const F = ({ k, type = "text", full = false, placeholder }) => (
    <div className={"field" + (full ? " full" : "") + (err[k] ? " err" : "")}>
      <label>{t.fields[k]}{k !== "msg" && <span className="req">*</span>}</label>
      {type === "textarea"
        ? <textarea value={v[k]} onChange={set(k)} placeholder={placeholder} />
        : <input type={type} value={v[k]} onChange={set(k)} placeholder={placeholder} />}
      {err[k] && <div className="field-error">{err[k]}</div>}
    </div>
  );


  return (
    <section id="apply" className="sec container" data-screen-label="07 Form">
      <div className="form-wrap">
        <div className="form-aside">
          <span className="form-aside-tag">{t.tag}</span>
          <span className="eyebrow">{t.eyebrow}</span>
          <h2>{t.title}</h2>
          <p>{t.desc}</p>
        </div>

        {done ? (
          <div className="form">
            <div className="form-success">
              <div className="ico">{Icons.check}</div>
              <div>
                <h3>{t.success_title}</h3>
                <p>{t.success_body}</p>
              </div>
            </div>
          </div>
        ) : (
          <form className="form" onSubmit={submit} noValidate>
            <F k="name" placeholder={t.placeholders.name} />
            <F k="email" type="email" placeholder={t.placeholders.email} />
            <F k="phone" placeholder={t.placeholders.phone} />
            <div className="field">
              <label>{t.fields.lang}<span className="req">*</span></label>
              <select value={v.lang} onChange={set("lang")}>
                {t.lang_opts.map((o) => <option key={o} value={o}>{o}</option>)}
              </select>
            </div>
            <F k="univ" placeholder={t.placeholders.univ} />
            <F k="major" placeholder={t.placeholders.major} />
            <F k="hours" type="number" placeholder={t.placeholders.hours} />
            <F k="msg" type="textarea" full placeholder={t.placeholders.msg} />
            <div className="form-foot">
              <small>{t.consent}</small>
              <button type="submit" className="btn btn-primary">
                {t.submit} <span className="arr">{Icons.arrow}</span>
              </button>
            </div>
          </form>
        )}
      </div>
    </section>
  );
}

function Contact({ t }) {
  const icons = [Icons.wa, Icons.tg, Icons.mail];
  const hrefs = ["https://wa.me/48733502514", "https://t.me/praktyki_online", "mailto:office@praktyki-online.pl"];
  return (
    <section id="contact" className="sec container" data-screen-label="08 Contact">
      <div className="sec-head">
        <div>
          <span className="sec-num">{t.num}</span>
          <div className="eyebrow" style={{ marginTop: 10 }}>{t.eyebrow}</div>
          <h2 style={{ marginTop: 20 }}>{t.title}</h2>
        </div>
        <p className="desc">{t.desc}</p>
      </div>
      <div className="contact-grid">
        {t.items.map((c, i) => (
          <a className="contact-card" key={i} href={hrefs[i]} target="_blank" rel="noopener">
            <div className="ico">{icons[i]}</div>
            <div className="label">{c.label}</div>
            <div className="val">{c.val}</div>
            <div className="langs">{c.langs}</div>
          </a>
        ))}
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer" data-screen-label="09 Footer">
      <div className="container">
        <div className="footer-inner">
          <div>
            <p style={{ color: "var(--ink-soft)", fontSize: 14, maxWidth: "32ch" }}>{t.tag}</p>
          </div>
          <div>
            <h4>Navigate</h4>
            <ul>{t.links.map((l, i) => <li key={i}><a href="#">{l}</a></li>)}</ul>
          </div>
          <div>
            <h4>Reach</h4>
            <ul>{t.reach.map((l, i) => <li key={i}><a href="#">{l}</a></li>)}</ul>
          </div>
          <div>
            <h4>Legal</h4>
            <ul>{t.legal.map((l, i) => <li key={i}><a href="#">{l}</a></li>)}</ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t.rights}</span>
          <span>PL · ENG · UA</span>
        </div>
      </div>
    </footer>
  );
}

// ── Root ───────────────────────────────────────────────────────────────────

function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState(tw.lang || "PL");
  const T = I18N[lang];

  useEffect(() => { applyTheme(tw); }, [tw.light, tw.density, tw.accent]);
  useEffect(() => { setTweak("lang", lang); }, [lang]);
  useEffect(() => { if (tw.lang && tw.lang !== lang) setLang(tw.lang); }, [tw.lang]);

  return (
    <>
      <Nav lang={lang} setLang={setLang} />
      <Hero t={T.hero} lang={lang} />
      <Intro t={T.intro} />
      <Audience t={T.audience} layout={tw.audienceLayout} />
      <Process t={T.process} layout={tw.processLayout} />
      <Offer t={T.offer} />
      <Faq t={T.faq} />
      <Form t={T.form} lang={lang} />
      <Contact t={T.contact} />
      <Footer t={T.footer} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakColor label="Gold" value={tw.accent}
                      options={Object.keys(ACCENT_PRESETS)}
                      onChange={(v) => setTweak("accent", v)} />
          <TweakToggle label="Light mode" value={tw.light}
                       onChange={(v) => setTweak("light", v)} />
          <TweakRadio label="Density" value={tw.density}
                      options={["compact", "regular", "comfy"]}
                      onChange={(v) => setTweak("density", v)} />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakRadio label="Who it's for" value={tw.audienceLayout}
                      options={["grid", "stacked"]}
                      onChange={(v) => setTweak("audienceLayout", v)} />
          <TweakRadio label="How it works" value={tw.processLayout}
                      options={["horizontal", "vertical"]}
                      onChange={(v) => setTweak("processLayout", v)} />
        </TweakSection>
        <TweakSection label="Language">
          <TweakRadio label="Active" value={lang}
                      options={["PL", "ENG", "UA"]}
                      onChange={setLang} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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