// mobile.jsx — Rally mobile (iOS frame) preview
// Renders a compact mobile version of the landing page in an iPhone bezel.

function MobileScreen() {
  return (
    <div style={{ background: 'var(--cream)', minHeight: '100%', paddingBottom: 40 }}>
      {/* status spacer */}
      <div style={{ height: 60 }} />

      {/* mini nav */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '8px 20px 12px',
      }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
          <RallyMark size={22} color="var(--coral)" />
          <span style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 20, letterSpacing: '-0.02em', color: 'var(--ink)' }}>Rally</span>
        </div>
        <div style={{
          width: 38, height: 38, borderRadius: 999,
          background: 'white', border: '1px solid var(--neutral-200)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="18" height="14" viewBox="0 0 18 14"><path d="M2 2h14M2 7h14M2 12h14" stroke="var(--ink)" strokeWidth="2" strokeLinecap="round" /></svg>
        </div>
      </div>

      {/* Hero */}
      <div style={{ padding: '12px 20px 24px' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 12px 6px 10px', background: 'white',
          border: '1px solid var(--neutral-200)', borderRadius: 999,
          fontSize: 11, fontWeight: 600, color: 'var(--ink-2)',
        }}>
          <span className="dot" style={{ width: 6, height: 6 }} /> Booking summer 2026
        </div>
        <h1 style={{
          fontFamily: 'var(--display)', fontSize: 38, lineHeight: 1.0,
          letterSpacing: '-0.035em', fontWeight: 700,
          margin: '14px 0 12px', color: 'var(--ink)',
        }}>
          The backyard party,<br />
          <em style={{ fontStyle: 'normal', color: 'var(--coral)' }}>booked in minutes.</em>
        </h1>
        <p style={{ fontSize: 14, color: 'var(--ink-2)', margin: '0 0 18px', lineHeight: 1.5 }}>
          Bounce houses, water slides, tables, tents — from trusted local vendors near you.
        </p>

        {/* Mobile search */}
        <div style={{
          background: 'white', borderRadius: 22,
          padding: 8, boxShadow: '0 12px 30px rgba(31,41,51,.08)',
          border: '1px solid var(--neutral-100)',
        }}>
          {[
            { l: 'Where', v: '92614  ·  Irvine, CA' },
            { l: 'When', v: 'Sat, Jun 14' },
            { l: 'What', v: 'Bounce houses' },
          ].map((f, i, arr) => (
            <div key={i} style={{
              padding: '10px 14px',
              borderBottom: i < arr.length - 1 ? '1px solid var(--neutral-100)' : 'none',
            }}>
              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 2 }}>{f.l}</div>
              <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink)' }}>{f.v}</div>
            </div>
          ))}
          <button style={{
            marginTop: 8, width: '100%', height: 48,
            background: 'var(--coral)', color: 'white', border: 0,
            borderRadius: 16, fontSize: 15, fontWeight: 600, cursor: 'pointer',
            boxShadow: '0 6px 16px rgba(255,122,89,.35)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="white" strokeWidth="2.4" fill="none" /><path d="m20 20-3.5-3.5" stroke="white" strokeWidth="2.4" strokeLinecap="round" /></svg>
            Search rentals
          </button>
        </div>
      </div>

      {/* Trust pills */}
      <div style={{
        display: 'flex', gap: 8, overflowX: 'auto',
        padding: '0 20px 24px', scrollbarWidth: 'none',
      }}>
        {['✓ Insured vendors', '✓ Real availability', '✓ Transparent pricing', '✓ Easy booking'].map((t, i) => (
          <div key={i} style={{
            flexShrink: 0, padding: '8px 14px', borderRadius: 999,
            background: 'white', border: '1px solid var(--neutral-200)',
            fontSize: 12, fontWeight: 600, color: 'var(--ink-2)', whiteSpace: 'nowrap',
          }}>{t}</div>
        ))}
      </div>

      {/* Categories */}
      <div style={{ padding: '0 20px 8px' }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          marginBottom: 14,
        }}>
          <h2 style={{ fontFamily: 'var(--display)', fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', margin: 0, color: 'var(--ink)' }}>Browse</h2>
          <a style={{ fontSize: 13, color: 'var(--coral)', fontWeight: 600 }} href="#">All →</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {[
            { t: 'Bounce houses', n: '120+', img: 'https://images.unsplash.com/photo-1530103862676-de8c9debad1d?auto=format&fit=crop&w=600&q=80' },
            { t: 'Water slides', n: '64', img: 'https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?auto=format&fit=crop&w=600&q=80' },
            { t: 'Foam parties', n: '12', img: 'https://images.unsplash.com/photo-1533294455009-a77b7557d2d1?auto=format&fit=crop&w=600&q=80' },
            { t: 'Tables & chairs', n: '210+', img: 'https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?auto=format&fit=crop&w=600&q=80' },
          ].map((c, i) => (
            <a key={i} href="#" style={{
              borderRadius: 18, overflow: 'hidden', background: 'white',
              boxShadow: '0 1px 2px rgba(31,41,51,.04)',
              border: '1px solid var(--neutral-100)',
            }}>
              <div style={{ aspectRatio: '4/3', overflow: 'hidden' }}>
                <img alt={c.t} src={c.img} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ padding: '10px 12px' }}>
                <div style={{ fontWeight: 700, fontSize: 13, color: 'var(--ink)' }}>{c.t}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-2)' }}>{c.n} rentals</div>
              </div>
            </a>
          ))}
        </div>
      </div>

      {/* Featured rail */}
      <div style={{ marginTop: 28 }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          padding: '0 20px 12px',
        }}>
          <h2 style={{ fontFamily: 'var(--display)', fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', margin: 0, color: 'var(--ink)' }}>Featured near you</h2>
        </div>
        <div style={{
          display: 'flex', gap: 14, overflowX: 'auto',
          padding: '0 20px 8px', scrollbarWidth: 'none',
        }}>
          {[
            { t: 'Castle Bounce', v: 'Bella Bounce', p: 219, r: 4.96, img: 'https://images.unsplash.com/photo-1530103862676-de8c9debad1d?auto=format&fit=crop&w=600&q=80' },
            { t: 'Tropical Slide', v: 'Splash Bros', p: 285, r: 4.91, img: 'https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?auto=format&fit=crop&w=600&q=80' },
            { t: 'Foam Cannon', v: 'Foamtastic', p: 349, r: 4.88, img: 'https://images.unsplash.com/photo-1533294455009-a77b7557d2d1?auto=format&fit=crop&w=600&q=80' },
          ].map((c, i) => (
            <div key={i} style={{ flexShrink: 0, width: 200 }}>
              <div style={{ position: 'relative', aspectRatio: '1/1', borderRadius: 16, overflow: 'hidden', marginBottom: 10 }}>
                <img alt={c.t} src={c.img} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                <div style={{
                  position: 'absolute', top: 8, right: 8,
                  width: 30, height: 30, borderRadius: 999,
                  background: 'rgba(0,0,0,.18)', backdropFilter: 'blur(6px)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <svg width="14" height="14" viewBox="0 0 24 24"><path d="M12 20s-7-4.5-7-10a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 19 10c0 5.5-7 10-7 10z" stroke="white" strokeWidth="2" fill="rgba(0,0,0,.18)" strokeLinejoin="round" /></svg>
                </div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div style={{ fontWeight: 700, fontSize: 13, color: 'var(--ink)' }}>{c.t}</div>
                <div style={{ fontSize: 12, fontWeight: 600 }}>★ {c.r}</div>
              </div>
              <div style={{ fontSize: 12, color: 'var(--ink-2)' }}>{c.v}</div>
              <div style={{ fontSize: 13, color: 'var(--ink)', marginTop: 2 }}>
                <strong>${c.p}</strong> <span style={{ color: 'var(--ink-2)', fontWeight: 400 }}>/ day</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Mini CTA card */}
      <div style={{ padding: '28px 20px 0' }}>
        <div style={{
          background: 'var(--char)', color: 'var(--cream)',
          borderRadius: 22, padding: 24,
        }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--coral-2)' }}>For vendors</div>
          <h3 style={{ fontFamily: 'var(--display)', fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', margin: '8px 0 8px', lineHeight: 1.1 }}>
            Grow your rental business with Rally.
          </h3>
          <p style={{ fontSize: 13, color: 'rgba(255,248,243,.75)', margin: '0 0 16px' }}>
            Bookings, payments and customer support — built in.
          </p>
          <button style={{
            width: '100%', height: 44, background: 'var(--cream)', color: 'var(--ink)',
            border: 0, borderRadius: 14, fontSize: 14, fontWeight: 600, cursor: 'pointer',
          }}>Become a partner</button>
        </div>
      </div>

      <div style={{ padding: '24px 20px 60px', textAlign: 'center' }}>
        <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>Now serving Southern California</div>
      </div>
    </div>
  );
}

function MobilePreview() {
  return (
    <IOSDevice width={380} height={780}>
      <MobileScreen />
    </IOSDevice>
  );
}

Object.assign(window, { MobileScreen, MobilePreview });