/* global React, Icon, Placeholder, Logo, MStatus, MNav, IOSFrame */

// ===== Mobile home =====
const MobileHome = () => (
  <div className="m-screen">
    <div className="m-hero">
      <img src="assets/hero-vocalist.jpg" alt="" />
      <MStatus />
      <div className="m-hero-meta">
        <div className="m-eyebrow">Featured Release</div>
        <h1 className="m-title">Get Low</h1>
        <div className="m-sub">— Nu-Metal Version</div>
      </div>
      <div className="m-actions">
        <button className="btn btn-primary" style={{ padding: "12px 16px", flex: 1, justifyContent: "center", fontSize: 12 }}>
          <Icon name="play" size={12} /> Play Now
        </button>
        <button className="btn-circle" style={{ width: 44, height: 44 }}><Icon name="plus" size={16} /></button>
      </div>
    </div>
    <div className="m-content">
      {[
        { h: "Trending Now", items: [
          { t: "Get Low", s: "Viral Tension", v: "mic" },
          { t: "Iron Lungs", s: "Viral Tension", v: "iron" },
          { t: "Drag Me", s: "Viral Tension", v: "fog" },
        ] },
        { h: "Gym Warfare", items: [
          { t: "Iron Therapy", s: "68 Tracks", v: "iron" },
          { t: "Rage Mode", s: "50 Tracks", v: "crowd" },
          { t: "Pressure Pump", s: "40 Tracks", v: "industrial" },
        ] },
        { h: "Late Night Drive", items: [
          { t: "Late Drive", s: "42 Tracks", v: "drive" },
          { t: "Highway Haze", s: "36 Tracks", v: "fog" },
          { t: "After Midnight", s: "28 Tracks", v: "drive" },
        ] },
      ].map(sec => (
        <div key={sec.h} className="m-section">
          <h3>{sec.h}</h3>
          <div className="m-rail">
            {sec.items.map((c, i) => (
              <div key={i} className="m-card">
                <div className="m-card-art"><Placeholder variant={c.v} /></div>
                <div className="m-card-title">{c.t}</div>
                <div className="m-card-sub">{c.s}</div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>

    <div className="m-player-bar">
      <div className="np-art"><Placeholder variant="mic" /></div>
      <div className="meta">
        <b>Get Low (Nu-Metal)</b>
        <span>Viral Tension</span>
      </div>
      <button className="btn-circle" style={{ width: 36, height: 36 }} aria-label="Pause"><Icon name="pause" size={14} /></button>
      <button className="btn-circle" style={{ width: 36, height: 36 }} aria-label="Next"><Icon name="next" size={14} /></button>
      <div className="progress"><i></i></div>
    </div>
    <MNav active="Home" />
  </div>
);

// ===== Mobile now-playing =====
const MobileNowPlaying = () => {
  const bars = Array.from({ length: 70 }).map((_, i) => ({
    h: 20 + Math.abs(Math.sin(i * .4)) * 60 + (i * 13 % 20),
    played: i / 70 < .42,
  }));
  return (
    <div className="m-now">
      <div className="m-now-bg">
        <img src="assets/hero-vocalist.jpg" alt="" />
      </div>
      <MStatus />
      <div style={{ display: "flex", justifyContent: "space-between", padding: "0 24px", position: "relative", zIndex: 2, color: "#fff" }}>
        <button className="btn-circle" style={{ width: 38, height: 38 }} aria-label="Back"><Icon name="chevDown" size={14} /></button>
        <div style={{ textAlign: "center" }}>
          <div className="kicker">Playing From Playlist</div>
          <div style={{ fontFamily: "var(--display)", letterSpacing: ".14em", fontSize: 12, marginTop: 4 }}>RAGE MODE</div>
        </div>
        <button className="btn-circle" style={{ width: 38, height: 38 }} aria-label="More"><Icon name="moreH" size={14} /></button>
      </div>

      <div className="m-now-body" style={{ paddingTop: 6 }}>
        <div className="m-now-art"><Placeholder variant="mic" /></div>
        <div className="m-now-meta">
          <h2 className="m-now-title">Get Low</h2>
          <div className="m-now-artist">— Viral Tension · Nu-Metal Version</div>
        </div>

        <div style={{ marginTop: 24 }}>
          <div className="m-now-wave">
            {bars.map((b, i) => (
              <i key={i} style={{ height: `${b.h}%` }} className={b.played ? "played" : ""}></i>
            ))}
          </div>
          <div className="m-now-times">
            <span>1:42</span><span>-2:06</span>
          </div>
        </div>

        <div className="m-now-controls">
          <button className="btn-circle" aria-label="Shuffle" style={{ width: 38, height: 38 }}><Icon name="shuffle" size={16} /></button>
          <button className="btn-circle" aria-label="Prev"><Icon name="prev" size={20} /></button>
          <button className="btn-circle is-primary lg" aria-label="Play"><Icon name="pause" size={28} /></button>
          <button className="btn-circle" aria-label="Next"><Icon name="next" size={20} /></button>
          <button className="btn-circle" aria-label="Repeat" style={{ width: 38, height: 38 }}><Icon name="repeat" size={16} /></button>
        </div>

        <div className="m-now-extras">
          <button className="icon-btn" aria-label="Share"><Icon name="share" size={16} /></button>
          <button className="icon-btn" aria-label="Queue"><Icon name="list" size={16} /></button>
          <button className="icon-btn" aria-label="Devices"><Icon name="eq" size={16} /></button>
        </div>
      </div>
    </div>
  );
};

// ===== Mobile search =====
const MobileSearch = () => {
  const moods = [
    { l: "Aggressive", v: "iron" },
    { l: "Emotional", v: "fog" },
    { l: "Gym", v: "industrial" },
    { l: "Dark", v: "industrial" },
    { l: "Driving", v: "drive" },
    { l: "Heavy", v: "guitar" },
  ];
  return (
    <div className="m-screen">
      <MStatus />
      <div style={{ padding: "8px 20px 0" }}>
        <h1 style={{ fontFamily: "var(--display)", fontSize: 42, margin: "8px 0 20px", letterSpacing: ".02em" }}>SEARCH</h1>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 16px", border: "1px solid var(--line-2)", borderRadius: 14, background: "rgba(255,255,255,.04)" }}>
          <Icon name="search" size={16} style={{ color: "var(--ink-2)" }} />
          <span style={{ color: "var(--ink-3)", fontSize: 14 }}>Songs, artists, moods...</span>
          <span style={{ marginLeft: "auto", padding: "3px 8px", borderRadius: 999, background: "rgba(255,255,255,.06)", fontFamily: "var(--mono)", fontSize: 9, letterSpacing: ".18em", color: "var(--steel)" }}>AI</span>
        </div>
      </div>

      <div className="m-content" style={{ paddingTop: 24 }}>
        <h3 style={{ fontFamily: "var(--display)", letterSpacing: ".18em", fontSize: 12, color: "var(--ink-2)", textTransform: "uppercase", margin: "0 0 12px" }}>Browse by Mood</h3>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          {moods.map(m => (
            <div key={m.l} className="mood" style={{ aspectRatio: "5/4" }}>
              <div className="mood-art"><Placeholder variant={m.v} /></div>
              <span className="mood-label" style={{ fontSize: 22 }}>{m.l}</span>
            </div>
          ))}
        </div>

        <h3 style={{ fontFamily: "var(--display)", letterSpacing: ".18em", fontSize: 12, color: "var(--ink-2)", textTransform: "uppercase", margin: "28px 0 12px" }}>Trending Searches</h3>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {["Get Low", "Nu-Metal", "Gym Warfare", "Late Drive", "Iron Therapy"].map(s => (
            <div key={s} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 0", borderBottom: "1px solid var(--line)" }}>
              <Icon name="search" size={14} style={{ color: "var(--ink-3)" }} />
              <span style={{ fontSize: 14, flex: 1 }}>{s}</span>
              <Icon name="arrowRight" size={14} style={{ color: "var(--ink-3)" }} />
            </div>
          ))}
        </div>
      </div>

      <MNav active="Search" />
    </div>
  );
};

Object.assign(window, { MobileHome, MobileNowPlaying, MobileSearch });