// app-screens.jsx — Civify interactive demo app (Swedish)
// Renders inside an IOSDevice. Exports: CivifyApp
(function () {
  const { useState, useRef, useEffect } = React;
  const D = window.CIVIFY_APP;
  const Icon = window.Icon;

  // ── inject scoped styles once ───────────────────────────────
  if (!document.getElementById('cf-app-styles')) {
    const s = document.createElement('style');
    s.id = 'cf-app-styles';
    s.textContent = `
    .cf-app{--o:#F2570A;--gold:#F0A91E;--ink:#221A13;--soft:#8C7C6D;--bg:#FFF9F3;--card:#fff;--line:rgba(34,26,19,.08);
      position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);
      font-family:'Manrope',system-ui,sans-serif;color:var(--ink);overflow:hidden;-webkit-font-smoothing:antialiased;}
    .cf-app *{box-sizing:border-box;}
    .cf-head{padding:60px 20px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;}
    .cf-head h1{font-family:'Sora',sans-serif;font-size:23px;font-weight:700;margin:0;letter-spacing:-.01em;}
    .cf-head .sub{font-size:13px;color:var(--soft);margin-top:2px;font-weight:500;}
    .cf-chips{display:flex;gap:8px;flex-shrink:0;}
    .cf-chip{display:flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--line);
      border-radius:999px;padding:7px 11px;font-weight:800;font-size:14px;box-shadow:0 2px 8px -4px rgba(120,60,10,.2);}
    .cf-chip.flame{color:var(--o);} .cf-chip.pts{color:var(--gold);}
    .cf-main{flex:1;overflow-y:auto;padding:6px 20px 96px;}
    .cf-main::-webkit-scrollbar{display:none;}
    .cf-sec{font-family:'Sora',sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
      color:var(--soft);margin:22px 2px 12px;}
    /* continue card */
    .cf-cont{position:relative;overflow:hidden;border-radius:24px;padding:20px;color:#fff;cursor:pointer;
      background:linear-gradient(135deg,#FF8A1E,#F2570A 60%,#E04708);box-shadow:0 18px 36px -16px rgba(226,86,10,.7);}
    .cf-cont .lbl{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.85;}
    .cf-cont h3{font-family:'Sora',sans-serif;font-size:20px;font-weight:700;margin:8px 0 2px;}
    .cf-cont p{margin:0;font-size:13.5px;opacity:.9;font-weight:500;}
    .cf-cont .go{margin-top:16px;display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--o);
      font-family:'Sora',sans-serif;font-weight:700;font-size:14px;padding:10px 16px;border-radius:999px;}
    .cf-cont .stars{position:absolute;right:-26px;top:-26px;opacity:.22;}
    /* course card */
    .cf-cc{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
      border-radius:20px;padding:14px;margin-bottom:12px;cursor:pointer;transition:transform .12s,box-shadow .12s;}
    .cf-cc:active{transform:scale(.985);}
    .cf-cc:hover{box-shadow:0 12px 26px -16px rgba(120,60,10,.35);}
    .cf-ic{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .cf-cc .ti{font-family:'Sora',sans-serif;font-weight:700;font-size:15.5px;letter-spacing:-.01em;}
    .cf-cc .su{font-size:12.5px;color:var(--soft);font-weight:500;margin-top:1px;}
    .cf-bar{height:7px;border-radius:99px;background:#efe6dc;overflow:hidden;margin-top:9px;}
    .cf-bar > i{display:block;height:100%;border-radius:99px;}
    .cf-meta{font-size:11.5px;color:var(--soft);font-weight:700;margin-top:6px;}
    /* explore grid */
    .cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
    .cf-tile{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:15px;cursor:pointer;
      transition:transform .12s;}
    .cf-tile:active{transform:scale(.98);}
    .cf-tile .ti{font-family:'Sora',sans-serif;font-weight:700;font-size:14.5px;margin-top:12px;line-height:1.2;}
    .cf-tile .su{font-size:11.5px;color:var(--soft);margin-top:4px;font-weight:600;}
    /* tab bar */
    .cf-tabs{position:absolute;left:0;right:0;bottom:0;height:84px;padding:8px 24px 26px;display:flex;
      background:rgba(255,249,243,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
      border-top:1px solid var(--line);z-index:30;}
    .cf-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--soft);
      font-size:11px;font-weight:700;cursor:pointer;background:none;border:none;font-family:inherit;}
    .cf-tab.on{color:var(--o);}
    /* lesson */
    .cf-lesson{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;z-index:40;}
    .cf-ltop{padding:58px 18px 6px;display:flex;align-items:center;gap:14px;flex-shrink:0;}
    .cf-x{width:34px;height:34px;border-radius:99px;border:none;background:#f0e7dd;color:var(--soft);
      display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
    .cf-pline{flex:1;height:11px;border-radius:99px;background:#efe6dc;overflow:hidden;}
    .cf-pline > i{display:block;height:100%;background:linear-gradient(90deg,#FF9A2E,#F2570A);border-radius:99px;
      transition:width .4s cubic-bezier(.4,0,.2,1);}
    .cf-lbody{flex:1;overflow-y:auto;padding:20px;}
    .cf-lbody::-webkit-scrollbar{display:none;}
    .cf-prompt{font-family:'Sora',sans-serif;font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-.015em;margin:6px 0 20px;}
    .cf-kick{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--o);margin-bottom:4px;}
    .cf-opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--card);
      border:2px solid var(--line);border-radius:17px;padding:15px 16px;margin-bottom:11px;cursor:pointer;
      font-family:'Manrope',sans-serif;font-weight:600;font-size:15.5px;color:var(--ink);transition:.14s;}
    .cf-opt:hover{border-color:#e8c4a4;}
    .cf-opt .dot{width:25px;height:25px;border-radius:8px;border:2px solid #e0d4c7;flex-shrink:0;transition:.14s;}
    .cf-opt.sel{border-color:var(--o);background:#FFF3EA;}
    .cf-opt.sel .dot{border-color:var(--o);background:var(--o);box-shadow:inset 0 0 0 4px #fff;}
    .cf-opt.right{border-color:#2FA36B;background:#EAF7F0;}
    .cf-opt.right .dot{border-color:#2FA36B;background:#2FA36B;box-shadow:inset 0 0 0 4px #fff;}
    .cf-opt.wrong{border-color:#E25555;background:#FCEBEB;}
    .cf-opt.wrong .dot{border-color:#E25555;background:#E25555;box-shadow:inset 0 0 0 4px #fff;}
    /* fill */
    .cf-sent{font-size:18px;line-height:2.1;font-weight:600;}
    .cf-blank{display:inline-flex;align-items:center;justify-content:center;min-width:118px;height:38px;
      vertical-align:middle;border-radius:11px;border:2px dashed #d8c8b8;background:#fff;margin:0 3px;
      font-weight:800;color:var(--o);cursor:pointer;padding:0 8px;transition:.12s;}
    .cf-blank.over{border-color:var(--o);background:#FFF3EA;}
    .cf-blank.filled{border-style:solid;border-color:var(--o);background:#FFF3EA;}
    .cf-tray{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
    .cf-word{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:11px 15px;
      font-weight:800;font-size:15px;cursor:grab;user-select:none;touch-action:none;box-shadow:0 3px 10px -6px rgba(120,60,10,.4);transition:transform .1s;}
    .cf-word:active{cursor:grabbing;}
    .cf-word.used{opacity:.32;pointer-events:none;}
    .cf-word.flying{position:fixed;z-index:999;pointer-events:none;box-shadow:0 16px 30px -10px rgba(120,60,10,.5);}
    /* TF */
    .cf-tf{display:flex;gap:12px;}
    .cf-tf button{flex:1;border-radius:17px;border:2px solid var(--line);background:var(--card);padding:22px 0;
      font-family:'Sora',sans-serif;font-weight:700;font-size:17px;cursor:pointer;color:var(--ink);transition:.14s;}
    .cf-tf button.sel{border-color:var(--o);background:#FFF3EA;color:var(--o);}
    .cf-tf button.right{border-color:#2FA36B;background:#EAF7F0;color:#2FA36B;}
    .cf-tf button.wrong{border-color:#E25555;background:#FCEBEB;color:#E25555;}
    /* footer / feedback */
    .cf-foot{flex-shrink:0;padding:14px 18px 26px;border-top:1px solid var(--line);background:var(--bg);}
    .cf-fb{border-radius:14px;padding:12px 14px;margin-bottom:12px;font-weight:600;font-size:13.5px;line-height:1.4;}
    .cf-fb.ok{background:#EAF7F0;color:#1E7D4E;} .cf-fb.no{background:#FCEBEB;color:#C0392B;}
    .cf-fb b{font-family:'Sora',sans-serif;display:block;font-size:14.5px;margin-bottom:2px;}
    .cf-btn{width:100%;border:none;border-radius:15px;padding:16px;font-family:'Sora',sans-serif;font-weight:700;
      font-size:16px;cursor:pointer;background:var(--o);color:#fff;box-shadow:0 12px 24px -10px rgba(226,86,10,.7);transition:.14s;}
    .cf-btn:disabled{background:#e7dccf;color:#b3a392;box-shadow:none;cursor:not-allowed;}
    .cf-btn.ok{background:#2FA36B;box-shadow:0 12px 24px -10px rgba(47,163,107,.6);}
    /* done */
    .cf-done{position:absolute;inset:0;z-index:50;background:linear-gradient(160deg,#FF8A1E,#F2570A 70%);
      display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:32px;}
    .cf-done .tw{width:96px;height:96px;border-radius:30px;background:rgba(255,255,255,.16);
      display:flex;align-items:center;justify-content:center;margin-bottom:24px;animation:pop .5s cubic-bezier(.2,1.4,.4,1);}
    @keyframes pop{from{transform:scale(.4);opacity:0;}}
    .cf-done h2{font-family:'Sora',sans-serif;font-size:30px;font-weight:800;margin:0 0 8px;}
    .cf-done p{margin:0 0 26px;opacity:.9;font-weight:500;}
    .cf-rew{display:flex;gap:12px;margin-bottom:30px;}
    .cf-rew div{background:rgba(255,255,255,.16);border-radius:16px;padding:14px 20px;}
    .cf-rew b{font-family:'Sora',sans-serif;display:block;font-size:24px;}
    .cf-rew span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85;}
    .cf-done .cf-btn{background:#fff;color:var(--o);max-width:280px;}
    /* profile */
    .cf-prof-top{display:flex;align-items:center;gap:15px;padding:4px 0 4px;}
    .cf-av{width:64px;height:64px;border-radius:22px;background:linear-gradient(135deg,#FF8A1E,#F2570A);color:#fff;
      display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;font-size:26px;flex-shrink:0;}
    .cf-statrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:18px;}
    .cf-stat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 10px;text-align:center;}
    .cf-stat b{font-family:'Sora',sans-serif;font-size:21px;display:block;}
    .cf-stat span{font-size:11px;color:var(--soft);font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
    .cf-week{display:flex;justify-content:space-between;background:var(--card);border:1px solid var(--line);
      border-radius:20px;padding:16px 14px;}
    .cf-day{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;font-weight:800;color:var(--soft);}
    .cf-dot{width:30px;height:30px;border-radius:99px;display:flex;align-items:center;justify-content:center;}
    .cf-dot.on{background:linear-gradient(135deg,#FF8A1E,#F2570A);color:#fff;}
    .cf-dot.off{background:#efe6dc;}
    .cf-badges{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
    .cf-badge{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 8px;text-align:center;}
    .cf-badge .bi{width:48px;height:48px;border-radius:99px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;}
    .cf-badge .bi.on{background:#FFF1E2;} .cf-badge .bi.off{background:#f1ece6;}
    .cf-badge span{font-size:11px;font-weight:700;line-height:1.2;display:block;}
    .cf-badge.locked{opacity:.5;}
    /* course detail */
    .cf-cd{position:absolute;inset:0;background:var(--bg);z-index:35;display:flex;flex-direction:column;}
    .cf-cdhead{padding:58px 20px 18px;color:#fff;flex-shrink:0;}
    .cf-back{width:34px;height:34px;border-radius:99px;border:none;background:rgba(255,255,255,.22);color:#fff;
      display:flex;align-items:center;justify-content:center;cursor:pointer;margin-bottom:14px;}
    .cf-cdhead h2{font-family:'Sora',sans-serif;font-size:26px;font-weight:800;margin:0;}
    .cf-cdhead p{margin:4px 0 0;opacity:.9;font-weight:500;font-size:14px;}
    .cf-path{flex:1;overflow-y:auto;padding:20px 20px 40px;}
    .cf-path::-webkit-scrollbar{display:none;}
    .cf-unit{display:flex;align-items:center;gap:14px;padding:12px 0;}
    .cf-node{width:44px;height:44px;border-radius:99px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
      font-family:'Sora',sans-serif;font-weight:800;color:#fff;}
    .cf-unit .ut{font-family:'Sora',sans-serif;font-weight:700;font-size:15px;}
    .cf-unit .us{font-size:12px;color:var(--soft);font-weight:600;}
    .cf-startbtn{margin-left:auto;background:var(--o);color:#fff;border:none;border-radius:99px;padding:9px 16px;
      font-family:'Sora',sans-serif;font-weight:700;font-size:13px;cursor:pointer;}
    `;
    document.head.appendChild(s);
  }

  // ── small helpers ───────────────────────────────────────────
  function CourseIcon({ c, size = 26 }) {
    return (
      <span className="cf-ic" style={{ background: c.tint }}>
        <Icon name={c.icon} size={size} color={c.color} stroke={2.1} />
      </span>
    );
  }

  // ── HOME ────────────────────────────────────────────────────
  function Home({ onOpenCourse, onStartLesson }) {
    return (
      <>
        <div className="cf-head">
          <div>
            <h1>Hej, {D.user.name}</h1>
            <div className="sub">Dags att lära dig något nytt</div>
          </div>
          <div className="cf-chips">
            <span className="cf-chip flame"><Icon name="flame" size={16} color="#F2570A" /> {D.user.streak}</span>
            <span className="cf-chip pts"><Icon name="bolt" size={15} color="#F0A91E" /> {D.user.points}</span>
          </div>
        </div>
        <div className="cf-main">
          <div className="cf-cont" onClick={onStartLesson}>
            <window.CivifyMark size={120} style={{ position: 'absolute', right: -26, top: -26, opacity: .2 }} />
            <div className="lbl">Fortsätt där du slutade</div>
            <h3>EU:s institutioner</h3>
            <p>Lektion 3 · Vem gör vad?</p>
            <span className="go">Fortsätt <Icon name="arrowRight" size={17} color="#F2570A" /></span>
          </div>
          <div className="cf-sec">Dina kurser</div>
          {D.courses.map((c) => (
            <div key={c.id} className="cf-cc" onClick={() => onOpenCourse(c)}>
              <CourseIcon c={c} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="ti">{c.title}</div>
                <div className="su">{c.subtitle}</div>
                <div className="cf-bar"><i style={{ width: `${(c.lessonsDone / c.lessonsTotal) * 100}%`, background: c.color }} /></div>
              </div>
            </div>
          ))}
        </div>
      </>
    );
  }

  // ── EXPLORE ─────────────────────────────────────────────────
  function Explore({ onOpenCourse }) {
    return (
      <>
        <div className="cf-head"><div><h1>Utforska</h1><div className="sub">Hela kurskatalogen</div></div></div>
        <div className="cf-main">
          <div className="cf-grid">
            {D.courses.map((c) => (
              <div key={c.id} className="cf-tile" onClick={() => onOpenCourse(c)}>
                <CourseIcon c={c} />
                <div className="ti">{c.title}</div>
                <div className="su">{c.lessonsTotal} lektioner</div>
              </div>
            ))}
          </div>
          <div className="cf-sec">Kommer snart</div>
          <div className="cf-cc" style={{ opacity: .6 }}>
            <span className="cf-ic" style={{ background: '#eee6dd' }}><Icon name="globe" size={26} color="#8C7C6D" /></span>
            <div style={{ flex: 1 }}><div className="ti">Europas historia</div><div className="su">Snart tillgänglig</div></div>
            <Icon name="lock" size={18} color="#bcae9f" />
          </div>
        </div>
      </>
    );
  }

  // ── PROFILE ─────────────────────────────────────────────────
  function Profile() {
    return (
      <>
        <div className="cf-head"><div><h1>Profil</h1></div>
          <div className="cf-chips"><span className="cf-chip flame"><Icon name="flame" size={16} color="#F2570A" /> {D.user.streak}</span></div>
        </div>
        <div className="cf-main">
          <div className="cf-prof-top">
            <div className="cf-av">{D.user.name[0]}</div>
            <div>
              <div style={{ fontFamily: 'Sora', fontWeight: 800, fontSize: 20 }}>{D.user.name}</div>
              <div style={{ color: '#8C7C6D', fontWeight: 700, fontSize: 13 }}>Nivå {D.user.level} · {D.user.levelName}</div>
            </div>
          </div>
          <div className="cf-statrow">
            <div className="cf-stat"><b style={{ color: '#F2570A' }}>{D.user.streak}</b><span>Streak</span></div>
            <div className="cf-stat"><b style={{ color: '#F0A91E' }}>{D.user.points}</b><span>Poäng</span></div>
            <div className="cf-stat"><b>{D.user.level}</b><span>Nivå</span></div>
          </div>
          <div className="cf-sec">Din vecka</div>
          <div className="cf-week">
            {D.week.map((d, i) => (
              <div key={i} className="cf-day">
                <span className={'cf-dot ' + (D.weekDone[i] ? 'on' : 'off')}>
                  {D.weekDone[i] && <Icon name="flame" size={16} color="#fff" />}
                </span>{d}
              </div>
            ))}
          </div>
          <div className="cf-sec">Märken</div>
          <div className="cf-badges">
            {D.badges.map((b) => (
              <div key={b.id} className={'cf-badge' + (b.earned ? '' : ' locked')}>
                <span className={'bi ' + (b.earned ? 'on' : 'off')}>
                  <Icon name={b.earned ? b.icon : 'lock'} size={22} color={b.earned ? '#F2570A' : '#a89a8c'} />
                </span>
                <span>{b.title}</span>
              </div>
            ))}
          </div>
        </div>
      </>
    );
  }

  window.CivifyHome = Home;
  window.CivifyExplore = Explore;
  window.CivifyProfile = Profile;
  window.CivifyCourseIcon = CourseIcon;
})();