// Phone mockup — auto-rotates between Map / Venue / Feed
const { useState, useEffect, useRef } = React;

function PhoneFrame({ children }) {
  return (
    <div className="phone-frame">
      <div className="phone-glow" aria-hidden="true"></div>
      <div className="phone-bezel">
        <div className="phone-notch"></div>
        <div className="phone-screen">
          {children}
        </div>
      </div>
    </div>
  );
}

function StatusBar({ time = "10:47" }) {
  return (
    <div className="status-bar">
      <span>{time}</span>
      <div className="status-icons">
        <span className="signal-dots">
          <span></span><span></span><span></span><span></span>
        </span>
        <svg width="14" height="10" viewBox="0 0 14 10" fill="none">
          <path d="M0 5a7 7 0 0 1 14 0M3 7a4 4 0 0 1 8 0M6 9a1 1 0 0 1 2 0" stroke="currentColor" strokeWidth="1" strokeLinecap="round"/>
        </svg>
        <svg width="22" height="10" viewBox="0 0 22 10" fill="none">
          <rect x="0.5" y="0.5" width="18" height="9" rx="2" stroke="currentColor" strokeOpacity="0.6"/>
          <rect x="2" y="2" width="13" height="6" rx="1" fill="currentColor"/>
          <rect x="20" y="3" width="1.5" height="4" rx="0.5" fill="currentColor" fillOpacity="0.6"/>
        </svg>
      </div>
    </div>
  );
}

/* ——— STATE 1: MAP ——— */
function MapView() {
  const pins = [
    { x: 22, y: 28, score: 8.4, hot: false },
    { x: 58, y: 18, score: 7.2, hot: false },
    { x: 44, y: 48, score: 9.2, hot: true, label: "The Aviary" },
    { x: 72, y: 56, score: 6.1, hot: false },
    { x: 30, y: 70, score: 8.7, hot: false },
    { x: 78, y: 80, score: 5.8, hot: false },
  ];
  return (
    <div className="screen screen-map">
      <div className="map-canvas">
        <svg className="map-streets" viewBox="0 0 100 160" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
          <defs>
            <pattern id="block-tex" width="6" height="6" patternUnits="userSpaceOnUse">
              <rect width="6" height="6" fill="rgba(240,236,228,0.012)"/>
              <circle cx="3" cy="3" r="0.3" fill="rgba(240,236,228,0.04)"/>
            </pattern>
          </defs>
          {/* river / water */}
          <path d="M-5,108 C20,104 30,118 55,112 C75,108 88,124 110,118 L110,140 L-5,140 Z" fill="rgba(40,72,90,0.55)"/>
          <path d="M-5,108 C20,104 30,118 55,112 C75,108 88,124 110,118" stroke="rgba(120,170,200,0.18)" strokeWidth="0.5" fill="none"/>
          {/* park */}
          <path d="M62,18 L92,16 L94,42 L64,44 Z" fill="rgba(60,110,70,0.32)"/>
          <path d="M62,18 L92,16 L94,42 L64,44 Z" fill="url(#block-tex)"/>
          {/* small park 2 */}
          <rect x="8" y="62" width="14" height="10" fill="rgba(60,110,70,0.22)" transform="rotate(-2 15 67)"/>
          {/* horizontal streets */}
          <path d="M-5,14 L110,12" stroke="rgba(240,236,228,0.13)" strokeWidth="1.2"/>
          <path d="M-5,28 L110,26" stroke="rgba(240,236,228,0.08)" strokeWidth="0.6"/>
          <path d="M-5,46 L110,44" stroke="rgba(240,236,228,0.13)" strokeWidth="1.2"/>
          <path d="M-5,60 L110,58" stroke="rgba(240,236,228,0.08)" strokeWidth="0.6"/>
          <path d="M-5,76 L110,76" stroke="rgba(240,236,228,0.13)" strokeWidth="1.2"/>
          <path d="M-5,92 L110,92" stroke="rgba(240,236,228,0.08)" strokeWidth="0.6"/>
          {/* vertical streets */}
          <path d="M14,-5 L16,140" stroke="rgba(240,236,228,0.08)" strokeWidth="0.6"/>
          <path d="M30,-5 L32,140" stroke="rgba(240,236,228,0.13)" strokeWidth="1.2"/>
          <path d="M46,-5 L48,140" stroke="rgba(240,236,228,0.08)" strokeWidth="0.6"/>
          <path d="M62,-5 L60,140" stroke="rgba(240,236,228,0.13)" strokeWidth="1.2"/>
          <path d="M78,-5 L80,140" stroke="rgba(240,236,228,0.08)" strokeWidth="0.6"/>
          <path d="M94,-5 L96,140" stroke="rgba(240,236,228,0.13)" strokeWidth="1.2"/>
          {/* diagonal — Milwaukee Ave feel */}
          <path d="M-5,140 L110,-5" stroke="rgba(76,184,95,0.22)" strokeWidth="1.6" fill="none"/>
          <path d="M-5,140 L110,-5" stroke="rgba(76,184,95,0.4)" strokeWidth="0.3" fill="none" strokeDasharray="0.6 1.2"/>
          {/* highway curve */}
          <path d="M-5,84 Q30,80 55,92 Q80,104 110,98" stroke="rgba(240,236,228,0.18)" strokeWidth="1.4" fill="none"/>
          {/* labels */}
          <text x="50" y="9" fill="rgba(240,236,228,0.18)" fontSize="2.6" fontFamily="ui-monospace,monospace" letterSpacing="0.3">N MILWAUKEE AVE</text>
          <text x="76" y="32" fill="rgba(150,200,165,0.32)" fontSize="2.4" fontFamily="ui-monospace,monospace" letterSpacing="0.2">WICKER PARK</text>
          <text x="2" y="124" fill="rgba(150,180,200,0.32)" fontSize="2.4" fontFamily="ui-monospace,monospace" letterSpacing="0.2">N. BRANCH</text>
        </svg>
        {pins.map((p, i) => (
          <div
            key={i}
            className={"map-pin" + (p.hot ? " map-pin-hot" : "")}
            style={{ left: p.x + "%", top: p.y + "%" }}
          >
            <div className="map-pin-ring"></div>
            <div className="map-pin-dot">{p.score}</div>
          </div>
        ))}
      </div>

      <div className="map-top">
        <div className="map-loc">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
            <path d="M12 21s-7-6.5-7-12a7 7 0 1 1 14 0c0 5.5-7 12-7 12z"/>
            <circle cx="12" cy="9" r="2.5"/>
          </svg>
          <span>Wicker Park · Tonight</span>
        </div>
        <div className="map-filter">Live</div>
      </div>

      <div className="map-card">
        <div className="map-card-row">
          <div>
            <div className="map-card-name">The Aviary</div>
            <div className="map-card-meta">Wicker Park · 0.3 mi</div>
          </div>
          <div className="hype-badge">
            <div className="hype-score">9.2</div>
            <div className="hype-label">Very poppin'</div>
          </div>
        </div>
        <div className="map-card-stats">
          <span><span className="stat-dot"></span> 47 here now</span>
          <span>↑ 2.4 this hr</span>
        </div>
      </div>
    </div>
  );
}

/* ——— STATE 2: VENUE DETAIL ——— */
function VenueView() {
  const updates = [
    { who: "MK", text: "line moving fast", min: "2m" },
    { who: "DJ", text: "DJ just dropped Travis 🔥", min: "6m" },
    { who: "AR", text: "no cover before 11", min: "14m" },
  ];
  return (
    <div className="screen screen-venue">
      <div className="venue-cover">
        <svg className="venue-cover-photo" viewBox="0 0 300 200" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
          <defs>
            <radialGradient id="bokeh-1" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="#ffd47a" stopOpacity="0.9"/>
              <stop offset="40%" stopColor="#ff9d3d" stopOpacity="0.4"/>
              <stop offset="100%" stopColor="#ff9d3d" stopOpacity="0"/>
            </radialGradient>
            <radialGradient id="bokeh-2" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="#6cd47e" stopOpacity="0.9"/>
              <stop offset="100%" stopColor="#2d7a3a" stopOpacity="0"/>
            </radialGradient>
            <radialGradient id="bokeh-3" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="#ff6b9d" stopOpacity="0.7"/>
              <stop offset="100%" stopColor="#a8336d" stopOpacity="0"/>
            </radialGradient>
            <filter id="b-blur"><feGaussianBlur stdDeviation="6"/></filter>
            <filter id="b-blur-soft"><feGaussianBlur stdDeviation="3"/></filter>
          </defs>
          <rect width="300" height="200" fill="#1a1410"/>
          {/* warm wash */}
          <ellipse cx="150" cy="100" rx="200" ry="120" fill="#3a2418" opacity="0.7"/>
          {/* silhouettes of people */}
          <g filter="url(#b-blur-soft)" opacity="0.55">
            <ellipse cx="60" cy="155" rx="22" ry="38" fill="#0a0807"/>
            <ellipse cx="105" cy="160" rx="20" ry="42" fill="#0a0807"/>
            <ellipse cx="160" cy="158" rx="24" ry="40" fill="#0a0807"/>
            <ellipse cx="215" cy="162" rx="22" ry="44" fill="#0a0807"/>
            <ellipse cx="255" cy="156" rx="20" ry="40" fill="#0a0807"/>
          </g>
          {/* bokeh lights */}
          <g filter="url(#b-blur)">
            <circle cx="50" cy="40" r="22" fill="url(#bokeh-1)"/>
            <circle cx="120" cy="30" r="18" fill="url(#bokeh-1)"/>
            <circle cx="200" cy="50" r="24" fill="url(#bokeh-2)"/>
            <circle cx="260" cy="35" r="20" fill="url(#bokeh-1)"/>
            <circle cx="80" cy="90" r="14" fill="url(#bokeh-3)"/>
            <circle cx="240" cy="100" r="16" fill="url(#bokeh-2)"/>
            <circle cx="170" cy="80" r="12" fill="url(#bokeh-1)"/>
          </g>
          {/* sharper highlight specks */}
          <g opacity="0.9">
            <circle cx="58" cy="42" r="2.5" fill="#ffe6b3"/>
            <circle cx="122" cy="32" r="2" fill="#ffe6b3"/>
            <circle cx="202" cy="48" r="2.5" fill="#9be8a8"/>
            <circle cx="260" cy="36" r="2" fill="#ffe6b3"/>
            <circle cx="80" cy="92" r="1.5" fill="#ffb3d1"/>
          </g>
          {/* bar counter line */}
          <rect x="0" y="125" width="300" height="3" fill="#52371f" opacity="0.6"/>
          <rect x="0" y="128" width="300" height="2" fill="#1a0f08" opacity="0.7"/>
          {/* bottom fade */}
          <rect width="300" height="200" fill="url(#vcfade)"/>
          <defs>
            <linearGradient id="vcfade" x1="0%" y1="40%" x2="0%" y2="100%">
              <stop offset="0%" stopColor="#0a0b0a" stopOpacity="0"/>
              <stop offset="100%" stopColor="#0a0b0a" stopOpacity="1"/>
            </linearGradient>
          </defs>
        </svg>
        <button className="venue-back" aria-label="Back">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
            <path d="M15 18l-6-6 6-6"/>
          </svg>
        </button>
        <div className="venue-live">
          <span className="dot"></span> LIVE
        </div>
      </div>

      <div className="venue-body">
        <div className="venue-head">
          <div>
            <div className="venue-name">The Aviary</div>
            <div className="venue-sub">Cocktail bar · Wicker Park</div>
          </div>
          <div className="hype-big">9.2</div>
        </div>

        <div className="hype-bar">
          <div className="hype-bar-fill" style={{ width: "92%" }}></div>
        </div>

        <div className="venue-tags">
          <span className="tag">Hip-hop</span>
          <span className="tag">21–28</span>
          <span className="tag">$$</span>
          <span className="tag">No cover</span>
        </div>

        <div className="venue-section-label">From people inside</div>
        <div className="venue-feed">
          {updates.map((u, i) => (
            <div className="feed-item" key={i}>
              <div className="feed-avatar">{u.who}</div>
              <div className="feed-body">
                <div className="feed-text">{u.text}</div>
                <div className="feed-time">{u.min} ago</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ——— STATE 3: LIVE FEED ——— */
function FeedView() {
  const items = [
    { v: "Smoke Daddy", n: "Wicker Park", t: "just hit 8.4", delta: "+1.2", up: true, time: "now" },
    { v: "Estereo", n: "Logan Square", t: "line wrapped around the block", delta: "9.0", up: true, time: "3m" },
    { v: "Sportsman's", n: "Ukr. Village", t: "chill, mostly seated", delta: "5.8", up: false, time: "8m" },
    { v: "Lone Wolf", n: "West Loop", t: "DJ B2B starting 11pm", delta: "7.6", up: true, time: "12m" },
  ];
  return (
    <div className="screen screen-feed">
      <div className="feed-head">
        <div className="feed-head-title">Tonight in Chicago</div>
        <div className="feed-head-sub">Updated 8 seconds ago</div>
      </div>
      <div className="feed-list">
        {items.map((it, i) => (
          <div className="feed-row" key={i}>
            <div className="feed-row-left">
              <div className="feed-row-name">{it.v}</div>
              <div className="feed-row-meta">{it.n} · {it.time}</div>
              <div className="feed-row-text">{it.t}</div>
            </div>
            <div className={"feed-row-score " + (it.up ? "up" : "dn")}>
              <span>{it.delta}</span>
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round">
                {it.up ? <path d="M7 17L17 7M17 7H9M17 7v8"/> : <path d="M7 7l10 10M17 17H9M17 17V9"/>}
              </svg>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function RotatingPhone() {
  const screens = ["map", "venue", "feed"];
  const [idx, setIdx] = useState(0);
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setIdx(i => (i + 1) % screens.length), 5200);
    return () => clearInterval(id);
  }, [paused]);

  return (
    <div className="phone-stage" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <PhoneFrame>
        <StatusBar />
        <div className="screen-stack">
          <div className={"screen-slot " + (idx === 0 ? "on" : "off")}><MapView /></div>
          <div className={"screen-slot " + (idx === 1 ? "on" : "off")}><VenueView /></div>
          <div className={"screen-slot " + (idx === 2 ? "on" : "off")}><FeedView /></div>
        </div>
      </PhoneFrame>
      <div className="phone-dots">
        {screens.map((s, i) => (
          <button
            key={s}
            className={"phone-dot " + (idx === i ? "on" : "")}
            onClick={() => setIdx(i)}
            aria-label={"Show " + s}
          />
        ))}
      </div>
    </div>
  );
}

window.RotatingPhone = RotatingPhone;