// Shared Evnt•d wordmark — matches the splash screen
// "Evnt" + orange dot + "d"

function EvntdLogo({ size = 32, color = '#ffffff', dotColor = '#E8633A' }) {
  // Visual proportions tuned to match the app splash:
  // Bold/black weight, tight tracking, a small orange dot between Evnt and d.
  const dotSize = Math.max(4, size * 0.18);
  return (
    <span
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: size * 0.18,
        fontFamily: '"Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
        fontWeight: 800,
        fontSize: size,
        lineHeight: 1,
        letterSpacing: '-0.04em',
        color,
        userSelect: 'none',
      }}
    >
      <span>Evnt</span>
      <span
        style={{
          width: dotSize,
          height: dotSize,
          borderRadius: '50%',
          background: dotColor,
          display: 'inline-block',
          marginBottom: size * 0.05,
        }}
      />
      <span>d</span>
    </span>
  );
}

// Small standalone phone-screen mockups — the app screens, drawn in CSS
// rather than imported as images, so they scale and re-color cleanly.

function PhoneStatusBar({ time = '17:20' }) {
  return (
    <div
      style={{
        height: 44,
        padding: '12px 24px 0',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        color: '#fff',
        fontFamily: '"Geist", system-ui, sans-serif',
        fontSize: 14,
        fontWeight: 600,
      }}
    >
      <span>{time}</span>
      <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
        {/* Signal */}
        <svg width="17" height="11" viewBox="0 0 17 11"><g fill="#fff">
          <rect x="0" y="7" width="3" height="4" rx="0.5"/>
          <rect x="4.5" y="5" width="3" height="6" rx="0.5"/>
          <rect x="9" y="2.5" width="3" height="8.5" rx="0.5"/>
          <rect x="13.5" y="0" width="3" height="11" rx="0.5"/>
        </g></svg>
        {/* Wifi */}
        <svg width="15" height="11" viewBox="0 0 15 11" fill="#fff">
          <path d="M7.5 2C4.7 2 2.2 3 .3 4.7l-.3.3 1.4 1.4.3-.3C3.2 4.5 5.2 3.7 7.5 3.7s4.3.8 5.8 2.4l.3.3L15 5l-.3-.3A10.7 10.7 0 0 0 7.5 2zm0 3.5c-1.8 0-3.4.7-4.6 1.8l-.3.3L4 9l.3-.3c.9-.9 2-1.4 3.2-1.4s2.3.5 3.2 1.4l.3.3 1.4-1.4-.3-.3a6.6 6.6 0 0 0-4.6-1.8zm0 3.5a2 2 0 0 0-1.4.6l-.3.3 1.7 1.7 1.7-1.7-.3-.3a2 2 0 0 0-1.4-.6z"/>
        </svg>
        {/* Battery */}
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <div style={{
            width: 25, height: 12, border: '1.5px solid rgba(255,255,255,0.4)',
            borderRadius: 3, padding: 1, position: 'relative',
          }}>
            <div style={{
              width: '67%', height: '100%', background: '#fff', borderRadius: 1.5,
            }}/>
          </div>
          <div style={{
            width: 1.5, height: 4, background: 'rgba(255,255,255,0.4)',
            marginLeft: 1, borderRadius: 1,
          }}/>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Splash screen — recreates the auth screen shown in IMG_0506
// ─────────────────────────────────────────────────────────────
function PhoneSplash({ time = '17:15' }) {
  return (
    <div style={{
      width: '100%', height: '100%', background: '#0A0A0B',
      display: 'flex', flexDirection: 'column',
      fontFamily: '"Geist", system-ui, sans-serif',
    }}>
      <PhoneStatusBar time={time}/>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', padding: '0 28px' }}>
        <EvntdLogo size={56}/>
        <div style={{
          color: 'rgba(255,255,255,0.55)', fontSize: 15, marginTop: 18,
          letterSpacing: '-0.01em',
        }}>
          Find your people. Make it real.
        </div>
      </div>
      <div style={{ padding: '0 20px 36px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <button style={{
          height: 52, borderRadius: 14, border: 'none',
          background: '#fff', color: '#000', fontSize: 16, fontWeight: 600,
          fontFamily: 'inherit',
        }}>Continue with Apple</button>
        <button style={{
          height: 52, borderRadius: 14, border: 'none',
          background: '#E8633A', color: '#fff', fontSize: 16, fontWeight: 600,
          fontFamily: 'inherit',
        }}>Continue with phone</button>
        <button style={{
          height: 52, borderRadius: 14, border: '1px solid rgba(255,255,255,0.15)',
          background: 'transparent', color: '#fff', fontSize: 16, fontWeight: 600,
          fontFamily: 'inherit',
        }}>Continue with email</button>
        <div style={{
          textAlign: 'center', color: 'rgba(255,255,255,0.4)', fontSize: 11,
          marginTop: 4, lineHeight: 1.4,
        }}>
          By continuing you agree to the Terms and acknowledge the Privacy Policy.
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Home screen — recreates IMG_0508
// ─────────────────────────────────────────────────────────────
function PhoneHome({ time = '17:20' }) {
  return (
    <div style={{
      width: '100%', height: '100%', background: '#0A0A0B',
      display: 'flex', flexDirection: 'column',
      fontFamily: '"Geist", system-ui, sans-serif', color: '#fff',
    }}>
      <PhoneStatusBar time={time}/>
      <div style={{ padding: '8px 20px 0', display: 'flex',
        justifyContent: 'space-between', alignItems: 'center' }}>
        <EvntdLogo size={22}/>
        <div style={{
          width: 32, height: 32, borderRadius: 16,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2">
            <circle cx="11" cy="11" r="7"/>
            <path d="M20 20l-3.5-3.5"/>
          </svg>
        </div>
      </div>
      <div style={{ height: 1, background: 'rgba(255,255,255,0.08)', margin: '14px 0 0' }}/>
      <div style={{ padding: '14px 16px 0', flex: 1 }}>
        <div style={{
          height: 44, borderRadius: 22, background: 'rgba(255,255,255,0.06)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '0 16px', fontSize: 13,
        }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 14 }}>👋</span>
            What's your tonight?
          </span>
          <span style={{ color: 'rgba(255,255,255,0.4)' }}>▾</span>
        </div>
        <div style={{
          color: 'rgba(255,255,255,0.5)', fontSize: 12, marginTop: 16, marginBottom: 4,
        }}>Good afternoon</div>
        <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em' }}>
          What's the plan?
        </div>
        <div style={{
          marginTop: 14, borderRadius: 18, background: '#E8633A',
          padding: '18px 18px 16px', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', right: -40, top: -40, width: 160, height: 160,
            borderRadius: '50%', background: 'rgba(255,255,255,0.08)',
          }}/>
          <div style={{ fontSize: 22 }}>🍺</div>
          <div style={{ fontSize: 20, fontWeight: 700, marginTop: 8 }}>Make a plan</div>
          <div style={{ fontSize: 12, opacity: 0.85, marginTop: 2 }}>
            Beers, sauna, dinner. 30 seconds. Invite friends.
          </div>
          <div style={{
            position: 'absolute', bottom: 14, right: 14, width: 32, height: 32,
            borderRadius: 16, background: 'rgba(0,0,0,0.25)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>→</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 10 }}>
          <div style={{
            background: 'rgba(255,255,255,0.04)', borderRadius: 14, padding: '14px',
            border: '1px solid rgba(255,255,255,0.06)',
          }}>
            <div style={{ fontSize: 14 }}>🔭</div>
            <div style={{ fontWeight: 700, fontSize: 14, marginTop: 6 }}>What's on</div>
            <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>
              50 tonight · 200+ this week
            </div>
          </div>
          <div style={{
            background: 'rgba(255,255,255,0.04)', borderRadius: 14, padding: '14px',
            border: '1px solid rgba(255,255,255,0.06)',
          }}>
            <div style={{ fontSize: 14 }}>👯</div>
            <div style={{ fontWeight: 700, fontSize: 14, marginTop: 6 }}>Friends</div>
            <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>
              Add your crew
            </div>
          </div>
        </div>
        <div style={{
          display: 'flex', gap: 8, justifyContent: 'center', marginTop: 16,
          fontSize: 11,
        }}>
          {['Crews', 'Polls', 'Story'].map(t => (
            <div key={t} style={{
              padding: '6px 12px', borderRadius: 16,
              background: 'rgba(255,255,255,0.05)',
              border: '1px solid rgba(255,255,255,0.08)',
            }}>{t}</div>
          ))}
        </div>
      </div>
      <PhoneTabBar active="home"/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// New plan screen — IMG_0512/0513
// ─────────────────────────────────────────────────────────────
function PhonePlan({ time = '17:21' }) {
  return (
    <div style={{
      width: '100%', height: '100%', background: '#0A0A0B',
      display: 'flex', flexDirection: 'column',
      fontFamily: '"Geist", system-ui, sans-serif', color: '#fff',
    }}>
      <PhoneStatusBar time={time}/>
      <div style={{ padding: '8px 20px 14px', fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>
        New event
      </div>
      <div style={{ height: 1, background: 'rgba(255,255,255,0.08)' }}/>
      <div style={{ padding: '16px', flex: 1 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <div style={{
            background: '#E8633A', borderRadius: 12, padding: '14px',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
          }}>
            <div style={{ fontSize: 18 }}>🍺</div>
            <div style={{ fontWeight: 700, fontSize: 13 }}>Plan</div>
            <div style={{ fontSize: 10, opacity: 0.85 }}>with friends</div>
          </div>
          <div style={{
            background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: 12, padding: '14px',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
          }}>
            <div style={{ fontSize: 18 }}>📅</div>
            <div style={{ fontWeight: 700, fontSize: 13 }}>Event</div>
            <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)' }}>public, hosted</div>
          </div>
        </div>
        <div style={{
          color: 'rgba(255,255,255,0.4)', fontSize: 10, fontWeight: 600,
          letterSpacing: '0.08em', marginTop: 22, marginBottom: 8,
        }}>WHAT'S THE PLAN?</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
          {[['🍺', 'Beers', true], ['☕', 'Coffee'], ['🍝', 'Dinner'], ['🧖', 'Sauna']].map(([emo, lbl, on]) => (
            <div key={lbl} style={{
              padding: '12px 6px', borderRadius: 10,
              background: on ? '#E8633A' : 'rgba(255,255,255,0.04)',
              border: on ? 'none' : '1px solid rgba(255,255,255,0.08)',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
            }}>
              <div style={{ fontSize: 16 }}>{emo}</div>
              <div style={{ fontSize: 11, fontWeight: 600 }}>{lbl}</div>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 14, padding: '14px 16px', borderRadius: 12,
          background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)',
          fontSize: 18, fontWeight: 700,
        }}>Beers</div>
        <div style={{
          color: 'rgba(255,255,255,0.4)', fontSize: 10, fontWeight: 600,
          letterSpacing: '0.08em', marginTop: 18, marginBottom: 8,
        }}>WHEN?</div>
        <div style={{ display: 'flex', gap: 6 }}>
          <div style={{
            padding: '8px 14px', borderRadius: 18, background: '#E8633A',
            fontSize: 12, fontWeight: 600,
          }}>Tonight</div>
          <div style={{
            padding: '8px 14px', borderRadius: 18,
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.08)',
            fontSize: 12, fontWeight: 600,
          }}>Tomorrow</div>
          <div style={{
            padding: '8px 14px', borderRadius: 18,
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.08)',
            fontSize: 12, fontWeight: 600,
          }}>Weekend</div>
          <div style={{
            padding: '8px 10px', borderRadius: 18,
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.08)',
            fontSize: 12,
          }}>📅</div>
        </div>
        <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', marginTop: 8 }}>
          Tuesday 28 April · 19:00 · <span style={{ color: '#E8633A', textDecoration: 'underline' }}>Change time</span>
        </div>
      </div>
      <div style={{ padding: '0 16px 18px' }}>
        <div style={{
          background: '#E8633A', height: 52, borderRadius: 14,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 600, fontSize: 15,
        }}>Create plan</div>
      </div>
      <PhoneTabBar active="plus"/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Discover — IMG_0509
// ─────────────────────────────────────────────────────────────
function PhoneDiscover({ time = '17:20' }) {
  const days = [['Any', 'day', true], ['Today', '28'], ['Tom', '29'], ['Thu', '30'], ['Fri', '1'], ['Sat', '2']];
  const cats = ['All', 'Live music', 'Festivals', 'Sports', 'Games'];
  return (
    <div style={{
      width: '100%', height: '100%', background: '#0A0A0B',
      display: 'flex', flexDirection: 'column',
      fontFamily: '"Geist", system-ui, sans-serif', color: '#fff',
    }}>
      <PhoneStatusBar time={time}/>
      <div style={{ padding: '8px 20px 14px', fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>
        Discover
      </div>
      <div style={{ height: 1, background: 'rgba(255,255,255,0.08)' }}/>
      <div style={{ padding: '14px 16px 0' }}>
        <div style={{
          height: 40, borderRadius: 20, background: 'rgba(255,255,255,0.05)',
          display: 'flex', alignItems: 'center', padding: '0 14px', gap: 8,
          fontSize: 12, color: 'rgba(255,255,255,0.4)',
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/>
          </svg>
          Search events, places, people
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 12, overflow: 'hidden' }}>
          {days.map(([a, b, on]) => (
            <div key={a} style={{
              minWidth: 46, height: 50, borderRadius: 12,
              background: on ? '#E8633A' : 'rgba(255,255,255,0.04)',
              border: on ? 'none' : '1px solid rgba(255,255,255,0.08)',
              display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center',
              fontSize: 10, fontWeight: 600,
            }}>
              <div style={{ opacity: 0.85 }}>{a}</div>
              <div style={{ fontSize: 13, fontWeight: 700 }}>{b}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 10, overflow: 'hidden' }}>
          {cats.map((c, i) => (
            <div key={c} style={{
              padding: '6px 12px', borderRadius: 16,
              background: i === 0 ? '#E8633A' : 'rgba(255,255,255,0.04)',
              border: i === 0 ? 'none' : '1px solid rgba(255,255,255,0.08)',
              fontSize: 11, fontWeight: 600, whiteSpace: 'nowrap',
            }}>{c}</div>
          ))}
        </div>
        <div style={{
          marginTop: 14, fontSize: 10, color: 'rgba(255,255,255,0.5)',
          display: 'flex', alignItems: 'center', gap: 4,
        }}>
          📍 200 events · Helsinki area
        </div>
        <div style={{ marginTop: 12 }}>
          <div style={{
            display: 'inline-block', padding: '3px 8px',
            background: 'rgba(255,255,255,0.06)', borderRadius: 4,
            fontSize: 9, fontWeight: 600,
          }}>Food &amp; drink</div>
          <span style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', marginLeft: 8 }}>
            · Mon 1 Jan 11:00 · Helsinki
          </span>
          <div style={{ fontSize: 16, fontWeight: 700, marginTop: 4 }}>Children's Town</div>
          <div style={{
            marginTop: 8, height: 120, borderRadius: 12,
            background: 'linear-gradient(180deg, #4a2418, #2a1810)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'rgba(255,255,255,0.3)', fontSize: 24,
          }}>📅</div>
        </div>
      </div>
      <PhoneTabBar active="discover"/>
    </div>
  );
}

function PhoneTabBar({ active = 'home' }) {
  const tabs = [
    ['home', 'Home', '⌂'],
    ['discover', 'Discover', '◎'],
    ['plus', '', '+'],
    ['alerts', 'Alerts', '◔'],
    ['profile', 'Profile', '◯'],
  ];
  return (
    <div style={{
      borderTop: '1px solid rgba(255,255,255,0.06)',
      padding: '8px 20px 14px', display: 'flex',
      justifyContent: 'space-between', alignItems: 'center',
      background: '#0A0A0B', position: 'relative',
    }}>
      {tabs.map(([id, lbl, ico]) => {
        const isPlus = id === 'plus';
        const on = id === active;
        if (isPlus) {
          return (
            <div key={id} style={{
              width: 48, height: 48, borderRadius: 24, background: '#E8633A',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 24, fontWeight: 300, color: '#fff', marginTop: -16,
              boxShadow: '0 6px 20px rgba(232,99,58,0.4)',
            }}>+</div>
          );
        }
        return (
          <div key={id} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
            color: on ? '#E8633A' : 'rgba(255,255,255,0.5)',
            fontSize: 9, fontWeight: 500, minWidth: 44,
          }}>
            <div style={{ fontSize: 16 }}>{ico}</div>
            {lbl}
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, {
  EvntdLogo, PhoneStatusBar, PhoneSplash, PhoneHome, PhonePlan, PhoneDiscover, PhoneTabBar,
});