// phones.jsx — phone-screen miniatures used inside the .phone .screen frames.
// Each one is a stylized but high-fidelity slice of the matching app screen.

const Lucide = window.lucide;
function LIcon({ name, size = 16, color, strokeWidth = 2 }) {
  // Render a Lucide icon as inline SVG by reading from the global object.
  const iconData = Lucide && Lucide[name.split('-').map((p, i) => i ? p[0].toUpperCase() + p.slice(1) : p).join('')];
  if (!iconData) return null;
  // Lucide icons via CDN expose createIcons rather than per-icon data;
  // simplest approach: just use html string with our own SVGs below.
  return null;
}

// --- inline SVG icon helpers (we don't depend on Lucide for the minis) ---
const SvgBolt = (p) => (
  <svg width={p.size||14} height={p.size||14} viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>
);
const SvgHex = (p) => (
  <svg width={p.size||14} height={p.size||14} viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 4 7v10l8 5 8-5V7L12 2z"/></svg>
);
const SvgSparkle = (p) => (
  <svg width={p.size||14} height={p.size||14} viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l2.2 5.8L20 11l-5.8 2.2L12 19l-2.2-5.8L4 11l5.8-2.2L12 3z"/></svg>
);
const SvgUndo = (p) => (
  <svg width={p.size||14} height={p.size||14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg>
);
const SvgGear = (p) => (
  <svg width={p.size||14} height={p.size||14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>
);
const SvgClock = (p) => (
  <svg width={p.size||14} height={p.size||14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 15 14"/></svg>
);
const SvgScroll = (p) => (
  <svg width={p.size||14} height={p.size||14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M22 17H4a2 2 0 0 0 0 4h13a2 2 0 0 0 2-2 1 1 0 0 1 1-1h2"/></svg>
);
const SvgCrown = (p) => (
  <svg width={p.size||14} height={p.size||14} viewBox="0 0 24 24" fill="currentColor"><path d="M2 19h20l-2-9-5 4-3-7-3 7-5-4-2 9z"/></svg>
);
const SvgShield = (p) => (
  <svg width={p.size||14} height={p.size||14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>
);
const SvgFilter = (p) => (
  <svg width={p.size||14} height={p.size||14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
);
const SvgWifi = () => (
  <svg width={12} height={9} viewBox="0 0 16 12" fill="currentColor"><path d="M8 11.5c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zM2 4.5c1.5-1.5 3.7-2.5 6-2.5s4.5 1 6 2.5l-1.5 1.5c-1.1-1.1-2.7-1.8-4.5-1.8S5.6 4.9 4.5 6L3 4.5z"/></svg>
);
const SvgBattery = () => (
  <svg width={20} height={9} viewBox="0 0 22 10" fill="none"><rect x="0.5" y="0.5" width="18" height="9" rx="2.5" stroke="white" opacity="0.85"/><rect x="2" y="2" width="15" height="6" rx="1.2" fill="white"/><rect x="20" y="3.5" width="1.5" height="3" rx="0.5" fill="white"/></svg>
);

function IOSBar() {
  return (
    <div className="ios-bar">
      <span>9:41</span>
      <div className="right"><SvgWifi/><SvgBattery/></div>
    </div>
  );
}

function MiniTabBar({ active }) {
  const tabs = [
    { id: 'play',     label: 'Score' },
    { id: 'matches',  label: 'Chronicles' },
    { id: 'champions',label: 'Legends' },
    { id: 'aethos',   label: 'Aethos' },
  ];
  return (
    <div className="tabbar">
      {tabs.map(t => (
        <div key={t.id} className={`t ${t.id === active ? 'active' : ''}`}>
          <div className="dia"></div>
          <span>{t.label}</span>
        </div>
      ))}
    </div>
  );
}

// ───────── SCORE MINI ─────────
function MiniScore() {
  return (
    <div className="mini mini-score">
      <IOSBar/>
      <div className="top" style={{ backgroundImage: 'url(assets/bg-noxus.png)' }}>
        <div className="num">5</div>
        <div className="row">
          <div className="chip" style={{ background: '#B043E0' }}><SvgSparkle size={14}/></div>
          <div className="chip" style={{ background: '#2196F3' }}><SvgHex size={14}/></div>
          <div className="chip" style={{ background: '#F26B2C' }}><SvgBolt size={14}/></div>
        </div>
      </div>

      <div className="center-bar">
        <div className="icon-btn"><SvgUndo size={12}/></div>
        <div className="center-pill">
          <SvgClock size={9} />
          <div>
            <div className="t">2:41</div>
            <div className="r">· ROUND 3 ·</div>
          </div>
        </div>
        <div className="icon-btn"><SvgGear size={12}/></div>
      </div>

      <div className="bot" style={{ backgroundImage: 'url(assets/bg-shadowisles.png)' }}>
        <div className="num">7</div>
        <div className="row">
          <div className="chip" style={{ background: '#F26B2C' }}><SvgBolt size={14}/></div>
          <div className="chip" style={{ background: '#2196F3' }}><SvgHex size={14}/></div>
          <div className="chip" style={{ background: '#B043E0' }}><SvgSparkle size={14}/></div>
        </div>
      </div>

      <MiniTabBar active="play"/>
    </div>
  );
}

// ───────── CHRONICLES MINI ─────────
function MiniChronicles() {
  const matches = [
    { leader: 'leader-ahri.png',   title: 'AHRI · NOXUS',     meta: '5 ROUNDS · 12:08',  score: '8 — 5', win: true },
    { leader: 'leader-jinx.png',   title: 'JINX · DEMACIA',   meta: '7 ROUNDS · 18:42', score: '7 — 9', win: false },
    { leader: 'leader-lux.jpeg',   title: 'LUX · IXTAL',      meta: '4 ROUNDS · 09:21', score: '8 — 3', win: true },
    { leader: 'leader-garen.png',  title: 'GAREN · DEMACIA',  meta: '6 ROUNDS · 14:55', score: '8 — 6', win: true },
  ];
  return (
    <div className="mini mini-chron">
      <IOSBar/>
      <div className="head">
        <h4>Chronicles</h4>
        <div className="pill">42 RECORDED</div>
      </div>

      <div className="stat-card">
        <div className="lab">SEASON WIN RATE</div>
        <div className="big">68%</div>
        <svg className="trend" viewBox="0 0 100 36" fill="none">
          <path d="M0 28 L12 24 L22 26 L34 18 L46 20 L58 14 L70 12 L82 8 L100 4"
                stroke="#B7853F" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M0 28 L12 24 L22 26 L34 18 L46 20 L58 14 L70 12 L82 8 L100 4 L100 36 L0 36 Z"
                fill="url(#g1)" opacity="0.4"/>
          <defs>
            <linearGradient id="g1" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0" stopColor="#FAB940" stopOpacity="0.5"/>
              <stop offset="1" stopColor="#FAB940" stopOpacity="0"/>
            </linearGradient>
          </defs>
        </svg>
      </div>

      <div className="row-list">
        {matches.map((m, i) => (
          <div key={i} className={`row-item ${m.win ? 'win' : 'loss'}`}>
            <div className="av" style={{ backgroundImage: `url(assets/${m.leader})` }}/>
            <div className="body">
              <div className="title-line">{m.title}</div>
              <div className="meta">{m.meta}</div>
            </div>
            <div className="score-pill">{m.score}</div>
          </div>
        ))}
      </div>

      <MiniTabBar active="matches"/>
    </div>
  );
}

// ───────── LEGENDS MINI ─────────
function MiniLegends() {
  const grid = [
    { img: 'leader-jinx.png',  name: 'Jinx',  lvl: 7 },
    { img: 'leader-lux.jpeg',  name: 'Lux',   lvl: 5 },
    { img: 'leader-garen.png', name: 'Garen', lvl: 4 },
    { img: 'leader-annie.png', name: 'Annie', lvl: 3 },
  ];
  return (
    <div className="mini mini-legends">
      <IOSBar/>
      <div className="hd">
        <div>
          <h4>Legends</h4>
          <div className="sub">5 OF 30 MASTERED</div>
        </div>
        <div className="filter"><SvgFilter size={12}/></div>
      </div>
      <div className="hero-card">
        <div className="img" style={{ backgroundImage: 'url(assets/leader-ahri.png)' }}/>
        <div className="grad"/>
        <div className="body">
          <div className="ti">Ahri</div>
          <div className="meta">
            <span>NOXUS</span>
            <span className="dot">·</span>
            <span>LVL 8</span>
            <span className="dot">·</span>
            <span>87% WR</span>
          </div>
        </div>
      </div>
      <div className="grid">
        {grid.map((c, i) => (
          <div key={i} className="lcard">
            <div className="img" style={{ backgroundImage: `url(assets/${c.img})` }}/>
            <div className="grad"/>
            <div className="lvl"><span>{c.lvl}</span></div>
            <div className="name">{c.name}</div>
          </div>
        ))}
      </div>
      <MiniTabBar active="champions"/>
    </div>
  );
}

// ───────── AETHOS MINI ─────────
function MiniAethos() {
  return (
    <div className="mini mini-aethos">
      <IOSBar/>
      <h4>Aethos</h4>
      <div className="sub">ACOLYTE · LEVEL 7</div>
      <div className="figure"/>
      <div className="xp-card">
        <div className="xp-row">
          <span>XP PROGRESS</span>
          <span className="lvl">7 → 8</span>
        </div>
        <div className="bar"><span/></div>
      </div>
      <MiniTabBar active="aethos"/>
    </div>
  );
}

window.MiniScore = MiniScore;
window.MiniChronicles = MiniChronicles;
window.MiniLegends = MiniLegends;
window.MiniAethos = MiniAethos;