// Business signup landing page — placespace.co/for-business
// Hero with embedded request-access form. Designed to convert
// owners of physical-location businesses (cafes, gyms, salons, retail).

const { useState: useStateBiz } = React;


function LandingBusiness({ width = 1280, headline, sub, ctaPrimary }) {
  const _user = useLandingUser();
  const isMobile = width < 720;
  const heroPad = isMobile ? 24 : 72;
  const _headline = headline || 'Turn your location into a thriving community.';
  const _sub = sub || 'PlaceSpace connects you with the people walking in right now — and the ones about to. Real-time presence, in-app ordering, and a customer base that actually comes back.';
  const _cta = ctaPrimary || 'Submit request';

  return (
    <div style={{
      width: '100%',
      background: LBRAND.white,
      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`,
        background: LBRAND.white,
        borderBottom: `1px solid ${LBRAND.gray100}`,
        gap: 16
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <PSLogo size={isMobile ? 38 : 46} />
          <div style={{ fontSize: isMobile ? 19 : 22, fontWeight: 800, color: LBRAND.emerald600, letterSpacing: -0.4 }}>Place Space</div>
          <div style={{
            marginLeft: 8, padding: '4px 10px', borderRadius: 999,
            background: LBRAND.emerald50, color: LBRAND.emerald700,
            fontSize: 11, fontWeight: 700, letterSpacing: 0.6
          }}>FOR BUSINESS</div>
        </div>
        {isMobile && <OffersMenu isMobile C={{ white: LBRAND.white, line: LBRAND.gray100, ink: LBRAND.gray900, muted: LBRAND.gray600 }} />}
        {isMobile && _user ? <AccountChip user={_user} compact /> : null}
        {isMobile && !_user &&
          <a href="/auth?business=1" style={{
            fontSize: 13, fontWeight: 700, color: LBRAND.emerald700,
            textDecoration: 'none', padding: '8px 12px', borderRadius: 9,
            border: `1px solid ${LBRAND.emerald200 || '#a7f3d0'}`, whiteSpace: 'nowrap'
          }}>Business log in</a>}
        {!isMobile &&
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <OffersMenu isMobile={false} C={{ white: LBRAND.white, line: LBRAND.gray100, ink: LBRAND.gray900, muted: LBRAND.gray600 }} />
            <a href="/blog" style={{ fontSize: 14, fontWeight: 600, color: LBRAND.gray700, textDecoration: 'none' }}>Blog</a>
            {/* ?business=1 tells /auth this is an owner signing in, so it
                lands them on /my-businesses instead of the consumer feed —
                and skips the consumer profile-completion flow they can
                never finish. */}
            {_user === undefined ? null : _user ? (
              <AccountChip user={_user} />
            ) : (
              <React.Fragment>
                <a href="/auth?business=1" style={{ fontSize: 14, fontWeight: 600, color: LBRAND.gray700, textDecoration: 'none' }}>Log in</a>
                <a href="/auth?business=1&mode=signup" style={{
                  fontSize: 14, fontWeight: 700, color: LBRAND.white,
                  padding: '10px 18px', borderRadius: 10,
                  textDecoration: 'none',
                  background: LBRAND.emerald600
                }}>Get started</a>
              </React.Fragment>
            )}
          </div>
        }
      </div>

      {/* HERO */}
      <div style={{
        position: 'relative',
        background: `linear-gradient(180deg, ${LBRAND.cream} 0%, ${LBRAND.white} 100%)`,
        padding: `${isMobile ? 40 : 72}px ${heroPad}px ${isMobile ? 56 : 96}px`,
        overflow: 'hidden'
      }}>
        {/* Decorative emerald wash */}
        <div style={{
          position: 'absolute', top: -200, right: -200, width: 600, height: 600,
          background: `radial-gradient(circle, ${LBRAND.emerald100} 0%, transparent 65%)`,
          filter: 'blur(40px)', pointerEvents: 'none'
        }} />

        <div style={{
          position: 'relative',
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.05fr 0.95fr',
          gap: isMobile ? 40 : 56,
          alignItems: 'start',
          maxWidth: 1280, margin: '0 auto'
        }}>
          {/* Left — story */}
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 14px', borderRadius: 999,
              background: LBRAND.white, color: LBRAND.emerald700,
              fontSize: 12, fontWeight: 700, letterSpacing: 0.6,
              border: `1px solid ${LBRAND.emerald100}`,
              marginBottom: 24
            }}>
              <LiveDot size={6} />
              FOR LOCAL BUSINESSES
            </div>
            <h1 style={{
              fontSize: isMobile ? 40 : 64,
              lineHeight: 1.02,
              letterSpacing: -1.8,
              fontWeight: 700,
              margin: '0 0 24px',
              color: LBRAND.ink,
              textWrap: 'balance'
            }}>
              Turn your location into a <span style={{ color: LBRAND.emerald600, fontStyle: 'italic', fontWeight: 700 }}>thriving</span> community.
            </h1>
            <p style={{
              fontSize: isMobile ? 17 : 19,
              lineHeight: 1.55,
              color: LBRAND.gray600,
              margin: '0 0 32px',
              maxWidth: 540
            }}>
              {_sub}
            </p>

            {/* Stat tiles */}
            <div style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr 1fr' : '1fr 1fr 1fr 1fr',
              gap: 12,
              marginTop: 8,
              marginBottom: 32
            }}>
              {[
                { num: '82%', label: 'Do "near me" local searches', icon: IconMapPin },
                { num: '+95%', label: 'Profit from 5% retention boost', icon: IconSparkles },
                { num: '2–6×', label: 'Higher local ad conversion', icon: IconArrowRight },
                { num: '77%', label: 'Buy from locally connected brands', icon: IconUsers }
              ].map((s, i) => (
                <div key={i} style={{
                  background: LBRAND.white,
                  border: `1px solid ${LBRAND.gray100}`,
                  borderRadius: 14,
                  padding: '14px 16px',
                  boxShadow: '0 1px 3px rgba(0,0,0,0.03)'
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: LBRAND.emerald600, marginBottom: 6 }}>
                    <s.icon size={14} strokeWidth={2.2} />
                  </div>
                  <div style={{ fontSize: 22, fontWeight: 800, color: LBRAND.ink, letterSpacing: -0.6, lineHeight: 1 }}>{s.num}</div>
                  <div style={{ fontSize: 11, color: LBRAND.gray500, marginTop: 4, lineHeight: 1.35 }}>{s.label}</div>
                </div>
              ))}
            </div>

            {/* Trust line */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, 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.white}` }}>
                    <Avatar name={a.name} hue={a.hue} img={a.img} size={32} />
                  </div>
                )}
              </div>
              {/* No headcount claim here. A number invites the question "which
                  ones?", and the honest answer is a growing local roster — so
                  the line leads with the market instead. */}
              <div style={{ fontSize: 13, color: LBRAND.gray600 }}>
                <span style={{ fontWeight: 700, color: LBRAND.gray900 }}>Local venues</span> are already live on PlaceSpace
              </div>
            </div>
          </div>

          {/* Right — Request access form */}
          <div style={{
            background: LBRAND.white,
            border: `1px solid ${LBRAND.gray100}`,
            borderRadius: 20,
            padding: isMobile ? 24 : 36,
            boxShadow: '0 24px 48px -16px rgba(15, 32, 25, 0.12), 0 1px 2px rgba(0,0,0,0.04)',
            position: 'relative'
          }}>
            <div style={{ marginBottom: 20 }}>
              <div style={{
                display: 'inline-block', background: '#FFF1E8', color: '#B02E00',
                borderRadius: 999, padding: '5px 11px', fontSize: 11,
                fontWeight: 800, letterSpacing: 0.5, marginBottom: 10,
              }}>FREE TO START</div>
              <h2 style={{
                fontSize: isMobile ? 24 : 28,
                fontWeight: 700,
                letterSpacing: -0.6,
                margin: '0 0 6px',
                color: LBRAND.ink
              }}>Create your business account</h2>
              <p style={{ fontSize: 14, color: LBRAND.gray600, margin: 0, lineHeight: 1.5 }}>
                Start with a free digital menu, or launch your own app. No card to begin.
              </p>
            </div>

            {/* Self-serve signup, not a gated request. This used to submit a
                lead and promise a reply "within 24 hours"; owners can set
                themselves up now, so it hands straight to the funnel with
                their details already filled in. */}
            <StartSignup isMobile={isMobile} />
          </div>
        </div>
      </div>

      {/* TRY IT — a live menu, not a screenshot. Owners are deciding whether
          ordering-from-the-table is real; letting them tap Add and watch the
          total move answers that faster than any amount of copy. */}
      <div style={{
        background: LBRAND.white,
        padding: `${isMobile ? 56 : 88}px ${heroPad}px`,
        borderTop: `1px solid ${LBRAND.gray100}`
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 0.85fr',
          gap: isMobile ? 36 : 56,
          alignItems: 'center',
          maxWidth: 1200, margin: '0 auto'
        }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1.4, color: LBRAND.emerald600, marginBottom: 12 }}>TRY IT YOURSELF</div>
            <h2 style={{
              fontSize: isMobile ? 30 : 42,
              lineHeight: 1.05,
              letterSpacing: -1.2,
              fontWeight: 700,
              margin: '0 0 16px',
              color: LBRAND.ink,
              textWrap: 'balance'
            }}>This is a real menu. Go ahead and tap it.</h2>
            <p style={{ fontSize: isMobile ? 16 : 17, color: LBRAND.gray600, margin: '0 0 24px', maxWidth: 500, lineHeight: 1.55 }}>
              Not a screenshot — the phone beside this is running the same menu your guests get. Add a few things, open the bill, change the tip. Your own menu, prices, and tax rate go in from your dashboard.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                'Tap any item to add it — tap again to add another',
                'The total updates live, with tax already included',
                'Open the bill to adjust quantities or set a tip',
                'Guests see this in one second, with nothing installed'
              ].map((line, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: LBRAND.gray700 }}>
                  <div style={{
                    width: 20, height: 20, borderRadius: '50%',
                    background: LBRAND.emerald50, color: LBRAND.emerald600,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0, fontSize: 12, fontWeight: 700
                  }}>✓</div>
                  {line}
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <MenuDemo width={isMobile ? 290 : 330} />
          </div>
        </div>
      </div>

      {/* WHY — outcome metric cards */}
      <div id="features" style={{
        background: LBRAND.white,
        padding: `${isMobile ? 56 : 96}px ${heroPad}px`,
        borderTop: `1px solid ${LBRAND.gray100}`
      }}>
        <div style={{ maxWidth: 760, margin: '0 0 56px' }}>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1.4, color: LBRAND.emerald600, marginBottom: 12 }}>WHY PLACESPACE</div>
          <h2 style={{
            fontSize: isMobile ? 32 : 48,
            lineHeight: 1.05,
            letterSpacing: -1.4,
            fontWeight: 700,
            margin: '0 0 16px',
            color: LBRAND.ink,
            textWrap: 'balance'
          }}>
            Foot traffic is the easy part.<br/>
            <span style={{ color: LBRAND.gray500 }}>Coming back is the hard part.</span>
          </h2>
          <p style={{ fontSize: isMobile ? 16 : 18, color: LBRAND.gray600, margin: 0, maxWidth: 620, lineHeight: 1.55 }}>
            PlaceSpace gives you a real-time relationship with the people in your space — and a reason for them to return.
          </p>
        </div>

        {/* Big feature row */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.15fr 0.85fr',
          gap: isMobile ? 16 : 24,
          marginBottom: isMobile ? 16 : 24
        }}>
          <div style={{
            background: LBRAND.ink,
            color: LBRAND.white,
            borderRadius: 24,
            padding: isMobile ? 28 : 44,
            position: 'relative',
            overflow: 'hidden',
            minHeight: isMobile ? 320 : 380,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
          }}>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'radial-gradient(circle at 90% 10%, rgba(16,185,129,0.32) 0%, transparent 55%)',
              pointerEvents: 'none'
            }} />
            <div style={{ position: 'relative' }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                fontSize: 11, fontWeight: 700, letterSpacing: 1,
                padding: '4px 10px', borderRadius: 999,
                background: 'rgba(52,211,153,0.18)', color: '#34d399',
                marginBottom: 20
              }}>
                <LiveDot size={5} />
                LIVE NOW · 23 IN ROOM
              </div>
              <div style={{ fontSize: isMobile ? 26 : 36, fontWeight: 700, letterSpacing: -0.8, lineHeight: 1.15, marginBottom: 14, textWrap: 'balance' }}>
                Know who's in your space — the moment they walk in.
              </div>
              <div style={{ fontSize: isMobile ? 14 : 16, color: 'rgba(255,255,255,0.7)', lineHeight: 1.55, maxWidth: 460 }}>
                Real-time presence shows you exactly who's in the room. Send a coffee on the house, recommend the special, or take their order before they leave.
              </div>
            </div>

            {/* Mini "who's here" mock */}
            <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 12, marginTop: 28 }}>
              <div style={{ display: 'flex' }}>
                {AVATAR_NAMES.slice(0, 6).map((a, i) =>
                  <div key={i} style={{ marginLeft: i === 0 ? 0 : -10, borderRadius: '50%', boxShadow: `0 0 0 2px ${LBRAND.ink}` }}>
                    <Avatar name={a.name} hue={a.hue} img={a.img} size={36} />
                  </div>
                )}
                <div style={{
                  marginLeft: -10, width: 36, height: 36, borderRadius: '50%',
                  background: 'rgba(255,255,255,0.08)', color: '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 11, fontWeight: 700,
                  boxShadow: `0 0 0 2px ${LBRAND.ink}`
                }}>+17</div>
              </div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>
                23 people · 4 regulars · 2 first-timers
              </div>
            </div>
          </div>

          <div style={{
            background: LBRAND.emerald50,
            borderRadius: 24,
            padding: isMobile ? 28 : 36,
            border: `1px solid ${LBRAND.emerald100}`,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            minHeight: isMobile ? 280 : 380
          }}>
            <div>
              <div style={{ color: LBRAND.emerald700, marginBottom: 16 }}>
                <IconCalendar size={32} strokeWidth={1.6} />
              </div>
              <div style={{ fontSize: isMobile ? 24 : 30, fontWeight: 700, letterSpacing: -0.6, lineHeight: 1.15, marginBottom: 12, color: LBRAND.ink }}>
                Menus, orders, payments — one place.
              </div>
              <div style={{ fontSize: 15, color: LBRAND.gray700, lineHeight: 1.5 }}>
                Customers scan, order, and pay directly through the app. No third-party fees, no platform skim.
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 24 }}>
              {[
                { t: 'Table 4 · 2× cappuccino', s: 'Maya R.' },
                { t: '2× oat lattes · pickup', s: 'Jordan L.' },
                { t: 'Paid in app · $23.70', s: 'Priya S.' }
              ].map((b, i) => (
                <div key={i} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  background: LBRAND.white, padding: '10px 14px', borderRadius: 10,
                  border: `1px solid ${LBRAND.emerald100}`
                }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: LBRAND.ink }}>{b.t}</div>
                  <div style={{ fontSize: 12, color: LBRAND.gray500 }}>{b.s}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Feature row — 4 small */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)',
          gap: isMobile ? 16 : 24,
          marginTop: isMobile ? 32 : 56
        }}>
          {[
            { icon: IconMessageCircle, t: 'Real-time engagement', b: 'Chat with customers and broadcast updates the second they enter your space.' },
            { icon: IconMapPin, t: 'Table QR ordering', b: 'A QR code per table — every order arrives tagged with where to run it.' },
            { icon: IconSparkles, t: 'Order at the table', b: 'Guests order and pay from their seat. Every ticket arrives tagged with the table to run it to.' },
            { icon: IconArrowRight, t: 'Analytics that matter', b: 'Visits, return rate, peak hours, revenue — finally measurable.' },
            { icon: IconSparkles, t: 'Your own branded app', b: 'We build and ship a mobile app under your name and colours, on both stores.' },
            { icon: IconUsers, t: 'An exclusive social space', b: 'A room only your guests can enter — who is here now, regulars, and the conversation.' },
            { icon: IconCalendar, t: 'Events & ticketing', b: 'Sell tickets, manage the guest list, and check people in at the door.' },
            { icon: IconSparkles, t: 'Loyalty that runs itself', b: 'Rewards trigger from real visits and real spend — no punch cards to carry.' }
          ].map((f, i) => (
            <div key={i}>
              <div style={{ color: LBRAND.emerald600, marginBottom: 12 }}>
                <f.icon size={28} strokeWidth={1.7} />
              </div>
              <div style={{ fontSize: 17, fontWeight: 700, color: LBRAND.ink, marginBottom: 6, letterSpacing: -0.2 }}>{f.t}</div>
              <div style={{ fontSize: 14, color: LBRAND.gray600, lineHeight: 1.55 }}>{f.b}</div>
            </div>
          ))}
        </div>
      </div>

      {/* $99 OFFER + SCAN — the ad offer, and a code anyone can scan from the
          page or long-press on a phone. Links through to the funnel, which is
          where paid traffic actually lands. */}
      <div style={{
        background: `linear-gradient(160deg, #FF5A1F 0%, #B02E00 120%)`,
        color: LBRAND.white,
        padding: `${isMobile ? 48 : 76}px ${heroPad}px`
      }}>
        <div style={{
          maxWidth: 1200, margin: '0 auto', display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.1fr 0.9fr',
          gap: isMobile ? 32 : 54, alignItems: 'center'
        }}>
          <div>
            <div style={{
              display: 'inline-block', background: 'rgba(255,255,255,0.18)',
              border: '1px solid rgba(255,255,255,0.32)', borderRadius: 999,
              padding: '6px 14px', fontSize: 12, fontWeight: 800, letterSpacing: 0.6, marginBottom: 16
            }}>LAUNCH OFFER</div>
            <h2 style={{
              fontSize: isMobile ? 32 : 46, lineHeight: 1.0, letterSpacing: -1.6,
              fontWeight: 800, margin: '0 0 14px', textWrap: 'balance'
            }}>
              Your own branded app.
            </h2>
            {/* Price lockup: the full build price struck through, the launch
                price beside it, and what that saves. */}
            <div style={{ display: 'flex', alignItems: 'baseline', flexWrap: 'wrap', gap: isMobile ? 10 : 14, margin: '0 0 14px' }}>
              <span style={{
                fontSize: isMobile ? 30 : 40, fontWeight: 800, letterSpacing: -1.2,
                color: 'rgba(255,255,255,0.62)', textDecoration: 'line-through',
                textDecorationThickness: 3,
              }}>$899</span>
              <span style={{
                fontSize: isMobile ? 52 : 74, fontWeight: 800, letterSpacing: -3,
                color: '#FFC53D', lineHeight: 1,
              }}>$99</span>
              <span style={{
                fontSize: isMobile ? 15 : 17, fontWeight: 800, letterSpacing: -0.2,
                color: 'rgba(255,255,255,0.94)',
              }}>to launch</span>
              <span style={{
                background: '#FFC53D', color: '#7A2100', borderRadius: 999,
                padding: '5px 12px', fontSize: isMobile ? 12 : 13, fontWeight: 800,
                letterSpacing: 0.2, alignSelf: 'center',
              }}>Save $800</span>
            </div>
            <p style={{ fontSize: isMobile ? 16 : 18, lineHeight: 1.55, margin: '0 0 24px', color: 'rgba(255,255,255,0.94)', maxWidth: 500 }}>
              We design, build and publish a mobile app under your business's name:
              menus or services, ordering, and a scan-to-open page your customers use
              without installing anything. Restaurants, retail, salons, gyms and more.
              Or start with a free digital menu link.
            </p>
            <a href="/get-started" style={{
              display: 'inline-block', background: LBRAND.white, color: '#B02E00',
              fontSize: 16, fontWeight: 800, padding: '15px 28px', borderRadius: 13,
              textDecoration: 'none', boxShadow: '0 14px 28px -12px rgba(0,0,0,0.4)'
            }}>See the $99 launch →</a>
          </div>

          <div style={{
            background: LBRAND.white, color: LBRAND.ink, borderRadius: 20,
            padding: isMobile ? 20 : 26, textAlign: 'center',
            boxShadow: '0 26px 54px -20px rgba(0,0,0,0.45)'
          }}>
            <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: 1, color: '#B02E00', marginBottom: 4 }}>TRY THE REAL THING</div>
            <div style={{ fontSize: isMobile ? 18 : 20, fontWeight: 800, letterSpacing: -0.4, marginBottom: 14 }}>
              Scan to open a live menu
            </div>
            <img src="/landings/assets/demo-qr.svg" alt="QR code that opens a live demo menu"
                 style={{ width: isMobile ? 180 : 200, height: isMobile ? 180 : 200, display: 'block', margin: '0 auto' }} />
            <div style={{ fontSize: 13, color: LBRAND.gray600, lineHeight: 1.55, marginTop: 14 }}>
              <strong style={{ color: LBRAND.ink }}>On a phone?</strong> Press and hold the code, then tap the link.<br />
              <strong style={{ color: LBRAND.ink }}>On a computer?</strong> Point your phone camera at the screen.
            </div>
            <div style={{ marginTop: 12, paddingTop: 12, borderTop: `1px solid ${LBRAND.gray100}`, fontSize: 12.5, color: LBRAND.gray600 }}>
              Opens the menu for <strong style={{ color: LBRAND.ink }}>Chili Bird</strong>, our demo restaurant —
              instantly, with nothing to install.
            </div>
          </div>
        </div>
      </div>

      {/* APP CLIPS — the shortest path from a guest's phone to your menu.
          Sits directly before POS because both answer "what do I have to
          install?", and the answer here is "nothing". */}
      <div style={{
        background: LBRAND.gray50,
        padding: `${isMobile ? 56 : 88}px ${heroPad}px`,
        borderTop: `1px solid ${LBRAND.gray100}`
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.1fr 0.9fr',
          gap: isMobile ? 32 : 56,
          alignItems: 'center',
          maxWidth: 1200, margin: '0 auto'
        }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1.4, color: LBRAND.emerald600, marginBottom: 12 }}>APP CLIPS</div>
            <h2 style={{
              fontSize: isMobile ? 30 : 42,
              lineHeight: 1.05,
              letterSpacing: -1.2,
              fontWeight: 700,
              margin: '0 0 16px',
              color: LBRAND.ink,
              textWrap: 'balance'
            }}>Your menu opens in a tap. No download, no app store.</h2>
            <p style={{ fontSize: isMobile ? 16 : 17, color: LBRAND.gray600, margin: '0 0 24px', maxWidth: 520, lineHeight: 1.55 }}>
              A guest points their camera at your code and your menu opens instantly as an Apple App Clip — a lightweight piece of PlaceSpace that runs without installing anything. They browse, add up their bill or order and pay, and step into your space's feed. Then it disappears on its own.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                'Opens from a table QR, a window sticker, or a shared link',
                'Your own card on the invite — your logo, your storefront, your name',
                'Order and pay inside the clip, or just calculate the bill with tax and tip',
                'Guests can join your social space without making an account',
                'If they install the full app later, their order comes with them'
              ].map((line, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: LBRAND.gray700 }}>
                  <div style={{
                    width: 20, height: 20, borderRadius: '50%',
                    background: LBRAND.emerald50,
                    color: LBRAND.emerald600,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0, fontSize: 12, fontWeight: 700
                  }}>✓</div>
                  {line}
                </div>
              ))}
            </div>
          </div>

          {/* A mock of the card iOS actually shows on a scan: artwork, the
              title row with Open, and Apple's attribution strip. */}
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <div style={{
              width: '100%', maxWidth: 340,
              borderRadius: 22, overflow: 'hidden',
              background: LBRAND.white,
              boxShadow: '0 30px 60px -24px rgba(15,32,25,0.32), 0 2px 4px rgba(0,0,0,0.05)'
            }}>
              {/* The real card, not an approximation — this is the exact
                  artwork Apple shows when someone scans a venue's code. */}
              <img
                src="/landings/assets/appclip-card.jpg"
                alt="The App Clip card a guest sees when they scan"
                style={{ display: 'block', width: '100%', aspectRatio: '3 / 2', objectFit: 'cover' }}
              />
              <div style={{ background: '#3A3A3C', padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ color: '#fff', fontWeight: 600, fontSize: 15 }}>Menu</div>
                  <div style={{ color: 'rgba(255,255,255,0.6)', fontSize: 12 }}>View the menu &amp; order</div>
                </div>
                <div style={{
                  background: '#007AFF', color: '#fff', fontWeight: 600, fontSize: 13,
                  padding: '6px 18px', borderRadius: 999, flexShrink: 0
                }}>Open</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* EVERY VENUE GETS ITS OWN CARD — real cards from live venues. The
          point only lands when you can see five different ones side by side:
          scanning one venue's code looks nothing like scanning another's. */}
      <div style={{
        background: LBRAND.gray50,
        padding: `0 ${heroPad}px ${isMobile ? 56 : 88}px`
      }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ fontSize: isMobile ? 20 : 24, fontWeight: 700, color: LBRAND.ink, letterSpacing: -0.5, marginBottom: 8 }}>
            Every venue gets its own card.
          </div>
          <p style={{ fontSize: 15, color: LBRAND.gray600, margin: '0 0 24px', maxWidth: 560, lineHeight: 1.55 }}>
            Your logo, your storefront, your name — built from your brand, not ours. These are real cards from venues on PlaceSpace today.
          </p>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(5, 1fr)',
            gap: isMobile ? 12 : 18
          }}>
            {[
              { n: 'Coffee Guy Cafe', f: 'E3dw8BGba0flhlg3xPYe' },
              { n: 'Bagelheads', f: '3a94AargbkLqEGgri0UZ' },
              { n: 'Cafe Nola', f: '3M91ddHyrQyeo40MwAg0' },
              { n: "Jackson's Steakhouse", f: '48R7fGayd79t2Z47Souw' },
              { n: 'Pounders Hawaiian Grill', f: 'ukdKY0WOM4Tymg60Ha25' }
            ].map((c, i) => (
              <div key={i} style={{
                borderRadius: 14, overflow: 'hidden', background: LBRAND.white,
                border: `1px solid ${LBRAND.gray100}`,
                boxShadow: '0 8px 20px -12px rgba(15,32,25,0.22)'
              }}>
                <img
                  src={`/landings/assets/clip-examples/${c.f}.jpg`}
                  alt={`${c.n} App Clip card`}
                  style={{ display: 'block', width: '100%', aspectRatio: '3 / 2', objectFit: 'cover' }}
                />
                <div style={{ background: '#3A3A3C', padding: '8px 10px' }}>
                  <div style={{
                    color: '#fff', fontWeight: 600, fontSize: 11,
                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'
                  }}>{c.n}</div>
                  <div style={{ color: 'rgba(255,255,255,0.55)', fontSize: 9 }}>View the menu &amp; order</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* BEYOND THE LISTING — the two things that separate this from being
          another directory: an app that is actually theirs, and a room only
          their guests can enter. Both deserve more than a grid cell. */}
      <div style={{
        background: LBRAND.white,
        padding: `${isMobile ? 56 : 88}px ${heroPad}px`,
        borderTop: `1px solid ${LBRAND.gray100}`
      }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1.4, color: LBRAND.emerald600, marginBottom: 12 }}>MORE THAN A LISTING</div>
          <h2 style={{
            fontSize: isMobile ? 30 : 42,
            lineHeight: 1.05,
            letterSpacing: -1.2,
            fontWeight: 700,
            margin: '0 0 16px',
            color: LBRAND.ink,
            textWrap: 'balance',
            maxWidth: 720
          }}>We don't just add you to a directory. We build you a place to be.</h2>
          <p style={{ fontSize: isMobile ? 16 : 17, color: LBRAND.gray600, margin: '0 0 40px', maxWidth: 620, lineHeight: 1.55 }}>
            Most platforms rent you a profile page and take a cut. We build the software your venue runs on — and the room your regulars live in.
          </p>

          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
            gap: isMobile ? 24 : 32
          }}>
            {[
              {
                t: 'A mobile app under your own name',
                b: 'We design, build, and ship a branded iOS and Android app for your venue — your name, your colours, your logo on the home screen. Menus, ordering, events, and loyalty are already inside it. You do not manage a build, an App Store account, or a developer.',
                bullets: ['Published to both app stores', 'Your branding end to end', 'Updates ship without a store review']
              },
              {
                t: 'A social space only your guests get',
                b: 'Every venue gets a private room in PlaceSpace: who is here right now, who your regulars are, and a live feed your guests actually talk in. It turns a one-time visit into somewhere people come back to on purpose.',
                bullets: ['See who is in your venue now', 'Regulars surface automatically', 'Post to everyone who checked in']
              }
            ].map((c, i) => (
              <div key={i} style={{
                background: LBRAND.gray50,
                border: `1px solid ${LBRAND.gray100}`,
                borderRadius: 20,
                padding: isMobile ? 24 : 32
              }}>
                <div style={{ fontSize: isMobile ? 20 : 23, fontWeight: 700, color: LBRAND.ink, marginBottom: 12, letterSpacing: -0.4 }}>{c.t}</div>
                <p style={{ fontSize: 15, color: LBRAND.gray600, lineHeight: 1.6, margin: '0 0 18px' }}>{c.b}</p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                  {c.bullets.map((line, j) => (
                    <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: LBRAND.gray700 }}>
                      <div style={{
                        width: 20, height: 20, borderRadius: '50%',
                        background: LBRAND.emerald50,
                        color: LBRAND.emerald600,
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        flexShrink: 0, fontSize: 12, fontWeight: 700
                      }}>✓</div>
                      {line}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* POS INTEGRATIONS */}
      <div style={{
        background: LBRAND.white,
        padding: `${isMobile ? 56 : 88}px ${heroPad}px`,
        borderTop: `1px solid ${LBRAND.gray100}`
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '0.9fr 1.1fr',
          gap: isMobile ? 32 : 56,
          alignItems: 'center',
          maxWidth: 1200, margin: '0 auto'
        }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1.4, color: LBRAND.emerald600, marginBottom: 12 }}>POS INTEGRATIONS</div>
            <h2 style={{
              fontSize: isMobile ? 30 : 42,
              lineHeight: 1.05,
              letterSpacing: -1.2,
              fontWeight: 700,
              margin: '0 0 16px',
              color: LBRAND.ink,
              textWrap: 'balance'
            }}>Plugs into the system you already run.</h2>
            <p style={{ fontSize: isMobile ? 16 : 17, color: LBRAND.gray600, margin: '0 0 24px', maxWidth: 480, lineHeight: 1.55 }}>
              PlaceSpace connects to your point-of-sale in two clicks. Sales, inventory, and customer history sync automatically — no double entry, no spreadsheets.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                'Real-time sales & inventory sync',
                'Auto-match walk-ins to POS customers',
                'Loyalty rewards trigger at checkout',
                'Daily revenue & retention reports'
              ].map((line, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: LBRAND.gray700 }}>
                  <div style={{
                    width: 20, height: 20, borderRadius: '50%',
                    background: LBRAND.emerald50, color: LBRAND.emerald600,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0
                  }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="20 6 9 17 4 12"/>
                    </svg>
                  </div>
                  {line}
                </div>
              ))}
            </div>
          </div>

          {/* POS logo grid */}
          <div style={{
            background: LBRAND.cream,
            border: `1px solid ${LBRAND.gray100}`,
            borderRadius: 20,
            padding: isMobile ? 18 : 28,
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(3, 1fr)',
            gap: isMobile ? 10 : 14
          }}>
            {[
              { name: 'Square', tag: 'POS' },
              { name: 'Toast', tag: 'Restaurant' },
              { name: 'Clover', tag: 'POS' },
              { name: 'Shopify', tag: 'Retail' },
              { name: 'Lightspeed', tag: 'POS' },
              { name: 'Stripe Terminal', tag: 'Payments' },
              { name: 'Mindbody', tag: 'Wellness' },
              { name: 'Vagaro', tag: 'Salons' },
              { name: '+ More', tag: 'See all', ghost: true }
            ].map((p, i) => (
              <div key={i} style={{
                background: LBRAND.white,
                border: `1px solid ${p.ghost ? LBRAND.gray200 : LBRAND.gray100}`,
                borderStyle: p.ghost ? 'dashed' : 'solid',
                borderRadius: 12,
                padding: '16px 14px',
                display: 'flex', flexDirection: 'column', gap: 6,
                minHeight: 76,
                justifyContent: 'center'
              }}>
                <div style={{
                  fontSize: 15, fontWeight: 700,
                  color: p.ghost ? LBRAND.gray500 : LBRAND.ink,
                  letterSpacing: -0.2
                }}>{p.name}</div>
                <div style={{
                  fontSize: 10, fontWeight: 700, letterSpacing: 0.8,
                  color: p.ghost ? LBRAND.gray400 : LBRAND.emerald600,
                  textTransform: 'uppercase'
                }}>{p.tag}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* BUSINESS TYPES */}
      <div style={{
        background: LBRAND.cream,
        padding: `${isMobile ? 56 : 96}px ${heroPad}px`,
        borderTop: `1px solid ${LBRAND.gray100}`
      }}>
        <div style={{ maxWidth: 720, marginBottom: isMobile ? 32 : 48 }}>
          <h2 style={{
            fontSize: isMobile ? 30 : 44,
            lineHeight: 1.05,
            letterSpacing: -1.2,
            fontWeight: 700,
            margin: '0 0 14px',
            color: LBRAND.ink,
            textWrap: 'balance'
          }}>Built for businesses<br/>like yours.</h2>
          <p style={{ fontSize: isMobile ? 15 : 17, color: LBRAND.gray600, margin: 0, maxWidth: 580, lineHeight: 1.55 }}>
            From coffee shops to fitness studios, any business with a physical location can thrive on PlaceSpace.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)',
          gap: isMobile ? 12 : 20
        }}>
          {[
            { label: 'Restaurants & Cafés', count: '420+', hue: 25, img: 'photo-1517248135467-4c7edcad34c4' },
            { label: 'Retail Stores', count: '180+', hue: 200, img: 'photo-1441986300917-64674bd600d8' },
            { label: 'Fitness & Wellness', count: '95+', hue: 145, img: 'photo-1534438327276-14e5300c3a48' },
            { label: 'Salons & Spas', count: '110+', hue: 320, img: 'photo-1560066984-138dadb4c035' },
            { label: 'Entertainment Venues', count: '65+', hue: 270, img: 'photo-1470229722913-7c0e2dbbafd3' },
            { label: 'Professional Services', count: '85+', hue: 215, img: 'photo-1497366754035-f200968a6e72' },
            { label: 'Hotels & Hospitality', count: '40+', hue: 35, img: 'photo-1566073771259-6a8506099945' },
            { label: 'And many more', count: '—', hue: 165, ghost: true }
          ].map((c, i) => (
            <div key={i} style={{
              position: 'relative',
              aspectRatio: '4/3',
              borderRadius: 16,
              // Photo over the hue gradient — the gradient shows while the
              // photo streams in (and if it ever fails), so the card is
              // never a blank box.
              background: c.ghost
                ? LBRAND.white
                : `url(https://images.unsplash.com/${c.img}?auto=format&fit=crop&w=800&q=60) center/cover no-repeat, linear-gradient(135deg, hsl(${c.hue} 28% 35%), hsl(${c.hue} 35% 22%))`,
              border: c.ghost ? `1px dashed ${LBRAND.gray300}` : 'none',
              overflow: 'hidden',
              display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
              padding: isMobile ? 14 : 18,
              cursor: 'pointer'
            }}>
              {!c.ghost && (
                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'linear-gradient(180deg, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.62) 100%)',
                  pointerEvents: 'none'
                }} />
              )}
              {c.ghost && (
                <div style={{
                  position: 'absolute', top: isMobile ? 14 : 18, left: isMobile ? 14 : 18,
                  fontSize: 10, fontFamily: BRAND.fontMono || 'ui-monospace, monospace',
                  color: LBRAND.gray400,
                  letterSpacing: 0.5
                }}>
                  — add yours —
                </div>
              )}
              <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 8 }}>
                <div style={{
                  fontSize: isMobile ? 14 : 16,
                  fontWeight: 700,
                  color: c.ghost ? LBRAND.gray700 : LBRAND.white,
                  letterSpacing: -0.2,
                  lineHeight: 1.2
                }}>{c.label}</div>
                <div style={{
                  fontSize: 11, fontWeight: 700,
                  padding: '3px 8px', borderRadius: 999,
                  background: c.ghost ? LBRAND.gray100 : 'rgba(255,255,255,0.18)',
                  color: c.ghost ? LBRAND.gray600 : LBRAND.white,
                  backdropFilter: 'blur(4px)',
                  whiteSpace: 'nowrap'
                }}>{c.count}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* HOW IT WORKS */}
      <div style={{
        background: LBRAND.white,
        padding: `${isMobile ? 56 : 96}px ${heroPad}px`,
        borderTop: `1px solid ${LBRAND.gray100}`
      }}>
        <div style={{ maxWidth: 720, marginBottom: isMobile ? 32 : 56, textAlign: isMobile ? 'left' : 'center', margin: isMobile ? '0 0 32px' : '0 auto 56px' }}>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1.4, color: LBRAND.emerald600, marginBottom: 12 }}>HOW IT WORKS</div>
          <h2 style={{
            fontSize: isMobile ? 30 : 44,
            lineHeight: 1.05,
            letterSpacing: -1.2,
            fontWeight: 700,
            margin: 0,
            color: LBRAND.ink,
            textWrap: 'balance'
          }}>From request to first order in 48 hours.</h2>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 20 : 32,
          maxWidth: 1100, margin: '0 auto'
        }}>
          {[
            { n: '01', t: 'Request access', b: 'Tell us about your business and your goals. We review every request to keep the platform high-signal.' },
            { n: '02', t: 'We set you up', b: 'Our team imports your menu, hours, and inventory. You approve the listing and your live presence goes on.' },
            { n: '03', t: 'Customers walk in', b: 'PlaceSpace surfaces your space to people nearby — and to your existing customers when they\'re close.' }
          ].map((s, i) => (
            <div key={i} style={{
              background: LBRAND.white,
              border: `1px solid ${LBRAND.gray100}`,
              borderRadius: 18,
              padding: isMobile ? 24 : 32,
              position: 'relative'
            }}>
              <div style={{
                fontSize: 56, fontWeight: 800, letterSpacing: -2,
                color: LBRAND.emerald100, lineHeight: 1, marginBottom: 16
              }}>{s.n}</div>
              <div style={{ fontSize: 20, fontWeight: 700, color: LBRAND.ink, letterSpacing: -0.4, marginBottom: 8 }}>{s.t}</div>
              <div style={{ fontSize: 14, color: LBRAND.gray600, lineHeight: 1.55 }}>{s.b}</div>
            </div>
          ))}
        </div>
      </div>

      {/* TESTIMONIAL */}
      <div style={{
        background: LBRAND.ink,
        color: LBRAND.white,
        padding: `${isMobile ? 56 : 96}px ${heroPad}px`,
        position: 'relative',
        overflow: 'hidden'
      }}>
        <div style={{
          position: 'absolute', top: -150, left: -150, width: 500, height: 500,
          background: `radial-gradient(circle, rgba(16,185,129,0.18) 0%, transparent 65%)`,
          pointerEvents: 'none'
        }} />
        <div style={{ maxWidth: 900, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1.6, color: '#34d399', marginBottom: 24 }}>WHAT OWNERS SAY</div>
          <div style={{
            fontSize: isMobile ? 24 : 36,
            lineHeight: 1.25,
            fontWeight: 600,
            letterSpacing: -0.8,
            margin: '0 0 32px',
            color: LBRAND.white,
            textWrap: 'balance'
          }}>
            "We doubled our weekday traffic in three weeks. Our regulars walk in, the app pings me, and I'm already pouring their drink before they hit the counter."
          </div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14 }}>
            <Avatar name={AVATAR_NAMES[1].name} hue={AVATAR_NAMES[1].hue} img={AVATAR_NAMES[1].img} size={48} />
            <div style={{ textAlign: 'left' }}>
              <div style={{ fontSize: 15, fontWeight: 700 }}>Sarah Okonkwo</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)' }}>Owner · Foundry Coffee, Brooklyn</div>
            </div>
          </div>

          {/* Stats strip */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)',
            gap: isMobile ? 20 : 32,
            marginTop: isMobile ? 40 : 64,
            paddingTop: isMobile ? 32 : 48,
            borderTop: '1px solid rgba(255,255,255,0.1)'
          }}>
            {[
              { n: '2.1×', l: 'Avg traffic lift' },
              { n: '38%', l: 'Repeat visits' },
              { n: '4.9', l: 'Owner rating' },
              { n: '< 48h', l: 'To go live' }
            ].map((s, i) => (
              <div key={i} style={{ textAlign: 'center' }}>
                <div style={{ fontSize: isMobile ? 28 : 36, fontWeight: 800, letterSpacing: -1, color: '#fff' }}>{s.n}</div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 4, letterSpacing: 0.4 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* FINAL CTA */}
      <div style={{
        background: LBRAND.cream,
        padding: `${isMobile ? 64 : 96}px ${heroPad}px`,
        textAlign: 'center'
      }}>
        <h2 style={{
          fontSize: isMobile ? 34 : 56,
          lineHeight: 1.04,
          letterSpacing: -1.6,
          fontWeight: 700,
          margin: '0 auto 18px',
          color: LBRAND.ink,
          textWrap: 'balance',
          maxWidth: 760
        }}>
          The room is filling up.<br/>
          <span style={{ color: LBRAND.emerald600 }}>Be the place they come back to.</span>
        </h2>
        <p style={{
          fontSize: isMobile ? 16 : 19,
          lineHeight: 1.5,
          color: LBRAND.gray600,
          margin: '0 auto 36px',
          maxWidth: 540
        }}>
          Free to apply. No card. We'll respond within 24 hours.
        </p>
        <a href="#top" onClick={(e) => { e.preventDefault(); document.querySelector('input[name="biz_name"]')?.focus(); }} style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          background: LBRAND.emerald600, color: LBRAND.white,
          padding: '18px 32px', borderRadius: 14,
          fontSize: 16, fontWeight: 700,
          textDecoration: 'none',
          boxShadow: '0 8px 24px -6px rgba(16,185,129,.45)'
        }}>
          Request access
          <IconArrowRight size={18} strokeWidth={2.5} />
        </a>
      </div>

      {/* Footer */}
      <div style={{
        padding: `28px ${heroPad}px`,
        fontSize: 12, color: LBRAND.gray500,
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16,
        borderTop: `1px solid ${LBRAND.gray100}`,
        background: LBRAND.white
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <PSLogo size={20} />
          <span>© PlaceSpace 2026 · placespace.co/for-business</span>
        </div>
        <div style={{ display: 'flex', gap: 18 }}>
          <a href="/" style={{ color: 'inherit', textDecoration: 'none' }}>Consumer</a>
          <a href="/blog" style={{ color: 'inherit', textDecoration: 'none' }}>Blog</a>
          <a href="/privacy-policy" style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
          <a href="/auth?business=1" style={{ color: 'inherit', textDecoration: 'none' }}>Business sign in</a>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Form component — controlled, with focus styling and inline labels.
/**
 * StartSignup — find the business on Google, then three fields.
 *
 * Owners should not retype what Google already knows. They search their own
 * name, pick it, and address / city / state / phone / website / business type
 * all come back from Places via the `placeLookup` proxy. All that is left is
 * who they are and how to reach them.
 *
 * Manual entry stays available for a business Google has never heard of.
 */
const PLACE_LOOKUP = 'https://us-central1-placespace-d5241.cloudfunctions.net/placeLookup';

function StartSignup({ isMobile }) {
  const [q, setQ] = React.useState('');
  const [results, setResults] = React.useState([]);
  const [searching, setSearching] = React.useState(false);
  const [place, setPlace] = React.useState(null);   // chosen Google place
  const [manual, setManual] = React.useState(false);
  const [v, setV] = React.useState({ name: '', email: '', phone: '' });
  const [err, setErr] = React.useState('');
  const set = (k) => (e) => setV({ ...v, [k]: e.target.value });

  // Debounced search — one request per pause, not one per keystroke.
  React.useEffect(() => {
    if (place || manual) return;
    const term = q.trim();
    if (term.length < 3) { setResults([]); return; }
    let dead = false;
    setSearching(true);
    const t = setTimeout(async () => {
      try {
        const r = await fetch(`${PLACE_LOOKUP}?q=${encodeURIComponent(term)}`);
        const j = await r.json();
        if (!dead) setResults(j.results || []);
      } catch (_) {
        if (!dead) setResults([]);
      } finally {
        if (!dead) setSearching(false);
      }
    }, 380);
    return () => { dead = true; clearTimeout(t); };
  }, [q, place, manual]);

  const pick = async (r) => {
    setResults([]);
    setQ(r.name);
    setPlace({ ...r, loading: true });
    try {
      const res = await fetch(`${PLACE_LOOKUP}?placeId=${encodeURIComponent(r.placeId)}`);
      const d = await res.json();
      setPlace({ ...d, loading: false });
      // Google usually has the business phone; keep it unless they change it.
      if (d.phone) setV((x) => (x.phone ? x : { ...x, phone: d.phone }));
    } catch (_) {
      setPlace({ ...r, loading: false });
    }
  };

  const go = (e) => {
    e.preventDefault();
    if (!place && !manual) { setErr('Find your business first, or add it manually.'); return; }
    if (manual && !q.trim()) { setErr('Enter your business name.'); return; }
    if (!v.email) { setErr('Email is required.'); return; }
    const p = place || {};
    const params = {
      biz: p.name || q.trim(),
      name: v.name, email: v.email, phone: v.phone,
      city: p.city || '', type: p.bizType || '',
      placeId: p.placeId || '', address: p.address || '',
      state: p.state || '', website: p.website || '',
    };
    const qs = new URLSearchParams(
      Object.fromEntries(Object.entries(params).filter(([, val]) => val)),
    );
    window.location.href = `/get-started?${qs.toString()}`;
  };

  const lbl = { fontSize: 12.5, fontWeight: 700, color: LBRAND.ink, display: 'block', marginBottom: 6 };

  return (
    <form onSubmit={go} style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
      {/* 1 — find the business */}
      <div style={{ position: 'relative' }}>
        <label style={lbl}>{manual ? 'Business name' : 'Find your business'}</label>
        <input
          className="lp-input"
          value={q}
          onChange={(e) => { setQ(e.target.value); setPlace(null); setErr(''); }}
          placeholder={manual ? 'Urban Coffee House' : 'Start typing your business name…'}
          autoComplete="off"
        />
        {!manual && searching && q.trim().length >= 3 && !place && (
          <div style={{ fontSize: 12, color: LBRAND.gray600, marginTop: 6 }}>Searching…</div>
        )}
        {!manual && results.length > 0 && (
          <div style={{
            position: 'absolute', left: 0, right: 0, top: '100%', zIndex: 30,
            background: LBRAND.white, border: `1px solid ${LBRAND.gray100}`,
            borderRadius: 12, marginTop: 6, overflow: 'hidden',
            boxShadow: '0 20px 40px -16px rgba(16,24,32,0.28)',
          }}>
            {results.map((r, i) => (
              <button key={r.placeId} type="button" onClick={() => pick(r)} style={{
                display: 'block', width: '100%', textAlign: 'left', cursor: 'pointer',
                background: 'none', border: 'none', fontFamily: 'inherit',
                borderTop: i ? `1px solid ${LBRAND.gray100}` : 'none', padding: '11px 13px',
              }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: LBRAND.ink }}>{r.name}</div>
                <div style={{ fontSize: 12, color: LBRAND.gray600, marginTop: 2 }}>{r.address}</div>
              </button>
            ))}
          </div>
        )}
      </div>

      {/* What Google gave us, so they can see it is right before continuing. */}
      {place && !place.loading && (
        <div style={{
          background: '#F3F9F6', border: '1px solid #D6EBE2', borderRadius: 12, padding: '11px 13px',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10 }}>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: 800, color: LBRAND.ink }}>{place.name}</div>
              <div style={{ fontSize: 12, color: LBRAND.gray600, marginTop: 2 }}>{place.address}</div>
            </div>
            <button type="button" onClick={() => { setPlace(null); setQ(''); }} style={{
              background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
              fontSize: 12, fontWeight: 700, color: LBRAND.gray600, flexShrink: 0, padding: 0,
            }}>Change</button>
          </div>
        </div>
      )}

      {/* 2 — who they are */}
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 13 }}>
        <div>
          <label style={lbl}>Your name</label>
          <input className="lp-input" value={v.name} onChange={set('name')} placeholder="Jordan Diaz" />
        </div>
        <div>
          <label style={lbl}>Phone</label>
          <input className="lp-input" value={v.phone} onChange={set('phone')} placeholder="(850) 555-0142" />
        </div>
      </div>
      <div>
        <label style={lbl}>Email</label>
        <input className="lp-input" type="email" value={v.email} onChange={set('email')} placeholder="you@yourbusiness.com" />
      </div>

      {err && <div style={{ color: '#B02E00', fontSize: 13.5, fontWeight: 700 }}>{err}</div>}
      <button type="submit" style={{
        width: '100%', border: 'none', borderRadius: 12, padding: '15px 0',
        background: LBRAND.emerald600, color: LBRAND.white,
        fontSize: 16, fontWeight: 800, cursor: 'pointer', fontFamily: 'inherit',
      }}>Continue →</button>

      <div style={{ fontSize: 12, color: LBRAND.gray600, textAlign: 'center' }}>
        {!manual && (
          <React.Fragment>
            Can&rsquo;t find it?{' '}
            <button type="button" onClick={() => { setManual(true); setResults([]); }} style={{
              background: 'none', border: 'none', padding: 0, cursor: 'pointer',
              fontFamily: 'inherit', fontSize: 12, fontWeight: 700, color: LBRAND.emerald700,
            }}>Add it manually</button>
            {' · '}
          </React.Fragment>
        )}
        Already have an account?{' '}
        <a href="/auth?business=1" style={{ color: LBRAND.emerald700, fontWeight: 700 }}>Business log in</a>
      </div>
    </form>
  );
}

function BizForm({ isMobile, ctaLabel = 'Submit request', prefillNotes = '' }) {
  // The funnel passes the chosen plan + add-ons through here so the lead that
  // lands in the inbox already says what they picked.
  const [vals, setVals] = useStateBiz({
    // Empty, never a sample value: 'Urban Coffee House' used to be the
    // actual VALUE here, so a hurried owner could submit a lead under a
    // fictional cafe's name. The placeholder carries the example.
    biz_name: '',
    address: '',
    city: '',
    first: '',
    last: '',
    email: '',
    phone: '',
    notes: '',
    type: 'Café / Restaurant'
  });
  const [submitted, setSubmitted] = useStateBiz(false);
  const [submitting, setSubmitting] = useStateBiz(false);
  const [submitError, setSubmitError] = useStateBiz('');
  const set = (k) => (e) => setVals({ ...vals, [k]: e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    if (!vals.email || !vals.biz_name) { setSubmitError('Business name and email are required'); return; }
    setSubmitting(true); setSubmitError('');
    try {
      const res = await fetch('https://us-central1-placespace-d5241.cloudfunctions.net/submitBusinessSignupRequest', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          businessName: vals.biz_name,
          businessType: vals.type,
          address: vals.address,
          city: vals.city,
          firstName: vals.first,
          lastName: vals.last,
          email: vals.email,
          phone: vals.phone,
          notes: [prefillNotes, vals.notes].filter(Boolean).join('\n\n'),
        }),
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({}));
        setSubmitError(err.error || 'Submission failed. Please try again.');
        setSubmitting(false);
        return;
      }
      setSubmitted(true);
    } catch (err) {
      setSubmitError('Network error. Please try again.');
      setSubmitting(false);
    }
  };

  if (submitted) {
    return (
      <div style={{ padding: '40px 8px', textAlign: 'center' }}>
        <div style={{
          width: 56, height: 56, borderRadius: '50%',
          background: LBRAND.emerald50, color: LBRAND.emerald600,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          marginBottom: 20
        }}>
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12"/>
          </svg>
        </div>
        <div style={{ fontSize: 22, fontWeight: 700, color: LBRAND.ink, letterSpacing: -0.4, marginBottom: 8 }}>Request received</div>
        <div style={{ fontSize: 14, color: LBRAND.gray600, lineHeight: 1.55 }}>Thanks {vals.first || 'there'} — we'll be in touch within 24 hours.</div>
      </div>
    );
  }

  const labelStyle = {
    display: 'block',
    fontSize: 12, fontWeight: 600, color: LBRAND.gray700,
    marginBottom: 6, letterSpacing: 0.1
  };

  return (
    <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div>
        <label style={labelStyle}>Business name</label>
        <input className="lp-input" name="biz_name" value={vals.biz_name} onChange={set('biz_name')} placeholder="Urban Coffee House" autoFocus />
      </div>

      <div>
        <label style={labelStyle}>Business type</label>
        <select className="lp-input" value={vals.type} onChange={set('type')} style={{ appearance: 'none', backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 6 6 11 1'/></svg>")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 16px center', paddingRight: 40 }}>
          <option>Café / Restaurant</option>
          <option>Retail store</option>
          <option>Fitness / Wellness</option>
          <option>Salon / Spa</option>
          <option>Entertainment venue</option>
          <option>Professional services</option>
          <option>Hotel / Hospitality</option>
          <option>Other</option>
        </select>
      </div>

      <div>
        <label style={labelStyle}>Business address</label>
        <input className="lp-input" value={vals.address} onChange={set('address')} placeholder="123 Main Street" />
      </div>

      <div>
        <label style={labelStyle}>City</label>
        <input className="lp-input" value={vals.city} onChange={set('city')} placeholder="San Francisco" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <div>
          <label style={labelStyle}>First name</label>
          <input className="lp-input" value={vals.first} onChange={set('first')} placeholder="John" />
        </div>
        <div>
          <label style={labelStyle}>Last name</label>
          <input className="lp-input" value={vals.last} onChange={set('last')} placeholder="Smith" />
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 12 }}>
        <div>
          <label style={labelStyle}>Email</label>
          <input className="lp-input" type="email" value={vals.email} onChange={set('email')} placeholder="john@business.com" />
        </div>
        <div>
          <label style={labelStyle}>Phone</label>
          <input className="lp-input" value={vals.phone} onChange={set('phone')} placeholder="(555) 123-4567" />
        </div>
      </div>

      <div>
        <label style={labelStyle}>Anything else we should know? <span style={{ color: LBRAND.gray400, fontWeight: 500 }}>(optional)</span></label>
        <textarea className="lp-input" rows="3" value={vals.notes} onChange={set('notes')} placeholder="Tell us about your business..." style={{ resize: 'vertical', minHeight: 80, fontFamily: 'inherit' }} />
      </div>

      <button type="submit" disabled={submitting} className="lp-btn-primary" style={{
        marginTop: 6, padding: '16px 24px', borderRadius: 12,
        fontSize: 15, fontWeight: 700,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        opacity: submitting ? 0.6 : 1
      }}>
        {submitting ? 'Sending…' : ctaLabel}
        <IconArrowRight size={18} strokeWidth={2.5} />
      </button>
      {submitError && (
        <div style={{ fontSize: 12, color: '#dc2626', textAlign: 'center', marginTop: -2 }}>{submitError}</div>
      )}
      <div style={{ fontSize: 12, color: LBRAND.gray500, textAlign: 'center', marginTop: -2 }}>
        We'll get back to you within 24 hours.
      </div>
    </form>
  );
}

window.LandingBusiness = LandingBusiness;