// Variant A — Apple-style clean single-page landing
// Hero left, phone right. Big "Download" CTA.

function LandingV1({ width = 1280, source = 'facebook', headline, sub, ctaPrimary }) {
  const isMobile = width < 600;
  const heroPad = isMobile ? 32 : 64;
  const _headline = headline || 'Connect with people in places, events and communities.';
  const _sub = sub || 'See who\u2019s there, what\u2019s happening, and the energy around you \u2014 live, wherever you go.';
  // Hero CTA — was "Get the app" which pushed users straight to the
  // store. Web is browse-capable now (tickets purchasable without auth)
  // so the more useful first action is "Discover" — drops them into the
  // event/space directory. Store badges still render below for users
  // who want the mobile app immediately.
  const _cta = ctaPrimary || 'Discover';
  const [menuOpen, setMenuOpen] = React.useState(false);

  return (
    <div style={{
      width: '100%', minHeight: isMobile ? 'auto' : 720,
      background: LBRAND.cream,
      fontFamily: BRAND.font,
      color: LBRAND.gray900,
      overflow: 'hidden',
      position: 'relative'
    }}>
      {/* Top nav */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: `20px ${heroPad}px`,
        gap: 16
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <PSLogo size={isMobile ? 44 : 56} />
          <div style={{ fontSize: isMobile ? 22 : 26, fontWeight: 800, color: LBRAND.emerald600, letterSpacing: -0.4 }}>Place Space</div>
        </div>
        {isMobile ?
        <button aria-label="Open menu" onClick={() => setMenuOpen(true)} style={{
          width: 44, height: 44, borderRadius: 12,
          border: `1px solid ${LBRAND.gray200}`,
          background: LBRAND.white,
          display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 5,
          padding: 0, cursor: 'pointer'
        }}>
            <span style={{ width: 18, height: 2, background: LBRAND.gray900, borderRadius: 2 }} />
            <span style={{ width: 18, height: 2, background: LBRAND.gray900, borderRadius: 2 }} />
            <span style={{ width: 18, height: 2, background: LBRAND.gray900, borderRadius: 2 }} />
          </button> :

        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <a href="/blog" style={{
            fontSize: 14, fontWeight: 600, color: LBRAND.gray700,
            padding: '10px 16px', borderRadius: 10,
            textDecoration: 'none'
          }}>Blog</a>
            <a href="/for-business" style={{
            fontSize: 14, fontWeight: 600, color: LBRAND.gray700,
            padding: '10px 16px', borderRadius: 10,
            textDecoration: 'none'
          }}>For Business</a>
            <a href="/auth" style={{
            fontSize: 14, fontWeight: 600, color: LBRAND.gray700,
            padding: '10px 16px', borderRadius: 10,
            textDecoration: 'none',
            border: `1px solid ${LBRAND.gray200}`,
            background: LBRAND.white
          }}>Log in</a>
            <a href="/auth?mode=signup" style={{
            fontSize: 14, fontWeight: 700, color: LBRAND.white,
            padding: '10px 16px', borderRadius: 10,
            textDecoration: 'none',
            background: LBRAND.emerald600
          }}>Sign up</a>
          </div>
        }
      </div>

      {/* Mobile menu drawer (hamburger) — Blog / For Business / Log in / Sign up */}
      {menuOpen && (
        <div onClick={() => setMenuOpen(false)} style={{
          position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', zIndex: 100,
          display: 'flex', justifyContent: 'flex-end',
        }}>
          <div onClick={(e) => e.stopPropagation()} style={{
            width: 280, maxWidth: '85%', height: '100%',
            background: LBRAND.white, padding: 24,
            display: 'flex', flexDirection: 'column', gap: 6,
            boxShadow: '-8px 0 32px rgba(0,0,0,0.12)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <PSLogo size={36} />
                <div style={{ fontSize: 18, fontWeight: 800, color: LBRAND.emerald600 }}>Place Space</div>
              </div>
              <button aria-label="Close" onClick={() => setMenuOpen(false)} style={{
                width: 32, height: 32, borderRadius: 8, border: 'none',
                background: LBRAND.gray100, color: LBRAND.gray700,
                fontSize: 18, cursor: 'pointer', lineHeight: 1,
              }}>×</button>
            </div>
            {[
              { label: 'Blog', href: '/blog' },
              { label: 'For Business', href: '/for-business' },
              { label: 'Log in', href: '/auth' },
            ].map((m) => (
              <a key={m.label} href={m.href} style={{
                padding: '14px 12px', borderRadius: 10,
                fontSize: 15, fontWeight: 600, color: LBRAND.gray800,
                textDecoration: 'none', borderBottom: `1px solid ${LBRAND.gray100}`,
              }}>{m.label}</a>
            ))}
            <a href="/auth?mode=signup" style={{
              marginTop: 12, padding: '14px 16px', borderRadius: 12,
              fontSize: 15, fontWeight: 700, color: LBRAND.white,
              textDecoration: 'none', textAlign: 'center',
              background: LBRAND.emerald600,
            }}>Sign up</a>
            <div style={{ marginTop: 18, display: 'flex', gap: 10, justifyContent: 'center' }}>
              <StoreBadgeRow width={120} />
            </div>
          </div>
        </div>
      )}

      {/* Hero */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.1fr 0.9fr',
        gap: isMobile ? 32 : 48,
        padding: `${isMobile ? 16 : 32}px ${heroPad}px ${isMobile ? 48 : 80}px`,
        alignItems: 'center'
      }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 12px', borderRadius: 999,
            background: LBRAND.emerald50, color: LBRAND.emerald700,
            fontSize: 12, fontWeight: 600, letterSpacing: 0.4,
            marginBottom: 24
          }}>
            <LiveDot size={6} />
            LIVE NOW
          </div>
          <h1 style={{
            fontSize: isMobile ? 40 : 60,
            lineHeight: 1.05,
            letterSpacing: -1.5,
            fontWeight: 700,
            margin: '0 0 20px',
            color: LBRAND.ink,
            textWrap: 'balance'
          }}>
            {_headline}
          </h1>
          <p style={{
            fontSize: isMobile ? 17 : 20,
            lineHeight: 1.5,
            color: LBRAND.gray600,
            margin: '0 0 32px',
            maxWidth: 520
          }}>
            {_sub}
          </p>

          {/* CTA cluster */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <button className="lp-btn-primary" onClick={() => {
              // Route to in-app Discover. The store badge row below
              // handles the "I'd rather just install the app" path.
              window.location.href = '/discover';
            }} style={{
              fontSize: 17, padding: '18px 28px', borderRadius: 14,
              alignSelf: 'flex-start',
              display: 'inline-flex', alignItems: 'center', gap: 10
            }}>
              {_cta}
              <IconArrowRight size={20} strokeWidth={2.5} />
            </button>
            <StoreBadgeRow width={148} />
          </div>

          {/* Social proof */}
          <div style={{ marginTop: 36, display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex' }}>
              {AVATAR_NAMES.slice(0, 5).map((a, i) =>
              <div key={i} style={{ marginLeft: i === 0 ? 0 : -10, borderRadius: '50%', boxShadow: `0 0 0 2px ${LBRAND.cream}` }}>
                  <Avatar name={a.name} hue={a.hue} img={a.img} size={32} />
                </div>
              )}
            </div>
            <div>
              <Stars rating={4.8} size={13} />
              <div style={{ fontSize: 12, color: LBRAND.gray500, marginTop: 2 }}></div>
            </div>
          </div>
        </div>

        {/* Phone */}
        <div style={{
          display: 'flex', justifyContent: 'center',
          position: 'relative'
        }}>
          <div style={{
            position: 'absolute', inset: '-10% -20%',
            background: `radial-gradient(circle at 60% 40%, ${LBRAND.emerald100}, transparent 60%)`,
            filter: 'blur(20px)',
            pointerEvents: 'none'
          }} />
          <div style={{ position: 'relative' }}>
            <LandingPhone width={isMobile ? 240 : 300} venue="SoMa" />
          </div>
        </div>
      </div>

      {/* How to join — 4-card grid with phone shots */}
      <div style={{
        background: LBRAND.cream,
        borderTop: `1px solid ${LBRAND.gray100}`,
        padding: `${isMobile ? 48 : 80}px ${heroPad}px ${isMobile ? 48 : 96}px`
      }}>
        <div style={{ maxWidth: 640, marginBottom: isMobile ? 28 : 48 }}>
          <h2 style={{
            fontSize: isMobile ? 36 : 56,
            lineHeight: 1.05,
            letterSpacing: -1.5,
            fontWeight: 700,
            margin: '0 0 14px',
            color: LBRAND.emerald700,
            textWrap: 'balance'
          }}>
            How to join<br />the space.
          </h2>
          <p style={{ fontSize: isMobile ? 15 : 17, color: LBRAND.gray600, margin: 0 }}>
            Four taps from download to "welcome."
          </p>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 12 : 24
        }}>
          {[
          { step: 'Step 1', label: 'Pick your space', body: 'The spaces around you \u2014 cities, neighborhoods, or the exact venue you\u2019re walking up to.', src: '/landings/assets/step1-final.png' },
          { step: 'Step 2', label: 'Set how you show up', body: 'Public, friends-only, or verified-only. You decide who sees you in the room.', src: '/landings/assets/step2-final.png' },
          { step: 'Step 3', label: 'Enter the space', body: 'You have to actually be there. When you arrive, tap Enter \u2014 your photo joins the timeline and the room knows you\u2019re in.', src: '/landings/assets/step3-final.png' },
          { step: 'Step 4', label: 'See who\u2019s here', body: 'Real people, in real time. Tap any avatar to view their profile or start a chat.', src: '/landings/assets/step4-skybar.png' },
          { step: 'Step 5', label: 'Join the conversation', body: 'Post a photo, drop a comment, react to what\u2019s happening. The timeline moves with the room.', src: '/landings/assets/step5-final.png' },
          { step: 'Step 6', label: 'Share your profile', body: 'Your photo, your verified socials with total followers, your interests, and your gallery \u2014 one link people can tap to know you.', src: '/landings/assets/step6-profile.png' }].
          map((s, i) =>
          <div key={i} style={{
            background: LBRAND.white,
            border: `1px solid ${LBRAND.gray100}`,
            borderRadius: 18,
            padding: isMobile ? 12 : 20,
            boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
            display: 'flex', flexDirection: 'column',
            gap: isMobile ? 10 : 18,
            minWidth: 0
          }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <div style={{
                fontSize: 11,
                fontWeight: 700,
                letterSpacing: 1.2,
                color: LBRAND.emerald600,
                textTransform: 'uppercase'
              }}>{s.step}</div>
                <div style={{
                fontSize: isMobile ? 16 : 22,
                fontWeight: 700,
                color: LBRAND.gray900,
                letterSpacing: -0.3,
                lineHeight: 1.2
              }}>{s.label}</div>
                <div style={{
                fontSize: isMobile ? 13 : 14,
                color: LBRAND.gray600,
                lineHeight: 1.45,
                marginTop: 2
              }}>{s.body}</div>
              </div>
              <div style={{
              background: LBRAND.gray50,
              borderRadius: 14,
              padding: isMobile ? 10 : 20,
              display: 'flex',
              justifyContent: 'center',
              overflow: 'hidden'
            }}>
                <img src={s.src} alt={s.label} style={{
                width: '100%',
                maxWidth: isMobile ? 150 : 280,
                height: 'auto',
                display: 'block',
                borderRadius: 14,
                boxShadow: '0 8px 24px -8px rgba(0,0,0,0.18)'
              }} />
              </div>
            </div>
          )}
        </div>
        <div style={{ textAlign: 'center', fontSize: 12, color: LBRAND.gray400, marginTop: isMobile ? 24 : 32 }}>
          www.placespace.co · iOS &amp; Android
        </div>
      </div>

      {/* Host & Earn — create events, sell tickets */}
      <div style={{
        background: LBRAND.cream,
        padding: `${isMobile ? 56 : 96}px ${heroPad}px`,
        borderTop: `1px solid ${LBRAND.gray100}`
      }}>
        <div style={{ maxWidth: 760, margin: '0 auto 48px', textAlign: 'center' }}>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1.4, color: LBRAND.emerald600, marginBottom: 12 }}>HOST &amp; EARN</div>
          <h2 style={{
            fontSize: isMobile ? 32 : 52,
            lineHeight: 1.05,
            letterSpacing: -1.4,
            fontWeight: 700,
            margin: '0 0 18px',
            color: LBRAND.ink,
            textWrap: 'balance'
          }}>Throw the event. Sell the tickets. Keep the money.

          </h2>
          <p style={{
            fontSize: isMobile ? 16 : 18,
            lineHeight: 1.55,
            color: LBRAND.gray600,
            margin: '0 auto',
            maxWidth: 600
          }}>
            Anyone can host on PlaceSpace — backyard kickback or sold-out warehouse. Set the door, drop tickets, watch the room fill in real time.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.05fr 0.95fr',
          gap: isMobile ? 24 : 32,
          alignItems: 'stretch',
          maxWidth: 1100,
          margin: '0 auto'
        }}>
          {/* Composer mockup */}
          <div style={{
            background: LBRAND.white,
            borderRadius: 20,
            border: `1px solid ${LBRAND.gray100}`,
            padding: isMobile ? 22 : 32,
            boxShadow: '0 8px 24px -12px rgba(0,0,0,0.08)',
            display: 'flex', flexDirection: 'column', gap: 20
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.2, color: LBRAND.gray500, textTransform: 'uppercase' }}>New event</div>
              <div style={{
                fontSize: 11, fontWeight: 700, letterSpacing: 0.8,
                padding: '4px 10px', borderRadius: 999,
                background: LBRAND.emerald50, color: LBRAND.emerald700
              }}>Draft</div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: LBRAND.gray500, marginBottom: 6, fontWeight: 600 }}>EVENT NAME</div>
              <div style={{
                fontSize: isMobile ? 22 : 28, fontWeight: 700, color: LBRAND.ink,
                letterSpacing: -0.6, lineHeight: 1.2
              }}>F1 Racing Event</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <div style={{ background: LBRAND.gray50, borderRadius: 12, padding: '12px 14px' }}>
                <div style={{ fontSize: 10, color: LBRAND.gray500, fontWeight: 700, letterSpacing: 0.8, marginBottom: 4 }}>WHEN</div>
                <div style={{ fontSize: 14, fontWeight: 700, color: LBRAND.gray900 }}>Sat May 17 · 9PM</div>
              </div>
              <div style={{ background: LBRAND.gray50, borderRadius: 12, padding: '12px 14px' }}>
                <div style={{ fontSize: 10, color: LBRAND.gray500, fontWeight: 700, letterSpacing: 0.8, marginBottom: 4 }}>WHERE</div>
                <div style={{ fontSize: 14, fontWeight: 700, color: LBRAND.gray900 }}>Skybar Brooklyn</div>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
              {[
              { label: 'GA', price: '$25' },
              { label: '+1', price: '$40' },
              { label: 'VIP', price: '$80' }].
              map((t, i) =>
              <div key={i} style={{
                background: LBRAND.white,
                border: `1.5px solid ${i === 0 ? LBRAND.emerald600 : LBRAND.gray200}`,
                borderRadius: 12,
                padding: '12px 8px',
                textAlign: 'center'
              }}>
                  <div style={{ fontSize: 11, color: LBRAND.gray500, fontWeight: 700, marginBottom: 4 }}>{t.label}</div>
                  <div style={{ fontSize: 17, fontWeight: 800, color: LBRAND.ink }}>{t.price}</div>
                </div>
              )}
            </div>
            <div style={{
              background: LBRAND.emerald600, color: LBRAND.white,
              padding: '14px 18px', borderRadius: 12,
              fontSize: 15, fontWeight: 700, textAlign: 'center',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8
            }}>
              Publish &amp; sell tickets
              <IconArrowRight size={18} strokeWidth={2.2} />
            </div>
            <div style={{ fontSize: 12, color: LBRAND.gray500, textAlign: 'center', marginTop: -6 }}>
              Live in 60 seconds. Paid out instantly.
            </div>
          </div>

          {/* Live stats card */}
          <div style={{
            background: LBRAND.ink, color: LBRAND.white,
            borderRadius: 20, padding: isMobile ? 22 : 32,
            position: 'relative', overflow: 'hidden',
            display: 'flex', flexDirection: 'column', gap: 22,
            boxShadow: '0 30px 60px -20px rgba(0,0,0,0.35)'
          }}>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'radial-gradient(circle at 90% 0%, rgba(4,150,105,0.32) 0%, transparent 60%)',
              pointerEvents: 'none'
            }} />
            <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.4, color: 'rgba(255,255,255,0.5)' }}>HOST DASHBOARD</div>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                fontSize: 10, fontWeight: 700, letterSpacing: 0.8,
                padding: '4px 10px', borderRadius: 999,
                background: 'rgba(4,150,105,0.22)', color: '#34d399'
              }}>
                <LiveDot size={5} />
                LIVE
              </div>
            </div>
            <div style={{ position: 'relative' }}>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)', marginBottom: 4 }}>Total earnings</div>
              <div style={{ fontSize: isMobile ? 38 : 48, fontWeight: 800, letterSpacing: -1.2, color: '#fff' }}>$3,550</div>
              <div style={{ fontSize: 13, color: '#34d399', fontWeight: 600 }}>+$420 in the last hour</div>
            </div>
            <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <div style={{ background: 'rgba(255,255,255,0.05)', borderRadius: 14, padding: 14 }}>
                <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', fontWeight: 700, letterSpacing: 0.8, marginBottom: 4 }}>SOLD</div>
                <div style={{ fontSize: 22, fontWeight: 800, color: '#fff' }}>142<span style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}> / 180</span></div>
              </div>
              <div style={{ background: 'rgba(255,255,255,0.05)', borderRadius: 14, padding: 14 }}>
                <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', fontWeight: 700, letterSpacing: 0.8, marginBottom: 4 }}>RSVPs</div>
                <div style={{ fontSize: 22, fontWeight: 800, color: '#fff' }}>238</div>
              </div>
            </div>
            <div style={{ position: 'relative' }}>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', fontWeight: 700, letterSpacing: 0.8, marginBottom: 8 }}>CAPACITY</div>
              <div style={{ height: 8, background: 'rgba(255,255,255,0.1)', borderRadius: 999, overflow: 'hidden' }}>
                <div style={{ width: '79%', height: '100%', background: 'linear-gradient(90deg, #34d399, #04965b)', borderRadius: 999 }} />
              </div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 8 }}>79% full · 38 spots left</div>
            </div>
            <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 10, paddingTop: 6 }}>
              <div style={{ display: 'flex' }}>
                {['#7c3aed', '#ec4899', '#f59e0b', '#06b6d4'].map((c, i) =>
                <div key={i} style={{
                  width: 28, height: 28, borderRadius: 999,
                  background: c, border: `2px solid ${LBRAND.ink}`,
                  marginLeft: i === 0 ? 0 : -8
                }} />
                )}
              </div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)' }}>
                Maya, Jordan and 140 others are going
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Exclusive events / sponsorships */}
      <div style={{
        background: LBRAND.ink,
        color: LBRAND.white,
        padding: `${isMobile ? 56 : 96}px ${heroPad}px`
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 32 : 64,
          alignItems: 'start'
        }}>
          {/* For users — exclusive events */}
          <div style={{
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: 24,
            padding: isMobile ? 28 : 44
          }}>
            <div style={{
              fontSize: 12, fontWeight: 700, letterSpacing: 1.6,
              color: LBRAND.emerald400 || '#34d399',
              marginBottom: 14
            }}>FOR YOU</div>
            <h3 style={{
              fontSize: isMobile ? 28 : 38,
              lineHeight: 1.1,
              letterSpacing: -0.8,
              fontWeight: 700,
              margin: '0 0 16px',
              textWrap: 'balance'
            }}>
              Get invited to events you can't find anywhere else.
            </h3>
            <p style={{
              fontSize: isMobile ? 15 : 17,
              lineHeight: 1.55,
              color: 'rgba(255,255,255,0.7)',
              margin: '0 0 28px',
              maxWidth: 520
            }}>
              The more you show up and connect, the more your social grows on PlaceSpace. Build a presence and unlock invites to private parties, openings, and brand pop-ups in your city.
            </p>
            <div style={{ display: 'grid', gap: 14 }}>
              {[
              { icon: IconSparkles, t: 'Private guest lists', b: 'Members-only nights at the spaces you love.' },
              { icon: IconCalendar, t: 'First-access tickets', b: 'Early drops on concerts, residencies and dinners.' },
              { icon: IconUsers, t: 'Hosted meetups', b: 'Curated rooms based on the people you actually vibe with.' }].
              map((r, i) =>
              <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <div style={{ color: LBRAND.emerald400 || '#34d399', flexShrink: 0, paddingTop: 2 }}>
                    <r.icon size={22} strokeWidth={1.8} />
                  </div>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 2 }}>{r.t}</div>
                    <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.6)', lineHeight: 1.45 }}>{r.b}</div>
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* For tastemakers — sponsorships. Header reads as a VIP badge
              so the bifurcation between "regular member" (left card) and
              "vetted creator / tastemaker" (this card) is unmistakable.
              Crown glyph + amber type + amber pill = elevated tier. */}
          <div style={{
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(253,230,138,0.20)',
            borderRadius: 24,
            padding: isMobile ? 28 : 44,
            position: 'relative'
          }}>
            <div style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 8,
              padding: '6px 12px',
              borderRadius: 999,
              background: 'rgba(253,230,138,0.12)',
              border: '1px solid rgba(253,230,138,0.30)',
              marginBottom: 16
            }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="#FDE68A" aria-hidden>
                <path d="M5 16L3 6l5.5 4L12 4l3.5 6L21 6l-2 10H5zm0 2h14v2H5v-2z" />
              </svg>
              <span style={{
                fontSize: 11, fontWeight: 800, letterSpacing: 1.6,
                color: '#FDE68A', textTransform: 'uppercase'
              }}>VIP · For Tastemakers</span>
            </div>
            <h3 style={{
              fontSize: isMobile ? 28 : 38,
              lineHeight: 1.1,
              letterSpacing: -0.8,
              fontWeight: 700,
              margin: '0 0 16px',
              textWrap: 'balance'
            }}>
              Get sponsored. Get perks. Get paid to show up.
            </h3>
            <p style={{
              fontSize: isMobile ? 15 : 17,
              lineHeight: 1.55,
              color: 'rgba(255,255,255,0.7)',
              margin: '0 0 28px',
              maxWidth: 520
            }}>
              Brands work directly with creators on PlaceSpace. Show real presence, real reach, real venues — and unlock sponsorship deals, comped tables, and exclusive perks at the places you already go.
            </p>
            <div style={{ display: 'grid', gap: 14 }}>
              {[
              { icon: IconHeart, t: 'Brand collabs', b: 'Get matched with venues and brands fit to your scene.' },
              { icon: IconMessageCircle, t: 'Comped tables &amp; perks', b: 'Drinks, dinners, hotel stays \u2014 in exchange for your presence.' },
              { icon: IconArrowRight, t: 'Direct deals', b: 'Negotiate paid sponsorships in-app. No middleman.' }].
              map((r, i) =>
              <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <div style={{ color: '#FDE68A', flexShrink: 0, paddingTop: 2 }}>
                    <r.icon size={22} strokeWidth={1.8} />
                  </div>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 2 }} dangerouslySetInnerHTML={{ __html: r.t }} />
                    <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.6)', lineHeight: 1.45 }}>{r.b}</div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Feature row */}
      <div style={{
        background: LBRAND.white,
        borderTop: `1px solid ${LBRAND.gray100}`,
        padding: `${isMobile ? 40 : 72}px ${heroPad}px`
      }}>
        <div style={{ maxWidth: 720, marginBottom: isMobile ? 36 : 56 }}>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1.4, color: LBRAND.emerald600, marginBottom: 12 }}>WHAT YOU GET</div>
          <h2 style={{
            fontSize: isMobile ? 28 : 40,
            lineHeight: 1.1,
            letterSpacing: -1,
            fontWeight: 700,
            margin: 0,
            color: LBRAND.ink,
            textWrap: 'balance'
          }}>
            More than a map. A live read on your city.
          </h2>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 28 : 40,
          rowGap: isMobile ? 28 : 56
        }}>
          {[
          { icon: IconMapPin, title: 'Find your space', body: 'Search venues, neighborhoods, or whole cities and see what\u2019s alive right now.' },
          { icon: IconUsers, title: 'See who\u2019s here', body: 'Real people, physically present \u2014 not avatars, not check-ins from yesterday.' },
          { icon: IconSparkles, title: 'Make the moment', body: 'Drop a photo, react, share what\u2019s happening as it unfolds.' },
          { icon: IconMessageCircle, title: 'Talk to the room', body: 'Public space chat for everyone in the venue. Friends-only when you want privacy.' },
          { icon: IconCalendar, title: 'Catch every event', body: 'Concerts, openings, pop-ups \u2014 surfaced the moment they start.' },
          { icon: IconHeart, title: 'Privacy by default', body: 'Choose who sees you in any space. Leave invisibly. Your moves stay yours.' }].
          map((f, i) =>
          <div key={i}>
              <div style={{
              width: 40, height: 40,
              color: LBRAND.emerald600,
              display: 'flex', alignItems: 'center', justifyContent: 'flex-start',
              marginBottom: 14
            }}>
                <f.icon size={28} strokeWidth={1.8} />
              </div>
              <div style={{ fontSize: 18, fontWeight: 700, color: LBRAND.gray900, marginBottom: 6, letterSpacing: -0.2 }}>{f.title}</div>
              <div style={{ fontSize: 15, lineHeight: 1.55, color: LBRAND.gray600 }}>{f.body}</div>
            </div>
          )}
        </div>
      </div>

      {/* Final CTA */}
      <div style={{
        background: LBRAND.cream,
        padding: `${isMobile ? 64 : 96}px ${heroPad}px`,
        textAlign: 'center',
        borderTop: `1px solid ${LBRAND.gray100}`
      }}>
        <h2 style={{
          fontSize: isMobile ? 36 : 56,
          lineHeight: 1.05,
          letterSpacing: -1.6,
          fontWeight: 700,
          margin: '0 auto 20px',
          color: LBRAND.ink,
          textWrap: 'balance',
          maxWidth: 760
        }}>
          Your city is moving without you.
        </h2>
        <p style={{
          fontSize: isMobile ? 16 : 19,
          lineHeight: 1.5,
          color: LBRAND.gray600,
          margin: '0 auto 36px',
          maxWidth: 540
        }}>
          Join PlaceSpace and step into the room.
        </p>
        <div style={{ display: 'inline-flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
          <StoreBadgeRow width={170} dark={true} />
        </div>
      </div>

      {/* Footer */}
      <div style={{
        padding: `20px ${heroPad}px`,
        fontSize: 12, color: LBRAND.gray400,
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
        borderTop: `1px solid ${LBRAND.gray100}`,
        background: LBRAND.cream
      }}>
        <div>© PlaceSpace 2026</div>
        <div style={{ display: 'flex', gap: 16 }}>
          <a href="/blog" style={{ color: LBRAND.gray400, textDecoration: 'none' }}>Blog</a>
          <a href="/for-business" style={{ color: LBRAND.gray400, textDecoration: 'none' }}>For Business</a>
          <a href="/privacy-policy" style={{ color: LBRAND.gray400, textDecoration: 'none' }}>Privacy</a>
          <a href="/auth" style={{ color: LBRAND.gray400, textDecoration: 'none' }}>Sign in</a>
        </div>
      </div>
    </div>);

}

window.LandingV1 = LandingV1;