// 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 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, bookings, 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 &&
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <a href="/" style={{ fontSize: 14, fontWeight: 600, color: LBRAND.gray700, textDecoration: 'none' }}>Consumer</a>
            <a href="/blog" style={{ fontSize: 14, fontWeight: 600, color: LBRAND.gray700, textDecoration: 'none' }}>Blog</a>
            <a href="/auth" style={{ fontSize: 14, fontWeight: 600, color: LBRAND.gray700, textDecoration: 'none' }}>Log in</a>
            <a href="/auth?mode=signup" style={{
              fontSize: 14, fontWeight: 700, color: LBRAND.white,
              padding: '10px 18px', borderRadius: 10,
              textDecoration: 'none',
              background: LBRAND.emerald600
            }}>Get started</a>
          </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>
              <div style={{ fontSize: 13, color: LBRAND.gray600 }}>
                <span style={{ fontWeight: 700, color: LBRAND.gray900 }}>1,200+ local businesses</span> already 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: 22 }}>
              <h2 style={{
                fontSize: isMobile ? 24 : 28,
                fontWeight: 700,
                letterSpacing: -0.6,
                margin: '0 0 6px',
                color: LBRAND.ink
              }}>Request access</h2>
              <p style={{ fontSize: 14, color: LBRAND.gray600, margin: 0, lineHeight: 1.5 }}>
                Tell us about your business — we'll get you set up within 24 hours.
              </p>
            </div>

            <BizForm isMobile={isMobile} ctaLabel={_cta} />
          </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 kick off the booking flow 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 }}>
                Bookings, orders, events — one inbox.
              </div>
              <div style={{ fontSize: 15, color: LBRAND.gray700, lineHeight: 1.5 }}>
                Customers reserve, order, and RSVP 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 for 2 · 7:30pm', s: 'Maya R.' },
                { t: '2× oat lattes · pickup', s: 'Jordan L.' },
                { t: 'RSVP · Friday DJ set', 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: IconCalendar, t: 'Booking management', b: 'Reservations, appointments, and events — all confirmed automatically.' },
            { icon: IconSparkles, t: 'Order fulfillment', b: 'Takeout, delivery, and in-store pickup with one connected flow.' },
            { icon: IconArrowRight, t: 'Analytics that matter', b: 'Visits, return rate, peak hours, revenue — finally measurable.' }
          ].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>

      {/* 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 },
            { label: 'Retail Stores', count: '180+', hue: 200 },
            { label: 'Fitness & Wellness', count: '95+', hue: 145 },
            { label: 'Salons & Spas', count: '110+', hue: 320 },
            { label: 'Entertainment Venues', count: '65+', hue: 270 },
            { label: 'Professional Services', count: '85+', hue: 215 },
            { label: 'Hotels & Hospitality', count: '40+', hue: 35 },
            { label: 'And many more', count: '—', hue: 165, ghost: true }
          ].map((c, i) => (
            <div key={i} style={{
              position: 'relative',
              aspectRatio: '4/3',
              borderRadius: 16,
              background: c.ghost
                ? LBRAND.white
                : `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: 'space-between',
              padding: isMobile ? 14 : 18,
              cursor: 'pointer'
            }}>
              {!c.ghost && (
                <>
                  {/* Subtle stripe placeholder */}
                  <div style={{
                    position: 'absolute', inset: 0,
                    backgroundImage: `repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 14px)`,
                    pointerEvents: 'none'
                  }} />
                  <div style={{
                    position: 'absolute', inset: 0,
                    background: 'linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%)',
                    pointerEvents: 'none'
                  }} />
                </>
              )}
              <div style={{
                position: 'relative',
                fontSize: 10, fontFamily: BRAND.fontMono || 'ui-monospace, monospace',
                color: c.ghost ? LBRAND.gray400 : 'rgba(255,255,255,0.55)',
                letterSpacing: 0.5
              }}>
                {c.ghost ? '— add yours —' : `[ ${c.label.toLowerCase().replace(/[& ]+/g, '-')}.jpg ]`}
              </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 booking 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" style={{ color: 'inherit', textDecoration: 'none' }}>Sign in</a>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Form component — controlled, with focus styling and inline labels.
function BizForm({ isMobile, ctaLabel = 'Submit request' }) {
  const [vals, setVals] = useStateBiz({
    biz_name: 'Urban Coffee House',
    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: vals.notes,
        }),
      });
      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;