// PhoneMockup — a stylized iPhone showing PlaceSpace's "Enter The Space"
// screen, matching the provided simulator screenshot. Designed to scale
// (pass `width` and everything inside scales proportionally).

function PhoneMockup({ width = 300, venue = 'The Harlequin', showChrome = true, imageUrl = '/landings/assets/hiphop_concert.png' }) {
  const h = width * (812 / 400); // iPhone aspect
  const s = width / 400; // scale factor (base design is 400px wide)
  return (
    <div style={{
      width, height: h, position: 'relative',
      borderRadius: 44 * s, overflow: 'hidden',
      background: BRAND.gray900,
      boxShadow: showChrome
        ? `0 ${40 * s}px ${80 * s}px -${20 * s}px rgba(0,0,0,0.35), 0 0 0 ${2 * s}px rgba(0,0,0,0.8), inset 0 0 0 ${6 * s}px #1a1a1a`
        : 'none',
      fontFamily: BRAND.font,
    }}>
      {/* Inner screen */}
      <div style={{
        position: 'absolute', inset: showChrome ? 8 * s : 0,
        borderRadius: (showChrome ? 36 : 0) * s, overflow: 'hidden',
        background: BRAND.white,
        display: 'flex', flexDirection: 'column',
      }}>
        {/* Status bar + notch */}
        {showChrome && (
          <div style={{ height: 44 * s, position: 'relative', flexShrink: 0, background: BRAND.white, display: 'flex', alignItems: 'center', padding: `0 ${22 * s}px`, justifyContent: 'space-between' }}>
            <div style={{ fontSize: 15 * s, fontWeight: 600, color: BRAND.gray900 }}>9:00</div>
            <div style={{
              position: 'absolute', left: '50%', top: 8 * s, transform: 'translateX(-50%)',
              width: 110 * s, height: 28 * s, background: BRAND.black, borderRadius: 14 * s,
            }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 5 * s }}>
              <div style={{ fontSize: 10 * s, color: BRAND.gray400, letterSpacing: 1 * s }}>••••</div>
              <svg width={15 * s} height={11 * s} viewBox="0 0 15 11"><path d="M7.5 1C4.7 1 2.1 2 0 3.8l1.4 1.4C3.1 3.8 5.2 3 7.5 3s4.4.8 6.1 2.2L15 3.8C12.9 2 10.3 1 7.5 1zm0 4C5.7 5 4 5.7 2.7 6.8L4.1 8.2C5 7.5 6.2 7 7.5 7s2.5.5 3.4 1.2l1.4-1.4C11 5.7 9.3 5 7.5 5zm0 4c-.8 0-1.6.3-2.1.9L7.5 12l2.1-2.1c-.5-.6-1.3-.9-2.1-.9z" fill={BRAND.gray900}/></svg>
              <div style={{ width: 24 * s, height: 11 * s, border: `${1.5 * s}px solid ${BRAND.gray900}`, borderRadius: 3 * s, padding: 1 * s, position: 'relative' }}>
                <div style={{ width: '100%', height: '100%', background: BRAND.gray900, borderRadius: 1 * s }} />
                <div style={{ position: 'absolute', right: -3 * s, top: '30%', width: 2 * s, height: '40%', background: BRAND.gray900, borderRadius: 1 * s }} />
              </div>
            </div>
          </div>
        )}

        {/* Top bar */}
        <div style={{ height: 52 * s, padding: `0 ${16 * s}px`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0, background: BRAND.white, borderBottom: `1px solid ${BRAND.gray100}` }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 * s }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 3 * s }}>
              <div style={{ width: 16 * s, height: 1.5 * s, background: BRAND.gray900 }}/>
              <div style={{ width: 16 * s, height: 1.5 * s, background: BRAND.gray900 }}/>
              <div style={{ width: 16 * s, height: 1.5 * s, background: BRAND.gray900 }}/>
            </div>
            <img src="/landings/assets/logo.png" alt="PlaceSpace" width={22 * s} height={22 * s} style={{ display: 'block', borderRadius: 5 * s }}/>
            <div style={{ fontSize: 17 * s, fontWeight: 700, color: BRAND.emerald600, letterSpacing: -0.2 * s }}>Place Space</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 * s, color: BRAND.gray700 }}>
            <svg width={18 * s} height={18 * s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
            <IconUsers size={18 * s} strokeWidth={2}/>
            <svg width={18 * s} height={18 * s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></svg>
          </div>
        </div>

        {/* Venue pills */}
        <div style={{ padding: `${10 * s}px ${16 * s}px`, display: 'flex', gap: 8 * s, overflow: 'hidden', flexShrink: 0, background: BRAND.white }}>
          <div style={{ padding: `${6 * s}px ${12 * s}px`, borderRadius: 999 * s, background: '#FEF2F2', border: `1px solid #FECACA`, color: '#DC2626', fontSize: 11 * s, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 5 * s, whiteSpace: 'nowrap' }}>
            <svg width={11 * s} height={11 * s} viewBox="0 0 24 24" fill="currentColor"><path d="M18 8h1a4 4 0 0 1 0 8h-1M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8Z" stroke="currentColor" strokeWidth="2" fill="none"/></svg>
            {venue}
          </div>
          <div style={{ padding: `${6 * s}px ${12 * s}px`, borderRadius: 999 * s, background: '#FEF2F2', border: `1px solid #FECACA`, color: '#DC2626', fontSize: 11 * s, fontWeight: 600, whiteSpace: 'nowrap' }}>
            B55 Craft House
          </div>
        </div>

        {/* Who's here row */}
        <div style={{ padding: `${8 * s}px ${16 * s}px ${14 * s}px`, background: BRAND.white, borderBottom: `1px solid ${BRAND.gray100}`, flexShrink: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 * s, marginBottom: 10 * s, color: BRAND.emerald600 }}>
            <IconUsers size={14 * s} strokeWidth={2}/>
            <span style={{ fontSize: 10 * s, fontWeight: 700, letterSpacing: 1.2 * s, color: BRAND.gray700 }}>WHO'S HERE</span>
            <span style={{ fontSize: 10 * s, color: BRAND.gray400 }}>(51)</span>
          </div>
          <div style={{ display: 'flex', gap: 8 * s, justifyContent: 'space-between' }}>
            {AVATAR_NAMES.slice(0, 7).map((a, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 * s, flex: 1, minWidth: 0 }}>
                <Avatar name={a.name} hue={a.hue} img={a.img} size={38 * s}/>
                <div style={{ fontSize: 9 * s, color: BRAND.gray600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '100%' }}>{a.name}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Timeline feed */}
        <PhoneFeed s={s}/>

        {/* Bottom nav */}
        <div style={{ height: 66 * s, background: BRAND.white, borderTop: `1px solid ${BRAND.gray100}`, display: 'flex', alignItems: 'center', justifyContent: 'space-around', paddingBottom: 8 * s, flexShrink: 0 }}>
          {[
            { label: 'Timeline', active: true, icon: (
              <svg width={16 * s} height={16 * s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
            ) },
            { label: 'Spaces', icon: <IconAnchor size={16 * s} strokeWidth={2}/> },
            { label: 'Events', icon: <IconCalendar size={16 * s} strokeWidth={2}/> },
            { label: 'Messages', icon: <IconMessageCircle size={16 * s} strokeWidth={2}/> },
            { label: 'Profile', icon: <IconUsers size={16 * s} strokeWidth={2}/> },
          ].map((t, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 * s, color: t.active ? BRAND.emerald600 : BRAND.gray400 }}>
              {t.icon}
              <div style={{ fontSize: 8 * s, fontWeight: t.active ? 600 : 400 }}>{t.label}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.PhoneMockup = PhoneMockup;

// Feed component — replaces the timeline screenshot with a drawn feed
// showing posts (avatar, name, time, caption, photo, likes, actions).
function PhoneFeed({ s = 1 }) {
  // Posts reference AVATAR_NAMES (consistent across flyers).
  // 'photo' is a CSS background for the post image — gradient-based
  // scenes so we don't need asset images for every vibe.
  const posts = [
    {
      name: 'Sofia',
      hue: 335,
      img: 47, // fashionable woman portrait from pravatar pool
      time: '2m ago',
      caption: 'Rooftop opening at Skybar tonight 💫 who\'s coming?',
      // Object form so React applies each property correctly (the shorthand
      // string was rejected silently and showed only the bg color).
      photo: { backgroundColor: '#000', backgroundImage: 'url(/landings/assets/timeline-girls.jpeg)', backgroundPosition: 'center 30%', backgroundSize: 'cover' },
      likes: 42,
      liked: true,
    },
    {
      name: 'Sofia',
      hue: 335,
      img: 47,
      time: '9m ago',
      caption: 'Rooftop opening at Skybar tonight \ud83d\udcab who\'s coming?',
      photo: { backgroundColor: '#000', backgroundImage: 'url(/landings/assets/timeline-skybar.jpeg)', backgroundPosition: 'center 25%', backgroundSize: 'cover' },
      likes: 128,
      liked: false,
    },
  ];

  return (
    <div style={{ flex: 1, background: BRAND.gray50, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      {posts.map((p, i) => (
        <FeedPost key={i} post={p} s={s}/>
      ))}
    </div>
  );
}

function FeedPost({ post, s }) {
  return (
    <div style={{ background: BRAND.white, borderBottom: `${6 * s}px solid ${BRAND.gray50}` }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 * s, padding: `${12 * s}px ${14 * s}px ${10 * s}px` }}>
        <Avatar name={post.name} hue={post.hue} img={post.img} size={36 * s}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13 * s, fontWeight: 700, color: BRAND.gray900, lineHeight: 1.1 }}>{post.name}</div>
          <div style={{ fontSize: 10 * s, color: BRAND.gray400, marginTop: 2 * s }}>{post.time}</div>
        </div>
      </div>

      {/* Caption */}
      <div style={{ fontSize: 12 * s, color: BRAND.gray800, lineHeight: 1.4, padding: `0 ${14 * s}px ${10 * s}px` }}>{post.caption}</div>

      {/* Photo */}
      <div style={{
        width: '100%', aspectRatio: '1 / 1',
        ...(typeof post.photo === 'string' ? { background: post.photo } : post.photo),
        position: 'relative',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {post.photoIcon && (
          <div style={{
            fontSize: 72 * s, filter: 'drop-shadow(0 4px 24px rgba(0,0,0,0.35))',
          }}>{post.photoIcon}</div>
        )}
      </div>

      {/* Likes + actions */}
      <div style={{ padding: `${10 * s}px ${14 * s}px ${12 * s}px` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 * s, marginBottom: 8 * s }}>
          <svg width={14 * s} height={14 * s} viewBox="0 0 24 24" fill="#ef4444" stroke="#ef4444" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
          <span style={{ fontSize: 11 * s, fontWeight: 600, color: BRAND.gray800 }}>{post.likes} likes</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 20 * s }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 * s, color: post.liked ? '#ef4444' : BRAND.gray500 }}>
            <svg width={14 * s} height={14 * s} viewBox="0 0 24 24" fill={post.liked ? '#ef4444' : 'none'} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span style={{ fontSize: 11 * s, fontWeight: 500 }}>Like</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 * s, color: BRAND.gray500 }}>
            <svg width={14 * s} height={14 * s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            <span style={{ fontSize: 11 * s, fontWeight: 500 }}>Comment</span>
          </div>
        </div>
      </div>
    </div>
  );
}

window.PhoneFeed = PhoneFeed;