// Phone mockup. Accepts a `screen` prop: "home" | "quiz" | "result" | "profile"
function PhoneMockup({ screen = "home", rotate = 0, parallax = 0 }) {
  // Cap so screen always remains readable — no 180° flips, content stays upright
  const r = Math.max(-12, Math.min(12, rotate));
  const p = Math.max(-6, Math.min(6, parallax));
  const tx = `perspective(1400px) rotateY(${r}deg) rotateX(${p * 0.3}deg)`;
  return (
    <div className="phone-frame" style={{ transform: tx, transition: "transform 300ms ease-out" }}>
      <div className="phone-notch"/>
      <div className="phone-screen">
        <div className="phone-status">
          <span>16:50</span>
          <span className="right">
            <svg width="16" height="11" viewBox="0 0 16 11"><path fill="currentColor" d="M8 0a11 11 0 0 1 8 3l-1 1a10 10 0 0 0-14 0L0 3A11 11 0 0 1 8 0zm0 4a7 7 0 0 1 5 2l-1 1a6 6 0 0 0-8 0L3 6a7 7 0 0 1 5-2zm0 4a3 3 0 0 1 2 1l-2 2-2-2a3 3 0 0 1 2-1z"/></svg>
            <svg width="22" height="11" viewBox="0 0 22 11"><rect x="0" y="1" width="19" height="9" rx="2" fill="none" stroke="currentColor" strokeWidth="1"/><rect x="2" y="3" width="15" height="5" rx="1" fill="currentColor"/><rect x="20" y="4" width="2" height="3" rx="1" fill="currentColor"/></svg>
          </span>
        </div>
        {screen === "home" && <PhoneHome/>}
        {screen === "quiz" && <PhoneQuiz/>}
        {screen === "result" && <PhoneResult/>}
        {screen === "profile" && <PhoneProfile/>}
      </div>
    </div>
  );
}

function PhoneHome() {
  return (
    <div style={{ padding: "8px 16px 20px" }}>
      {/* user row */}
      <div className="app-row" style={{ justifyContent: "space-between", marginTop: 8, marginBottom: 14 }}>
        <div className="app-row">
          <div className="avatar">Є</div>
          <div>
            <div style={{ fontWeight: 800, fontSize: 16, color: "#1E293B" }}>Євгеній</div>
            <div style={{ fontSize: 12, color: "#F97316", fontWeight: 700 }}>Археолог · Рівень 1</div>
          </div>
        </div>
        <div style={{ background: "#fff", border: "1px solid #EDE3D7", borderRadius: 14, padding: "6px 10px", textAlign: "center" }}>
          <div style={{ fontSize: 9, color: "#94A3B8", fontWeight: 700 }}>До НМТ</div>
          <div style={{ fontSize: 14, fontWeight: 800, color: "#1E293B" }}>38 дн.</div>
        </div>
      </div>

      {/* streak */}
      <div className="app-card" style={{ marginBottom: 10 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 10 }}>
          <div style={{ width: 38, height: 38, borderRadius: 12, background: "#FFEDD5", display: "grid", placeItems: "center", color: "#F97316" }}>
            <Icon name="flame" size={20}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 800, color: "#1E293B" }}>Щоденна серія</div>
            <div style={{ fontSize: 11, color: "#94A3B8", fontWeight: 600 }}>Сьогодні: 32 / 50 питань</div>
          </div>
          <div style={{ background: "#FFEDD5", borderRadius: 9999, padding: "4px 8px", fontSize: 11, color: "#C2410C", fontWeight: 800, display: "flex", alignItems: "center", gap: 4 }}>
            <Icon name="flame" size={11}/> 7
          </div>
        </div>
        <div className="streak-bar"><i style={{ width: "64%" }}/></div>
      </div>

      {/* stats */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 14 }}>
        <div className="app-card" style={{ padding: 10 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <div style={{ width: 26, height: 26, borderRadius: 8, background: "#DCFCE7", color: "#22C55E", display: "grid", placeItems: "center" }}>
              <Icon name="target" size={14}/>
            </div>
            <div>
              <div style={{ fontSize: 9, color: "#94A3B8", fontWeight: 700 }}>Успішність</div>
              <div style={{ fontSize: 13, fontWeight: 800, color: "#1E293B" }}>74%</div>
            </div>
          </div>
        </div>
        <div className="app-card" style={{ padding: 10 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <div style={{ width: 26, height: 26, borderRadius: 8, background: "#DBEAFE", color: "#3B82F6", display: "grid", placeItems: "center" }}>
              <Icon name="book" size={14}/>
            </div>
            <div>
              <div style={{ fontSize: 9, color: "#94A3B8", fontWeight: 700 }}>Тестів</div>
              <div style={{ fontSize: 13, fontWeight: 800, color: "#1E293B" }}>21</div>
            </div>
          </div>
        </div>
      </div>

      <div style={{ fontSize: 13, fontWeight: 800, color: "#1E293B", marginBottom: 8 }}>Режими тренування</div>

      <div style={{ background: "linear-gradient(135deg,#F97316,#EA580C)", borderRadius: 16, padding: 14, color: "#fff", marginBottom: 8, display: "flex", alignItems: "center", gap: 10 }}>
        <div style={{ width: 32, height: 32, borderRadius: 10, background: "rgba(255,255,255,0.18)", display: "grid", placeItems: "center" }}>
          <Icon name="trophy" size={16}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 800 }}>Іспит на Максимум</div>
          <div style={{ fontSize: 10, opacity: 0.9, fontWeight: 700, letterSpacing: "0.06em" }}>СИМУЛЯЦІЯ НМТ 2026</div>
        </div>
        <Icon name="arrow" size={14}/>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
        <div className="app-card" style={{ padding: 10 }}>
          <div style={{ width: 24, height: 24, borderRadius: 8, background: "#FFEDD5", color: "#F97316", display: "grid", placeItems: "center", marginBottom: 6 }}>
            <Icon name="rocket" size={13}/>
          </div>
          <div style={{ fontSize: 12, fontWeight: 800, color: "#1E293B" }}>Експрес-20</div>
          <div style={{ fontSize: 10, color: "#94A3B8", fontWeight: 600 }}>Швидкий мікс</div>
        </div>
        <div className="app-card" style={{ padding: 10 }}>
          <div style={{ width: 24, height: 24, borderRadius: 8, background: "#DCFCE7", color: "#22C55E", display: "grid", placeItems: "center", marginBottom: 6 }}>
            <Icon name="book" size={13}/>
          </div>
          <div style={{ fontSize: 12, fontWeight: 800, color: "#1E293B" }}>Тематичний</div>
          <div style={{ fontSize: 10, color: "#94A3B8", fontWeight: 600 }}>По темі</div>
        </div>
      </div>
    </div>
  );
}

function PhoneQuiz() {
  return (
    <div style={{ padding: "12px 18px 18px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <button style={{ width: 30, height: 30, borderRadius: 9999, background: "#fff", border: "1px solid #EDE3D7", display: "grid", placeItems: "center" }}>
          <Icon name="x" size={14}/>
        </button>
        <div className="streak-bar" style={{ flex: 1, background: "#E2E8F0" }}>
          <i style={{ width: "20%", background: "#3B82F6" }}/>
        </div>
        <span style={{ fontSize: 12, fontWeight: 700, color: "#94A3B8" }}>4/20</span>
      </div>
      <div className="tag" style={{ marginTop: 16, background: "#DBEAFE", color: "#1D4ED8" }}>ТЕСТ</div>
      <h3 style={{ fontSize: 16, fontWeight: 800, color: "#1E293B", lineHeight: 1.35, margin: "10px 0 14px" }}>
        Перемога українсько-татарських військ під Конотопом відбулася…
      </h3>
      {[
        ["А", "1648 р."],
        ["Б", "1649 р."],
        ["В", "1651 р.", true],
        ["Г", "1659 р."],
      ].map(([l, t, sel]) => (
        <div key={l} style={{
          display: "flex", alignItems: "center", gap: 10,
          padding: "10px 12px",
          border: `1.5px solid ${sel ? "#3B82F6" : "#EDE3D7"}`,
          background: sel ? "rgba(59,130,246,0.07)" : "#fff",
          borderRadius: 12, marginBottom: 7, fontSize: 13, fontWeight: 600,
          color: "#1E293B",
        }}>
          <div style={{
            width: 22, height: 22, borderRadius: 9999,
            background: sel ? "#3B82F6" : "#F1F5F9",
            color: sel ? "#fff" : "#64748B",
            display: "grid", placeItems: "center", fontSize: 11, fontWeight: 800,
          }}>{l}</div>
          {t}
        </div>
      ))}
      <button style={{ width: "100%", marginTop: 8, background: "#3B82F6", color: "#fff", padding: "12px", borderRadius: 14, fontSize: 14, fontWeight: 800 }}>
        Відповісти
      </button>
    </div>
  );
}

function PhoneResult() {
  return (
    <div style={{ padding: "16px 18px" }}>
      <div className="app-card" style={{ textAlign: "center", padding: 18 }}>
        <div style={{ fontSize: 13, fontWeight: 800, color: "#475569" }}>Сесію завершено!</div>
        <div style={{ marginTop: 10, display: "flex", alignItems: "baseline", justifyContent: "center", gap: 6 }}>
          <span style={{ fontSize: 56, fontWeight: 900, color: "#F97316", lineHeight: 1 }}>16</span>
          <span style={{ fontSize: 28, fontWeight: 700, color: "#CBD5E1" }}>/ 20</span>
        </div>
        <div style={{ color: "#F97316", fontWeight: 800 }}>80%</div>
        <div style={{ color: "#F97316", fontWeight: 800, fontSize: 13 }}>+16 XP</div>
      </div>
      <div style={{ background: "#FFEDD5", borderRadius: 14, padding: 12, marginTop: 10, display: "flex", gap: 10, alignItems: "center" }}>
        <Icon name="rocket" size={20} color="#F97316"/>
        <span style={{ fontSize: 12, fontWeight: 700, color: "#7C2D12" }}>Чудово! Ти стаєш сильнішим з кожним днем.</span>
      </div>
      <div className="app-card" style={{ marginTop: 10 }}>
        <div style={{ fontSize: 13, fontWeight: 800, color: "#1E293B", marginBottom: 10 }}>Результати відповідей</div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, marginBottom: 6 }}>
          <Icon name="check" size={14} color="#22C55E"/>
          <span style={{ color: "#475569", fontWeight: 700 }}>Правильно</span>
          <div className="streak-bar" style={{ flex: 1 }}><i style={{ background: "#22C55E", width: "80%" }}/></div>
          <b style={{ color: "#22C55E" }}>16</b>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12 }}>
          <Icon name="x" size={14} color="#EF4444"/>
          <span style={{ color: "#475569", fontWeight: 700 }}>Неправильно</span>
          <div className="streak-bar" style={{ flex: 1 }}><i style={{ background: "#EF4444", width: "20%" }}/></div>
          <b style={{ color: "#EF4444" }}>4</b>
        </div>
      </div>
      <button style={{ width: "100%", marginTop: 14, background: "#F97316", color: "#fff", padding: "12px", borderRadius: 14, fontSize: 14, fontWeight: 800 }}>
        Продовжити
      </button>
    </div>
  );
}

function PhoneProfile() {
  return (
    <div style={{ padding: "12px 18px 18px" }}>
      <div style={{ textAlign: "center", fontWeight: 800, fontSize: 16, color: "#1E293B" }}>Профіль</div>
      <div className="app-card" style={{ textAlign: "center", marginTop: 12, padding: 18 }}>
        <div className="avatar" style={{ width: 70, height: 70, fontSize: 30, margin: "0 auto" }}>Є</div>
        <div style={{ fontWeight: 800, fontSize: 18, color: "#1E293B", marginTop: 10 }}>Євгеній</div>
      </div>
      <div className="app-card" style={{ marginTop: 10, background: "linear-gradient(135deg,#FACC15,#F97316)", color: "#fff", padding: 14 }}>
        <div style={{ fontSize: 13, fontWeight: 800 }}>⚡ Отримати повний доступ</div>
        <div style={{ fontSize: 11, opacity: 0.9, fontWeight: 700 }}>Відкрий усі теми та пояснення</div>
      </div>
      <div style={{ fontSize: 13, fontWeight: 800, color: "#1E293B", margin: "14px 0 8px" }}>Мій рівень та XP</div>
      <div className="app-card" style={{ padding: 14 }}>
        <div style={{ fontSize: 10, color: "#94A3B8", fontWeight: 700, letterSpacing: "0.06em" }}>РІВЕНЬ 1</div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <div style={{ fontSize: 18, fontWeight: 900, color: "#1E293B" }}>Археолог</div>
          <div style={{ fontSize: 13, fontWeight: 800, color: "#F97316" }}>120 XP</div>
        </div>
        <div className="streak-bar" style={{ marginTop: 10 }}><i style={{ width: "24%" }}/></div>
        <div style={{ fontSize: 10, color: "#94A3B8", fontWeight: 600, marginTop: 6 }}>Ще 380 XP до Рівня 2: Літописець</div>
      </div>
    </div>
  );
}

window.PhoneMockup = PhoneMockup;