/* global React, Wave, Scope, Page, LessonFooter, audioFn, carrierFn, amFn */
const { useState: _u1 } = React;

// ============================================================
// 1. START SCREEN
// ============================================================
const StartScreen = ({ onStart, onPractice, onQuiz, progress }) => {
  return (
    <div className="page" style={{ display: 'flex', alignItems: 'center', minHeight: 'calc(100vh - 80px)', maxWidth: 1200 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center', width: '100%' }}>
        <div className="fade-in">
          <div className="eyebrow">ΚΕΦΑΛΑΙΟ 01 · ΡΑΔΙΟΦΩΝΙΚΑ ΣΥΣΤΗΜΑΤΑ</div>
          <h1 style={{ fontSize: 72, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 0.95, margin: '8px 0 18px' }}>
            AM<span style={{ color: 'var(--text-faint)' }}>/</span><span style={{ color: 'var(--pink)' }}>FM</span><br />
            <span style={{ color: 'var(--text-secondary)', fontSize: 36, fontWeight: 600 }}>Telecom Lab</span>
          </h1>
          <p style={{ fontSize: 18, color: 'var(--text-secondary)', lineHeight: 1.55, marginBottom: 36, maxWidth: 520 }}>
            Διαδραστικό μάθημα για ραδιοφωνικά συστήματα <b style={{color:'var(--cyan)'}}>AM</b> και <b style={{color:'var(--pink)'}}>FM</b>.
            Κυματομορφές, διαγράμματα, ασκήσεις και quiz — όλα σε ένα εργαστήριο.
          </p>
          <div className="row" style={{ flexWrap: 'wrap', gap: 12 }}>
            <button className="btn btn-primary" onClick={onStart}>▶ Ξεκίνα Μάθημα</button>
            <button className="btn btn-secondary" onClick={onPractice}>⚙ Εξάσκηση</button>
            <button className="btn btn-ghost" onClick={onQuiz}>◇ Quiz</button>
          </div>

          <div style={{ marginTop: 56, display: 'flex', gap: 32 }}>
            <div>
              <div className="kpi-label">ΜΑΘΗΜΑΤΑ</div>
              <div className="kpi">11</div>
            </div>
            <div>
              <div className="kpi-label">ΔΡΑΣΤΗΡΙΟΤΗΤΕΣ</div>
              <div className="kpi" style={{color:'var(--lime)'}}>6</div>
            </div>
            <div>
              <div className="kpi-label">QUIZ</div>
              <div className="kpi" style={{color:'var(--amber)'}}>10</div>
            </div>
            <div>
              <div className="kpi-label">ΠΡΟΟΔΟΣ</div>
              <div className="kpi" style={{color:'var(--pink)'}}>{progress}%</div>
            </div>
          </div>
        </div>

        {/* Hero scope */}
        <div className="fade-in-2">
          <div className="scope" style={{ height: 380, position: 'relative' }}>
            <div className="scope-grid"></div>
            <div className="scope-label">
              <span className="ch-dot" style={{ background: 'var(--lime)', boxShadow: '0 0 8px var(--lime)' }}></span>
              CH1 · AUDIO 2 kHz
            </div>
            <div style={{ position: 'absolute', top: 10, right: 12, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)', letterSpacing: '0.15em' }}>
              FS · 1 ms/div
            </div>
            <div style={{ position: 'absolute', top: '14%', left: 0, right: 0 }}>
              <Wave fn={audioFn} color="var(--lime)" height={70} />
            </div>
            <div style={{ position: 'absolute', top: '38%', left: 12, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)', letterSpacing: '0.15em', display:'flex', alignItems:'center', gap: 6 }}>
              <span style={{width:8, height:8, borderRadius:'50%', background:'var(--cyan)', boxShadow:'0 0 8px var(--cyan)'}}></span>
              CH2 · CARRIER 1.0 MHz
            </div>
            <div style={{ position: 'absolute', top: '44%', left: 0, right: 0 }}>
              <Wave fn={carrierFn(36)} color="var(--cyan)" height={70} />
            </div>
            <div style={{ position: 'absolute', top: '68%', left: 12, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)', letterSpacing: '0.15em', display:'flex', alignItems:'center', gap: 6 }}>
              <span style={{width:8, height:8, borderRadius:'50%', background:'var(--pink)', boxShadow:'0 0 8px var(--pink)'}}></span>
              CH3 · AM OUT · m=0.7
            </div>
            <div style={{ position: 'absolute', top: '74%', left: 0, right: 0 }}>
              <Wave fn={amFn(0.7, 36, 2)} color="var(--pink)" height={80} />
            </div>
          </div>
          <div className="row" style={{ marginTop: 12, gap: 8 }}>
            <span className="chip">▌ TRIG · NORM</span>
            <span className="chip" style={{color:'var(--cyan)'}}>● REC</span>
            <span className="chip">100 MS/s</span>
            <span className="chip">14-bit</span>
          </div>
        </div>
      </div>
    </div>
  );
};

// ============================================================
// 2. MAIN MENU
// ============================================================
const LESSONS = [
  { id: 'why', title: 'Γιατί χρειαζόμαστε διαμόρφωση;', tag: 'ΘΕΩΡΙΑ', icon: '🤔' },
  { id: 'signals', title: 'Φέρον σήμα και σήμα πληροφορίας', tag: 'ΘΕΩΡΙΑ', icon: '📡' },
  { id: 'am', title: 'Διαμόρφωση AM', tag: 'ΕΡΓΑΣΤΗΡΙΟ', icon: '🎚️' },
  { id: 'spectrum', title: 'Φάσμα AM', tag: 'ΑΣΚΗΣΗ', icon: '📊' },
  { id: 'm', title: 'Βαθμός διαμόρφωσης m', tag: 'ΕΡΓΑΣΤΗΡΙΟ', icon: '📐' },
  { id: 'tx', title: 'Πομπός AM', tag: 'ΔΙΑΓΡΑΜΜΑ', icon: '📤' },
  { id: 'rx', title: 'Δέκτης AM', tag: 'ΑΣΚΗΣΗ', icon: '📥' },
  { id: 'super', title: 'Υπερετερόδυνος δέκτης', tag: 'ΥΠΟΛΟΓΙΣΤΗΣ', icon: '🔄' },
  { id: 'agc', title: 'AGC και συχνότητα είδωλο', tag: 'ΘΕΩΡΙΑ', icon: '⚡' },
  { id: 'fm', title: 'Εισαγωγή στο FM', tag: 'ΕΡΓΑΣΤΗΡΙΟ', icon: '📻' },
  { id: 'compare', title: 'AM vs FM', tag: 'ΣΥΓΚΡΙΣΗ', icon: '⚖️' },
];

const tagClass = (t) => ({
  'ΘΕΩΡΙΑ': 'tag-cyan',
  'ΕΡΓΑΣΤΗΡΙΟ': 'tag-lime',
  'ΑΣΚΗΣΗ': 'tag-amber',
  'ΔΙΑΓΡΑΜΜΑ': 'tag-cyan',
  'ΥΠΟΛΟΓΙΣΤΗΣ': 'tag-amber',
  'ΣΥΓΚΡΙΣΗ': 'tag-pink',
}[t] || '');

const MainMenu = ({ onLesson, onQuiz, completed }) => {
  const pct = Math.round(completed.size / LESSONS.length * 100);
  return (
    <Page
      eyebrow="ΜΕΝΟΥ ΜΑΘΗΜΑΤΩΝ"
      title="Επίλεξε ένα μάθημα"
      sub="Έντεκα διαδραστικά μαθήματα οδηγούν τον ήχο από τον πομπό μέχρι το ραδιόφωνό σου. Μπορείς να τα ακολουθήσεις με τη σειρά ή να πας απευθείας στο σημείο που σε ενδιαφέρει."
      actions={<button className="btn btn-pink" onClick={onQuiz}>◇ Δοκίμασε το Quiz</button>}
    >
      {/* Progress */}
      <div className="card" style={{ marginBottom: 32, padding: 20 }}>
        <div className="row between" style={{ marginBottom: 12 }}>
          <div className="row" style={{ gap: 12 }}>
            <span className="kpi-label" style={{margin:0}}>ΠΡΟΟΔΟΣ</span>
            <span className="mono" style={{ fontSize: 14, color: 'var(--text-secondary)' }}>
              {completed.size} <span style={{color:'var(--text-faint)'}}>/</span> {LESSONS.length} ολοκληρωμένα
            </span>
          </div>
          <span className="mono" style={{ color: 'var(--cyan)', fontSize: 14 }}>{pct}%</span>
        </div>
        <div className="pbar"><div className="pbar-fill" style={{ width: `${pct}%` }}></div></div>
      </div>

      <div className="lesson-grid">
        {LESSONS.map((l, i) => (
          <button
            key={l.id}
            className={`lesson-card ${completed.has(l.id) ? 'completed' : ''}`}
            onClick={() => onLesson(l.id)}
          >
            <div className="row between" style={{ marginBottom: 16 }}>
              <span className="num">L{String(i + 1).padStart(2, '0')}</span>
              <span className={`card-tag ${tagClass(l.tag)}`}>{l.tag}</span>
            </div>
            <h3>{l.title}</h3>
            <div className="meta">
              <span style={{fontSize:18}}>{l.icon}</span>
              <span>~ {3 + (i % 3)} λεπτά</span>
            </div>
            <div className="arrow">→</div>
          </button>
        ))}
      </div>
    </Page>
  );
};

// ============================================================
// 3. WHY MODULATION
// ============================================================
const WhyModulation = ({ onNext, onPrev, onMenu }) => {
  const [hovered, setHovered] = _u1(null);
  return (
    <Page
      eyebrow="L01 · ΘΕΩΡΙΑ"
      title="Γιατί χρειαζόμαστε διαμόρφωση;"
      sub="Ο ήχος δεν μπορεί να εκπεμφθεί μόνος του στον αέρα. Χρειάζεται ένα «αυτοκίνητο» — ένα φέρον σήμα υψηλής συχνότητας — για να ταξιδέψει."
    >
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, alignItems: 'stretch' }}>
        {[
          { tag:'ΕΠΙΒΑΤΗΣ', icon:'🎤', color:'var(--lime)', tagClass:'tag-lime',
            title:'Ηχητικό σήμα', range:'20 Hz – 15 kHz',
            body:'Φωνή ή μουσική, χαμηλής συχνότητας. Δεν μπορεί να εκπεμφθεί μόνο του — θα χρειαζόταν κεραία εκατοντάδων μέτρων και όλοι οι σταθμοί θα συγκρούονταν στις ίδιες χαμηλές συχνότητες.',
            status:{txt:'Δεν εκπέμπεται μόνο του', color:'var(--red)', sym:'✕'},
            wave: audioFn, },
          { tag:'ΑΥΤΟΚΙΝΗΤΟ', icon:'📡', color:'var(--cyan)', tagClass:'tag-cyan',
            title:'Φέρον σήμα', range:'εκατομμύρια Hz (MHz)',
            body:'Κύμα υψηλής συχνότητας που εκπέμπεται εύκολα από μικρές κεραίες. Παράγεται από τον ταλαντωτή και παίζει τον ρόλο του «οχήματος» που μεταφέρει τον ήχο στον χώρο.',
            status:{txt:'Εκπέμπεται εύκολα', color:'var(--lime)', sym:'✓'},
            wave: carrierFn(28), },
          { tag:'ΤΑΞΙΔΙ', icon:'📻', color:'var(--pink)', tagClass:'tag-pink',
            title:'Διαμορφωμένο σήμα', range:'AM / FM',
            body:'Ο ήχος «φορτώνεται» πάνω στο φέρον — το αποτέλεσμα ταξιδεύει μακριά, φέρει την πληροφορία και αποκωδικοποιείται από τον δέκτη του ακροατή.',
            status:{txt:'Ταξιδεύει & πληροφορεί', color:'var(--lime)', sym:'✓'},
            wave: amFn(0.7, 28, 2), },
        ].map((c, i) => (
          <div key={i} className="card" style={{
            display: 'flex', flexDirection: 'column', gap: 16,
            borderColor: hovered === i ? c.color : undefined,
            transition: 'border-color 0.2s'
          }}
            onMouseEnter={() => setHovered(i)} onMouseLeave={() => setHovered(null)}>
            <div className="card-header">
              <div className="row" style={{ gap: 10 }}>
                <span style={{ fontSize: 28 }}>{c.icon}</span>
                <div>
                  <div className="card-title">{c.title}</div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{c.range}</div>
                </div>
              </div>
              <span className={`card-tag ${c.tagClass}`}>{c.tag}</span>
            </div>
            <div className="scope" style={{ height: 70 }}>
              <div className="scope-grid"></div>
              <Wave fn={c.wave} color={c.color} height={70} />
            </div>
            <p style={{ color: 'var(--text-secondary)', lineHeight: 1.55, fontSize: 14, flex: 1 }}>
              {c.body}
            </p>
            <div className="row" style={{ gap: 8, color: c.status.color, fontSize: 13, fontWeight: 600 }}>
              <span style={{ width: 18, height: 18, borderRadius: '50%', background: c.status.color, color: '#000', display:'grid', placeItems:'center', fontSize: 11, fontWeight: 800 }}>{c.status.sym}</span>
              {c.status.txt}
            </div>
          </div>
        ))}
      </div>

      {/* Analogy */}
      <div className="card card-elev" style={{ marginTop: 28, padding: 28 }}>
        <div className="eyebrow" style={{ color: 'var(--amber)', marginBottom: 18 }}>💡 ΑΝΑΛΟΓΙΑ — ΘΥΜΗΣΟΥ ΕΤΣΙ</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, fontSize: 18, alignItems: 'center', textAlign: 'center' }}>
          <div>
            <div style={{ fontSize: 56, marginBottom: 8 }}>🧑</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color:'var(--text-muted)', letterSpacing:'0.15em', marginBottom: 4 }}>ΗΧΟΣ</div>
            <div style={{ fontWeight: 600 }}>Επιβάτης</div>
          </div>
          <div>
            <div style={{ fontSize: 56, marginBottom: 8 }}>🚗</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color:'var(--text-muted)', letterSpacing:'0.15em', marginBottom: 4 }}>ΦΕΡΟΝ</div>
            <div style={{ fontWeight: 600 }}>Αυτοκίνητο</div>
          </div>
          <div>
            <div style={{ fontSize: 56, marginBottom: 8 }}>🛣️</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color:'var(--text-muted)', letterSpacing:'0.15em', marginBottom: 4 }}>ΕΚΠΟΜΠΗ</div>
            <div style={{ fontWeight: 600 }}>Ταξίδι</div>
          </div>
        </div>
        <div className="divider" style={{ margin: '24px 0 16px' }}></div>
        <div className="row" style={{ gap: 12, color: 'var(--text-secondary)', fontSize: 13 }}>
          <span style={{ color: 'var(--amber)', fontFamily: 'var(--font-mono)' }}>NOMOΣ ΦΥΣΙΚΗΣ</span>
          <span>Όσο ψηλότερη η συχνότητα, τόσο πιο εύκολα ακτινοβολείται η ενέργεια στον χώρο ως ηλεκτρομαγνητικό κύμα.</span>
        </div>
      </div>

      <LessonFooter onPrev={onPrev} onNext={onNext} onMenu={onMenu}
        prevLabel="Αρχή" nextLabel="Τα δύο σήματα" />
    </Page>
  );
};

// ============================================================
// SIGNALS (carrier + modulating) — small interactive
// ============================================================
const SignalsScreen = ({ onNext, onPrev, onMenu }) => {
  return (
    <Page eyebrow="L02 · ΘΕΩΡΙΑ" title="Φέρον σήμα και σήμα πληροφορίας"
      sub="Στη διαμόρφωση συμμετέχουν δύο σήματα. Το ένα μεταφέρει — το άλλο μεταφέρεται.">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        <div className="card">
          <div className="card-header">
            <div className="row" style={{gap:10}}>
              <span style={{fontSize:24}}>📡</span>
              <div className="card-title">Φέρον σήμα <span style={{color:'var(--text-muted)', fontWeight:400, fontSize:14}}>(Carrier)</span></div>
            </div>
            <span className="card-tag tag-cyan">ΑΥΤΟΚΙΝΗΤΟ 🚗</span>
          </div>
          <Scope label="MHz · σταθερό πλάτος" color="var(--cyan)" height={120}>
            <Wave fn={carrierFn(40)} color="var(--cyan)" height={120} />
          </Scope>
          <ul style={{ listStyle: 'none', marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10, color: 'var(--text-secondary)', fontSize: 14, lineHeight: 1.5 }}>
            <li>• Ψηλή συχνότητα — εκατομμύρια Hz (MHz)</li>
            <li>• Σταθερό πλάτος και συχνότητα</li>
            <li>• Εκπέμπεται εύκολα από μικρές κεραίες</li>
            <li>• Παράγεται από τον <b style={{color:'var(--cyan)'}}>Ταλαντωτή</b></li>
          </ul>
        </div>

        <div className="card">
          <div className="card-header">
            <div className="row" style={{gap:10}}>
              <span style={{fontSize:24}}>🎵</span>
              <div className="card-title">Σήμα πληροφορίας <span style={{color:'var(--text-muted)', fontWeight:400, fontSize:14}}>(Modulating)</span></div>
            </div>
            <span className="card-tag tag-lime">ΕΠΙΒΑΤΗΣ 🧑</span>
          </div>
          <Scope label="Hz–kHz · μεταβαλλόμενο πλάτος" color="var(--lime)" height={120}>
            <Wave fn={audioFn} color="var(--lime)" height={120} />
          </Scope>
          <ul style={{ listStyle: 'none', marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10, color: 'var(--text-secondary)', fontSize: 14, lineHeight: 1.5 }}>
            <li>• Χαμηλή συχνότητα — Hz έως kHz</li>
            <li>• Φωνή: 300 Hz – 3,4 kHz | Μουσική: 20 Hz – 15 kHz</li>
            <li>• Περιέχει την πληροφορία (ήχος / μουσική)</li>
            <li>• Παράγεται από το <b style={{color:'var(--lime)'}}>Μικρόφωνο</b></li>
          </ul>
        </div>
      </div>

      <div className="card card-elev" style={{marginTop:24, padding:28, textAlign:'center'}}>
        <div className="row center" style={{gap: 24, fontSize: 18, flexWrap:'wrap'}}>
          <span><span style={{fontSize:24}}>🎤</span> Ήχος</span>
          <span style={{color:'var(--text-muted)'}}>+</span>
          <span><span style={{fontSize:24}}>📡</span> Φέρον</span>
          <span style={{color:'var(--cyan)', fontFamily:'var(--font-mono)'}}>→ ΔΙΑΜΟΡΦΩΣΗ →</span>
          <span><span style={{fontSize:24}}>📻</span> Σήμα ΑΜ</span>
          <span style={{color:'var(--text-muted)'}}>→</span>
          <span><span style={{fontSize:24}}>🔈</span> Ηχεία</span>
        </div>
      </div>

      <LessonFooter onPrev={onPrev} onNext={onNext} onMenu={onMenu}
        prevLabel="Γιατί διαμόρφωση" nextLabel="Διαμόρφωση AM" />
    </Page>
  );
};

Object.assign(window, { StartScreen, MainMenu, WhyModulation, SignalsScreen, LESSONS });