// Phone mockup with miniature Explore screen
// Static, decorative — designed for the landing page hero.

function PhoneMockup() {
  return (
    <div className="phone">
      <div className="phone__notch"></div>
      <div className="phone__statusbar">
        <span>9:41</span>
        <span className="phone__statusbar-right">
          {/* signal */}
          <svg width="16" height="10" viewBox="0 0 16 10" fill="currentColor"><rect x="0" y="6" width="3" height="4" rx="0.5"/><rect x="4" y="4" width="3" height="6" rx="0.5"/><rect x="8" y="2" width="3" height="8" rx="0.5"/><rect x="12" y="0" width="3" height="10" rx="0.5"/></svg>
          {/* battery */}
          <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"/>
            <rect x="2" y="2" width="15" height="6" rx="1" fill="currentColor"/>
            <rect x="19" y="3.5" width="2" height="3" rx="0.5" fill="currentColor"/>
          </svg>
        </span>
      </div>

      <div className="phone__screen">
        <MiniExplore />
      </div>

      <div className="phone__decorations">
        <div className="tag tag-1"><span className="dot"></span>歩数を自動記録</div>
        <div className="tag tag-2">8,451歩<small style={{opacity:0.6, marginLeft:6, fontWeight:600}}>今日</small></div>
        <div className="tag tag-3">
          <img src={res('currency','assets/currency_icon.png')} alt="" style={{width:14, height:14, filter:'brightness(0) invert(1)'}} />
          +1,240
        </div>
      </div>
    </div>
  );
}

function MiniExplore() {
  return (
    <div className="mini-explore">
      {/* purple-washed map */}
      <svg className="map" viewBox="0 0 320 640" preserveAspectRatio="xMidYMid slice">
        <rect width="320" height="640" fill="#D5CCF3" />
        {/* parks / blocks */}
        <rect x="0" y="0" width="96" height="200" fill="#CCC1EE" />
        <rect x="176" y="280" width="144" height="200" fill="#CCC1EE" />
        <rect x="0" y="500" width="96" height="140" fill="#CCC1EE" />
        <rect x="232" y="0" width="88" height="120" fill="#CDC2EE" />
        {/* river */}
        <path d="M-10 380 Q 80 360, 160 400 T 330 420 L 330 460 Q 240 440, 160 460 T -10 430 Z" fill="#B8AFEA" opacity="0.5" />
        {/* roads */}
        <g stroke="#C9C0F8" strokeWidth="18" fill="none" strokeLinecap="round">
          <line x1="-20" y1="160" x2="340" y2="190" />
          <line x1="-20" y1="340" x2="340" y2="370" />
          <line x1="-20" y1="520" x2="340" y2="550" />
          <line x1="96" y1="-20" x2="84" y2="660" />
          <line x1="208" y1="-20" x2="222" y2="660" />
        </g>
        <g stroke="#BDB1F0" strokeWidth="8" fill="none">
          <line x1="-20" y1="88" x2="340" y2="76" />
          <line x1="-20" y1="450" x2="340" y2="464" />
          <line x1="32" y1="-20" x2="48" y2="660" />
          <line x1="148" y1="-20" x2="148" y2="660" />
          <line x1="276" y1="-20" x2="290" y2="660" />
        </g>
        {/* labels */}
        <text x="160" y="338" textAnchor="middle" fill="#9D8DDF" fontSize="9" fontWeight="600">SHIBUYA</text>
        <text x="260" y="84" textAnchor="middle" fill="#9D8DDF" fontSize="9" fontWeight="600">代々木公園</text>
      </svg>

      {/* pins */}
      <div className="mini-pin" style={{left: 64, top: 70}}>📍</div>
      <div className="mini-pin claimed" style={{left: 240, top: 130}}>📍</div>
      <div className="mini-pin" style={{left: 50, top: 220}}>📍</div>
      <div className="mini-pin" style={{left: 268, top: 270}}>📍</div>
      <div className="mini-pin claimed" style={{left: 140, top: 320}}>📍</div>
      <div className="mini-pin" style={{left: 58, top: 380}}>📍</div>
      <div className="mini-pin" style={{left: 250, top: 410}}>📍</div>
      <div className="mini-pin" style={{left: 180, top: 460}}>📍</div>

      {/* user */}
      <div className="mini-avatar">😉</div>

      <div className="mini-eyebrow">探索</div>

      <div className="mini-fab">⌖</div>

      <div className="mini-status">
        <img className="mini-status__shoe" src={res('tempoS','assets/sneakers/01-tempo-s.png')} alt="" style={{filter:'drop-shadow(0 6px 10px rgba(0,0,0,0.22))'}} />
        <div className="mini-status__bar">
          <span className="mini-status__pct">63%</span>
          <div className="mini-status__track"><div className="mini-status__fill"></div></div>
          <span style={{fontSize:14, color:'#79747E'}}>›</span>
        </div>
      </div>
    </div>
  );
}

window.PhoneMockup = PhoneMockup;