// Variant A — Apple-style clean single-page landing
// Centered hero (phone mockup removed 2026-08-05). Big "Discover" CTA.

// Instagram glyph — the product is now "your handle, in the room", so the
// landing needs the mark itself. flyer-shared has no social icons.
const IconInstagram = ({ size = 24, color = 'currentColor', strokeWidth = 1.8 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
    <rect x="2" y="2" width="20" height="20" rx="5.5" />
    <circle cx="12" cy="12" r="4.2" />
    <line x1="17.6" y1="6.4" x2="17.61" y2="6.4" />
  </svg>
);

// The real Instagram gradient, used for the handle pill so it reads as
// "that's my Instagram" at a glance rather than as generic brand green.
const IG_GRADIENT = 'linear-gradient(135deg,#F58529,#DD2A7B 50%,#8134AF)';

// The networks a profile can carry. Same set the signup socials step
// offers, so the site doesn't promise something the app can't hold.
// Marks are text rather than logo files — no brand assets to license,
// nothing to go stale, and they stay crisp at 26px.
// Business side and every web login are hidden for now — the site is a
// single consumer story (get the app, share your handle). Nothing is
// deleted: /for-business and /get-started still resolve, the auth page
// still works, and flipping these back to true restores every link.
const SHOW_BUSINESS = false;
const SHOW_LOGIN = false;

// Official brand glyphs (24×24 viewBox, single filled path each) rather
// than "IG"/"TT" text stand-ins. Paths are the published marks from
// simple-icons v16; LinkedIn ships its own standard glyph because
// simple-icons dropped it after a trademark request. Colors are each
// brand's official hex — Instagram keeps its gradient, Snapchat needs a
// dark glyph because its yellow is too light for white.
const NETWORKS = [
  {
    k: 'Instagram', bg: IG_GRADIENT, fg: '#fff',
    d: 'M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077',
  },
  {
    k: 'TikTok', bg: '#000', fg: '#fff',
    d: 'M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z',
  },
  {
    k: 'X', bg: '#000', fg: '#fff',
    d: 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z',
  },
  {
    k: 'Snapchat', bg: '#FFFC00', fg: '#111827',
    d: 'M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z',
  },
  {
    k: 'LinkedIn', bg: '#0A66C2', fg: '#fff',
    d: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z',
  },
  {
    k: 'YouTube', bg: '#FF0000', fg: '#fff',
    d: 'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z',
  },
];

// One rounded tile per network. `size` is the tile; the glyph sits at 56%
// of it so every mark reads at the same optical weight despite different
// path bounds.
function NetworkTile({ n, size }) {
  const glyph = Math.round(size * 0.56);
  return (
    <span
      title={n.k}
      aria-label={n.k}
      style={{
        width: size, height: size,
        borderRadius: Math.round(size * 0.28),
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        background: n.bg, flexShrink: 0,
        boxShadow: '0 6px 16px -6px rgba(10,20,16,0.35)',
      }}
    >
      <svg width={glyph} height={glyph} viewBox="0 0 24 24" fill={n.fg} aria-hidden="true">
        <path d={n.d} />
      </svg>
    </span>
  );
}

function LandingV1({ width = 1280, source = 'facebook', headline, sub, ctaPrimary }) {
  const _user = useLandingUser();
  const isMobile = width < 600;
  const heroPad = isMobile ? 32 : 64;
  const _headline = headline || 'Share your socials in a place.';
  const _sub = sub || 'Tap Enter when you get somewhere. Instagram, TikTok, X \u2014 whatever you use joins the room, and everyone there can follow you.';
  // 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>
            {SHOW_BUSINESS && (
              <a href="/for-business" style={{
                fontSize: 14, fontWeight: 600, color: LBRAND.gray700,
                padding: '10px 16px', borderRadius: 10,
                textDecoration: 'none'
              }}>For Business</a>
            )}
            {SHOW_LOGIN && (_user === undefined ? null : _user ? (
              <AccountChip user={_user} />
            ) : (
              // Web login is business-only: consumers join in the app (store
              // badges below the hero), owners sign in here.
              <a href="/auth?business=1" style={{
                fontSize: 14, fontWeight: 700, color: LBRAND.white,
                padding: '10px 16px', borderRadius: 10,
                textDecoration: 'none',
                background: LBRAND.emerald600
              }}>Business log in</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' },
              ...(SHOW_BUSINESS ? [{ label: 'For Business', href: '/for-business' }] : []),
              ...(SHOW_LOGIN ? [{ label: 'Business log in', href: '/auth?business=1' }] : []),
            ].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>
            ))}
            {/* Consumers join in the app — the store badges below are the
                signup path on web. */}
            <div style={{ marginTop: 18, display: 'flex', gap: 10, justifyContent: 'center' }}>
              <StoreBadgeRow width={120} />
            </div>
          </div>
        </div>
      )}

      {/* Hero — centered editorial block. The phone mockup is gone
          (owner request 2026-08-05); the atmosphere now comes from
          layered emerald washes + a faint dot lattice instead of a
          device render. */}
      <div style={{
        position: 'relative',
        padding: `${isMobile ? 40 : 88}px ${heroPad}px ${isMobile ? 56 : 104}px`,
        textAlign: 'center',
        overflow: 'hidden'
      }}>
        {/* Atmosphere layers */}
        <div aria-hidden style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: [
            `radial-gradient(820px 420px at 18% -10%, ${LBRAND.emerald100} 0%, rgba(209,250,229,0) 62%)`,
            `radial-gradient(900px 480px at 86% 6%, rgba(167,243,208,0.55) 0%, rgba(167,243,208,0) 60%)`,
            `radial-gradient(700px 420px at 50% 118%, rgba(253,230,138,0.28) 0%, rgba(253,230,138,0) 58%)`
          ].join(', ')
        }} />
        <div aria-hidden style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          backgroundImage: `radial-gradient(${LBRAND.emerald600} 1px, transparent 1px)`,
          backgroundSize: '26px 26px',
          opacity: 0.05,
          maskImage: 'radial-gradient(closest-side at 50% 40%, black, transparent)',
          WebkitMaskImage: 'radial-gradient(closest-side at 50% 40%, black, transparent)'
        }} />

        <div style={{ position: 'relative', maxWidth: 860, margin: '0 auto' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 12px', borderRadius: 999,
            background: LBRAND.emerald50, color: LBRAND.emerald700,
            border: `1px solid ${LBRAND.emerald200}`,
            fontSize: 12, fontWeight: 600, letterSpacing: 0.4,
            marginBottom: 26
          }}>
            <LiveDot size={6} />
            LIVE NOW
          </div>
          <h1 style={{
            fontSize: isMobile ? 42 : 72,
            lineHeight: 1.03,
            letterSpacing: isMobile ? -1.5 : -2.4,
            fontWeight: 700,
            margin: '0 0 22px',
            color: LBRAND.ink,
            textWrap: 'balance'
          }}>
            {_headline}
          </h1>
          <p style={{
            fontSize: isMobile ? 17 : 20,
            lineHeight: 1.55,
            color: LBRAND.gray600,
            margin: '0 auto 36px',
            maxWidth: 640
          }}>
            {_sub}
          </p>

          {/* CTA cluster. The "Discover" button is gone — web can't do the
              thing the headline promises (you have to be in a place, in the
              app), so the only honest next step is the store badges. The
              network marks sit here instead: they say what the product is
              faster than a sentence does. */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22, alignItems: 'center' }}>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              gap: isMobile ? 10 : 12, flexWrap: 'wrap',
            }}>
              {NETWORKS.map((n) => (
                <NetworkTile key={n.k} n={n} size={isMobile ? 40 : 46} />
              ))}
            </div>
            <StoreBadgeRow width={148} />
          </div>

          {/* Social proof */}
          <div style={{ marginTop: 40, display: 'inline-flex', alignItems: 'center', gap: 18, flexWrap: 'wrap', justifyContent: 'center' }}>
            <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 style={{ textAlign: 'left' }}>
              <Stars rating={4.8} size={13} />
              <div style={{ fontSize: 12, color: LBRAND.gray500, marginTop: 2 }}></div>
            </div>
          </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 your handle<br />gets in the room.
          </h2>
          <p style={{ fontSize: isMobile ? 15 : 17, color: LBRAND.gray600, margin: 0 }}>
            A photo, a handle, and you're in.
          </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 venue, neighborhood, or city you\u2019re in.', src: '/landings/assets/step1-final.png' },
          { step: 'Step 2', label: 'Add a photo and your @', body: 'A real photo is required. Your handle goes with it.', src: '/landings/assets/step2-final.png' },
          { step: 'Step 3', label: 'Enter', body: 'You have to actually be there.', src: '/landings/assets/step3-final.png' },
          { step: 'Step 4', label: 'Tap anyone\u2019s @', body: 'Opens their profile. Follow them there.', src: '/landings/assets/step4-skybar.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>

      {/* Your handle in the room — the whole product, one section */}
      <div style={{
        background: LBRAND.white,
        borderTop: `1px solid ${LBRAND.gray100}`,
        padding: `${isMobile ? 56 : 96}px ${heroPad}px`
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 36 : 64,
          alignItems: 'center',
          maxWidth: 1100,
          margin: '0 auto'
        }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1.4, color: LBRAND.emerald600, marginBottom: 12 }}>YOUR @ IN THE ROOM</div>
            <h2 style={{
              fontSize: isMobile ? 32 : 48,
              lineHeight: 1.06,
              letterSpacing: -1.2,
              fontWeight: 700,
              margin: '0 0 18px',
              color: LBRAND.ink,
              textWrap: 'balance'
            }}>
              The room already knows your @.
            </h2>
            <p style={{
              fontSize: isMobile ? 15.5 : 17.5,
              lineHeight: 1.6,
              color: LBRAND.gray600,
              margin: '0 0 28px',
              maxWidth: 520
            }}>
              Everyone in the space, their photo, their handles. One tap to follow.
            </p>
            <div style={{ display: 'grid', gap: 16 }}>
              {[
              { t: 'Only people who are there', b: 'You have to be in the space to show up in it.' },
              { t: 'One tap to follow', b: 'The handle opens their profile. That’s the whole exchange.' },
              { t: 'Every network you use', b: 'Instagram, TikTok, X, Snapchat, LinkedIn — add the ones you actually check.' },
              { t: 'Leave and you’re gone', b: 'Walk out, drop off the list.' }].
              map((r, i) =>
              <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <div style={{
                  width: 26, height: 26, borderRadius: 8, flexShrink: 0,
                  background: LBRAND.emerald50, color: LBRAND.emerald700,
                  border: `1px solid ${LBRAND.emerald200}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 13, fontWeight: 800
                }}>{i + 1}</div>
                  <div>
                    <div style={{ fontSize: 15.5, fontWeight: 700, color: LBRAND.gray900, marginBottom: 2 }}>{r.t}</div>
                    <div style={{ fontSize: 14, color: LBRAND.gray600, lineHeight: 1.5 }}>{r.b}</div>
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* Who's-here mockup — pure CSS, no screenshot to go stale. */}
          <div style={{
            background: LBRAND.cream,
            border: `1px solid ${LBRAND.gray100}`,
            borderRadius: 24,
            padding: isMobile ? 18 : 28,
            boxShadow: '0 24px 48px -24px rgba(10,20,16,0.18)',
            maxWidth: 460,
            margin: isMobile ? '0 auto' : '0 0 0 auto',
            width: '100%'
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
              <div>
                <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: 1.2, color: LBRAND.gray500 }}>THE EMERALD TABLE</div>
                <div style={{ fontSize: 19, fontWeight: 800, color: LBRAND.ink, letterSpacing: -0.4 }}>Who&rsquo;s here</div>
              </div>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '5px 11px', borderRadius: 999,
                background: LBRAND.white, border: `1px solid ${LBRAND.gray200}`,
                fontSize: 12, fontWeight: 700, color: LBRAND.gray600
              }}>
                <LiveDot size={6} />
                12 now
              </div>
            </div>
            {AVATAR_NAMES.slice(0, 3).map((a, i) =>
            <div key={i} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '12px 14px', borderRadius: 14,
              background: LBRAND.white, border: `1px solid ${LBRAND.gray100}`,
              marginBottom: 10
            }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 11, minWidth: 0 }}>
                  <Avatar name={a.name} hue={a.hue} img={a.img} size={38} />
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 14.5, fontWeight: 700, color: LBRAND.gray900 }}>{a.name.split(' ')[0]}</div>
                    <div style={{
                      fontSize: 13, fontWeight: 700, marginTop: 2,
                      color: 'transparent', backgroundImage: IG_GRADIENT,
                      WebkitBackgroundClip: 'text', backgroundClip: 'text',
                      whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'
                    }}>@{a.name.split(' ')[0].toLowerCase()}</div>
                  </div>
                </div>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  fontSize: 12, fontWeight: 700, color: '#fff',
                  background: IG_GRADIENT, borderRadius: 999,
                  padding: '6px 14px', flexShrink: 0
                }}>
                  <IconInstagram size={13} strokeWidth={2.2} />
                  Follow
                </div>
              </div>
            )}
            {/* The app profile carries every network a person adds, so the
                site shows them here rather than reading Instagram-only. */}
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              gap: 7, flexWrap: 'wrap', marginTop: 14
            }}>
              {NETWORKS.map((n) => (
                <NetworkTile key={n.k} n={n} size={28} />
              ))}
            </div>
            <div style={{ fontSize: 11, color: LBRAND.gray500, textAlign: 'center', marginTop: 10 }}>
              Everyone here right now &middot; tap a handle to open their profile
            </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: IconInstagram, title: 'Your @ travels with you', body: 'Instagram, TikTok, X and more. Set them once — they show up in every space you enter.' },
          { 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>
          {SHOW_BUSINESS && (
            <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>
          {SHOW_LOGIN && (
            <a href="/auth?business=1" style={{ color: LBRAND.gray400, textDecoration: 'none' }}>Business sign in</a>
          )}
        </div>
      </div>
    </div>);

}

window.LandingV1 = LandingV1;