/* Lark — trip planning app mockup inside iOS phone frame */

function LarkApp() {
  const larkStyles = {
    root: {
      width: '100%',
      height: '100%',
      background: '#F2F1E9',
      fontFamily: '"Geist", -apple-system, sans-serif',
      color: '#0E1714',
      display: 'flex',
      flexDirection: 'column',
      overflow: 'hidden',
      letterSpacing: '-0.005em',
    },
    header: {
      padding: '48px 20px 12px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
    logo: {
      display: 'flex',
      alignItems: 'center',
      gap: 8,
      fontSize: 22,
      fontWeight: 600,
      letterSpacing: '-0.025em',
    },
    avatar: {
      width: 32, height: 32, borderRadius: 16,
      background: 'linear-gradient(135deg, #B8E04A, #0F4A38)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#0E1714', fontWeight: 600, fontSize: 12,
    },
    eyebrow: {
      padding: '0 20px',
      fontSize: 11,
      fontFamily: '"JetBrains Mono", monospace',
      color: '#6B736E',
      textTransform: 'uppercase',
      letterSpacing: '0.06em',
      marginTop: 4,
      marginBottom: 6,
    },
    h1: {
      padding: '0 20px',
      fontSize: 28,
      fontWeight: 600,
      letterSpacing: '-0.035em',
      lineHeight: 1.04,
      margin: '0 0 14px',
    },
    italic: {
      fontFamily: '"Instrument Serif", serif',
      fontStyle: 'italic',
      fontWeight: 400,
      letterSpacing: '-0.02em',
    },
    tripCard: {
      margin: '4px 16px 14px',
      background: '#0E1714',
      color: '#F2F1E9',
      borderRadius: 22,
      padding: 18,
      position: 'relative',
      overflow: 'hidden',
    },
    daysRow: {
      display: 'flex',
      gap: 8,
      margin: '14px 16px 14px',
      overflow: 'hidden',
    },
    dayChip: {
      flex: '0 0 auto',
      padding: '8px 14px',
      borderRadius: 20,
      background: '#fff',
      border: '1px solid #DEDDD3',
      fontSize: 12,
      fontWeight: 500,
      color: '#3B453F',
      whiteSpace: 'nowrap',
    },
    dayChipActive: {
      background: '#0E1714',
      color: '#B8E04A',
      borderColor: '#0E1714',
    },
    sectionTitle: {
      padding: '4px 20px 10px',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    sectionTitleH: {
      fontSize: 14,
      fontWeight: 600,
      letterSpacing: '-0.01em',
      whiteSpace: 'nowrap',
    },
    sectionTitleSub: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 10,
      color: '#6B736E',
      textTransform: 'uppercase',
      letterSpacing: '0.06em',
      whiteSpace: 'nowrap',
    },
    stopList: {
      padding: '0 16px',
      display: 'flex',
      flexDirection: 'column',
      gap: 8,
      flex: 1,
      overflow: 'hidden',
    },
    stop: {
      background: '#fff',
      borderRadius: 16,
      padding: '12px 14px',
      display: 'flex',
      gap: 12,
      alignItems: 'center',
      border: '1px solid #E5E4DC',
    },
    stopIcon: {
      width: 38, height: 38, borderRadius: 10,
      background: '#F2F1E9',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 18,
      flexShrink: 0,
    },
    stopBody: { flex: 1, minWidth: 0 },
    stopName: { fontSize: 13.5, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 2 },
    stopMeta: { fontSize: 11, color: '#6B736E', display: 'flex', gap: 8, alignItems: 'center' },
    stopTime: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 10,
      color: '#3B453F',
      background: '#F2F1E9',
      padding: '3px 8px',
      borderRadius: 6,
    },
    legLine: {
      display: 'flex',
      gap: 8,
      alignItems: 'center',
      padding: '0 22px',
      color: '#6B736E',
      fontSize: 10,
      fontFamily: '"JetBrains Mono", monospace',
    },
    legDots: {
      width: 1.5,
      height: 16,
      background: 'repeating-linear-gradient(to bottom, #6B736E 0 2px, transparent 2px 5px)',
    },
    bottomBar: {
      padding: '8px 16px 8px',
      borderTop: '1px solid #E5E4DC',
      background: '#ECEBE2',
      display: 'flex',
      justifyContent: 'space-around',
      alignItems: 'center',
    },
    tab: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, padding: '6px 8px' },
    tabLabel: { fontSize: 9, color: '#6B736E', fontWeight: 500 },
    tabLabelActive: { color: '#0E1714' },
  };

  return (
    <div style={larkStyles.root}>
      {/* Header */}
      <div style={larkStyles.header}>
        <div style={larkStyles.logo}>
          <svg width="22" height="22" viewBox="0 0 32 32">
            <rect width="32" height="32" rx="8" fill="#0E1714"/>
            <path d="M6 22 Q16 12 26 22" stroke="#B8E04A" strokeWidth="2.4" fill="none" strokeLinecap="round"/>
            <path d="M6 16 Q16 6 26 16" stroke="#F2F1E9" strokeWidth="2.4" fill="none" strokeLinecap="round"/>
          </svg>
          Lark
        </div>
        <div style={larkStyles.avatar}>AM</div>
      </div>

      {/* Trip header card */}
      <div style={larkStyles.eyebrow}>Trip · 3 days · 12 stops</div>
      <h1 style={larkStyles.h1}>
        Tokyo, <span style={larkStyles.italic}>slowly</span>.
      </h1>

      <div style={larkStyles.tripCard}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <div style={{fontFamily:'"JetBrains Mono", monospace', fontSize:10, color:'rgba(242,241,233,.55)', textTransform:'uppercase', letterSpacing:'0.06em'}}>Sat 8 — Mon 10 Jun</div>
          <div style={{fontSize:11, color:'#B8E04A', display:'flex', alignItems:'center', gap:4}}>
            <span style={{width:6, height:6, borderRadius:3, background:'#B8E04A'}}></span>
            Synced
          </div>
        </div>
        {/* Mini "map" */}
        <div style={{marginTop:12, height:70, borderRadius:12, background:'linear-gradient(140deg, #1C2521 0%, #0F4A38 100%)', position:'relative', overflow:'hidden'}}>
          <svg viewBox="0 0 280 88" width="100%" height="100%" style={{position:'absolute', inset:0}}>
            {/* grid */}
            <path d="M0 22 L280 22 M0 44 L280 44 M0 66 L280 66" stroke="rgba(184,224,74,0.08)" strokeWidth="1"/>
            <path d="M70 0 L70 88 M140 0 L140 88 M210 0 L210 88" stroke="rgba(184,224,74,0.08)" strokeWidth="1"/>
            {/* route */}
            <path d="M30 64 Q70 24 110 44 T200 30 T260 50" stroke="#B8E04A" strokeWidth="1.6" fill="none" strokeDasharray="3 3"/>
            {/* points */}
            <circle cx="30" cy="64" r="4" fill="#B8E04A"/>
            <circle cx="110" cy="44" r="3" fill="#F2F1E9"/>
            <circle cx="160" cy="38" r="3" fill="#F2F1E9"/>
            <circle cx="200" cy="30" r="3" fill="#F2F1E9"/>
            <circle cx="260" cy="50" r="4" fill="#B8E04A"/>
          </svg>
        </div>
        <div style={{marginTop:12, display:'flex', justifyContent:'space-between', fontSize:11}}>
          <div>
            <div style={{color:'rgba(242,241,233,.55)', fontFamily:'"JetBrains Mono", monospace', fontSize:9, textTransform:'uppercase', letterSpacing:'0.06em', marginBottom:2}}>Day 1</div>
            <div style={{color:'#F2F1E9', fontWeight:500}}>Shibuya → Harajuku</div>
          </div>
          <div style={{textAlign:'right'}}>
            <div style={{color:'rgba(242,241,233,.55)', fontFamily:'"JetBrains Mono", monospace', fontSize:9, textTransform:'uppercase', letterSpacing:'0.06em', marginBottom:2}}>Walk</div>
            <div style={{color:'#F2F1E9', fontWeight:500}}>2.4 km</div>
          </div>
        </div>
      </div>

      {/* Days */}
      <div style={larkStyles.daysRow}>
        <div style={{...larkStyles.dayChip, ...larkStyles.dayChipActive}}>Sat · Day 1</div>
        <div style={larkStyles.dayChip}>Sun · Day 2</div>
        <div style={larkStyles.dayChip}>Mon · Day 3</div>
      </div>

      <div style={larkStyles.sectionTitle}>
        <div style={larkStyles.sectionTitleH}>Today's stops</div>
        <div style={larkStyles.sectionTitleSub}>Auto-grouped</div>
      </div>

      <div style={larkStyles.stopList}>
        <div style={larkStyles.stop}>
          <div style={larkStyles.stopIcon}>☕</div>
          <div style={larkStyles.stopBody}>
            <div style={larkStyles.stopName}>Fuglen Tokyo</div>
            <div style={larkStyles.stopMeta}>
              <span>Coffee · Tomigaya</span>
            </div>
          </div>
          <div style={larkStyles.stopTime}>09:00</div>
        </div>
        <div style={larkStyles.legLine}>
          <div style={larkStyles.legDots}></div>
          <span>14 min walk · 1.1 km</span>
        </div>
        <div style={larkStyles.stop}>
          <div style={{...larkStyles.stopIcon, background:'#B8E04A'}}>⛩</div>
          <div style={larkStyles.stopBody}>
            <div style={larkStyles.stopName}>Meiji Jingu Shrine</div>
            <div style={larkStyles.stopMeta}>
              <span>Shrine · Shibuya</span>
            </div>
          </div>
          <div style={larkStyles.stopTime}>10:30</div>
        </div>
        <div style={larkStyles.legLine}>
          <div style={larkStyles.legDots}></div>
          <span>9 min walk · 0.7 km</span>
        </div>
        <div style={larkStyles.stop}>
          <div style={larkStyles.stopIcon}>🥢</div>
          <div style={larkStyles.stopBody}>
            <div style={larkStyles.stopName}>Afuri Harajuku</div>
            <div style={larkStyles.stopMeta}>
              <span>Yuzu ramen · saved from TikTok</span>
            </div>
          </div>
          <div style={larkStyles.stopTime}>12:45</div>
        </div>
      </div>

      {/* Bottom tab bar */}
      <div style={larkStyles.bottomBar}>
        <div style={larkStyles.tab}>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M3 8 L10 3 L17 8 V16 H3 V8Z" stroke="#0E1714" strokeWidth="1.5" strokeLinejoin="round"/>
          </svg>
          <div style={{...larkStyles.tabLabel, ...larkStyles.tabLabelActive}}>Trips</div>
        </div>
        <div style={larkStyles.tab}>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <rect x="3" y="3" width="14" height="14" rx="3" stroke="#6B736E" strokeWidth="1.5"/>
            <path d="M3 8 H17" stroke="#6B736E" strokeWidth="1.5"/>
          </svg>
          <div style={larkStyles.tabLabel}>Lists</div>
        </div>
        <div style={{...larkStyles.tab, marginTop: -16}}>
          <div style={{width: 44, height: 44, borderRadius: 22, background: '#0E1714', display:'flex', alignItems:'center', justifyContent:'center'}}>
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
              <path d="M9 3V15 M3 9H15" stroke="#B8E04A" strokeWidth="2" strokeLinecap="round"/>
            </svg>
          </div>
        </div>
        <div style={larkStyles.tab}>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <circle cx="9" cy="9" r="6" stroke="#6B736E" strokeWidth="1.5"/>
            <path d="M14 14L17 17" stroke="#6B736E" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
          <div style={larkStyles.tabLabel}>Discover</div>
        </div>
        <div style={larkStyles.tab}>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <circle cx="10" cy="7" r="3" stroke="#6B736E" strokeWidth="1.5"/>
            <path d="M4 17 C4 13 7 12 10 12 C13 12 16 13 16 17" stroke="#6B736E" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
          <div style={larkStyles.tabLabel}>You</div>
        </div>
      </div>
    </div>
  );
}

window.LarkApp = LarkApp;