/* global React, Page, LessonFooter, Wave, Scope, audioFn, amRawFn, amEnvelope, fmFn */
const { useState: _u5, useEffect: _e5, useRef: _r5 } = React;

// ============================================================
// 10. FM INTRO — animated AM vs FM
// ============================================================
const FMIntroScreen = ({ onNext, onPrev, onMenu }) => {
  const [phase, setPhase] = _u5(0);
  const rafRef = _r5(null);
  const [playing, setPlaying] = _u5(true);

  _e5(() => {
    if (!playing) return;
    let last = performance.now();
    const tick = (now) => {
      const dt = (now - last) / 1000; last = now;
      setPhase(p => (p + dt * 0.4) % 1);
      rafRef.current = requestAnimationFrame(tick);
    };
    rafRef.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(rafRef.current);
  }, [playing]);

  const offset = phase;
  const audioOff = (t) => audioFn((t + offset) % 1);
  const amOff = (t) => amRawFn(0.7, 28, 2)((t + offset) % 1);
  const fmOff = (t) => fmFn(8, 22, 2)((t + offset) % 1);

  return (
    <Page eyebrow="L10 · ΕΡΓΑΣΤΗΡΙΟ" title="Εισαγωγή στο FM"
      sub="Στο AM το πλάτος του φέροντος αλλάζει — η συχνότητα μένει σταθερή. Στο FM γίνεται το αντίθετο: η συχνότητα του φέροντος αλλάζει — το πλάτος μένει σταθερό.">

      <div className="row between" style={{marginBottom:16}}>
        <div className="row" style={{gap:10}}>
          <span className="card-tag tag-lime">CH1 · ΣΗΜΑ ΠΛΗΡΟΦΟΡΙΑΣ</span>
        </div>
        <button className="btn btn-ghost" onClick={()=>setPlaying(p=>!p)}>
          {playing ? '⏸ Pause' : '▶ Play'}
        </button>
      </div>

      <Scope label="" color="var(--lime)" height={90}>
        <Wave fn={audioOff} color="var(--lime)" height={90}/>
      </Scope>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, marginTop:24}}>
        <div className="card">
          <div className="card-header">
            <div className="card-title" style={{color:'var(--cyan)'}}>📡 AM — Amplitude Modulation</div>
            <span className="card-tag tag-cyan">ΠΛΑΤΟΣ</span>
          </div>
          <Scope label="" color="var(--cyan)" height={140}>
            <Wave fn={amOff} color="var(--cyan)" height={140} strokeWidth={1.5}/>
            <div style={{position:'absolute', inset:0, pointerEvents:'none', opacity:0.3}}>
              <Wave fn={(t)=> amEnvelope(0.7,2)((t + offset) % 1)*0.95} color="var(--cyan)" height={140} strokeWidth={1} glow={false}/>
            </div>
          </Scope>
          <ul style={{listStyle:'none', marginTop:16, display:'flex', flexDirection:'column', gap:8, fontSize:13, color:'var(--text-secondary)'}}>
            <li>• <b style={{color:'var(--cyan)'}}>Πλάτος</b> μεταβάλλεται με τον ήχο</li>
            <li>• Συχνότητα <b>σταθερή</b></li>
            <li>• Πιο ευαίσθητο στον θόρυβο</li>
          </ul>
        </div>

        <div className="card">
          <div className="card-header">
            <div className="card-title" style={{color:'var(--pink)'}}>📻 FM — Frequency Modulation</div>
            <span className="card-tag tag-pink">ΣΥΧΝΟΤΗΤΑ</span>
          </div>
          <Scope label="" color="var(--pink)" height={140}>
            <Wave fn={fmOff} color="var(--pink)" height={140} strokeWidth={1.5}/>
          </Scope>
          <ul style={{listStyle:'none', marginTop:16, display:'flex', flexDirection:'column', gap:8, fontSize:13, color:'var(--text-secondary)'}}>
            <li>• <b style={{color:'var(--pink)'}}>Συχνότητα</b> μεταβάλλεται με τον ήχο</li>
            <li>• Πλάτος <b>σταθερό</b></li>
            <li>• Πιο ανθεκτικό στον θόρυβο</li>
          </ul>
        </div>
      </div>

      <LessonFooter onPrev={onPrev} onNext={onNext} onMenu={onMenu}
        prevLabel="AGC" nextLabel="AM vs FM" />
    </Page>
  );
};

// ============================================================
// 11. AM vs FM COMPARISON
// ============================================================
const COMPARE = [
  { attr:'Τι αλλάζει', am:'Πλάτος (Amplitude)', fm:'Συχνότητα (Frequency)' },
  { attr:'Επίδραση θορύβου', am:'Περισσότερο επηρεαζόμενο', fm:'Λιγότερο επηρεαζόμενο' },
  { attr:'Ποιότητα ήχου', am:'Μέτρια', fm:'Καλύτερη' },
  { attr:'Εύρος ζώνης', am:'Μικρότερο (~9 kHz)', fm:'Μεγαλύτερο (~200 kHz)' },
  { attr:'Πολυπλοκότητα δέκτη', am:'Πιο απλός', fm:'Πιο σύνθετος' },
  { attr:'Ζώνη συχνοτήτων', am:'535 – 1605 kHz', fm:'88 – 108 MHz' },
  { attr:'Εμβέλεια', am:'Μεγάλη (ανακλάσεις)', fm:'Μικρότερη (line-of-sight)' },
];

const CompareScreen = ({ onNext, onPrev, onMenu }) => {
  return (
    <Page eyebrow="L11 · ΣΥΓΚΡΙΣΗ" title="AM vs FM"
      sub="Δύο διαφορετικές προσεγγίσεις διαμόρφωσης — με διαφορετικά τρωτά σημεία και πλεονεκτήματα.">

      <div className="card" style={{padding:0, overflow:'hidden'}}>
        <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr 1fr', borderBottom:'1px solid var(--border-soft)'}}>
          <div style={{padding:'18px 20px', fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-muted)', letterSpacing:'0.18em'}}>ΧΑΡΑΚΤΗΡΙΣΤΙΚΟ</div>
          <div style={{padding:'18px 20px', borderLeft:'1px solid var(--border-subtle)'}}>
            <div className="row" style={{gap:10}}>
              <div style={{width:32, height:32, borderRadius:8, background:'rgba(34,211,238,0.12)', display:'grid', placeItems:'center', color:'var(--cyan)'}}>📡</div>
              <div>
                <div style={{fontWeight:700, fontSize:16, color:'var(--cyan)'}}>AM</div>
                <div className="mono" style={{fontSize:10, color:'var(--text-muted)', letterSpacing:'0.1em'}}>AMPLITUDE MOD.</div>
              </div>
            </div>
          </div>
          <div style={{padding:'18px 20px', borderLeft:'1px solid var(--border-subtle)'}}>
            <div className="row" style={{gap:10}}>
              <div style={{width:32, height:32, borderRadius:8, background:'rgba(244,114,182,0.12)', display:'grid', placeItems:'center', color:'var(--pink)'}}>📻</div>
              <div>
                <div style={{fontWeight:700, fontSize:16, color:'var(--pink)'}}>FM</div>
                <div className="mono" style={{fontSize:10, color:'var(--text-muted)', letterSpacing:'0.1em'}}>FREQUENCY MOD.</div>
              </div>
            </div>
          </div>
        </div>
        {COMPARE.map((row,i) => (
          <div key={i} style={{display:'grid', gridTemplateColumns:'1.2fr 1fr 1fr',
            borderBottom: i < COMPARE.length-1 ? '1px solid var(--border-subtle)' : 'none',
            background: i % 2 ? 'rgba(255,255,255,0.01)' : 'transparent'}}>
            <div style={{padding:'16px 20px', fontSize:14, color:'var(--text-secondary)', fontWeight:500}}>{row.attr}</div>
            <div style={{padding:'16px 20px', borderLeft:'1px solid var(--border-subtle)', fontSize:14}}>{row.am}</div>
            <div style={{padding:'16px 20px', borderLeft:'1px solid var(--border-subtle)', fontSize:14}}>{row.fm}</div>
          </div>
        ))}
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, marginTop:24}}>
        <div className="card" style={{borderColor:'rgba(34,211,238,0.3)'}}>
          <div className="card-title" style={{color:'var(--cyan)', marginBottom:12}}>📡 Όταν επιλέγεις AM</div>
          <div style={{fontSize:13, color:'var(--text-secondary)', lineHeight:1.6}}>Μεγάλες αποστάσεις, ομιλία, ειδησεογραφικοί σταθμοί, απλούστερος εξοπλισμός. Δέχεται περισσότερο θόρυβο αλλά «φτάνει μακρύτερα» χάρη στις ανακλάσεις στην ιονόσφαιρα.</div>
        </div>
        <div className="card" style={{borderColor:'rgba(244,114,182,0.3)'}}>
          <div className="card-title" style={{color:'var(--pink)', marginBottom:12}}>📻 Όταν επιλέγεις FM</div>
          <div style={{fontSize:13, color:'var(--text-secondary)', lineHeight:1.6}}>Μουσική υψηλής πιστότητας, στερεοφωνία, αστικά περιβάλλοντα. Πιο πιστή απόδοση ήχου, ανθεκτικό στον θόρυβο, αλλά απαιτεί μεγαλύτερο εύρος ζώνης.</div>
        </div>
      </div>

      <LessonFooter onPrev={onPrev} onNext={onNext} onMenu={onMenu}
        prevLabel="FM Intro" nextLabel="Δοκίμασε το Quiz" />
    </Page>
  );
};

Object.assign(window, { FMIntroScreen, CompareScreen });