<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 400" fill="none">
  <defs>
    <linearGradient id="demoGrad4" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#833AB4"/>
      <stop offset="100%" stop-color="#E1306C"/>
    </linearGradient>
  </defs>
  <rect width="300" height="400" rx="20" fill="#0a0a0a"/>
  <rect x="0" y="0" width="300" height="70" rx="20" fill="url(#demoGrad4)"/>
  <rect x="0" y="50" width="300" height="20" fill="url(#demoGrad4)"/>
  <text x="150" y="40" font-family="Inter,-apple-system,sans-serif" font-weight="700" font-size="16" fill="white" text-anchor="middle">Calendar Sync</text>
  <!-- Calendar header -->
  <text x="20" y="100" font-family="Inter,-apple-system,sans-serif" font-weight="700" font-size="14" fill="white">June 2026</text>
  <!-- Day labels -->
  <text x="24" y="120" font-family="Inter,-apple-system,sans-serif" font-size="9" fill="#555">M</text>
  <text x="62" y="120" font-family="Inter,-apple-system,sans-serif" font-size="9" fill="#555">T</text>
  <text x="100" y="120" font-family="Inter,-apple-system,sans-serif" font-size="9" fill="#555">W</text>
  <text x="138" y="120" font-family="Inter,-apple-system,sans-serif" font-size="9" fill="#555">T</text>
  <text x="176" y="120" font-family="Inter,-apple-system,sans-serif" font-size="9" fill="#555">F</text>
  <text x="214" y="120" font-family="Inter,-apple-system,sans-serif" font-size="9" fill="#555">S</text>
  <text x="252" y="120" font-family="Inter,-apple-system,sans-serif" font-size="9" fill="#555">S</text>
  <!-- Date row -->
  <text x="24" y="145" font-family="Inter,-apple-system,sans-serif" font-size="12" fill="#666">16</text>
  <text x="62" y="145" font-family="Inter,-apple-system,sans-serif" font-size="12" fill="#666">17</text>
  <text x="100" y="145" font-family="Inter,-apple-system,sans-serif" font-size="12" fill="#666">18</text>
  <text x="138" y="145" font-family="Inter,-apple-system,sans-serif" font-size="12" fill="#666">19</text>
  <!-- Today highlight -->
  <circle cx="181" cy="140" r="14" fill="url(#demoGrad4)"/>
  <text x="181" y="145" font-family="Inter,-apple-system,sans-serif" font-weight="700" font-size="12" fill="white" text-anchor="middle">20</text>
  <text x="214" y="145" font-family="Inter,-apple-system,sans-serif" font-size="12" fill="#666">21</text>
  <text x="252" y="145" font-family="Inter,-apple-system,sans-serif" font-size="12" fill="#666">22</text>
  <!-- Events -->
  <text x="20" y="180" font-family="Inter,-apple-system,sans-serif" font-weight="600" font-size="11" fill="white">Today</text>
  <rect x="20" y="190" width="260" height="40" rx="8" fill="rgba(131,58,180,0.3)" stroke="rgba(131,58,180,0.6)" stroke-width="1"/>
  <text x="35" y="207" font-family="Arial" font-size="12">💪</text>
  <text x="55" y="207" font-family="Inter,-apple-system,sans-serif" font-weight="600" font-size="11" fill="white">Morning Workout</text>
  <text x="55" y="221" font-family="Inter,-apple-system,sans-serif" font-size="10" fill="#9E9E9E">7:00 AM • 30 min</text>

  <text x="20" y="250" font-family="Inter,-apple-system,sans-serif" font-weight="600" font-size="11" fill="#666">Tomorrow</text>
  <rect x="20" y="260" width="260" height="40" rx="8" fill="rgba(225,48,108,0.2)" stroke="rgba(225,48,108,0.4)" stroke-width="1"/>
  <text x="35" y="277" font-family="Arial" font-size="12">📊</text>
  <text x="55" y="277" font-family="Inter,-apple-system,sans-serif" font-weight="600" font-size="11" fill="white">Review Business Metrics</text>
  <text x="55" y="291" font-family="Inter,-apple-system,sans-serif" font-size="10" fill="#9E9E9E">9:00 AM • 45 min</text>

  <rect x="20" y="312" width="260" height="40" rx="8" fill="rgba(252,175,69,0.2)" stroke="rgba(252,175,69,0.4)" stroke-width="1"/>
  <text x="35" y="329" font-family="Arial" font-size="12">🍳</text>
  <text x="55" y="329" font-family="Inter,-apple-system,sans-serif" font-weight="600" font-size="11" fill="white">Cook Mediterranean Bowl</text>
  <text x="55" y="343" font-family="Inter,-apple-system,sans-serif" font-size="10" fill="#9E9E9E">6:30 PM • 60 min</text>

  <text x="150" y="380" font-family="Inter,-apple-system,sans-serif" font-size="11" fill="#555" text-anchor="middle">✅ Synced with iPhone Calendar</text>
</svg>
