// courses.jsx — Academia TikTok 4U Agency

const { useState: useStateCo, useEffect: useEffectCo } = React;

const MODULES = [
  { id: 1, slug: 'modul-1', thumbnail: 'uploads/modul-1-introducere.png', numar: 'Modul 1', titlu: 'Introducere în TikTok Live', nivel: 'Începător', numarClipuri: 4,
    videos: [
      { id: '1159157232', titlu: '01 - Ce este TikTok Live si de ce functioneaza?' },
      { id: '1159165372', titlu: '02 - Tipuri de live: educativ, entertainment, vanzare, comunitate' },
      { id: '1159165022', titlu: '03 - Cum te ajuta live-ul: reach, incredere, conversii' },
      { id: '1159165188', titlu: '04 - Exemple de structuri simple de live (15, 30, 60 min)' },
    ] },
  { id: 2, slug: 'modul-2', thumbnail: 'uploads/modul-2-mindset.png', numar: 'Modul 2', titlu: 'Mindset și disciplină TikTok Live', nivel: 'Începător', numarClipuri: 5,
    videos: [
      { id: '1159201858', titlu: '01 - Cum iti controlezi emotiile si frica de camera?' },
      { id: '1159201744', titlu: '02 - Energia in live: voce, ritm, prezenta' },
      { id: '1159201464', titlu: '03 - Consistenta: program, obiective, obiceiuri' },
      { id: '1159201612', titlu: '04 - Cum gestionezi comentariile negative si trollii?' },
      { id: '1159201240', titlu: '05 - Mentalitatea de imbunatatire: feedback de la comunitate!' },
    ] },
  { id: 3, slug: 'modul-3', thumbnail: 'uploads/modul-3-reguli.png', numar: 'Modul 3', titlu: 'Regulile comunității TikTok', nivel: 'Începător', numarClipuri: 5,
    videos: [
      { id: '1159231335', titlu: '01 - Conditii pentru a face live (eligibilitate, restrictii)' },
      { id: '1159231170', titlu: '02 - Regulile comunitatii: ce risti si de ce' },
      { id: '1159230996', titlu: '03 - Subiecte sensibile si cuvinte care pot crea probleme' },
      { id: '1159230635', titlu: '04 - Gestionarea rapoartelor si a avertismentelor' },
      { id: '1159230867', titlu: '05 - Checklist de siguranta inainte de fiecare live!' },
    ] },
  { id: 4, slug: 'modul-4', thumbnail: 'uploads/modul-4-fundatia.png', numar: 'Modul 4', titlu: 'Fundatia contului pentru live', nivel: 'Începător', numarClipuri: 4,
    videos: [
      { id: '1159619755', titlu: '01 - Pozitionare: nisa, public, promisiune clara' },
      { id: '1159619567', titlu: '02 - Optimizare profil: poza, bio, link, pin-uri' },
      { id: '1159619991', titlu: '03 - Continut suport: ce postezi intre live-uri' },
      { id: '1159620236', titlu: '04 - Pregatirea comunitatii: anunturi si teasing' },
    ] },
  { id: 5, slug: 'modul-5', thumbnail: 'uploads/modul-5-setup-tehnic.png', numar: 'Modul 5', titlu: 'Setup tehnic (calitate video, audio)', nivel: 'Începător', numarClipuri: 5,
    videos: [
      { id: '1159645514', titlu: '01 - Lumina: setup simplu vs setup bun' },
      { id: '1159645415', titlu: '02 - Sunet: microfon, distante, eliminare zgomot' },
      { id: '1159645169', titlu: '03 - Cadru si fundal: unghi, pozitionare, ordine vizuala' },
      { id: '1159645332', titlu: '04 - Internet stabil: teste si setari utile' },
      { id: '1159645055', titlu: '05 - Accesorii recomandate si cum le alegi' },
    ] },
  { id: 6, slug: 'modul-6', thumbnail: 'uploads/modul-6-pregatiri.png', numar: 'Modul 6', titlu: 'Pregatirea live-ului (inainte sa apesi GO LIVE)', nivel: 'Începător', numarClipuri: 5,
    videos: [
      { id: '1159653652', titlu: '01 - Checklist pre-live: tehnic, mental, materiale' },
      { id: '1159653473', titlu: '02 - Planul live-ului: segmente si timp' },
      { id: '1159653276', titlu: '03 - Script minimal: hook, tranzitii, flux live' },
      { id: '1159653040', titlu: '04 - Moderare live: setari chat, filtre, moderatori' },
      { id: '1159652890', titlu: '05 - Program si consistenta: cand, cat, cat de des?' },
    ] },
  { id: 7, slug: 'modul-7', thumbnail: 'uploads/modul-7-despre-tine.png', numar: 'Modul 7', titlu: 'Despre tine (prezentare si incredere)', nivel: 'Începător', numarClipuri: 3,
    videos: [
      { id: '1159674243', titlu: '01 - Cine esti in 20-30 secunde: introducere clara' },
      { id: '1159674138', titlu: '02 - Limite: ce spui si ce nu spui despre tine' },
      { id: '1159673906', titlu: '03 - Cum repeti introducerea pe parcursul live-ului' },
    ] },
  { id: 8, slug: 'modul-8', thumbnail: 'uploads/modul-8-titlu-hook.png', numar: 'Modul 8', titlu: 'Titlu si topic (ce promiti in live)', nivel: 'Începător', numarClipuri: 2,
    videos: [
      { id: '1160135830', titlu: '01 - Plan de live si activitati pe live' },
      { id: '1160135970', titlu: '02 - Titluri de live care atrag' },
    ] },
  { id: 9, slug: 'modul-9', thumbnail: 'uploads/modul-9-obiectiv-cta.png', numar: 'Modul 9', titlu: 'Setare obiectiv pe live si call to action', nivel: 'Începător', numarClipuri: 3,
    videos: [
      { id: '1160143525', titlu: '01 - Setarea obiectivului pe live pe TikTok' },
      { id: '1160143200', titlu: '02 - KPI simpli: ce urmaresti dupa live' },
      { id: '1160143399', titlu: '03 - Cum imbunatatesti sesiunea de LIVE?' },
    ] },
  { id: 10, slug: 'modul-10', thumbnail: 'uploads/modul-10-fomo-retentie.png', numar: 'Modul 10', titlu: 'FOMO si retentie (sa ramana in live)', nivel: 'Începător', numarClipuri: 5,
    videos: [
      { id: '1160151900', titlu: '01 - De ce pleaca oamenii din live si cum previi asta' },
      { id: '1160151682', titlu: '02 - Bonusuri si exclusivitati corecte pe live' },
      { id: '1160151500', titlu: '03 - Structura cu momente: ce urmeaza, cand, de ce sa ramana' },
      { id: '1160150959', titlu: '04 - Reamintiri inteligente: cum repeti fara sa enervezi' },
      { id: '1160151278', titlu: '05 - Inchiderea live-ului: recapitulare + CTA + anunt urmatorul live' },
    ] },
  { id: 11, slug: 'modul-11', thumbnail: 'uploads/modul-11-structura.png', numar: 'Modul 11', titlu: 'Desfasurarea live-ului (interactiune si control)', nivel: 'Începător', numarClipuri: 5,
    videos: [
      { id: '1160159715', titlu: '01 - Structura completa live: warm-up, continut, Q&A, close' },
      { id: '1160159876', titlu: '02 - Engagement: intrebari, provocari, callouts, pin comment' },
      { id: '1160159540', titlu: '03 - Gestionarea chatului: ritm, prioritizare, raspunsuri' },
      { id: '1160159187', titlu: '04 - Cum convertesti din vizitator in sustinator pe live' },
      { id: '1160159410', titlu: '05 - Ce faci cand scade audienta?' },
    ] },
  { id: 12, slug: 'modul-12', thumbnail: 'uploads/modul-12-dupa-live.png', numar: 'Modul 12', titlu: 'Ce faci dupa live (analiza si crestere)', nivel: 'Începător', numarClipuri: 4,
    videos: [
      { id: '1160166945', titlu: '01 - Analiza basic: retention, peak, comentarii, follow' },
      { id: '1160166794', titlu: '02 - Postare dupa live: clipuri scurte din live' },
      { id: '1160166507', titlu: '03 - Planul urmatorului live - atentie la comunitate!' },
      { id: '1160166701', titlu: '04 - Sistem de imbunatatire a live-ului saptamanal' },
    ] },
  { id: 13, slug: 'modul-13', thumbnail: 'uploads/modul-13-monetizare.png', numar: 'Modul 13', titlu: 'Monetizare si live din TikTok Studio & OBS', nivel: 'Începător', numarClipuri: 4,
    videos: [
      { id: '1160191583', titlu: '01 - Formate avansate: interviu, co-host, debate, workshop' },
      { id: '1160191463', titlu: '02 - Live cu TikTok Studio/OBS si un setup minim' },
      { id: '1160191382', titlu: '03 - Automatizare: template-uri, scripturi, troll, etc' },
      { id: '1160191240', titlu: '04 - Monetizare TikTok: cadouri pe live, abonamente pe live, campanii' },
    ] },
];

function CoursesPage({ onNav }) {
  const [selected, setSelected] = useStateCo(null);

  useEffectCo(() => {
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [selected]);

  if (selected) {
    return <ModulePage mod={selected} onBack={() => setSelected(null)} onNav={onNav} />;
  }

  return (
    <div className="page">
      <CoursesHero onNav={onNav} />
      <ModulesGrid onSelect={setSelected} />
      <CoursesCTA onNav={onNav} />
    </div>
  );
}

function CoursesHero({ onNav }) {
  const stats = ['13 module', '50+ clipuri video', 'Acces lifetime'];
  return (
    <section style={{ minHeight: '50vh', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', paddingTop: 120, paddingBottom: 40 }}>
      <Mesh /><Particles count={32} />
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div className="pill" style={{ marginBottom: 24 }}>
            <span className="dot" />
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.05em' }}>ACADEMIA TIKTOK</span>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <h1 className="display" style={{ fontSize: 'clamp(44px, 7vw, 92px)', margin: 0, maxWidth: 1100, letterSpacing: '-0.04em' }}>
            Academia <span style={{ color: 'var(--accent-1)' }}>TikTok 4U</span>.
          </h1>
        </Reveal>
        <Reveal delay={220}>
          <p style={{ fontSize: 'clamp(17px, 1.3vw, 21px)', color: 'var(--txt-2)', marginTop: 24, maxWidth: 720, lineHeight: 1.55 }}>
            <strong style={{ color: 'var(--txt-0)' }}>13 module structurate</strong>. De la primul live până la strategii avansate. Conținut creat de echipa 4U Agency, agenția #1 din România.
          </p>
        </Reveal>
        <Reveal delay={300}>
          <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
            <BackButton onNav={onNav} />
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {stats.map((s) => (
                <div key={s} className="pill" style={{ padding: '6px 14px' }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--txt-2)', letterSpacing: '0.05em' }}>{s}</span>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function ModulesGrid({ onSelect }) {
  return (
    <section style={{ padding: '60px 0 120px' }}>
      <div className="container">
        <Reveal>
          <div style={{ marginBottom: 48 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● TOATE MODULELE</div>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: 0 }}>Începe drumul tău TikTok.</h2>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }} className="mod-grid">
          {MODULES.map((m, i) => (
            <Reveal key={m.id} delay={(i % 4) * 60}>
              <button
                onClick={() => onSelect(m)}
                className="card hov"
                style={{
                  padding: 0, overflow: 'hidden', cursor: 'pointer', textAlign: 'left', width: '100%', height: '100%',
                  border: '.5px solid var(--line)', display: 'flex', flexDirection: 'column',
                  transition: 'transform .25s, box-shadow .25s, border-color .25s',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 12px 30px rgba(82,242,15,.18)'; e.currentTarget.style.borderColor = 'rgba(82,242,15,.4)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'var(--line)'; }}
              >
                <div style={{ aspectRatio: '16/9', position: 'relative', overflow: 'hidden' }}>
                  <img src={m.thumbnail} alt={m.titlu} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                  <div className="mono" style={{
                    position: 'absolute', top: 10, left: 10, padding: '4px 10px',
                    background: 'rgba(0,0,0,.7)', backdropFilter: 'blur(6px)', borderRadius: 6,
                    fontSize: 10, color: 'var(--accent-1)', letterSpacing: '0.12em', fontWeight: 700,
                  }}>{m.numar.toUpperCase()}</div>
                </div>
                <div style={{ padding: 18, flex: 1, display: 'flex', flexDirection: 'column' }}>
                  <div className="display" style={{ fontSize: 16, color: 'var(--txt-0)', lineHeight: 1.3, marginBottom: 12 }}>{m.titlu}</div>
                  <div style={{ display: 'flex', gap: 8, marginBottom: 14, flexWrap: 'wrap', alignItems: 'center' }}>
                    <span className="mono" style={{ fontSize: 10, color: 'var(--accent-1)', background: 'rgba(82,242,15,.08)', border: '.5px solid rgba(82,242,15,.2)', padding: '3px 8px', borderRadius: 4, letterSpacing: '0.08em' }}>{m.nivel.toUpperCase()}</span>
                    <span className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '0.08em' }}>{m.numarClipuri} CLIPURI</span>
                  </div>
                  <div style={{ marginTop: 'auto', fontSize: 13, color: 'var(--accent-1)', fontWeight: 500 }}>Începe modulul →</div>
                </div>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px) { .mod-grid { grid-template-columns: repeat(3, 1fr) !important; } }
        @media (max-width: 800px)  { .mod-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 500px)  { .mod-grid { grid-template-columns: 1fr !important; max-width: 400px; margin: 0 auto; } }
      `}</style>
    </section>
  );
}

function ModulePage({ mod, onBack, onNav }) {
  return (
    <div className="page">
      <section style={{ position: 'relative', overflow: 'hidden', paddingTop: 120, paddingBottom: 16 }}>
        <Mesh /><Particles count={20} />
        <div className="container" style={{ position: 'relative', zIndex: 2 }}>
          <Reveal>
            <button onClick={onBack} className="btn btn-glass btn-sm" style={{ marginBottom: 24 }}>← Înapoi la module</button>
          </Reveal>
          <Reveal delay={100}>
            <div className="pill" style={{ marginBottom: 20 }}>
              <span className="dot" />
              <span className="mono" style={{ fontSize: 11, letterSpacing: '0.05em' }}>{mod.numar.toUpperCase()} · NIVEL {mod.nivel.toUpperCase()}</span>
            </div>
          </Reveal>
          <Reveal delay={180}>
            <h1 className="display" style={{ fontSize: 'clamp(36px, 5vw, 72px)', margin: 0, maxWidth: 1100, letterSpacing: '-0.03em' }}>{mod.titlu}</h1>
          </Reveal>
          <Reveal delay={260}>
            <p style={{ fontSize: 'clamp(15px, 1.2vw, 19px)', color: 'var(--txt-2)', marginTop: 18 }}>
              <strong style={{ color: 'var(--txt-0)' }}>{mod.numarClipuri} clipuri video</strong> · Acces lifetime
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ padding: '16px 0 100px' }}>
        <div className="container">
          {mod.videos && mod.videos.length > 0 ? (
            <Reveal>
              <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(auto-fit, minmax(min(400px, 100%), 1fr))',
                  gap: '24px',
                  width: '100%',
                }}>
                  {mod.videos.map((video) => (
                    <div key={video.id} style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                      <div style={{
                        position: 'relative',
                        paddingTop: '56.25%',
                        borderRadius: '12px',
                        overflow: 'hidden',
                        background: 'var(--bg-2)',
                      }}>
                        <iframe
                          src={`https://player.vimeo.com/video/${video.id}?color=0CFA07&title=0&byline=0&portrait=0`}
                          allow="autoplay; fullscreen; picture-in-picture"
                          allowFullScreen
                          frameBorder="0"
                          style={{
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            width: '100%',
                            height: '100%',
                            border: 'none',
                          }}
                        />
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '4px' }}>
                        <img
                          src="uploads/4u-agency-logo.png"
                          alt="4U"
                          style={{ width: '24px', height: '24px', borderRadius: '50%', flexShrink: 0 }}
                        />
                        <div>
                          <div style={{ fontSize: '15px', fontWeight: 600, color: 'var(--txt-0)' }}>{video.titlu}</div>
                          <div style={{ fontSize: '13px', color: 'var(--txt-2)', marginTop: '2px' }}>4U Agency</div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          ) : (
            <Reveal>
              <div className="card-glass" style={{ padding: 'clamp(40px, 6vw, 72px)', textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
                <div style={{ fontSize: 56, marginBottom: 20, lineHeight: 1 }}>⏳</div>
                <h2 className="display" style={{ fontSize: 'clamp(24px, 3vw, 36px)', margin: '0 0 12px' }}>În curând disponibil</h2>
                <p style={{ color: 'var(--txt-2)', fontSize: 16, marginBottom: 28, lineHeight: 1.55, maxWidth: 460, margin: '0 auto 28px' }}>
                  Acest modul va fi disponibil în curând. Echipa 4U pregătește conținutul.
                </p>
                <button onClick={onBack} className="btn btn-primary btn-lg">← Întoarce-te la module</button>
              </div>
            </Reveal>
          )}
        </div>
      </section>

      <CoursesCTA onNav={onNav} />
    </div>
  );
}

function CoursesCTA({ onNav }) {
  return (
    <section style={{ padding: '60px 0 120px' }}>
      <div className="container">
        <Reveal>
          <div className="card-glass" style={{ padding: 'clamp(40px, 6vw, 72px)', textAlign: 'center', background: 'linear-gradient(135deg, rgba(82,242,15,.10), rgba(255,215,0,.06))', border: '.5px solid rgba(82,242,15,.25)' }}>
            <h2 className="display" style={{ fontSize: 'clamp(28px, 4vw, 48px)', margin: '0 0 24px' }}>Ai întrebări despre module?</h2>
            <button className="btn btn-primary btn-lg" onClick={() => onNav('contact')}>Vorbește cu echipa →</button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.CoursesPage = CoursesPage;